[INFRA-421] | Anoop | Add foldable group renderer

src/components/manifest/SchemaForm.tsx

@@ -11,6 +11,7 @@ import { JsonForms } from '@jsonforms/react'
 import { materialCells, materialRenderers } from '@jsonforms/material-renderers'
 import customAjv  from '../../ajv/CustomAjv'
 import _ from 'lodash'
+import { FoldableGroupTester, FoldableGroupRenderer } from '../../renderer/FoldableGroup'
 interface IProps {
     csrfToken?: any
     name: string
@@ -22,9 +23,11 @@ interface IProps {
     manifestData?: any
 }
 
-function isProperJsonSchema(schema: any) {
-    const schemaStr = JSON.stringify(schema)
-    return schemaStr.search("resource:/") === -1
+function isProperJsonSchema(completeSchema: any) {
+    let jsonSchema = completeSchema.jsonSchema
+    const schemaStr = JSON.stringify(jsonSchema)
+    let isProperSchema =  schemaStr.search("resource:/") === -1
+    return isProperSchema
 }
 
 export default function SchemaForm(props: IProps) {
@@ -78,7 +81,7 @@ export default function SchemaForm(props: IProps) {
 
 
                     {
-                        (!props.updateCompleteSchemaHandler && isProperJsonSchema(completeSchema.jsonSchema)) ?
+                        (!props.updateCompleteSchemaHandler && isProperJsonSchema(completeSchema)) ?
                             <JsonForms
                                 schema={completeSchema.jsonSchema}
                                 ajv={customAjv}
@@ -86,6 +89,7 @@ export default function SchemaForm(props: IProps) {
                                 data={props.manifestData}
                                 renderers={[
                                     ...materialRenderers,
+                                    {tester: FoldableGroupTester, renderer: FoldableGroupRenderer}
                                 ]}
                                 cells={materialCells}
                                 onChange={({ errors, data }) => {

src/renderer/FoldableGroup.tsx

@@ -0,0 +1,42 @@
+import { withJsonFormsLayoutProps } from '@jsonforms/react';
+import { rankWith, uiTypeIs } from "@jsonforms/core";
+import { MaterialLayoutRenderer, MaterialLayoutRendererProps } from "@jsonforms/material-renderers";
+import {
+  ExpansionPanel,
+  ExpansionPanelDetails,
+  ExpansionPanelSummary,
+  Hidden,
+  Typography
+} from "@material-ui/core";
+import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
+import React from "react";
+
+const FoldableGroup = props => {
+  const { uischema, schema, path, visible, renderers} = props;
+
+  const layoutProps : MaterialLayoutRendererProps = {
+    elements: uischema.elements,
+    schema: schema,
+    path: path,
+    direction: 'column',
+    visible: visible,
+    uischema: uischema,
+    renderers: renderers
+  };
+
+  return (
+    <Hidden>
+      <ExpansionPanel>
+        <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
+          <Typography>{uischema.label}</Typography>
+        </ExpansionPanelSummary>
+        <ExpansionPanelDetails>
+          <MaterialLayoutRenderer {...layoutProps} />
+        </ExpansionPanelDetails>
+      </ExpansionPanel>
+    </Hidden>
+  );
+};
+
+export const FoldableGroupRenderer =  withJsonFormsLayoutProps(FoldableGroup);
+export const FoldableGroupTester = rankWith(100, uiTypeIs("FoldableGroup"));