Introduce metadataPanel prop in Kedro-Viz react component

RELEASE.md

@@ -13,6 +13,7 @@ Please follow the established format:
 - Enable/disable preview for all the datasets when publishing Kedro-Viz from UI. (#1895)
 - Display published URLs. (#1907)
 - Conditionally move session store and stats file to .viz directory. (#1915)
+- Introduce `metadataPanel` prop in Kedro-Viz react component. (#1965)
 
 ## Bug fixes and other changes
 

src/components/app/app.js

@@ -108,6 +108,7 @@ App.propTypes = {
     sidebar: PropTypes.bool,
     miniMap: PropTypes.bool,
     expandAllPipelines: PropTypes.bool,
+    metadataPanel: PropTypes.bool,
   }),
 };
 

src/components/flowchart-wrapper/flowchart-wrapper.js

@@ -58,6 +58,7 @@ export const FlowChartWrapper = ({
   pipelines,
   sidebarVisible,
   activePipeline,
+  displayMetadataPanel,
 }) => {
   const history = useHistory();
   const { pathname, search } = useLocation();
@@ -309,7 +310,7 @@ export const FlowChartWrapper = ({
     return (
       <div className="kedro-pipeline">
         <Sidebar />
-        <MetaData />
+        {displayMetadataPanel && <MetaData />}
         <PipelineWarning
           errorMessage={errorMessage}
           invalidUrl={isInvalidUrl}
@@ -321,7 +322,7 @@ export const FlowChartWrapper = ({
     return (
       <div className="kedro-pipeline">
         <Sidebar />
-        <MetaData />
+        {displayMetadataPanel && <MetaData />}
         <div className="pipeline-wrapper">
           <PipelineWarning />
           <FlowChart />
@@ -366,6 +367,7 @@ export const mapStateToProps = (state) => ({
   pipelines: state.pipeline.ids,
   activePipeline: state.pipeline.active,
   sidebarVisible: state.visible.sidebar,
+  displayMetadataPanel: state.display.metadataPanel,
 });
 
 export const mapDispatchToProps = (dispatch) => ({

src/components/flowchart/flowchart.js

@@ -446,11 +446,19 @@ export class FlowChart extends Component {
    * @param {Object} node Datum for a single node
    */
   handleNodeClick = (event, node) => {
-    if (node.type === 'modularPipeline') {
-      this.props.onClickToExpandModularPipeline(node.id);
-    } else {
-      this.props.onLoadNodeData(node.id);
-      this.props.toSelectedNode(node);
+    const { type, id } = node;
+    const {
+      onClickToExpandModularPipeline,
+      displayMetadataPanel,
+      onLoadNodeData,
+      toSelectedNode,
+    } = this.props;
+
+    if (type === 'modularPipeline') {
+      onClickToExpandModularPipeline(id);
+    } else if (displayMetadataPanel) {
+      onLoadNodeData(id);
+      toSelectedNode(node);
     }
     event.stopPropagation();
   };
@@ -690,6 +698,7 @@ export const mapStateToProps = (state, ownProps) => ({
   chartSize: getChartSize(state),
   chartZoom: getChartZoom(state),
   displayGlobalToolbar: state.display.globalToolbar,
+  displayMetadataPanel: state.display.metadataPanel,
   edges: state.graph.edges || emptyEdges,
   focusMode: state.visible.modularPipelineFocusMode,
   graphSize: state.graph.size || emptyGraphSize,

src/components/flowchart/flowchart.test.js

@@ -486,6 +486,7 @@ describe('FlowChart', () => {
       inputOutputDataEdges: expect.any(Object),
       focusMode: expect.any(Object),
       displayGlobalToolbar: expect.any(Boolean),
+      displayMetadataPanel: expect.any(Boolean),
     };
     expect(mapStateToProps(mockState.spaceflights)).toEqual(expectedResult);
   });

src/store/initial-state.js

@@ -51,6 +51,7 @@ export const createInitialState = () => ({
     sidebar: true,
     miniMap: true,
     expandAllPipelines: false,
+    metadataPanel: true,
   },
   zoom: {},
   runsMetadata: {},