feat: disableOnEdit Text widget (#3117)

* added disableOnEdit for Text widgets * updated Text widget documentation
kyma-project · Aug 20, 2024 · 8fb0252 · 8fb0252
1 parent 358e471
commit 8fb0252
Show file tree

Hide file tree

Showing 3 changed files with 8 additions and 1 deletion.
diff --git a/docs/extensibility/60-form-widgets.md b/docs/extensibility/60-form-widgets.md
@@ -37,6 +37,7 @@ These are the available `Text` widget parameters:
 | **readOnly**          | No       | boolean             | Specifies if a field is read-only. Defaults to `false`.                                                                                                                                                              |
 | **decodable**         | No       | boolean             | Specifies that the field is base64-encoded and can be decoded in the UI. It can't be used together with **enum**.                                                                                                    |
 | **decodedPlacehoder** | No       | string              | An optional alternative placeholder to use when the field is decoded.                                                                                                                                                |
+| **disableOnEdit**     | No       | boolean             | Disables a field in edit mode, defaults to `false`. Ignored if **readOnly** is set to `true`.                                                                                                                        |
 
 See the following examples:
 

diff --git a/public/schemas/schema-form.yaml b/public/schemas/schema-form.yaml
@@ -308,3 +308,7 @@ $widgets:
         decodedPlaceholder:
           type: string
           description: optional alternative placeholder to use when the field is decoded
+        disableOnEdit:
+          type: boolean
+          description: a boolean which specifies if field is disabled on edit.
+          default: false
diff --git a/src/components/Extensibility/components-form/StringRenderer.js b/src/components/Extensibility/components-form/StringRenderer.js
@@ -19,13 +19,15 @@ export function StringRenderer({
   required,
   placeholder,
   originalResource,
+  editMode,
   ...props
 }) {
   const { t } = useTranslation();
   const { tFromStoreKeys, t: tExt, exists } = useGetTranslation();
   const schemaPlaceholder = schema.get('placeholder');
   const readOnly = schema.get('readOnly') ?? false;
   const decodable = schema.get('decodable');
+  const disableOnEdit = schema.get('disableOnEdit');
   const [decoded, setDecoded] = useState(true);
 
   let decodeError = false;
@@ -142,7 +144,7 @@ export function StringRenderer({
               },
             });
         }}
-        disabled={readOnly}
+        disabled={readOnly || (disableOnEdit && editMode)}
         isListItem={props.isListItem}
         label={tFromStoreKeys(storeKeys, schema)}
         data-testid={storeKeys.join('.') || tFromStoreKeys(storeKeys, schema)}