From 2dbeedd6e52b4a51eef642a30f6bf7d4dd0517cd Mon Sep 17 00:00:00 2001
From: Ilya Asiyuk <ilya_asiyuk@epam.com>
Date: Mon, 8 Apr 2024 15:51:27 +0400
Subject: [PATCH] #4374 - Macro: RNA builder should be highlighted in Edit
 mode. Canvas should be disabled.

---
 .../RnaBuilder/RnaEditor/RnaEditor.tsx            | 15 +++++++++++++--
 .../RnaEditorExpanded/RnaEditorExpanded.tsx       |  9 ++++++++-
 .../__snapshots__/RnaEditorExpanded.test.tsx.snap |  6 +++---
 .../RnaEditor/RnaEditorExpanded/styles.ts         | 12 ++++++++++--
 .../monomerLibrary/RnaBuilder/RnaEditor/styles.ts |  4 ++++
 .../src/state/rna-builder/rnaBuilderSlice.ts      |  1 -
 .../src/theming/defaultTheme/defaultTheme.ts      |  3 +++
 .../src/theming/defaultTheme/theme.types.ts       |  3 +++
 8 files changed, 44 insertions(+), 9 deletions(-)

diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditor.tsx b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditor.tsx
index 9c8a65cb4a..53e4a9a44e 100644
--- a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditor.tsx
+++ b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditor.tsx
@@ -23,7 +23,11 @@ import {
   RnaEditorContainer,
   StyledHeader,
 } from './styles';
