Merge pull request #278 from kloudlite/input/refactor

Input/refactor
kloudlite · Aug 20, 2024 · 26ac2b5 · 26ac2b5
2 parents baae4f0 + 55071e2
commit 26ac2b5
Show file tree

Hide file tree

Showing 7 changed files with 48 additions and 33 deletions.
diff --git a/src/apps/console/components/name-id-view.tsx b/src/apps/console/components/name-id-view.tsx
@@ -1,7 +1,7 @@
 /* eslint-disable no-nested-ternary */
 import { CircleNotch } from '~/console/components/icons';
 import { ReactNode, forwardRef, useEffect, useState } from 'react';
-import { TextInput } from '~/components/atoms/input';
+import { ITextInputBase, TextInput } from '~/components/atoms/input';
 import useDebounce from '~/root/lib/client/hooks/use-debounce';
 import { NonNullableString } from '~/root/lib/types/common';
 import { handleError } from '~/root/lib/utils/common';
@@ -36,6 +36,7 @@ interface INameIdView {
     };
   }) => void;
   nameErrorLabel: string;
+  size?: ITextInputBase['size'];
 }
 
 export const NameIdView = forwardRef<HTMLInputElement, INameIdView>(
@@ -53,8 +54,9 @@ export const NameIdView = forwardRef<HTMLInputElement, INameIdView>(
       isUpdate,
       handleChange,
       nameErrorLabel,
+      size = 'lg',
     },
-    ref
+    ref,
   ) => {
     const [nameValid, setNameValid] = useState(false);
     const [nameLoading, setNameLoading] = useState(true);
@@ -212,7 +214,7 @@ export const NameIdView = forwardRef<HTMLInputElement, INameIdView>(
           }
       },
       500,
-      [displayName, name, isUpdate]
+      [displayName, name, isUpdate],
     );
 
     return (
@@ -242,7 +244,7 @@ export const NameIdView = forwardRef<HTMLInputElement, INameIdView>(
           }
         }}
         placeholder={placeholder}
-        size="lg"
+        size={size}
         error={
           (!nameLoading || !isUpdate) &&
           ((!nameValid && !!name && !nameLoading) || !!errors)
@@ -254,5 +256,5 @@ export const NameIdView = forwardRef<HTMLInputElement, INameIdView>(
         focusRing
       />
     );
-  }
+  },
 );
diff --git a/src/apps/console/components/search-box.tsx b/src/apps/console/components/search-box.tsx
@@ -46,7 +46,7 @@ export const SearchBox = ({ InputElement = Toolbar.TextInput }) => {
       }
     },
     300,
-    [search]
+    [search],
   );
 
   return (

diff --git a/src/apps/console/routes/_main+/$account+/managed-services/handle-backend-service.tsx b/src/apps/console/routes/_main+/$account+/managed-services/handle-backend-service.tsx
@@ -1,7 +1,11 @@
 /* eslint-disable guard-for-in */
 /* eslint-disable react/destructuring-assignment */
 import { useEffect, useRef, useState } from 'react';
-import { NumberInput, TextInput } from '~/components/atoms/input';
+import {
+  ITextInputBase,
+  NumberInput,
+  TextInput,
+} from '~/components/atoms/input';
 import Popup from '~/components/molecule/popup';
 import { IDialogBase } from '~/console/components/types.d';
 import { useConsoleApi } from '~/console/server/gql/api-provider';
@@ -66,8 +70,8 @@ const RenderField = ({
             dummyEvent(
               `${parseFloat(target.value) * (field.multiplier || 1)}${
                 field.unit
-              }`
-            )
+              }`,
+            ),
           );
         }}
         suffix={field.displayUnit}
@@ -106,16 +110,16 @@ const RenderField = ({
                     dummyEvent(
                       `${parseFloat(target.value) * (field.multiplier || 1)}${
                         field.unit
-                      }`
-                    )
+                      }`,
+                    ),
                   );
                   if (qos) {
                     onChange(`res.${field.name}.max`)(
                       dummyEvent(
                         `${parseFloat(target.value) * (field.multiplier || 1)}${
                           field.unit
-                        }`
-                      )
+                        }`,
+                      ),
                     );
                   }
                 }}
@@ -134,8 +138,8 @@ const RenderField = ({
                       dummyEvent(
                         `${parseFloat(target.value) * (field.multiplier || 1)}${
                           field.unit
-                        }`
-                      )
+                        }`,
+                      ),
                     );
                   }}
                   suffix={field.displayUnit}
