Merge pull request #15715 from TheRealJon/CONSOLE-4729

CONSOLE-4729,CONSOLE-4823: Enable OLMv1 Tech Preview

Author: openshift-merge-bot[bot]

cmd/bridge/main.go

@@ -358,6 +358,7 @@ func main() {
 		NodeOperatingSystems:         nodeOperatingSystems,
 		K8sMode:                      *fK8sMode,
 		CopiedCSVsDisabled:           *fCopiedCSVsDisabled,
+		TechPreview:                  *fTechPreview,
 		Capabilities:                 capabilities,
 	}
 

frontend/@types/console/index.d.ts

@@ -71,6 +71,7 @@ declare interface Window {
     nodeOperatingSystems: string[];
     hubConsoleURL: string;
     k8sMode: string;
+    techPreview: boolean;
     capabilities: {
       name: string;
       visibility: { state: 'Enabled' | 'Disabled' };

frontend/packages/console-app/console-extensions.json

@@ -1022,6 +1022,9 @@
         "group": "operators.coreos.com"
       },
       "startsWith": ["operators.coreos.com", "clusterserviceversions"]
+    },
+    "flags": {
+      "disallowed": ["OLMV1_ENABLED"]
     }
   },
   {
@@ -2587,6 +2590,12 @@
       "provider": { "$codeRef": "defaultProvider.useDefaultActionsProvider" }
     }
   },
