app.tsx

/*
 * Copyright OpenSearch Contributors
 * SPDX-License-Identifier: Apache-2.0
 */

import React from 'react';
import { Route, RouteComponentProps, Switch } from 'react-router-dom';
import { EuiPageSideBar, EuiSideNav, EuiPageTemplate } from '@elastic/eui';
import { Navigation, APP_PATH } from './utils';
import {
  Workflows,
  WorkflowDetail,
  WorkflowDetailRouterProps,
  WorkflowsRouterProps,
} from './pages';

interface Props extends RouteComponentProps {}

export const FlowFrameworkDashboardsApp = (props: Props) => {
  const sidebar = (
    <EuiPageSideBar style={{ minWidth: 190 }} hidden={false} paddingSize="l">
      <EuiSideNav
        style={{ width: 190 }}
        items={[
          {
            name: Navigation.FlowFramework,
            id: 0,
            items: [
              {
                name: Navigation.Workflows,
                id: 1,
                href: `#${APP_PATH.WORKFLOWS}`,
                isSelected: props.location.pathname === APP_PATH.WORKFLOWS,
              },
            ],
          },
        ]}
      />
    </EuiPageSideBar>
  );

  // Render the application DOM.
  return (
    <EuiPageTemplate
      template="empty"
      paddingSize="none"
      grow={true}
      restrictWidth={false}
      pageContentProps={{ paddingSize: 's' }}
      pageSideBar={sidebar}
    >
      <Switch>
        <Route
          path={APP_PATH.WORKFLOW_DETAIL}
          render={(
            routeProps: RouteComponentProps<WorkflowDetailRouterProps>
          ) => <WorkflowDetail {...routeProps} />}
        />
        <Route
          path={APP_PATH.WORKFLOWS}
          render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
            <Workflows {...routeProps} />
          )}
        />
        {/* Defaulting to Workflows page */}
        <Route
          path={`${APP_PATH.HOME}`}
          render={(routeProps: RouteComponentProps<WorkflowsRouterProps>) => (
            <Workflows {...routeProps} />
          )}
        />
      </Switch>
    </EuiPageTemplate>
  );
};