Merge pull request #219 from CSCfi/CSCFC4EMSCR-556_Fix-modal-buttons-…

…getting-hidden CSCFC4EMSCR-556 Fix mapping modal buttons getting hidden
CSCfi · Oct 16, 2024 · 6c9a839 · 6c9a839
2 parents 5cb5196 + 49d5955
commit 6c9a839
Show file tree

Hide file tree

Showing 7 changed files with 136 additions and 92 deletions.
diff --git a/mscr-ui/public/locales/en/common.json b/mscr-ui/public/locales/en/common.json
@@ -194,6 +194,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
@@ -194,6 +194,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
@@ -194,6 +194,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
@@ -14,10 +14,15 @@ 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";
+import { useTranslation } from 'next-i18next';
 
 interface mappingOperationValue {
   operationId: string;
@@ -36,6 +41,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 = '';
@@ -505,111 +511,118 @@ export default function NodeMappings(props: {
 
   return (
     <>
-      <Modal
+      <StyledModal
         appElementId="__next"
         visible={visible}
         onEscKeyDown={() => closeModal()}
-        className="row bg-white edit-mapping-modal"
       >
-        <ModalContent className="edit-mapping-modal-content">
-          <ModalTitle>{props.isPatchMappingOperation ? 'Edit mapping' : 'Add mapping'}</ModalTitle>
+        <StyledModalContent>
+          <ModalTitle>{props.isPatchMappingOperation ? t('mapping-modal.edit-mapping') : t('mapping-modal.add-mapping')}</ModalTitle>
           {false && isErrorBarVisible &&
               <ValidationErrorBar hideErrorBarCallback={() => setIsErrorBarVisible(false)}
                                   mappingNodes={mappingNodes}
                                   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 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)}
+              <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) => (
+                    {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"
-                      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="Notes"
-                    visualPlaceholder="No notes set. Add free form notes here."
-                    value={notesValue}
-                  />
+                  </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">
-                <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>
-        </ModalContent>
+        </StyledModalContent>
         <ModalFooter>
-          <Button disabled={sourceOperationValueErrors.length > 0} style={{height: 'min-content'}}
-                  onClick={() => save()}>
-            {'Save'}
+          <Button
+            disabled={sourceOperationValueErrors.length > 0}
+            style={{height: 'min-content'}}
+            onClick={() => save()}
+          >
+            {t('action.save')}
           </Button>
           <Button
             style={{height: 'min-content'}}
             variant="secondary"
             onClick={() => closeModal()}
           >
-            {'Cancel'}
+            {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
@@ -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
@@ -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
@@ -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;
   }