Merge pull request #723 from mbaldessari/ui-variants

Implement variants UI support

Author: openshift-merge-bot[bot]

console/locales/en/plugin__patterns-operator-console-plugin.json

@@ -8,6 +8,7 @@
   "Back to catalog": "Back to catalog",
   "Cancel": "Cancel",
   "Catalog": "Catalog",
+  "Catalog logo": "Catalog logo",
   "Catalog source": "Catalog source",
   "Checking vault status": "Checking vault status",
   "Cluster": "Cluster",
@@ -22,7 +23,6 @@
   "Enter manual value": "Enter manual value",
   "Enter or update the secrets that will be injected into Vault for this pattern. Fields left empty will retain their existing values in Vault.": "Enter or update the secrets that will be injected into Vault for this pattern. Fields left empty will retain their existing values in Vault.",
   "Enter or update the secrets that will be injected into Vault for this pattern. File and INI fields must be uploaded each time. Other fields may be left empty to keep existing Vault values.": "Enter or update the secrets that will be injected into Vault for this pattern. File and INI fields must be uploaded each time. Other fields may be left empty to keep existing Vault values.",
-  "Enter value for {{fieldName}}": "Enter value for {{fieldName}}",
   "Error": "Error",
   "Extracted value preview": "Extracted value preview",
   "Failed to create pattern": "Failed to create pattern",
@@ -64,7 +64,6 @@
   "Pattern Status": "Pattern Status",
   "Pattern successfully removed": "Pattern successfully removed",
   "Patterns": "Patterns",
-  "Please provide a value for this required field": "Please provide a value for this required field",
   "Reconciliation complete. Redirecting to catalog...": "Reconciliation complete. Redirecting to catalog...",
   "Reconciliation complete. Waiting for secret injection to finish...": "Reconciliation complete. Waiting for secret injection to finish...",
   "Reconciliation Status": "Reconciliation Status",
@@ -76,6 +75,7 @@
   "Secrets submitted successfully": "Secrets submitted successfully",
   "Select a section": "Select a section",
   "Select INI section": "Select INI section",
+  "Select variant": "Select variant",
   "Spoke": "Spoke",
   "Static value": "Static value",
   "Sync": "Sync",
@@ -85,14 +85,14 @@
   "Tested Requirements:": "Tested Requirements:",
   "The pattern and all its associated resources have been fully deleted.": "The pattern and all its associated resources have been fully deleted.",
   "The vault injection job has been created.": "The vault injection job has been created.",
-  "This field is required": "This field is required",
   "This is the sizing that has been tested. The pattern is expected to work on any similarly-sized architecture.": "This is the sizing that has been tested. The pattern is expected to work on any similarly-sized architecture.",
   "This pattern does not have a secret template defined.": "This pattern does not have a secret template defined.",
   "This will delete the pattern and all its deployed resources.": "This will delete the pattern and all its deployed resources.",
   "Tier": "Tier",
   "Uninstall": "Uninstall",
   "Uninstall Pattern": "Uninstall Pattern",
   "Upload an INI/configuration file to extract values": "Upload an INI/configuration file to extract values",
+  "Variant": "Variant",
   "Vault policy: {{policy}}": "Vault policy: {{policy}}",
   "Vault Secret Injection": "Vault Secret Injection",
   "Waiting for applications": "Waiting for applications",

console/src/components/InstallPatternPage.tsx

@@ -17,6 +17,8 @@ import {
   DescriptionListTerm,
   Form,
   FormGroup,
+  FormSelect,
+  FormSelectOption,
   Label,
   PageSection,
   Spinner,
@@ -39,7 +41,7 @@ import {
   getMissingFileAndIniFields,
   secretTemplateHasFileOrIniFields,
 } from '../vaultSecrets';
-import { SecretTemplate, SecretFormData } from '../types';
+import { SecretTemplate, SecretFormData, Variant } from '../types';
 import { SecretFormExpandableSections } from './SecretForm/SecretFormExpandableSections';
 import { VaultInjectionStatusAlert } from './SecretForm/VaultInjectionStatusAlert';
 import './SecretForm/SecretForm.css';
@@ -73,6 +75,7 @@ export default function InstallPatternPage() {
   const [useOwnFork, setUseOwnFork] = React.useState(false);
   const [targetRevision, setTargetRevision] = React.useState('main');
   const [clusterGroupName, setClusterGroupName] = React.useState('hub');
+  const [variants, setVariants] = React.useState<Variant[]>([]);
 
   const [secretTemplate, setSecretTemplate] = React.useState<SecretTemplate | null>(null);
   const [secretFormData, setSecretFormData] = React.useState<SecretFormData>({});
@@ -94,7 +97,14 @@ export default function InstallPatternPage() {
         });
 
         setPatternName(patternData.name);
-        setClusterGroupName(patternData.clustergroupname);
+        if (patternData.variants && patternData.variants.length > 0) {
+          setVariants(patternData.variants);
+          const defaultVariant =
+            patternData.variants.find((v) => v.default) || patternData.variants[0];
+          setClusterGroupName(defaultVariant.name);
+        } else {
+          setClusterGroupName(patternData.clustergroupname);
+        }
         setTargetRepo(patternData.repo_url || '');
         // Only use the template if it has actual secrets defined
         const hasSecrets = template && template.secrets && template.secrets.length > 0;
@@ -574,6 +584,25 @@ export default function InstallPatternPage() {
               />
             </FormGroup>
 
+            {variants.length > 1 && (
+              <FormGroup label={t('Variant')} isRequired fieldId="pattern-variant">
+                <FormSelect
+                  id="pattern-variant"
+                  value={clusterGroupName}
+                  onChange={(_event, value) => setClusterGroupName(value)}
+                  aria-label={t('Select variant')}
+                >
+                  {variants.map((v) => (
+                    <FormSelectOption
+                      key={v.name}
+                      value={v.name}
+                      label={v.description ? `${v.name} — ${v.description}` : v.name}
+                    />
+                  ))}
+                </FormSelect>
+              </FormGroup>
+            )}
+
             {/* Secrets Configuration Section */}
             {secretTemplate && (
               <FormGroup label={t('Secrets Configuration')} fieldId="pattern-secrets">

console/src/components/PatternCatalogPage.tsx

@@ -488,9 +488,7 @@ export default function PatternCatalogPage() {
                           <Button
                             variant="secondary"
                             onClick={() =>
-                              navigate(
-                                `/patterns/secrets/${pattern.catalogKey || pattern.name}`,
-                              )
+                              navigate(`/patterns/secrets/${pattern.catalogKey || pattern.name}`)
                             }
                           >
                             {t('Manage Secrets')}
@@ -515,9 +513,7 @@ export default function PatternCatalogPage() {
                               variant="primary"
                               isDisabled={isDisabled}
                               onClick={() =>
-                                navigate(
-                                  `/patterns/install/${pattern.catalogKey || pattern.name}`,
-                                )
+                                navigate(`/patterns/install/${pattern.catalogKey || pattern.name}`)
                               }
                             >
                               {t('Install')}

console/src/types.ts

@@ -29,6 +29,12 @@ export interface ExternalRequirements {
   cluster_sizing_note?: string;
 }
 
+export interface Variant {
+  name: string;
+  default?: boolean;
+  description?: string;
+}
+
 export interface Pattern {
   metadata_version: string;
   name: string;
@@ -49,6 +55,7 @@ export interface Pattern {
   extra_features?: ExtraFeatures;
   external_requirements?: ExternalRequirements;
   logo?: string;
+  variants?: Variant[];
   /** The catalog directory key used to fetch this pattern. */
   catalogKey?: string;
 }