feat: consolidate clone and deploy buttons on package revision page (#…

…143)

This change updates the Package Revision consolidating the Deploy button into the Clone button.

plugins/cad/src/components/AddPackagePage/AddPackagePage.tsx

@@ -25,7 +25,6 @@ import {
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
 import { makeStyles, TextField, Typography } from '@material-ui/core';
 import { Alert } from '@material-ui/lab';
-import { startCase } from 'lodash';
 import React, { Fragment, useEffect, useRef, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import useAsync from 'react-use/lib/useAsync';
@@ -37,7 +36,7 @@ import {
 } from '../../types/PackageRevision';
 import { Repository } from '../../types/Repository';
 import {
-  canCloneOrDeploy,
+  canCloneRevision,
   getCloneTask,
   getInitTask,
   getPackageRevision,
@@ -66,7 +65,6 @@ const useStyles = makeStyles(() => ({
 export enum AddPackagePageAction {
   ADD = 'add',
   CLONE = 'clone',
-  DEPLOY = 'deploy',
 }
 
 type AddPackagePageProps = {
@@ -167,7 +165,7 @@ export const AddPackagePage = ({ action }: AddPackagePageProps) => {
     ]);
 
     allRepositories.current = thisAllRepositories;
-    allClonablePackageRevisions.current = allPackages.filter(canCloneOrDeploy);
+    allClonablePackageRevisions.current = allPackages.filter(canCloneRevision);
 
     const thisRepository = getRepository(thisAllRepositories, repositoryName);
     const packageDescriptor = getPackageDescriptor(
@@ -324,13 +322,11 @@ export const AddPackagePage = ({ action }: AddPackagePageProps) => {
               packageRevision={sourcePackageRevision as PackageRevision}
               breadcrumb
             />
-            <Typography>{action}</Typography>
+            <Typography>clone</Typography>
           </Breadcrumbs>
 
           <ContentHeader
-            title={`${startCase(action)} ${getDisplayPackageName(
-              sourcePackageRevision,
-            )}`}
+            title={`Clone ${getDisplayPackageName(sourcePackageRevision)}`}
           />
         </Fragment>
       )}

plugins/cad/src/components/LandingPage/LandingPage.tsx

@@ -24,7 +24,6 @@ import { configAsDataApiRef } from '../../apis';
 import {
   addPackageRouteRef,
   clonePackageRouteRef,
-  deployPackageRouteRef,
   editPackageRouteRef,
   packageRouteRef,
   registerRepositoryRouteRef,
@@ -71,10 +70,6 @@ export const LandingPage = () => {
           path={clonePackageRouteRef.path}
           element={<AddPackagePage action={AddPackagePageAction.CLONE} />}
         />
-        <Route
-          path={deployPackageRouteRef.path}
-          element={<AddPackagePage action={AddPackagePageAction.DEPLOY} />}
-        />
         <Route
           path={editPackageRouteRef.path}
           element={<PackageRevisionPage mode={PackageRevisionPageMode.EDIT} />}

plugins/cad/src/components/PackageRevisionPage/components/PackageRevisionOptions.tsx

@@ -20,7 +20,6 @@ import { Button as MaterialButton } from '@material-ui/core';
 import React, { Fragment } from 'react';
 import {
   clonePackageRouteRef,
-  deployPackageRouteRef,
   editPackageRouteRef,
   packageRouteRef,
 } from '../../../routes';
@@ -31,12 +30,11 @@ import {
 import { RepositorySummary } from '../../../types/RepositorySummary';
 import { RootSync } from '../../../types/RootSync';
 import {
-  canCloneOrDeploy,
+  canCloneRevision,
   findLatestPublishedRevision,
   isLatestPublishedRevision,
 } from '../../../utils/packageRevision';
 import {
-  ContentSummary,
   getPackageDescriptor,
   isDeploymentRepository,
   RepositoryContentDetails,
@@ -164,7 +162,6 @@ const PublishedPackageRevisionOptions = ({
 }: PackageRevisionOptionsProps) => {
   const packageRef = useRouteRef(packageRouteRef);
   const clonePackageRef = useRouteRef(clonePackageRouteRef);
-  const deployPackageRef = useRouteRef(deployPackageRouteRef);
 
   const packageName = packageRevision.metadata.name;
   const repositoryName = packageRevision.spec.repository;
@@ -207,15 +204,10 @@ const PublishedPackageRevisionOptions = ({
   }
 
   const packageContentType = getPackageDescriptor(repositorySummary.repository);
-  const showDeploy =
-    RepositoryContentDetails[packageContentType].cloneTo.includes(
-      ContentSummary.DEPLOYMENT,
-    ) && canCloneOrDeploy(packageRevision);
 
   const showClone =
-    !RepositoryContentDetails[packageContentType].cloneTo.includes(
-      ContentSummary.DEPLOYMENT,
-    ) && canCloneOrDeploy(packageRevision);
+    RepositoryContentDetails[packageContentType].cloneTo.length > 0 &&
+    canCloneRevision(packageRevision);
 
   const isNewerUnpublishedRevision = latestRevision !== latestPublishedRevision;
 
@@ -280,17 +272,6 @@ const PublishedPackageRevisionOptions = ({
           Clone
         </Button>
       )}
-
-      {showDeploy && (
-        <Button
-          to={deployPackageRef({ repositoryName, packageName })}
-          color="primary"
-          variant="contained"
-          disabled={disabled}
-        >
-          Deploy
-        </Button>
-      )}
     </Fragment>
   );
 };

plugins/cad/src/routes.ts

@@ -50,12 +50,6 @@ export const clonePackageRouteRef = createSubRouteRef({
   parent: rootRouteRef,
 });
 
-export const deployPackageRouteRef = createSubRouteRef({
-  id: 'deploy-package',
-  path: '/repositories/:repositoryName/packages/:packageName/deploy',
-  parent: rootRouteRef,
-});
-
 export const editPackageRouteRef = createSubRouteRef({
   id: 'edit-package',
   path: '/repositories/:repositoryName/packages/:packageName/edit',

plugins/cad/src/utils/packageRevision.ts

@@ -133,7 +133,7 @@ export const getPackageRevision = (
   return packageRevision;
 };
 
-export const canCloneOrDeploy = (packageRevision: PackageRevision): boolean => {
+export const canCloneRevision = (packageRevision: PackageRevision): boolean => {
   return isLatestPublishedRevision(packageRevision);
 };