From 96daa0b93d6733ff4dfe5231840deed939da2691 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maaria=20Wahlstr=C3=B6m?= <maaria.wahlstrom@csc.fi>
Date: Tue, 8 Oct 2024 16:39:45 +0300
Subject: [PATCH 1/3] MSCR-556 Add i18n to mapping modal

---
 mscr-ui/public/locales/en/common.json         | 11 +++
 mscr-ui/public/locales/fi/common.json         | 11 +++
 mscr-ui/public/locales/sv/common.json         | 11 +++
 .../tabs/node-mappings/index.tsx              | 87 ++++++++++---------
 4 files changed, 81 insertions(+), 39 deletions(-)

diff --git a/mscr-ui/public/locales/en/common.json b/mscr-ui/public/locales/en/common.json
index a921bfd49..e0ddda5a3 100644
--- a/mscr-ui/public/locales/en/common.json
+++ b/mscr-ui/public/locales/en/common.json
@@ -190,6 +190,17 @@
   "library": "",
   "library-variant": "",
   "link-opens-new-window-external": "",
+  "loading-circle-label": "",
+  "mapping-modal": {
+    "add-mapping": "Add mapping",
+    "edit-mapping": "Edit mapping",
+    "exact-match": "Exact match",
+    "mapping-operation": "Mapping operation",
+    "no-notes-set": "No notes set. Add free form notes here.",
+    "notes": "Notes",
+    "operation-not-selected": "Operation not selected",
+    "predicate": "Predicate"
+  },
   "mappings-accordion": {
     "clear": "Clear",
     "filter-from-mappings": "Filter from mappings",
diff --git a/mscr-ui/public/locales/fi/common.json b/mscr-ui/public/locales/fi/common.json
index c5e2e98d8..dbf730611 100644
--- a/mscr-ui/public/locales/fi/common.json
+++ b/mscr-ui/public/locales/fi/common.json
@@ -190,6 +190,17 @@
   "library": "",
   "library-variant": "",
   "link-opens-new-window-external": "",
+  "loading-circle-label": "",
+  "mapping-modal": {
+    "add-mapping": "",
+    "edit-mapping": "",
+    "exact-match": "",
+    "mapping-operation": "",
+    "no-notes-set": "",
+    "notes": "",
+    "operation-not-selected": "",
+    "predicate": ""
+  },
   "mappings-accordion": {
     "clear": "",
     "filter-from-mappings": "",
diff --git a/mscr-ui/public/locales/sv/common.json b/mscr-ui/public/locales/sv/common.json
index fd006bc64..66e053cc8 100644
--- a/mscr-ui/public/locales/sv/common.json
+++ b/mscr-ui/public/locales/sv/common.json
@@ -190,6 +190,17 @@
   "library": "",
   "library-variant": "",
   "link-opens-new-window-external": "",
+  "loading-circle-label": "",
+  "mapping-modal": {
+    "add-mapping": "",
+    "edit-mapping": "",
+    "exact-match": "",
+    "mapping-operation": "",
+    "no-notes-set": "",
+    "notes": "",
+    "operation-not-selected": "",
+    "predicate": ""
+  },
   "mappings-accordion": {
     "clear": "",
     "filter-from-mappings": "",
diff --git a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
index 38f07fb93..8c895f810 100644
--- a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
+++ b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
@@ -18,6 +18,7 @@ import {MidColumnWrapper} from "@app/modules/crosswalk-editor/tabs/node-mappings
 import {cloneDeep} from 'lodash';
 import {useRef} from 'react';
 import {highlightOperation} from "@app/modules/crosswalk-editor/mappings-accordion";
+import { useTranslation } from 'next-i18next';
 
 interface mappingOperationValue {
   operationId: string;
@@ -36,6 +37,7 @@ export default function NodeMappings(props: {
   highlightOperation: highlightOperation | undefined;
 }) {
   const EXACT_MATCH_DROPDOWN_DEFAULT = 'http://www.w3.org/2004/02/skos/core#exactMatch';
+  const { t } = useTranslation('common');
 
   let sourceSelectionInit = '';
   let targetSelectionInit = '';
@@ -512,7 +514,7 @@ export default function NodeMappings(props: {
         className="row bg-white edit-mapping-modal"
       >
         <ModalContent className="edit-mapping-modal-content">
-          <ModalTitle>{props.isPatchMappingOperation ? 'Edit mapping' : 'Add mapping'}</ModalTitle>
+          <ModalTitle>{props.isPatchMappingOperation ? t('mapping-modal.edit-mapping') : t('mapping-modal.add-mapping')}</ModalTitle>
           {false && isErrorBarVisible &&
               <ValidationErrorBar hideErrorBarCallback={() => setIsErrorBarVisible(false)}
                                   mappingNodes={mappingNodes}
@@ -522,47 +524,52 @@ export default function NodeMappings(props: {
             <div className="row bg-white">
               {/* SOURCE OPERATIONS */}
               <div className="col-4">
-                <NodeListingAccordion nodes={mappingNodes} mappingFunctions={props.mappingFunctions}
-                                      predicateOperationValues={predicateValues}
-                                      accordionCallbackFunction={accordionCallbackFunction}
-                                      isSourceAccordion={true}
-                                      isOneToManyMapping={props.isOneToManyMapping}
-                                      highlightOperation={highlightOperation} showAttributeNames={false}>
-                </NodeListingAccordion>
+                <NodeListingAccordion
+                  nodes={mappingNodes}
+                  mappingFunctions={props.mappingFunctions}
+                  predicateOperationValues={predicateValues}
+                  accordionCallbackFunction={accordionCallbackFunction}
+                  isSourceAccordion={true}
+                  isOneToManyMapping={props.isOneToManyMapping}
+                  highlightOperation={highlightOperation}
+                  showAttributeNames={false}
+                />
               </div>
 
               {/* MID COLUMN */}
               <div className="col-4 d-flex flex-column bg-light-blue">
                 <MidColumnWrapper>
-                  <div><Dropdown className='mt-2 node-info-dropdown'
-                                 labelText="Mapping operation"
-                                 ref={onMappingFunctionRefChange}
-                                 visualPlaceholder="Operation not selected"
-                                 value={mappingOperationSelection ? mappingOperationSelection : props.nodeSelections[0]?.processing?.id}
-                                 onChange={(newValue) => updateMappingOperationSelection(newValue)}
-                  >
-                    {mappingFunctions?.map((rt) => (
-                      <DropdownItem key={rt.uri} value={rt.uri}>
-                        {rt.name}
-                      </DropdownItem>
-                    ))}
-                  </Dropdown></div>
+                  <div>
+                    <Dropdown
+                      className='mt-2 node-info-dropdown'
+                      labelText={t('mapping-modal.mapping-operation')}
+                      ref={onMappingFunctionRefChange}
+                      visualPlaceholder={t('mapping-modal.operation-not-selected')}
+                      value={mappingOperationSelection ? mappingOperationSelection : props.nodeSelections[0]?.processing?.id}
+                      onChange={(newValue) => updateMappingOperationSelection(newValue)}
+                    >
+                      {mappingFunctions?.map((rt : {uri: string; name: string}) => (
+                        <DropdownItem key={rt.uri} value={rt.uri}>
+                          {rt.name}
+                        </DropdownItem>
+                      ))}
+                    </Dropdown>
+                  </div>
                   {generateMappingOperationFields(mappingOperationSelection ? mappingOperationSelection : props.nodeSelections[0]?.processing?.id)}
 
                   <div>
                     <br/>
                     <Dropdown
                       className="mt-2 mb-4 node-info-dropdown"
-                      labelText="Predicate"
-                      visualPlaceholder="Exact match"
+                      labelText={t('mapping-modal.predicate')}
+                      visualPlaceholder={t('mapping-modal.exact-match')}
                       value={predicateValue}
                       ref={onPredicateRefChange}
-                      autoFocus
+                      // autoFocus
                       //defaultValue={mappingNodes ? mappingNodes[0].predicate : ''}
                       onChange={(newValue) => {
-                        setPredicateValue(newValue)
-                      }
-                      }
+                        setPredicateValue(newValue);
+                      }}
                     >
                       {predicateValues.map((rt) => (
                         <DropdownItem key={rt.id} value={rt.id}>
@@ -574,8 +581,8 @@ export default function NodeMappings(props: {
                   </div>
                   <Textarea
                     onChange={(event) => setNotesValue(event.target.value)}
-                    labelText="Notes"
-                    visualPlaceholder="No notes set. Add free form notes here."
+                    labelText={t('mapping-modal.notes')}
+                    visualPlaceholder={t('mapping-modal.no-notes-set')}
                     value={notesValue}
                   />
                   <br/>
@@ -584,14 +591,16 @@ export default function NodeMappings(props: {
 
               {/* TARGET OPERATIONS */}
               <div className="col-4">
-                <NodeListingAccordion nodes={mappingNodes} mappingFunctions={props.mappingFunctions}
-                                      predicateOperationValues={predicateValues}
-                                      accordionCallbackFunction={accordionCallbackFunction}
-                                      isSourceAccordion={false}
-                                      isOneToManyMapping={props.isOneToManyMapping}
-                                      highlightOperation={highlightOperation}
-                                      showAttributeNames={false}
-                ></NodeListingAccordion>
+                <NodeListingAccordion
+                  nodes={mappingNodes}
+                  mappingFunctions={props.mappingFunctions}
+                  predicateOperationValues={predicateValues}
+                  accordionCallbackFunction={accordionCallbackFunction}
+                  isSourceAccordion={false}
+                  isOneToManyMapping={props.isOneToManyMapping}
+                  highlightOperation={highlightOperation}
+                  showAttributeNames={false}
+                />
               </div>
             </div>
           </div>
@@ -599,14 +608,14 @@ export default function NodeMappings(props: {
         <ModalFooter>
           <Button disabled={sourceOperationValueErrors.length > 0} style={{height: 'min-content'}}
                   onClick={() => save()}>
-            {'Save'}
+            {t('action.save')}
           </Button>
           <Button
             style={{height: 'min-content'}}
             variant="secondary"
             onClick={() => closeModal()}
           >
-            {'Cancel'}
+            {t('action.cancel')}
           </Button>
         </ModalFooter>
       </Modal>

From e08553836592439c297ff87efeae0caaf98909f0 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maaria=20Wahlstr=C3=B6m?= <maaria.wahlstrom@csc.fi>
Date: Tue, 8 Oct 2024 17:22:41 +0300
Subject: [PATCH 2/3] MSCR-556 Move mapping modal styling from style sheet to
 styled-component

---
 .../tabs/node-mappings/index.tsx              | 123 +++++++++---------
 .../node-listing-accordion/index.tsx          |   2 +-
 .../node-mappings/node-mappings.styles.tsx    |  19 +++
 .../src/pages/mscr-style-customizations.scss  |  21 ---
 4 files changed, 84 insertions(+), 81 deletions(-)

diff --git a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
index 8c895f810..f72f957e9 100644
--- a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
+++ b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
@@ -14,7 +14,11 @@ import {
   ModalTitle,
 } from 'suomifi-ui-components';
 import NodeListingAccordion from "@app/modules/crosswalk-editor/tabs/node-mappings/node-listing-accordion";
-import {MidColumnWrapper} from "@app/modules/crosswalk-editor/tabs/node-mappings/node-mappings.styles";
+import {
+  MidColumnWrapper,
+  StyledModal,
+  StyledModalContent
+} from '@app/modules/crosswalk-editor/tabs/node-mappings/node-mappings.styles';
 import {cloneDeep} from 'lodash';
 import {useRef} from 'react';
 import {highlightOperation} from "@app/modules/crosswalk-editor/mappings-accordion";
@@ -507,13 +511,13 @@ export default function NodeMappings(props: {
 
   return (
     <>
-      <Modal
+      <StyledModal
         appElementId="__next"
         visible={visible}
         onEscKeyDown={() => closeModal()}
-        className="row bg-white edit-mapping-modal"
+        className="row"
       >
-        <ModalContent className="edit-mapping-modal-content">
+        <StyledModalContent>
           <ModalTitle>{props.isPatchMappingOperation ? t('mapping-modal.edit-mapping') : t('mapping-modal.add-mapping')}</ModalTitle>
           {false && isErrorBarVisible &&
               <ValidationErrorBar hideErrorBarCallback={() => setIsErrorBarVisible(false)}
@@ -521,7 +525,7 @@ export default function NodeMappings(props: {
                                   mappingFunctions={props.mappingFunctions}></ValidationErrorBar>
           }
           <div className="col flex-column d-flex justify-content-between">
-            <div className="row bg-white">
+            <div className="row">
               {/* SOURCE OPERATIONS */}
               <div className="col-4">
                 <NodeListingAccordion
@@ -537,57 +541,55 @@ export default function NodeMappings(props: {
               </div>
 
               {/* MID COLUMN */}
-              <div className="col-4 d-flex flex-column bg-light-blue">
-                <MidColumnWrapper>
-                  <div>
-                    <Dropdown
-                      className='mt-2 node-info-dropdown'
-                      labelText={t('mapping-modal.mapping-operation')}
-                      ref={onMappingFunctionRefChange}
-                      visualPlaceholder={t('mapping-modal.operation-not-selected')}
-                      value={mappingOperationSelection ? mappingOperationSelection : props.nodeSelections[0]?.processing?.id}
-                      onChange={(newValue) => updateMappingOperationSelection(newValue)}
-                    >
-                      {mappingFunctions?.map((rt : {uri: string; name: string}) => (
-                        <DropdownItem key={rt.uri} value={rt.uri}>
-                          {rt.name}
-                        </DropdownItem>
-                      ))}
-                    </Dropdown>
-                  </div>
-                  {generateMappingOperationFields(mappingOperationSelection ? mappingOperationSelection : props.nodeSelections[0]?.processing?.id)}
-
-                  <div>
-                    <br/>
-                    <Dropdown
-                      className="mt-2 mb-4 node-info-dropdown"
-                      labelText={t('mapping-modal.predicate')}
-                      visualPlaceholder={t('mapping-modal.exact-match')}
-                      value={predicateValue}
-                      ref={onPredicateRefChange}
-                      // autoFocus
-                      //defaultValue={mappingNodes ? mappingNodes[0].predicate : ''}
-                      onChange={(newValue) => {
-                        setPredicateValue(newValue);
-                      }}
-                    >
-                      {predicateValues.map((rt) => (
-                        <DropdownItem key={rt.id} value={rt.id}>
-                          {rt.name}
-                        </DropdownItem>
-                      ))}
-                    </Dropdown>
-
-                  </div>
-                  <Textarea
-                    onChange={(event) => setNotesValue(event.target.value)}
-                    labelText={t('mapping-modal.notes')}
-                    visualPlaceholder={t('mapping-modal.no-notes-set')}
-                    value={notesValue}
-                  />
+              <MidColumnWrapper className="col-4 d-flex flex-column">
+                <div>
+                  <Dropdown
+                    className='mt-2 node-info-dropdown'
+                    labelText={t('mapping-modal.mapping-operation')}
+                    ref={onMappingFunctionRefChange}
+                    visualPlaceholder={t('mapping-modal.operation-not-selected')}
+                    value={mappingOperationSelection ? mappingOperationSelection : props.nodeSelections[0]?.processing?.id}
+                    onChange={(newValue) => updateMappingOperationSelection(newValue)}
+                  >
+                    {mappingFunctions?.map((rt : {uri: string; name: string}) => (
+                      <DropdownItem key={rt.uri} value={rt.uri}>
+                        {rt.name}
+                      </DropdownItem>
+                    ))}
+                  </Dropdown>
+                </div>
+                {generateMappingOperationFields(mappingOperationSelection ? mappingOperationSelection : props.nodeSelections[0]?.processing?.id)}
+
+                <div>
                   <br/>
-                </MidColumnWrapper>
-              </div>
+                  <Dropdown
+                    className="mt-2 mb-4 node-info-dropdown"
+                    labelText={t('mapping-modal.predicate')}
+                    visualPlaceholder={t('mapping-modal.exact-match')}
+                    value={predicateValue}
+                    ref={onPredicateRefChange}
+                    // autoFocus
+                    //defaultValue={mappingNodes ? mappingNodes[0].predicate : ''}
+                    onChange={(newValue) => {
+                      setPredicateValue(newValue);
+                    }}
+                  >
+                    {predicateValues.map((rt) => (
+                      <DropdownItem key={rt.id} value={rt.id}>
+                        {rt.name}
+                      </DropdownItem>
+                    ))}
+                  </Dropdown>
+
+                </div>
+                <Textarea
+                  onChange={(event) => setNotesValue(event.target.value)}
+                  labelText={t('mapping-modal.notes')}
+                  visualPlaceholder={t('mapping-modal.no-notes-set')}
+                  value={notesValue}
+                />
+                <br/>
+              </MidColumnWrapper>
 
               {/* TARGET OPERATIONS */}
               <div className="col-4">
@@ -604,10 +606,13 @@ export default function NodeMappings(props: {
               </div>
             </div>
           </div>
-        </ModalContent>
+        </StyledModalContent>
         <ModalFooter>
-          <Button disabled={sourceOperationValueErrors.length > 0} style={{height: 'min-content'}}
-                  onClick={() => save()}>
+          <Button
+            disabled={sourceOperationValueErrors.length > 0}
+            style={{height: 'min-content'}}
+            onClick={() => save()}
+          >
             {t('action.save')}
           </Button>
           <Button
@@ -618,7 +623,7 @@ export default function NodeMappings(props: {
             {t('action.cancel')}
           </Button>
         </ModalFooter>
-      </Modal>
+      </StyledModal>
     </>
   );
 }
diff --git a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/node-listing-accordion/index.tsx b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/node-listing-accordion/index.tsx
index ce327f33b..0fd7a09af 100644
--- a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/node-listing-accordion/index.tsx
+++ b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/node-listing-accordion/index.tsx
@@ -399,7 +399,7 @@ export default function NodeListingAccordion(props: nodeListingAccordionProps) {
         <Table aria-label="collapsible table w-100">
           <TableHead className="gx-0">
             <TableRow className="row gx-0">
-              <StyledTableHeadingCell className="col-12 bg-light-blue">
+              <StyledTableHeadingCell className="col-12">
                 <span
                   className="fw-bold ps-3">{props.isSourceAccordion ? props.isOneToManyMapping ? 'Source' : 'Sources' : props.isOneToManyMapping ? 'Targets' : 'Target'}</span>
               </StyledTableHeadingCell>
diff --git a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/node-mappings.styles.tsx b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/node-mappings.styles.tsx
index 6011dd865..101187fa6 100644
--- a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/node-mappings.styles.tsx
+++ b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/node-mappings.styles.tsx
@@ -1,6 +1,25 @@
 import styled from 'styled-components';
+import { Modal, ModalContent } from 'suomifi-ui-components';
 
 export const MidColumnWrapper = styled.div`
   min-height: 490px;
+  background-color: ${(props) => props.theme.suomifi.colors.highlightLight2};
 `;
 
+export const StyledModal = styled(Modal)`
+  background-color: ${(props) => props.theme.suomifi.colors.whiteBase};
+  && {
+    width: 1000px;
+  }
+`;
+
+export const StyledModalContent = styled(ModalContent)`
+  font-size: 0.9rem;
+  && {
+    padding: 30px 30px 30px 30px;
+    height: 600px;
+  }
+  th {
+    background-color: ${(props) => props.theme.suomifi.colors.highlightLight2};
+  }
+`;
diff --git a/mscr-ui/src/pages/mscr-style-customizations.scss b/mscr-ui/src/pages/mscr-style-customizations.scss
index 535324c45..9b33f1b41 100644
--- a/mscr-ui/src/pages/mscr-style-customizations.scss
+++ b/mscr-ui/src/pages/mscr-style-customizations.scss
@@ -41,19 +41,6 @@ body {
   width: 20% !important;
 }
 
-/* EDIT MAPPING MODAL */
-.edit-mapping-modal {
-  width: 1000px !important;
-  .bg-light-blue {
-    background: #d5e4f6 !important;
-  }
-  .edit-mapping-modal-content {
-    font-size: 0.9rem;
-    padding: 30px 30px 30px 30px !important;
-    height: 600px !important;
-  }
-}
-
 .empty-mappings-table {
   display: flex;
   font-size: 0.9rem;
@@ -240,14 +227,6 @@ body {
     color: #548fcb;
   }
 
-  .bg-light-blue {
-    background: #d5e4f6;
-  }
-
-  .bg-white {
-    background: #fff;
-  }
-
   .selected-accordion-row {
     background: #d5e4f6;
   }

From 49d595596a1a3cd3718a0addbc13f0057d51b6cf Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?Maaria=20Wahlstr=C3=B6m?= <maaria.wahlstrom@csc.fi>
Date: Tue, 8 Oct 2024 17:55:20 +0300
Subject: [PATCH 3/3] MSCR-556 Fix modal footer buttons disappearing when not
 enough height

---
 .../src/modules/crosswalk-editor/tabs/node-mappings/index.tsx    | 1 -
 1 file changed, 1 deletion(-)

diff --git a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
index f72f957e9..1d2be298c 100644
--- a/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
+++ b/mscr-ui/src/modules/crosswalk-editor/tabs/node-mappings/index.tsx
@@ -515,7 +515,6 @@ export default function NodeMappings(props: {
         appElementId="__next"
         visible={visible}
         onEscKeyDown={() => closeModal()}
-        className="row"
       >
         <StyledModalContent>
           <ModalTitle>{props.isPatchMappingOperation ? t('mapping-modal.edit-mapping') : t('mapping-modal.add-mapping')}</ModalTitle>