@pgcorp/ui-kit 0.1.0

package/src/components/shared/persona/_internal/SPersonaRunConsole.vue

@@ -0,0 +1,298 @@
+<script setup lang="ts">
+import { computed } from 'vue'
+
+import SButton from '../../controls/SButton.vue'
+import SActionListItem from '../../data-display/SActionListItem.vue'
+import SCodeBlock from '../../data-display/SCodeBlock.vue'
+import SEmptyState from '../../data-display/SEmptyState.vue'
+import SMessage from '../../data-display/SMessage.vue'
+import SSectionHeader from '../../data-display/SSectionHeader.vue'
+import SVirtualList from '../../data-display/SVirtualList.vue'
+import SKeyValueGrid from '../../data-display/SKeyValueGrid.vue'
+import SAsyncState from '../../feedback/SAsyncState.vue'
+import {
+  assertPersonaInventory,
+  findExactPersonaInventoryItem,
+  resolvePersonaInventoryAsyncState,
+} from './inventory'
+import { personaDistinctMessage } from '../presentation'
+import { getPersonaRunConsoleFactKey } from '../types'
+import type {
+  PersonaPaginatedInventoryState,
+  PersonaRunConsoleCapabilities,
+  PersonaRunConsoleDensity,
+  PersonaRunConsoleEvent,
+  PersonaRunConsoleItem,
+  PersonaRunConsoleLabels,
+  PersonaRunConsoleOperation,
+  PersonaRunConsoleRun,
+} from '../types'
+
+defineOptions({ inheritAttrs: false })
+
+const props = withDefaults(
+  defineProps<{
+    runsState: PersonaPaginatedInventoryState<PersonaRunConsoleRun>
+    itemsState: PersonaPaginatedInventoryState<PersonaRunConsoleItem>
+    eventsState: PersonaPaginatedInventoryState<PersonaRunConsoleEvent>
+    capabilities: PersonaRunConsoleCapabilities
+    operation: PersonaRunConsoleOperation
+    resolvedLabels: PersonaRunConsoleLabels
+    selectedRunId?: string | null
+    reportSummary?: string | null
+    density?: PersonaRunConsoleDensity
+    listHeight?: number
+    itemsHeight?: number
+    eventsHeight?: number
+  }>(),
+  {
+    selectedRunId: null,
+    reportSummary: null,
+    density: 'comfortable',
+    listHeight: 560,
+    itemsHeight: 250,
+    eventsHeight: 430,
+  },
+)
+
+const emit = defineEmits<{
+  'select-run': [runId: string]
+  'load-more-runs': []
+  'refresh-events': []
+  'cancel-run': []
+  'load-more-items': []
+  'append-events': []
+  'load-more-events': []
+}>()
+const runs = computed(() => props.runsState.status === 'ready'
+  ? assertPersonaInventory('SPersonaRunConsole.runsState', props.runsState.items)
+  : [])
+const items = computed(() => props.itemsState.status === 'ready'
+  ? assertPersonaInventory('SPersonaRunConsole.itemsState', props.itemsState.items)
+  : [])
+const events = computed(() => props.eventsState.status === 'ready'
+  ? assertPersonaInventory('SPersonaRunConsole.eventsState', props.eventsState.items)
+  : [])
+const runsAsyncState = computed(() => resolvePersonaInventoryAsyncState(
+  'SPersonaRunConsole.runsState',
+  props.runsState,
+  {
+    loadingMessage: 'Загрузка запусков',
+    emptyMessage: props.resolvedLabels.noRuns,
+  },
+))
+const itemsAsyncState = computed(() => resolvePersonaInventoryAsyncState(
+  'SPersonaRunConsole.itemsState',
+  props.itemsState,
+  {
+    loadingMessage: 'Загрузка рабочих элементов',
+    emptyMessage: props.resolvedLabels.noItems,
+  },
+))
+const eventsAsyncState = computed(() => resolvePersonaInventoryAsyncState(
+  'SPersonaRunConsole.eventsState',
+  props.eventsState,
+  {
+    loadingMessage: 'Загрузка событий',
+    emptyMessage: props.resolvedLabels.noEvents,
+  },
+))
+const selectedRun = computed(() => findExactPersonaInventoryItem(
+  'SPersonaRunConsole.runsState',
+  runs.value,
+  props.selectedRunId,
+))
+const selectedFacts = computed(() => selectedRun.value?.facts ?? [])
+const virtualRowSize = 96
+const runsViewportHeight = computed(() => Math.min(props.listHeight, runs.value.length * virtualRowSize))
+const itemsViewportHeight = computed(() => Math.min(props.itemsHeight, items.value.length * virtualRowSize))
+const eventsViewportHeight = computed(() => Math.min(props.eventsHeight, events.value.length * virtualRowSize))
+
+function eventDetail(event: PersonaRunConsoleEvent): string | null {
+  return personaDistinctMessage(event.title, event.message)
+}
+</script>
+
+<template>
+  <div class="s-persona-run-console-shell">
+    <div class="s-persona-run-console" :data-density="density">
+    <section class="s-persona-run-console__section">
+      <SSectionHeader :title="resolvedLabels.runListTitle" size="sm" />
+      <SAsyncState :state="runsAsyncState">
+        <SVirtualList
+          :items="runs"
+          :item-size="virtualRowSize"
+          :height="runsViewportHeight"
+          :item-key="(run) => run.id"
+          :accessible-label="resolvedLabels.runListTitle"
+          :item-label="(run) => run.title"
+        >
+          <template #default="{ item }">
+            <SActionListItem
+              role="presentation"
+              :title="item.title"
+              :description="item.meta"
+              :detail="item.detail"
+              :selected="selectedRunId === item.id"
+              :status-label="item.statusLabel"
+              :status-severity="item.statusSeverity"
+              trailing-layout="inline"
+              height-mode="fill"
+              :surface="{ mode: 'action', accessibleLabel: `Открыть запуск ${item.title}` }"
+              @activate="emit('select-run', item.id)"
+            />
+          </template>
+        </SVirtualList>
+      </SAsyncState>
+      <div
+        v-if="runsState.status === 'ready' && runsState.pagination !== 'complete'"
+        class="s-persona-run-console__actions-line"
+      >
+        <SButton
+          size="sm"
+          severity="secondary"
+          :loading="runsState.pagination === 'loading-more'"
+          @click="emit('load-more-runs')"
+        >
+          {{ resolvedLabels.loadMoreRuns }}
+        </SButton>
+      </div>
+    </section>
+
+    <section class="s-persona-run-console__section">
+      <SSectionHeader :title="resolvedLabels.selectedRunTitle" size="sm" />
+      <div v-if="selectedRun" class="s-persona-run-console__detail">
+        <SSectionHeader :title="selectedRun.title" :description="selectedRun.meta">
+          <template #actions>
+            <SButton
+              size="sm"
+              severity="secondary"
+              :loading="operation === 'refreshing-events'"
+              @click="emit('refresh-events')"
+            >
+              {{ resolvedLabels.refreshEvents }}
+            </SButton>
+            <SButton
+              v-if="capabilities.cancelRun === 'enabled'"
+              size="sm"
+              severity="danger"
+              :loading="operation === 'cancelling-run'"
+              @click="emit('cancel-run')"
+            >
+              {{ resolvedLabels.cancelRun }}
+            </SButton>
+          </template>
+        </SSectionHeader>
+
+        <SMessage v-if="selectedRun.artifactLabel" severity="info" title="Артефакты">
+          {{ selectedRun.artifactLabel }}
+        </SMessage>
+
+        <SKeyValueGrid
+          v-if="selectedFacts.length > 0"
+          :items="selectedFacts"
+          :get-item-key="getPersonaRunConsoleFactKey"
+          variant="inline"
+          :columns="1"
+        />
+
+        <SSectionHeader :title="resolvedLabels.itemsTitle" size="sm" />
+        <SAsyncState :state="itemsAsyncState">
+          <SVirtualList
+            :items="items"
+            :item-size="virtualRowSize"
+            :height="itemsViewportHeight"
+            :item-key="(workItem) => workItem.id"
+            :accessible-label="resolvedLabels.itemsTitle"
+            :item-label="(workItem) => workItem.title"
+          >
+            <template #default="{ item }">
+              <SActionListItem
+                role="presentation"
+                :title="item.title"
+                :description="item.meta"
+                :detail="item.detail"
+                :status-label="item.statusLabel"
+                :status-severity="item.statusSeverity"
+                :badges="item.badges"
+                :surface="{ mode: 'static' }"
+                trailing-layout="inline"
+                height-mode="fill"
+              />
+            </template>
+          </SVirtualList>
+        </SAsyncState>
+        <div
+          v-if="itemsState.status === 'ready' && itemsState.pagination !== 'complete'"
+          class="s-persona-run-console__actions-line"
+        >
+          <SButton
+            size="sm"
+            severity="secondary"
+            :loading="itemsState.pagination === 'loading-more'"
+            @click="emit('load-more-items')"
+          >
+            {{ resolvedLabels.loadMoreItems }}
+          </SButton>
+        </div>
+
+        <SCodeBlock
+          v-if="reportSummary"
+          :code="reportSummary"
+          :language="{ id: 'plaintext' }"
+          :show-header="false"
+          :show-line-numbers="false"
+          viewport="compact"
+          :aria-label="resolvedLabels.reportSummary"
+        />
+
+        <SSectionHeader :title="resolvedLabels.eventsTitle" size="sm" />
+        <SAsyncState :state="eventsAsyncState">
+          <SVirtualList
+            :items="events"
+            :item-size="virtualRowSize"
+            :height="eventsViewportHeight"
+            :item-key="(event) => event.id"
+            :accessible-label="resolvedLabels.eventsTitle"
+            :item-label="(event) => event.title"
+          >
+            <template #default="{ item }">
+              <SActionListItem
+                role="presentation"
+                :title="item.title"
+                :description="item.meta"
+                :detail="eventDetail(item)"
+                :badges="item.badges"
+                :surface="{ mode: 'static' }"
+                height-mode="fill"
+              />
+            </template>
+          </SVirtualList>
+        </SAsyncState>
+        <div v-if="eventsState.status === 'ready'" class="s-persona-run-console__actions-line">
+          <SButton
+            size="sm"
+            severity="secondary"
+            :loading="operation === 'appending-events'"
+            @click="emit('append-events')"
+          >
+            {{ resolvedLabels.appendEvents }}
+          </SButton>
+          <SButton
+            v-if="eventsState.status === 'ready' && eventsState.pagination !== 'complete'"
+            size="sm"
+            severity="secondary"
+            :loading="eventsState.pagination === 'loading-more'"
+            @click="emit('load-more-events')"
+          >
+            {{ resolvedLabels.loadMoreEvents }}
+          </SButton>
+        </div>
+      </div>
+      <SEmptyState v-else :title="resolvedLabels.emptyRun" size="sm" />
+    </section>
+    </div>
+  </div>
+</template>
+
+<style lang="postcss" src="./SPersonaRunConsole.css" scoped></style>

