@gxp-dev/mod-ui 2.0.0

package/src/components/compositions/elements/option-select/IntegrationConnectorOption.test.ts

@@ -0,0 +1,257 @@
+import { describe, expect, it, vi } from "vitest"
+import { flushPromises, mount } from "@vue/test-utils"
+import type { Connector } from "@/definitions/shared/connector"
+import IntegrationConnectorOption from "./IntegrationConnectorOption.vue"
+
+const SAMPLE: Connector[] = [
+  {
+    id: "slack-1",
+    label: "Slack — Eng",
+    icon: "slack",
+    type: "slack",
+    status: "connected",
+  },
+  {
+    id: "sf-1",
+    label: "Salesforce Prod",
+    icon: "cloud",
+    type: "salesforce",
+    status: "disconnected",
+  },
+  {
+    id: "gh-1",
+    label: "GitHub",
+    icon: "github",
+    type: "github",
+    status: "error",
+  },
+]
+
+interface Deferred<T> {
+  promise: Promise<T>
+  resolve: (v: T) => void
+  reject: (e: unknown) => void
+}
+
+function withDefer<T>(): Deferred<T> {
+  let resolve!: (v: T) => void
+  let reject!: (e: unknown) => void
+  const promise = new Promise<T>((res, rej) => {
+    resolve = res
+    reject = rej
+  })
+  return { promise, resolve, reject }
+}
+
+interface ExposedApi {
+  refresh: () => Promise<void>
+  handleConnect: (id: string, event?: Event) => Promise<void>
+}
+
+describe("IntegrationConnectorOption (props-based composition)", () => {
+  describe("rendering", () => {
+    it("mounts without error", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "Connector", onLoadConnectors },
+      })
+      expect(wrapper.exists()).toBe(true)
+      await flushPromises()
+    })
+
+    it("renders the label via FieldFrame", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "Custom label", onLoadConnectors },
+      })
+      expect(wrapper.text()).toContain("Custom label")
+      await flushPromises()
+    })
+
+    it("renders help text", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", helpText: "Pick a connector", onLoadConnectors },
+      })
+      expect(wrapper.find("[data-testid='field-frame-help']").text()).toBe(
+        "Pick a connector",
+      )
+      await flushPromises()
+    })
+
+    it("renders errors from props", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", errors: ["Required"], onLoadConnectors },
+      })
+      expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(
+        true,
+      )
+      await flushPromises()
+    })
+
+    it("hides the label visually when hideLabel is true", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "Hidden", hideLabel: true, onLoadConnectors },
+      })
+      expect(
+        wrapper.find("[data-testid='field-frame-label-sr']").exists(),
+      ).toBe(true)
+      await flushPromises()
+    })
+  })
+
+  describe("loading lifecycle", () => {
+    it("calls onLoadConnectors on mount", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      mount(IntegrationConnectorOption, {
+        props: { label: "X", onLoadConnectors },
+      })
+      await flushPromises()
+      expect(onLoadConnectors).toHaveBeenCalledTimes(1)
+    })
+
+    it("shows the loader while the load promise is pending", async () => {
+      const deferred = withDefer<Connector[]>()
+      const onLoadConnectors = vi.fn(() => deferred.promise)
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", onLoadConnectors },
+      })
+      // onMounted refresh() runs synchronously then awaits — give Vue a
+      // tick so the isLoading=true write paints.
+      await wrapper.vm.$nextTick()
+      expect(wrapper.html()).toContain("integration-connector-option-loader")
+      deferred.resolve(SAMPLE)
+      await flushPromises()
+      expect(wrapper.html()).not.toContain(
+        "integration-connector-option-loader",
+      )
+    })
+
+    it("renders connectors after the load promise resolves", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue(SAMPLE)
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", onLoadConnectors },
+      })
+      await flushPromises()
+      const vm = wrapper.vm as unknown as ExposedApi
+      expect(typeof vm.refresh).toBe("function")
+      // The matching label appears in the placeholder when modelValue
+      // is set after load — covered in modelValue tests below.
+      expect(onLoadConnectors).toHaveBeenCalledTimes(1)
+    })
+
+    it("captures the error path when onLoadConnectors rejects", async () => {
+      const onLoadConnectors = vi
+        .fn()
+        .mockRejectedValueOnce(new Error("boom"))
+        .mockResolvedValueOnce(SAMPLE)
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", onLoadConnectors },
+      })
+      await flushPromises()
+      const vm = wrapper.vm as unknown as ExposedApi
+      await vm.refresh()
+      await flushPromises()
+      expect(onLoadConnectors).toHaveBeenCalledTimes(2)
+    })
+  })
+
+  describe("modelValue", () => {
+    it("forwards the matching connector label into the input placeholder", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue(SAMPLE)
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", modelValue: "sf-1", onLoadConnectors },
+      })
+      await flushPromises()
+      const input = wrapper.find(
+        "[data-testid='integration-connector-option-input']",
+      )
+      expect(input.attributes("placeholder")).toContain("Salesforce Prod")
+    })
+
+    it("emits update:modelValue when the Combobox selects a connector", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue(SAMPLE)
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", onLoadConnectors },
+      })
+      await flushPromises()
+      const combobox = wrapper.findComponent({ name: "Combobox" })
+      combobox.vm.$emit("update:modelValue", "slack-1")
+      await flushPromises()
+      expect(wrapper.emitted("update:modelValue")?.[0]).toEqual(["slack-1"])
+    })
+  })
+
+  describe("onConnect flow", () => {
+    it("calls onConnect with the connector id when handleConnect runs", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue(SAMPLE)
+      const onConnect = vi.fn().mockResolvedValue(undefined)
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", onLoadConnectors, onConnect },
+      })
+      await flushPromises()
+      const vm = wrapper.vm as unknown as ExposedApi
+      await vm.handleConnect("sf-1")
+      await flushPromises()
+      expect(onConnect).toHaveBeenCalledWith("sf-1")
+    })
+
+    it("re-runs onLoadConnectors after onConnect resolves", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue(SAMPLE)
+      const onConnect = vi.fn().mockResolvedValue(undefined)
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", onLoadConnectors, onConnect },
+      })
+      await flushPromises()
+      onLoadConnectors.mockClear()
+      const vm = wrapper.vm as unknown as ExposedApi
+      await vm.handleConnect("sf-1")
+      await flushPromises()
+      expect(onLoadConnectors).toHaveBeenCalledTimes(1)
+    })
+
+    it("does nothing on Connect when onConnect is not provided", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue(SAMPLE)
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", onLoadConnectors },
+      })
+      await flushPromises()
+      onLoadConnectors.mockClear()
+      const vm = wrapper.vm as unknown as ExposedApi
+      await vm.handleConnect("sf-1")
+      await flushPromises()
+      expect(onLoadConnectors).not.toHaveBeenCalled()
+    })
+  })
+
+  describe("forwarded props", () => {
+    it("renders the required asterisk through FieldFrame", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", required: true, onLoadConnectors },
+      })
+      expect(wrapper.html()).toContain("after:content-['*']")
+      await flushPromises()
+    })
+
+    it("accepts disabled without crashing", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", disabled: true, onLoadConnectors },
+      })
+      await flushPromises()
+      expect(wrapper.exists()).toBe(true)
+    })
+
+    it("accepts readonly without crashing", async () => {
+      const onLoadConnectors = vi.fn().mockResolvedValue([])
+      const wrapper = mount(IntegrationConnectorOption, {
+        props: { label: "X", readonly: true, onLoadConnectors },
+      })
+      await flushPromises()
+      expect(wrapper.exists()).toBe(true)
+    })
+  })
+})

