#1601 elements should be hidden when the attribute hiddenControls is used

packages/ketcher-react/src/script/ui/views/toolbars/TopToolbar/ClipboardControls.tsx

@@ -25,6 +25,7 @@ interface ClipboardControlsProps {
   onPaste: () => void
   onCut: () => void
   disabledButtons: string[]
+  hiddenButtons: string[]
   shortcuts: { [key in string]: string }
 }
 
@@ -36,59 +37,73 @@ export const ClipboardControls = ({
   onPaste,
   onCut,
   shortcuts,
-  disabledButtons
+  disabledButtons,
+  hiddenButtons
 }: ClipboardControlsProps) => {
+  const copyButtons = [
+    {
+      name: 'copy',
+      title: 'Copy',
+      handler: onCopy
+    },
+    {
+      name: 'copy-mol',
+      title: 'Copy as MOL',
+      handler: onCopyMol
+    },
+    {
+      name: 'copy-ket',
+      title: 'Copy as KET',
+      handler: onCopyKet
+    },
+    {
+      name: 'copy-image',
+      title: 'Copy Image',
+      handler: onCopyImage
+    }
+  ]
+
+  const getButtonElement = (button) => (
+    <IconButton
+      title={button.title}
+      onClick={button.handler}
+      iconName={button.name}
+      shortcut={shortcuts[button.name]}
+      disabled={disabledButtons.includes(button.name)}
+      isHidden={hiddenButtons.includes(button.name)}
+    />
+  )
+
+  const firstButtonObj = copyButtons.find(
+    (button) => !hiddenButtons.includes(button.name)
+  )
+  const collapsibleElements = copyButtons
+    .filter((button) => button !== firstButtonObj)
+    .map((button) => getButtonElement(button))
+
   return (
     <>
-      <ElementWithDropdown
-        topElement={
-          <IconButton
-            title="Copy"
-            onClick={onCopy}
-            iconName="copy"
-            shortcut={shortcuts.copy}
-            disabled={disabledButtons.includes('copy')}
-          />
-        }
-        dropDownElements={
-          <>
-            <IconButton
-              title="Copy as MOL"
-              onClick={onCopyMol}
-              iconName="copy-mol"
-              shortcut={shortcuts['copy-mol']}
-              disabled={disabledButtons.includes('copy-mol')}
-            />
-            <IconButton
-              title="Copy as KET"
-              onClick={onCopyKet}
-              iconName="copy-ket"
-              shortcut={shortcuts['copy-ket']}
-              disabled={disabledButtons.includes('copy-ket')}
-            />
-            <IconButton
-              title="Copy Image"
-              onClick={onCopyImage}
-              iconName="copy-image"
-              shortcut={shortcuts['copy-image']}
-              disabled={disabledButtons.includes('copy-image')}
-            />
-          </>
-        }
-      />
+      {!hiddenButtons.includes('copies') && (
+        <ElementWithDropdown
+          topElement={getButtonElement(firstButtonObj)}
+          dropDownElements={collapsibleElements}
+        />
+      )}
       <IconButton
         title="Paste"
         onClick={onPaste}
         iconName="paste"
         shortcut={shortcuts.paste}
         disabled={disabledButtons.includes('paste')}
+        isHidden={hiddenButtons.includes('paste')}
       />
       <IconButton
         title="Cut"
         onClick={onCut}
         iconName="cut"
         shortcut={shortcuts.cut}
         disabled={disabledButtons.includes('cut')}
+        isHidden={hiddenButtons.includes('cut')}
       />
     </>
   )

packages/ketcher-react/src/script/ui/views/toolbars/TopToolbar/ElementWithDropdown.tsx

@@ -81,8 +81,8 @@ const DropDownArrow = styled(Icon)`
 `
 
 interface ElementWithDropdownProps {
-  topElement: JSX.Element
-  dropDownElements: JSX.Element | JSX.Element[]
+  topElement?: JSX.Element
+  dropDownElements: JSX.Element[]
   onToolOpen: () => void
 }
 
@@ -104,13 +104,16 @@ const MenuItemWithDropdown = ({
 
   return (
     <ElementAndDropdown>
-      {topElement}
-      <DropDownButton
-        onClick={expand}
-        className={`expanded ${topElement.props.disabled ? 'disabled' : ''}`}
-      >
-        {!isExpanded && <DropDownArrow name="dropdown" />}
-      </DropDownButton>
+      {topElement && topElement}
+      {dropDownElements.filter((element) => !element.props.isHidden).length !==
+        0 && (
+        <DropDownButton
+          onClick={expand}
+          className={`expanded ${topElement?.props.disabled ? 'disabled' : ''}`}
+        >
+          {!isExpanded && <DropDownArrow name="dropdown" />}
+        </DropDownButton>
+      )}
       <Collapse in={isExpanded} timeout="auto" onClick={collapse} unmountOnExit>
         <ClickAwayListener onClickAway={collapse}>
           <DropDownContent>{dropDownElements}</DropDownContent>

packages/ketcher-react/src/script/ui/views/toolbars/TopToolbar/ExternalFuncControls.tsx

@@ -15,7 +15,6 @@
  ***************************************************************************/
 
 import { ElementWithDropdown } from './ElementWithDropdown'
-
 import { IconButton } from './IconButton'
 
 interface ExternalFuncProps {
@@ -51,100 +50,86 @@ export const ExternalFuncControls = ({
   hiddenButtons,
   shortcuts
 }: ExternalFuncProps) => {
-  const TopElement = () => (
+  const externalFuncButtons = [
+    {
+      name: 'arom',
+      title: 'Aromatize',
+      handler: onAromatize
+    },
+    {
+      name: 'dearom',
+      title: 'Dearomatize',
+      handler: onDearomatize
+    },
+    {
+      name: 'layout',
+      title: 'Layout',
+      handler: onLayout
+    },
+    {
+      name: 'clean',
+      title: 'Clean Up',
+      handler: onClean
+    },
+    {
+      name: 'cip',
+      title: 'Calculate CIP',
+      handler: onCalculate
+    },
+    {
+      name: 'check',
+      title: 'Check Structure',
+      handler: onCheck
+    },
+    {
+      name: 'analyse',
+      title: 'Calculated Values',
+      handler: onAnalyse
+    },
+    {
+      name: 'enhanced-stereo',
+      title: 'Stereochemistry',
+      handler: onStereo
+    },
+    {
+      name: 'miew',
+      title: '3D Viewer',
+      handler: onMiew
+    }
+  ]
+
+  const getButtonElement = (button) => (
     <IconButton
-      title="Aromatize"
-      onClick={onAromatize}
-      iconName="arom"
-      shortcut={shortcuts.arom}
-      disabled={indigoVerification || disabledButtons.includes('arom')}
+      title={button.title}
+      onClick={button.handler}
+      iconName={button.name}
+      shortcut={shortcuts[button.name]}
+      disabled={indigoVerification || disabledButtons.includes(button.name)}
+      isHidden={hiddenButtons.includes(button.name)}
     />
   )
 
-  const CollapsibleElements = () => (
-    <>
-      <IconButton
-        title="Dearomatize"
-        onClick={onDearomatize}
-        iconName="dearom"
-        shortcut={shortcuts.dearom}
-        disabled={indigoVerification || disabledButtons.includes('dearom')}
-        isHidden={hiddenButtons.includes('dearom')}
-      />
-      <IconButton
-        title="Layout"
-        onClick={onLayout}
-        iconName="layout"
-        shortcut={shortcuts.layout}
-        disabled={indigoVerification || disabledButtons.includes('layout')}
-        isHidden={hiddenButtons.includes('layout')}
-      />
-      <IconButton
-        title="Clean Up"
-        onClick={onClean}
-        iconName="clean"
-        shortcut={shortcuts.clean}
-        disabled={indigoVerification || disabledButtons.includes('clean')}
-        isHidden={hiddenButtons.includes('clean')}
-      />
-      <IconButton
-        title="Calculate CIP"
-        onClick={onCalculate}
-        iconName="cip"
-        shortcut={shortcuts.cip}
-        disabled={indigoVerification || disabledButtons.includes('cip')}
-        isHidden={hiddenButtons.includes('cip')}
-      />
-      <IconButton
-        title="Check Structure"
-        onClick={onCheck}
-        iconName="check"
-        shortcut={shortcuts.check}
-        disabled={indigoVerification || disabledButtons.includes('check')}
-        isHidden={hiddenButtons.includes('check')}
-      />
-      <IconButton
-        title="Calculated Values"
-        onClick={onAnalyse}
-        iconName="analyse"
-        shortcut={shortcuts.analyse}
-        disabled={indigoVerification || disabledButtons.includes('analyse')}
-        isHidden={hiddenButtons.includes('analyse')}
-      />
-      <IconButton
-        title="Stereochemistry"
-        onClick={onStereo}
-        iconName="enhanced-stereo"
-        shortcut={shortcuts['enhanced-stereo']}
-        disabled={
-          indigoVerification || disabledButtons.includes('enhanced-stereo')
-        }
-        isHidden={hiddenButtons.includes('enhanced-stereo')}
-      />
-      <IconButton
-        title="3D Viewer"
-        onClick={onMiew}
-        iconName="miew"
-        shortcut={shortcuts.miew}
-        disabled={indigoVerification || disabledButtons.includes('miew')}
-        isHidden={hiddenButtons.includes('miew')}
-      />
-    </>
+  const firstButtonObj = externalFuncButtons.find(
+    (button) => !hiddenButtons.includes(button.name)
   )
 
+  const collapsibleElements = externalFuncButtons
+    .filter((button) => button !== firstButtonObj)
+    .map((button) => getButtonElement(button))
+
   if (isCollapsed) {
     return (
       <ElementWithDropdown
-        topElement={<TopElement />}
-        dropDownElements={<CollapsibleElements />}
+        topElement={getButtonElement(firstButtonObj)}
+        dropDownElements={collapsibleElements}
       />
     )
   }
 
   return (
     <>
-      {<TopElement />}
-      {<CollapsibleElements />}
+      {firstButtonObj && getButtonElement(firstButtonObj)}
+      {<>{collapsibleElements}</>}
     </>
   )
 }

packages/ketcher-react/src/script/ui/views/toolbars/TopToolbar/FileControls.tsx

@@ -20,12 +20,14 @@ interface FileControlsProps {
   onFileOpen: () => void
   onSave: () => void
   shortcuts: { [key in string]: string }
+  hiddenButtons: string[]
 }
 
 export const FileControls = ({
   onFileOpen,
   onSave,
-  shortcuts
+  shortcuts,
+  hiddenButtons
 }: FileControlsProps) => {
   return (
     <>
@@ -34,12 +36,14 @@ export const FileControls = ({
         onClick={onFileOpen}
         iconName="open"
         shortcut={shortcuts.open}
+        isHidden={hiddenButtons.includes('open')}
       />
       <IconButton
         title="Save as..."
         onClick={onSave}
         iconName="save"
         shortcut={shortcuts.save}
+        isHidden={hiddenButtons.includes('save')}
       />
     </>
   )

packages/ketcher-react/src/script/ui/views/toolbars/TopToolbar/TopToolbar.tsx

@@ -144,11 +144,13 @@ export const TopToolbar = ({
         onClick={onClear}
         iconName="clear"
         shortcut={shortcuts.clear}
+        isHidden={hiddenButtons.includes('clear')}
       />
       <FileControls
         onFileOpen={onFileOpen}
         onSave={onSave}
         shortcuts={shortcuts}
+        hiddenButtons={hiddenButtons}
       />
       <ClipboardControls
         onCopy={onCopy}
@@ -159,11 +161,13 @@ export const TopToolbar = ({
         onCut={onCut}
         shortcuts={shortcuts}
         disabledButtons={disabledButtons}
+        hiddenButtons={hiddenButtons}
       />
       <UndoRedo
         onUndo={onUndo}
         onRedo={onRedo}
         disabledButtons={disabledButtons}
+        hiddenButtons={hiddenButtons}
         shortcuts={shortcuts}
       />
       <ExternalFuncControls
@@ -201,6 +205,7 @@ export const TopToolbar = ({
         onZoom={onZoom}
         shortcuts={shortcuts}
         disabledButtons={disabledButtons}
+        hiddenButtons={hiddenButtons}
       />
     </ControlsPanel>
   )