[RHOAIENG-5487] Initial "empty state" of home page

backend/src/types.ts

@@ -23,6 +23,7 @@ export type DashboardConfig = K8sResourceCommon & {
       disableISVBadges: boolean;
       disableAppLauncher: boolean;
       disableUserManagement: boolean;
+      disableHome: boolean;
       disableProjects: boolean;
       disableModelServing: boolean;
       disableProjectSharing: boolean;

backend/src/utils/constants.ts

@@ -48,6 +48,7 @@ export const blankDashboardCR: DashboardConfig = {
       disableISVBadges: false,
       disableAppLauncher: false,
       disableUserManagement: false,
+      disableHome: true,
       disableProjects: false,
       disableModelServing: false,
       disableProjectSharing: false,

docs/dashboard-config.md

@@ -9,7 +9,7 @@ By default the ODH Dashboard comes with a set of core features enabled that are
 The following are a list of features that are supported, along with there default settings.
 
 | Feature                      | Default | Description                                                                                          |
-| ---------------------------- | ------- | ---------------------------------------------------------------------------------------------------- |
+|------------------------------|---------|------------------------------------------------------------------------------------------------------|
 | enablement                   | true    | Enables the ability to enable ISVs to the dashboard                                                  |
 | disableInfo                  | false   | Removes the information panel in Explore Application section                                         |
 | disableSupport               | false   | Disables components related to support.                                                              |
@@ -19,6 +19,7 @@ The following are a list of features that are supported, along with there defaul
 | disableISVBadges             | false   | Removes the badge that indicate if a product is ISV or not.                                          |
 | disableAppLauncher           | false   | Removes the application launcher that is used in OKD environments                                    |
 | disableUserManagement        | false   | Removes the User Management panel in Settings.                                                       |
+| disableHome                  | true    | Disables Data Science Home page from the dashboard.                                                  |
 | disableProjects              | false   | Disables Data Science Projects from the dashboard.                                                   |
 | disablePipelines             | false   | Disables Data Science Pipelines from the dashboard.                                                  |
 | disableModelServing          | false   | Disables Model Serving from the dashboard and from Data Science Projects.                            |
@@ -50,6 +51,7 @@ spec:
     disableISVBadges: false
     disableAppLauncher: false
     disableUserManagement: false
+    disableHome: true
     disableProjects: false
     disablePipelines: false
     disableModelServing: false
@@ -144,6 +146,7 @@ spec:
     disableInfo: false
     disableSupport: false
     disableTracking: true
+    disableHome: true
     disableProjects: true
     disablePipelines: true
     disableModelServing: true

frontend/src/__mocks__/mockDashboardConfig.ts

@@ -9,6 +9,7 @@ type MockDashboardConfigType = {
   disableISVBadges?: boolean;
   disableAppLauncher?: boolean;
   disableUserManagement?: boolean;
+  disableHome?: boolean;
   disableProjects?: boolean;
   disablePipelines?: boolean;
   disableModelServing?: boolean;
@@ -33,6 +34,7 @@ export const mockDashboardConfig = ({
   disableISVBadges = false,
   disableAppLauncher = false,
   disableUserManagement = false,
+  disableHome = true,
   disableProjects = false,
   disableModelServing = false,
   disableCustomServingRuntimes = false,
@@ -67,6 +69,7 @@ export const mockDashboardConfig = ({
       disableISVBadges,
       disableAppLauncher,
       disableUserManagement,
+      disableHome,
       disableProjects,
       disableModelServing,
       disableCustomServingRuntimes,

frontend/src/__tests__/cypress/cypress/e2e/home/home.cy.ts

@@ -0,0 +1,33 @@
+import { mockDashboardConfig } from '~/__mocks__/mockDashboardConfig';
+import { mockComponents } from '~/__mocks__/mockComponents';
+import { enabledPage } from '~/__tests__/cypress/cypress/pages/enabled';
+
+type HandlersProps = {
+  disableHome?: boolean;
+};
+
+const initIntercepts = ({ disableHome }: HandlersProps) => {
+  cy.interceptOdh(
+    'GET /api/config',
+    mockDashboardConfig({
+      disableHome,
+    }),
+  );
+  cy.interceptOdh('GET /api/components', { query: { installed: 'true' } }, mockComponents());
+};
+
+describe('Home page', () => {
+  it('should not be shown by default', () => {
+    initIntercepts({});
+    cy.visit('/');
+    cy.findByTestId('enabled-application').should('be.visible');
+  });
+  it('should be shown when enabled', () => {
+    initIntercepts({ disableHome: false });
+    cy.visit('/');
+    cy.findByTestId('home-page').should('be.visible');
+
+    // enabled applications page is still navigable
+    enabledPage.visit(true);
+  });
+});

frontend/src/__tests__/cypress/cypress/pages/enabled.ts

@@ -1,6 +1,6 @@
 class EnabledPage {
-  visit() {
-    cy.visit('/');
+  visit(homeEnabled = false) {
+    cy.visit(homeEnabled ? '/enabled' : '/');
     this.wait();
   }
 

frontend/src/app/AppRoutes.tsx

@@ -6,6 +6,10 @@ import UnauthorizedError from '~/pages/UnauthorizedError';
 import { useUser } from '~/redux/selectors';
 import { globExperimentsAll, globPipelineRunsAll, globPipelinesAll } from '~/routes';
 import { useCheckJupyterEnabled } from '~/utilities/notebookControllerUtils';
+import { SupportedArea } from '~/concepts/areas';
+import useIsAreaAvailable from '~/concepts/areas/useIsAreaAvailable';
+
+const HomePage = React.lazy(() => import('../pages/home/Home'));
 
 const InstalledApplications = React.lazy(
   () => import('../pages/enabledApplications/EnabledApplications'),
@@ -56,6 +60,7 @@ const ModelRegistryRoutes = React.lazy(() => import('../pages/modelRegistry/Mode
 const AppRoutes: React.FC = () => {
   const { isAdmin, isAllowed } = useUser();
   const isJupyterEnabled = useCheckJupyterEnabled();
+  const isHomeAvailable = useIsAreaAvailable(SupportedArea.HOME).status;
 
   if (!isAllowed) {
     return (
@@ -69,7 +74,14 @@ const AppRoutes: React.FC = () => {
     <React.Suspense fallback={<ApplicationsPage title="" description="" loaded={false} empty />}>
       <InvalidArgoDeploymentAlert />
       <Routes>
-        <Route path="/" element={<InstalledApplications />} />
+        {isHomeAvailable ? (
+          <>
+            <Route path="/" element={<HomePage />} />
+            <Route path="/enabled" element={<InstalledApplications />} />
+          </>
+        ) : (
+          <Route path="/" element={<InstalledApplications />} />
+        )}
         <Route path="/explore" element={<ExploreApplications />} />
         <Route path="/resources" element={<LearningCenterPage />} />
 

frontend/src/concepts/areas/const.ts

@@ -18,6 +18,9 @@ export const SupportedAreasStateMap: SupportedAreasState = {
     featureFlags: ['disablePipelines'],
     requiredComponents: [StackComponent.DS_PIPELINES],
   },
+  [SupportedArea.HOME]: {
+    featureFlags: ['disableHome'],
+  },
   [SupportedArea.DS_PROJECTS_VIEW]: {
     featureFlags: ['disableProjects'],
   },

frontend/src/concepts/areas/types.ts

@@ -22,6 +22,8 @@ export type IsAreaAvailableStatus = {
 
 /** All areas that we need to support in some fashion or another */
 export enum SupportedArea {
+  HOME = 'home',
+
   /* Standalone areas */
   DS_PIPELINES = 'ds-pipelines',
   // TODO: Jupyter Tile Support? (outside of feature flags today)

frontend/src/k8sTypes.ts

@@ -1196,6 +1196,7 @@ export type DashboardCommonConfig = {
   disableISVBadges: boolean;
   disableAppLauncher: boolean;
   disableUserManagement: boolean;
+  disableHome: boolean;
   disableProjects: boolean;
   disableModelServing: boolean;
   disableProjectSharing: boolean;

frontend/src/pages/home/Home.tsx

@@ -0,0 +1,27 @@
+import * as React from 'react';
+import {
+  Bullseye,
+  EmptyState,
+  EmptyStateHeader,
+  EmptyStateIcon,
+  PageSection,
+  PageSectionVariants,
+} from '@patternfly/react-core';
+import { HomeIcon } from '@patternfly/react-icons';
+
+const Home: React.FC = () => (
+  <PageSection data-testid="home-page" variant={PageSectionVariants.light}>
+    <Bullseye>
+      <EmptyState variant="full">
+        <EmptyStateHeader
+          titleText="Welcome to the home page"
+          headingLevel="h4"
+          icon={<EmptyStateIcon icon={HomeIcon} />}
+          alt=""
+        />
+      </EmptyState>
+    </Bullseye>
+  </PageSection>
+);
+
+export default Home;

frontend/src/utilities/NavData.tsx

@@ -30,16 +30,23 @@ export const isNavDataGroup = (navData: NavDataItem): navData is NavDataGroup =>
 const useAreaCheck = <T,>(area: SupportedArea, success: T[]): T[] =>
   useIsAreaAvailable(area).status ? success : [];
 
-const useApplicationsNav = (): NavDataItem[] => [
-  {
-    id: 'applications',
-    group: { id: 'apps', title: 'Applications' },
-    children: [
-      { id: 'apps-installed', label: 'Enabled', href: '/' },
-      { id: 'apps-explore', label: 'Explore', href: '/explore' },
-    ],
-  },
-];
+const useApplicationsNav = (): NavDataItem[] => {
+  const isHomeAvailable = useIsAreaAvailable(SupportedArea.HOME).status;
+
+  return [
+    {
+      id: 'applications',
+      group: { id: 'apps', title: 'Applications' },
+      children: [
+        { id: 'apps-installed', label: 'Enabled', href: isHomeAvailable ? '/enabled' : '/' },
+        { id: 'apps-explore', label: 'Explore', href: '/explore' },
+      ],
+    },
+  ];
+};
+
+const useHomeNav = (): NavDataItem[] =>
+  useAreaCheck(SupportedArea.HOME, [{ id: 'home', label: 'Home', href: '/' }]);
 
 const useDSProjectsNav = (): NavDataItem[] =>
   useAreaCheck(SupportedArea.DS_PROJECTS_VIEW, [
@@ -171,6 +178,7 @@ const useSettingsNav = (): NavDataGroup[] => {
 };
 
 export const useBuildNavData = (): NavDataItem[] => [
+  ...useHomeNav(),
   ...useApplicationsNav(),
   ...useDSProjectsNav(),
   ...useDSPipelinesNav(),

manifests/crd/odhdashboardconfigs.opendatahub.io.crd.yaml

@@ -41,6 +41,8 @@ spec:
                       type: boolean
                     disableUserManagement:
                       type: boolean
+                    disableHome:
+                      type: boolean
                     disableProjects:
                       type: boolean
                     disableModelServing:

manifests/overlays/odhdashboardconfig/odh-dashboard-config.yaml

@@ -13,6 +13,7 @@ spec:
     disableSupport: false
     disableTracking: true
     enablement: true
+    disableHome: true
     disableProjects: true
     disablePipelines: true
     disablePipelineExperiments: true

manifests/overlays/odhdashboardconfig/odhdashboardconfig.yaml

@@ -13,6 +13,7 @@ spec:
     disableSupport: false
     disableTracking: false
     enablement: true
+    disableHome: false
     disableProjects: false
     disablePipelines: false
     disableModelServing: false
@@ -92,4 +93,4 @@ spec:
         cpu: "6"
         memory: 16Gi
   templateOrder: []
-  templateDisablement: []
+  templateDisablement: []