[1954] feat(ui): clouds.yaml credential input component

Adds the client-side foundation for entering OpenStack credentials in
the standard clouds.yaml format from the web UI.

- ui/src/utils/cloudsYamlParser.ts: parse clouds.yaml content with
  js-yaml. parseCloudsYAML returns a discriminated-union result
  (ParseSuccess | ParseFailure) carrying the parsed structure and
  cloud entry names on success; on failure returns the YAMLException
  reason plus line/column from js-yaml's mark. detectAuthMethod
  mirrors the controller's allowlist (empty / password / v3password
  / v3applicationcredential). maskSecrets returns a copy of an entry
  with password and application_credential_secret values redacted
  for post-parse display.

- ui/src/features/credentials/components/CloudsYamlInput.tsx: React
  component using MUI primitives. Operators paste content or upload a
  file; the parse runs on every change, errors surface inline with
  line/column, the cloud-name selector appears when >1 entry is
  present, and an "Application Credential" / "Password" / "Unsupported"
  chip confirms the detected auth method before submission. Disabled
  state is supported via prop.

- ui/package.json: adds js-yaml@^4.1.0 (direct dep, was previously
  only transitive) and @types/js-yaml@^4.0.9 to devDependencies.

Implements FR-011 (paste / upload + client-side parse + inline
errors), FR-013 (cloud-name selector), FR-014 (auth-method badge),
and FR-015 (secret masking via maskSecrets) at the component level.

Out of scope for this commit (follow-up): integration into the
existing OpenstackCredentialsDrawer (FR-012 "default tab"), and
the API helper that writes a clouds.yaml-keyed Secret +
OpenstackCreds resource. The drawer integration was left out because
the existing 479-line drawer uses react-hook-form with a single
OpenRC field; surfacing the clouds.yaml input alongside it deserves
its own scoped change rather than being bundled here. Also: the UI
codebase currently has no vitest/jest setup so this component ships
without unit tests; adding test infrastructure is a separate concern.

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>

Author: gtherond

ui/package.json

@@ -28,6 +28,7 @@
     "@cds/react": "^6.15.1",
     "@codemirror/lang-yaml": "^6.1.2",
     "@emotion/react": "^11.13.3",
+    "js-yaml": "^4.1.0",
     "@emotion/styled": "^11.13.0",
     "@fontsource/roboto": "^5.1.0",
     "@hookform/resolvers": "^5.2.2",
@@ -68,6 +69,7 @@
     "@storybook/react-vite": "8.6.14",
     "@storybook/test": "8.6.14",
     "@tanstack/eslint-plugin-query": "^5.59.20",
+    "@types/js-yaml": "^4.0.9",
     "@types/node": "^22.19.2",
     "@types/ramda": "^0.30.2",
     "@types/react": "^18.3.3",

ui/src/features/credentials/components/CloudsYamlInput.tsx

