Modify the UI per request of the backstage team

plugins/gcp-projects/src/components/NewProjectPage/NewProjectPage.tsx

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
-import React, { FC, useState } from 'react';
+import React, { FC, useState, Fragment } from 'react';
 import { Grid, Button, TextField } from '@material-ui/core';
 
 import {
@@ -24,9 +24,14 @@ import {
   SimpleStepper,
   SimpleStepperStep,
   StructuredMetadataTable,
+  HeaderLabel,
+  Page,
+  Header,
+  pageTheme,
+  SupportButton,
 } from '@backstage/core';
 
-export const NewProjectPage: FC<{}> = () => {
+export const Project: FC<{}> = () => {
   const [projectName, setProjectName] = useState('');
   const [projectId, setProjectId] = useState('');
   const [done, setDone] = useState(false);
@@ -38,10 +43,9 @@ export const NewProjectPage: FC<{}> = () => {
 
   return (
     <Content>
-      <ContentHeader title="Create new GCP Project" />
       <Grid container spacing={3}>
-        <Grid item xs={12} md={4}>
-          <InfoCard>
+        <Grid item xs={12} md={6}>
+          <InfoCard title="Create new GCP Project">
             <SimpleStepper>
               <SimpleStepperStep title="Project Name">
                 <TextField
@@ -66,39 +70,52 @@ export const NewProjectPage: FC<{}> = () => {
                 />
               </SimpleStepperStep>
               <SimpleStepperStep title="" end>
+                <StructuredMetadataTable metadata={metadata} />
                 <Button
                   variant="contained"
                   color="primary"
-                  onClick={() => setDone(true)}
+                  href={`newProject?projectName=${encodeURIComponent(
+                    projectName,
+                  )},projectId=${encodeURIComponent(projectId)}`}
                 >
-                  Finish
+                  Confirm
                 </Button>
               </SimpleStepperStep>
             </SimpleStepper>
+            <Button
+              variant="text"
+              data-testid="cancel-button"
+              color="primary"
+              href="/gcp-projects"
+            >
+              Cancel
+            </Button>
           </InfoCard>
         </Grid>
-        {done === true ? (
-          <Grid item xs={12} md={8}>
-            <InfoCard title="Project Info:">
-              <StructuredMetadataTable metadata={metadata} />
-              <br />
-              <br />
-              <br />
-              <Button
-                variant="contained"
-                color="primary"
-                href={`newProject?projectName=${encodeURIComponent(
-                  projectName,
-                )},projectId=${encodeURIComponent(projectId)}`}
-              >
-                Confirm
-              </Button>
-            </InfoCard>
-          </Grid>
-        ) : (
-          <br />
-        )}
       </Grid>
     </Content>
   );
 };
+
+const labels = (
+  <>
+    <HeaderLabel label="Owner" value="Spotify" />
+    <HeaderLabel label="Lifecycle" value="Production" />
+  </>
+);
+
+export const NewProjectPage = () => {
+  return (
+    <Page theme={pageTheme.service}>
+      <Header title="New GCP Project" type="tool">
+        {labels}
+      </Header>
+      <Content>
+        <ContentHeader title="">
+          <SupportButton>Support Button</SupportButton>
+        </ContentHeader>
+        <Project />
+      </Content>
+    </Page>
+  );
+};

plugins/gcp-projects/src/components/ProjectDetailsPage/ProjectDetailsPage.tsx

@@ -28,10 +28,19 @@ import {
   Theme,
   Typography,
 } from '@material-ui/core';
+import {
+  useApi,
+  googleAuthApiRef,
+  HeaderLabel,
+  Page,
+  Header,
+  pageTheme,
+  SupportButton,
+  Content,
+  ContentHeader,
+} from '@backstage/core';
 import React from 'react';
-import { useLocation } from 'react-router-dom';
 import { useAsync } from 'react-use';
-import { Link, useApi, googleAuthApiRef } from '@backstage/core';
 import { GCPApiRef } from '../../api';
 
 const useStyles = makeStyles<Theme>(theme => ({
@@ -47,7 +56,7 @@ const useStyles = makeStyles<Theme>(theme => ({
   },
 }));
 
-export const ProjectDetailsPage = () => {
+const DetailsPage = () => {
   const api = useApi(GCPApiRef);
   const googleApi = useApi(googleAuthApiRef);
   const token = googleApi.getAccessToken(
@@ -55,7 +64,6 @@ export const ProjectDetailsPage = () => {
   );
 
   const classes = useStyles();
-  const location = useLocation();
   const status = useAsync(
     () =>
       api.getProject(
@@ -78,76 +86,87 @@ export const ProjectDetailsPage = () => {
   const details = status.value;
 
   return (
-    <div className={classes.root}>
-      <Typography className={classes.title} variant="h3">
-        <Link to="/gcp-projects">
-          <Typography component="span" variant="h3" color="primary">
-            &lt;
-          </Typography>
-        </Link>
-        Build Details
-      </Typography>
-      <TableContainer component={Paper} className={classes.table}>
-        <Table>
-          <TableBody>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Name</Typography>
-              </TableCell>
-              <TableCell>{details?.name}</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Project Number</Typography>
-              </TableCell>
-              <TableCell>{details?.projectNumber}</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Project ID</Typography>
-              </TableCell>
-              <TableCell>{details?.projectId}</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>State</Typography>
-              </TableCell>
-              <TableCell>
-                <TableCell>{details?.lifecycleState}</TableCell>
-              </TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Creation Time</Typography>
-              </TableCell>
-              <TableCell>{details?.createTime}</TableCell>
-            </TableRow>
-            <TableRow>
-              <TableCell>
-                <Typography noWrap>Links</Typography>
-              </TableCell>
-              <TableCell>
-                <ButtonGroup
-                  variant="text"
-                  color="primary"
-                  aria-label="text primary button group"
-                >
-                  {details?.name && (
-                    <Button>
-                      <a href={details.name}>GCP</a>
-                    </Button>
-                  )}
-                  {details?.name && (
-                    <Button>
-                      <a href={details.name}>Logs</a>
-                    </Button>
-                  )}
-                </ButtonGroup>
-              </TableCell>
-            </TableRow>
-          </TableBody>
-        </Table>
-      </TableContainer>
-    </div>
+    <TableContainer component={Paper} className={classes.table}>
+      <Table>
+        <TableBody>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>Name</Typography>
+            </TableCell>
+            <TableCell>{details?.name}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>Project Number</Typography>
+            </TableCell>
+            <TableCell>{details?.projectNumber}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>Project ID</Typography>
+            </TableCell>
+            <TableCell>{details?.projectId}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>State</Typography>
+            </TableCell>
+            <TableCell>{details?.lifecycleState}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>Creation Time</Typography>
+            </TableCell>
+            <TableCell>{details?.createTime}</TableCell>
+          </TableRow>
+          <TableRow>
+            <TableCell>
+              <Typography noWrap>Links</Typography>
+            </TableCell>
+            <TableCell>
+              <ButtonGroup
+                variant="text"
+                color="primary"
+                aria-label="text primary button group"
+              >
+                {details?.name && (
+                  <Button>
+                    <a href={details.name}>GCP</a>
+                  </Button>
+                )}
+                {details?.name && (
+                  <Button>
+                    <a href={details.name}>Logs</a>
+                  </Button>
+                )}
+              </ButtonGroup>
+            </TableCell>
+          </TableRow>
+        </TableBody>
+      </Table>
+    </TableContainer>
+  );
+};
+
+const labels = (
+  <>
+    <HeaderLabel label="Owner" value="Spotify" />
+    <HeaderLabel label="Lifecycle" value="Production" />
+  </>
+);
+
+export const ProjectDetailsPage = () => {
+  return (
+    <Page theme={pageTheme.service}>
+      <Header title="GCP Project Details" type="other">
+        {labels}
+      </Header>
+      <Content>
+        <ContentHeader title="">
+          <SupportButton>Support Button</SupportButton>
+        </ContentHeader>
+        <DetailsPage />
+      </Content>
+    </Page>
   );
 };

plugins/gcp-projects/src/components/ProjectListPage/ProjectListPage.tsx

@@ -16,7 +16,19 @@
 
 //  NEEDS WORK
 
-import { Link, useApi, googleAuthApiRef, InfoCard } from '@backstage/core';
+import {
+  Link,
+  useApi,
+  googleAuthApiRef,
+  InfoCard,
+  HeaderLabel,
+  Page,
+  Header,
+  pageTheme,
+  SupportButton,
+  Content,
+  ContentHeader,
+} from '@backstage/core';
 import {
   LinearProgress,
   makeStyles,
@@ -47,14 +59,12 @@ const LongText = ({ text, max }: { text: string; max: number }) => {
   );
 };
 
-const useStyles = makeStyles<Theme>(theme => ({
-  root: {
-    padding: theme.spacing(2),
-  },
-  title: {
-    padding: theme.spacing(1, 0, 2, 0),
-  },
-}));
+const labels = (
+  <>
+    <HeaderLabel label="Owner" value="Spotify" />
+    <HeaderLabel label="Lifecycle" value="Production" />
+  </>
+);
 
 const PageContents = () => {
   const api = useApi(GCPApiRef);
@@ -76,7 +86,7 @@ const PageContents = () => {
   if (error) {
     return (
       <Typography variant="h2" color="error">
-        Failed to load projects, {error.message}{' '}
+        {error.message}{' '}
       </Typography>
     );
   }
@@ -139,20 +149,20 @@ const PageContents = () => {
 };
 
 export const ProjectListPage = () => {
-  const classes = useStyles();
-
   return (
-    <div className={classes.root}>
-      <Typography variant="h3" className={classes.title}>
-        GCP Projects
-      </Typography>
-      <InfoCard>
-        <Button variant="contained" color="primary" href="/gcp-projects/new">
-          Create new GCP Project
-        </Button>
-      </InfoCard>
-
-      <PageContents />
-    </div>
+    <Page theme={pageTheme.service}>
+      <Header title="GCP Projects" type="tool">
+        {labels}
+      </Header>
+      <Content>
+        <ContentHeader title="">
+          <Button variant="contained" color="primary" href="/gcp-projects/new">
+            New Project
+          </Button>
+          <SupportButton>All your software catalog entities</SupportButton>
+        </ContentHeader>
+        <PageContents />
+      </Content>
+    </Page>
   );
 };