CONSOLE-4201: Migrate ExtensionCatalog to use extensible Catalog system (#14769)

* CONSOLE-4201: Migrate ExtensionCatalog to use console-shared catalog system and dynamic plugin catalog extensions

* Update new console shared component exports to match convention in the package

* fix contrib/catalogd-route.yaml

* fix bundles sort order

Author: TheRealJon

cmd/bridge/main.go

@@ -32,7 +32,7 @@ const (
 	k8sInClusterCA          = "/var/run/secrets/kubernetes.io/serviceaccount/ca.crt"
 	k8sInClusterBearerToken = "/var/run/secrets/kubernetes.io/serviceaccount/token"
 
-	catalogdHost = "catalogd-catalogserver.openshift-catalogd.svc:443"
+	catalogdHost = "catalogd-service.openshift-catalogd.svc:443"
 
 	// Well-known location of the tenant aware Thanos service for OpenShift exposing the query and query_range endpoints. This is only accessible in-cluster.
 	// Thanos proxies requests to both cluster monitoring and user workload monitoring prometheus instances.

contrib/catalogd-route.yaml

@@ -0,0 +1,15 @@
+kind: Route
+apiVersion: route.openshift.io/v1
+metadata:
+  name: catalogd-route
+  namespace: openshift-catalogd
+spec:
+  to:
+    kind: Service
+    name: catalogd-service
+    weight: 100
+  port:
+    targetPort: https
+  tls:
+    termination: passthrough
+    insecureEdgeTerminationPolicy: Redirect

contrib/oc-environment.sh

@@ -39,7 +39,7 @@ fi
 
 # This route will not exist by default. If we want olmv1 to work off cluster, we will need to
 # manually create a route for the catalogd service.
-CATALOGD_HOSTNAME=$(oc -n openshift-catalogd get route catalogd-catalogserver -o jsonpath='{.spec.host}' 2>/dev/null)
+CATALOGD_HOSTNAME=$(oc -n openshift-catalogd get route catalogd-route -o jsonpath='{.spec.host}' 2>/dev/null)
 if [ -n "$CATALOGD_HOSTNAME" ]; then
     BRIDGE_K8S_MODE_OFF_CLUSTER_CATALOGD="https://$CATALOGD_HOSTNAME"
     export BRIDGE_K8S_MODE_OFF_CLUSTER_CATALOGD

frontend/packages/console-app/src/components/nav/ExternalLink.tsx renamed to frontend/packages/console-app/src/components/nav/ExternalNavLink.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react';
 import { NavItem } from '@patternfly/react-core';
 
-export const ExternalLink = ({ href, name }: ExternalLinkProps): React.ReactElement => (
+export const ExternalNavLink = ({ href, name }: ExternalLinkProps): React.ReactElement => (
   <NavItem isActive={false}>
     <a
       className="pf-v6-c-nav__link"

frontend/packages/console-dynamic-plugin-sdk/src/api/dynamic-core-api.ts

@@ -714,8 +714,8 @@ export const usePrometheusPoll: UsePrometheusPoll = (options) => {
  * @param {TimestampProps['omitSuffix']} omitSuffix - formats the date ommiting the suffix.
  * @param {TimestampProps['className']} className - additional class name for the component.
  */
-export const Timestamp: React.FC<TimestampProps> = require('@console/internal/components/utils/timestamp')
-  .Timestamp;
+export const Timestamp: React.FC<TimestampProps> = require('@console/shared/src/components/datetime/Timestamp')
+  .default;
 
 export { useModal } from '../app/modal-support/useModal';
 

frontend/packages/console-dynamic-plugin-sdk/src/extensions/catalog.ts

@@ -181,6 +181,7 @@ export type CatalogItemAttribute = {
   label: string;
   attribute: string;
   description?: string;
+  comparator?: CodeRef<(a: string, b: string) => number>;
 };
 
 export type CatalogItemBadge = {

frontend/packages/console-shared/src/components/catalog/CatalogController.tsx

@@ -3,7 +3,7 @@ import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom-v5-compat';
 import { ResolvedExtension, CatalogItemType } from '@console/dynamic-plugin-sdk';
-import { CatalogItem, CatalogItemAttribute } from '@console/dynamic-plugin-sdk/src/extensions';
+import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
 import {
   PageHeading,
   skeletonCatalog,
@@ -33,7 +33,7 @@ type CatalogControllerProps = CatalogService & {
   enableDetailsPanel?: boolean;
   hideSidebar?: boolean;
   title: string;
-  description: string;
+  description: string | React.ReactElement;
   categories?: CatalogCategory[];
 };
 
@@ -72,15 +72,12 @@ const CatalogController: React.FC<CatalogControllerProps> = ({
   };
 
   const filterGroups: string[] = React.useMemo(() => {
-    return (
-      typeExtension?.properties.filters?.map((filter: CatalogItemAttribute) => filter.attribute) ??
-      []
-    );
+    return typeExtension?.properties.filters?.map((filter) => filter.attribute) ?? [];
   }, [typeExtension]);
 
   const filterGroupMap: CatalogFilterGroupMap = React.useMemo(() => {
     return (
-      typeExtension?.properties.filters?.reduce((map, filter: CatalogItemAttribute) => {
+      typeExtension?.properties.filters?.reduce((map, filter) => {
         map[filter.attribute] = filter;
         return map;
       }, {}) ?? {}
@@ -89,7 +86,7 @@ const CatalogController: React.FC<CatalogControllerProps> = ({
 
   const groupings: CatalogStringMap = React.useMemo(() => {
     return (
-      typeExtension?.properties.groupings?.reduce((map, group: CatalogItemAttribute) => {
+      typeExtension?.properties.groupings?.reduce((map, group) => {
         map[group.attribute] = group.label;
         return map;
       }, {}) ?? {}

frontend/packages/console-shared/src/components/catalog/catalog-view/CatalogFilters.tsx

@@ -6,7 +6,9 @@ import {
 } from '@patternfly/react-catalog-view-extension';
 import * as _ from 'lodash';
 import { CatalogItemAttribute } from '@console/dynamic-plugin-sdk';
+import { ResolvedCodeRefProperties } from '@console/dynamic-plugin-sdk/src/types';
 import { FieldLevelHelp } from '@console/internal/components/utils';
+import { alphanumericCompare } from '@console/shared/src/utils/utils';
 import {
   CatalogFilter,
   CatalogFilterCounts,
@@ -17,7 +19,7 @@ import {
 type CatalogFiltersProps = {
   activeFilters: CatalogFilters;
   filterGroupCounts: CatalogFilterCounts;
-  filterGroupMap: { [key: string]: CatalogItemAttribute };
+  filterGroupMap: { [key: string]: ResolvedCodeRefProperties<CatalogItemAttribute> };
   filterGroupsShowAll: { [key: string]: boolean };
   onFilterChange: (filterType: string, id: string, value: boolean) => void;
   onShowAllToggle: (groupName: string) => void;
@@ -58,11 +60,14 @@ const CatalogFilters: React.FC<CatalogFiltersProps> = ({
 
   const renderFilterGroup = (filterGroup: CatalogFilter, groupName: string) => {
     const filterGroupKeys = Object.keys(filterGroup);
+    const filterGroupComparator = filterGroupMap[groupName]?.comparator ?? alphanumericCompare;
     if (filterGroupKeys.length > 0) {
-      const sortedFilterGroup = filterGroupKeys.sort().reduce<CatalogFilter>((acc, filterName) => {
-        acc[filterName] = filterGroup[filterName];
-        return acc;
-      }, {});
+      const sortedFilterGroup = filterGroupKeys
+        .sort(filterGroupComparator || alphanumericCompare)
+        .reduce<CatalogFilter>((acc, filterName) => {
+          acc[filterName] = filterGroup[filterName];
+          return acc;
+        }, {});
       return (
         <FilterSidePanelCategory
           key={groupName}

frontend/packages/console-shared/src/components/catalog/utils/filter-utils.ts

@@ -81,16 +81,25 @@ export const determineAvailableFilters = (
   filterGroups: string[],
 ): CatalogFilters => {
   const filters = _.cloneDeep(initialFilters);
-
   _.each(filterGroups, (field) => {
     _.each(items, (item) => {
       const value = item[field] || item.attributes?.[field];
       if (value) {
-        _.set(filters, [field, value], {
-          label: value,
-          value,
-          active: false,
-        });
+        if (Array.isArray(value)) {
+          _.each(value, (v) => {
+            _.set(filters, [field, v], {
+              label: v,
+              value: v,
+              active: false,
+            });
+          });
+        } else {
+          _.set(filters, [field, value], {
+            label: value,
+            value,
+            active: false,
+          });
+        }
       }
     });
   });

frontend/packages/console-shared/src/components/catalog/utils/types.ts

@@ -3,7 +3,10 @@ import {
   CatalogItemAttribute,
   CatalogItemType,
 } from '@console/dynamic-plugin-sdk/src/extensions';
-import { ResolvedExtension } from '@console/dynamic-plugin-sdk/src/types';
+import {
+  ResolvedCodeRefProperties,
+  ResolvedExtension,
+} from '@console/dynamic-plugin-sdk/src/types';
 
 export enum CatalogQueryParams {
   TYPE = 'catalogType',
@@ -35,7 +38,9 @@ export type CatalogTypeCounts = Record<string, number>;
 
 export type CatalogStringMap = Record<string, string>;
 
-export type CatalogFilterGroupMap = { [key: string]: CatalogItemAttribute };
+export type CatalogFilterGroupMap = {
+  [key: string]: ResolvedCodeRefProperties<CatalogItemAttribute>;
+};
 
 export type CatalogType = {
   label: string;

frontend/packages/console-shared/src/components/datetime/Timestamp.tsx

@@ -0,0 +1,49 @@
+import { Tooltip } from '@patternfly/react-core';
+import { GlobeAmericasIcon } from '@patternfly/react-icons/dist/esm/icons/globe-americas-icon';
+import classNames from 'classnames';
+import { useSelector } from 'react-redux';
+import { getLastLanguage } from '@console/app/src/components/user-preferences/language/getLastLanguage';
+import { TimestampProps } from '@console/dynamic-plugin-sdk';
+import { RootState } from '@console/internal/redux';
+import * as dateTime from '../../utils/datetime';
+
+const Timestamp = (props: TimestampProps) => {
+  const now = useSelector<RootState, string>(({ UI }) => UI.get('lastTick'));
+
+  // Workaround for Date&Time values are not showing in supported languages onchange of language selector.
+  const lang = getLastLanguage();
+
+  // Check for null. If props.timestamp is null, it returns incorrect date and time of Wed Dec 31 1969 19:00:00 GMT-0500 (Eastern Standard Time)
+  if (!props.timestamp) {
+    return <div className="co-timestamp">-</div>;
+  }
+
+  const mdate = new Date(props.timestamp);
+
+  const timestamp = dateTime.timestampFor(mdate, new Date(now), props.omitSuffix, lang);
+
+  if (!dateTime.isValid(mdate)) {
+    return <div className="co-timestamp">-</div>;
+  }
+
+  if (props.simple) {
+    return <>{timestamp}</>;
+  }
+
+  return (
+    <div className={classNames('co-timestamp co-icon-and-text', props.className)}>
+      <GlobeAmericasIcon className="co-icon-and-text__icon" />
+      <Tooltip
+        content={[
+          <span className="co-nowrap" key="co-timestamp">
+            {dateTime.utcDateTimeFormatter.format(mdate)}
+          </span>,
+        ]}
+      >
+        <span data-test="timestamp">{timestamp}</span>
+      </Tooltip>
+    </div>
+  );
+};
+
+export default Timestamp;

frontend/packages/console-shared/src/components/datetime/index.ts

@@ -0,0 +1 @@
+export { default as Timestamp } from './Timestamp';

frontend/packages/console-shared/src/components/index.ts

@@ -30,3 +30,5 @@ export * from './quick-search';
 export * from './namespace';
 export * from './catalog';
 export * from './progressive-list';
+export * from './links';
+export * from './datetime';

frontend/packages/console-shared/src/components/links/ExternalLink.tsx

@@ -0,0 +1,34 @@
+import * as React from 'react';
+import * as cx from 'classnames';
+
+const ExternalLink: React.FC<ExternalLinkProps> = ({
+  children,
+  href,
+  text,
+  additionalClassName = '',
+  dataTestID,
+  stopPropagation,
+  ...props
+}) => (
+  <a
+    {...props}
+    className={cx('co-external-link', additionalClassName, props?.className)}
+    href={href}
+    target="_blank"
+    rel="noopener noreferrer"
+    data-test-id={dataTestID}
+    {...(stopPropagation ? { onClick: (e) => e.stopPropagation() } : {})}
+  >
+    {children || text}
+  </a>
+);
+
+type ExternalLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement> & {
+  href: string;
+  text?: React.ReactNode;
+  additionalClassName?: string;
+  dataTestID?: string;
+  stopPropagation?: boolean;
+};
+
+export default ExternalLink;

frontend/packages/console-shared/src/components/links/index.ts

@@ -0,0 +1 @@
+export { default as ExternalLink } from './ExternalLink';

frontend/packages/console-shared/src/components/lists/PlainList.tsx

@@ -0,0 +1,17 @@
+import * as React from 'react';
+import { List, ListItem } from '@patternfly/react-core';
+
+const PlainList: React.FCC<PlainListProps> = ({ items }) =>
+  items ? (
+    <List isPlain>
+      {items.map((i) => (
+        <ListItem key={i}>{i}</ListItem>
+      ))}
+    </List>
+  ) : null;
+
+type PlainListProps = {
+  items: string[];
+};
+
+export default PlainList;

frontend/packages/console-shared/src/components/lists/index.ts

@@ -1,2 +1,3 @@
 export { default as DetailPropertyList } from './DetailPropertyList';
 export { default as DetailPropertyListItem } from './DetailPropertyListItem';
+export { default as PlainList } from './PlainList';