#5842-info-button-i-for-some-properties-at-settings (#5912)

* 5842-info-button-i-for-some-properties-at-settings * updated tests * change layout and update snapshot * updated test * updated tests * merge * add tooltip for after, updated tests * changes part 2 * tests update * update tests * update tests * Revert specific files to previous state * Revert specific files to previous state * Revert specific files to previous state * format --------- Co-authored-by: Andrey Menshikov <andrey.menshikov@bostongene.com>
epam · Nov 12, 2024 · 0bb3715 · 0bb3715
1 parent 168e713
commit 0bb3715
Show file tree

Hide file tree

Showing 78 changed files with 45 additions and 6 deletions.
diff --git a/...splay-styles---IUPAC-style-selected-by-default-in-settings-1-chromium-linux.png b/...splay-styles---IUPAC-style-selected-by-default-in-settings-1-chromium-linux.png
diff --git a/...ettings-Verify-ACS-Style-button-and-setting-after-clicking-1-chromium-linux.png b/...ettings-Verify-ACS-Style-button-and-setting-after-clicking-1-chromium-linux.png
diff --git a/...gs-after-clicking-ACS-Style-button-and-after-that-on-Reset-2-chromium-linux.png b/...gs-after-clicking-ACS-Style-button-and-after-that-on-Reset-2-chromium-linux.png
diff --git a/...ue-in-px-option-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...ue-in-px-option-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...in-cm-option-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...in-cm-option-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...n-inch-50d49-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...n-inch-50d49-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...in-pt-option-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...in-pt-option-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...rify-the-whole-value-in-cm-option-in-the-setting-Font-size-1-chromium-linux.png b/...rify-the-whole-value-in-cm-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...in-cm-option-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...in-cm-option-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-the-whole-value-in-cm-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...-the-whole-value-in-cm-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...in-inc-d714b-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...in-inc-d714b-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-the-whole-value-in-inch-option-in-the-setting-Font-size-1-chromium-linux.png b/...fy-the-whole-value-in-inch-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...he-whole-value-in-inch-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...he-whole-value-in-inch-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...rify-the-whole-value-in-pt-option-in-the-setting-Font-size-1-chromium-linux.png b/...rify-the-whole-value-in-pt-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...in-pt-option-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...in-pt-option-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-the-whole-value-in-pt-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...-the-whole-value-in-pt-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...rify-the-whole-value-in-px-option-in-the-setting-Font-size-1-chromium-linux.png b/...rify-the-whole-value-in-px-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...-the-whole-value-in-px-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...-the-whole-value-in-px-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...ue-in-px-option-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...ue-in-px-option-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-1-dec-1023a-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...-1-dec-1023a-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-1-dec-58895-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...-1-dec-58895-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-1-dec-69362-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...-1-dec-69362-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-1-dec-f8aa3-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...-1-dec-f8aa3-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...ue-with-up-to-1-decimal-places-cm-in-the-setting-Font-size-1-chromium-linux.png b/...ue-with-up-to-1-decimal-places-cm-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ith-up-to-1-decimal-places-cm-in-the-setting-Sub-font-size-1-chromium-linux.png b/...ith-up-to-1-decimal-places-cm-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...-with-up-to-1-decimal-places-inch-in-the-setting-Font-size-1-chromium-linux.png b/...-with-up-to-1-decimal-places-inch-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...h-up-to-1-decimal-places-inch-in-the-setting-Sub-font-size-1-chromium-linux.png b/...h-up-to-1-decimal-places-inch-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...ue-with-up-to-1-decimal-places-pt-in-the-setting-Font-size-1-chromium-linux.png b/...ue-with-up-to-1-decimal-places-pt-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ith-up-to-1-decimal-places-pt-in-the-setting-Sub-font-size-1-chromium-linux.png b/...ith-up-to-1-decimal-places-pt-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...ue-with-up-to-1-decimal-places-px-in-the-setting-Font-size-1-chromium-linux.png b/...ue-with-up-to-1-decimal-places-px-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ith-up-to-1-decimal-places-px-in-the-setting-Sub-font-size-1-chromium-linux.png b/...ith-up-to-1-decimal-places-px-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...-2-dec-56d3c-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...-2-dec-56d3c-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-2-dec-7f5a7-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...-2-dec-7f5a7-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-2-dec-97d13-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...-2-dec-97d13-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-2-dec-f2e92-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...-2-dec-f2e92-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...ue-with-up-to-2-decimal-places-cm-in-the-setting-Font-size-1-chromium-linux.png b/...ue-with-up-to-2-decimal-places-cm-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ith-up-to-2-decimal-places-cm-in-the-setting-Sub-font-size-1-chromium-linux.png b/...ith-up-to-2-decimal-places-cm-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...-with-up-to-2-decimal-places-inch-in-the-setting-Font-size-1-chromium-linux.png b/...-with-up-to-2-decimal-places-inch-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...h-up-to-2-decimal-places-inch-in-the-setting-Sub-font-size-1-chromium-linux.png b/...h-up-to-2-decimal-places-inch-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...ue-with-up-to-2-decimal-places-pt-in-the-setting-Font-size-1-chromium-linux.png b/...ue-with-up-to-2-decimal-places-pt-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ith-up-to-2-decimal-places-pt-in-the-setting-Sub-font-size-1-chromium-linux.png b/...ith-up-to-2-decimal-places-pt-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...ue-with-up-to-2-decimal-places-px-in-the-setting-Font-size-1-chromium-linux.png b/...ue-with-up-to-2-decimal-places-px-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ith-up-to-2-decimal-places-px-in-the-setting-Sub-font-size-1-chromium-linux.png b/...ith-up-to-2-decimal-places-px-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...fy-0-i-6e265-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-0-i-6e265-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-0-i-93ad6-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-0-i-93ad6-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-0-i-9f472-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-0-i-9f472-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-0-i-b1a4f-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-0-i-b1a4f-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...-Settings-Verify-0-with-cm-option-in-the-setting-Font-size-1-chromium-linux.png b/...-Settings-Verify-0-with-cm-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...tings-Verify-0-with-cm-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...tings-Verify-0-with-cm-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...ettings-Verify-0-with-inch-option-in-the-setting-Font-size-1-chromium-linux.png b/...ettings-Verify-0-with-inch-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ngs-Verify-0-with-inch-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...ngs-Verify-0-with-inch-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...-Settings-Verify-0-with-pt-option-in-the-setting-Font-size-1-chromium-linux.png b/...-Settings-Verify-0-with-pt-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...tings-Verify-0-with-pt-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...tings-Verify-0-with-pt-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...-Settings-Verify-0-with-px-option-in-the-setting-Font-size-1-chromium-linux.png b/...-Settings-Verify-0-with-px-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...tings-Verify-0-with-px-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...tings-Verify-0-with-px-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...fy-100-e778d-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-100-e778d-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-100-f54ad-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-100-f54ad-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-neg-03a55-with-inch-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...fy-neg-03a55-with-inch-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...fy-neg-2ad7c-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-neg-2ad7c-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-neg-6a414-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-neg-6a414-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-neg-8c95c-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-neg-8c95c-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-neg-9d002-e-with-cm-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...fy-neg-9d002-e-with-cm-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...fy-neg-ac5fc-e-with-pt-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...fy-neg-ac5fc-e-with-pt-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...fy-neg-ddf44-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-neg-ddf44-on-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-neg-f0463-lue-with-inch-option-in-the-setting-Font-size-1-chromium-linux.png b/...fy-neg-f0463-lue-with-inch-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...fy-neg-f1620-e-with-px-option-in-the-setting-Sub-font-size-1-chromium-linux.png b/...fy-neg-f1620-e-with-px-option-in-the-setting-Sub-font-size-1-chromium-linux.png
diff --git a/...ify-negative-value-with-cm-option-in-the-setting-Font-size-1-chromium-linux.png b/...ify-negative-value-with-cm-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ify-negative-value-with-pt-option-in-the-setting-Font-size-1-chromium-linux.png b/...ify-negative-value-with-pt-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...ify-negative-value-with-px-option-in-the-setting-Font-size-1-chromium-linux.png b/...ify-negative-value-with-px-option-in-the-setting-Font-size-1-chromium-linux.png
diff --git a/...fy-the-1d671-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-the-1d671-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...fy-the-bfb6e-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png b/...fy-the-bfb6e-in-the-setting-Reaction-component-margin-size-1-chromium-linux.png
diff --git a/...rification.spec.ts-snapshots/Verify-Ketcher-settings-panel-1-chromium-linux.png b/...rification.spec.ts-snapshots/Verify-Ketcher-settings-panel-1-chromium-linux.png
diff --git a/ketcher-autotests/tests/Settings/Stereochemistry/ignore-chiral-flag.spec.ts b/ketcher-autotests/tests/Settings/Stereochemistry/ignore-chiral-flag.spec.ts
@@ -34,7 +34,8 @@ async function applyIgnoreChiralFlag(page: Page) {
   await page
     .locator('label')
     .filter({ hasText: 'Ignore the chiral flag' })
-    .locator('div span')
+    .locator('div >> span, span')
+    .first()
     .click();
   await pressButton(page, 'Apply');
 }

