[INFRA-421] | Anoop | Hide sibling folds when a FoldingGroup is opened

src/components/manifest/SchemaForm.tsx

@@ -12,6 +12,7 @@ import { materialCells, materialRenderers } from '@jsonforms/material-renderers'
 import customAjv  from '../../ajv/CustomAjv'
 import _ from 'lodash'
 import { FoldableGroupTester, FoldableGroupRenderer } from '../../renderer/FoldableGroup'
+import { FoldableGroupContextProvider } from '../../renderer/FoldableGroupContext'
 interface IProps {
     csrfToken?: any
     name: string
@@ -66,6 +67,7 @@ export default function SchemaForm(props: IProps) {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [])
 
+
     return (
         (
             !isLoading ?
@@ -82,21 +84,23 @@ export default function SchemaForm(props: IProps) {
 
                     {
                         (!props.updateCompleteSchemaHandler && isProperJsonSchema(completeSchema)) ?
-                            <JsonForms
-                                schema={completeSchema.jsonSchema}
-                                ajv={customAjv}
-                                uischema={completeSchema.uiSchema}
-                                data={props.manifestData}
-                                renderers={[
-                                    ...materialRenderers,
-                                    {tester: FoldableGroupTester, renderer: FoldableGroupRenderer}
-                                ]}
-                                cells={materialCells}
-                                onChange={({ errors, data }) => {
-                                    if(props.onDataChange) {
-                                        props.onDataChange(data)
-                                    }
-                                }} />
+                            <FoldableGroupContextProvider>
+                                <JsonForms
+                                    schema={completeSchema.jsonSchema}
+                                    ajv={customAjv}
+                                    uischema={completeSchema.uiSchema}
+                                    data={props.manifestData}
+                                    renderers={[
+                                        ...materialRenderers,
+                                        { tester: FoldableGroupTester, renderer: FoldableGroupRenderer }
+                                    ]}
+                                    cells={materialCells}
+                                    onChange={({ errors, data }) => {
+                                        if (props.onDataChange) {
+                                            props.onDataChange(data)
+                                        }
+                                    }} />
+                            </FoldableGroupContextProvider>
                             : null
                     }
 

src/renderer/FoldableGroup.tsx

@@ -10,9 +10,11 @@ import {
 } from "@material-ui/core";
 import ExpandMoreIcon from "@material-ui/icons/ExpandMore";
 import React from "react";
+import { FoldableGroupContext } from './FoldableGroupContext';
 
 const FoldableGroup = props => {
   const { uischema, schema, path, visible, renderers} = props;
+  const { foldableGroupState, foldableGroupDispatch } = React.useContext(FoldableGroupContext)
 
   const layoutProps : MaterialLayoutRendererProps = {
     elements: uischema.elements,
@@ -20,13 +22,29 @@ const FoldableGroup = props => {
     path: path,
     direction: 'column',
     visible: visible,
-    uischema: uischema,
     renderers: renderers
   };
 
+  let expansionPanelProps = {}
+
+  if(uischema.parentId) {
+        const currentExpandedPanel = foldableGroupState[uischema.parentId]
+        expansionPanelProps = {
+            expanded: currentExpandedPanel === uischema.id,
+            onChange: (event, isExpanded) => {
+                if(isExpanded) {
+                    foldableGroupDispatch({ type: 'EXPAND', key: uischema.parentId, value: uischema.id })
+                }
+                else {
+                    foldableGroupDispatch({ type: 'SHRINK', key: uischema.parentId })
+                }
+            }
+        }
+    }
+
   return (
     <Hidden>
-      <ExpansionPanel>
+      <ExpansionPanel {...expansionPanelProps}>
         <ExpansionPanelSummary expandIcon={<ExpandMoreIcon />}>
           <Typography>{uischema.label}</Typography>
         </ExpansionPanelSummary>

src/renderer/FoldableGroupContext.tsx

@@ -0,0 +1,21 @@
+import React, { createContext, useReducer } from "react";
+
+const FoldableGroupContext = createContext<any>({})
+
+const reducer = (state, action) => {
+  switch(action.type) {
+    case 'EXPAND':
+      return { ...state, [action.key]: action.value }
+    case 'SHRINK':
+      delete state[action.key]
+      return {...state}
+  }
+};
+
+const FoldableGroupContextProvider = (props) => {
+  const [state, dispatch] = useReducer(reducer, []);
+
+  return <FoldableGroupContext.Provider value={{ foldableGroupState: state, foldableGroupDispatch: dispatch }}> {props.children} </FoldableGroupContext.Provider>;
+};
+
+export { FoldableGroupContext, FoldableGroupContextProvider };