feat: update package revision page header (#5)

This change updates the Package Revision Page header to show package name and revision as the title to clarify that single revision a the package is being viewed. The package descriptor is moved to the right of the header and shown with the lifecycle of the package which is now a standard div. The chip was removed to reduce confusion on whether it was a clickable element.
GoogleContainerTools · May 19, 2022 · 35615ae · 35615ae
1 parent 2a114fc
commit 35615ae
Show file tree

Hide file tree

Showing 4 changed files with 25 additions and 29 deletions.
diff --git a/plugins/cad/src/components/Links/PackageLink.tsx b/plugins/cad/src/components/Links/PackageLink.tsx
@@ -20,7 +20,7 @@ import React from 'react';
 import { packageRouteRef } from '../../routes';
 import { PackageRevision } from '../../types/PackageRevision';
 import { Repository } from '../../types/Repository';
-import { getPackageDescriptor } from '../../utils/repository';
+import { getPackageRevisionTitle } from '../../utils/packageRevision';
 import { useLinkStyles } from './styles';
 
 type PackageLinkProps = {
@@ -42,15 +42,12 @@ export const PackageLink = ({
   const repositoryName = repository.metadata.name;
   const packageName = packageRevision.metadata.name;
 
-  const packageDisplayName = packageRevision.spec.packageName;
-  const packageDescriptor = getPackageDescriptor(repository);
-
   return (
     <Link
       className={className}
       to={packageRef({ repositoryName, packageName })}
     >
-      {packageDisplayName} {packageDescriptor}
+      {getPackageRevisionTitle(packageRevision)}
     </Link>
   );
 };
diff --git a/plugins/cad/src/components/PackageRevisionPage/PackageRevisionPage.tsx b/plugins/cad/src/components/PackageRevisionPage/PackageRevisionPage.tsx
@@ -24,7 +24,6 @@ import {
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import {
   Button as MaterialButton,
-  Chip,
   makeStyles,
   Typography,
 } from '@material-ui/core';
@@ -54,7 +53,10 @@ import {
   SyncStatus,
   SyncStatusState,
 } from '../../utils/configSync';
-import { canCloneOrDeploy } from '../../utils/packageRevision';
+import {
+  canCloneOrDeploy,
+  getPackageRevisionTitle,
+} from '../../utils/packageRevision';
 import { getPackageRevisionResourcesResource } from '../../utils/packageRevisionResources';
 import {
   getPackageDescriptor,
@@ -79,6 +81,7 @@ type PackageRevisionPageProps = {
 
 const useStyles = makeStyles({
   packageRevisionOptions: {
+    marginTop: 'auto',
     marginLeft: '10px',
   },
   syncStatusBanner: {
@@ -194,7 +197,7 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
     return <Alert severity="error">Unexpected undefined value</Alert>;
   }
 
-  const packageDisplayName = packageRevision.spec.packageName;
+  const packageRevisionTitle = getPackageRevisionTitle(packageRevision);
 
   const moveToDraft = async (): Promise<void> => {
     setUserInitiatedApiRequest(true);
@@ -341,6 +344,7 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
   };
 
   const repository = repositorySummary.repository;
+  const packageDescriptor = getPackageDescriptor(repository);
 
   const renderOptions = (): JSX.Element[] => {
     const options: JSX.Element[] = [];
@@ -383,12 +387,9 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
 
       if (isDraft || isProposed) {
         options.push(
-          <Chip
-            key="package-lifecycle"
-            label={`${packageRevision.spec.lifecycle} Package`}
-            variant="outlined"
-            style={{ margin: 0 }}
-          />,
+          <div className={classes.packageRevisionOptions}>
+            {packageRevision.spec.lifecycle} {packageDescriptor}
+          </div>,
         );
       }
 
@@ -489,8 +490,6 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
     return options;
   };
 
-  const packageDescriptor = getPackageDescriptor(repository);
-
   const resourcesTableMode =
     mode === PackageRevisionPageMode.EDIT
       ? ResourcesTableMode.EDIT
@@ -509,11 +508,7 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
       <Breadcrumbs>
         <RepositoriesLink breadcrumb />
         <RepositoryLink repository={repository} breadcrumb />
-        {isViewMode && (
-          <Typography>
-            {packageDisplayName} {packageDescriptor}
-          </Typography>
-        )}
+        {isViewMode && <Typography>{packageRevisionTitle}</Typography>}
         {!isViewMode && (
           <PackageLink
             repository={repository}
@@ -524,7 +519,7 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
         {!isViewMode && <Typography>Edit</Typography>}
       </Breadcrumbs>
 
-      <ContentHeader title={`${packageDisplayName} ${packageDescriptor}`}>
+      <ContentHeader title={packageRevisionTitle}>
         {renderOptions()}
       </ContentHeader>
 

diff --git a/plugins/cad/src/components/PackageRevisionPage/components/AdvancedPackageRevisionOptions.tsx b/plugins/cad/src/components/PackageRevisionPage/components/AdvancedPackageRevisionOptions.tsx
@@ -29,8 +29,6 @@ import { configAsDataApiRef } from '../../../apis';
 import { repositoryRouteRef } from '../../../routes';
 import { Repository } from '../../../types/Repository';
 import { RootSync } from '../../../types/RootSync';
-import { getPackageDescriptor } from '../../../utils/repository';
-import { toLowerCase } from '../../../utils/string';
 
 type AdvancedPackageRevisionOptionsProps = {
   repository: Repository;
@@ -52,7 +50,6 @@ export const AdvancedPackageRevisionOptions = ({
   const repositoryRef = useRouteRef(repositoryRouteRef);
 
   const repositoryName = repository.metadata.name;
-  const packageDescriptor = getPackageDescriptor(repository);
 
   const openDeletePackageRevisionDialog = (): void => {
     setOpenPackageDialog(true);
@@ -101,11 +98,10 @@ export const AdvancedPackageRevisionOptions = ({
         open={openPackageDialog}
         onClose={closeDeletePackageRevisionDialog}
       >
-        <DialogTitle>Delete {toLowerCase(packageDescriptor)}</DialogTitle>
+        <DialogTitle>Delete revision</DialogTitle>
         <DialogContent>
           <DialogContentText>
-            Are you sure you want to delete this{' '}
-            {toLowerCase(packageDescriptor)}?
+            Are you sure you want to delete this revision?
           </DialogContentText>
         </DialogContent>
         <DialogActions>
@@ -124,7 +120,7 @@ export const AdvancedPackageRevisionOptions = ({
           variant="contained"
           onClick={openDeletePackageRevisionDialog}
         >
-          Delete {packageDescriptor}
+          Delete revision
         </Button>
       </div>
 

diff --git a/plugins/cad/src/utils/packageRevision.ts b/plugins/cad/src/utils/packageRevision.ts
@@ -20,6 +20,14 @@ import {
   PackageRevisionTask,
 } from '../types/PackageRevision';
 
+export const getPackageRevisionTitle = (
+  packageRevision: PackageRevision,
+): string => {
+  const { packageName, revision } = packageRevision.spec;
+
+  return `${packageName} ${revision}`;
+};
+
 export const isLatestPublishedRevision = (
   packageRevision: PackageRevision,
 ): boolean => {