feat: add related package summary on package revision page (#108)

This change updates the Package Revision page to include a link to the upstream blueprint and downstream package summary.

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

@@ -90,6 +90,7 @@ import {
   RevisionSummary,
 } from './components/PackageRevisionsTable';
 import { ResourcesTabContent } from './components/ResourcesTabContent';
+import { RelatedPackagesContent } from './components/RelatedPackagesContent';
 import { processUpdatedResourcesMap } from './updatedResourcesMap/processUpdatedResourcesMap';
 
 export enum PackageRevisionPageMode {
@@ -141,6 +142,7 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
   const [repositorySummary, setRepositorySummary] =
     useState<RepositorySummary>();
   const [packageRevision, setPackageRevision] = useState<PackageRevision>();
+  const [upstreamRepository, setUpstreamRepository] = useState<Repository>();
   const [upstreamPackageRevision, setUpstreamPackageRevision] =
     useState<PackageRevision>();
   const [downstreamPackageSummaries, setDownstreamPackageSummaries] = useState<
@@ -222,27 +224,27 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
     setResourcesMap(thisResources.spec.resources);
 
     let upgradeAvailable = false;
+    let thisUpstreamRepository: Repository | undefined = undefined;
+    let thisUpstreamPackageRevision: PackageRevision | undefined = undefined;
 
     const upstream = getUpstreamPackageRevisionDetails(thisPackageRevision);
 
     if (upstream) {
-      const upstreamRepository = findRepository(allRepositories.current, {
+      thisUpstreamRepository = findRepository(allRepositories.current, {
         repositoryUrl: upstream.repositoryUrl,
       });
 
-      if (upstreamRepository) {
-        const upstreamRepositoryName = upstreamRepository.metadata.name;
+      if (thisUpstreamRepository) {
+        const upstreamRepositoryName = thisUpstreamRepository.metadata.name;
 
-        const thisUpstreamPackage = findPackageRevision(
+        thisUpstreamPackageRevision = findPackageRevision(
           thisPackageRevisions,
           upstream.packageName,
           upstream.revision,
           upstreamRepositoryName,
         );
 
-        setUpstreamPackageRevision(thisUpstreamPackage);
-
-        if (thisUpstreamPackage) {
+        if (thisUpstreamPackageRevision) {
           if (isLatestPublishedRevision(thisPackageRevision)) {
             const allUpstreamRevisions = filterPackageRevisions(
               thisPackageRevisions,
@@ -274,7 +276,8 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
     );
 
     setDownstreamPackageSummaries(downstreamPackages);
-
+    setUpstreamRepository(thisUpstreamRepository);
+    setUpstreamPackageRevision(thisUpstreamPackageRevision);
     setIsUpgradeAvailable(upgradeAvailable);
   };
 
@@ -686,6 +689,9 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
 
   const alertMessages = isUpgradeAvailable ? [getUpgradeAlertText()] : [];
 
+  const showDownstreamPackages =
+    !isDeploymentPackage || downstreamPackageSummaries.length > 0;
+
   const getDisplayTabs = (tabs: ConditionalTabProps[]): TabProps[] => {
     return tabs.filter(tab => tab.showTab !== false);
   };
@@ -704,6 +710,13 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
 
       <ContentHeader title={packageRevisionTitle}>
         <div className={classes.packageRevisionOptions}>
+          <RelatedPackagesContent
+            upstreamRepository={upstreamRepository}
+            upstreamPackageRevision={upstreamPackageRevision}
+            downstreamPackages={downstreamPackageSummaries}
+            showDownstream={showDownstreamPackages}
+          />
+
           {getPackageLifecycleDescription()}
 
           {getCurrentSyncStatus()}
@@ -771,8 +784,7 @@ export const PackageRevisionPage = ({ mode }: PackageRevisionPageProps) => {
                 downstreamPackages={downstreamPackageSummaries}
               />
             ),
-            showTab:
-              !isDeploymentPackage || downstreamPackageSummaries.length > 0,
+            showTab: showDownstreamPackages,
           },
           {
             label: 'Advanced',

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

@@ -0,0 +1,100 @@
+/**
+ * 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 { groupBy, uniq } from 'lodash';
+import React, { Fragment } from 'react';
+import { PackageRevision } from '../../../types/PackageRevision';
+import { Repository } from '../../../types/Repository';
+import { PackageSummary } from '../../../utils/packageSummary';
+import { getPackageDescriptor } from '../../../utils/repository';
+import { PackageLink } from '../../Links';
+
+type RelatedPackagesContentProps = {
+  upstreamRepository?: Repository;
+  upstreamPackageRevision?: PackageRevision;
+  downstreamPackages: PackageSummary[];
+  showDownstream: boolean;
+};
+
+type UpstreamPackageContentProps = {
+  upstreamRepository: Repository;
+  upstreamPackageRevision: PackageRevision;
+};
+
+type DownstreamPackageContentProps = {
+  downstreamPackages: PackageSummary[];
+};
+
+const UpstreamPackageContent = ({
+  upstreamRepository,
+  upstreamPackageRevision,
+}: UpstreamPackageContentProps) => {
+  const packageDescriptor = getPackageDescriptor(upstreamRepository);
+
+  return (
+    <Fragment>
+      <div>
+        {packageDescriptor}:&nbsp;
+        <PackageLink packageRevision={upstreamPackageRevision} />
+      </div>
+    </Fragment>
+  );
+};
+
+const DownstreamPackageContent = ({
+  downstreamPackages,
+}: DownstreamPackageContentProps) => {
+  const packagesByDescriptor = groupBy(
+    downstreamPackages,
+    packageSummary => packageSummary.packageDescriptor,
+  );
+  const packageDescriptors = uniq(Object.keys(packagesByDescriptor));
+  if (packageDescriptors.length === 0) {
+    packageDescriptors.push('Package');
+  }
+
+  return (
+    <Fragment>
+      {packageDescriptors.map(descriptor => (
+        <div>
+          Downstream {descriptor}s:&nbsp;
+          {(packagesByDescriptor[descriptor] ?? []).length}
+        </div>
+      ))}
+    </Fragment>
+  );
+};
+
+export const RelatedPackagesContent = ({
+  upstreamRepository,
+  upstreamPackageRevision,
+  downstreamPackages,
+  showDownstream,
+}: RelatedPackagesContentProps) => {
+  return (
+    <Fragment>
+      {upstreamRepository && upstreamPackageRevision && (
+        <UpstreamPackageContent
+          upstreamRepository={upstreamRepository}
+          upstreamPackageRevision={upstreamPackageRevision}
+        />
+      )}
+      {showDownstream && (
+        <DownstreamPackageContent downstreamPackages={downstreamPackages} />
+      )}
+    </Fragment>
+  );
+};