+  {
+    "type": "console.flag/hookProvider",
+    "properties": {
+      "handler": { "$codeRef": "useTechPreviewFlagProvider" }
+    }
+  },
   {
     "type": "console.navigation/href",
     "properties": {

frontend/packages/console-app/package.json

@@ -79,6 +79,7 @@
       "consolePluginBackendDetail": "src/components/console-operator/ConsolePluginBackendDetail.tsx",
       "consolePluginProxyDetail": "src/components/console-operator/ConsolePluginProxyDetail.tsx",
       "getConsoleOperatorConfigFlag": "src/hooks/useCanGetConsoleOperatorConfig.ts",
+      "useTechPreviewFlagProvider": "src/hooks/useTechPreviewFlagProvider.ts",
       "usePerspectivesAvailable": "src/components/user-preferences/perspective/usePerspectivesAvailable.ts",
       "defaultProvider": "src/actions/providers/default-provider.ts",
       "OperatorStatus": "src/components/dashboards-page/OperatorStatus.tsx",

frontend/packages/console-app/src/consts.ts

@@ -8,6 +8,7 @@ export const FLAG_DEVELOPER_PERSPECTIVE = 'DEVELOPER_PERSPECTIVE';
 export const ACM_PERSPECTIVE_ID = 'acm';
 export const ADMIN_PERSPECTIVE_ID = 'admin';
 export const FLAG_CAN_GET_CONSOLE_OPERATOR_CONFIG = 'CAN_GET_CONSOLE_OPERATOR_CONFIG';
+export const FLAG_TECH_PREVIEW = 'TECH_PREVIEW';
 
 export const FAVORITES_CONFIG_MAP_KEY = 'console.favorites';
 export const FAVORITES_LOCAL_STORAGE_KEY = `${STORAGE_PREFIX}/favorites`;

frontend/packages/console-app/src/hooks/useTechPreviewFlagProvider.ts

@@ -0,0 +1,9 @@
+import { SetFeatureFlag } from '@console/dynamic-plugin-sdk/src/extensions/feature-flags';
+import { FLAG_TECH_PREVIEW } from '../consts';
+
+type UseTechPreviewFlagProvider = (setFeatureFlag: SetFeatureFlag) => void;
+const useTechPreviewFlagProvider: UseTechPreviewFlagProvider = (setFeatureFlag) => {
+  setFeatureFlag(FLAG_TECH_PREVIEW, !!window.SERVER_FLAGS.techPreview);
+};
+
+export default useTechPreviewFlagProvider;

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

@@ -2,13 +2,17 @@ import * as React from 'react';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
 import { useLocation } from 'react-router-dom-v5-compat';
+import { FLAG_TECH_PREVIEW } from '@console/app/src/consts';
 import { ResolvedExtension, CatalogItemType, CatalogCategory } from '@console/dynamic-plugin-sdk';
 import { CatalogItem } from '@console/dynamic-plugin-sdk/src/extensions';
 import { removeQueryArgument, setQueryArgument } from '@console/internal/components/utils/router';
 import { skeletonCatalog } from '@console/internal/components/utils/skeleton-catalog';
 import { StatusBox } from '@console/internal/components/utils/status-box';
+import OLMv1Alert from '@console/operator-lifecycle-manager-v1/src/components/OLMv1Alert';
+import { FLAG_OLMV1_ENABLED } from '@console/operator-lifecycle-manager-v1/src/const';
 import { DocumentTitle } from '@console/shared/src/components/document-title/DocumentTitle';
 import { PageHeading } from '@console/shared/src/components/heading/PageHeading';
+import { useFlag } from '../../hooks/flag';
 import { useQueryParams } from '../../hooks/useQueryParams';
 import PageBody from '../layout/PageBody';
 import CatalogView from './catalog-view/CatalogView';
@@ -50,6 +54,11 @@ const CatalogController: React.FC<CatalogControllerProps> = ({
   const { pathname } = useLocation();
   const queryParams = useQueryParams();
   const [disabledSubCatalogs] = useGetAllDisabledSubCatalogs();
+  const techPreviewEnabled = useFlag(FLAG_TECH_PREVIEW);
+  const olmv1Enabled = useFlag(FLAG_OLMV1_ENABLED);
+
+  // TODO(CONSOLE-4823): Remove this hard-coded alert when OLMv1 GAs
+  const showOLMv1Alert = techPreviewEnabled && olmv1Enabled && type === 'operator';
 
   const typeExtension: ResolvedExtension<CatalogItemType> = React.useMemo(
     () => catalogExtensions?.find((extension) => extension.properties.type === type),
@@ -183,6 +192,12 @@ const CatalogController: React.FC<CatalogControllerProps> = ({
           breadcrumbs={type ? breadcrumbs : null}
           helpText={getCatalogTypeDescription()}
         />
+        {/* TODO(CONSOLE-4823): Remove this hard-coded alert when OLMv1 GAs */}
+        {showOLMv1Alert && (
+          <div className="pf-v6-u-mx-md">
+            <OLMv1Alert />
+          </div>
+        )}
         <StatusBox
           skeleton={skeletonCatalog}
           data={items}

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

@@ -28,7 +28,7 @@ const CatalogCategories: React.FC<CatalogCategoriesProp> = ({
     selectedCategoryID: string,
     toplevelCategory: boolean,
   ) => {
-    if (!categorizedIds[category.id]) return null;
+    if (!category || !categorizedIds[category.id]) return null;
 
     const { id, label, subcategories } = category;
     const active = id === selectedCategory;

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

@@ -1,9 +1,12 @@
-import { forwardRef } from 'react';
+import { forwardRef, Suspense } from 'react';
 import { Flex, FlexItem, SearchInput } from '@patternfly/react-core';
 import * as _ from 'lodash';
 import { useTranslation } from 'react-i18next';
+import { FLAG_TECH_PREVIEW } from '@console/app/src/consts';
 import { ConsoleSelect } from '@console/internal/components/utils/console-select';
-import { useDebounceCallback } from '@console/shared/src/hooks/debounce';
+// TODO(CONSOLE-4823): Remove this hard-coded component when OLMv1 GAs
+import { OLMv1Switch } from '@console/operator-lifecycle-manager-v1/src/components/OLMv1Switch';
+import { useDebounceCallback, useFlag } from '@console/shared/src/hooks';
 import { NO_GROUPING } from '../utils/category-utils';
 import { CatalogSortOrder, CatalogStringMap } from '../utils/types';
 import CatalogPageHeader from './CatalogPageHeader';
@@ -18,6 +21,7 @@ type CatalogToolbarProps = {
   sortOrder: CatalogSortOrder;
   groupings: CatalogStringMap;
   activeGrouping: string;
+  catalogType?: string;
   onGroupingChange: (grouping: string) => void;
   onSearchKeywordChange: (searchKeyword: string) => void;
   onSortOrderChange: (sortOrder: CatalogSortOrder) => void;
@@ -32,13 +36,18 @@ const CatalogToolbar = forwardRef<HTMLInputElement, CatalogToolbarProps>(
       sortOrder,
       groupings,
       activeGrouping,
+      catalogType,
       onGroupingChange,
       onSearchKeywordChange,
       onSortOrderChange,
     },
     inputRef,
   ) => {
     const { t } = useTranslation();
+    const techPreviewEnabled = useFlag(FLAG_TECH_PREVIEW);
+
+    // TODO(CONSOLE-4823): Remove this hard-coded toggle when OLMv1 GAs
+    const showOLMv1Toggle = techPreviewEnabled && catalogType === 'operator';
 
     const catalogSortItems = {
       [CatalogSortOrder.RELEVANCE]: t('console-shared~Relevance'),
@@ -94,6 +103,14 @@ const CatalogToolbar = forwardRef<HTMLInputElement, CatalogToolbarProps>(
                 />
               </FlexItem>
             )}
+            {/* TODO(CONSOLE-4823): Remove this hard-coded toggle when OLMv1 GAs */}
+            {showOLMv1Toggle && (
+              <FlexItem>
+                <Suspense fallback={null}>
+                  <OLMv1Switch />
+                </Suspense>
+              </FlexItem>
+            )}
           </Flex>
           <CatalogPageNumItems>
             {t('console-shared~{{totalItems}} items', { totalItems })}

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

@@ -118,7 +118,7 @@ const CatalogView: React.FC<CatalogViewProps> = ({
     }
   }, [catalogType, items.length]);
 
-  const handleCategoryChange = (categoryId) => {
+  const handleCategoryChange = (categoryId: string) => {
     updateURLParams(CatalogQueryParams.CATEGORY, categoryId);
   };
 
@@ -154,8 +154,8 @@ const CatalogView: React.FC<CatalogViewProps> = ({
     const allCategory = { id: ALL_CATEGORY, label: t('console-shared~All items') };
     const otherCategory = { id: OTHER_CATEGORY, label: t('console-shared~Other') };
     const sortedCategories = (categories ?? [])
-      .filter((cat) => cat.id !== ALL_CATEGORY && cat.id !== OTHER_CATEGORY)
-      .sort((a, b) => a.label.localeCompare(b.label));
+      .filter((cat) => cat && cat.id !== ALL_CATEGORY && cat.id !== OTHER_CATEGORY)
+      .sort((a, b) => (a.label ?? '').localeCompare(b.label ?? '') ?? 0);
     return [allCategory, ...sortedCategories, otherCategory];
   }, [categories, t]);
 
@@ -341,6 +341,7 @@ const CatalogView: React.FC<CatalogViewProps> = ({
             sortOrder={sortOrder}
             groupings={groupings}
             activeGrouping={activeGrouping}
+            catalogType={catalogType}
             onGroupingChange={handleGroupingChange}
             onSortOrderChange={handleSortOrderChange}
             onSearchKeywordChange={handleSearchKeywordChange}