-import { useAppDispatch, useAppSelector } from 'hooks';
+import {
+  useAppDispatch,
+  useAppSelector,
+  useSequenceEditInRNABuilderMode,
+} from 'hooks';
 import {
   createNewPreset,
   RnaBuilderPresetsItem,
@@ -46,6 +50,7 @@ export const scrollToSelectedMonomer = (monomerId) => {
 export const RnaEditor = ({ duplicatePreset }) => {
   const activePreset = useAppSelector(selectActivePreset);
   const isEditMode = useAppSelector(selectIsEditMode);
+  const isSequenceEditInRNABuilderMode = useSequenceEditInRNABuilderMode();
   const activePresetFullName = selectPresetFullName(activePreset);
 
   const dispatch = useAppDispatch();
@@ -71,7 +76,13 @@ export const RnaEditor = ({ duplicatePreset }) => {
 
   return (
     <RnaEditorContainer>
-      <StyledHeader>
+      <StyledHeader
+        className={
+          isSequenceEditInRNABuilderMode
+            ? 'styled-header--sequence-edit-mode'
+            : ''
+        }
+      >
         RNA Builder
         <ExpandButton onClick={expandEditor}>
           <ExpandIcon expanded={expanded} name="chevron" />
diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/RnaEditorExpanded.tsx b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/RnaEditorExpanded.tsx
index e3998a09cb..cd7f6923f5 100644
--- a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/RnaEditorExpanded.tsx
+++ b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/RnaEditorExpanded.tsx
@@ -318,7 +318,14 @@ export const RnaEditorExpanded = ({
   }
 
   return (
-    <RnaEditorExpandedContainer data-testid="rna-editor-expanded">
+    <RnaEditorExpandedContainer
+      data-testid="rna-editor-expanded"
+      className={
+        isSequenceEditInRNABuilderMode
+          ? 'rna-editor-expanded--sequence-edit-mode'
+          : ''
+      }
+    >
       <NameContainer
         selected={activeMonomerGroup === RnaBuilderPresetsItem.Presets}
         onClick={() => selectGroup(RnaBuilderPresetsItem.Presets)}
diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/__snapshots__/RnaEditorExpanded.test.tsx.snap b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/__snapshots__/RnaEditorExpanded.test.tsx.snap
index 24bb55147f..2f27d4ebdc 100644
--- a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/__snapshots__/RnaEditorExpanded.test.tsx.snap
+++ b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/__snapshots__/RnaEditorExpanded.test.tsx.snap
@@ -2,7 +2,7 @@
 
 exports[`Test Rna Editor Expanded component should render correctly in edit mode 1`] = `
 <div
-  class="css-zbq0po"
+  class=" css-s8m56i"
   data-testid="rna-editor-expanded"
 >
   <div
@@ -173,7 +173,7 @@ exports[`Test Rna Editor Expanded component should render correctly in edit mode
 
 exports[`Test Rna Editor Expanded component should render correctly in edit mode with modification of sequence 1`] = `
 <div
-  class="css-zbq0po"
+  class="rna-editor-expanded--sequence-edit-mode css-s8m56i"
   data-testid="rna-editor-expanded"
 >
   <div
@@ -346,7 +346,7 @@ exports[`Test Rna Editor Expanded component should render correctly in edit mode
 
 exports[`Test Rna Editor Expanded component should render correctly in view mode 1`] = `
 <div
-  class="css-zbq0po"
+  class="rna-editor-expanded--sequence-edit-mode css-s8m56i"
   data-testid="rna-editor-expanded"
 >
   <div
diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/styles.ts b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/styles.ts
index c491cf0bf3..e975eb01ea 100644
--- a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/styles.ts
+++ b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/RnaEditorExpanded/styles.ts
@@ -17,11 +17,19 @@
 import styled from '@emotion/styled';
 import { Button, Input } from 'ketcher-react';
 
-export const RnaEditorExpandedContainer = styled.div({
+export const RnaEditorExpandedContainer = styled.div((props) => ({
   display: 'flex',
   flexDirection: 'column',
   padding: '10px',
-});
+  '&.rna-editor-expanded--sequence-edit-mode': {
+    padding: '8px',
+    paddingTop: '10px',
+    border: `2px ${props.theme.ketcher.color.editMode.sequenceInRNABuilder} solid`,
+    borderTop: 'none',
+    borderBottomRightRadius: '4px',
+    borderBottomLeftRadius: '4px',
+  },
+}));
 
 export const GroupsContainer = styled.div({
   marginTop: '16px',
diff --git a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/styles.ts b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/styles.ts
index 6212b6acfa..5f9803a4d2 100644
--- a/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/styles.ts
+++ b/packages/ketcher-macromolecules/src/components/monomerLibrary/RnaBuilder/RnaEditor/styles.ts
@@ -34,9 +34,13 @@ export const StyledHeader = styled.div((props) => ({
   alignItems: 'center',
   paddingLeft: '10px',
   fontSize: props.theme.ketcher.font.size.regular,
+  '&.styled-header--sequence-edit-mode': {
+    backgroundColor: props.theme.ketcher.color.editMode.sequenceInRNABuilder,
+  },
 }));
 
 export const ExpandButton = styled(Button)({
+  background: 'transparent',
   width: '32px',
   height: '100%',
   outline: 'none',
diff --git a/packages/ketcher-macromolecules/src/state/rna-builder/rnaBuilderSlice.ts b/packages/ketcher-macromolecules/src/state/rna-builder/rnaBuilderSlice.ts
index e4ec1bcbce..060f8f9585 100644
--- a/packages/ketcher-macromolecules/src/state/rna-builder/rnaBuilderSlice.ts
+++ b/packages/ketcher-macromolecules/src/state/rna-builder/rnaBuilderSlice.ts
@@ -25,7 +25,6 @@ import {
 } from 'ketcher-core';
 import { localStorageWrapper } from 'helpers/localStorage';
 import { FAVORITE_ITEMS_UNIQUE_KEYS } from 'src/constants';
-import { LabeledNucleotideWithPositionInSequence } from 'ketcher-core/dist/application/editor/tools/Tool';
 
 export enum RnaBuilderPresetsItem {
   Presets = 'Presets',
diff --git a/packages/ketcher-macromolecules/src/theming/defaultTheme/defaultTheme.ts b/packages/ketcher-macromolecules/src/theming/defaultTheme/defaultTheme.ts
index e72d8feb7c..95ef4970b0 100644
--- a/packages/ketcher-macromolecules/src/theming/defaultTheme/defaultTheme.ts
+++ b/packages/ketcher-macromolecules/src/theming/defaultTheme/defaultTheme.ts
@@ -137,6 +137,9 @@ export const defaultTheme: EditorTheme = {
     monomer: {
       default: '#C8C8C8',
     },
+    editMode: {
+      sequenceInRNABuilder: '#99d7dc',
+    },
   },
   font: {
     size: {
diff --git a/packages/ketcher-macromolecules/src/theming/defaultTheme/theme.types.ts b/packages/ketcher-macromolecules/src/theming/defaultTheme/theme.types.ts
index e6fd95b5ac..7700f1422f 100644
--- a/packages/ketcher-macromolecules/src/theming/defaultTheme/theme.types.ts
+++ b/packages/ketcher-macromolecules/src/theming/defaultTheme/theme.types.ts
@@ -120,6 +120,9 @@ export type EditorTheme = {
     monomer: {
       default: string;
     };
+    editMode: {
+      sequenceInRNABuilder: string;
+    };
   };
   font: {
     size: {