@codemation/next-host 0.0.1

package/src/features/credentials/components/CredentialConfirmDialog.tsx

@@ -0,0 +1,58 @@
+"use client";
+
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { CodemationDialog } from "@/components/CodemationDialog";
+
+export type CredentialConfirmVariant = "danger" | "primary";
+
+export type CredentialConfirmDialogProps = {
+  title: string;
+  testId: string;
+  cancelTestId: string;
+  confirmTestId: string;
+  confirmLabel: string;
+  confirmVariant: CredentialConfirmVariant;
+  onCancel: () => void;
+  onConfirm: () => void;
+  children: ReactNode;
+};
+
+export function CredentialConfirmDialog({
+  title,
+  testId,
+  cancelTestId,
+  confirmTestId,
+  confirmLabel,
+  confirmVariant,
+  onCancel,
+  onConfirm,
+  children,
+}: CredentialConfirmDialogProps) {
+  return (
+    <CodemationDialog
+      onClose={onCancel}
+      testId={testId}
+      role="alertdialog"
+      size="narrow"
+      contentClassName="max-h-[min(70vh,480px)]"
+    >
+      <CodemationDialog.Title>{title}</CodemationDialog.Title>
+      <CodemationDialog.Content>{children}</CodemationDialog.Content>
+      <CodemationDialog.Actions>
+        <Button type="button" variant="outline" data-testid={cancelTestId} onClick={onCancel}>
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant={confirmVariant === "danger" ? "destructive" : "default"}
+          data-testid={confirmTestId}
+          onClick={onConfirm}
+        >
+          {confirmLabel}
+        </Button>
+      </CodemationDialog.Actions>
+    </CodemationDialog>
+  );
+}

package/src/features/credentials/components/CredentialDialog.tsx

