feat: show register repository link on content card (#226)

This change updates the Content Info Card to show the register repository link when there are no repositories registered for the content type.

plugins/cad/src/components/Links/RegisterRepositoryLink.tsx

@@ -0,0 +1,26 @@
+/**
+ * Copyright 2022 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { Link } from '@backstage/core-components';
+import { useRouteRef } from '@backstage/core-plugin-api';
+import React from 'react';
+import { registerRepositoryRouteRef } from '../../routes';
+
+export const RegisterRepositoryLink = () => {
+  const repositoryRef = useRouteRef(registerRepositoryRouteRef);
+
+  return <Link to={repositoryRef()}>Register Repository</Link>;
+};

plugins/cad/src/components/Links/index.ts

@@ -17,4 +17,5 @@
 export { LandingPageLink } from './LandingPageLink';
 export { PackageLink } from './PackageLink';
 export { PackagesLink } from './PackagesLink';
+export { RegisterRepositoryLink } from './RegisterRepositoryLink';
 export { RepositoryLink } from './RepositoryLink';

plugins/cad/src/components/PackageManagementPage/components/ContentInfoCard.tsx

@@ -30,7 +30,7 @@ import {
   RepositoryContentDetails,
 } from '../../../utils/repository';
 import { toLowerCase } from '../../../utils/string';
-import { RepositoryLink } from '../../Links';
+import { RegisterRepositoryLink, RepositoryLink } from '../../Links';
 
 type ContentInfoCardProps = {
   contentType: string;
@@ -56,19 +56,23 @@ const getActions = (
   repositories: Repository[],
   className: string,
 ): JSX.Element => {
-  if (repositories.length === 0) {
-    return <Fragment />;
-  }
+  const anyRepositoriesRegistered = repositories.length > 0;
 
   return (
     <div className={className}>
-      <Fragment>Repositories:</Fragment>&nbsp;
-      {repositories.map((r, idx) => (
+      {!anyRepositoriesRegistered && <RegisterRepositoryLink />}
+
+      {anyRepositoriesRegistered && (
         <Fragment>
-          <RepositoryLink repository={r} />
-          {idx !== repositories.length - 1 && <Fragment>, </Fragment>}
+          <Fragment>Repositories:</Fragment>&nbsp;
+          {repositories.map((r, idx) => (
+            <Fragment key={r.metadata.name}>
+              <RepositoryLink repository={r} />
+              {idx !== repositories.length - 1 && <Fragment>, </Fragment>}
+            </Fragment>
+          ))}
         </Fragment>
-      ))}
+      )}
     </div>
   );
 };