diff --git a/plugins/cad/src/components/Links/PackageLink.tsx b/plugins/cad/src/components/Links/PackageLink.tsx index 4b2c697b..ed92d606 100644 --- 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 ( - {packageDisplayName} {packageDescriptor} + {getPackageRevisionTitle(packageRevision)} ); }; diff --git a/plugins/cad/src/components/PackageRevisionPage/PackageRevisionPage.tsx b/plugins/cad/src/components/PackageRevisionPage/PackageRevisionPage.tsx index 278d81e7..ed14f4c4 100644 --- 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 Unexpected undefined value; } - const packageDisplayName = packageRevision.spec.packageName; + const packageRevisionTitle = getPackageRevisionTitle(packageRevision); const moveToDraft = async (): Promise => { 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( - , +
+ {packageRevision.spec.lifecycle} {packageDescriptor} +
, ); } @@ -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) => { - {isViewMode && ( - - {packageDisplayName} {packageDescriptor} - - )} + {isViewMode && {packageRevisionTitle}} {!isViewMode && ( { {!isViewMode && Edit} - + {renderOptions()} diff --git a/plugins/cad/src/components/PackageRevisionPage/components/AdvancedPackageRevisionOptions.tsx b/plugins/cad/src/components/PackageRevisionPage/components/AdvancedPackageRevisionOptions.tsx index d6a03b3a..22e20933 100644 --- 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} > - Delete {toLowerCase(packageDescriptor)} + Delete revision - Are you sure you want to delete this{' '} - {toLowerCase(packageDescriptor)}? + Are you sure you want to delete this revision? @@ -124,7 +120,7 @@ export const AdvancedPackageRevisionOptions = ({ variant="contained" onClick={openDeletePackageRevisionDialog} > - Delete {packageDescriptor} + Delete revision diff --git a/plugins/cad/src/utils/packageRevision.ts b/plugins/cad/src/utils/packageRevision.ts index 1f1f7bc7..a507d724 100644 --- 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 => {