@@ -0,0 +1,252 @@
+"use client";
+
+import type { CredentialFieldSchema, CredentialTypeDefinition } from "@codemation/core/browser";
+import { useEffect, useMemo } from "react";
+import type { Dispatch, SetStateAction } from "react";
+
+import { FlaskConical, PlusCircle, Save, X } from "lucide-react";
+
+import { Button } from "@/components/ui/button";
+import { CodemationDialog } from "@/components/CodemationDialog";
+import type { CredentialInstanceDto } from "../../workflows/hooks/realtime/realtime";
+import type { FormSourceKind } from "../lib/credentialFormTypes";
+import { isCredentialFieldLockedByEnv } from "../lib/credentialFieldHelpers";
+import { CredentialDialogFeedback } from "./CredentialDialogFeedback";
+import { CredentialDialogFieldRows } from "./CredentialDialogFieldRows";
+import { CredentialDialogFormSections } from "./CredentialDialogFormSections";
+
+export type CredentialDialogProps = {
+  mode: "create" | "edit";
+  credentialTypes: ReadonlyArray<CredentialTypeDefinition>;
+  typesLoading: boolean;
+  typesError: boolean;
+  typesEmpty: boolean;
+  selectedTypeId: string;
+  setSelectedTypeId: (v: string) => void;
+  displayName: string;
+  setDisplayName: (v: string) => void;
+  sourceKind: FormSourceKind;
+  setSourceKind: (v: FormSourceKind) => void;
+  publicFieldValues: Record<string, string>;
+  setPublicFieldValues: Dispatch<SetStateAction<Record<string, string>>>;
+  secretFieldValues: Record<string, string>;
+  setSecretFieldValues: Dispatch<SetStateAction<Record<string, string>>>;
+  envRefValues: Record<string, string>;
+  setEnvRefValues: Dispatch<SetStateAction<Record<string, string>>>;
+  showSecrets: boolean;
+  setShowSecrets: Dispatch<SetStateAction<boolean>>;
+  oauth2RedirectUri: string;
+  isLoadingOauth2RedirectUri: boolean;
+  secretsLoading?: boolean;
+  editingInstance: CredentialInstanceDto | null | undefined;
+  errorMessage: string | null;
+  dialogTestResult: { status: string; message?: string } | null;
+  isSubmitting: boolean;
+  isDialogTesting: boolean;
+  onCreate: () => Promise<void>;
+  onUpdate: () => Promise<void>;
+  onTest: () => Promise<void>;
+  onConnectOAuth2: () => Promise<void>;
+  onDisconnectOAuth2: () => void;
+  onClose: () => void;
+  credentialFieldEnvStatus?: Readonly<Record<string, boolean>>;
+};
+
+export function CredentialDialog({
+  mode,
+  credentialTypes,
+  typesLoading,
+  typesError,
+  typesEmpty,
+  selectedTypeId,
+  setSelectedTypeId,
+  displayName,
+  setDisplayName,
+  sourceKind,
+  setSourceKind,
+  publicFieldValues,
+  setPublicFieldValues,
+  secretFieldValues,
+  setSecretFieldValues,
+  envRefValues,
+  setEnvRefValues,
+  showSecrets,
+  setShowSecrets,
+  oauth2RedirectUri,
+  isLoadingOauth2RedirectUri,
+  secretsLoading = false,
+  editingInstance,
+  errorMessage,
+  dialogTestResult,
+  isSubmitting,
+  isDialogTesting,
+  onCreate,
+  onUpdate,
+  onTest,
+  onConnectOAuth2,
+  onDisconnectOAuth2,
+  onClose,
+  credentialFieldEnvStatus = {},
+}: CredentialDialogProps) {
+  const selectedType = credentialTypes.find((t) => t.typeId === selectedTypeId);
+  const activeType =
+    mode === "edit" && editingInstance
+      ? credentialTypes.find((t) => t.typeId === editingInstance.typeId)
+      : selectedType;
+  const publicFields = (activeType?.publicFields ?? []) as ReadonlyArray<CredentialFieldSchema>;
+  const secretFields = (activeType?.secretFields ?? []) as ReadonlyArray<CredentialFieldSchema>;
+  const isOAuth2Type = activeType?.auth?.kind === "oauth2";
+  const orderedFields = [
+    ...publicFields.map((field, index) => ({
+      kind: "public" as const,
+      field,
+      order: field.order ?? index,
+    })),
+    ...secretFields.map((field, index) => ({
+      kind: "secret" as const,
+      field,
+      order: field.order ?? publicFields.length + index,
+    })),
+  ].sort((left, right) => left.order - right.order);
+
+  const isEdit = mode === "edit";
+  const isTypeLocked = isEdit && editingInstance != null;
+  const isDbSecretSource = isEdit ? editingInstance?.sourceKind === "db" : sourceKind === "db";
+  const hasVisiblePasswordSecretField = useMemo(() => {
+    let hasVisible = false;
+    for (const field of secretFields) {
+      if (field.type !== "password") {
+        continue;
+      }
+      if (isCredentialFieldLockedByEnv(field, credentialFieldEnvStatus)) {
+        continue;
+      }
+      hasVisible = true;
+      break;
+    }
+    return hasVisible;
+  }, [secretFields, credentialFieldEnvStatus]);
+  const canToggleSecrets = isDbSecretSource && hasVisiblePasswordSecretField;
+
+  useEffect(() => {
+    if (isEdit && editingInstance) {
+      setDisplayName(editingInstance.displayName);
+    }
+  }, [isEdit, editingInstance?.instanceId, editingInstance?.displayName, setDisplayName]);
+
+  const canSubmit =
+    !isSubmitting &&
+    displayName.trim().length > 0 &&
+    !publicFields.some(
+      (field) =>
+        field.required &&
+        !isCredentialFieldLockedByEnv(field, credentialFieldEnvStatus) &&
+        !(publicFieldValues[field.key] ?? "").trim(),
+    ) &&
+    (isEdit
+      ? true
+      : Boolean(selectedTypeId) &&
+        (sourceKind === "db"
+          ? !secretFields.some(
+              (f) =>
+                f.required &&
+                !isCredentialFieldLockedByEnv(f, credentialFieldEnvStatus) &&
+                !(secretFieldValues[f.key] ?? "").trim(),
+            )
+          : !secretFields.some(
+              (f) =>
+                f.required &&
+                !isCredentialFieldLockedByEnv(f, credentialFieldEnvStatus) &&
+                !(envRefValues[f.key] ?? "").trim(),
+            )));
+  const canTest = !isSubmitting && !isDialogTesting && (isEdit || canSubmit);
+
+  const handleSubmit = () => {
+    if (isEdit) void onUpdate();
+    else void onCreate();
+  };
+
+  return (
+    <CodemationDialog onClose={onClose} testId="credential-dialog" size="wide">
+      <CodemationDialog.Title>{isEdit ? "Edit credential" : "Add credential"}</CodemationDialog.Title>
+      <CodemationDialog.Content>
+        <CredentialDialogFormSections
+          credentialTypes={credentialTypes}
+          typesLoading={typesLoading}
+          typesError={typesError}
+          typesEmpty={typesEmpty}
+          selectedTypeId={selectedTypeId}
+          setSelectedTypeId={setSelectedTypeId}
+          displayName={displayName}
+          setDisplayName={setDisplayName}
+          sourceKind={sourceKind}
+          setSourceKind={setSourceKind}
+          isEdit={isEdit}
+          isTypeLocked={isTypeLocked}
+          canToggleSecrets={canToggleSecrets}
+          showSecrets={showSecrets}
+          setShowSecrets={setShowSecrets}
+          secretsLoading={secretsLoading}
+          isOAuth2Type={isOAuth2Type}
+          oauth2RedirectUri={oauth2RedirectUri}
+          isLoadingOauth2RedirectUri={isLoadingOauth2RedirectUri}
+          editingInstance={editingInstance}
+          canSubmit={canSubmit}
+          onConnectOAuth2={onConnectOAuth2}
+          onDisconnectOAuth2={onDisconnectOAuth2}
+        />
+        <CredentialDialogFieldRows
+          orderedFields={orderedFields}
+          publicFieldValues={publicFieldValues}
+          setPublicFieldValues={setPublicFieldValues}
+          secretFieldValues={secretFieldValues}
+          setSecretFieldValues={setSecretFieldValues}
+          envRefValues={envRefValues}
+          setEnvRefValues={setEnvRefValues}
+          isEdit={isEdit}
+          isDbSecretSource={isDbSecretSource}
+          showSecrets={showSecrets}
+          credentialFieldEnvStatus={credentialFieldEnvStatus}
+        />
+        <CredentialDialogFeedback errorMessage={errorMessage} dialogTestResult={dialogTestResult} />
+      </CodemationDialog.Content>
+      <CodemationDialog.Actions>
+        <Button type="button" variant="outline" className="gap-1.5" onClick={onClose}>
+          <X className="size-4 shrink-0" aria-hidden />
+          Cancel
+        </Button>
+        <Button
+          type="button"
+          variant="secondary"
+          className="gap-1.5"
+          data-testid="credential-test-button"
+          disabled={!canTest}
+          onClick={() => void onTest()}
+        >
+          <span className="inline-flex items-center gap-1.5">
+            <FlaskConical className="size-4 shrink-0" aria-hidden />
+            <span className="leading-none">{isDialogTesting ? "Testing…" : "Test"}</span>
+          </span>
+        </Button>
+        <Button
+          type="button"
+          className="gap-1.5"
+          data-testid={isEdit ? "credential-save-button" : "credential-create-button"}
+          disabled={!canSubmit}
+          onClick={handleSubmit}
+        >
+          <span className="inline-flex items-center gap-1.5">
+            {isEdit ? (
+              <Save className="size-4 shrink-0" aria-hidden />
+            ) : (
+              <PlusCircle className="size-4 shrink-0" aria-hidden />
+            )}
+            <span className="leading-none">
+              {isSubmitting ? (isEdit ? "Saving…" : "Creating…") : isEdit ? "Save" : "Create"}
+            </span>
+          </span>
+        </Button>
+      </CodemationDialog.Actions>
+    </CodemationDialog>
+  );
+}

