Add ClusterExtension creation page for OLMv1 catalog

Implements a custom create page for ClusterExtension resources that
pre-fills the YAML editor with operator details from the catalog.

When a user clicks "Install" on an operator in the Extension Catalog,
they are directed to a creation page with a YAML template pre-populated
with the selected operator's package name, version, and catalog source.

Changes:
- Add CreateClusterExtension component with query parameter support
- Add ClusterExtension and ClusterCatalog model definitions
- Update catalog item install URL to include query parameters
- Add console.resource/create extension for custom create page
- Expose CreateClusterExtension component in package exports

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <[email protected]>

Author: TheRealJon

frontend/packages/operator-lifecycle-manager-v1/console-extensions.json

@@ -101,5 +101,21 @@
     "flags": {
       "required": ["TECH_PREVIEW"]
     }
+  },
+  {
+    "type": "console.resource/create",
+    "properties": {
+      "model": {
+        "group": "olm.operatorframework.io",
+        "version": "v1",
+        "kind": "ClusterExtension"
+      },
+      "component": {
+        "$codeRef": "CreateClusterExtension"
+      }
+    },
+    "flags": {
+      "required": ["CLUSTER_EXTENSION_API"]
+    }
   }
 ]

frontend/packages/operator-lifecycle-manager-v1/package.json

@@ -8,7 +8,8 @@
     "exposedModules": {
       "useCatalogItems": "src/hooks/useCatalogItems.ts",
       "useCatalogCategories": "src/hooks/useCatalogCategories.ts",
-      "useOLMv1FlagProvider": "src/hooks/useOLMv1FlagProvider.ts"
+      "useOLMv1FlagProvider": "src/hooks/useOLMv1FlagProvider.ts",
+      "CreateClusterExtension": "src/components/cluster-extension/CreateClusterExtension.tsx"
     }
   }
 }

frontend/packages/operator-lifecycle-manager-v1/src/components/cluster-extension/CreateClusterExtension.tsx

@@ -0,0 +1,41 @@
+import * as React from 'react';
+import { useLocation } from 'react-router-dom-v5-compat';
+import { CreateYAML } from '@console/internal/components/create-yaml';
+import { ClusterExtensionModel } from '../../models';
+
+const CreateClusterExtension: React.FC = (props) => {
+  const location = useLocation();
+  const searchParams = new URLSearchParams(location.search);
+
+  // Get operator details from URL query parameters
+  const packageName = searchParams.get('packageName');
+  const version = searchParams.get('version');
+  const catalog = searchParams.get('catalog');
+
+  // Generate the YAML template based on the operator details
+  const template = React.useMemo(() => {
+    return `apiVersion: ${ClusterExtensionModel.apiGroup}/${ClusterExtensionModel.apiVersion}
+kind: ${ClusterExtensionModel.kind}
+metadata:
+  name: ${packageName || 'example'}
+spec:
+  namespace: ${packageName || '<operator-namespace>'}
+  serviceAccount:
+    name: ${packageName ? `${packageName}-service-account` : '<service-account-name>'}
+  source:
+    sourceType: Catalog
+    catalog:
+      packageName: ${packageName || '<package-name>'}\n
+      version : ${version || '<version>'}
+      selector:
+        matchLabels:
+          olm.operatorframework.io/metadata.name: ${catalog || '<cluster-catalog-name>'}
+`;
+  }, [packageName, version, catalog]);
+
+  return <CreateYAML {...(props as any)} template={template} />;
+};
+
+export default CreateClusterExtension;
+
+CreateClusterExtension.displayName = 'CreateClusterExtension';

frontend/packages/operator-lifecycle-manager-v1/src/models.ts

@@ -0,0 +1,31 @@
+import { K8sKind } from '@console/internal/module/k8s';
+
+export const ClusterExtensionModel: K8sKind = {
+  label: 'ClusterExtension',
+  labelKey: 'olm-v1~ClusterExtension',
+  labelPlural: 'ClusterExtensions',
+  labelPluralKey: 'olm-v1~ClusterExtensions',
+  apiVersion: 'v1',
+  apiGroup: 'olm.operatorframework.io',
+  plural: 'clusterextensions',
+  abbr: 'CE',
+  namespaced: false,
+  kind: 'ClusterExtension',
+  id: 'clusterextension',
+  crd: true,
+};
+
+export const ClusterCatalogModel: K8sKind = {
+  label: 'ClusterCatalog',
+  labelKey: 'olm-v1~ClusterCatalog',
+  labelPlural: 'ClusterCatalogs',
+  labelPluralKey: 'olm-v1~ClusterCatalogs',
+  apiVersion: 'v1',
+  apiGroup: 'olm.operatorframework.io',
+  plural: 'clustercatalogs',
+  abbr: 'CC',
+  namespaced: false,
+  kind: 'ClusterCatalog',
+  id: 'clustercatalog',
+  crd: true,
+};