@@ -167,13 +171,15 @@ export const Fill = ({
   values,
   handleChange,
   errors,
+  size = 'lg',
 }: {
   selectedService: ISelectedService;
   values: { [key: string]: any };
   handleChange: (key: string) => (e: { target: { value: any } }) => void;
   errors: {
     [key: string]: string | undefined;
   };
+  size?: ITextInputBase['size'];
 }) => {
   const nameRef = useRef<HTMLInputElement>(null);
   useEffect(() => {
@@ -183,6 +189,7 @@ export const Fill = ({
     <div className="flex flex-col gap-3xl min-h-[30vh]">
       <NameIdView
         isUpdate
+        size={size}
         ref={nameRef}
         placeholder="Enter managed service name"
         label="Name"

diff --git a/src/apps/console/routes/_main+/$account+/msvc+/$msv+/settings+/general/route.tsx b/src/apps/console/routes/_main+/$account+/msvc+/$msv+/settings+/general/route.tsx
@@ -152,7 +152,7 @@ const ClusterManagedServiceSettingGeneral = () => {
               <TextInput
                 label="Integrated service URL"
                 value={`${consoleBaseUrl}/${parseName(account)}/${parseName(
-                  managedService
+                  managedService,
                 )}`}
                 message="This is your URL namespace within Kloudlite"
                 disabled
@@ -166,8 +166,8 @@ const ClusterManagedServiceSettingGeneral = () => {
                       onClick={() =>
                         copy(
                           `${consoleBaseUrl}/${parseName(account)}/${parseName(
-                            managedService
-                          )}`
+                            managedService,
+                          )}`,
                         )
                       }
                       className="outline-none hover:bg-surface-basic-hovered active:bg-surface-basic-active rounded text-text-default"
@@ -216,6 +216,7 @@ const ClusterManagedServiceSettingGeneral = () => {
               errors,
               handleChange,
             }}
+            size="md"
           />
         </Box>
 

diff --git a/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx b/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx
@@ -69,13 +69,14 @@ const RenderField = ({
         label={`${field.label}${field.required ? ' *' : ''}`}
         placeholder={field.label}
         value={parseFloat(value) / (field.multiplier || 1) || ''}
+        size="lg"
         onChange={({ target }) => {
           onChange(`res.${field.name}`)(
             dummyEvent(
               `${parseFloat(target.value) * (field.multiplier || 1)}${
                 field.unit
-              }`
-            )
+              }`,
+            ),
           );
         }}
         suffix={field.displayUnit}
@@ -92,6 +93,7 @@ const RenderField = ({
         suffix={field.displayUnit}
         error={!!errors[fieldKey]}
         message={errors[fieldKey]}
+        size="lg"
       />
     );
   }
@@ -105,6 +107,7 @@ const RenderField = ({
           <div className="flex flex-row gap-xl items-end flex-1 ">
             <div className="flex-1">
               <NumberInput
+                size="lg"
                 error={!!errors[`${fieldKey}.min`]}
                 message={errors[`${fieldKey}.min`]}
                 placeholder={qos ? field.label : `${field.label} min`}
@@ -114,16 +117,16 @@ const RenderField = ({
                     dummyEvent(
                       `${parseFloat(target.value) * (field.multiplier || 1)}${
                         field.unit
-                      }`
-                    )
+                      }`,
+                    ),
                   );
                   if (qos) {
                     onChange(`res.${field.name}.max`)(
                       dummyEvent(
                         `${parseFloat(target.value) * (field.multiplier || 1)}${
                           field.unit
-                        }`
-                      )
+                        }`,
+                      ),
                     );
                   }
                 }}
@@ -133,6 +136,7 @@ const RenderField = ({
             {!qos && (
               <div className="flex-1">
                 <NumberInput
+                  size="lg"
                   error={!!errors[`${fieldKey}.max`]}
                   message={errors[`${fieldKey}.max`]}
                   placeholder={`${field.label} max`}
@@ -142,8 +146,8 @@ const RenderField = ({
                       dummyEvent(
                         `${parseFloat(target.value) * (field.multiplier || 1)}${
                           field.unit
-                        }`
-                      )
+                        }`,
+                      ),
                     );
                   }}
                   suffix={field.displayUnit}
@@ -383,7 +387,7 @@ const ReviewView = ({
 }) => {
   const renderFieldView = () => {
     const fields = Object.entries(values.res).filter(
-      ([k, _v]) => !['resources'].includes(k)
+      ([k, _v]) => !['resources'].includes(k),
     );
     if (fields.length > 0) {
       return (
@@ -584,7 +588,7 @@ const ManagedServiceLayout = () => {
           'Cluster name is required',
           (v) => {
             return !(currentStep === 2 && !v);
-          }
+          },
         ),
         selectedTemplate: Yup.object({}).required('Template is required.'),
         // @ts-ignore
@@ -604,9 +608,9 @@ const ManagedServiceLayout = () => {
                     (acc: any, curr: any) => {
                       return { ...acc, [curr.name]: curr };
                     },
-                    {}
-                  )
-                )
+                    {},
+                  ),
+                ),
               );
             }
 
@@ -689,7 +693,7 @@ const ManagedServiceLayout = () => {
           ...flatM(
             selectedTemplate?.template?.fields.reduce((acc, curr) => {
               return { ...acc, [curr.name]: curr };
-            }, {})
+            }, {}),
           ),
         },
       }));

diff --git a/...console/routes/_main+/$account+/settings+/image-pull-secrets/handle-image-pull-secret.tsx b/...console/routes/_main+/$account+/settings+/image-pull-secrets/handle-image-pull-secret.tsx
@@ -226,6 +226,7 @@ const Root = (props: IDialog) => {
           message={errors.format}
           value={values.format}
           label="Format"
+          size="lg"
           onChange={(_, value) => {
             handleChange('format')(dummyEvent(value));
           }}

diff --git a/src/design-system/components/atoms/input.tsx b/src/design-system/components/atoms/input.tsx
@@ -164,9 +164,9 @@ export const TextInputBase = forwardRef<HTMLInputElement, ITextInputBase>(
               'pr-0': component !== 'input',
             },
             {
+              'h-[38px]': size === 'md' && component === 'input',
               'h-[48px]': size === 'lg' && component === 'input',
               'h-[60px]': size === 'xl' && component === 'input',
-              'h-[32px]': size === 'md' && component === 'input',
             },
             size === 'xl' ? '!px-2xl' : 'px-lg',
             className,
-Original file line number
+Diff line change
@@ Expand Up @@
           }
         },
 ,
-        [search]
+        [search],
       );
       return (
@@ Expand Down @@