Merge pull request #1241 from aliraza556/Grey-out-attribute-name-field

Disable Attribute Name Field Editing for Custom Node in Blueprint Settings
stakwork · Apr 15, 2024 · d8aab83 · d8aab83
2 parents 9fc0fff + 223057b
commit d8aab83
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 4 deletions.
diff --git a/src/components/AddTypeModal/Body/CustomAttributesStep/FormInput/index.tsx b/src/components/AddTypeModal/Body/CustomAttributesStep/FormInput/index.tsx
@@ -16,6 +16,10 @@ import { parseJson, parsedObjProps } from '../../../utils'
 
 const noSpacePattern = /^[a-z0-9_]+$/
 
+interface CustomField extends Record<'id', string> {
+  isNew?: boolean
+}
+
 export const FormInput = ({ parentParam }: { parentParam: string }) => {
   const [loading, setLoading] = useState(false)
   const [parsedData, setParsedData] = useState<parsedObjProps[]>([])
@@ -62,16 +66,18 @@ export const FormInput = ({ parentParam }: { parentParam: string }) => {
       ) : (
         <InputsWrapper py={8}>
           <Grid container spacing={2}>
-            {fields.map((field, index) => {
+            {fields.map((field: CustomField, index) => {
               const type = watch(`attributes[${index}].type`)
               const checked = watch(`attributes[${index}].required`)
+              const isEditable = field.isNew || false
 
               return (
                 <Fragment key={field.id}>
                   <Grid item xs={5}>
                     <TextInput
                       autoComplete="off"
                       className="text-input"
+                      disabled={!isEditable}
                       id="cy-item-name"
                       maxLength={50}
                       name={`attributes.${index}.key` as const}
@@ -112,7 +118,7 @@ export const FormInput = ({ parentParam }: { parentParam: string }) => {
       )}
       <Flex align="flex-start" py={12}>
         <Button
-          onClick={() => append({ key: '', type: 'string', required: true })}
+          onClick={() => append({ key: '', type: 'string', required: true, isNew: true })}
           size="medium"
           startIcon={<PlusIcon />}
           variant="contained"

diff --git a/src/components/BaseTextInput/WebTextInput/index.tsx b/src/components/BaseTextInput/WebTextInput/index.tsx
@@ -20,7 +20,7 @@ export const WebTextInput = styled.input<Props>`
   color: ${({ colorName }) => colors[colorName]};
   cursor: ${({ disabled }) => (disabled ? 'default' : 'text')};
   margin: 0;
-  opacity: 1;
+  opacity: ${({ disabled }) => (disabled ? 0.5 : 1)};
   outline: 0;
   padding: 0;
   text-align: ${({ textAlign }) => textAlign};

diff --git a/src/components/Booster/__tests__/index.spec.tsx b/src/components/Booster/__tests__/index.spec.tsx
@@ -79,7 +79,7 @@ describe('Booster Component', () => {
     })
   })
 
-  it('shows visual feedback (any svg Icon) during the boosting pryocess', async () => {
+  it('shows visual feedback (any svg Icon) during the boosting process', async () => {
     mockedBoost.mockResolvedValueOnce(undefined)
 
     const { getByTestId } = render(<Booster refId="123" />)