From 6a6b725f3ff242549921f2803af806e50c3b4231 Mon Sep 17 00:00:00 2001 From: Jon Jackson Date: Wed, 25 Feb 2026 15:25:21 -0500 Subject: [PATCH 1/2] CONSOLE-4978: Add Installed Software page with OLMv0 and OLMv1 tabs - Create InstalledSoftwarePage with tabbed interface showing: - Cluster extensions (OLMv1) tab with tech preview badge (default) - Operators (OLMv0) tab for legacy ClusterServiceVersions - Add ClusterExtensionListPage using ConsoleDataView pattern - Display ClusterExtensions with columns: Name, Status, Version, Channels, Namespace, Package - Filter cluster-scoped resources by spec.namespace in namespace contexts - Render channels as gray outline labels - Add delete action via default actions provider - Create shared OLMv1TechPreviewBadge component with info popover - Use outline variant for tech preview labels - Include popover explaining OLMv1 features - Share between catalog toolbar and installed software tab - Add showTitle prop to ClusterServiceVersionsPage to hide duplicate title in tab context - Update HorizontalNav to render badges in tab titles - Move InstalledSoftwarePage and navigation to operator-lifecycle-manager-v1 package - Add "Installed Software" navigation with OLMV1_ENABLED flag requirement Co-Authored-By: Claude Sonnet 4.5 --- .../console-extensions.json | 54 +++-- .../locales/en/olm-v1.json | 9 +- .../package.json | 4 +- .../providers/default-actions-provider.ts | 1 + .../src/components/OLMv1Switch.tsx | 26 +-- .../src/components/OLMv1TechPreviewBadge.tsx | 38 ++++ .../ClusterExtensionListPage.tsx | 208 ++++++++++++++++++ .../src/components/cluster-extension/index.ts | 5 + .../InstalledSoftwarePage.tsx | 54 +++++ .../src/types.ts | 34 +++ .../src/components/clusterserviceversion.tsx | 9 +- .../components/utils/horizontal-nav.tsx | 9 +- 12 files changed, 403 insertions(+), 48 deletions(-) create mode 100644 frontend/packages/operator-lifecycle-manager-v1/src/actions/providers/default-actions-provider.ts create mode 100644 frontend/packages/operator-lifecycle-manager-v1/src/components/OLMv1TechPreviewBadge.tsx create mode 100644 frontend/packages/operator-lifecycle-manager-v1/src/components/cluster-extension/ClusterExtensionListPage.tsx create mode 100644 frontend/packages/operator-lifecycle-manager-v1/src/components/cluster-extension/index.ts create mode 100644 frontend/packages/operator-lifecycle-manager-v1/src/components/installed-software/InstalledSoftwarePage.tsx diff --git a/frontend/packages/operator-lifecycle-manager-v1/console-extensions.json b/frontend/packages/operator-lifecycle-manager-v1/console-extensions.json index f1f3b5ad28c..25fb9676791 100644 --- a/frontend/packages/operator-lifecycle-manager-v1/console-extensions.json +++ b/frontend/packages/operator-lifecycle-manager-v1/console-extensions.json @@ -32,23 +32,6 @@ "flag": "CLUSTER_EXTENSION_API" } }, - { - "type": "console.navigation/resource-cluster", - "properties": { - "id": "installed-extensions", - "section": "ecosystem", - "name": "%olm-v1~Installed Operators%", - "model": { - "kind": "ClusterExtension", - "version": "v1", - "group": "olm.operatorframework.io" - }, - "startsWith": ["olm.operatorframework.io"] - }, - "flags": { - "required": ["CLUSTER_EXTENSION_API", "TECH_PREVIEW", "OLMV1_ENABLED"] - } - }, { "type": "console.catalog/item-provider", "properties": { @@ -117,5 +100,42 @@ "flags": { "required": ["CLUSTER_EXTENSION_API"] } + }, + { + "type": "console.action/resource-provider", + "properties": { + "model": { + "group": "olm.operatorframework.io", + "version": "v1", + "kind": "ClusterExtension" + }, + "provider": { "$codeRef": "defaultActionsProvider.useDefaultActionsProvider" } + } + }, + { + "type": "console.navigation/href", + "properties": { + "id": "installed-software", + "section": "ecosystem", + "name": "%olm-v1~Installed Software%", + "insertAfter": "developer-catalog", + "href": "/installed-software", + "namespaced": true, + "startsWith": ["installed-software"] + }, + "flags": { + "required": ["OLMV1_ENABLED"] + } + }, + { + "type": "console.page/route", + "properties": { + "exact": false, + "path": ["/installed-software/all-namespaces", "/installed-software/ns/:ns"], + "component": { "$codeRef": "installedSoftwarePage.default" } + }, + "flags": { + "required": ["OLMV1_ENABLED"] + } } ] diff --git a/frontend/packages/operator-lifecycle-manager-v1/locales/en/olm-v1.json b/frontend/packages/operator-lifecycle-manager-v1/locales/en/olm-v1.json index d61b0f1ff4d..aa11e8c5e3b 100644 --- a/frontend/packages/operator-lifecycle-manager-v1/locales/en/olm-v1.json +++ b/frontend/packages/operator-lifecycle-manager-v1/locales/en/olm-v1.json @@ -1,9 +1,9 @@ { - "Installed Operators": "Installed Operators", "Operators": "Operators", "OLMv1 Catalog": "OLMv1 Catalog", "Enable the OLMv1 catalog experience. OLMv1 is a technology preview feature that provides an updated operator catalog interface.": "Enable the OLMv1 catalog experience. OLMv1 is a technology preview feature that provides an updated operator catalog interface.", "Enable OLMv1 catalog": "Enable OLMv1 catalog", + "Installed Software": "Installed Software", "An error occurred creating the ClusterExtension: {{error}}": "An error occurred creating the ClusterExtension: {{error}}", "Name": "Name", "Package name": "Package name", @@ -43,17 +43,22 @@ "Package will only be resolved from specified catalogs.": "Package will only be resolved from specified catalogs.", "Create": "Create", "Cancel": "Cancel", + "Status": "Status", + "Package": "Package", + "ClusterExtensions": "ClusterExtensions", "Create ClusterExtension": "Create ClusterExtension", "Create a ClusterExtension to add functionality to your cluster. Operator Lifecycle Manager v1 manages ClusterExtensions.": "Create a ClusterExtension to add functionality to your cluster. Operator Lifecycle Manager v1 manages ClusterExtensions.", "An error occurred. Please try again.": "An error occurred. Please try again.", "Create ServiceAccount": "Create ServiceAccount", "An error occurred": "An error occurred", + "Cluster extensions (OLMv1)": "Cluster extensions (OLMv1)", + "Operators (OLMv0)": "Operators (OLMv0)", "Operator Lifecycle Management version 1": "Operator Lifecycle Management version 1", "Learn more about OLMv1": "Learn more about OLMv1", "With OLMv1, you'll get a much simpler API that's easier to work with and understand. Plus, you have more direct control over updates. You can define update ranges and decide exactly how they are rolled out.": "With OLMv1, you'll get a much simpler API that's easier to work with and understand. Plus, you have more direct control over updates. You can define update ranges and decide exactly how they are rolled out.", - "Lets you use OLMv1 (Tech Preview), a streamlined redesign of OLMv0. OLMv1 simplifies operator management with declarative APIs, enhanced security, and direct, GitOps-friendly control over upgrades.": "Lets you use OLMv1 (Tech Preview), a streamlined redesign of OLMv0. OLMv1 simplifies operator management with declarative APIs, enhanced security, and direct, GitOps-friendly control over upgrades.", "Enable OLMv1": "Enable OLMv1", "Toggle OLMv1 UI": "Toggle OLMv1 UI", + "Lets you use OLMv1 (Tech Preview), a streamlined redesign of OLMv0. OLMv1 simplifies operator management with declarative APIs, enhanced security, and direct, GitOps-friendly control over upgrades.": "Lets you use OLMv1 (Tech Preview), a streamlined redesign of OLMv0. OLMv1 simplifies operator management with declarative APIs, enhanced security, and direct, GitOps-friendly control over upgrades.", "Tech Preview": "Tech Preview", "OLMv1 information": "OLMv1 information" } \ No newline at end of file diff --git a/frontend/packages/operator-lifecycle-manager-v1/package.json b/frontend/packages/operator-lifecycle-manager-v1/package.json index c4c33f99af3..a3fdf2a964d 100644 --- a/frontend/packages/operator-lifecycle-manager-v1/package.json +++ b/frontend/packages/operator-lifecycle-manager-v1/package.json @@ -8,7 +8,9 @@ "useCatalogItems": "src/hooks/useCatalogItems.ts", "useCatalogCategories": "src/hooks/useCatalogCategories.ts", "useOLMv1FlagProvider": "src/hooks/useOLMv1FlagProvider.ts", - "CreateClusterExtension": "src/components/cluster-extension/CreateClusterExtension.tsx" + "CreateClusterExtension": "src/components/cluster-extension/CreateClusterExtension.tsx", + "defaultActionsProvider": "src/actions/providers/default-actions-provider.ts", + "installedSoftwarePage": "src/components/installed-software/InstalledSoftwarePage.tsx" } } } diff --git a/frontend/packages/operator-lifecycle-manager-v1/src/actions/providers/default-actions-provider.ts b/frontend/packages/operator-lifecycle-manager-v1/src/actions/providers/default-actions-provider.ts new file mode 100644 index 00000000000..869f068349e --- /dev/null +++ b/frontend/packages/operator-lifecycle-manager-v1/src/actions/providers/default-actions-provider.ts @@ -0,0 +1 @@ +export { useDefaultActionsProvider } from '@console/app/src/actions/providers/default-provider'; diff --git a/frontend/packages/operator-lifecycle-manager-v1/src/components/OLMv1Switch.tsx b/frontend/packages/operator-lifecycle-manager-v1/src/components/OLMv1Switch.tsx index 336ea269269..b884df18914 100644 --- a/frontend/packages/operator-lifecycle-manager-v1/src/components/OLMv1Switch.tsx +++ b/frontend/packages/operator-lifecycle-manager-v1/src/components/OLMv1Switch.tsx @@ -1,12 +1,12 @@ import { useCallback } from 'react'; import type { FC, FormEvent } from 'react'; -import { Button, Flex, FlexItem, Label, Popover, Switch } from '@patternfly/react-core'; -import { OutlinedQuestionCircleIcon } from '@patternfly/react-icons/dist/esm/icons/outlined-question-circle-icon'; +import { Flex, FlexItem, Switch } from '@patternfly/react-core'; import { useTranslation } from 'react-i18next'; import { FLAG_TECH_PREVIEW } from '@console/app/src/consts'; import { useFlag } from '@console/dynamic-plugin-sdk/src/utils/flags'; import { useUserSettings } from '@console/shared/src/hooks/useUserSettings'; import { OLMV1_ENABLED_USER_SETTING_KEY } from '../const'; +import { OLMv1TechPreviewBadge } from './OLMv1TechPreviewBadge'; /** * Toolbar component for toggling OLMv1 UI visibility in the operator catalog. @@ -28,14 +28,6 @@ export const OLMv1Switch: FC = () => { [setOlmv1Enabled], ); - const popoverContent = ( -
- {t( - 'olm-v1~Lets you use OLMv1 (Tech Preview), a streamlined redesign of OLMv0. OLMv1 simplifies operator management with declarative APIs, enhanced security, and direct, GitOps-friendly control over upgrades.', - )} -
- ); - return ( @@ -48,19 +40,7 @@ export const OLMv1Switch: FC = () => { /> - - - - -