package/src/features/credentials/components/CredentialDialogFeedback.tsx

@@ -0,0 +1,36 @@
+"use client";
+
+import { Alert, AlertDescription } from "@/components/ui/alert";
+import { Badge } from "@/components/ui/badge";
+import { cn } from "@/lib/utils";
+
+export type CredentialDialogFeedbackProps = {
+  errorMessage: string | null;
+  dialogTestResult: { status: string; message?: string } | null;
+};
+
+export function CredentialDialogFeedback({ errorMessage, dialogTestResult }: CredentialDialogFeedbackProps) {
+  return (
+    <>
+      {errorMessage && (
+        <Alert variant="destructive" data-testid="credentials-error">
+          <AlertDescription>{errorMessage}</AlertDescription>
+        </Alert>
+      )}
+      {dialogTestResult && (
+        <Badge
+          variant={dialogTestResult.status === "healthy" ? "secondary" : "destructive"}
+          data-testid="credential-dialog-test-result"
+          className={cn(
+            "h-auto min-h-8 whitespace-normal px-2.5 py-1.5 text-left font-normal",
+            dialogTestResult.status === "healthy" &&
+              "border-emerald-500/30 bg-emerald-500/10 text-emerald-900 dark:text-emerald-200",
+          )}
+        >
+          {dialogTestResult.status === "healthy" ? "Healthy" : "Failing"}
+          {dialogTestResult.message ? `: ${dialogTestResult.message}` : ""}
+        </Badge>
+      )}
+    </>
+  );
+}

