diff --git a/docs/extensibility/60-form-widgets.md b/docs/extensibility/60-form-widgets.md index 1b5ebdeb8d..12bdf187d4 100644 --- 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 index 32df824e17..72a66bbc06 100644 --- 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 index 702d41676b..31d7224c00 100644 --- 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 index 34b47410a3..db76e2402c 100644 --- 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(); @@ -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} /> ); diff --git a/src/shared/ResourceForm/fields/MultiInput.js b/src/shared/ResourceForm/fields/MultiInput.js index f57291e20a..ebbc11a630 100644 --- 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) && (