fix(portal): adjust alignment in server list + fix validators

kraken-app/kraken-app-portal/src/pages/APIServerList/components/APIServerCard.tsx

@@ -106,7 +106,7 @@ const APIServerCard = ({ item, refetchList }: Props) => {
                 ) : (
                   <Tag color={isApiInUse ? "blue" : ""} >
                     <Text.LightSmall>
-                    {isApiInUse ? "In use" : "Not in use"}
+                      {isApiInUse ? "In use" : "Not in use"}
                     </Text.LightSmall>
                   </Tag>
                 )}
@@ -184,8 +184,8 @@ const APIServerCard = ({ item, refetchList }: Props) => {
             </Flex>
             <Flex vertical gap={8} align="flex-start" style={{ marginTop: 12 }}>
               {environmentData?.map((e) => (
-                <Flex gap={8} justify="flex-start" key={e.name}>
-                  <Text.LightMedium style={{ width: 120 }}>
+                <Flex gap={8} justify="flex-start" key={e.name} align="center">
+                  <Text.LightMedium style={{ display: 'inline-block', width: 120, textAlign: 'left' }}>
                     {e.name}
                   </Text.LightMedium>
                   <Typography.Text style={{ whiteSpace: "break-spaces" }}>

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

@@ -96,13 +96,13 @@ it('should reject with an error if the URL is invalid', async () => {
 
 it('should resolve if the server name is valid', async () => {
   const validateNameMock = vi.fn().mockResolvedValue({ data: true });
-  const result = await validateServerName(validateNameMock, 'product-1', 'validName');
+  const result = await validateServerName(validateNameMock, 'product-1', 'validName', 'name1');
   expect(result).toBeUndefined(); // Promise resolves without rejection
   expect(validateNameMock).toHaveBeenCalledWith({ productId: 'product-1', name: 'validName' });
 });
 
 it('should reject with an error message if the server name is taken', async () => {
   const validateNameMock = vi.fn().mockResolvedValue({ data: false });
-  await expect(validateServerName(validateNameMock, 'product-1', 'takenName')).rejects.toThrow('The name takenName is already taken');
+  await expect(validateServerName(validateNameMock, 'product-1', 'takenName', 'name1')).rejects.toThrow('The name takenName is already taken');
   expect(validateNameMock).toHaveBeenCalledWith({ productId: 'product-1', name: 'takenName' });
 });

kraken-app/kraken-app-portal/src/pages/NewAPIServer/components/SelectAPIServer.tsx

@@ -4,11 +4,17 @@ import { Text } from "@/components/Text";
 import { useGetValidateServerName } from '@/hooks/product';
 import { useAppStore } from '@/stores/app.store';
 import { validateServerName, validateURL } from '@/utils/helpers/validators';
-import { Form, Input } from "antd";
+import { Form, FormInstance, Input } from "antd";
+import { useMemo } from 'react';
 
-const SelectAPIServer = () => {
+type Props = {
+  form?: FormInstance<any>;
+};
+
+const SelectAPIServer = ({ form }: Props) => {
   const { currentProduct } = useAppStore();
   const { mutateAsync: validateName } = useGetValidateServerName();
+  const originalName = useMemo(() => (form?.getFieldsValue(["name"])?.name ?? null), [form]);
   return (
     <>
       <Flex gap={8} justifyContent="flex-start">
@@ -25,12 +31,11 @@ const SelectAPIServer = () => {
             message: "Please complete this field.",
           },
           {
-            validator: (_, name) => validateServerName(validateName, currentProduct, name)
+            validator: (_, name) => validateServerName(validateName, currentProduct, name, originalName)
           }
         ]}
         validateDebounce={1000}
         labelCol={{ span: 24 }}
-
       >
         <Input data-testid="api-seller-name-input" placeholder="Add API Server Name" style={{ width: "100%" }} />
       </Form.Item>

kraken-app/kraken-app-portal/src/pages/NewAPIServer/index.tsx

@@ -195,7 +195,7 @@ const NewAPIServer = () => {
         >
           <main id="12" className={styles.paper} style={{ flex: 1 }}>
             <div id="12" style={{ maxWidth: "60%", minWidth: 600 }}>
-              <SelectAPIServer />
+              <SelectAPIServer form={form}/>
               <AddEnv form={form} env={env} />
               <UploadYaml form={form} />
             </div>

kraken-app/kraken-app-portal/src/utils/helpers/validators.ts

@@ -3,9 +3,18 @@ import { isEmpty } from 'lodash';
 import { IProductIdAndNameParams } from '../types/product.type';
 import { isURL } from './url';
 
-export const validateServerName = async (validateName: UseMutateAsyncFunction<any, Error, IProductIdAndNameParams, unknown>, currentProduct: string, name: string) => {
+export const validateServerName = async (
+  validateName: UseMutateAsyncFunction<any, Error, IProductIdAndNameParams, unknown>,
+  currentProduct: string,
+  name: string,
+  originalName: string
+) => {
+
+  if (name === originalName) return Promise.resolve()
+
   const { data: isValid } = await validateName({ productId: currentProduct, name });
-  if (isValid) {
+
+  if (name === originalName || isValid) {
     return Promise.resolve();
   } else {
     return Promise.reject(new Error(`The name ${name} is already taken`));