ENG 1693 Support array and null source data

src/objectmap-jsonforms/src/ObjectMap.tsx

@@ -4,6 +4,10 @@ import { rankWith, ControlProps, JsonSchema, and, uiTypeIs } from '@jsonforms/co
 import Row from './Row';
 import { Typography } from '@material-ui/core';
 
+interface Row {
+  target: Enum;
+}
+
 interface Enum {
   value: string;
   label?: string;
@@ -31,7 +35,7 @@ const ObjectMapControlVanillaRenderer = ({ data, handleChange, path, ...props }:
   const schema = props.schema as JsonSchemaWithCustomProps;
 
   const handleRowChange = (targetValue: string, source: Enum) => {
-    const i = data.findIndex((row: any) => row.target.value === targetValue);
+    const i = data.findIndex((row: Row) => row.target.value === targetValue);
 
     if (source.type === 'clearable') {
       data[i] = { target: data[i].target };
@@ -52,7 +56,7 @@ const ObjectMapControlVanillaRenderer = ({ data, handleChange, path, ...props }:
           {schema.items.properties.source.title}
         </Typography>
       </div>
-      {schema.items.properties.target.enum.map((e: any) => {
+      {schema.items.properties.target.enum.map((e: Enum) => {
         return (
           <Row key={e.value} target={e} sourceEnum={schema.items.properties.source.enum} onChange={handleRowChange} />
         );

src/objectmap-jsonforms/src/Row.tsx

@@ -33,14 +33,14 @@ const Row = ({ target, sourceEnum, onChange }: Props) => {
         <Select
           label="Select a Property"
           value={targetValue}
-          onChange={(e: any) => {
+          onChange={(e) => {
             const source = sourceEnum.find((val) => val.value === e.target.value);
 
             if (!source) {
               return;
             }
 
-            setTargetValue(e.target.value);
+            setTargetValue(e.target.value as string);
             onChange(target?.value || '', source);
           }}
         >

src/objectmap-jsonforms/src/SourceTable.tsx

@@ -5,35 +5,57 @@ import { Table, TableBody, TableCell, TableRow, TableHead, TableContainer, Paper
 import dot from 'dot-object';
 
 const SourceTableVanillaRenderer = ({ data }: ControlProps) => {
-  const baseTable = useMemo(() => {
-    return dot.dot(data);
+  const { baseTable, isDataEmpty, renderTable } = useMemo(() => {
+    const sourceData = data || {};
+
+    if (!data) {
+      return { baseTable: null, renderTable: false, isDataEmpty: true };
+    }
+
+    if (Object.keys(sourceData).length === 0) {
+      return { baseTable: null, renderTable: true, isDataEmpty: true };
+    }
+
+    return { baseTable: dot.dot(sourceData), renderTable: true, isDataEmpty: false };
   }, [data]);
 
-  return (
-    <div>
-      <Typography variant="h5" style={{ width: 'max-content', margin: '16px 0' }}>
-        Source Data
-      </Typography>
-      <TableContainer component={Paper} style={{ marginBottom: '16px' }}>
-        <Table>
-          <TableHead>
-            <TableRow>
-              {Object.keys(baseTable).map((val) => (
-                <TableCell key={val}>{val}</TableCell>
-              ))}
-            </TableRow>
-          </TableHead>
-          <TableBody>
-            <TableRow>
-              {Object.keys(baseTable).map((val) => (
-                <TableCell key={val}>{dot.pick(val, data)}</TableCell>
-              ))}
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
-  );
+  if (renderTable && isDataEmpty) {
+    return (
+      <div>
+        <Typography style={{ width: 'max-content', margin: '16px 0' }}>No Data Found</Typography>
+      </div>
+    );
+  }
+
+  if (renderTable && !isDataEmpty) {
+    return (
+      <div>
+        <Typography variant="h5" style={{ width: 'max-content', margin: '16px 0' }}>
+          Source Data
+        </Typography>
+        <TableContainer component={Paper} style={{ marginBottom: '16px' }}>
+          <Table>
+            <TableHead>
+              <TableRow>
+                {Object.keys(baseTable).map((val) => (
+                  <TableCell key={val}>{val}</TableCell>
+                ))}
+              </TableRow>
+            </TableHead>
+            <TableBody>
+              <TableRow>
+                {Object.keys(baseTable).map((val) => (
+                  <TableCell key={val}>{baseTable[val]}</TableCell>
+                ))}
+              </TableRow>
+            </TableBody>
+          </Table>
+        </TableContainer>
+      </div>
+    );
+  }
+
+  return null;
 };
 
 const SourceTableTester = rankWith(3, and(uiTypeIs('SourceTable')));

src/objectmap-jsonforms/src/TransformedTable.tsx

@@ -4,15 +4,21 @@ import { rankWith, ControlProps, and, uiTypeIs } from '@jsonforms/core';
 import { Table, TableBody, TableCell, TableRow, TableHead, TableContainer, Paper, Typography } from '@material-ui/core';
 import { objectMap } from '@fusebit/objectmap-utils';
 import dot from 'dot-object';
+import { AnyObject } from './types';
 
 const TransformedTableVanillaRenderer = ({ data }: ControlProps) => {
   const ctx = useJsonForms();
 
-  const tranformedTable: any = useMemo(() => {
-    return dot.dot(objectMap.transformData(ctx.core.data, data)) || [];
+  const tranformedTable: AnyObject = useMemo(() => {
+    const sourceData = [dot.object(data || {})];
+    const transformedDataArray = objectMap.transformData(ctx.core.data, sourceData);
+    const transformedDataObject = transformedDataArray?.[0] || {};
+    return dot.dot(transformedDataObject) || [];
   }, [ctx.core.data, data]);
 
-  return (
+  const renderTable = Object.keys(data || {}).length > 0;
+
+  return renderTable ? (
     <div>
       {Object.keys(tranformedTable || []).length > 0 && (
         <>
@@ -40,7 +46,7 @@ const TransformedTableVanillaRenderer = ({ data }: ControlProps) => {
         </>
       )}
     </div>
-  );
+  ) : null;
 };
 
 const TransformedTableTester = rankWith(3, and(uiTypeIs('TransformedTable')));

src/objectmap-jsonforms/src/types.ts

@@ -0,0 +1 @@
+export type AnyObject = Record<string, any>;

src/objectmap-utils/src/sdk.ts

@@ -1,4 +1,5 @@
 import dot from 'dot-object';
+import { AnyObject } from './types';
 
 const getKeyWithoutLastElement = (key: string) => {
   const splittedKey = key.split('.');
@@ -12,8 +13,8 @@ const parseKey = (key: string) => {
   return objectKey;
 };
 
-const generateEnum = (schema: any) => {
-  const schemaEnum: any = [];
+const generateEnum = (schema: AnyObject) => {
+  const schemaEnum: AnyObject[] = [];
 
   Object.keys(dot.dot(schema.properties)).forEach((key) => {
     const value = parseKey(key);
@@ -29,15 +30,15 @@ const generateEnum = (schema: any) => {
   return schemaEnum;
 };
 
-export const getKeyByUiSchemaType = (uischema: any, type: string) => {
-  let objectKey = null;
+export const getKeyByUiSchemaType = (uischema: AnyObject, type: string) => {
+  let objectKey = '';
 
   Object.keys(dot.dot(uischema)).forEach((element) => {
     if (element.includes('type') && dot.pick(element, uischema) === type) {
       const scopePicker = element.replace('type', 'scope');
       const scope = dot.pick(scopePicker, uischema);
       const splittedScope = scope.split('/');
-      const key = splittedScope[splittedScope.length - 1];
+      const key: string = splittedScope[splittedScope.length - 1];
       objectKey = key;
     }
   });
@@ -51,14 +52,14 @@ export const createSchema = ({
   uischema,
   dataToTransform,
 }: {
-  source: any;
-  target: any;
-  uischema: any;
-  dataToTransform: any;
+  source: AnyObject;
+  target: AnyObject;
+  uischema: AnyObject;
+  dataToTransform?: AnyObject;
 }) => {
-  const objectMapKey: any = getKeyByUiSchemaType(uischema, 'ObjectMap');
-  const sourceTableKey: any = getKeyByUiSchemaType(uischema, 'SourceTable');
-  const TransformedTableKey: any = getKeyByUiSchemaType(uischema, 'TransformedTable');
+  const objectMapKey = getKeyByUiSchemaType(uischema, 'ObjectMap');
+  const sourceTableKey = getKeyByUiSchemaType(uischema, 'SourceTable');
+  const TransformedTableKey = getKeyByUiSchemaType(uischema, 'TransformedTable');
   const sourceEnum = generateEnum(source);
   const targetEnum = generateEnum(target);
 
@@ -90,9 +91,9 @@ export const createSchema = ({
   };
 
   return {
-    schema: schema,
+    schema,
     data: {
-      [objectMapKey]: targetEnum.map((target: any) => ({ target })),
+      [objectMapKey]: targetEnum.map((target: AnyObject) => ({ target })),
       [sourceTableKey]: dataToTransform,
       [TransformedTableKey]: dataToTransform,
       baseKeys: {
@@ -104,14 +105,13 @@ export const createSchema = ({
   };
 };
 
-export const createRecipe = (data: any) => {
+export const createRecipe = (data: AnyObject) => {
   if (!data.baseKeys.objectMapKey) {
     return;
   }
 
   return data?.[data.baseKeys.objectMapKey]?.reduce(
-    //@ts-ignore
-    (acc, { source, target }) => {
+    (acc: AnyObject, { source, target }: { source: { value: AnyObject }; target: { value: string } }) => {
       if (!source?.value) {
         return acc;
       }
@@ -124,17 +124,21 @@ export const createRecipe = (data: any) => {
   );
 };
 
-export const transformData = (data: any, sourceData: any) => {
+export const transformData = (data: AnyObject, sourceData: AnyObject[]) => {
   try {
     const recipe = createRecipe(data);
-    const transformedData = Object.keys(recipe || []).reduce((acc: any, curr) => {
-      const sourceKey = recipe[curr];
-      const sourceValue = dot.pick(sourceKey, sourceData);
-      acc[curr] = sourceValue;
-      return dot.object(acc);
-    }, {});
-
-    return transformedData;
+    const transformations = sourceData.map((source) => {
+      const transformedData = Object.keys(recipe || []).reduce((acc: AnyObject, curr) => {
+        const sourceKey = recipe[curr];
+        const sourceValue = dot.pick(sourceKey, source);
+        acc[curr] = sourceValue;
+        return dot.object(acc);
+      }, {});
+
+      return transformedData;
+    });
+
+    return transformations;
   } catch (e) {
     console.error(e);
   }

src/objectmap-utils/src/types.ts

@@ -0,0 +1 @@
+export type AnyObject = Record<string, any>;