From 0287b186135431c67ddb01834b12e65bd599aaf3 Mon Sep 17 00:00:00 2001
From: Jeremy Guarini <jguarini@paloaltonetworks.com>
Date: Fri, 29 Oct 2021 10:20:14 -0700
Subject: [PATCH] UI updates to GCP-projects plugin

Adds the following to the project list page:
* pagination
* filtering
* sorting
* rows per page
* show/hide columns

Makes breadcrumb a link back to project list for the project details and new project views.

In project list page, updates New project button to use RouterLink instead of href to avoid login prompt.

In project details view, links to project details and logs now work, clicking on these will open the project or logs in GCP in new tab.

Signed-off-by: Jeremy Guarini <jguarini@paloaltonetworks.com>
---
 plugins/gcp-projects/package.json             |   1 +
 .../NewProjectPage/NewProjectPage.tsx         |  43 +++--
 .../ProjectDetailsPage/ProjectDetailsPage.tsx |  51 ++++--
 .../ProjectListPage/ProjectListPage.tsx       | 161 +++++++++++-------
 yarn.lock                                     |  30 +++-
 5 files changed, 186 insertions(+), 100 deletions(-)

diff --git a/plugins/gcp-projects/package.json b/plugins/gcp-projects/package.json
index 65458ea88b..71b212a698 100644
--- a/plugins/gcp-projects/package.json
+++ b/plugins/gcp-projects/package.json
@@ -35,6 +35,7 @@
     "@backstage/core-plugin-api": "^0.1.12",
     "@backstage/theme": "^0.2.12",
     "@material-ui/core": "^4.12.2",
+    "@material-ui/data-grid": "^4.0.0-alpha.37",
     "@material-ui/icons": "^4.9.1",
     "@material-ui/lab": "4.0.0-alpha.57",
     "react": "^16.13.1",
diff --git a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
index 584cffc50c..5ecc7f15d4 100644
--- a/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
+++ b/plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx
@@ -28,6 +28,10 @@ import {
   StructuredMetadataTable,
   SupportButton,
 } from '@backstage/core-components';
