From 4bd05f843c1d3c650d091d538916925fd13f2ac9 Mon Sep 17 00:00:00 2001
From: Jeffrey Phillips <jephilli@redhat.com>
Date: Mon, 9 Sep 2024 12:57:56 -0400
Subject: [PATCH] Add projects' descriptions to projects list view

---
 .../cypress/cypress/pages/projects.ts         |  4 +++
 .../tests/mocked/projects/projectList.cy.ts   |  6 ++--
 .../projects/screens/projects/ProjectLink.tsx | 10 ++++--
 .../screens/projects/ProjectTableRow.tsx      | 33 +++++++++++++++----
 4 files changed, 41 insertions(+), 12 deletions(-)

diff --git a/frontend/src/__tests__/cypress/cypress/pages/projects.ts b/frontend/src/__tests__/cypress/cypress/pages/projects.ts
index 4e3ecfe04d..1a9b82ede5 100644
--- a/frontend/src/__tests__/cypress/cypress/pages/projects.ts
+++ b/frontend/src/__tests__/cypress/cypress/pages/projects.ts
@@ -20,6 +20,10 @@ class NotebookRow extends TableRow {
 }
 
 class ProjectRow extends TableRow {
+  findDescription() {
+    return this.find().findByTestId('table-row-title-description');
+  }
+
   findEnableSwitch() {
     return this.find().pfSwitch('notebook-status-switch');
   }
diff --git a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts
index 7cee1dd9cf..9e540b9f42 100644
--- a/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts
+++ b/frontend/src/__tests__/cypress/cypress/tests/mocked/projects/projectList.cy.ts
@@ -20,7 +20,7 @@ import { asProjectAdminUser } from '~/__tests__/cypress/cypress/utils/mockUsers'
 import { notebookConfirmModal } from '~/__tests__/cypress/cypress/pages/workbench';
 import { testPagination } from '~/__tests__/cypress/cypress/utils/pagination';
 
-const mockProject = mockProjectK8sResource({});
+const mockProject = mockProjectK8sResource({ description: 'Mock description' });
 const initIntercepts = () => {
   cy.interceptK8sList(ProjectModel, mockK8sResourceList([mockProject]));
 };
@@ -73,7 +73,9 @@ describe('Data science projects details', () => {
     initIntercepts();
     projectListPage.visit();
     projectListPage.shouldHaveProjects();
-    projectListPage.getProjectRow('Test Project').find().should('exist');
+    const projectRow = projectListPage.getProjectRow('Test Project');
+    projectRow.find().should('exist');
+    projectRow.findDescription().should('contain.text', 'Mock description');
   });
 
   it('should delete project', () => {
diff --git a/frontend/src/pages/projects/screens/projects/ProjectLink.tsx b/frontend/src/pages/projects/screens/projects/ProjectLink.tsx
index 4574522f32..d81a7a9abb 100644
--- a/frontend/src/pages/projects/screens/projects/ProjectLink.tsx
+++ b/frontend/src/pages/projects/screens/projects/ProjectLink.tsx
@@ -1,5 +1,5 @@
 import * as React from 'react';
-import { Link } from 'react-router-dom';
+import { Link, LinkProps } from 'react-router-dom';
 import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
 import { ProjectKind } from '~/k8sTypes';
 
@@ -7,10 +7,14 @@ type ProjectLinkProps = {
   project: ProjectKind;
 };
 
-const ProjectLink: React.FC<ProjectLinkProps> = ({ project }) => {
+const ProjectLink: React.FC<Omit<LinkProps, 'to'> & ProjectLinkProps> = ({ project, ...props }) => {
   const projectName = getDisplayNameFromK8sResource(project);
 
-  return <Link to={`/projects/${project.metadata.name}`}>{projectName}</Link>;
+  return (
+    <Link to={`/projects/${project.metadata.name}`} {...props}>
+      {projectName}
+    </Link>
+  );
 };
 
 export default ProjectLink;
diff --git a/frontend/src/pages/projects/screens/projects/ProjectTableRow.tsx b/frontend/src/pages/projects/screens/projects/ProjectTableRow.tsx
index 97a9099985..e888bfbba8 100644
--- a/frontend/src/pages/projects/screens/projects/ProjectTableRow.tsx
+++ b/frontend/src/pages/projects/screens/projects/ProjectTableRow.tsx
@@ -4,14 +4,15 @@ import { ActionsColumn, Td, Tr } from '@patternfly/react-table';
 import { useNavigate } from 'react-router-dom';
 import { ProjectKind } from '~/k8sTypes';
 import useProjectTableRowItems from '~/pages/projects/screens/projects/useProjectTableRowItems';
-import ResourceNameTooltip from '~/components/ResourceNameTooltip';
 import { getProjectOwner } from '~/concepts/projects/utils';
 import useProjectNotebookStates from '~/pages/projects/notebook/useProjectNotebookStates';
 import NotebookRouteLink from '~/pages/projects/notebook/NotebookRouteLink';
 import CanEnableElyraPipelinesCheck from '~/concepts/pipelines/elyra/CanEnableElyraPipelinesCheck';
 import NotebookStateStatus from '~/pages/projects/screens/projects/NotebookStateStatus';
-import { getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
-import ProjectLink from './ProjectLink';
+import { getDescriptionFromK8sResource, getDisplayNameFromK8sResource } from '~/concepts/k8s/utils';
+import { TableRowTitleDescription } from '~/components/table';
+import ResourceNameTooltip from '~/components/ResourceNameTooltip';
+import ProjectLink from '~/pages/projects/screens/projects/ProjectLink';
 
 type ProjectTableRowProps = {
   obj: ProjectKind;
@@ -47,10 +48,28 @@ const ProjectTableRow: React.FC<ProjectTableRowProps> = ({
             >
               {index === 0 ? (
                 <Td dataLabel="Name" rowSpan={notebookStates.length || 1}>
-                  <ResourceNameTooltip resource={project}>
-                    <ProjectLink project={project} />
-                  </ResourceNameTooltip>
-                  {owner && <Text component={TextVariants.small}>{owner}</Text>}
+                  <TableRowTitleDescription
+                    title={
+                      <ResourceNameTooltip resource={project}>
+                        <ProjectLink
+                          project={project}
+                          style={{
+                            fontSize: 'var(--pf-v5-global--FontSize--md)',
+                            fontWeight: 'var(--pf-v5-global--FontWeight--normal)',
+                          }}
+                        />
+                      </ResourceNameTooltip>
+                    }
+                    description={getDescriptionFromK8sResource(project)}
+                    truncateDescriptionLines={2}
+                    subtitle={
+                      owner ? (
+                        <div>
+                          <Text component={TextVariants.small}>{owner}</Text>
+                        </div>
+                      ) : undefined
+                    }
+                  />
                 </Td>
               ) : null}
               {index === 0 ? (