package/src/components/shared/persona/_internal/inventory.ts

@@ -0,0 +1,110 @@
+import type { SAsyncStateContract } from '../../feedback/SAsyncState.vue'
+import type {
+  PersonaInventoryState,
+  PersonaPaginatedInventoryState,
+  PersonaProjectPickerState,
+} from '../types'
+
+export interface PersonaStableInventoryItem {
+  readonly id: string
+}
+
+export interface PersonaAsyncPresentation {
+  readonly loadingMessage: string
+  readonly emptyMessage: string
+}
+
+export function assertPersonaInventory<Item extends PersonaStableInventoryItem>(
+  owner: string,
+  items: Item[],
+): Item[] {
+  if (!Array.isArray(items)) {
+    throw new TypeError(
+      `${owner}: inventory должен быть массивом. / ${owner}: inventory must be an array.`,
+    )
+  }
+
+  const identities = new Set<string>()
+  for (const [index, item] of items.entries()) {
+    const candidate: unknown = item
+    if (typeof candidate !== 'object' || candidate === null || Array.isArray(candidate)) {
+      throw new TypeError(
+        `${owner}: inventory[${index}] должен быть объектом со стабильным id. `
+        + `/ ${owner}: inventory[${index}] must be an object with a stable id.`,
+      )
+    }
+    const id = (candidate as { id?: unknown }).id
+    if (typeof id !== 'string' || id.length === 0) {
+      throw new TypeError(
+        `${owner}: inventory[${index}].id должен быть непустой строкой. `
+        + `/ ${owner}: inventory[${index}].id must be a non-empty string.`,
+      )
+    }
+    if (identities.has(id)) {
+      throw new TypeError(
+        `${owner}: inventory содержит duplicate id ${JSON.stringify(id)}. `
+        + `/ ${owner}: inventory contains duplicate id ${JSON.stringify(id)}.`,
+      )
+    }
+    identities.add(id)
+  }
+  return items
+}
+
+export function findExactPersonaInventoryItem<Item extends PersonaStableInventoryItem>(
+  owner: string,
+  items: Item[],
+  selectedId: string | null,
+): Item | null {
+  const inventory = assertPersonaInventory(owner, items)
+  if (selectedId === null) return null
+  if (typeof selectedId !== 'string' || selectedId.length === 0) {
+    throw new TypeError(
+      `${owner}: selectedId должен быть непустой строкой или null. `
+      + `/ ${owner}: selectedId must be a non-empty string or null.`,
+    )
+  }
+  const selectedItem = inventory.find((item) => item.id === selectedId)
+  if (selectedItem !== undefined) return selectedItem
+  throw new Error(
+    `${owner}: selectedId ${JSON.stringify(selectedId)} отсутствует в inventory. `
+    + `/ ${owner}: selectedId ${JSON.stringify(selectedId)} is absent from the inventory.`,
+  )
+}
+
+/**
+ * Проецирует доменный inventory contract в единственный canonical async-state contract.
+ * Projects a domain inventory contract onto the sole canonical async-state contract.
+ */
+export function resolvePersonaInventoryAsyncState<Item extends PersonaStableInventoryItem>(
+  owner: string,
+  state: PersonaInventoryState<Item> | PersonaPaginatedInventoryState<Item>,
+  presentation: PersonaAsyncPresentation,
+): SAsyncStateContract {
+  if (state.status === 'loading') {
+    return { status: 'loading', message: state.message ?? presentation.loadingMessage }
+  }
+  if (state.status === 'error') return state
+
+  const inventory = assertPersonaInventory(owner, state.items)
+  return inventory.length === 0
+    ? { status: 'empty', message: presentation.emptyMessage }
+    : { status: 'ready' }
+}
+
+/**
+ * Проецирует picker state в canonical async-state, сохраняя ready listing как доменный payload.
+ * Projects picker state onto canonical async-state while preserving the ready listing payload.
+ */
+export function resolvePersonaProjectPickerAsyncState(
+  state: PersonaProjectPickerState,
+  presentation: PersonaAsyncPresentation,
+): SAsyncStateContract {
+  if (state.status === 'loading') {
+    return { status: 'loading', message: state.message ?? presentation.loadingMessage }
+  }
+  if (state.status === 'error') return state
+  return state.listing === null
+    ? { status: 'empty', message: presentation.emptyMessage }
+    : { status: 'ready' }
+}

