Merge pull request #172 from CSCfi/develop

Rahti Deployment
CSCfi · May 13, 2024 · de3403b · de3403b
2 parents b637430 + 18b56c5
commit de3403b
Show file tree

Hide file tree

Showing 6 changed files with 332 additions and 54 deletions.
diff --git a/mscr-ui/src/common/components/schema-and-crosswalk-actionmenu/index.tsx b/mscr-ui/src/common/components/schema-and-crosswalk-actionmenu/index.tsx
@@ -174,6 +174,7 @@ export default function SchemaAndCrosswalkActionMenu({
     }
   };
 
+
   useEffect(() => {
     setIsEditModeActive(isMappingsEditModeActive);
   }, [isMappingsEditModeActive]);
@@ -182,6 +183,8 @@ export default function SchemaAndCrosswalkActionMenu({
     dispatch(clearNotification());
   }, [dispatch]);
 
+
+
   return (
     <>
       <ActionMenu buttonText={t('action.actions')}>

diff --git a/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx b/mscr-ui/src/modules/crosswalk-editor/crosswalk-editor.styles.tsx
@@ -6,3 +6,11 @@ export const ActionMenuWrapper = styled.div`
   z-index: 200;
   position: relative;
 `;
+
+export const TestButton =  styled.div`
+  margin-bottom: -40px;
+  margin-top: 18px;
+  margin-left: 20px;
+  z-index: 200;
+  position: relative;
+  `;
diff --git a/mscr-ui/src/modules/crosswalk-editor/index.tsx b/mscr-ui/src/modules/crosswalk-editor/index.tsx
@@ -1,11 +1,12 @@
 import * as React from 'react';
 import Box from '@mui/material/Box';
 import TreeItem from '@mui/lab/TreeItem';
-import {useEffect} from 'react';
+import { useEffect } from 'react';
 import {
+  Button,
   Notification,
   Button as Sbutton,
-  Text
+  Text,
 } from 'suomifi-ui-components';
 import Tabs from '@mui/material/Tabs';
 import Tab from '@mui/material/Tab';
@@ -28,25 +29,27 @@ import {
   useGetMappingsQuery,
   useGetCrosswalkWithRevisionsQuery,
 } from '@app/common/components/crosswalk/crosswalk.slice';
-import {
-  useGetCrosswalkMappingFunctionsQuery
-} from '@app/common/components/crosswalk-functions/crosswalk-functions.slice';
-import {createTheme, Grid, ThemeProvider} from '@mui/material';
+import { useGetCrosswalkMappingFunctionsQuery } from '@app/common/components/crosswalk-functions/crosswalk-functions.slice';
+import { createTheme, Grid, ThemeProvider } from '@mui/material';
 import HasPermission from '@app/common/utils/has-permission';
 import VersionHistory from '@app/common/components/version-history';
 import SchemaInfo from '@app/common/components/schema-info';
-import {useTranslation} from 'next-i18next';
-import {State} from '@app/common/interfaces/state.interface';
+import { useTranslation } from 'next-i18next';
+import { State } from '@app/common/interfaces/state.interface';
 import MetadataStub from '@app/modules/form/metadata-form/metadata-stub';
-import {ActionMenuTypes, Type} from '@app/common/interfaces/search.interface';
+import { ActionMenuTypes, Type } from '@app/common/interfaces/search.interface';
 import SchemaAndCrosswalkActionMenu from '@app/common/components/schema-and-crosswalk-actionmenu';
-import { ActionMenuWrapper } from '@app/modules/crosswalk-editor/crosswalk-editor.styles';
+import {
+  ActionMenuWrapper,
+  TestButton,
+} from '@app/modules/crosswalk-editor/crosswalk-editor.styles';
 import { setNotification } from '@app/common/components/notifications/notifications.slice';
 import { useStoreDispatch } from '@app/store';
+import OperationalizeModal from '../operationalize-modal';
 
 export default function CrosswalkEditor({
-                                          crosswalkId,
-                                        }: {
+  crosswalkId,
+}: {
   crosswalkId: string;
 }) {
   const theme = createTheme({
@@ -60,7 +63,7 @@ export default function CrosswalkEditor({
     },
   });
 
-  const {t} = useTranslation('common');
+  const { t } = useTranslation('common');
   const dispatch = useStoreDispatch();
 
   const emptyTreeSelection: RenderTree = {
@@ -72,15 +75,19 @@ export default function CrosswalkEditor({
     properties: undefined,
     uri: '',
     children: [],
-    qname: ''
+    qname: '',
   };
 
   // STATE VARIABLES
   const [sourceSchemaUrn, setSourceSchemaUrn] = React.useState<string>('');
   const [targetSchemaUrn, setTargetSchemaUrn] = React.useState<string>('');
 
-  const [selectedSourceNodes, setSelectedSourceNodes] = React.useState<RenderTree[]>([]);
-  const [selectedTargetNodes, setSelectedTargetNodes] = React.useState<RenderTree[]>([]);
+  const [selectedSourceNodes, setSelectedSourceNodes] = React.useState<
+    RenderTree[]
+  >([]);
+  const [selectedTargetNodes, setSelectedTargetNodes] = React.useState<
+    RenderTree[]
+  >([]);
   const [patchSourceNodes, setPatchSourceNodes] = React.useState<RenderTree[]>([
     emptyTreeSelection,
   ]);
@@ -91,7 +98,9 @@ export default function CrosswalkEditor({
 
   const [nodeMappings, setNodeMappings] = React.useState<NodeMapping[]>([]);
 
-  const [jointToBeEdited, setJointToBeEdited] = React.useState<CrosswalkConnectionNew | undefined>(undefined);
+  const [jointToBeEdited, setJointToBeEdited] = React.useState<
+    CrosswalkConnectionNew | undefined
+  >(undefined);
 
   const [linkingError, setLinkingError] = React.useState<string>('');
   const [selectedTab, setSelectedTab] = React.useState(1);
@@ -122,16 +131,18 @@ export default function CrosswalkEditor({
   const [deleteMapping, deleteMappingResponse] = useDeleteMappingMutation();
   const [patchMapping, patchMappingResponse] = usePatchMappingMutation();
 
-  const [sourceTreeSelection, setSourceTreeSelection] = React.useState<string[]>([]);
+  const [sourceTreeSelection, setSourceTreeSelection] = React.useState<
+    string[]
+  >([]);
 
-  const [targetTreeSelection, setTargetTreeSelection] = React.useState<string[]>([]);
+  const [targetTreeSelection, setTargetTreeSelection] = React.useState<
+    string[]
+  >([]);
 
-  const {
-    data: mappingFunctions,
-    isLoading: mappingFunctionsIsLoading,
-  } = useGetCrosswalkMappingFunctionsQuery('');
+  const { data: mappingFunctions, isLoading: mappingFunctionsIsLoading } =
+    useGetCrosswalkMappingFunctionsQuery('');
 
-  const {data: mappingFilters, isLoading: mappingFiltersIsLoading} =
+  const { data: mappingFilters, isLoading: mappingFiltersIsLoading } =
     useGetCrosswalkMappingFunctionsQuery('FILTERS');
 
   const {
@@ -143,7 +154,10 @@ export default function CrosswalkEditor({
     refetch: refetchCrosswalkData,
   } = useGetCrosswalkWithRevisionsQuery(crosswalkId);
 
-  const hasEditRights = HasPermission({actions: ['EDIT_CROSSWALK_MAPPINGS'], owner: getCrosswalkData?.owner});
+  const hasEditRights = HasPermission({
+    actions: ['EDIT_CROSSWALK_MAPPINGS'],
+    owner: getCrosswalkData?.owner,
+  });
 
   const fromTree = (nodes: any) => (
     <TreeItem
@@ -196,7 +210,7 @@ export default function CrosswalkEditor({
     ) {
       // Source and target nodes are both now fetched from trees
       setJointToBeEdited(
-        generateJointToBeEdited(patchSourceNodes, patchTargetNodes, patchPid),
+        generateJointToBeEdited(patchSourceNodes, patchTargetNodes, patchPid)
       );
     }
   }, [patchSourceNodes, patchTargetNodes]);
@@ -320,10 +334,11 @@ export default function CrosswalkEditor({
   function generateJointToBeEdited(
     sourceNodes: RenderTree[],
     targetNodes: RenderTree[],
-    patchPid: string,
+    patchPid: string
   ) {
-
-    const originalMapping: NodeMapping[] = nodeMappings.filter(item => item.pid === patchPid);
+    const originalMapping: NodeMapping[] = nodeMappings.filter(
+      (item) => item.pid === patchPid
+    );
 
     const jointsToBeAdded: CrosswalkConnectionNew[] = [];
     sourceNodes.forEach((sourceNode) => {
@@ -332,7 +347,8 @@ export default function CrosswalkEditor({
         target: targetNodes[0],
         id: patchPid,
         notes: originalMapping.length > 0 ? originalMapping[0].notes : '',
-        predicate: originalMapping.length > 0 ? originalMapping[0].predicate : '',
+        predicate:
+          originalMapping.length > 0 ? originalMapping[0].predicate : '',
         isSelected: true,
         isDraft: true,
         sourceJsonPath: undefined,
@@ -355,7 +371,7 @@ export default function CrosswalkEditor({
   function findNodesFromTree(
     tree: any,
     itemsToFind: string[],
-    results: RenderTree[],
+    results: RenderTree[]
   ) {
     tree.forEach((item: RenderTree) => {
       if (itemsToFind.includes(item.id)) {
@@ -372,7 +388,7 @@ export default function CrosswalkEditor({
   // Called from accordion
   const selectFromTreeByNodeMapping = (
     node: NodeMapping | undefined,
-    isSourceTree: boolean,
+    isSourceTree: boolean
   ) => {
     const nodeIds: string[] = [];
     if (node) {
@@ -389,7 +405,7 @@ export default function CrosswalkEditor({
   const performCallbackFromAccordionAction = (
     joint: NodeMapping,
     action: string,
-    value: string,
+    value: string
   ) => {
     if (action === 'remove') {
       removeJoint(joint);
@@ -415,7 +431,7 @@ export default function CrosswalkEditor({
 
   const performCallbackFromSchemaInfo = (
     nodeIds: RenderTree[],
-    isSourceTree: boolean,
+    isSourceTree: boolean
   ) => {
     if (nodeIds.length > 0) {
       if (isSourceTree) {
@@ -432,9 +448,7 @@ export default function CrosswalkEditor({
     }
   };
 
-  const performCallbackFromActionMenu = (
-    action: any,
-  ) => {
+  const performCallbackFromActionMenu = (action: any) => {
     if (action === 'edit') {
       if (isEditModeActive) {
         dispatch(setNotification('FINISH_EDITING_MAPPINGS'));
@@ -449,30 +463,30 @@ export default function CrosswalkEditor({
   const performCallbackFromMappingsModal = (
     action: any,
     mappingPayload: any,
-    patchPid: string,
+    patchPid: string
   ) => {
     if (action === 'closeModal') {
       setIsJointPatchOperation(false);
       setNodeMappingsModalOpen(false);
     }
     if (action === 'addJoint') {
       setNodeMappingsModalOpen(false);
-      putMapping({payload: mappingPayload, pid: crosswalkId});
+      putMapping({ payload: mappingPayload, pid: crosswalkId });
       const sourceIds: string[] = [];
       const targetIds: string[] = [];
       mappingPayload.source.forEach((node: { id: string }) =>
-        sourceIds.push(node.id),
+        sourceIds.push(node.id)
       );
       setSourceTreeSelection(sourceIds);
       mappingPayload.target.forEach((node: { id: string }) =>
-        targetIds.push(node.id),
+        targetIds.push(node.id)
       );
       setTargetTreeSelection(targetIds);
     }
     if (action === 'save') {
       setIsJointPatchOperation(false);
       setNodeMappingsModalOpen(false);
-      patchMapping({payload: mappingPayload, pid: patchPid});
+      patchMapping({ payload: mappingPayload, pid: patchPid });
     }
   };
 
@@ -483,7 +497,7 @@ export default function CrosswalkEditor({
   }
 
   function CustomTabPanel(props: TabPanelProps) {
-    const {children, value, index, ...other} = props;
+    const { children, value, index, ...other } = props;
 
     return (
       <div
@@ -494,7 +508,7 @@ export default function CrosswalkEditor({
         {...other}
       >
         {value === index && (
-          <Box sx={{p: 3}}>
+          <Box sx={{ p: 3 }}>
             <Typography>{children}</Typography>
           </Box>
         )}
@@ -511,7 +525,7 @@ export default function CrosswalkEditor({
 
   const changeTab = (
     event: React.SyntheticEvent | undefined,
-    newValue: number,
+    newValue: number
   ) => {
     setSelectedTab(newValue);
   };
@@ -544,7 +558,7 @@ export default function CrosswalkEditor({
           <>
             <Box
               className="mb-3"
-              sx={{borderBottom: 1, borderColor: 'divider'}}
+              sx={{ borderBottom: 1, borderColor: 'divider' }}
             >
               <Tabs
                 value={selectedTab}
@@ -609,13 +623,25 @@ export default function CrosswalkEditor({
                         type={ActionMenuTypes.CrosswalkEditor}
                       />
                     </ActionMenuWrapper>
+                    <TestButton>
+
+                        <OperationalizeModal
+                          sourceSchemaPid=""
+                          targetSchemaPid=""
+                          crosswalkPid=""
+                          ></OperationalizeModal>
+
+
+                    </TestButton>
                   </>
                 )}
               </div>
             </div>
             <div className="row d-flex justify-content-between crosswalk-editor">
               {/*  LEFT COLUMN */}
-              <div className={selectedTab === 1 ? 'col-12 mx-1 mt-3' : 'd-none'}>
+              <div
+                className={selectedTab === 1 ? 'col-12 mx-1 mt-3' : 'd-none'}
+              >
                 <>
                   <div className="row gx-0">
                     {/*  SOURCE TREE */}
@@ -696,11 +722,13 @@ export default function CrosswalkEditor({
               {selectedTab === 1 && (
                 <>
                   <div className="col-12 mt-4">
-                    <div className='d-flex justify-content-between'>
-                      <div><h2 className='mb-0'>Mappings</h2></div>
+                    <div className="d-flex justify-content-between">
+                      <div>
+                        <h2 className="mb-0">Mappings</h2>
+                      </div>
 
-                      <div className='align-self-end pe-1'>
-{/*                        // TODO: this can be shown when attribute qnames are available for accordion. Those are temporarily replaced with attribute ids.
+                      <div className="align-self-end pe-1">
+                        {/*                        // TODO: this can be shown when attribute qnames are available for accordion. Those are temporarily replaced with attribute ids.
                         <Checkbox
                           checked={showAttributeNames}
                           onClick={(newState) => {
@@ -714,7 +742,7 @@ export default function CrosswalkEditor({
                     <div className="joint-listing-accordion-wrap my-3">
                       <Box
                         className="mb-4"
-                        sx={{height: 640, flexGrow: 1, overflowY: 'auto'}}
+                        sx={{ height: 640, flexGrow: 1, overflowY: 'auto' }}
                       >
                         <MappingsAccordion
                           nodeMappings={nodeMappings}
@@ -736,7 +764,7 @@ export default function CrosswalkEditor({
                 <>
                   <Grid container>
                     <Grid item xs={6}>
-                      <h2 className='ms-2'>{t('metadata.versions')}</h2>
+                      <h2 className="ms-2">{t('metadata.versions')}</h2>
                     </Grid>
                     <Grid item xs={6} className="d-flex justify-content-end">
                       <div className="mt-3 me-2">
@@ -766,7 +794,7 @@ export default function CrosswalkEditor({
             <>
               <Box
                 className="mb-3"
-                sx={{borderBottom: 1, borderColor: 'divider'}}
+                sx={{ borderBottom: 1, borderColor: 'divider' }}
               >
                 <Tabs value={0} aria-label={t('tabs.label')}>
                   <Tab label={t('tabs.metadata-stub')} {...a11yProps(0)} />