fix(portal): Change styles of sonata & seller apis input

kraken-app/kraken-app-portal/.env

@@ -1 +1 @@
-VITE_BASE_API=http://localhost:8001
+VITE_BASE_API="https://kraken-portal-cn.dev.consolecore.cc/api"

kraken-app/kraken-app-portal/src/__test__/pages/NewAPIMapping/propertyMappingInput.test.tsx

@@ -1,3 +1,4 @@
+import { AutoGrowingInput } from "@/components/form";
 import { SourceInput as RequestSourceInput } from "@/pages/NewAPIMapping/components/RequestItem/SourceInput";
 import { TargetInput as RequestTargetInput } from "@/pages/NewAPIMapping/components/RequestItem/TargetInput";
 import { SourceInput as ResponseSourceInput } from "@/pages/NewAPIMapping/components/ResponseItem/SourceInput";
@@ -194,3 +195,27 @@ describe("NewAPIMapping > response mapping", () => {
     expect(response.setActiveSonataResponse).toHaveBeenCalledTimes(1);
   });
 });
+
+describe('auto growing height input component tests', () => {
+  it('should render with initial value', () => {
+    const handleChange = vi.fn()
+    const { getByRole } = render(<AutoGrowingInput value="hello world" onChange={handleChange} />)
+
+    const textbox = getByRole('textbox')
+    expect(textbox).toHaveTextContent("hello world")
+
+    fireEvent.focus(textbox)
+    fireEvent.blur(textbox)
+    expect(handleChange).toHaveBeenCalledTimes(1)
+  })
+
+  it('should not change value once disabled', () => {
+    const handleChange = vi.fn()
+    const { getByRole } = render(<AutoGrowingInput disabled onChange={handleChange} />)
+
+    const textbox = getByRole('textbox')
+    fireEvent.keyDown(textbox, { key: 'A' })
+    fireEvent.blur(textbox)
+    expect(handleChange).toHaveBeenCalledTimes(0)
+  })
+})

kraken-app/kraken-app-portal/src/components/form/AutoGrowingInput.tsx

