#3580 - Macro: Add possibility to expand "Select Attachment Points" M…

…odal (#3606) - add new icons, add expand functionality to modal window, change layout of Monomer Connections Modal to match new functionality - update snapshots, style fixes --------- Co-authored-by: Mariia_Khrustaleva(EPAM) <[email protected]>
epam · Nov 30, 2023 · cfb891b · cfb891b
1 parent caaf9cf
commit cfb891b
Show file tree

Hide file tree

Showing 16 changed files with 267 additions and 168 deletions.
diff --git a/...ow.spec.ts-snapshots/Modal-window-Connect-button-is-active-1-chromium-linux.png b/...ow.spec.ts-snapshots/Modal-window-Connect-button-is-active-1-chromium-linux.png
diff --git a/....spec.ts-snapshots/Modal-window-Connect-button-is-disabled-1-chromium-linux.png b/....spec.ts-snapshots/Modal-window-Connect-button-is-disabled-1-chromium-linux.png
diff --git a/...tcher-polymer-editor-react/src/components/modal/Delete/__snapshots__/Delete.test.tsx.snap b/...tcher-polymer-editor-react/src/components/modal/Delete/__snapshots__/Delete.test.tsx.snap
@@ -10,7 +10,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      class="MuiDialog-root MuiModal-root css-kxv5da-MuiModal-root-MuiDialog-root"
+      class="MuiDialog-root MuiModal-root css-6x6udt-MuiModal-root-MuiDialog-root"
       role="presentation"
     >
       <div
@@ -43,29 +43,31 @@ Object {
             >
               Delete RNA Preset
             </div>
-            <button
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
-              tabindex="0"
-              title="Close window"
-              type="button"
-            >
-              <svg
-                class="css-1td8dcm"
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+            <span>
+              <button
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+                tabindex="0"
+                title="Close window"
+                type="button"
               >
-                <path
-                  d="M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z"
-                  fill="currentColor"
+                <svg
+                  class="css-1td8dcm"
+                  fill="none"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                 />
-              </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
+              </button>
+            </span>
           </h2>
           <div
             class="MuiDialogContent-root css-1wbmh3t-MuiDialogContent-root"
@@ -88,7 +90,7 @@ Object {
             </div>
           </div>
           <div
-            class="MuiDialogActions-root MuiDialogActions-spacing css-1a9359k-MuiDialogActions-root"
+            class="MuiDialogActions-root MuiDialogActions-spacing css-k8y9qp-MuiDialogActions-root"
           >
             <button
               class="MuiButtonBase-root css-1gtlr3p-MuiButtonBase-root"

diff --git a/...s/ketcher-polymer-editor-react/src/components/modal/Open/__snapshots__/Open.test.tsx.snap b/...s/ketcher-polymer-editor-react/src/components/modal/Open/__snapshots__/Open.test.tsx.snap
@@ -10,7 +10,7 @@ Object {
       aria-hidden="true"
     />
     <div
-      class="MuiDialog-root MuiModal-root css-kxv5da-MuiModal-root-MuiDialog-root"
+      class="MuiDialog-root MuiModal-root css-6x6udt-MuiModal-root-MuiDialog-root"
       role="presentation"
     >
       <div
@@ -43,29 +43,31 @@ Object {
             >
               Open Structure
             </div>
-            <button
-              class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
-              tabindex="0"
-              title="Close window"
-              type="button"
-            >
-              <svg
-                class="css-1td8dcm"
-                fill="none"
-                height="24"
-                viewBox="0 0 24 24"
-                width="24"
-                xmlns="http://www.w3.org/2000/svg"
+            <span>
+              <button
+                class="MuiButtonBase-root MuiIconButton-root MuiIconButton-sizeMedium css-78trlr-MuiButtonBase-root-MuiIconButton-root"
+                tabindex="0"
+                title="Close window"
+                type="button"
               >
-                <path
-                  d="M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z"
-                  fill="currentColor"
+                <svg
+                  class="css-1td8dcm"
+                  fill="none"
+                  height="24"
+                  viewBox="0 0 24 24"
+                  width="24"
+                  xmlns="http://www.w3.org/2000/svg"
+                >
+                  <path
+                    d="M13.462 12.046l6.37 6.37-1.413 1.415-6.371-6.371-6.327 6.326-1.414-1.414 6.327-6.326-6.372-6.372L5.676 4.26l6.372 6.372 6.417-6.418 1.414 1.414-6.417 6.418z"
+                    fill="currentColor"
+                  />
+                </svg>
+                <span
+                  class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
                 />
-              </svg>
-              <span
-                class="MuiTouchRipple-root css-8je8zh-MuiTouchRipple-root"
-              />
-            </button>
+              </button>
+            </span>
           </h2>
           <div
             class="MuiDialogContent-root css-1wbmh3t-MuiDialogContent-root"

diff --git a/...etcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx b/...etcher-polymer-editor-react/src/components/modal/monomerConnection/MonomerConnections.tsx
@@ -12,9 +12,7 @@ import {
   AttachmentPointName,
   MonomerName,
   ConnectionSymbol,
-  AttachmentPointSelectionContainer,
   AttachmentPointsRow,
-  MonomerNamesRow,
   ModalContent,
 } from './styledComponents';
 import { MonomerConnectionProps } from '../modalContainer/types';
@@ -23,11 +21,12 @@ import { LeavingGroup } from 'ketcher-core';
 interface IStyledButtonProps {
   disabled: boolean;
 }
+interface IStyledStyledStructRender {
+  isExpanded?: boolean;
+}
 
 const StyledModal = styled(Modal)({
   '& .MuiPaper-root': {
-    width: 'auto',
-    height: 'fit-content',
     background: '#fff !important',
   },
 
@@ -36,16 +35,25 @@ const StyledModal = styled(Modal)({
   },
 });
 
-export const StyledStructRender = styled(StructRender)(({ theme }) => ({
-  height: '150px',
-  width: '150px',
+export const StyledStructRender = styled(
+  StructRender,
+)<IStyledStyledStructRender>(({ theme, isExpanded }) => ({
+  display: 'flex',
   border: `1.5px solid ${theme.ketcher.outline.color}`,
   borderRadius: '6px',
   padding: 5,
+  maxHeight: '100%',
+  minHeight: '150px',
+  height: isExpanded ? 'auto' : '150px',
+  width: isExpanded ? 'auto' : '150px',
+  alignSelf: 'stretch',
+  '& svg': {
+    maxWidth: 'fit-content',
+    margin: 'auto',
+  },
 }));
 
 export const ActionButtonLeft = styled(ActionButton)(() => ({
-  marginRight: 'auto',
   width: '97px !important',
 }));
 
@@ -55,6 +63,7 @@ export const ActionButtonRight = styled(ActionButton)<IStyledButtonProps>(
     color: props.disabled ? 'rgba(51, 51, 51, 0.6)' : '',
     background: props.disabled ? 'rgba(225, 229, 234, 1) !important' : '',
     opacity: '1 !important',
+    minHeight: '0',
   }),
 );
 
@@ -84,6 +93,7 @@ const MonomerConnection = ({
     useState<string | null>(getDefaultAttachmentPoint(firstMonomer));
   const [secondSelectedAttachmentPoint, setSecondSelectedAttachmentPoint] =
     useState<string | null>(getDefaultAttachmentPoint(secondMonomer));
+  const [modalExpanded, setModalExpanded] = useState(false);
 
   const cancelBondCreationAndClose = () => {
     editor.events.cancelBondCreationViaModal.dispatch(secondMonomer);
@@ -107,30 +117,38 @@ const MonomerConnection = ({
 
   return (
     <StyledModal
-      title=""
+      title="Select connection points"
       isOpen={isModalOpen}
-      showCloseButton={false}
       onClose={cancelBondCreationAndClose}
+      showExpandButton
+      modalWidth="358px"
+      expanded={modalExpanded}
+      setExpanded={setModalExpanded}
     >
       <Modal.Content>
         <ModalContent>
-          <MonomerNamesRow>
-            <MonomerName>{firstMonomer.monomerItem.props.Name}</MonomerName>
-            <MonomerName>{secondMonomer.monomerItem.props.Name}</MonomerName>
-          </MonomerNamesRow>
           <AttachmentPointsRow>
+            <MonomerName isExpanded={modalExpanded}>
+              {firstMonomer.monomerItem.props.Name}
+            </MonomerName>
             <AttachmentPointSelectionPanel
               monomer={firstMonomer}
               selectedAttachmentPoint={firstSelectedAttachmentPoint}
               onSelectAttachmentPoint={setFirstSelectedAttachmentPoint}
+              expanded={modalExpanded}
             />
-
+            <span />
             <ConnectionSymbol />
+            <span />
+            <MonomerName isExpanded={modalExpanded}>
+              {secondMonomer.monomerItem.props.Name}
+            </MonomerName>
 
             <AttachmentPointSelectionPanel
               monomer={secondMonomer}
               selectedAttachmentPoint={secondSelectedAttachmentPoint}
               onSelectAttachmentPoint={setSecondSelectedAttachmentPoint}
+              expanded={modalExpanded}
             />
           </AttachmentPointsRow>
         </ModalContent>
@@ -158,12 +176,14 @@ interface AttachmentPointSelectionPanelProps {
   monomer: BaseMonomer;
   selectedAttachmentPoint: string | null;
   onSelectAttachmentPoint: (attachmentPoint: string) => void;
+  expanded?: boolean;
 }
 
 function AttachmentPointSelectionPanel({
   monomer,
   selectedAttachmentPoint,
   onSelectAttachmentPoint,
+  expanded = false,
 }: AttachmentPointSelectionPanelProps): React.ReactElement {
   const bonds = monomer.attachmentPointsToBonds;
 
@@ -182,18 +202,21 @@ function AttachmentPointSelectionPanel({
   };
 
   return (
-    <AttachmentPointSelectionContainer>
+    <>
       <StyledStructRender
         struct={monomer.monomerItem.struct}
         options={{
           connectedMonomerAttachmentPoints: connectedAttachmentPoints,
           currentlySelectedMonomerAttachmentPoint:
             selectedAttachmentPoint ?? undefined,
           labelInMonomerConnectionsModal: true,
+          needCache: false,
         }}
+        update={expanded}
+        isExpanded={expanded}
       />
       <AttachmentPointList>
-        {monomer.listOfAttachmentPoints.map((attachmentPoint, i) => {
+        {monomer.listOfAttachmentPoints.map((attachmentPoint) => {
           const disabled = Boolean(
             connectedAttachmentPoints.find(
               (connectedAttachmentPointName) =>
@@ -202,10 +225,7 @@ function AttachmentPointSelectionPanel({
             ),
           );
           return (
-            <AttachmentPoint
-              key={attachmentPoint}
-              lastElementInRow={(i + 1) % 3 === 0}
-            >
+            <AttachmentPoint key={attachmentPoint}>
               <ActionButtonAttachmentPoint
                 label={attachmentPoint}
                 styleType={
@@ -226,7 +246,7 @@ function AttachmentPointSelectionPanel({
           );
         })}
       </AttachmentPointList>
-    </AttachmentPointSelectionContainer>
+    </>
   );
 }