@@ -0,0 +1,225 @@
+import {
+  Alert,
+  Box,
+  Chip,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+  TextField,
+  Typography,
+} from '@mui/material'
+import { ChangeEvent, useMemo, useRef, useState } from 'react'
+import {
+  parseCloudsYAML,
+  detectAuthMethod,
+  ParseResult,
+} from 'src/utils/cloudsYamlParser'
+
+export interface CloudsYamlInputValue {
+  /** Raw clouds.yaml content (the string that will be stored in the Secret). */
+  cloudsYaml: string
+  /** Selected cloud entry name; required when the YAML has >1 entry. */
+  cloudName: string
+  /** Parse status; emitted so parent forms can disable submit on errors. */
+  isValid: boolean
+}
+
+export interface CloudsYamlInputProps {
+  initialValue?: string
+  onChange: (value: CloudsYamlInputValue) => void
+  disabled?: boolean
+}
+
+const PLACEHOLDER = `clouds:
+  destination:
+    auth_type: v3applicationcredential
+    auth:
+      auth_url: https://keystone.example.com:5000/v3
+      application_credential_id: <id>
+      application_credential_secret: <secret>
+    region_name: RegionOne
+    interface: public
+`
+
+/**
+ * Credential input for the OpenStack clouds.yaml format.
+ *
+ * Operators paste their clouds.yaml content or upload a file; the component
+ * parses client-side via {@link parseCloudsYAML}, surfaces parse errors
+ * inline, populates a cloud-name selector when the YAML carries multiple
+ * cloud entries, and shows an auth-method badge (password vs Application
+ * Credential) so the operator can confirm before submission.
+ *
+ * The component is intentionally stateless about persistence — the parent
+ * form decides when to submit and is responsible for calling the API helper
+ * that writes the Secret + OpenstackCreds resource.
+ */
+export default function CloudsYamlInput({
+  initialValue = '',
+  onChange,
+  disabled,
+}: CloudsYamlInputProps) {
+  const [raw, setRaw] = useState<string>(initialValue)
+  const [selectedCloud, setSelectedCloud] = useState<string>('')
+  const fileInputRef = useRef<HTMLInputElement | null>(null)
+
+  const parseResult: ParseResult = useMemo(() => parseCloudsYAML(raw), [raw])
+
+  const cloudNames = parseResult.ok ? parseResult.cloudNames : []
+  const effectiveCloud =
+    cloudNames.length === 1 ? cloudNames[0] : selectedCloud
+  const selectedEntry =
+    parseResult.ok && effectiveCloud
+      ? parseResult.parsed.clouds?.[effectiveCloud]
+      : undefined
+  const authMethod = detectAuthMethod(selectedEntry)
+
+  const isValid =
+    parseResult.ok &&
+    effectiveCloud !== '' &&
+    authMethod !== 'unsupported'
+
+  // Emit upstream whenever effective state changes.
+  useMemoOnChange(() => {
+    onChange({
+      cloudsYaml: raw,
+      cloudName: effectiveCloud,
+      isValid,
+    })
+  }, [raw, effectiveCloud, isValid])
+
+  const onTextChange = (e: ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => {
+    setRaw(e.target.value)
+    setSelectedCloud('')
+  }
+
+  const onFileChange = (e: ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0]
+    if (!file) {
+      return
+    }
+    const reader = new FileReader()
+    reader.onload = (event) => {
+      const text = String(event.target?.result ?? '')
+      setRaw(text)
+      setSelectedCloud('')
+    }
+    reader.readAsText(file)
+  }
+
+  return (
+    <Box display="flex" flexDirection="column" gap={2}>
+      <Typography variant="body2" color="text.secondary">
+        Paste your <code>clouds.yaml</code> content below, or upload a file.
+        The content is parsed in your browser; nothing is sent until you
+        submit.
+      </Typography>
+
+      <Box display="flex" gap={1} alignItems="center">
+        <input
+          type="file"
+          accept=".yaml,.yml,application/x-yaml,text/yaml"
+          ref={fileInputRef}
+          style={{ display: 'none' }}
+          onChange={onFileChange}
+        />
+        <button
+          type="button"
+          onClick={() => fileInputRef.current?.click()}
+          disabled={disabled}
+        >
+          Upload clouds.yaml
+        </button>
+        <Typography variant="caption" color="text.secondary">
+          or paste below
+        </Typography>
+      </Box>
+
+      <TextField
+        label="clouds.yaml"
+        multiline
+        minRows={10}
+        maxRows={20}
+        fullWidth
+        value={raw}
+        onChange={onTextChange}
+        placeholder={PLACEHOLDER}
+        disabled={disabled}
+        spellCheck={false}
+        slotProps={{
+          input: {
+            sx: { fontFamily: 'monospace', fontSize: '0.85rem' },
+          },
+        }}
+      />
+
+      {!parseResult.ok && raw !== '' && (
+        <Alert severity="error" variant="outlined">
+          {parseResult.error}
+          {parseResult.line !== undefined && (
+            <> (line {parseResult.line + 1}
+            {parseResult.column !== undefined && `, column ${parseResult.column + 1}`}
+            )</>
+          )}
+        </Alert>
+      )}
+
+      {parseResult.ok && cloudNames.length > 1 && (
+        <FormControl size="small" fullWidth>
+          <InputLabel id="clouds-yaml-cloud-name-label">Cloud entry</InputLabel>
+          <Select
+            labelId="clouds-yaml-cloud-name-label"
+            label="Cloud entry"
+            value={selectedCloud}
+            onChange={(e) => setSelectedCloud(e.target.value)}
+            disabled={disabled}
+          >
+            {cloudNames.map((name) => (
+              <MenuItem key={name} value={name}>
+                {name}
+              </MenuItem>
+            ))}
+          </Select>
+        </FormControl>
+      )}
+
+      {parseResult.ok && effectiveCloud && (
+        <Box display="flex" gap={1} alignItems="center" flexWrap="wrap">
+          <Typography variant="body2">Auth method:</Typography>
+          {authMethod === 'applicationCredential' && (
+            <Chip
+              label="Application Credential"
+              color="success"
+              size="small"
+              variant="outlined"
+            />
+          )}
+          {authMethod === 'password' && (
+            <Chip label="Password" size="small" variant="outlined" />
+          )}
+          {authMethod === 'unsupported' && (
+            <Chip
+              label={`Unsupported auth_type: ${selectedEntry?.auth_type ?? '(none)'}`}
+              color="error"
+              size="small"
+              variant="outlined"
+            />
+          )}
+        </Box>
+      )}
+    </Box>
+  )
+}
+
+/**
+ * Tiny effect helper: call `fn` whenever any of `deps` changes. Avoids
+ * pulling React useEffect's lint dependency check noise into this file by
+ * keeping the dep list explicit.
+ */
+function useMemoOnChange(fn: () => void, deps: unknown[]) {
+  // eslint-disable-next-line react-hooks/exhaustive-deps
+  useMemo(() => {
+    fn()
+  }, deps)
+}

