#5351 – Inform User to Apply Layout after Settings Adjustment (#5921)

* #5351 - inform user to apply layout after settings adjustment * Update reaction component margin size related tests
epam · Nov 7, 2024 · 94e560b · 94e560b
1 parent eb21a9d
commit 94e560b
Show file tree

Hide file tree

Showing 12 changed files with 62 additions and 5 deletions.
diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/CDXML-Files/cdxml-files.spec.ts b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/CDXML-Files/cdxml-files.spec.ts
@@ -601,6 +601,7 @@ test.describe('Tests for API setMolecule/getMolecule', () => {
     await setReactionMarginSizeOptionUnit(page, 'px-option');
     await setReactionMarginSizeValue(page, '7.8');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getCdxml(page);
@@ -637,6 +638,7 @@ test.describe('Tests for API setMolecule/getMolecule', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getCdxml(page);

diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Cml-files/cml-files.spec.ts b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Cml-files/cml-files.spec.ts
@@ -605,6 +605,7 @@ test.describe('CML files', () => {
     await setReactionMarginSizeOptionUnit(page, 'cm-option');
     await setReactionMarginSizeValue(page, '1.8');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getCml(page);
@@ -640,6 +641,7 @@ test.describe('CML files', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getCml(page);

diff --git a/...utotests/tests/File-Management/Open-And-Save-Files/KET-Files/ket-files-properties.spec.ts b/...utotests/tests/File-Management/Open-And-Save-Files/KET-Files/ket-files-properties.spec.ts
@@ -192,6 +192,7 @@ test.describe('Ket files', () => {
     await setReactionMarginSizeOptionUnit(page, 'px-option');
     await setReactionMarginSizeValue(page, '47.8');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getKet(page);
@@ -225,6 +226,7 @@ test.describe('Ket files', () => {
     await setReactionMarginSizeOptionUnit(page, 'pt-option');
     await setReactionMarginSizeValue(page, '7.8');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getKet(page);
@@ -258,6 +260,7 @@ test.describe('Ket files', () => {
     await setReactionMarginSizeOptionUnit(page, 'cm-option');
     await setReactionMarginSizeValue(page, '3.8');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getKet(page);
@@ -291,6 +294,7 @@ test.describe('Ket files', () => {
     await setReactionMarginSizeOptionUnit(page, 'inch-option');
     await setReactionMarginSizeValue(page, '7.8');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getKet(page);
@@ -320,6 +324,7 @@ test.describe('Ket files', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const expectedFile = await getKet(page);

diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/MOL-Files/mol-files.spec.ts b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/MOL-Files/mol-files.spec.ts
@@ -973,6 +973,7 @@ test.describe('Open and Save file', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
 
@@ -1012,6 +1013,7 @@ test.describe('Open and Save file', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
 

diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PNG-Files/png-files.spec.ts b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/PNG-Files/png-files.spec.ts
@@ -169,6 +169,7 @@ test.describe('Saving in .png files', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     await clickOnSaveFileAndOpenDropdown(page);

diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Rxn-Files/rxn-files.spec.ts b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/Rxn-Files/rxn-files.spec.ts
@@ -1323,6 +1323,7 @@ test.describe('Tests for Open and Save RXN file operations', () => {
     await setReactionMarginSizeOptionUnit(page, 'px-option');
     await setReactionMarginSizeValue(page, '47.8');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const METADATA_STRINGS_INDEXES = [2, 7, 34, 65, 100, 118];
@@ -1360,6 +1361,7 @@ test.describe('Tests for Open and Save RXN file operations', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const METADATA_STRINGS_INDEXES = [2, 7, 32, 54];
@@ -1397,6 +1399,7 @@ test.describe('Tests for Open and Save RXN file operations', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     const METADATA_STRINGS_INDEXES = [2, 7, 32, 54];

diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/SDF-Files/sdf-files.spec.ts b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/SDF-Files/sdf-files.spec.ts
@@ -772,6 +772,7 @@ test('The ACS setting is applied, click on layout and it should be save to sdf 3
   await openSettings(page);
   await pressButton(page, 'Set ACS Settings');
   await pressButton(page, 'Apply');
+  await pressButton(page, 'OK');
   await selectTopPanelButton(TopPanelButton.Layout, page);
   await takeEditorScreenshot(page);
 
@@ -814,6 +815,7 @@ test('The ACS setting is applied, click on layout and it should be save to sdf 2
   await openSettings(page);
   await pressButton(page, 'Set ACS Settings');
   await pressButton(page, 'Apply');
+  await pressButton(page, 'OK');
   await selectTopPanelButton(TopPanelButton.Layout, page);
   await takeEditorScreenshot(page);
 

diff --git a/ketcher-autotests/tests/File-Management/Open-And-Save-Files/SVG_Files/svg-files.spec.ts b/ketcher-autotests/tests/File-Management/Open-And-Save-Files/SVG_Files/svg-files.spec.ts
@@ -130,6 +130,7 @@ test.describe('Saving in .svg files', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     await clickOnSaveFileAndOpenDropdown(page);

diff --git a/ketcher-autotests/tests/Settings/ACS Style/acs-style-settings.spec.ts b/ketcher-autotests/tests/Settings/ACS Style/acs-style-settings.spec.ts
@@ -38,6 +38,7 @@ test.describe('ACS Style Settings', () => {
     await scrollToDownInSetting(page);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -53,6 +54,7 @@ test.describe('ACS Style Settings', () => {
     await openSettings(page);
     await pressButton(page, 'Set ACS Settings');
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
     await openSettings(page);
@@ -62,6 +64,7 @@ test.describe('ACS Style Settings', () => {
     await scrollToDownInSetting(page);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await takeEditorScreenshot(page);
   });
 });
diff --git a/ketcher-autotests/tests/Settings/General/default-settings-verification.spec.ts b/ketcher-autotests/tests/Settings/General/default-settings-verification.spec.ts
@@ -572,6 +572,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -594,6 +595,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -616,6 +618,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -638,6 +641,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -660,6 +664,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -682,6 +687,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -704,6 +710,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -726,6 +733,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -749,6 +757,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -772,6 +781,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -795,6 +805,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -818,6 +829,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -840,6 +852,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -862,6 +875,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -884,6 +898,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });
@@ -906,6 +921,7 @@ test.describe('General Settings', () => {
     await page.waitForTimeout(1000);
     await takeEditorScreenshot(page);
     await pressButton(page, 'Apply');
+    await pressButton(page, 'OK');
     await selectTopPanelButton(TopPanelButton.Layout, page);
     await takeEditorScreenshot(page);
   });

diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/InfoModal/InfoModal.tsx
@@ -28,15 +28,15 @@ function ErrorInfoModal(props) {
 
   const defaultCutCopyMessage = `This action is unavailable via menu. Instead, use shortcut to ${props.message}.`;
 
-  const headerContent = <div>{error.message}</div>;
+  const headerContent = <div>{props.title ?? error.message}</div>;
 
   return (
     <Dialog
       className={styles.infoModal}
       params={props}
       buttons={[
         <button onClick={props.onOk} className={styles.ok} key="ok">
-          Close
+          {props.button || 'Close'}
         </button>,
       ]}
       headerContent={headerContent}

diff --git a/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx b/packages/ketcher-react/src/script/ui/views/modal/components/meta/Settings/Settings.tsx
@@ -42,6 +42,7 @@ import fieldGroups from './fieldGroups';
 import { isEqual } from 'lodash';
 import { Icon } from 'components';
 import { ACS_STYLE_DEFAULT_SETTINGS } from 'src/constants';
+import { onAction } from 'src/script/ui/state/shared';
 
 interface SettingsProps extends BaseProps {
   initState: any;
@@ -350,7 +351,7 @@ const SettingsDialog = (props: Props) => {
   return (
     <Dialog
       className={classes.settings}
-      result={() => formState.result}
+      result={() => [formState.result, initState]}
       valid={() => formState.valid}
       params={prop}
       buttonsNameMap={{ OK: 'Apply' }}
@@ -396,8 +397,27 @@ const mapDispatchToProps = (dispatch, ownProps) => ({
   },
   onReset: () => dispatch(setDefaultSettings()),
   onOk: (res) => {
-    dispatch(saveSettings(res));
-    ownProps.onOk(res);
+    const [result, initState] = res;
+
+    dispatch(saveSettings(result));
+    ownProps.onOk(result);
+
+    const showNotification =
+      initState.reactionComponentMarginSize !==
+      result.reactionComponentMarginSize;
+
+    showNotification &&
+      dispatch(
+        onAction({
+          dialog: 'info-modal',
+          prop: {
+            title: '',
+            customText:
+              'To fully apply these changes, you need to apply the layout.',
+            button: 'OK',
+          },
+        }),
+      );
   },
   onACSStyle: (result) => {
     dispatch(updateFormState({ result }));