For Test and Review: React component work all merged in single PR.

[jitu5]

Description

This is draft PR created just for test and review to see all the changes related to React component work together in one PR.

Exposing internal state: #1969
metadataPanel prop: #1965
MiniMapBtn prop: #1982
miniMap & pipelineBtn prop: #1983
Documentation: #1954

All the above branches are merged into this and once all the above is approved, I will merge this into main.

Development notes

QA notes

You can test new options prop in src/components/container.js as <App /> is the entry point or top level component for a standalone use case.

I created 3 state tags, nodeTypes and theme to test when it changes on setTimeout after 10 secs.
Pass options prop to component to test all possible cases.

import React, { useEffect } from 'react';
import App from '../app';
import getPipelineData from '../../utils/data-source';
import './container.scss';

/**
 * Top-level component for the use-case where Kedro-Viz is run as a standalone
 * app rather than imported as a library/package into a larger application.
 */
const Container = () => {
  const [tags, setTags] = React.useState({
    enabled: { companies: true, shuttles: true },
  });
  const [nodeTypes, setNodeTypes] = React.useState({
    disabled: {
      parameters: false,
      task: false,
      data: false,
    },
  });
  const [theme, setTheme] = React.useState('dark');

  useEffect(() => {
    setTimeout(() => {
      setTags({
        enabled: { evaluate: true, companies: false },
      });
      setNodeTypes({
        disabled: {
          parameters: true,
          task: true,
          data: false,
        },
      });
      setTheme('light');
    }, 10000);
  }, [theme, tags, nodeTypes, expAll]);

  return (
    <>
      <App
        data={getPipelineData()}
        options={{
          expandAllPipelines: expAll,
          display: {
            globalNavigation: true,
            sidebar: true,
            miniMap: true,
            expandPipelinesBtn: true,
            exportBtn: true,
            labelBtn: true,
            layerBtn: true,
            zoomToolbar: true,
            metadataPanel: true,
          },
          tag: tags,
          nodeType: nodeTypes,
          theme: theme,
        }}
      />
    </>
  );
};

export default Container;

Checklist

• Read the contributing guidelines
• Opened this PR as a 'Draft Pull Request' if it is work-in-progress
• Updated the documentation to reflect the code changes
• Added new entries to the RELEASE.md file
• Added tests to cover my changes

[ravi-kumar-pilla]

Apart from the [Nit] comment here, everything works as expected in local. Great work @jitu5 💯 . Thank you

[Huongg]

hey i tested it locally from my side and everything is working fine. Thank you @jitu5