[RHOAIENG-5496] Landing page: New home page hint

opendatahub-io · Apr 29, 2024 · 911866c · 911866c
1 parent 75efea8
commit 911866c
Show file tree

Hide file tree

Showing 9 changed files with 179 additions and 15 deletions.
diff --git a/backend/src/utils/resourceUtils.ts b/backend/src/utils/resourceUtils.ts
@@ -544,7 +544,22 @@ export const initializeWatchedResources = (fastify: KubeFastifyInstance): void =
 };
 
 export const getDashboardConfig = (): DashboardConfig => {
-  return dashboardConfigWatcher.getResources()?.[0];
+  return _.merge(dashboardConfigWatcher.getResources()?.[0], {
+    spec: {
+      dashboardConfig: {
+        // disableProjects: true,
+        // disablePipelines: true,
+        disableHome: false,
+        // disableBYONImageStream: true,
+        // disableCustomServingRuntimes: true,
+        // disableClusterManager: true,
+        // disableModelServing: true,
+      },
+      notebookController: {
+        enabled: false,
+      },
+    },
+  });
 };
 
 export const updateDashboardConfig = (): Promise<void> => {

diff --git a/frontend/src/__mocks__/mockDashboardConfig.ts b/frontend/src/__mocks__/mockDashboardConfig.ts
@@ -23,6 +23,7 @@ type MockDashboardConfigType = {
   disablePipelineExperiments?: boolean;
   disableDistributedWorkloads?: boolean;
   disableModelRegistry?: boolean;
+  disableNotebookController?: boolean;
 };
 
 export const mockDashboardConfig = ({
@@ -48,6 +49,7 @@ export const mockDashboardConfig = ({
   disablePipelineExperiments = true,
   disableDistributedWorkloads = false,
   disableModelRegistry = true,
+  disableNotebookController = false,
 }: MockDashboardConfigType): DashboardConfigKind => ({
   apiVersion: 'opendatahub.io/v1alpha',
   kind: 'OdhDashboardConfig',
@@ -86,7 +88,7 @@ export const mockDashboardConfig = ({
       disableModelRegistry,
     },
     notebookController: {
-      enabled: true,
+      enabled: !disableNotebookController,
       notebookNamespace: 'openshift-ai-notebooks',
       notebookTolerationSettings: {
         enabled: true,

diff --git a/frontend/src/__tests__/cypress/cypress/e2e/home/home.cy.ts b/frontend/src/__tests__/cypress/cypress/e2e/home/home.cy.ts
@@ -18,4 +18,45 @@ describe('Home page', () => {
     cy.interceptOdh('GET /api/components', { query: { installed: 'true' } }, mockComponents());
     enabledPage.visit(true);
   });
+  it('should show the home page hint', () => {
+    initHomeIntercepts({ disableHome: false });
+    cy.interceptOdh('GET /api/components', { query: { installed: 'true' } }, mockComponents());
+
+    cy.visit('/');
+    cy.findByTestId('home-page-hint').should('be.visible');
+
+    cy.findByTestId('jupyter-hint-icon').should('be.visible');
+    cy.findByTestId('hint-body-text').should('contain', 'Jupyter');
+
+    // enabled applications page is still navigable
+    cy.findByTestId('home-page-hint-navigate').click();
+
+    cy.findByTestId('enabled-application').should('be.visible');
+  });
+  it('should hide the home page hint when the notebook controller is disabled.', () => {
+    initHomeIntercepts({ disableHome: false, disableNotebookController: true });
+    cy.interceptOdh('GET /api/components', { query: { installed: 'true' } }, mockComponents());
+
+    cy.visit('/');
+
+    cy.findByTestId('home-page-hint').should('not.exist');
+  });
+  it('should hide the home page hint when closed', () => {
+    initHomeIntercepts({ disableHome: false });
+    cy.interceptOdh('GET /api/components', { query: { installed: 'true' } }, mockComponents());
+
+    cy.visit('/');
+    cy.findByTestId('home-page-hint').should('be.visible');
+
+    // enabled applications page is still navigable
+    cy.findByTestId('home-page-hint-close').click();
+
+    cy.findByTestId('home-page-hint').should('not.exist');
+
+    cy.visit('/enabled');
+    cy.findByTestId('enabled-application').should('be.visible');
+
+    cy.visit('/');
+    cy.findByTestId('home-page-hint').should('not.exist');
+  });
 });
diff --git a/frontend/src/__tests__/cypress/cypress/e2e/home/homeUtils.ts b/frontend/src/__tests__/cypress/cypress/e2e/home/homeUtils.ts
@@ -5,6 +5,7 @@ type HandlersProps = {
   disableProjects?: boolean;
   disableModelServing?: boolean;
   disablePipelines?: boolean;
+  disableNotebookController?: boolean;
 };
 
 export const initHomeIntercepts = (config: HandlersProps = {}): void => {

diff --git a/frontend/src/components/OdhAppCard.tsx b/frontend/src/components/OdhAppCard.tsx
@@ -105,7 +105,7 @@ const OdhAppCard: React.FC<OdhAppCardProps> = ({ odhApp }) => {
     <CardFooter className="odh-card__footer">
       {odhApp.metadata.name === 'jupyter' ? (
         odhApp.spec.internalRoute ? (
-          <Link to={odhApp.spec.internalRoute} className="odh-card__footer__link">
+          <Link to={`/${odhApp.spec.internalRoute}`} className="odh-card__footer__link">
             Launch application
           </Link>
         ) : null

diff --git a/frontend/src/pages/home/Home.tsx b/frontend/src/pages/home/Home.tsx
@@ -14,6 +14,7 @@ import { SupportedArea } from '~/concepts/areas';
 import ProjectsSection from './projects/ProjectsSection';
 import { useAIFlows } from './aiFlows/useAIFlows';
 import { useResourcesSection } from './resources/useResourcesSection';
+import HomeHint from './HomeHint';
 
 const Home: React.FC = () => {
   const { status: projectsAvailable } = useIsAreaAvailable(SupportedArea.DS_PROJECTS_VIEW);
@@ -22,22 +23,26 @@ const Home: React.FC = () => {
 
   if (!projectsAvailable && !aiFlows && !resourcesSection) {
     return (
-      <PageSection data-testid="home-page-empty" variant={PageSectionVariants.default}>
-        <Bullseye>
-          <EmptyState variant="full">
-            <EmptyStateHeader
-              titleText={`Welcome to ${ODH_PRODUCT_NAME}`}
-              headingLevel="h4"
-              icon={<EmptyStateIcon icon={HomeIcon} />}
-            />
-          </EmptyState>
-        </Bullseye>
-      </PageSection>
+      <>
+        <HomeHint />
+        <PageSection data-testid="home-page-empty" variant={PageSectionVariants.default}>
+          <Bullseye>
+            <EmptyState variant="full">
+              <EmptyStateHeader
+                titleText={`Welcome to ${ODH_PRODUCT_NAME}`}
+                headingLevel="h4"
+                icon={<EmptyStateIcon icon={HomeIcon} />}
+              />
+            </EmptyState>
+          </Bullseye>
+        </PageSection>
+      </>
     );
   }
 
   return (
     <div data-testid="home-page">
+      <HomeHint />
       <ProjectsSection />
       {aiFlows}
       {resourcesSection}

diff --git a/frontend/src/pages/home/HomeHint.tsx b/frontend/src/pages/home/HomeHint.tsx
@@ -0,0 +1,96 @@
+import * as React from 'react';
+import {
+  Button,
+  Card,
+  CardBody,
+  CardHeader,
+  Flex,
+  FlexItem,
+  PageSection,
+  Text,
+  TextContent,
+} from '@patternfly/react-core';
+import { TimesIcon } from '@patternfly/react-icons';
+import { useNavigate } from 'react-router-dom';
+import jupyterImg from '~/images/jupyter.svg';
+import { useBrowserStorage } from '~/components/browserStorage';
+import { ODH_PRODUCT_NAME } from '~/utilities/const';
+import { useCheckJupyterEnabled } from '~/utilities/notebookControllerUtils';
+
+const HomeHint: React.FC = () => {
+  const navigate = useNavigate();
+  const [hintHidden, setHintHidden] = useBrowserStorage<boolean>(
+    'odh.dashboard.landing.hint',
+    false,
+  );
+  const jupyterEnabled = useCheckJupyterEnabled();
+
+  if (hintHidden || !jupyterEnabled) {
+    return null;
+  }
+
+  return (
+    <PageSection>
+      <Card data-testid="home-page-hint" style={{ borderRadius: 16 }}>
+        <CardHeader>
+          <Flex
+            alignItems={{ default: 'alignItemsCenter' }}
+            justifyContent={{ default: 'justifyContentSpaceBetween' }}
+          >
+            <FlexItem>
+              <TextContent>
+                <Text component="h2">Looking for the previous landing page?</Text>
+              </TextContent>
+            </FlexItem>
+            <FlexItem>
+              <Button
+                data-testid="home-page-hint-close"
+                aria-label="close landing page hint"
+                isInline
+                variant="plain"
+                onClick={() => setHintHidden(true)}
+              >
+                <TimesIcon />
+              </Button>
+            </FlexItem>
+          </Flex>
+        </CardHeader>
+        <CardBody style={{ maxWidth: 880 }}>
+          <Flex
+            alignItems={{ default: 'alignItemsCenter' }}
+            gap={{ default: 'gapMd' }}
+            flexWrap={{ default: 'nowrap' }}
+          >
+            <img
+              data-testid="jupyter-hint-icon"
+              src={jupyterImg}
+              alt="Jupyter"
+              style={{ height: 42, maxWidth: 'unset' }}
+            />
+            <FlexItem>
+              <TextContent>
+                <Text component="p" data-testid="hint-body-text">
+                  {ODH_PRODUCT_NAME} has a new landing page. You can access applications that are
+                  enabled for your organization, such as Jupyter, from the{' '}
+                  <Button
+                    data-testid="home-page-hint-navigate"
+                    variant="link"
+                    isInline
+                    component="a"
+                    style={{ fontSize: 'var(--pf-v5-global--FontSize--md)' }}
+                    onClick={() => navigate('/enabled')}
+                  >
+                    Enabled applications
+                  </Button>{' '}
+                  page.
+                </Text>
+              </TextContent>
+            </FlexItem>
+          </Flex>
+        </CardBody>
+      </Card>
+    </PageSection>
+  );
+};
+
+export default HomeHint;
diff --git a/frontend/src/pages/home/projects/EmptyProjectsCard.tsx b/frontend/src/pages/home/projects/EmptyProjectsCard.tsx
@@ -19,7 +19,7 @@ type EmptyProjectsCardProps = {
 };
 
 const EmptyProjectsCard: React.FC<EmptyProjectsCardProps> = ({ allowCreate, onCreateProject }) => (
-  <Card data-testid="landing-page-projects-empty">
+  <Card data-testid="landing-page-projects-empty" style={{ borderRadius: 16 }}>
     <CardBody>
       <Flex
         gap={{ default: 'gapLg' }}

diff --git a/frontend/src/pages/home/resources/useResourcesSection.tsx b/frontend/src/pages/home/resources/useResourcesSection.tsx
@@ -70,6 +70,10 @@ export const useResourcesSection = (): React.ReactNode => {
                   key={`${doc.metadata.name}`}
                   odhDoc={doc as unknown as OdhDocument}
                   showFavorite={false}
+                  style={{
+                    border: '1px solid var(--pf-v5-global--BorderColor--100)',
+                    borderRadius: 16,
+                  }}
                 />
               ))}
             </ScrolledGallery>