feat: update repositories list on landing page (#89)

This change updates the Landing Page to list all package repositories in the same tab instead of creating separate tabs for each package repository content type (deployments, blueprints, catalog blueprints).
GoogleContainerTools · Aug 2, 2022 · dea50be · dea50be
1 parent 36f80eb
commit dea50be
Show file tree

Hide file tree

Showing 3 changed files with 54 additions and 55 deletions.
diff --git a/plugins/cad/src/components/RepositoryListPage/RepositoryListPage.tsx b/plugins/cad/src/components/RepositoryListPage/RepositoryListPage.tsx
@@ -33,10 +33,8 @@ import { RepositoryContent } from '../../types/Repository';
 import { RepositorySummary } from '../../types/RepositorySummary';
 import { showRegisteredFunctionRepositories } from '../../utils/featureFlags';
 import {
-  isCatalogBlueprintRepository,
-  isDeployableBlueprintRepository,
-  isDeploymentRepository,
   isFunctionRepository,
+  isPackageRepository,
 } from '../../utils/repository';
 import {
   fitlerRepositorySummary,
@@ -56,48 +54,20 @@ const createRepositoriesTable = (
   content: RepositoryContent,
 ): JSX.Element => (
   <RepositoriesTable
-    title={`${descriptor}s Repository`}
+    title={`${descriptor} Repositories`}
     packageDescriptor={descriptor}
     repositories={repositories}
     repositoryContent={content}
   />
 );
 
-const getDeploymentsTab = (
+const getPackagesTab = (
   allRepositorySummaries: RepositorySummary[],
 ): TabProps => ({
-  label: 'Deployments',
+  label: 'Packages',
   content: createRepositoriesTable(
-    'Deployment',
-    fitlerRepositorySummary(allRepositorySummaries, isDeploymentRepository),
-    RepositoryContent.PACKAGE,
-  ),
-});
-
-const getBlueprintsTab = (
-  allRepositorySummaries: RepositorySummary[],
-): TabProps => ({
-  label: 'Blueprints',
-  content: createRepositoriesTable(
-    'Blueprint',
-    fitlerRepositorySummary(
-      allRepositorySummaries,
-      isDeployableBlueprintRepository,
-    ),
-    RepositoryContent.PACKAGE,
-  ),
-});
-
-const getAbstractBlueprintsTab = (
-  allRepositorySummaries: RepositorySummary[],
-): TabProps => ({
-  label: 'Catalog Blueprints',
-  content: createRepositoriesTable(
-    'Catalog Blueprint',
-    fitlerRepositorySummary(
-      allRepositorySummaries,
-      isCatalogBlueprintRepository,
-    ),
+    'Package',
+    fitlerRepositorySummary(allRepositorySummaries, isPackageRepository),
     RepositoryContent.PACKAGE,
   ),
 });
@@ -116,11 +86,7 @@ const getFunctionsTab = (
 const getRepositoryTabs = (
   allRepositories: RepositorySummary[],
 ): TabProps[] => {
-  const tabs: TabProps[] = [
-    getDeploymentsTab(allRepositories),
-    getBlueprintsTab(allRepositories),
-    getAbstractBlueprintsTab(allRepositories),
-  ];
+  const tabs: TabProps[] = [getPackagesTab(allRepositories)];
 
   if (showRegisteredFunctionRepositories()) {
     tabs.push(getFunctionsTab(allRepositories));

diff --git a/plugins/cad/src/components/RepositoryListPage/components/RepositoriesTable.tsx b/plugins/cad/src/components/RepositoryListPage/components/RepositoriesTable.tsx
@@ -23,7 +23,11 @@ import { PackageRevisionLifecycle } from '../../../types/PackageRevision';
 import { Repository, RepositoryContent } from '../../../types/Repository';
 import { RepositorySummary } from '../../../types/RepositorySummary';
 import { PackageSummary } from '../../../utils/packageSummary';
-import { getRepositoryTitle } from '../../../utils/repository';
+import {
+  ContentSummary,
+  getPackageDescriptor,
+  getRepositoryTitle,
+} from '../../../utils/repository';
 import { RepositoryLink } from '../../Links';
 
 type RepositoriesTableProps = {
@@ -35,6 +39,8 @@ type RepositoriesTableProps = {
 
 type RepositoryRow = {
   id: string;
+  singularContent: string;
+  content: string;
   title: string;
   description: string;
   name: string;
@@ -47,6 +53,7 @@ const getTableColumns = (
   repositoryContent: RepositoryContent,
 ): TableColumn<RepositoryRow>[] => {
   const columns: TableColumn<RepositoryRow>[] = [
+    { title: 'Content', field: 'content' },
     { title: 'Title', field: 'title' },
     { title: 'Description', field: 'description' },
     { title: `${packageDescriptor}s`, field: 'summary' },
@@ -95,13 +102,7 @@ const getSummary = (packageSummaries?: PackageSummary[]): string => {
   if (draftPackages) {
     summary = `${summary}, ${draftPackages} Draft`;
   }
-  /*
-  const upgradePackages = packageSummaries.filter(summary => summary.isUpgradeAvailable).length;
 
-  if (upgradePackages) {
-    summary = `${summary}, Upgrades Avaialble`
-  }
-*/
   return summary;
 };
 
@@ -113,6 +114,8 @@ const mapToRepositoryRow = (
 
   return {
     id: repository.metadata.name,
+    singularContent: getPackageDescriptor(repository),
+    content: `${getPackageDescriptor(repository)}s`,
     title: getRepositoryTitle(repository),
     description: repository.spec.description,
     blueprint: blueprint,
@@ -121,6 +124,33 @@ const mapToRepositoryRow = (
   };
 };
 
+const compareRepositoryRows = (
+  repositoryRow1: RepositoryRow,
+  repositoryRow2: RepositoryRow,
+): number => {
+  const getContentPriority = (row: RepositoryRow): number => {
+    switch (row.singularContent) {
+      case ContentSummary.DEPLOYMENT:
+        return 1;
+      case ContentSummary.BLUEPRINT:
+        return 2;
+      case ContentSummary.CATALOG_BLUEPRINT:
+        return 3;
+      default:
+        return 5;
+    }
+  };
+
+  const row1ContentPriority = getContentPriority(repositoryRow1);
+  const row2ContentPriority = getContentPriority(repositoryRow2);
+
+  if (row1ContentPriority !== row2ContentPriority) {
+    return row1ContentPriority > row2ContentPriority ? 1 : -1;
+  }
+
+  return repositoryRow1.name > repositoryRow2.name ? 1 : -1;
+};
+
 export const RepositoriesTable = ({
   title,
   repositories,
@@ -132,7 +162,7 @@ export const RepositoriesTable = ({
   const repositoryRef = useRouteRef(repositoryRouteRef);
 
   const columns = getTableColumns(packageDescriptor, repositoryContent);
-  const data = repositories.map(mapToRepositoryRow);
+  const data = repositories.map(mapToRepositoryRow).sort(compareRepositoryRows);
 
   return (
     <div>

diff --git a/plugins/cad/src/utils/repository.ts b/plugins/cad/src/utils/repository.ts
@@ -70,19 +70,22 @@ export const isDeploymentRepository = (repository: Repository): boolean => {
 };
 
 export const getPackageDescriptor = (repository: Repository): string => {
-  if (isCatalogBlueprintRepository(repository)) return 'Catalog Blueprint';
-  if (isDeployableBlueprintRepository(repository)) return 'Blueprint';
-  if (isDeploymentRepository(repository)) return 'Deployment';
-  if (isFunctionRepository(repository)) return 'Function';
+  if (isCatalogBlueprintRepository(repository))
+    return ContentSummary.CATALOG_BLUEPRINT;
+  if (isDeployableBlueprintRepository(repository))
+    return ContentSummary.BLUEPRINT;
+  if (isDeploymentRepository(repository)) return ContentSummary.DEPLOYMENT;
+  if (isFunctionRepository(repository)) return ContentSummary.FUNCTION;
 
   return 'Unknown';
 };
 
 export const getUpstreamPackageDescriptor = (
   repository: Repository,
 ): string => {
-  if (isDeployableBlueprintRepository(repository)) return 'Catalog Blueprint';
-  if (isDeploymentRepository(repository)) return 'Blueprint';
+  if (isDeployableBlueprintRepository(repository))
+    return ContentSummary.CATALOG_BLUEPRINT;
+  if (isDeploymentRepository(repository)) return ContentSummary.BLUEPRINT;
 
   return 'Upstream Package';
 };