feat: add repository details to repository page (#134)

This change adds details of the current repository to the Advanced tab of the Repository Page.

plugins/cad/src/components/RepositoryPage/components/AdvancedRepositoryOptions.tsx

@@ -15,21 +15,31 @@
  */
 
 import { useApi, useRouteRef } from '@backstage/core-plugin-api';
-import { Button } from '@material-ui/core';
+import { Button, makeStyles } from '@material-ui/core';
 import React, { Fragment, useState } from 'react';
 import { useNavigate, useParams } from 'react-router-dom';
 import { configAsDataApiRef } from '../../../apis';
 import { rootRouteRef } from '../../../routes';
-import { ConfirmationDialog } from '../../Controls/ConfirmationDialog';
 import { RepositorySummary } from '../../../types/RepositorySummary';
+import { ConfirmationDialog } from '../../Controls';
+import { RepositoryDetails } from './RepositoryDetails';
 
 type AdvancedRepositoryOptionsProps = {
   repositorySummary: RepositorySummary;
 };
 
+const useStyles = makeStyles({
+  repositoryDetails: {
+    maxWidth: '800px',
+    marginBottom: '16px',
+  },
+});
+
 export const AdvancedRepositoryOptions = ({
   repositorySummary,
 }: AdvancedRepositoryOptionsProps) => {
+  const classes = useStyles();
+
   const { repositoryName } = useParams();
   const api = useApi(configAsDataApiRef);
 
@@ -86,6 +96,10 @@ export const AdvancedRepositoryOptions = ({
         onAction={executeUnregisterRepository}
       />
 
+      <div className={classes.repositoryDetails}>
+        <RepositoryDetails repositorySummary={repositorySummary} />
+      </div>
+
       <Button
         color="secondary"
         variant="contained"

plugins/cad/src/components/RepositoryPage/components/RepositoryDetails.tsx

@@ -0,0 +1,81 @@
+/**
+ * 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 { InfoCard, StructuredMetadataTable } from '@backstage/core-components';
+import React from 'react';
+import { Repository } from '../../../types/Repository';
+import { RepositorySummary } from '../../../types/RepositorySummary';
+import { getPackageDescriptor } from '../../../utils/repository';
+
+type RepositoryDetailsProps = {
+  repositorySummary: RepositorySummary;
+};
+
+type Metadata = {
+  [key: string]: string;
+};
+
+const getRepositoryStoreMetadata = (repository: Repository): Metadata => {
+  const gitDetails = repository.spec.git;
+  const ociDetails = repository.spec.oci;
+
+  if (gitDetails) {
+    const gitMetadata: Metadata = {
+      repositoryURL: gitDetails.repo,
+      secret: gitDetails.secretRef?.name ?? 'none',
+      branch: gitDetails.branch,
+      directory: gitDetails.directory,
+    };
+
+    return gitMetadata;
+  }
+
+  if (ociDetails) {
+    const ociMetadata: Metadata = {
+      registry: ociDetails.registry,
+      secret: ociDetails.secretRef?.name ?? 'none',
+    };
+
+    return ociMetadata;
+  }
+
+  return {};
+};
+
+const getRepositoryMetadata = (repository: Repository): Metadata => {
+  const metadata: Metadata = {
+    name: repository.metadata.name,
+    description: repository.spec.description ?? '',
+    content: `${getPackageDescriptor(repository)}s`,
+    ...getRepositoryStoreMetadata(repository),
+  };
+
+  return metadata;
+};
+
+export const RepositoryDetails = ({
+  repositorySummary,
+}: RepositoryDetailsProps) => {
+  const repositoryMetadata = getRepositoryMetadata(
+    repositorySummary.repository,
+  );
+
+  return (
+    <InfoCard title="Repository Details">
+      <StructuredMetadataTable metadata={repositoryMetadata} />
+    </InfoCard>
+  );
+};