package/src/components/compositions/elements/option-select/IntegrationConnectorOption.vue

@@ -0,0 +1,279 @@
+<script setup lang="ts">
+/**
+ * Props-driven integration-connector composition. Renders a Combobox of
+ * connectors the host supplies via `onLoadConnectors`. Each row shows
+ * the connector's lucide icon, label, type Badge and a status dot.
+ * When `onConnect` is supplied, a per-row Connect / Reconnect button
+ * surfaces for any connector with `status !== "connected"`.
+ *
+ *   <IntegrationConnectorOption
+ *     v-model="connectorId"
+ *     label="Connector"
+ *     :on-load-connectors="() => fetch('/connectors').then((r) => r.json())"
+ *     :on-connect="(id) => beginOAuth(id)"
+ *   />
+ */
+import { computed, ref, watch, type Component } from "vue"
+import { Loader2, Search } from "lucide-vue-next"
+import {
+  Combobox,
+  ComboboxAnchor,
+  ComboboxContent,
+  ComboboxEmpty,
+  ComboboxInput,
+  ComboboxItem,
+  ComboboxItemIndicator,
+} from "@/components/ui/combobox"
+import { Button } from "@/components/ui/button"
+import { Badge } from "@/components/ui/badge"
+import { FieldFrame } from "@/components/ui/field-frame"
+import type { Connector } from "@/definitions/shared/connector"
+import { useConnectorLoader } from "@/composables/useConnectorLoader"
+
+export interface IntegrationConnectorOptionProps {
+  modelValue?: string | null
+  id?: string
+  name?: string
+  label?: string
+  hideLabel?: boolean
+  placeholder?: string
+  required?: boolean
+  readonly?: boolean
+  disabled?: boolean
+  helpText?: string
+  errors?: string[]
+  /** REQUIRED. Returns the list of connectors. */
+  onLoadConnectors: () => Promise<Connector[]>
+  /** When supplied, surfaces a per-row Connect button on non-connected rows. */
+  onConnect?: (id: string) => Promise<void>
+  loadingText?: string
+  emptyText?: string
+  errorText?: string
+}
+
+const props = withDefaults(defineProps<IntegrationConnectorOptionProps>(), {
+  errors: () => [],
+  loadingText: "Loading connectors...",
+  emptyText: "No connectors available",
+  errorText: "Could not load connectors",
+})
+
+const model = defineModel<string | null>("modelValue")
+
+const { connectors, isLoading, error, refresh, isConnecting, connect } =
+  useConnectorLoader(() => props.onLoadConnectors())
+
+const STATUS_DOT_CLASS: Record<NonNullable<Connector["status"]>, string> = {
+  connected: "bg-success",
+  disconnected: "bg-muted-foreground/40",
+  error: "bg-destructive",
+}
+
+function statusDotClass(status: Connector["status"]): string {
+  if (status && STATUS_DOT_CLASS[status]) {
+    return STATUS_DOT_CLASS[status]
+  }
+  return "bg-muted-foreground/40"
+}
+
+function toPascalCase(input: string): string {
+  return input
+    .replace(/[-_\s]+(.)?/g, (_, ch?: string) => (ch ? ch.toUpperCase() : ""))
+    .replace(/^(.)/, (m) => m.toUpperCase())
+}
+
+const iconRegistry = ref<Record<string, Component | null>>({})
+
+async function ensureIcon(name: string): Promise<void> {
+  if (!name) {
+    return
+  }
+  const pascal = toPascalCase(name)
+  if (pascal in iconRegistry.value) {
+    return
+  }
+  const mod = await import("lucide-vue-next")
+  const registry = mod as unknown as Record<string, Component | undefined>
+  iconRegistry.value = {
+    ...iconRegistry.value,
+    [pascal]: registry[pascal] ?? null,
+  }
+}
+
+watch(
+  connectors,
+  (next) => {
+    for (const c of next) {
+      if (c.icon) {
+        void ensureIcon(c.icon)
+      }
+    }
+  },
+  { immediate: true },
+)
+
+function iconFor(name?: string): Component | null {
+  if (!name) {
+    return null
+  }
+  return iconRegistry.value[toPascalCase(name)] ?? null
+}
+
+const query = ref<string>("")
+
+const filteredConnectors = computed<Connector[]>(() => {
+  const q = query.value.trim().toLowerCase()
+  if (!q) {
+    return connectors.value
+  }
+  return connectors.value.filter((c) =>
+    [c.label, c.type ?? "", c.id].some((field) =>
+      field.toLowerCase().includes(q),
+    ),
+  )
+})
+
+const selectedConnector = computed<Connector | null>(() => {
+  if (model.value === undefined || model.value === null) {
+    return null
+  }
+  return connectors.value.find((c) => c.id === model.value) ?? null
+})
+
+const currentValue = computed<string | undefined>(() => {
+  if (model.value === undefined || model.value === null) {
+    return undefined
+  }
+  return model.value
+})
+
+function onInput(event: Event): void {
+  query.value = (event.target as HTMLInputElement).value
+}
+
+function onUpdate(next: unknown): void {
+  if (Array.isArray(next)) {
+    model.value = next[0] === undefined ? null : (next[0] as string)
+    return
+  }
+  model.value = next === undefined ? null : (next as string)
+}
+
+async function handleConnect(id: string, event?: Event): Promise<void> {
+  event?.stopPropagation()
+  event?.preventDefault()
+  await connect(id, props.onConnect)
+}
+
+defineExpose({ refresh, handleConnect })
+</script>
+
+<template>
+  <FieldFrame
+    :label="label"
+    :required="required"
+    :hide-label="hideLabel"
+    :for="id"
+    :help-text="helpText"
+    :errors="errors"
+  >
+    <Combobox
+      :model-value="currentValue"
+      :disabled="disabled || readonly"
+      ignore-filter
+      @update:model-value="onUpdate"
+    >
+      <ComboboxAnchor
+        :data-element-name="name ?? undefined"
+        data-testid="integration-connector-option-anchor"
+        :class="errors.length ? 'border-destructive ring-destructive' : ''"
+      >
+        <Search class="mr-2 h-4 w-4 shrink-0 opacity-50" />
+        <ComboboxInput
+          :id="id"
+          :model-value="query"
+          :placeholder="
+            selectedConnector?.label || (placeholder ?? 'Select connector…')
+          "
+          data-testid="integration-connector-option-input"
+          @input="onInput"
+        />
+        <Loader2
+          v-if="isLoading"
+          data-testid="integration-connector-option-loader"
+          class="ml-2 h-4 w-4 shrink-0 animate-spin text-muted-foreground"
+        />
+      </ComboboxAnchor>
+      <ComboboxContent>
+        <div
+          v-if="isLoading"
+          class="px-2 py-2 text-sm text-muted-foreground"
+          data-testid="integration-connector-option-loading-text"
+        >
+          {{ loadingText }}
+        </div>
+        <div
+          v-else-if="error"
+          class="flex flex-col gap-2 px-2 py-2"
+          data-testid="integration-connector-option-error"
+        >
+          <p class="text-sm text-destructive">{{ errorText }}</p>
+          <Button
+            type="button"
+            size="sm"
+            variant="outline"
+            data-testid="integration-connector-option-retry"
+            @click="refresh"
+          >
+            Retry
+          </Button>
+        </div>
+        <ComboboxEmpty v-else-if="filteredConnectors.length === 0">
+          {{ emptyText }}
+        </ComboboxEmpty>
+        <ComboboxItem
+          v-for="conn in filteredConnectors"
+          :key="conn.id"
+          :value="conn.id"
+          :data-testid="`integration-connector-option-item-${conn.id}`"
+        >
+          <ComboboxItemIndicator />
+          <div class="flex flex-1 items-center gap-2">
+            <component
+              :is="iconFor(conn.icon)"
+              v-if="iconFor(conn.icon)"
+              class="size-4 shrink-0"
+            />
+            <span class="truncate text-sm">{{ conn.label }}</span>
+            <Badge v-if="conn.type" variant="outline" size="sm">
+              {{ conn.type }}
+            </Badge>
+            <span
+              :class="['ml-auto inline-block size-2 rounded-full', statusDotClass(conn.status)]"
+              :data-status="conn.status ?? 'unknown'"
+              :data-testid="`integration-connector-option-status-${conn.id}`"
+            />
+            <Button
+              v-if="onConnect && conn.status !== 'connected'"
+              type="button"
+              size="sm"
+              variant="outline"
+              class="ml-2"
+              :disabled="Boolean(isConnecting[conn.id])"
+              :data-testid="`integration-connector-option-connect-${conn.id}`"
+              @click.stop="handleConnect(conn.id, $event)"
+            >
+              <Loader2
+                v-if="isConnecting[conn.id]"
+                class="size-3 animate-spin"
+              />
+              <span>{{
+                conn.status === "error" ? "Reconnect" : "Connect"
+              }}</span>
+            </Button>
+          </div>
+        </ComboboxItem>
+      </ComboboxContent>
+    </Combobox>
+  </FieldFrame>
+</template>