package/src/components/shared/persona/_internal/labels.ts

@@ -0,0 +1,79 @@
+import { validateNonEmptyString } from '../../../../internal/runtimeContract'
+
+import type { PersonaRunWorkbenchLabels } from '../types'
+
+const PERSONA_RUN_WORKBENCH_DEFAULT_LABELS = Object.freeze({
+  projectTitle: 'Проект',
+  discoveryTitle: 'Discovery',
+  catalogTitle: 'Каталог тестов',
+  structureTitle: 'Структура сценария',
+  selectedTestTitle: 'Выбранный тест',
+  runSelected: 'Запустить тест',
+  runAll: 'Запустить каталог',
+  discover: 'Обнаружить',
+  watch: 'Наблюдать',
+  searchPlaceholder: 'Поиск по тестам',
+  noCatalogTests: 'Тесты не найдены.',
+  emptyStructure: 'Структура сценария не сохранена.',
+  runListTitle: 'Запуски',
+  selectedRunTitle: 'События запуска',
+  itemsTitle: 'Рабочие элементы',
+  eventsTitle: 'События',
+  loadMoreRuns: 'Загрузить ещё',
+  loadMoreItems: 'Догрузить рабочие элементы',
+  appendEvents: 'Догрузить новые',
+  loadMoreEvents: 'Догрузить историю',
+  refreshEvents: 'Обновить события',
+  cancelRun: 'Отменить',
+  reportSummary: 'Сводка отчёта',
+  emptyRun: 'Выберите запуск для просмотра событий и артефактов.',
+  noRuns: 'Запуски не найдены.',
+  noItems: 'Рабочие элементы ещё не появились.',
+  noEvents: 'События запуска ещё не поступили.',
+} satisfies PersonaRunWorkbenchLabels)
+
+type PersonaRunWorkbenchLabelKey = keyof PersonaRunWorkbenchLabels
+
+function resolveLabel(
+  overrides: Readonly<Partial<PersonaRunWorkbenchLabels>>,
+  key: PersonaRunWorkbenchLabelKey,
+): string {
+  const override = overrides[key]
+  return override === undefined
+    ? PERSONA_RUN_WORKBENCH_DEFAULT_LABELS[key]
+    : validateNonEmptyString('SPersonaRunWorkbench', `labels.${key}`, override)
+}
+
+export function resolvePersonaRunWorkbenchLabels(
+  overrides: Readonly<Partial<PersonaRunWorkbenchLabels>> = {},
+): PersonaRunWorkbenchLabels {
+  return {
+    projectTitle: resolveLabel(overrides, 'projectTitle'),
+    discoveryTitle: resolveLabel(overrides, 'discoveryTitle'),
+    catalogTitle: resolveLabel(overrides, 'catalogTitle'),
+    structureTitle: resolveLabel(overrides, 'structureTitle'),
+    selectedTestTitle: resolveLabel(overrides, 'selectedTestTitle'),
+    runSelected: resolveLabel(overrides, 'runSelected'),
+    runAll: resolveLabel(overrides, 'runAll'),
+    discover: resolveLabel(overrides, 'discover'),
+    watch: resolveLabel(overrides, 'watch'),
+    searchPlaceholder: resolveLabel(overrides, 'searchPlaceholder'),
+    noCatalogTests: resolveLabel(overrides, 'noCatalogTests'),
+    emptyStructure: resolveLabel(overrides, 'emptyStructure'),
+    runListTitle: resolveLabel(overrides, 'runListTitle'),
+    selectedRunTitle: resolveLabel(overrides, 'selectedRunTitle'),
+    itemsTitle: resolveLabel(overrides, 'itemsTitle'),
+    eventsTitle: resolveLabel(overrides, 'eventsTitle'),
+    loadMoreRuns: resolveLabel(overrides, 'loadMoreRuns'),
+    loadMoreItems: resolveLabel(overrides, 'loadMoreItems'),
+    appendEvents: resolveLabel(overrides, 'appendEvents'),
+    loadMoreEvents: resolveLabel(overrides, 'loadMoreEvents'),
+    refreshEvents: resolveLabel(overrides, 'refreshEvents'),
+    cancelRun: resolveLabel(overrides, 'cancelRun'),
+    reportSummary: resolveLabel(overrides, 'reportSummary'),
+    emptyRun: resolveLabel(overrides, 'emptyRun'),
+    noRuns: resolveLabel(overrides, 'noRuns'),
+    noItems: resolveLabel(overrides, 'noItems'),
+    noEvents: resolveLabel(overrides, 'noEvents'),
+  }
+}