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/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;
   }