package/src/components/compositions/elements/option-select/ListOption.stories.ts

@@ -0,0 +1,47 @@
+import type { Meta, StoryObj } from "@storybook/vue3"
+import ListOption from "./ListOption.vue"
+
+const meta = {
+  title: "Compositions/Elements/OptionSelect/ListOption",
+  component: ListOption,
+  tags: ["autodocs"],
+  args: {
+    label: "Status",
+    options: [
+      { label: "Open", value: "open" },
+      { label: "In progress", value: "in_progress" },
+      { label: "Closed", value: "closed" },
+    ],
+  },
+} satisfies Meta<typeof ListOption>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: { label: "Status" },
+}
+
+export const Preselected: Story = {
+  args: { label: "Status", modelValue: "open" },
+}
+
+export const Clearable: Story = {
+  args: { label: "Clearable", modelValue: "open", clearable: true },
+}
+
+export const Disabled: Story = {
+  args: { label: "Disabled", disabled: true, modelValue: "open" },
+}
+
+export const Required: Story = {
+  args: { label: "Required", required: true },
+}
+
+export const WithHelpText: Story = {
+  args: { label: "Status", helpText: "Pick a workflow state." },
+}
+
+export const WithErrors: Story = {
+  args: { label: "Status", errors: ["Pick one."] },
+}