diff --git a/.../Undo-Redo-Actions-Undo-deletes-previously-placed-template-1-chromium-linux.png b/.../Undo-Redo-Actions-Undo-deletes-previously-placed-template-1-chromium-linux.png
diff --git a/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts b/ketcher-autotests/tests/User-Interface/Right-Click-Menu/right-click.spec.ts
@@ -232,7 +232,8 @@ test.describe('Right-click menu', () => {
     await page
       .locator('label')
       .filter({ hasText: 'Ignore the chiral flag' })
-      .locator('div span')
+      .locator('div >> span, span')
+      .first()
       .click();
     await pressButton(page, 'Apply');
     await takeEditorScreenshot(page);

diff --git a/...hots/Toolbar-palette-and-settings-Settings-UI-verification-1-chromium-linux.png b/...hots/Toolbar-palette-and-settings-Settings-UI-verification-1-chromium-linux.png
diff --git a/packages/ketcher-react/src/script/ui/component/form/form/form.jsx b/packages/ketcher-react/src/script/ui/component/form/form/form.jsx
@@ -28,7 +28,8 @@ import { getSelectOptionsFromSchema } from '../../../utils';
 import { updateFormState } from '../../../state/modal/form';
 import { useFormContext } from '../../../../../hooks';
 import { cloneDeep } from 'lodash';
-import { IconButton } from 'components';
+import { Icon, IconButton } from 'components';
+import { Tooltip } from '@mui/material';
 
 class Form extends Component {
   constructor(props) {
@@ -112,17 +113,46 @@ export default connect(null, (dispatch) => ({
 
 function Label({ labelPos, title, children, ...props }) {
   const tooltip = props.tooltip ? props.tooltip : null;
-
   return (
     <label {...props}>
       {title && labelPos !== 'after' ? (
-        <span title={tooltip}>{title}</span>
+        tooltip ? (
+          <div
+            className={clsx({
+              [classes.divWithTooltipAndAboutIcon]: true,
+            })}
+          >
+            <span>{title}</span>
+            <Tooltip title={tooltip}>
+              <div>
+                <Icon name="about"></Icon>
+              </div>
+            </Tooltip>
+          </div>
+        ) : (
+          <span>{title}</span>
+        )
       ) : (
         ''
       )}
       {children}
       {title && labelPos === 'after' ? (
-        <span title={tooltip}>{title}</span>
+        tooltip ? (
+          <div
+            className={clsx({
+              [classes.divWithTooltipAndAboutIcon]: true,
+            })}
+          >
+            <Tooltip title={tooltip}>
+              <div>
+                <Icon name="about"></Icon>
+              </div>
+            </Tooltip>
+            <span>{title}</span>
+          </div>
+        ) : (
+          <span>{title}</span>
+        )
       ) : (
         ''
       )}

diff --git a/packages/ketcher-react/src/script/ui/component/form/form/form.module.less b/packages/ketcher-react/src/script/ui/component/form/form/form.module.less
@@ -69,3 +69,10 @@
     min-height: 16px;
   }
 }
+
+.divWithTooltipAndAboutIcon{
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  width: 100%;
+}