Fix: render without routing when using as a React component

RELEASE.md

@@ -7,13 +7,15 @@ Please follow the established format:
 -->
 
 ## Major features and improvements
+
 - Added support for Python 3.9 and 3.10. (#815)
 
 ## Bug fixes and other changes
 
 - Change route name from `runsList` to `experiment-tracking`. (#820)
 - Update feature flag description to remind the user of the need for page refresh to apply settings. (#821)
 - Fix experiment tracking not showing run details bug on Windows. (#809)
+- Fix rendering of React component instance with custom routes. (#838)
 - Improve performance when many datasets are missing. (#832)
 - Fix flowchart not showing on initial load for static data inputs. (#843)
 

src/components/global-toolbar/global-toolbar.js

@@ -21,7 +21,6 @@ export const GlobalToolbar = ({
   onToggleSettingsModal,
   onToggleTheme,
   theme,
-  visible,
 }) => {
   return (
     <>

src/components/wrapper/wrapper.js

@@ -5,7 +5,6 @@ import { useApolloQuery } from '../../apollo/utils';
 import { client } from '../../apollo/config';
 import { GraphQLProvider } from '../provider/provider';
 import { GET_VERSIONS } from '../../apollo/queries';
-import { isLoading } from '../../selectors/loading';
 import classnames from 'classnames';
 import GlobalToolbar from '../global-toolbar';
 import FlowChartWrapper from '../flowchart-wrapper';
@@ -18,8 +17,11 @@ import './wrapper.css';
 /**
  * Main app container. Handles showing/hiding the sidebar nav, and theme classes.
  */
-export const Wrapper = ({ theme, displayGlobalToolbar }) => {
-  const { data: versionData } = useApolloQuery(GET_VERSIONS, { client });
+export const Wrapper = ({ displayGlobalToolbar, theme }) => {
+  const { data: versionData } = useApolloQuery(GET_VERSIONS, {
+    client,
+    skip: !displayGlobalToolbar,
+  });
   const [dismissed, setDismissed] = useState(false);
   const [isOutdated, setIsOutdated] = useState(false);
   const [latestVersion, setLatestVersion] = useState(null);
@@ -32,45 +34,50 @@ export const Wrapper = ({ theme, displayGlobalToolbar }) => {
   }, [versionData]);
 
   return (
-    <GraphQLProvider useMocks={false}>
-      <div
-        className={classnames('kedro-pipeline kedro', {
-          'kui-theme--dark': theme === 'dark',
-          'kui-theme--light': theme === 'light',
-        })}
-      >
-        <h1 className="pipeline-title">Kedro-Viz</h1>
-        <Router>
-          {displayGlobalToolbar && <GlobalToolbar isOutdated={isOutdated} />}
-          <SettingsModal
-            isOutdated={isOutdated}
-            latestVersion={latestVersion}
-          />
-          {versionData && isOutdated && !dismissed && (
-            <UpdateReminder
-              dismissed={dismissed}
-              versions={versionData.version}
-              setDismiss={setDismissed}
+    <div
+      className={classnames('kedro-pipeline kedro', {
+        'kui-theme--dark': theme === 'dark',
+        'kui-theme--light': theme === 'light',
+      })}
+    >
+      <h1 className="pipeline-title">Kedro-Viz</h1>
+      {displayGlobalToolbar ? (
+        <GraphQLProvider>
+          <Router>
+            <GlobalToolbar isOutdated={isOutdated} />
+            <SettingsModal
+              isOutdated={isOutdated}
+              latestVersion={latestVersion}
             />
-          )}
-          <Switch>
-            <Route exact path={['/', '/flowchart']}>
-              <FlowChartWrapper />
-            </Route>
-            <Route path={['/experiment-tracking', '/experiment-tracking/:id']}>
-              <ExperimentWrapper />
-            </Route>
-          </Switch>
-        </Router>
-      </div>
-    </GraphQLProvider>
+            {versionData && isOutdated && !dismissed && (
+              <UpdateReminder
+                dismissed={dismissed}
+                setDismiss={setDismissed}
+                versions={versionData.version}
+              />
+            )}
+            <Switch>
+              <Route exact path={['/', '/flowchart']}>
+                <FlowChartWrapper />
+              </Route>
+              <Route
+                path={['/experiment-tracking', '/experiment-tracking/:id']}
+              >
+                <ExperimentWrapper />
+              </Route>
+            </Switch>
+          </Router>
+        </GraphQLProvider>
+      ) : (
+        <FlowChartWrapper />
+      )}
+    </div>
   );
 };
 
 export const mapStateToProps = (state) => ({
-  loading: isLoading(state),
-  theme: state.theme,
   displayGlobalToolbar: state.display.globalToolbar,
+  theme: state.theme,
 });
 
 export default connect(mapStateToProps)(Wrapper);

src/components/wrapper/wrapper.test.js

@@ -3,13 +3,13 @@ import { mockState, setup } from '../../utils/state.mock';
 
 const { theme } = mockState.spaceflights;
 const mockProps = {
-  theme,
   displayGlobalToolbar: true,
+  theme,
 };
 
 const mockPropsNoGlobalToolbar = {
-  theme,
   displayGlobalToolbar: false,
+  theme,
 };
 
 describe('Wrapper', () => {
@@ -26,17 +26,15 @@ describe('Wrapper', () => {
     expect(container.hasClass(`kui-theme--dark`)).toBe(theme === 'dark');
   });
 
-  it('does not display the global toolbar when displayGlobalToolbar is false', () => {
-    const wrapper = setup.mount(Wrapper, mockPropsNoGlobalToolbar);
-    const container = wrapper.find('.pipeline-global-toolbar');
-    expect(container.length).toBe(0);
+  it('only displays the h1 and the FlowChartWrapper when displayGlobalToolbar is false', () => {
+    const wrapper = setup.shallow(Wrapper, mockPropsNoGlobalToolbar);
+    expect(wrapper.children()).toHaveLength(2);
   });
 
   it('maps state to props', () => {
     expect(mapStateToProps(mockState.spaceflights)).toEqual({
-      loading: false,
-      theme,
       displayGlobalToolbar: true,
+      theme,
     });
   });
 });