package/src/features/credentials/components/CredentialDialogFieldRows.tsx

@@ -0,0 +1,257 @@
+"use client";
+
+import type { CredentialFieldSchema } from "@codemation/core/browser";
+import type { Dispatch, SetStateAction } from "react";
+
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
+import { CredentialEnvFieldStatusRow } from "./CredentialEnvFieldStatusRow";
+import { CredentialFieldCopyButton } from "./CredentialFieldCopyButton";
+import { isCredentialFieldLockedByEnv, maskedDisplayValue } from "../lib/credentialFieldHelpers";
+
+export type CredentialDialogOrderedField =
+  | { kind: "public"; field: CredentialFieldSchema; order: number }
+  | { kind: "secret"; field: CredentialFieldSchema; order: number };
+
+export type CredentialDialogFieldRowsProps = {
+  orderedFields: ReadonlyArray<CredentialDialogOrderedField>;
+  publicFieldValues: Record<string, string>;
+  setPublicFieldValues: Dispatch<SetStateAction<Record<string, string>>>;
+  secretFieldValues: Record<string, string>;
+  setSecretFieldValues: Dispatch<SetStateAction<Record<string, string>>>;
+  envRefValues: Record<string, string>;
+  setEnvRefValues: Dispatch<SetStateAction<Record<string, string>>>;
+  isEdit: boolean;
+  isDbSecretSource: boolean;
+  showSecrets: boolean;
+  credentialFieldEnvStatus: Readonly<Record<string, boolean>>;
+};
+
+function envVarNameTrimmed(field: CredentialFieldSchema): string | undefined {
+  const n = field.envVarName?.trim();
+  return n && n.length > 0 ? n : undefined;
+}
+
+function isEnvMissingInHost(
+  field: CredentialFieldSchema,
+  credentialFieldEnvStatus: Readonly<Record<string, boolean>>,
+): boolean {
+  const name = envVarNameTrimmed(field);
+  if (!name) {
+    return false;
+  }
+  return credentialFieldEnvStatus[name] === false;
+}
+
+export function CredentialDialogFieldRows({
+  orderedFields,
+  publicFieldValues,
+  setPublicFieldValues,
+  secretFieldValues,
+  setSecretFieldValues,
+  envRefValues,
+  setEnvRefValues,
+  isEdit,
+  isDbSecretSource,
+  showSecrets,
+  credentialFieldEnvStatus,
+}: CredentialDialogFieldRowsProps) {
+  return (
+    <>
+      {orderedFields.map(({ kind, field }) => {
+        const lockedByEnv = isCredentialFieldLockedByEnv(field, credentialFieldEnvStatus);
+        const envMissing = isEnvMissingInHost(field, credentialFieldEnvStatus);
+        /** Red "not set in host" notice is only relevant when editing an existing credential. */
+        const showEnvMissingNotice = isEdit && envMissing;
+        const showFieldInputs = !lockedByEnv;
+        const copyValue = field.copyValue?.trim();
+        const showCopy = Boolean(copyValue && showFieldInputs);
+
+        if (kind === "public") {
+          const id = `credential-public-${field.key}`;
+          return (
+            <div key={`public-${field.key}`} className="flex flex-col gap-2">
+              <div className="flex flex-wrap items-center justify-between gap-2">
+                <Label htmlFor={showFieldInputs ? id : undefined}>
+                  {field.label}
+                  {field.required ? " *" : ""}
+                </Label>
+                {showCopy && copyValue ? (
+                  <CredentialFieldCopyButton
+                    value={copyValue}
+                    label={field.copyButtonLabel}
+                    testId={`credential-field-copy-${field.key}`}
+                  />
+                ) : null}
+              </div>
+              {lockedByEnv && envVarNameTrimmed(field) ? (
+                <div data-testid={`credential-public-${field.key}`}>
+                  <CredentialEnvFieldStatusRow
+                    kind="managed"
+                    envVarName={envVarNameTrimmed(field)!}
+                    fieldKey={field.key}
+                  />
+                </div>
+              ) : null}
+              {showEnvMissingNotice && envVarNameTrimmed(field) ? (
+                <CredentialEnvFieldStatusRow
+                  kind="missing"
+                  envVarName={envVarNameTrimmed(field)!}
+                  fieldKey={field.key}
+                />
+              ) : null}
+              {showFieldInputs ? (
+                field.type === "textarea" ? (
+                  <Textarea
+                    id={id}
+                    data-testid={`credential-public-${field.key}`}
+                    rows={4}
+                    value={publicFieldValues[field.key] ?? ""}
+                    onChange={(e) => setPublicFieldValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                    placeholder={field.placeholder}
+                  />
+                ) : (
+                  <Input
+                    id={id}
+                    data-testid={`credential-public-${field.key}`}
+                    type={field.type === "password" ? "password" : "text"}
+                    value={publicFieldValues[field.key] ?? ""}
+                    onChange={(e) => setPublicFieldValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                    placeholder={field.placeholder}
+                  />
+                )
+              ) : null}
+              {showFieldInputs && field.helpText ? (
+                <span className="text-xs text-muted-foreground">{field.helpText}</span>
+              ) : null}
+            </div>
+          );
+        }
+
+        if (isDbSecretSource) {
+          const raw = secretFieldValues[field.key] ?? "";
+          const isMasked = isEdit && field.type === "password" && !showSecrets && raw.length > 0;
+          const displayValue = isMasked ? maskedDisplayValue() : raw;
+          const id = `credential-secret-${field.key}`;
+          return (
+            <div key={`secret-${field.key}`} className="flex flex-col gap-2">
+              <div className="flex flex-wrap items-center justify-between gap-2">
+                <Label htmlFor={showFieldInputs ? id : undefined}>
+                  {field.label}
+                  {field.required ? " *" : ""}
+                </Label>
+                {showCopy && copyValue ? (
+                  <CredentialFieldCopyButton
+                    value={copyValue}
+                    label={field.copyButtonLabel}
+                    testId={`credential-field-copy-${field.key}`}
+                  />
+                ) : null}
+              </div>
+              {lockedByEnv && envVarNameTrimmed(field) ? (
+                <div data-testid={`credential-secret-${field.key}`}>
+                  <CredentialEnvFieldStatusRow
+                    kind="managed"
+                    envVarName={envVarNameTrimmed(field)!}
+                    fieldKey={field.key}
+                  />
+                </div>
+              ) : null}
+              {showEnvMissingNotice && envVarNameTrimmed(field) ? (
+                <CredentialEnvFieldStatusRow
+                  kind="missing"
+                  envVarName={envVarNameTrimmed(field)!}
+                  fieldKey={field.key}
+                />
+              ) : null}
+              {showFieldInputs ? (
+                field.type === "textarea" ? (
+                  <Textarea
+                    id={id}
+                    data-testid={`credential-secret-${field.key}`}
+                    rows={4}
+                    value={displayValue}
+                    onChange={(e) => setSecretFieldValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                    readOnly={isMasked}
+                    placeholder={isEdit ? undefined : field.placeholder}
+                  />
+                ) : (
+                  <Input
+                    id={id}
+                    data-testid={`credential-secret-${field.key}`}
+                    type={
+                      showSecrets && field.type === "password"
+                        ? "text"
+                        : field.type === "password"
+                          ? "password"
+                          : "text"
+                    }
+                    value={displayValue}
+                    onChange={(e) => setSecretFieldValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                    readOnly={isMasked}
+                    placeholder={isEdit ? undefined : field.placeholder}
+                  />
+                )
+              ) : null}
+              {showFieldInputs && field.helpText ? (
+                <span className="text-xs text-muted-foreground">{field.helpText}</span>
+              ) : null}
+              {isEdit && showFieldInputs && !lockedByEnv && (
+                <span className="text-xs text-muted-foreground">Leave blank to keep existing value</span>
+              )}
+            </div>
+          );
+        }
+
+        const displayEnv = envRefValues[field.key] ?? "";
+        const id = `credential-env-${field.key}`;
+        return (
+          <div key={`env-${field.key}`} className="flex flex-col gap-2">
+            <div className="flex flex-wrap items-center justify-between gap-2">
+              <Label htmlFor={showFieldInputs ? id : undefined}>
+                Env var for {field.label}
+                {field.required ? " *" : ""}
+              </Label>
+              {showCopy && copyValue ? (
+                <CredentialFieldCopyButton
+                  value={copyValue}
+                  label={field.copyButtonLabel}
+                  testId={`credential-field-copy-${field.key}`}
+                />
+              ) : null}
+            </div>
+            {lockedByEnv && envVarNameTrimmed(field) ? (
+              <div data-testid={`credential-env-${field.key}`}>
+                <CredentialEnvFieldStatusRow
+                  kind="managed"
+                  envVarName={envVarNameTrimmed(field)!}
+                  fieldKey={field.key}
+                />
+              </div>
+            ) : null}
+            {showEnvMissingNotice && envVarNameTrimmed(field) ? (
+              <CredentialEnvFieldStatusRow kind="missing" envVarName={envVarNameTrimmed(field)!} fieldKey={field.key} />
+            ) : null}
+            {showFieldInputs ? (
+              <Input
+                id={id}
+                data-testid={`credential-env-${field.key}`}
+                type="text"
+                value={displayEnv}
+                onChange={(e) => setEnvRefValues((prev) => ({ ...prev, [field.key]: e.target.value }))}
+                placeholder={isEdit ? undefined : (field.placeholder ?? `e.g. GMAIL_${field.key.toUpperCase()}`)}
+              />
+            ) : null}
+            {showFieldInputs && field.helpText ? (
+              <span className="text-xs text-muted-foreground">{field.helpText}</span>
+            ) : null}
+            {isEdit && showFieldInputs && !lockedByEnv && (
+              <span className="text-xs text-muted-foreground">Leave blank to keep existing value</span>
+            )}
+          </div>
+        );
+      })}
+    </>
+  );
+}