side nav

Signed-off-by: Sai Medhini Reddy Maryada <[email protected]>
saimedhi · Aug 5, 2024 · 884f74f · 884f74f
1 parent 9f9f74e
commit 884f74f
Show file tree

Hide file tree

Showing 4 changed files with 104 additions and 7 deletions.
diff --git a/public/app.tsx b/public/app.tsx
@@ -4,7 +4,7 @@
  */
 
 import React from 'react';
-import { Route, RouteComponentProps, Switch } from 'react-router-dom';
+import { Route, RouteComponentProps, Switch, Redirect } from 'react-router-dom';
 import {
   EuiPageSideBar,
   EuiSideNav,
@@ -21,12 +21,22 @@ import {
 
 // styling
 import './global-styles.scss';
+import { useSelector } from 'react-redux';
+import { AppState } from './store';
 
-interface Props extends RouteComponentProps {}
+interface Props extends RouteComponentProps {
+  landingPage: string | undefined;
+  hideInAppSideNavBar: boolean;
+}
 
 export const FlowFrameworkDashboardsApp = (props: Props) => {
+  const { landingPage, hideInAppSideNavBar} = props;
+  // const hideSideNavBar = useSelector(
+  //   (state: AppState) => state.workflows.hideSideNavBar
+  // ) || hideInAppSideNavBar;
+  const hideSideNavBar = hideInAppSideNavBar;
   const sidebar = (
-    <EuiPageSideBar style={{ minWidth: 190 }} hidden={false} paddingSize="l">
+    <EuiPageSideBar style={{ minWidth: 190 }} hidden={hideSideNavBar} paddingSize="l">
       <EuiSideNav
         style={{ width: 190 }}
         items={[
@@ -76,7 +86,10 @@ export const FlowFrameworkDashboardsApp = (props: Props) => {
           <Route
             path={`${APP_PATH.HOME}`}
             render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => {
-              if (props.history.location.pathname !== APP_PATH.WORKFLOWS) {
+              if(landingPage){
+                return <Redirect from="/" to={landingPage} />;
+              }
+              else if (props.history.location.pathname !== APP_PATH.WORKFLOWS) {
                 props.history.replace({
                   ...history,
                   pathname: APP_PATH.WORKFLOWS,

diff --git a/public/plugin.ts b/public/plugin.ts
@@ -7,8 +7,12 @@ import {
   AppMountParameters,
   CoreSetup,
   CoreStart,
+  DEFAULT_APP_CATEGORIES,
+  DEFAULT_NAV_GROUPS,
+  WorkspaceAvailability,
   Plugin,
 } from '../../../src/core/public';
+import {WORKFLOWS_PAGE_NAV_ID, WORKFLOW_DETAIL_PAGE_NAV_ID, APP_PATH } from './utils/constants';
 import {
   FlowFrameworkDashboardsPluginSetup,
   FlowFrameworkDashboardsPluginStart,
@@ -24,6 +28,7 @@ export class FlowFrameworkDashboardsPlugin
       FlowFrameworkDashboardsPluginStart
     > {
   public setup(core: CoreSetup): FlowFrameworkDashboardsPluginSetup {
+    const hideInAppSideNavBar = core.chrome.navGroup.getNavGroupEnabled();
     // Register the plugin in the side navigation
     core.application.register({
       id: PLUGIN_ID,
@@ -42,9 +47,80 @@ export class FlowFrameworkDashboardsPlugin
         const routeServices = configureRoutes(coreStart);
         setCore(coreStart);
         setRouteService(routeServices);
-        return renderApp(coreStart, params);
+        return renderApp(coreStart, params, undefined, hideInAppSideNavBar);
       },
     });
+    // register applications with category and use case information
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS.observability,[
+      {
+        id: PLUGIN_ID,
+        category: DEFAULT_APP_CATEGORIES.search,
+        showInAllNavGroup: true
+      }
+    ])
+    core.chrome.navGroup.addNavLinksToGroup(DEFAULT_NAV_GROUPS['security-analytics'],[
+      {
+        id: PLUGIN_ID,
+        category: DEFAULT_APP_CATEGORIES.search,
+        showInAllNavGroup: true
+      }
+    ])
+
+    // // register sub applications as standard OSD applications with use case
+    // if (core.chrome.navGroup.getNavGroupEnabled()) {
+    //   core.application.register({
+    //     id: WORKFLOWS_PAGE_NAV_ID,
+    //     title: 'Get started',
+    //     order: 8040,
+    //     category: DEFAULT_APP_CATEGORIES.detect,
+    //     workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+    //     mount: async (params: AppMountParameters) => {
+    //       const { renderApp } = await import('./render_app');
+    //       const [coreStart] = await core.getStartServices();
+    //       return renderApp(coreStart, params, APP_PATH.WORKFLOWS, hideInAppSideNavBar);
+    //     },
+    //   }); 
+    // }
+
+    // if (core.chrome.navGroup.getNavGroupEnabled()) {
+    //   core.application.register({
+    //     id: WORKFLOW_DETAIL_PAGE_NAV_ID,
+    //     title: 'Workflow_detail',
+    //     order: 8040,
+    //     category: DEFAULT_APP_CATEGORIES.detect,
+    //     workspaceAvailability: WorkspaceAvailability.outsideWorkspace,
+    //     mount: async (params: AppMountParameters) => {
+    //       const { renderApp } = await import('./render_app');
+    //       const [coreStart] = await core.getStartServices();
+    //       return renderApp(coreStart, params, APP_PATH.WORKFLOW_DETAIL, hideInAppSideNavBar);
+    //     },
+    //   }); 
+    // }
+
+    // link the sub applications to the parent application
+    core.chrome.navGroup.addNavLinksToGroup(
+      DEFAULT_NAV_GROUPS.observability,
+      [{
+          id: WORKFLOWS_PAGE_NAV_ID,
+          parentNavLinkId: PLUGIN_ID
+      },
+      {
+        id: WORKFLOW_DETAIL_PAGE_NAV_ID,
+        parentNavLinkId: PLUGIN_ID
+      }]
+    );
+
+    core.chrome.navGroup.addNavLinksToGroup(
+      DEFAULT_NAV_GROUPS['security-analytics'],
+      [{
+          id: WORKFLOWS_PAGE_NAV_ID,
+          parentNavLinkId: PLUGIN_ID
+      },
+      {
+        id: WORKFLOW_DETAIL_PAGE_NAV_ID,
+        parentNavLinkId: PLUGIN_ID
+      }]
+    );
     return {};
   }
 

diff --git a/public/render_app.tsx b/public/render_app.tsx
@@ -16,14 +16,18 @@ import './global-styles.scss';
 
 export const renderApp = (
   coreStart: CoreStart,
-  { appBasePath, element }: AppMountParameters
+  { appBasePath, element }: AppMountParameters,
+  landingPage: string | undefined, hideInAppSideNavBar: boolean
 ) => {
   // This is so our base element stretches to fit the entire webpage
   element.className = 'stretch-absolute';
   ReactDOM.render(
     <Provider store={store}>
       <Router basename={appBasePath + '#/'}>
-        <Route render={(props) => <FlowFrameworkDashboardsApp {...props} />} />
+        <Route render={(props) => <FlowFrameworkDashboardsApp 
+        landingPage={landingPage}
+        hideInAppSideNavBar={hideInAppSideNavBar}
+        {...props} />} />
       </Router>
     </Provider>,
     element

diff --git a/public/utils/constants.ts b/public/utils/constants.ts
@@ -18,3 +18,7 @@ export const BREADCRUMBS = Object.freeze({
   FLOW_FRAMEWORK: { text: 'Flow Framework' },
   WORKFLOWS: { text: 'Workflows', href: `#${APP_PATH.WORKFLOWS}` },
 });
+
+export const WORKFLOWS_PAGE_NAV_ID = `flow_framework_dashboard-workflows`;
+
+export const WORKFLOW_DETAIL_PAGE_NAV_ID = `flow_framework_dashboard-workflow_detail`;