frontend/packages/operator-lifecycle-manager-v1/src/utils/catalog-item.tsx

@@ -42,7 +42,13 @@ export const normalizeCatalogItem: NormalizeExtensionCatalogItem = (item) => {
   );
   const tags = (categories ?? []).map((cat) => cat.toLowerCase().trim()).filter(Boolean);
   const source = getClusterCatalogSource(catalog);
-  const installUrl = '/k8s/cluster/olm.operatorframework.io~v1~ClusterExtension/~new'; // TODO: build from model
+  // Build install URL with query parameters for pre-filling the ClusterExtension YAML
+  const installUrlParams = new URLSearchParams({
+    packageName: name,
+    ...(version && { version }),
+    catalog,
+  });
+  const installUrl = `/k8s/cluster/olm.operatorframework.io~v1~ClusterExtension/~new?${installUrlParams.toString()}`;
   return {
     attributes: {
       keywords,

frontend/public/locales/en/public.json

@@ -1689,6 +1689,22 @@
   "Exec command": "Exec command",
   "HTTP GET": "HTTP GET",
   "TCP socket (port)": "TCP socket (port)",
+  "Critical": "Critical",
+  "Info": "Info",
+  "Loading {{title}} status": "Loading {{title}} status",
+  "Waiting for the build": "Waiting for the build",
+  "graph timespan": "graph timespan",
+  "Reset zoom": "Reset zoom",
+  "Displaying with reduced resolution due to large dataset.": "Displaying with reduced resolution due to large dataset.",
+  "query browser chart": "query browser chart",
+  "Ungraphable results": "Ungraphable results",
+  "Query results include range vectors, which cannot be graphed. Try adding a function to transform the data.": "Query results include range vectors, which cannot be graphed. Try adding a function to transform the data.",
+  "Query result is a string, which cannot be graphed.": "Query result is a string, which cannot be graphed.",
+  "The resulting dataset is too large to graph.": "The resulting dataset is too large to graph.",
+  "Stacked": "Stacked",
+  "unknown host": "unknown host",
+  "Unknown user": "Unknown user",
+  "Just now": "Just now",
   "Delete {{label}} subject?": "Delete {{label}} subject?",
   "Are you sure you want to delete subject {{name}} of type {{kind}}?": "Are you sure you want to delete subject {{name}} of type {{kind}}?",
   "Impersonate {{kind}} \"{{name}}\"": "Impersonate {{kind}} \"{{name}}\"",
@@ -1725,22 +1741,6 @@
   "{{pluginName}} might have violated the Console Content Security Policy. Refer to the browser's console logs for details.": "{{pluginName}} might have violated the Console Content Security Policy. Refer to the browser's console logs for details.",
   "prometheusBaseURL not set": "prometheusBaseURL not set",
   "alertManagerBaseURL not set": "alertManagerBaseURL not set",
-  "Critical": "Critical",
-  "Info": "Info",
-  "Loading {{title}} status": "Loading {{title}} status",
-  "Waiting for the build": "Waiting for the build",
-  "graph timespan": "graph timespan",
-  "Reset zoom": "Reset zoom",
-  "Displaying with reduced resolution due to large dataset.": "Displaying with reduced resolution due to large dataset.",
-  "query browser chart": "query browser chart",
-  "Ungraphable results": "Ungraphable results",
-  "Query results include range vectors, which cannot be graphed. Try adding a function to transform the data.": "Query results include range vectors, which cannot be graphed. Try adding a function to transform the data.",
-  "Query result is a string, which cannot be graphed.": "Query result is a string, which cannot be graphed.",
-  "The resulting dataset is too large to graph.": "The resulting dataset is too large to graph.",
-  "Stacked": "Stacked",
-  "unknown host": "unknown host",
-  "Unknown user": "Unknown user",
-  "Just now": "Just now",
   "Disable": "Disable",
   "Disabled": "Disabled",
   "Enabled": "Enabled"

frontend/public/module/k8s/k8s.ts

@@ -27,7 +27,7 @@ export const getQN: (obj: K8sResourceKind) => string = (obj) => {
 export const getGroupVersionKind = (
   ref: GroupVersionKind | string,
 ): [string, string, string] | undefined => {
-  const parts = ref.split('~');
+  const parts = ref?.split('~') ?? [];
   if (parts.length !== 3) {
     return undefined;
   }