package/src/components/compositions/elements/option-select/ListOption.test.ts

@@ -0,0 +1,83 @@
+import { describe, expect, it } from "vitest"
+import { mount } from "@vue/test-utils"
+import ListOption from "./ListOption.vue"
+
+describe("ListOption (props-based composition)", () => {
+  it("mounts without error", () => {
+    const wrapper = mount(ListOption, { props: { label: "Status" } })
+    expect(wrapper.exists()).toBe(true)
+  })
+
+  it("renders the label via FieldFrame", () => {
+    const wrapper = mount(ListOption, { props: { label: "Custom label" } })
+    expect(wrapper.text()).toContain("Custom label")
+  })
+
+  it("hides the visible label when hideLabel is true", () => {
+    const wrapper = mount(ListOption, {
+      props: { label: "Hidden", hideLabel: true },
+    })
+    expect(wrapper.find("[data-testid='field-frame-label-sr']").exists()).toBe(
+      true,
+    )
+  })
+
+  it("renders option chips for each option", () => {
+    const wrapper = mount(ListOption, {
+      props: {
+        label: "Status",
+        options: [
+          { label: "Open", value: "open" },
+          { label: "Closed", value: "closed" },
+        ],
+      },
+    })
+    expect(wrapper.text()).toContain("Open")
+    expect(wrapper.text()).toContain("Closed")
+  })
+
+  it("marks the matching chip as active", () => {
+    const wrapper = mount(ListOption, {
+      props: {
+        label: "Status",
+        modelValue: "open",
+        options: [
+          { label: "Open", value: "open" },
+          { label: "Closed", value: "closed" },
+        ],
+      },
+    })
+    const chips = wrapper.findAll("[data-active]")
+    expect(chips.some((c) => c.attributes("data-active") === "true")).toBe(
+      true,
+    )
+  })
+
+  it("emits update:modelValue on chip click", async () => {
+    const wrapper = mount(ListOption, {
+      props: {
+        label: "Status",
+        options: [
+          { label: "Open", value: "open" },
+          { label: "Closed", value: "closed" },
+        ],
+      },
+    })
+    await wrapper.findAll("[data-active]")[0]!.trigger("click")
+    expect(wrapper.emitted("update:modelValue")).toBeTruthy()
+  })
+
+  it("renders errors when provided", () => {
+    const wrapper = mount(ListOption, {
+      props: { label: "X", errors: ["Required"] },
+    })
+    expect(wrapper.find("[data-testid='field-frame-errors']").exists()).toBe(
+      true,
+    )
+  })
+
+  it("works without any props at all", () => {
+    const wrapper = mount(ListOption)
+    expect(wrapper.exists()).toBe(true)
+  })
+})