Allow to disable columns in confirmation modal

CHANGELOG.md

@@ -6,6 +6,7 @@
 
 - Add files upload examples and fix form data header (#357)
 - Add code parameters with builder and add initial request to element value changed code (#358)
+- Allow to disable columns in confirmation modal (#360)
 
 ## 3.6.0 (2023-01-10)
 

src/components/FormPanel/FormPanel.test.tsx

@@ -17,7 +17,15 @@ import {
   TEST_IDS,
 } from '../../constants';
 import { useDatasourceRequest } from '../../hooks';
-import { ButtonOrientation, ButtonVariant, FormElement, LocalFormElement, UpdateEnabledMode } from '../../types';
+import {
+  ButtonOrientation,
+  ButtonVariant,
+  FormElement,
+  LocalFormElement,
+  ModalColumnName,
+  PanelOptions,
+  UpdateEnabledMode,
+} from '../../types';
 import { getFormElementsSelectors, getPanelSelectors, toLocalFormElement } from '../../utils';
 import { FormElements } from '../FormElements';
 import { FormPanel } from './FormPanel';
@@ -1968,7 +1976,7 @@ describe('Panel', () => {
   });
 
   describe('Confirm changes', () => {
-    const prepareComponent = async () => {
+    const prepareComponent = async (options?: Partial<PanelOptions>) => {
       let triggerChangeElement: (element: LocalFormElement) => void = jest.fn();
       jest.mocked(FormElements).mockImplementation(({ onChangeElement }) => {
         triggerChangeElement = onChangeElement;
@@ -2002,7 +2010,11 @@ describe('Panel', () => {
       await act(async () =>
         render(
           getComponent({
-            options: { elements: [elementWithInitialValue, elementWithoutInitialValue], update: { confirm: true } },
+            options: {
+              elements: [elementWithInitialValue, elementWithoutInitialValue],
+              update: { confirm: true },
+              ...options,
+            },
           })
         )
       );
@@ -2108,6 +2120,95 @@ describe('Panel', () => {
       );
       expect(updatedFieldSelectors.confirmModalFieldValue()).toHaveTextContent('111');
     });
+
+    it('Should show only included columns', async () => {
+      const { triggerChangeElement, elementWithInitialValue } = await prepareComponent({
+        confirmModal: {
+          columns: {
+            include: [ModalColumnName.NEW_VALUE],
+          },
+        } as any,
+      });
+
+      /**
+       * Trigger field change
+       */
+      await act(async () =>
+        triggerChangeElement({
+          ...elementWithInitialValue,
+          value: '111',
+        })
+      );
+
+      /**
+       * Check if submit button is enabled
+       */
+      expect(selectors.buttonSubmit()).not.toBeDisabled();
+
+      /**
+       * Open confirm modal
+       */
+      await act(async () => fireEvent.click(selectors.buttonSubmit()));
+
+      /**
+       * Check confirm modal presence
+       */
+      expect(selectors.confirmModalContent()).toBeInTheDocument();
+
+      /**
+       * Check updated field presence in confirm modal
+       */
+      const updatedField = selectors.confirmModalField(false, elementWithInitialValue.id);
+      expect(updatedField).toBeInTheDocument();
+
+      /**
+       * Check if only included columns are shown
+       */
+      const updatedFieldSelectors = getPanelSelectors(within(updatedField));
+      expect(updatedFieldSelectors.confirmModalFieldTitle(true)).not.toBeInTheDocument();
+      expect(updatedFieldSelectors.confirmModalFieldPreviousValue(true)).not.toBeInTheDocument();
+      expect(updatedFieldSelectors.confirmModalFieldValue()).toBeInTheDocument();
+    });
+
+    it('Should not show table if no included columns', async () => {
+      const { triggerChangeElement, elementWithInitialValue } = await prepareComponent({
+        confirmModal: {
+          columns: {
+            include: [],
+          },
+        } as any,
+      });
+
+      /**
+       * Trigger field change
+       */
+      await act(async () =>
+        triggerChangeElement({
+          ...elementWithInitialValue,
+          value: '111',
+        })
+      );
+
+      /**
+       * Check if submit button is enabled
+       */
+      expect(selectors.buttonSubmit()).not.toBeDisabled();
+
+      /**
+       * Open confirm modal
+       */
+      await act(async () => fireEvent.click(selectors.buttonSubmit()));
+
+      /**
+       * Check confirm modal presence
+       */
+      expect(selectors.confirmModalContent()).toBeInTheDocument();
+
+      /**
+       * Check no columns are show
+       */
+      expect(selectors.confirmModalField(true, elementWithInitialValue.id)).not.toBeInTheDocument();
+    });
   });
 
   describe('Save default values', () => {

src/components/FormPanel/FormPanel.tsx

@@ -43,7 +43,14 @@ import {
   TEST_IDS,
 } from '../../constants';
 import { useDatasourceRequest, useFormElements, useMutableState } from '../../hooks';
-import { ButtonVariant, FormElement, LocalFormElement, PanelOptions, UpdateEnabledMode } from '../../types';
+import {
+  ButtonVariant,
+  FormElement,
+  LocalFormElement,
+  ModalColumnName,
+  PanelOptions,
+  UpdateEnabledMode,
+} from '../../types';
 import {
   convertToElementValue,
   elementValueChangedCodeParameters,
@@ -1078,19 +1085,25 @@ export const FormPanel: React.FC<Props> = ({
         body={
           <div data-testid={TEST_IDS.panel.confirmModalContent}>
             <h4>{options.confirmModal.body}</h4>
-            {options.layout.variant !== LayoutVariant.NONE && (
+            {options.layout.variant !== LayoutVariant.NONE && options.confirmModal.columns.include.length > 0 && (
               <table className={styles.confirmTable}>
                 <thead>
                   <tr className={styles.confirmTable}>
-                    <td className={styles.confirmTableTd}>
-                      <b>{options.confirmModal.columns.name}</b>
-                    </td>
-                    <td className={styles.confirmTableTd}>
-                      <b>{options.confirmModal.columns.oldValue}</b>
-                    </td>
-                    <td className={styles.confirmTableTd}>
-                      <b>{options.confirmModal.columns.newValue}</b>
-                    </td>
+                    {options.confirmModal.columns.include.includes(ModalColumnName.NAME) && (
+                      <td className={styles.confirmTableTd}>
+                        <b>{options.confirmModal.columns.name}</b>
+                      </td>
+                    )}
+                    {options.confirmModal.columns.include.includes(ModalColumnName.OLD_VALUE) && (
+                      <td className={styles.confirmTableTd}>
+                        <b>{options.confirmModal.columns.oldValue}</b>
+                      </td>
+                    )}
+                    {options.confirmModal.columns.include.includes(ModalColumnName.NEW_VALUE) && (
+                      <td className={styles.confirmTableTd}>
+                        <b>{options.confirmModal.columns.newValue}</b>
+                      </td>
+                    )}
                   </tr>
                 </thead>
                 <tbody>
@@ -1116,18 +1129,24 @@ export const FormPanel: React.FC<Props> = ({
                           key={element.id}
                           data-testid={TEST_IDS.panel.confirmModalField(element.id)}
                         >
-                          <td className={styles.confirmTableTd} data-testid={TEST_IDS.panel.confirmModalFieldTitle}>
-                            {element.title || element.tooltip}
-                          </td>
-                          <td
-                            className={styles.confirmTableTd}
-                            data-testid={TEST_IDS.panel.confirmModalFieldPreviousValue}
-                          >
-                            *********
-                          </td>
-                          <td className={styles.confirmTableTd} data-testid={TEST_IDS.panel.confirmModalFieldValue}>
-                            *********
-                          </td>
+                          {options.confirmModal.columns.include.includes(ModalColumnName.NAME) && (
+                            <td className={styles.confirmTableTd} data-testid={TEST_IDS.panel.confirmModalFieldTitle}>
+                              {element.title || element.tooltip}
+                            </td>
+                          )}
+                          {options.confirmModal.columns.include.includes(ModalColumnName.OLD_VALUE) && (
+                            <td
+                              className={styles.confirmTableTd}
+                              data-testid={TEST_IDS.panel.confirmModalFieldPreviousValue}
+                            >
+                              *********
+                            </td>
+                          )}
+                          {options.confirmModal.columns.include.includes(ModalColumnName.NEW_VALUE) && (
+                            <td className={styles.confirmTableTd} data-testid={TEST_IDS.panel.confirmModalFieldValue}>
+                              *********
+                            </td>
+                          )}
                         </tr>
                       );
                     }
@@ -1146,18 +1165,24 @@ export const FormPanel: React.FC<Props> = ({
                         key={element.id}
                         data-testid={TEST_IDS.panel.confirmModalField(element.id)}
                       >
-                        <td className={styles.confirmTableTd} data-testid={TEST_IDS.panel.confirmModalFieldTitle}>
-                          {element.title || element.tooltip}
-                        </td>
-                        <td
-                          className={styles.confirmTableTd}
-                          data-testid={TEST_IDS.panel.confirmModalFieldPreviousValue}
-                        >
-                          {initial[element.id] === undefined ? '' : String(initial[element.id])}
-                        </td>
-                        <td className={styles.confirmTableTd} data-testid={TEST_IDS.panel.confirmModalFieldValue}>
-                          {currentValue === undefined ? '' : String(currentValue)}
-                        </td>
+                        {options.confirmModal.columns.include.includes(ModalColumnName.NAME) && (
+                          <td className={styles.confirmTableTd} data-testid={TEST_IDS.panel.confirmModalFieldTitle}>
+                            {element.title || element.tooltip}
+                          </td>
+                        )}
+                        {options.confirmModal.columns.include.includes(ModalColumnName.OLD_VALUE) && (
+                          <td
+                            className={styles.confirmTableTd}
+                            data-testid={TEST_IDS.panel.confirmModalFieldPreviousValue}
+                          >
+                            {initial[element.id] === undefined ? '' : String(initial[element.id])}
+                          </td>
+                        )}
+                        {options.confirmModal.columns.include.includes(ModalColumnName.NEW_VALUE) && (
+                          <td className={styles.confirmTableTd} data-testid={TEST_IDS.panel.confirmModalFieldValue}>
+                            {currentValue === undefined ? '' : String(currentValue)}
+                          </td>
+                        )}
                       </tr>
                     );
                   })}

src/constants/confirm-modal.ts

@@ -0,0 +1,19 @@
+import { ModalColumnName } from '../types';
+
+/**
+ * Confirm Modal Columns Include Options
+ */
+export const CONFIRM_MODAL_COLUMNS_INCLUDE_OPTIONS = [
+  {
+    value: ModalColumnName.NAME,
+    label: 'Name',
+  },
+  {
+    value: ModalColumnName.OLD_VALUE,
+    label: 'Old Value',
+  },
+  {
+    value: ModalColumnName.NEW_VALUE,
+    label: 'New Value',
+  },
+];

src/constants/default.ts

@@ -4,6 +4,7 @@ import {
   CodeLanguage,
   CodeOptions,
   FormElement,
+  ModalColumnName,
   ModalOptions,
   NumberOptions,
   SelectOptions,
@@ -187,6 +188,7 @@ export const CONFIRM_MODAL_DEFAULT: ModalOptions = {
   title: 'Confirm update request',
   body: 'Please confirm to update changed values',
   columns: {
+    include: [ModalColumnName.NAME, ModalColumnName.OLD_VALUE, ModalColumnName.NEW_VALUE],
     name: 'Label',
     oldValue: 'Old Value',
     newValue: 'New Value',

src/constants/index.ts

@@ -1,5 +1,6 @@
 export * from './button';
 export * from './code-editor';
+export * from './confirm-modal';
 export * from './data';
 export * from './default';
 export * from './form-element';

src/module.test.ts

@@ -18,6 +18,7 @@ describe('plugin', () => {
     addSelect: jest.fn().mockImplementation(() => builder),
     addSliderInput: jest.fn().mockImplementation(() => builder),
     addTextInput: jest.fn().mockImplementation(() => builder),
+    addMultiSelect: jest.fn().mockImplementation(() => builder),
   };
 
   it('Should be instance of PanelPlugin', () => {

src/module.ts

@@ -15,6 +15,7 @@
   BUTTON_SIZE_OPTIONS,
   BUTTON_VARIANT_HIDDEN_OPTIONS,
   BUTTON_VARIANT_OPTIONS,
+  CONFIRM_MODAL_COLUMNS_INCLUDE_OPTIONS,
   CONFIRM_MODAL_DEFAULT,
   CONTENT_TYPE_OPTIONS,
   ContentType,
@@ -47,6 +48,7 @@
   ButtonSize,
   ButtonVariant,
   CodeEditorType,
+  ModalColumnName,
   PanelOptions,
   RequestOptions,
   UpdateEnabledMode,
@@ -435,26 +437,37 @@
         defaultValue: CONFIRM_MODAL_DEFAULT.body,
         showIf: (config) => config.update.confirm,
       })
+      .addMultiSelect({
+        path: 'confirmModal.columns.include',
+        name: 'Include columns',
+        category: ['Update Confirmation Window'],
+        defaultValue: CONFIRM_MODAL_DEFAULT.columns.include as unknown,
+        showIf: (config) => config.update.confirm,
+        settings: {
+          options: CONFIRM_MODAL_COLUMNS_INCLUDE_OPTIONS,
+        },
+      })
       .addTextInput({
         path: 'confirmModal.columns.name',
         name: 'Label column',
         category: ['Update Confirmation Window'],
         defaultValue: CONFIRM_MODAL_DEFAULT.columns.name,
-        showIf: (config) => config.update.confirm,
+        showIf: (config) => config.update.confirm && config.confirmModal.columns.include.includes(ModalColumnName.NAME),
       })
       .addTextInput({
         path: 'confirmModal.columns.oldValue',
         name: 'Old value column',
         category: ['Update Confirmation Window'],
         defaultValue: CONFIRM_MODAL_DEFAULT.columns.oldValue,
-        showIf: (config) => config.update.confirm,
+        showIf: (config) =>
+          config.update.confirm && config.confirmModal.columns.include.includes(ModalColumnName.OLD_VALUE),
       })
       .addTextInput({
         path: 'confirmModal.columns.newValue',
         name: 'New value column',
         category: ['Update Confirmation Window'],
         defaultValue: CONFIRM_MODAL_DEFAULT.columns.newValue,
-        showIf: (config) => config.update.confirm,
+        showIf: (config) => config.update.confirm && config.confirmModal.columns.include.includes(ModalColumnName.NAME),
       })
       .addTextInput({
         path: 'confirmModal.confirm',