feat: disableOnEdit KeyValuePair

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:
 

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

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)}
     />
   );

src/shared/ResourceForm/fields/KeyValueField.js

@@ -22,6 +22,8 @@ export function KeyValueField({
   lockedKeys = [],
   lockedValues = [],
   required,
+  disableOnEdit,
+  editMode,
   ...props
 }) {
   const { t } = useTranslation();
@@ -85,7 +87,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,
@@ -110,7 +113,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,
@@ -156,6 +161,8 @@ export function KeyValueField({
       ]}
       actions={actions}
       required={required}
+      disableOnEdit={disableOnEdit}
+      editMode={editMode}
       {...props}
     />
   );

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),
                         })}