From 02f5fd51cb230846140f240442e306620c97b298 Mon Sep 17 00:00:00 2001 From: Bikash Date: Tue, 20 Aug 2024 11:38:16 +0545 Subject: [PATCH] fixed input sizes in different pages --- .../apps/console/components/name-id-view.tsx | 12 ++++--- .../apps/console/components/search-box.tsx | 2 +- .../handle-backend-service.tsx | 25 +++++++++------ .../msvc+/$msv+/settings+/general/route.tsx | 7 ++-- .../$account+/new-managed-service/_index.tsx | 32 +++++++++++-------- .../handle-image-pull-secret.tsx | 1 + 6 files changed, 47 insertions(+), 32 deletions(-) diff --git a/web/src/apps/console/components/name-id-view.tsx b/web/src/apps/console/components/name-id-view.tsx index 48d253310..444023eed 100644 --- a/web/src/apps/console/components/name-id-view.tsx +++ b/web/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( @@ -53,8 +54,9 @@ export const NameIdView = forwardRef( 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( } }, 500, - [displayName, name, isUpdate] + [displayName, name, isUpdate], ); return ( @@ -242,7 +244,7 @@ export const NameIdView = forwardRef( } }} placeholder={placeholder} - size="lg" + size={size} error={ (!nameLoading || !isUpdate) && ((!nameValid && !!name && !nameLoading) || !!errors) @@ -254,5 +256,5 @@ export const NameIdView = forwardRef( focusRing /> ); - } + }, ); diff --git a/web/src/apps/console/components/search-box.tsx b/web/src/apps/console/components/search-box.tsx index 5c6f5fc19..c9c3704aa 100644 --- a/web/src/apps/console/components/search-box.tsx +++ b/web/src/apps/console/components/search-box.tsx @@ -46,7 +46,7 @@ export const SearchBox = ({ InputElement = Toolbar.TextInput }) => { } }, 300, - [search] + [search], ); return ( diff --git a/web/src/apps/console/routes/_main+/$account+/managed-services/handle-backend-service.tsx b/web/src/apps/console/routes/_main+/$account+/managed-services/handle-backend-service.tsx index 8cff78a24..0ee12ee7a 100644 --- a/web/src/apps/console/routes/_main+/$account+/managed-services/handle-backend-service.tsx +++ b/web/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,6 +171,7 @@ export const Fill = ({ values, handleChange, errors, + size = 'lg', }: { selectedService: ISelectedService; values: { [key: string]: any }; @@ -174,6 +179,7 @@ export const Fill = ({ errors: { [key: string]: string | undefined; }; + size?: ITextInputBase['size']; }) => { const nameRef = useRef(null); useEffect(() => { @@ -183,6 +189,7 @@ export const Fill = ({
{ { 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" /> diff --git a/web/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx b/web/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx index bb05eab56..fdd346aa9 100644 --- a/web/src/apps/console/routes/_main+/$account+/new-managed-service/_index.tsx +++ b/web/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 = ({
{ 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/web/src/apps/console/routes/_main+/$account+/settings+/image-pull-secrets/handle-image-pull-secret.tsx b/web/src/apps/console/routes/_main+/$account+/settings+/image-pull-secrets/handle-image-pull-secret.tsx index 54ca227e4..65b20f5d0 100644 --- a/web/src/apps/console/routes/_main+/$account+/settings+/image-pull-secrets/handle-image-pull-secret.tsx +++ b/web/src/apps/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)); }}