fix(portal): fix uploading yaml file validation failed on linux (need…

… check) (#291)

* fix(portal): fix uploading yaml file validation failed on linux (need check)

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

* fix(portal): remove deprecated pages

* bypass coverage portal UploadYaml.tsx file

kraken-app/kraken-app-portal/package.json

@@ -32,7 +32,7 @@
     "js-base64": "^3.7.7",
     "js-yaml": "^4.1.0",
     "lodash": "^4.17.21",
-    "nanoid": "^5.0.7",
+    "nanoid": "^5.0.9",
     "path": "^0.12.7",
     "qs": "^6.12.1",
     "react": "^18.2.0",

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;
+    }
   }
 }