Merge pull request #228 from CSCfi/CSCFC4EMSCR-588_Array-values-in-no…

…de-info-box

CSCFC4EMSCR-588 Show node property attribute values that are arrays

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

@@ -6,12 +6,14 @@ import { InfoIcon } from '@app/common/components/shared-icons';
 import { useTranslation } from 'next-i18next';
 import { DropdownWrapper } from '@app/common/components/schema-info/schema-info.styles';
 import TypeSelector from '@app/common/components/schema-info/schema-tree/node-info/type-selector';
-import { IconLinkExternal } from 'suomifi-icons';
 import {
   setConfirmModalState,
   setSelectedRootNode,
 } from '@app/common/components/actionmenu/actionmenu.slice';
 import { useStoreDispatch } from '@app/store';
+import processHtmlLinks from '@app/common/utils/process-html-links';
+import { ConstantAttribute } from '@app/common/interfaces/node.interface';
+import RenderAttribute from '@app/common/components/schema-info/schema-tree/node-info/render-attribute';
 
 export default function NodeInfo(props: {
   treeData: RenderTree[];
@@ -46,11 +48,6 @@ export default function NodeInfo(props: {
     setSelectedNode(newSelectedNode ?? selectedNode);
   };
 
-  interface ConstantAttribute {
-    name: string;
-    value: string | undefined;
-  }
-
   useEffect(() => {
     if (selectedNode && selectedNode.properties) {
       const nodeProperties: ConstantAttribute[] = [];
@@ -59,29 +56,18 @@ export default function NodeInfo(props: {
           setNodeTypeAttribute(value as string);
           continue;
         }
+        let propertyValue;
+        if (typeof value === 'string') propertyValue = value.toString();
+        if (Array.isArray(value)) propertyValue = value;
         nodeProperties.push({
           name: key,
-          value: typeof value === 'string' ? value.toString() : undefined,
+          value: propertyValue,
         });
       }
       setNodeAttributes(nodeProperties);
     }
   }, [isLeafNode, props.isNodeEditable, selectedNode]);
 
-  function processHtmlLinks(input: string | undefined) {
-    if (
-      input &&
-      (input.startsWith('http://') || input.startsWith('https://'))
-    ) {
-      return (
-        <a href={input} target="_blank" rel="noreferrer">
-          {input} <IconLinkExternal />
-        </a>
-      );
-    }
-    return input;
-  }
-
   function setAsRootNode(node: RenderTree | undefined) {
     dispatch(setSelectedRootNode(node));
     if (node) {
@@ -178,18 +164,13 @@ export default function NodeInfo(props: {
               )}
 
               {nodeAttributes.map((attrib) => (
-                <div className="col-12" key={self.crypto.randomUUID()} hidden={(attrib.name === '@id' ? true : false)}>
-                  <div className="">{processHtmlLinks(attrib.name)}:</div>
-                  <div className="attribute-font">
-                    {processHtmlLinks(attrib.value)}
-                  </div>
-                </div>
+                <RenderAttribute key={self.crypto.randomUUID()} attribute={attrib} />
               ))}
               {props.isNodeEditable &&
                 isLeafNode &&
                 nodeTypeAttribute !== '' && (
-                  <div className="col-12" key={self.crypto.randomUUID()}>
-                    <div className="">@type:</div>
+                  <div className='col-12' key={self.crypto.randomUUID()}>
+                    <div>@type:</div>
                     <div className="attribute-font">
                       {processHtmlLinks(nodeTypeAttribute)}
                     </div>

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

@@ -0,0 +1,30 @@
+import { ConstantAttribute } from '@app/common/interfaces/node.interface';
+import processHtmlLinks from '@app/common/utils/process-html-links';
+
+export default function RenderAttribute({ attribute }: { attribute: ConstantAttribute }) {
+  const valueWithLinks = processHtmlLinks(attribute.value);
+  let valueList;
+  // Add line breaks between values if multiple
+  if (Array.isArray(valueWithLinks)) {
+    valueList = [valueWithLinks[0]];
+    for (let i = 1; i < valueWithLinks.length; i++) {
+      valueList.push(
+        <span key={self.crypto.randomUUID()}>
+          <br />
+          {valueWithLinks[i]}
+        </span>
+      );
+    }
+  } else {
+    valueList = valueWithLinks;
+  }
+  return (
+    <div
+      className="col-12"
+      hidden={attribute.name === '@id'}
+    >
+      <div>{processHtmlLinks(attribute.name)}:</div>
+      <div className="attribute-font">{valueList}</div>
+    </div>
+  );
+}

mscr-ui/src/common/interfaces/node.interface.ts

@@ -0,0 +1,4 @@
+export interface ConstantAttribute {
+  name: string;
+  value: string | Array<string | number | boolean> | undefined;
+}

mscr-ui/src/common/utils/process-html-links.tsx

@@ -0,0 +1,24 @@
+import { IconLinkExternal } from 'suomifi-icons';
+
+// Takes a string or an array of primitive values and swaps urls to link elements
+export default function processHtmlLinks(input: string | Array<string | number | boolean> | undefined) {
+  const inputArray = typeof input == 'string' ? [input] : input;
+  if (!inputArray) return undefined;
+  const output : Array<JSX.Element | string | number | boolean> = inputArray.map((inputPart) => {
+    if (typeof inputPart == 'string' && (inputPart.startsWith('http://') || inputPart.startsWith('https://'))) {
+      return (
+        <a key={inputPart} href={inputPart} target="_blank" rel="noreferrer">
+          {inputPart} <IconLinkExternal />
+        </a>
+      );
+    } else {
+      return inputPart;
+    }
+  });
+
+  if (typeof input == 'string') {
+    return output[0];
+  } else {
+    return output;
+  }
+}