Added ScaLarList comp to fix properties with List settings not displa…

…yed (#388)

Co-authored-by: manasa <[email protected]>

src/bridge/react_pconnect.jsx

@@ -55,6 +55,7 @@ import UserReference from '../components/forms/UserReference';
 import Confirmation from '../components/templates/Confirmation';
 import BannerPage from '../components/templates/BannerPage';
 import QuickCreate from '../components/widgets/QuickCreate';
+import ScalarList from '../components/forms/ScalarList';
 
 const isClassIDCompare = (key, prev) => {
   return !(key === 'classID' && !prev[key]);
@@ -298,6 +299,10 @@ const getComponent = c11nEnv => {
         component = RootContainer;
         break;
 
+      case 'ScalarList':
+        component = ScalarList;
+        break;
+
       case 'SimpleTable':
         component = SimpleTable;
         break;

src/components/forms/ScalarList/config.json

@@ -0,0 +1,21 @@
+{
+  "name": "ScalarList",
+  "type": "Field",
+  "properties": [
+    {
+      "component": "$this.componentType",
+      "format": "COMPONENTDEFINITION"
+    },
+    {
+      "label": "List settings",
+      "format": "GROUP",
+      "properties": [
+        {
+          "name": "filter",
+          "label": "Filter by",
+          "format": "SCALARLISTFILTER"
+        }
+      ]
+    }
+  ]
+}

src/components/forms/ScalarList/index.tsx

@@ -0,0 +1,62 @@
+/* eslint-disable react/no-array-index-key */
+import React from 'react';
+import FieldValueList from '../../designSystemExtensions/FieldValueList';
+import PropTypes from 'prop-types';
+
+function CommaSeparatedList(props) {
+  const { items } = props;
+
+  return (
+    <ul style={{ padding: '0', margin: '0' }}>
+      {items.map((value, index) => {
+        return <span key={index}>{value}</span>;
+      })}
+    </ul>
+  );
+}
+
+export default function ScalarList(props) {
+  const {
+    label,
+    getPConnect,
+    componentType,
+    value: scalarValues,
+    displayMode,
+    hideLabel,
+    ...restProps
+  } = props;
+
+  const items = scalarValues?.map(scalarValue => {
+    return getPConnect().createComponent({
+      type: componentType,
+      config: {
+        value: scalarValue,
+        displayMode: 'LABELS_LEFT',
+        label,
+        ...restProps,
+        readOnly: 'true'
+      }
+    });
+  });
+
+  if (['LABELS_LEFT', 'STACKED_LARGE_VAL', 'DISPLAY_ONLY'].includes(displayMode)) {
+    const displayComp = (
+      <div>
+        <CommaSeparatedList items={items} />
+      </div>
+    );
+    return displayComp;
+  }
+
+  const displayComp = <CommaSeparatedList items={items} />;
+
+  return <FieldValueList name={hideLabel ? '' : label} value={displayComp} variant='stacked' />;
+}
+
+ScalarList.defaultProps = {};
+ScalarList.propTypes = {
+  getPConnect: PropTypes.func.isRequired,
+  displayInModal: PropTypes.bool,
+  hideLabel: PropTypes.bool,
+  value: PropTypes.arrayOf(PropTypes.any)
+};