feat: disableOnEdit KeyValuePair (#3316)

* added disableOnEdit for KeyValuePair widget * updated schema-form.yaml for keyvalue pair * fixed kvp always disabling * added disabling of key value pairs entry on edit * added disabling of delete button on edit * added disableOnEdit for KeyValuePair docs * Update docs/extensibility/60-form-widgets.md Co-authored-by: Natalia Sitko <80401180+nataliasitko@users.noreply.github.com> * Update public/schemas/schema-form.yaml Co-authored-by: Natalia Sitko <80401180+nataliasitko@users.noreply.github.com> --------- Co-authored-by: Natalia Sitko <80401180+nataliasitko@users.noreply.github.com>
kyma-project · Sep 17, 2024 · c95b243 · c95b243
1 parent 408b62a
commit c95b243
Show file tree

Hide file tree

Showing 5 changed files with 27 additions and 3 deletions.
diff --git a/docs/extensibility/60-form-widgets.md b/docs/extensibility/60-form-widgets.md
@@ -313,6 +313,7 @@ These are the available `KeyValuePair` widget parameters:
 | **inputInfo**         | No       | string              | A string below the input field that shows how to fill in the input. You can use the {{ [`name`] (`link`) }} format to display a `name` instead of a `link.              |
 | **description**       | No       | string              | A string displayed in a tooltip when you hover over a question mark icon, next to the input's label. The default value is taken from the CustomResourceDefintion (CRD). |
 | **defaultExpanded**   | No       | boolean             | Specifies if the widget should be expanded by default. Defaults to `false`.                                                                                             |
+| **disableOnEdit**     | No       | boolean             | Disables all key-value pairs in edit mode. Defaults to `false`.                                                                                                         |
 
 See the following example:
 

diff --git a/public/schemas/schema-form.yaml b/public/schemas/schema-form.yaml
@@ -153,6 +153,10 @@ $widgets:
           const: KeyValuePair
     then:
       properties:
+        disableOnEdit:
+          type: boolean
+          description: A boolean that specifies if KeyValuePair is disabled on edit.
+          default: false
         keyEnum:
           type: array
           description: An array of options to generate a key input field with a dropdown

diff --git a/src/components/Extensibility/components-form/KeyValuePairRenderer.js b/src/components/Extensibility/components-form/KeyValuePairRenderer.js
@@ -77,10 +77,16 @@ export function KeyValuePairRenderer({
   required,
   resource,
   nestingLevel = 0,
+  editMode,
+  ...props
 }) {
   // TODO the value obtained by ui-schema is undefined for this component
   value = getObjectValueWorkaround(schema, resource, storeKeys, value);
 
+  const disableOnEdit = schema.get('disableOnEdit') || false;
+  const disabledKeys =
+    disableOnEdit && editMode ? value.keySeq().toArray() : [];
+
   const { tFromStoreKeys, t: tExt } = useGetTranslation();
   const { t } = useTranslation();
 
@@ -123,6 +129,10 @@ export function KeyValuePairRenderer({
       title={titleTranslation}
       initialValue={valueInfo.type === 'object' ? {} : ''}
       defaultOpen={schema.get('defaultExpanded') ?? false}
+      lockedKeys={disabledKeys}
+      lockedValues={disabledKeys}
+      disableOnEdit={disableOnEdit}
+      editMode={editMode}
       {...getPropsFromSchema(schema, required, tExt)}
     />
   );

diff --git a/src/shared/ResourceForm/fields/KeyValueField.js b/src/shared/ResourceForm/fields/KeyValueField.js
@@ -22,6 +22,8 @@ export function KeyValueField({
   lockedKeys = [],
   lockedValues = [],
   required,
+  disableOnEdit,
+  editMode,
   ...props
 }) {
   const { t } = useTranslation();
@@ -88,7 +90,8 @@ export function KeyValueField({
             {input.key({
               fullWidth: true,
               className: 'full-width',
-              disabled: lockedKeys.includes(value?.key),
+              disabled:
+                lockedKeys.includes(value?.key) || (disableOnEdit && editMode),
               key: 'key',
               value: value?.key || '',
               ref: ref,
@@ -116,7 +119,9 @@ export function KeyValueField({
               onKeyDown: e => focus(e),
               value: dataValue(value),
               placeholder: t('components.key-value-field.enter-value'),
-              disabled: lockedValues.includes(value?.key),
+              disabled:
+                lockedValues.includes(value?.key) ||
+                (disableOnEdit && editMode),
               setValue: val => {
                 setValue({
                   ...value,
@@ -162,6 +167,8 @@ export function KeyValueField({
       ]}
       actions={actions}
       required={required}
+      disableOnEdit={disableOnEdit}
+      editMode={editMode}
       {...props}
     />
   );

diff --git a/src/shared/ResourceForm/fields/MultiInput.js b/src/shared/ResourceForm/fields/MultiInput.js
@@ -29,6 +29,8 @@ export function MultiInput({
   newItemAction,
   newItemActionWidth = 1,
   inputInfo,
+  disableOnEdit,
+  editMode,
   ...props
 }) {
   const { t } = useTranslation();
@@ -186,7 +188,7 @@ export function MultiInput({
                   {!isLast(index) && (
                     <div className="bsl-col-md--1">
                       <Button
-                        disabled={readOnly}
+                        disabled={readOnly || (disableOnEdit && editMode)}
                         className={classnames({
                           hidden: isEntryLocked(entry),
                         })}