CSCFC4EMSCR-665 pull request to develop

mscr-ui/src/common/components/schema-info/index.tsx

@@ -1,6 +1,6 @@
 import { useEffect, useState } from 'react';
 import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
-import { Checkbox, SearchInput } from 'suomifi-ui-components';
+import {Button, Checkbox, ModalFooter, ModalTitle, SearchInput} from 'suomifi-ui-components';
 import IconButton from '@mui/material/IconButton';
 import ExpandLessIcon from '@mui/icons-material/ExpandLess';
 import Box from '@mui/material/Box';
@@ -15,7 +15,7 @@ import {
   ExpandButtonWrapper,
   NodeInfoWrapper,
   SchemaHeading,
-  SearchWrapper,
+  SearchWrapper, StyledSchemaModal, StyledSchemaModalContent,
   TreeviewWrapper,
   TreeWrapper,
 } from '@app/common/components/schema-info/schema-info.styles';
@@ -62,6 +62,8 @@ export default function SchemaInfo(props: {
   const [showAttributeNames, setShowAttributeNames] = useState(true);
   const [treeDataOriginal, setTreeDataOriginal] = useState<RenderTree[]>([]);
 
+  const [modalOpen, setModalOpen] = useState(false);
+
   useEffect(() => {
     if (getSchemaData?.content) {
       // Get two different representations of attributes: a tree and a dictionary with keys being the node ids and
@@ -180,6 +182,7 @@ export default function SchemaInfo(props: {
   }
 
   function handleTreeClick(nodeIds: string[]) {
+    setModalOpen(true);
     setTreeSelectedArray(nodeIds);
     // If there's several nodes with the same id, expand paths to all
     const isMultiple = nodeIds
@@ -199,6 +202,7 @@ export default function SchemaInfo(props: {
   }
 
   function handleTreeToggle(nodeIds: string[]) {
+    setModalOpen(true);
     setTreeExpandedArray(nodeIds);
   }
 
@@ -228,6 +232,10 @@ export default function SchemaInfo(props: {
     }
   }
 
+  function closeModal() {
+    setModalOpen(false);
+  }
+
   return (
     <>
       <div className="row d-flex mb-2">
@@ -320,25 +328,41 @@ export default function SchemaInfo(props: {
             </Box>
           </div>
         </TreeWrapper>
-        <NodeInfoWrapper className="col-5 px-0">
+        <CheckboxWrapper>
+          <Checkbox
+            checked={showAttributeNames}
+            onClick={(newState) => {
+              setShowAttributeNames(newState.checkboxState);
+            }}
+          >
+            {t('schema-tree.show-titles')}
+          </Checkbox>
+        </CheckboxWrapper>
+        <StyledSchemaModal
+          appElementId="__next"
+          visible={modalOpen}
+          variant={'default'}
+          onEscKeyDown={() => closeModal()}
+        >
+          <StyledSchemaModalContent>
+            <div className="schema-modal-header">
+              <p className="close"
+                 onClick={() => closeModal()}>
+                &times;
+              </p>
+            </div>
+        <NodeInfoWrapper>
           <NodeInfo
             treeData={selectedTreeNodes}
             currentlySelectedNodeId={currentlySelectedNodeId}
             dataIsLoaded={isTreeDataFetched}
             isNodeEditable={props.isNodeEditable}
             hasCustomRoot={props.hasCustomRoot}
           />
-          <CheckboxWrapper>
-            <Checkbox
-              checked={showAttributeNames}
-              onClick={(newState) => {
-                setShowAttributeNames(newState.checkboxState);
-              }}
-            >
-              {t('schema-tree.show-titles')}
-            </Checkbox>
-          </CheckboxWrapper>
         </NodeInfoWrapper>
+            </StyledSchemaModalContent>
+        </StyledSchemaModal>
+
       </TreeviewWrapper>
     </>
   );

mscr-ui/src/common/components/schema-info/schema-info.styles.tsx

@@ -1,5 +1,5 @@
 import styled from 'styled-components';
-import { Heading } from 'suomifi-ui-components';
+import {Heading, Modal, ModalContent} from 'suomifi-ui-components';
 
 export const SchemaHeading = styled(Heading)`
   && {
@@ -102,3 +102,35 @@ export const NodeInfoWrapper = styled.div`
     max-width: 100%;
   }
 `;
+
+export const StyledSchemaModal = styled(Modal)`
+  background-color: ${(props) => props.theme.suomifi.colors.whiteBase};
+  && {
+    margin: auto;
+    max-width: 350px;
+    max-height: 550px;
+    width: auto;
+    height: auto;
+  }
+
+  .schema-modal-header {
+    display: flex;
+    justify-content: end;
+    font-size: 2rem;
+    height: 4rem;
+  }
+  ;
+  .close {
+    cursor: pointer;
+  }
+`;
+
+export const StyledSchemaModalContent = styled(ModalContent)`
+  font-size: 0.9rem;
+  && {
+    padding: 5px 5px 5px 5px;
+  }
+  th {
+    background-color: ${(props) => props.theme.suomifi.colors.highlightLight2};
+  }
+`;

mscr-ui/src/common/components/schema-info/schema-tree/node-info/index.tsx

@@ -85,13 +85,13 @@ export default function NodeInfo(props: {
     <div className="row d-flex justify-content-between node-info-box">
       <h3>{t('node-info.selected-node-info')}</h3>
       <div className="col flex-column d-flex justify-content-between side-bar-wrap">
-        <div className="mb-2"></div>
+        <div></div>
         <Box
           className="bg-wrap"
           sx={{
-            height: 440,
+            height: 300,
             flexGrow: 1,
-            maxWidth: 400,
+            maxWidth: 300,
             overflowY: 'auto',
           }}
         >

mscr-ui/src/modules/crosswalk-editor/index.tsx

@@ -18,6 +18,7 @@ import Tooltip from '@mui/material/Tooltip';
 import {SchemaWithContent} from "@app/common/interfaces/schema.interface";
 import {Format} from "@app/common/interfaces/format.interface";
 import _ from "lodash";
+import MappingsAccordion2 from "@app/modules/crosswalk-editor/mappings-accordion2";
 
 export default function CrosswalkEditor({
                                           crosswalkData, hasEditPermission,
@@ -230,7 +231,7 @@ export default function CrosswalkEditor({
         }
       }
     }
-    
+
     if (isSourceTree) {
       setSelectedSourceNodes(nodeIds);
       if (isPatchMappingOperation) {
@@ -249,7 +250,7 @@ export default function CrosswalkEditor({
       <div className="col-12 mx-1">
         <div className="row gx-0">
           {/*  SOURCE TREE */}
-          <div className="col-5">
+          <div className="col-3">
             <SchemaInfo
               updateTreeNodeSelectionsOutput={performCallbackFromSchemaInfo}
               isSourceTree={true}
@@ -260,42 +261,26 @@ export default function CrosswalkEditor({
             />
           </div>
 
-          {/*  MID BUTTONS */}
-          <div className="col-2 px-4 mid-buttons">
-            {hasEditPermission && (
-              <Tooltip
-                title={
-                  selectedSourceNodes.length > 1 &&
-                  selectedTargetNodes.length > 1
-                    ? 'Many to many node mappings are not supported'
-                    : !isEditModeActive
-                      ? 'Activate edit mode to enable mappings'
-                      : 'Map selected nodes'
-                }
-                placement="bottom"
-              >
-                <Sbutton
-                  className="link-button"
-                  disabled={
-                    selectedSourceNodes.length < 1 ||
-                    selectedTargetNodes.length < 1 ||
-                    crosswalkData.state === State.Published ||
-                    (selectedSourceNodes.length > 1 &&
-                      selectedTargetNodes.length > 1) ||
-                    !isEditModeActive
-                  }
-                  onClick={() => {
-                    addMappingButtonClick();
-                  }}
-                >
-                  <LinkIcon></LinkIcon>
-                </Sbutton>
-              </Tooltip>
-            )}
+
+          <div className="joint-listing-accordion-wrap ">
+            <MappingsAccordion2
+              nodeMappings={filteredCombinedNodeMappings}
+              viewOnlyMode={false}
+              isEditModeActive={
+                isEditModeActive && crosswalkData.state !== State.Published
+              }
+              showAttributeNames={showAttributeNames}
+              mappingFunctions={mappingFunctions}
+              performAccordionAction={performCallbackFromAccordionAction}
+              schemaFormats={{sourceSchemaFormat: sourceSchemaFormat, targetSchemaFormat: targetSchemaFormat}}
+              schemaDatas={{sourceSchemaData: sourceSchemaData, targetSchemaData: targetSchemaData}}
+              setNodeMappingsModalOpen={setNodeMappingsModalOpen}
+            />
           </div>
+          {/*  MID BUTTONS */}
 
           {/*  TARGET TREE */}
-          <div className="col-5 pe-2">
+          <div className="col-3">
             <SchemaInfo
               updateTreeNodeSelectionsOutput={performCallbackFromSchemaInfo}
               isSourceTree={false}
@@ -307,37 +292,6 @@ export default function CrosswalkEditor({
           </div>
         </div>
       </div>
-      <div className="col-12 mt-4">
-        <div className="d-flex justify-content-between">
-          <div className="align-self-end pe-1">
-            {/*TODO: Checkbox can be removed as deprecatmappingFunctionsed when all new style titles work*/}
-            <Checkbox
-              checked={showAttributeNames}
-              onClick={(newState) => {
-                setShowAttributeNames(newState.checkboxState);
-              }}
-            >
-              {t('crosswalk-editor.show-node-titles')}
-            </Checkbox>
-          </div>
-        </div>
-
-        <div className="joint-listing-accordion-wrap my-3">
-          <MappingsAccordion
-            nodeMappings={filteredCombinedNodeMappings}
-            viewOnlyMode={false}
-            isEditModeActive={
-              isEditModeActive && crosswalkData.state !== State.Published
-            }
-            showAttributeNames={showAttributeNames}
-            mappingFunctions={mappingFunctions}
-            performAccordionAction={performCallbackFromAccordionAction}
-            schemaFormats={{sourceSchemaFormat: sourceSchemaFormat, targetSchemaFormat: targetSchemaFormat}}
-            schemaDatas={{sourceSchemaData: sourceSchemaData, targetSchemaData: targetSchemaData}}
-            setNodeMappingsModalOpen={setNodeMappingsModalOpen}
-          />
-        </div>
-      </div>
       {mappingToBeEdited && (
         <NodeMappingsModal
           nodeSelections={mappingToBeEdited}

mscr-ui/src/modules/crosswalk-editor/mappings-accordion2/function-tooltip-box/function-tooltip-box.styles.tsx

@@ -0,0 +1,9 @@
+import styled from 'styled-components';
+import ArrowRightIcon from '@mui/icons-material/ArrowRight';
+import TableCell from '@mui/material/TableCell';
+import Button from '@mui/material/Button';
+import TableRow from '@mui/material/TableRow';
+
+export const TooltipText = styled.div`
+  word-break: break-all;
+`;