+import { Link as RouterLink } from 'react-router-dom';
+
+import { useRouteRef } from '@backstage/core-plugin-api';
+import { rootRouteRef } from '../../routes';
 
 export const Project = () => {
   const [projectName, setProjectName] = useState('');
@@ -79,18 +83,20 @@ export const Project = () => {
               </SimpleStepperStep>
             </SimpleStepper>
             <Button
+              component={RouterLink}
               variant="text"
               data-testid="cancel-button"
               color="primary"
-              href="/gcp-projects"
+              to="/gcp-projects"
             >
               Cancel
             </Button>
             <Button
+              component={RouterLink}
               variant="contained"
               color="primary"
               disabled={disabled}
-              href={`newProject?projectName=${encodeURIComponent(
+              to={`newProject?projectName=${encodeURIComponent(
                 projectName,
               )},projectId=${encodeURIComponent(projectId)}`}
             >
@@ -110,18 +116,21 @@ const labels = (
   </>
 );
 
-export const NewProjectPage = () => (
-  <Page themeId="service">
-    <Header title="New GCP Project" type="tool">
-      {labels}
-    </Header>
-    <Content>
-      <ContentHeader title="">
-        <SupportButton>
-          This plugin allows you to view and interact with your gcp projects.
-        </SupportButton>
-      </ContentHeader>
-      <Project />
-    </Content>
-  </Page>
-);
+export const NewProjectPage = () => {
+  const docsRootLink = useRouteRef(rootRouteRef)();
+  return (
+    <Page themeId="tool">
+      <Header title="New GCP Project" type="GCP" typeLink={docsRootLink}>
+        {labels}
+      </Header>
+      <Content>
+        <ContentHeader title="">
+          <SupportButton>
+            This plugin allows you to view and interact with your gcp projects.
+          </SupportButton>
+        </ContentHeader>
+        <Project />
+      </Content>
+    </Page>
+  );
+};
diff --git a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
index f5da97b7eb..446ef0ec5c 100644
--- a/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx
@@ -40,7 +40,8 @@ import {
   WarningPanel,
 } from '@backstage/core-components';
 
-import { useApi } from '@backstage/core-plugin-api';
+import { useApi, useRouteRef } from '@backstage/core-plugin-api';
+import { rootRouteRef } from '../../routes';
 
 const useStyles = makeStyles<Theme>(theme => ({
   root: {
@@ -81,6 +82,8 @@ const DetailsPage = () => {
     );
   }
 
+  const cloud_home_url = 'https://console.cloud.google.com';
+
   return (
     <Table component={Paper} className={classes.table}>
       <Table>
@@ -127,12 +130,24 @@ const DetailsPage = () => {
               >
                 {details?.name && (
                   <Button>
-                    <a href={details.name}>GCP</a>
+                    <a
+                      href={`${cloud_home_url}/home/dashboard?project=${details.name}&supportedpurview=project`}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                    >
+                      GCP
+                    </a>
                   </Button>
                 )}
                 {details?.name && (
                   <Button>
-                    <a href={details.name}>Logs</a>
+                    <a
+                      href={`${cloud_home_url}/logs/query?project=${details.name}&supportedpurview=project`}
+                      target="_blank"
+                      rel="noreferrer noopener"
+                    >
+                      Logs
+                    </a>
                   </Button>
                 )}
               </ButtonGroup>
@@ -151,16 +166,20 @@ const labels = (
   </>
 );
 
-export const ProjectDetailsPage = () => (
-  <Page themeId="service">
-    <Header title="GCP Project Details" type="other">
-      {labels}
-    </Header>
-    <Content>
-      <ContentHeader title="">
-        <SupportButton>Support Button</SupportButton>
-      </ContentHeader>
-      <DetailsPage />
-    </Content>
-  </Page>
-);
+export const ProjectDetailsPage = () => {
+  const docsRootLink = useRouteRef(rootRouteRef)();
+
+  return (
+    <Page themeId="service">
+      <Header title="GCP Project Details" type="GCP" typeLink={docsRootLink}>
+        {labels}
+      </Header>
+      <Content>
+        <ContentHeader title="">
+          <SupportButton>Support Button</SupportButton>
+        </ContentHeader>
+        <DetailsPage />
+      </Content>
+    </Page>
+  );
+};
diff --git a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
index db3999272a..e4137f96c7 100644
--- a/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
+++ b/plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx
@@ -15,18 +15,8 @@
  */
 
 //  NEEDS WORK
-import {
-  Button,
-  LinearProgress,
-  Paper,
-  Table,
-  TableBody,
-  TableCell,
-  TableHead,
-  TableRow,
-  Tooltip,
-  Typography,
-} from '@material-ui/core';
+import { Button, LinearProgress, Tooltip, Typography } from '@material-ui/core';
+import { DataGrid, GridColDef, GridCellParams } from '@material-ui/data-grid';
 import React from 'react';
 import { useAsync } from 'react-use';
 import { gcpApiRef, Project } from '../../api';
@@ -44,6 +34,8 @@ import {
 
 import { useApi } from '@backstage/core-plugin-api';
 
+import { Link as RouterLink } from 'react-router-dom';
+
 const LongText = ({ text, max }: { text: string; max: number }) => {
   if (text.length < max) {
     return <span>{text}</span>;
@@ -67,6 +59,18 @@ const PageContents = () => {
 
   const { loading, error, value } = useAsync(() => api.listProjects());
 
+  const [page, setPage] = React.useState(0);
+  const [rowsPerPage, setRowsPerPage] = React.useState(10);
+
+  const handleChangePage = (newPage: number) => {
+    setPage(newPage);
+  };
+
+  const handleChangeRowsPerPage = (pageSize: number) => {
+    setRowsPerPage(pageSize);
+    setPage(0);
+  };
+
   if (loading) {
     return <LinearProgress />;
   } else if (error) {
@@ -77,60 +81,80 @@ const PageContents = () => {
     );
   }
 
+  function renderLink(params: GridCellParams) {
+    return (
+      <Link
+        to={`project?projectId=${encodeURIComponent(params.value!.toString())}`}
+      >
+        <Typography color="primary">
+          <LongText text={params.value!.toString()} max={60} />
+        </Typography>
+      </Link>
+    );
+  }
+
+  const columns: GridColDef[] = [
+    {
+      align: 'left',
+      field: 'name',
+      flex: 1,
+      headerAlign: 'left',
+      headerName: 'Name',
+    },
+    {
+      align: 'left',
+      field: 'projectNumber',
+      flex: 0.6,
+      headerAlign: 'left',
+      headerName: 'Project Number',
+    },
+    {
+      align: 'left',
+      field: 'projectID',
+      flex: 1,
+      headerAlign: 'left',
+      headerName: 'Project ID',
+      renderCell: renderLink,
+    },
+    {
+      align: 'left',
+      field: 'state',
+      flex: 0.6,
+      headerAlign: 'left',
+      headerName: 'State',
+    },
+    {
+      align: 'left',
+      field: 'creationTime',
+      flex: 0.7,
+      headerAlign: 'left',
+      headerName: 'Creation Time',
+    },
+  ];
+
+  const rows =
+    value?.map((project: Project) => ({
+      id: project.projectId,
+      name: project.name,
+      projectNumber: project?.projectNumber || 'Error',
+      projectID: project.projectId,
+      state: project?.lifecycleState || 'Error',
+      creationTime: project?.createTime || 'Error',
+    })) || [];
+
   return (
-    <Table component={Paper}>
-      <Table aria-label="GCP Projects table">
-        <TableHead>
-          <TableRow>
-            <TableCell>Name</TableCell>
-            <TableCell>Project Number</TableCell>
-            <TableCell>Project ID</TableCell>
-            <TableCell>State</TableCell>
-            <TableCell>Creation Time</TableCell>
-          </TableRow>
-        </TableHead>
-        <TableBody>
-          {value?.map((project: Project) => (
-            <TableRow key={project.projectId}>
-              <TableCell>
-                <Typography>
-                  <LongText text={project.name} max={30} />
-                </Typography>
-              </TableCell>
-              <TableCell>
-                <Typography>
-                  <LongText text={project?.projectNumber || 'Error'} max={30} />
-                </Typography>
-              </TableCell>
-              <TableCell>
-                <Link
-                  to={`project?projectId=${encodeURIComponent(
-                    project.projectId,
-                  )}`}
-                >
-                  <Typography color="primary">
-                    <LongText text={project.projectId} max={60} />
-                  </Typography>
-                </Link>
-              </TableCell>
-              <TableCell>
-                <Typography>
-                  <LongText
-                    text={project?.lifecycleState || 'Error'}
-                    max={30}
-                  />
-                </Typography>
-              </TableCell>
-              <TableCell>
-                <Typography>
-                  <LongText text={project?.createTime || 'Error'} max={30} />
-                </Typography>
-              </TableCell>
-            </TableRow>
-          ))}
-        </TableBody>
-      </Table>
-    </Table>
+    <div style={{ height: '95%', width: '100%' }}>
+      <DataGrid
+        rows={rows}
+        columns={columns}
+        page={page}
+        pageSize={rowsPerPage}
+        rowsPerPageOptions={[10, 25, 50, 100]}
+        onPageChange={handleChangePage}
+        onPageSizeChange={handleChangeRowsPerPage}
+        disableSelectionOnClick
+      />
+    </div>
   );
 };
 
@@ -141,7 +165,12 @@ export const ProjectListPage = () => (
     </Header>
     <Content>
       <ContentHeader title="">
-        <Button variant="contained" color="primary" href="/gcp-projects/new">
+        <Button
+          component={RouterLink}
+          variant="contained"
+          color="primary"
+          to="new"
+        >
           New Project
         </Button>
         <SupportButton>All your software catalog entities</SupportButton>
diff --git a/yarn.lock b/yarn.lock
index 517d66ba0c..fc66a02031 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4416,6 +4416,16 @@
     react-is "^16.8.0 || ^17.0.0"
     react-transition-group "^4.4.0"
 
+"@material-ui/data-grid@^4.0.0-alpha.37":
+  version "4.0.0-alpha.37"
+  resolved "https://registry.npmjs.org/@material-ui/data-grid/-/data-grid-4.0.0-alpha.37.tgz#89d907c4e94e6a0db4e89e4f59160f7811546ca2"
+  integrity sha512-3T2AG31aad/lWLMLwn1XUP4mUf3H9YZES17dGuYByzkRLCXbBZHBTPEnCctWukajzwm+v0KGg3QpwitGoiDAjA==
+  dependencies:
+    "@material-ui/utils" "^5.0.0-alpha.14"
+    clsx "^1.0.4"
+    prop-types "^15.7.2"
+    reselect "^4.0.0"
+
 "@material-ui/icons@^4.11.2", "@material-ui/icons@^4.9.1":
   version "4.11.2"
   resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz#b3a7353266519cd743b6461ae9fdfcb1b25eb4c5"
@@ -4503,6 +4513,17 @@
     prop-types "^15.7.2"
     react-is "^16.8.0 || ^17.0.0"
 
+"@material-ui/utils@^5.0.0-alpha.14":
+  version "5.0.0-beta.5"
+  resolved "https://registry.npmjs.org/@material-ui/utils/-/utils-5.0.0-beta.5.tgz#de492037e1f1f0910fda32e6f11b66dfcde2a1c2"
+  integrity sha512-wtJ3ovXWZdTAz5eLBqvMpYH/IBJb3qMQbGCyL1i00+sf7AUlAuv4QLx+QtX/siA6L7IpxUQVfqpoCpQH1eYRpQ==
+  dependencies:
+    "@babel/runtime" "^7.14.8"
+    "@types/prop-types" "^15.7.4"
+    "@types/react-is" "^16.7.1 || ^17.0.0"
+    prop-types "^15.7.2"
+    react-is "^17.0.2"
+
 "@mattiasbuelens/web-streams-polyfill@^0.2.0":
   version "0.2.1"
   resolved "https://registry.npmjs.org/@mattiasbuelens/web-streams-polyfill/-/web-streams-polyfill-0.2.1.tgz#d7c4aa94f98084ec0787be084d47167d62ea5f67"
@@ -7434,7 +7455,7 @@
   resolved "https://registry.npmjs.org/@types/pretty-hrtime/-/pretty-hrtime-1.0.1.tgz#72a26101dc567b0d68fd956cf42314556e42d601"
   integrity sha512-VjID5MJb1eGKthz2qUerWT8+R4b9N+CHvGCzg9fn4kWZgaF9AhdYikQio3R7wV8YY1NsQKPaCwKz1Yff+aHNUQ==
 
-"@types/prop-types@*", "@types/prop-types@^15.7.3":
+"@types/prop-types@*", "@types/prop-types@^15.7.3", "@types/prop-types@^15.7.4":
   version "15.7.4"
   resolved "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.4.tgz#fcf7205c25dff795ee79af1e30da2c9790808f11"
   integrity sha512-rZ5drC/jWjrArrS8BR6SIr4cWpW09RNTYt9AMZo3Jwwif+iacXAqgVjm0B0Bv/S1jhDXKHqRVNCbACkJ89RAnQ==
@@ -7475,6 +7496,13 @@
   dependencies:
     "@types/react" "*"
 
+"@types/react-is@^16.7.1 || ^17.0.0":
+  version "17.0.3"
+  resolved "https://registry.npmjs.org/@types/react-is/-/react-is-17.0.3.tgz#2d855ba575f2fc8d17ef9861f084acc4b90a137a"
+  integrity sha512-aBTIWg1emtu95bLTLx0cpkxwGW3ueZv71nE2YFBpL8k/z5czEW8yYpOo8Dp+UUAFAtKwNaOsh/ioSeQnWlZcfw==
+  dependencies:
+    "@types/react" "*"
+
 "@types/react-lazylog@^4.5.0":
   version "4.5.1"
   resolved "https://registry.npmjs.org/@types/react-lazylog/-/react-lazylog-4.5.1.tgz#babb5d814f7035b5434518769975e12f299356a8"