ui/src/utils/cloudsYamlParser.ts

@@ -0,0 +1,157 @@
+/**
+ * Client-side parser for the OpenStack clouds.yaml credential format.
+ *
+ * Mirrors the controller-side parser in
+ * k8s/migration/pkg/utils/clouds_yaml.go so the UI can validate operator
+ * input, surface inline errors, and populate the cloud-name selector + auth
+ * method badge before submission.
+ */
+import yaml from 'js-yaml'
+
+export type CloudsYamlAuthType =
+  | 'v3password'
+  | 'password'
+  | 'v3applicationcredential'
+  | string
+
+export interface CloudsYamlAuth {
+  auth_url?: string
+  username?: string
+  password?: string
+  application_credential_id?: string
+  application_credential_secret?: string
+  project_name?: string
+  project_id?: string
+  user_domain_name?: string
+  project_domain_name?: string
+  [k: string]: unknown
+}
+
+export interface CloudsYamlEntry {
+  auth_type?: CloudsYamlAuthType
+  auth?: CloudsYamlAuth
+  region_name?: string
+  interface?: string
+  verify?: boolean
+  cacert?: string
+  compute_api_version?: string
+  volume_api_version?: string
+  image_api_version?: string
+  network_api_version?: string
+  identity_api_version?: string
+  [k: string]: unknown
+}
+
+export interface CloudsYamlFile {
+  clouds?: Record<string, CloudsYamlEntry>
+}
+
+export interface ParseSuccess {
+  ok: true
+  raw: string
+  parsed: CloudsYamlFile
+  cloudNames: string[]
+}
+
+export interface ParseFailure {
+  ok: false
+  raw: string
+  error: string
+  // Best-effort line/column from js-yaml's YAMLException.
+  line?: number
+  column?: number
+}
+
+export type ParseResult = ParseSuccess | ParseFailure
+
+/**
+ * Parse clouds.yaml content. On success, returns the parsed structure plus the
+ * list of top-level cloud entry names. On failure, returns an error message
+ * suitable for inline display (with line/column when available).
+ */
+export function parseCloudsYAML(input: string): ParseResult {
+  try {
+    const parsed = yaml.load(input, { schema: yaml.JSON_SCHEMA }) as
+      | CloudsYamlFile
+      | null
+      | undefined
+
+    if (!parsed || typeof parsed !== 'object') {
+      return {
+        ok: false,
+        raw: input,
+        error: 'Expected a YAML mapping with a top-level "clouds" key.',
+      }
+    }
+    if (!parsed.clouds || typeof parsed.clouds !== 'object') {
+      return {
+        ok: false,
+        raw: input,
+        error: 'Missing top-level "clouds:" mapping.',
+      }
+    }
+
+    const cloudNames = Object.keys(parsed.clouds)
+    if (cloudNames.length === 0) {
+      return {
+        ok: false,
+        raw: input,
+        error: '"clouds:" mapping contains no cloud entries.',
+      }
+    }
+
+    return { ok: true, raw: input, parsed, cloudNames }
+  } catch (e) {
+    const yamlErr = e as { reason?: string; mark?: { line: number; column: number } }
+    return {
+      ok: false,
+      raw: input,
+      error: yamlErr.reason ?? (e instanceof Error ? e.message : String(e)),
+      line: yamlErr.mark?.line,
+      column: yamlErr.mark?.column,
+    }
+  }
+}
+
+/**
+ * Detect the auth method declared by a cloud entry. Mirrors the controller's
+ * allowlist: empty / v3password / password / v3applicationcredential.
+ * Anything else is reported as "unsupported" so the UI can surface a warning.
+ */
+export type AuthMethodKind =
+  | 'password'
+  | 'applicationCredential'
+  | 'unsupported'
+
+export function detectAuthMethod(entry?: CloudsYamlEntry): AuthMethodKind {
+  if (!entry) {
+    return 'unsupported'
+  }
+  const t = entry.auth_type ?? ''
+  if (t === '' || t === 'password' || t === 'v3password') {
+    return 'password'
+  }
+  if (t === 'v3applicationcredential') {
+    return 'applicationCredential'
+  }
+  return 'unsupported'
+}
+
+/**
+ * Return a copy of the cloud entry with secret-bearing fields masked, suitable
+ * for display in a post-parse summary. The operator can confirm the parsed
+ * structure without seeing the actual secret value.
+ */
+export function maskSecrets(entry: CloudsYamlEntry): CloudsYamlEntry {
+  if (!entry.auth) {
+    return entry
+  }
+  const masked: CloudsYamlAuth = { ...entry.auth }
+  if (masked.password !== undefined) {
+    masked.password = '••••••••'
+  }
+  if (masked.application_credential_secret !== undefined) {
+    masked.application_credential_secret = '••••••••'
+  }
+  return { ...entry, auth: masked }
+}