CONSOLE-4106: Add ClusterExtension creation page

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

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

frontend/packages/console-app/package.json

@@ -77,6 +77,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}

frontend/packages/console-shared/src/components/catalog/service/CatalogServiceProvider.tsx

@@ -103,8 +103,13 @@ const CatalogServiceProvider: React.FC<CatalogServiceProviderProps> = ({
     return applyCatalogItemMetadata(preCatalogItems, metadataProviderMap);
   }, [loaded, preCatalogItems, metadataProviderMap]);
 
-  const onCategoryValueResolved = React.useCallback((categories, id) => {
-    setCategoryProviderMap((prev) => ({ ...prev, [id]: categories }));
+  const onCategoryValueResolved = React.useCallback((newCategories, id) => {
+    setCategoryProviderMap((prev) => {
+      if (_.isEqual(prev[id], newCategories)) {
+        return prev;
+      }
+      return { ...prev, [id]: newCategories };
+    });
   }, []);
 
   const onValueResolved = React.useCallback((items, uid) => {
@@ -135,6 +140,9 @@ const CatalogServiceProvider: React.FC<CatalogServiceProviderProps> = ({
       result[e.properties.type] = [];
     });
     catalogItems.forEach((item) => {
+      if (!result[item.type]) {
+        result[item.type] = [];
+      }
       result[item.type].push(item);
     });
     return result;
@@ -157,9 +165,10 @@ const CatalogServiceProvider: React.FC<CatalogServiceProviderProps> = ({
       ? new Error('failed loading catalog data')
       : new IncompleteDataError(failedExtensions);
 
-  const categories = React.useMemo(() => _.flatten(Object.values(categoryProviderMap)), [
-    categoryProviderMap,
-  ]);
+  const categories = React.useMemo(
+    () => _.uniqBy(_.flatten(Object.values(categoryProviderMap)), 'id'),
+    [categoryProviderMap],
+  );
 
   const catalogService: CatalogService = {
     type: catalogType,

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

@@ -9,8 +9,8 @@ export const matchSubcategories = (
   category: CatalogCategory,
   item: CatalogItem,
 ): (CatalogCategory | CatalogSubcategory)[] => {
-  if (!category.subcategories) {
-    if (!category.tags) {
+  if (!category?.subcategories) {
+    if (!category?.tags) {
       return [];
     }
 

frontend/packages/console-shared/src/components/query-browser/QueryBrowser.tsx

@@ -60,12 +60,12 @@ import {
   timeFormatter,
   timeFormatterWithSeconds,
 } from '@console/internal/components/utils/datetime';
-import { usePoll } from '@console/internal/components/utils/poll-hook';
 import { useRefWidth } from '@console/internal/components/utils/ref-width-hook';
 import { useSafeFetch } from '@console/internal/components/utils/safe-fetch-hook';
 import { LoadingInline } from '@console/internal/components/utils/status-box';
 import { humanizeNumberSI } from '@console/internal/components/utils/units';
 import { RootState } from '@console/internal/redux';
+import { usePoll } from '../../hooks/usePoll';
 import withFallback from '../error/fallbacks/withFallback';
 import { queryBrowserTheme } from './theme';
 

frontend/public/components/utils/poll-hook.ts → frontend/packages/console-shared/src/hooks/usePoll.ts

@@ -21,6 +21,7 @@ export const usePoll = (callback, delay, ...dependencies) => {
       const id = setInterval(tick, delay);
       return () => clearInterval(id);
     }
+    return () => {};
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, [delay, ...dependencies]);
 };

frontend/packages/helm-plugin/src/providers/helm-detection-provider.ts

@@ -1,10 +1,10 @@
 import { useState, useCallback } from 'react';
 import { SetFeatureFlag } from '@console/dynamic-plugin-sdk';
 import { settleAllPromises } from '@console/dynamic-plugin-sdk/src/utils/promise';
-import { usePoll } from '@console/internal/components/utils/poll-hook';
 import { fetchK8s } from '@console/internal/graphql/client';
 import { K8sResourceKind, ListKind } from '@console/internal/module/k8s';
 import { useActiveNamespace } from '@console/shared/src/hooks/useActiveNamespace';
+import { usePoll } from '@console/shared/src/hooks/usePoll';
 import { FLAG_OPENSHIFT_HELM } from '../const';
 import { HelmChartRepositoryModel, ProjectHelmChartRepositoryModel } from '../models';
 

frontend/packages/operator-lifecycle-manager-v1/README.md

@@ -0,0 +1,47 @@
+# OLMv1 Package
+
+This package provides components and utilities for OLMv1 (Operator Lifecycle Manager v1) catalog functionality.
+
+## Feature Flag
+
+The package exports a `FLAG_OLMV1_ENABLED` feature flag that mirrors the user's OLMv1 toggle switch setting.
+
+### Usage Example
+
+```typescript
+import { useFlag } from '@console/shared/src/hooks/flag';
+import { FLAG_OLMV1_ENABLED } from '@console/operator-lifecycle-manager-v1/src/const';
+
+const MyComponent = () => {
+  const olmv1Enabled = useFlag(FLAG_OLMV1_ENABLED);
+
+  return (
+    <div>
+      {olmv1Enabled && <OLMv1SpecificFeature />}
+    </div>
+  );
+};
+```
+
+### In Console Extensions
+
+You can also use the flag in `console-extensions.json`:
+
+```json
+{
+  "type": "console.some-extension-type",
+  "properties": {
+    ...
+  },
+  "flags": {
+    "required": ["OLMV1_ENABLED"]
+  }
+}
+```
+
+This flag is automatically synchronized with the user setting `console.olmv1.enabled` which can be controlled through:
+
+1. **User Preferences**: Navigate to User Preferences → Operators → Enable OLMv1 catalog
+2. **Catalog Toolbar Toggle**: Use the toggle switch in the Developer Catalog when viewing operators
+
+Both controls are synchronized and modify the same user setting, ensuring a consistent experience across the console.