@@ -4,7 +4,7 @@ import { useEffect, useState } from "react";
 import { InputProps } from "antd";
 
 export function AutoGrowingInput({
-  prefix, suffix, className, value, placeholder,disabled, onChange, onBlur, ...rest
+  prefix, suffix, className, value, placeholder, disabled, onChange, onBlur, ...rest
 }: Readonly<{ value?: string; onChange?: (value: string) => void } & Omit<InputProps, 'value' | 'onChange'>>) {
   const [text, setText] = useState<string>('')
   const [isFocused, setIsFocused] = useState(false)
@@ -15,23 +15,29 @@ export function AutoGrowingInput({
 
   return (
     <div {...rest}
-      className={classNames(className, styles.autoGrowingInput, isFocused && styles.focused)}
+      className={classNames(className, styles.autoGrowingInput, isFocused && styles.focused, disabled && styles.disabled)}
     >
       {prefix}
       <span
-        className={styles.content}
+        className={classNames(styles.content, disabled && styles.disabled)}
         tabIndex={0}
         role="textbox"
-        contentEditable='true'
+        contentEditable={disabled ? 'false' : 'true'}
         dangerouslySetInnerHTML={{ __html: text }}
         // eslint-disable-next-line @typescript-eslint/ban-ts-comment
         // @ts-ignore
         style={{ '--placeholder': `"${placeholder}"` }}
-        onFocus={() => setIsFocused(true)}
+        onFocus={() => {
+          if (!disabled) {
+            setIsFocused(true)
+          }
+        }}
         onBlur={e => {
           setIsFocused(false)
-          onChange?.(e.target.textContent ?? '')
-          onBlur?.(e as any)
+          if (!disabled) {
+            onChange?.(e.target.textContent ?? '')
+            onBlur?.(e as any)
+          }
         }}
         onKeyDown={e => {
           if (e.key === 'Enter' || disabled) {

kraken-app/kraken-app-portal/src/components/form/index.module.scss

@@ -8,6 +8,11 @@
   display: flex;
   align-items: center;
 
+  &.disabled {
+    border-color: transparent !important;
+    pointer-events: none;
+  }
+
   &.focused {
     border-color: var(--primary);
 
@@ -20,7 +25,7 @@
     outline-color: var(--primary);
     outline-style: solid;
   }
-  
+
   .content {
     padding: 6px 7px;
     flex: 1;
@@ -36,5 +41,9 @@
     &:focus-visible {
       outline: none;
     }
+
+    &.disabled {
+      pointer-events: none;
+    }
   }
 }

kraken-app/kraken-app-portal/src/pages/APIServerEditSelection/__test__/index.test.tsx

@@ -1,15 +1,40 @@
-import { render } from "@testing-library/react";
-import { QueryClientProvider } from "@tanstack/react-query";
-import { queryClient } from "@/utils/helpers/reactQuery";
-import { BrowserRouter } from "react-router-dom";
+import { render } from "@/__test__/utils";
 import APIServerEditSelection from "..";
-test("select API", () => {
-  const { container } = render(
-    <QueryClientProvider client={queryClient}>
-      <BrowserRouter>
-        <APIServerEditSelection />
-      </BrowserRouter>
-    </QueryClientProvider>
-  );
-  expect(container).toBeInTheDocument();
+import * as productHooks from '@/hooks/product'
+
+describe("API server edit selection", () => {
+  it('should render without detail data', () => {
+    const { container, getByText } = render(
+      <APIServerEditSelection />
+    );
+    expect(container).toBeInTheDocument();
+    expect(getByText('Seller API Setup')).toBeInTheDocument()
+    expect(getByText('OK')).toBeInTheDocument()
+    expect(getByText('Cancel')).toBeInTheDocument()
+  })
+
+  it('should render with detail data', () => {
+    vi.spyOn(productHooks, "useGetComponentDetail").mockReturnValue({
+      data: {
+        facets: {
+          baseSpec: {
+            content: "content",
+          },
+          selectedAPIS: [],
+          metadata: {
+            name: "metadata",
+            version: "1.0"
+          }
+        },
+      },
+      isLoading: false,
+      isFetching: false,
+      isFetched: true
+    } as any)
+
+    const { container } = render(
+      <APIServerEditSelection />
+    );
+    expect(container).toBeInTheDocument();
+  })
 });

kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/RequestItem/SourceInput.tsx

@@ -64,6 +64,7 @@ export function SourceInput({
             [styles.active]: isFocused,
             [styles.error]:
               errors?.requestIds?.has(item.id as any) && !item.source,
+            [styles.disabled]: !item.customizedField,
           })}
           value={item.source}
           style={{ flex: 1 }}

kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/RequestItem/index.module.scss

@@ -23,7 +23,6 @@
 }
 
 .sellerPropItemWrapper {
-  background: #f2f3f5;
   cursor: pointer;
 
   input {
@@ -46,11 +45,11 @@
   text-overflow: ellipsis;
   cursor: pointer;
 
-  &:disabled {
+  &.disabled {
     color: var(--black) !important;
     background: var(--lightgray) !important;
     border: none !important;
-    cursor: default;
+    cursor: not-allowed;
   }
 
   &.error {

kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/ResponseItem/TargetInput.tsx

@@ -49,6 +49,7 @@ export function TargetInput({
           className={clsx(styles.input, {
             [styles.activeInput]: isFocused,
             [styles.error]: errors?.responseIds?.has(item.id!) && !item.target,
+            [styles.disabled]: !item.customizedField,
           })}
           value={item.target}
           onClick={() => {

kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/ResponseItem/index.module.scss

@@ -34,11 +34,11 @@
     text-overflow: ellipsis;
   }
 
-  &:disabled {
+  &.disabled {
     color: #000 !important;
     background: #f0f2f5 !important;
     border: none !important;
-    cursor: default;
+    cursor: not-allowed;
   }
 
   &.error {

kraken-app/kraken-app-portal/src/pages/NewAPIMapping/components/SonataPropMapping/index.module.scss

@@ -21,7 +21,6 @@
   border-radius: 6px;
   padding: 17px;
   .sellerPropItemWrapper {
-    background: #f2f3f5;
     cursor: pointer;
     &.active {
       border-radius: 2px;