@pgcorp/ui-kit 0.9.0 → 0.10.1

package/src/components/shared/persona/SPersonaRunWorkbench.vue

@@ -1,549 +0,0 @@
-<script setup lang="ts">
-import { computed, ref } from 'vue'
-
-import SButton from '../controls/SButton.vue'
-import SCollapsiblePanel from '../containers/SCollapsiblePanel.vue'
-import SInputText from '../controls/SInputText.vue'
-import SLink from '../controls/SLink.vue'
-import SSegmentedControl from '../controls/SSegmentedControl.vue'
-import type { SegmentedControlOption } from '../controls/SSegmentedControl.vue'
-import SActionListItem from '../data-display/SActionListItem.vue'
-import SBadge from '../data-display/SBadge.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 './_internal/inventory'
-import { resolvePersonaRunWorkbenchLabels } from './_internal/labels'
-import { personaCountLabel } from './presentation'
-import SPersonaRunConsole from './_internal/SPersonaRunConsole.vue'
-import { getPersonaRunConsoleFactKey } from './types'
-import type {
-  PersonaCatalogTest,
-  PersonaInventoryState,
-  PersonaPaginatedInventoryState,
-  PersonaRunConsoleOperation,
-  PersonaRunConsoleDensity,
-  PersonaRunConsoleEvent,
-  PersonaRunConsoleItem,
-  PersonaRunConsoleRun,
-  PersonaRunWorkbenchBinding,
-  PersonaRunWorkbenchCapabilities,
-  PersonaRunWorkbenchCatalogOverview,
-  PersonaRunWorkbenchDiagnostic,
-  PersonaRunWorkbenchLabels,
-  PersonaRunWorkbenchNotice,
-  PersonaRunWorkbenchOperation,
-  PersonaRunWorkbenchWatcher,
-} from './types'
-import { useOwnedAttrs } from '../../../internal/ownedAttrs'
-
-defineOptions({ inheritAttrs: false })
-
-const props = withDefaults(
-  defineProps<{
-    binding: PersonaRunWorkbenchBinding | null
-    watcher?: PersonaRunWorkbenchWatcher | null
-    catalogOverview?: PersonaRunWorkbenchCatalogOverview | null
-    diagnostics?: PersonaRunWorkbenchDiagnostic[]
-    notice?: PersonaRunWorkbenchNotice | null
-    catalogState: PersonaInventoryState<PersonaCatalogTest>
-    selectedTestId?: string | null
-    runsState: PersonaPaginatedInventoryState<PersonaRunConsoleRun>
-    selectedRunId?: string | null
-    itemsState: PersonaPaginatedInventoryState<PersonaRunConsoleItem>
-    eventsState: PersonaPaginatedInventoryState<PersonaRunConsoleEvent>
-    capabilities: PersonaRunWorkbenchCapabilities
-    operation: PersonaRunWorkbenchOperation
-    reportSummary?: string | null
-    labels?: Partial<PersonaRunWorkbenchLabels>
-    density?: PersonaRunConsoleDensity
-    catalogHeight?: number
-    stepsHeight?: number
-  }>(),
-  {
-    watcher: null,
-    catalogOverview: null,
-    diagnostics: () => [],
-    notice: null,
-    selectedTestId: null,
-    selectedRunId: null,
-    reportSummary: null,
-    labels: () => ({}),
-    density: 'comfortable',
-    catalogHeight: 520,
-    stepsHeight: 300,
-  },
-)
-
-const emit = defineEmits<{
-  discover: []
-  watch: []
-  'select-test': [testId: string]
-  'run-test': [testId: string]
-  'run-all': []
-  'select-run': [runId: string]
-  'load-more-runs': []
-  'refresh-events': []
-  'cancel-run': []
-  'load-more-items': []
-  'append-events': []
-  'load-more-events': []
-}>()
-const ownedAttrs = useOwnedAttrs({ component: 'SPersonaRunWorkbench', owner: 'persona workbench shell' })
-
-const search = ref('')
-const diagnosticSearch = ref('')
-const diagnosticSeverity = ref<'all' | 'danger' | 'warn'>('all')
-
-const uiLabels = computed(() => resolvePersonaRunWorkbenchLabels(props.labels))
-
-const consoleOperation = computed<PersonaRunConsoleOperation>(() => {
-  switch (props.operation) {
-    case 'refreshing-events':
-    case 'cancelling-run':
-    case 'appending-events':
-      return props.operation
-    case 'discovering':
-    case 'watching':
-    case 'starting-run':
-    case 'idle':
-      return 'idle'
-    default:
-      throw new TypeError(`SPersonaRunWorkbench: unsupported operation ${String(props.operation)}`)
-  }
-})
-
-const catalogTests = computed(() => props.catalogState.status === 'ready'
-  ? assertPersonaInventory('SPersonaRunWorkbench.catalogState', props.catalogState.items)
-  : [])
-const catalogAsyncState = computed(() => resolvePersonaInventoryAsyncState(
-  'SPersonaRunWorkbench.catalogState',
-  props.catalogState,
-  {
-    loadingMessage: 'Загрузка каталога',
-    emptyMessage: uiLabels.value.noCatalogTests,
-  },
-))
-const selectedTest = computed(() => findExactPersonaInventoryItem(
-  'SPersonaRunWorkbench.catalogState',
-  catalogTests.value,
-  props.selectedTestId,
-))
-const selectedTestBadges = computed(() => assertPersonaInventory(
-  'SPersonaRunWorkbench.selectedTest.badges',
-  selectedTest.value?.badges ?? [],
-))
-const selectedTestLinks = computed(() => assertPersonaInventory(
-  'SPersonaRunWorkbench.selectedTest.links',
-  selectedTest.value?.links ?? [],
-))
-const validatedDiagnostics = computed(() => assertPersonaInventory(
-  'SPersonaRunWorkbench.diagnostics',
-  props.diagnostics,
-))
-
-const visibleTests = computed(() => {
-  const query = search.value.trim().toLocaleLowerCase('ru-RU')
-  if (!query) return catalogTests.value
-  return catalogTests.value.filter((test) => {
-    const haystack = [
-      test.title,
-      test.meta,
-      test.workItemId,
-      test.scenarioId,
-      test.variantId,
-      test.sourcePath,
-      ...(test.tags ?? []),
-    ].filter((value): value is string => Boolean(value)).join(' ').toLocaleLowerCase('ru-RU')
-    return haystack.includes(query)
-  })
-})
-
-const diagnosticSeverityOptions = computed<SegmentedControlOption[]>(() => [
-  { value: 'all', label: `Все ${validatedDiagnostics.value.length}`, title: 'Показать все сообщения' },
-  {
-    value: 'danger',
-    label: `Ошибки ${validatedDiagnostics.value.filter((diagnostic) => diagnostic.statusSeverity === 'danger').length}`,
-    title: 'Показать ошибки',
-  },
-  {
-    value: 'warn',
-    label: `Предупреждения ${validatedDiagnostics.value.filter((diagnostic) => diagnostic.statusSeverity === 'warn').length}`,
-    title: 'Показать предупреждения',
-  },
-])
-
-const diagnosticGroupTitles: Record<PersonaRunWorkbenchDiagnostic['category'], string> = {
-  scenario_import: 'Недоступные сценарии',
-  component_analysis: 'Ошибки анализа компонентов',
-  support_quality: 'Замечания качества PageObject',
-  unclassified: 'Сообщения без классификации',
-}
-
-const diagnosticGroups = computed(() => {
-  const categories: PersonaRunWorkbenchDiagnostic['category'][] = [
-    'scenario_import',
-    'component_analysis',
-    'support_quality',
-    'unclassified',
-  ]
-  return categories.flatMap((category) => {
-    const diagnostics = validatedDiagnostics.value.filter((diagnostic) => diagnostic.category === category)
-    if (diagnostics.length === 0) return []
-    const statusSeverity = diagnostics.some((diagnostic) => diagnostic.statusSeverity === 'danger')
-      ? 'danger' as const
-      : diagnostics.some((diagnostic) => diagnostic.statusSeverity === 'warn')
-        ? 'warn' as const
-        : 'info' as const
-    const countLabel = personaCountLabel(diagnostics.length, ['сообщение', 'сообщения', 'сообщений'])
-    return [{
-      category,
-      title: diagnosticGroupTitles[category],
-      description: countLabel,
-      countLabel,
-      statusSeverity,
-    }]
-  })
-})
-
-const visibleDiagnostics = computed(() => {
-  const query = diagnosticSearch.value.trim().toLocaleLowerCase('ru-RU')
-  return validatedDiagnostics.value.filter((diagnostic) => {
-    if (diagnosticSeverity.value !== 'all' && diagnostic.statusSeverity !== diagnosticSeverity.value) {
-      return false
-    }
-    if (!query) return true
-    return [
-      diagnostic.title,
-      diagnostic.message,
-      diagnostic.meta,
-      diagnostic.ownerLabel,
-      diagnostic.impactLabel,
-      diagnostic.remediation,
-      diagnostic.statusLabel,
-    ]
-      .filter((value): value is string => Boolean(value))
-      .join(' ')
-      .toLocaleLowerCase('ru-RU')
-      .includes(query)
-  })
-})
-
-const virtualRowSize = 96
-const catalogItemSize = virtualRowSize
-const stepItemSize = virtualRowSize
-const catalogViewportHeight = computed(() => Math.min(props.catalogHeight, visibleTests.value.length * catalogItemSize))
-const stepsViewportHeight = computed(() => Math.min(
-  props.stepsHeight,
-  (selectedTest.value?.steps.length ?? 0) * stepItemSize,
-))
-const diagnosticsViewportHeight = computed(() => Math.min(288, visibleDiagnostics.value.length * virtualRowSize))
-
-function diagnosticDescription(diagnostic: PersonaRunWorkbenchDiagnostic): string {
-  return [diagnostic.ownerLabel, diagnostic.impactLabel, diagnostic.meta]
-    .filter((value): value is string => Boolean(value))
-    .join(' · ')
-}
-
-</script>
-
-<template>
-  <div v-bind="ownedAttrs.bindings()" class="s-persona-run-workbench-shell">
-    <div class="s-persona-run-workbench" :data-density="density">
-    <section class="s-persona-run-workbench__project">
-      <div class="s-persona-run-workbench__project-line">
-        <div v-if="$slots.projectSelector" class="s-persona-run-workbench__project-selector">
-          <slot name="projectSelector" />
-        </div>
-        <SSectionHeader
-          :eyebrow="uiLabels.projectTitle"
-          :title="binding?.title ?? uiLabels.projectTitle"
-          :description="binding?.root"
-          :meta="binding?.meta"
-        >
-          <template #badges>
-            <SBadge v-if="binding" :severity="binding.statusSeverity">{{ binding.statusLabel }}</SBadge>
-            <SBadge v-if="watcher" :severity="watcher.statusSeverity">{{ watcher.statusLabel }}</SBadge>
-          </template>
-          <template #actions>
-            <SButton
-              size="sm"
-              severity="secondary"
-              :disabled="!binding || capabilities.discover === 'disabled'"
-              :loading="operation === 'discovering'"
-              @click="emit('discover')"
-            >
-              {{ uiLabels.discover }}
-            </SButton>
-            <SButton
-              size="sm"
-              severity="secondary"
-              :disabled="!binding || capabilities.watch === 'disabled'"
-              :loading="operation === 'watching'"
-              @click="emit('watch')"
-            >
-              {{ uiLabels.watch }}
-            </SButton>
-          </template>
-        </SSectionHeader>
-      </div>
-      <div v-if="watcher?.message || notice" class="s-persona-run-workbench__messages">
-        <SMessage v-if="watcher?.message" :severity="watcher.statusSeverity === 'danger' ? 'danger' : 'warn'">
-          {{ watcher.message }}
-        </SMessage>
-        <SMessage v-if="notice" :severity="notice.severity" :title="notice.title">
-          {{ notice.message }}
-        </SMessage>
-      </div>
-      <div v-if="validatedDiagnostics.length > 0" class="s-persona-run-workbench__diagnostics">
-        <SCollapsiblePanel
-          summary="Диагностика проекта"
-          density="compact"
-          header-variant="minimal"
-          surface="plain"
-        >
-          <div class="s-persona-run-workbench__diagnostic-groups" aria-label="Сводка причин диагностики">
-            <SActionListItem
-              v-for="group in diagnosticGroups"
-              :key="group.category"
-              :title="group.title"
-              :description="group.description"
-              :status-label="group.countLabel"
-              :status-severity="group.statusSeverity"
-              :surface="{ mode: 'static' }"
-              trailing-layout="inline"
-            />
-          </div>
-          <div class="s-persona-run-workbench__diagnostic-controls">
-            <SInputText v-model="diagnosticSearch" placeholder="Поиск по диагностике" size="sm" />
-            <SSegmentedControl
-              v-model="diagnosticSeverity"
-              :options="diagnosticSeverityOptions"
-              label="Важность диагностических сообщений"
-              size="sm"
-            />
-          </div>
-          <SVirtualList
-            v-if="visibleDiagnostics.length > 0"
-            :key="`${diagnosticSeverity}:${diagnosticSearch}`"
-            :items="visibleDiagnostics"
-            :item-size="virtualRowSize"
-            :height="diagnosticsViewportHeight"
-            :item-key="(diagnostic) => diagnostic.id"
-            accessible-label="Диагностические сообщения"
-            :item-label="(diagnostic) => diagnostic.title"
-          >
-            <template #default="{ item }">
-              <SActionListItem
-                role="presentation"
-                :title="item.title"
-                :description="diagnosticDescription(item)"
-                :detail="item.message"
-                :status-label="item.statusLabel"
-                :status-severity="item.statusSeverity"
-                :surface="{ mode: 'static' }"
-                trailing-layout="inline"
-                height-mode="fill"
-              />
-            </template>
-          </SVirtualList>
-          <SEmptyState v-else title="Диагностические сообщения не найдены." size="sm" />
-        </SCollapsiblePanel>
-      </div>
-    </section>
-
-    <section class="s-persona-run-workbench__catalog">
-      <SSectionHeader
-        :title="uiLabels.catalogTitle"
-        size="sm"
-        spacing-after="sm"
-        trailing-layout="stacked"
-      >
-        <template #badges>
-          <SBadge severity="info">{{ visibleTests.length }} доступно</SBadge>
-          <SBadge v-if="catalogOverview?.unavailableTests" severity="danger">
-            {{ catalogOverview.unavailableTests }} недоступно
-          </SBadge>
-          <SBadge v-if="catalogOverview" severity="secondary">{{ catalogOverview.components }} компонентов</SBadge>
-          <SBadge v-if="catalogOverview" severity="secondary">{{ catalogOverview.pages }} страниц</SBadge>
-          <SBadge v-if="catalogOverview?.diagnosticErrors" severity="danger">
-            {{ personaCountLabel(catalogOverview.diagnosticErrors, ['ошибка', 'ошибки', 'ошибок']) }}
-          </SBadge>
-          <SBadge v-if="catalogOverview?.diagnosticWarnings" severity="warn">
-            {{ personaCountLabel(catalogOverview.diagnosticWarnings, ['предупреждение', 'предупреждения', 'предупреждений']) }}
-          </SBadge>
-        </template>
-      </SSectionHeader>
-      <SInputText
-        v-if="catalogState.status === 'ready'"
-        v-model="search"
-        :placeholder="uiLabels.searchPlaceholder"
-        size="sm"
-      />
-      <SAsyncState :state="catalogAsyncState">
-        <div class="s-persona-run-workbench__list">
-          <SVirtualList
-            :items="visibleTests"
-            :item-size="catalogItemSize"
-            :height="catalogViewportHeight"
-            :item-key="(test) => test.id"
-            :accessible-label="uiLabels.catalogTitle"
-            :item-label="(test) => test.title"
-          >
-            <template #default="{ item }">
-              <SActionListItem
-                role="presentation"
-                :title="item.title"
-                :description="item.meta"
-                :detail="item.detail"
-                :selected="selectedTest?.id === item.id"
-                :status-label="item.statusLabel"
-                :status-severity="item.statusSeverity ?? 'secondary'"
-                :badges="item.badges"
-                trailing-layout="inline"
-                height-mode="fill"
-                :surface="{
-                  mode: 'action',
-                  accessibleLabel: `Выбрать тест ${item.title}`,
-                  pressed: selectedTest?.id === item.id,
-                }"
-                @activate="emit('select-test', item.id)"
-              />
-            </template>
-          </SVirtualList>
-        </div>
-      </SAsyncState>
-    </section>
-
-    <section class="s-persona-run-workbench__structure">
-      <SSectionHeader
-        :eyebrow="uiLabels.selectedTestTitle"
-        :title="selectedTest?.title ?? uiLabels.selectedTestTitle"
-        :description="selectedTest?.description || selectedTest?.meta"
-        :meta="selectedTest?.detail"
-      >
-        <template #badges>
-          <SBadge
-            v-for="badge in selectedTestBadges"
-            :key="badge.id"
-            :severity="badge.severity"
-          >
-            {{ badge.label }}
-          </SBadge>
-        </template>
-        <template #actions>
-          <SButton
-            size="sm"
-            severity="primary"
-            :disabled="!selectedTest || capabilities.runSelected === 'disabled'"
-            :loading="operation === 'starting-run'"
-            @click="selectedTest && emit('run-test', selectedTest.id)"
-          >
-            {{ uiLabels.runSelected }}
-          </SButton>
-          <SButton
-            size="sm"
-            severity="secondary"
-            :disabled="catalogTests.length === 0 || capabilities.runAll === 'disabled'"
-            :loading="operation === 'starting-run'"
-            @click="emit('run-all')"
-          >
-            {{ uiLabels.runAll }}
-          </SButton>
-        </template>
-      </SSectionHeader>
-
-      <SKeyValueGrid
-        v-if="selectedTest && (selectedTest.facts?.length ?? 0) > 0"
-        :items="selectedTest.facts ?? []"
-        :get-item-key="getPersonaRunConsoleFactKey"
-        variant="inline"
-        :columns="1"
-      />
-      <nav
-        v-if="selectedTestLinks.length > 0"
-        class="s-persona-run-workbench__links"
-        aria-label="Связанные материалы теста"
-      >
-        <SLink
-          v-for="link in selectedTestLinks"
-          :key="link.id"
-          :href="link.url"
-          target="_blank"
-          external
-          size="sm"
-          underline="always"
-          wrap="anywhere"
-        >
-          {{ link.label }}
-        </SLink>
-      </nav>
-
-      <div class="s-persona-run-workbench__subheading">
-        <SSectionHeader :title="uiLabels.structureTitle" size="sm" spacing-after="md" />
-      </div>
-      <div v-if="selectedTest?.structureNotice" class="s-persona-run-workbench__structure-notice">
-        <SMessage
-          :severity="selectedTest.structureNotice.severity"
-          :title="selectedTest.structureNotice.title"
-        >
-          {{ selectedTest.structureNotice.message }}
-        </SMessage>
-      </div>
-      <SVirtualList
-        v-if="selectedTest && selectedTest.steps.length > 0"
-        :items="selectedTest.steps"
-        :item-size="stepItemSize"
-        :height="stepsViewportHeight"
-        :item-key="(step) => step.id"
-        :accessible-label="uiLabels.structureTitle"
-        :item-label="(step) => step.title"
-      >
-        <template #default="{ item }">
-          <SActionListItem
-            role="presentation"
-            :title="item.title"
-            :description="item.meta || item.kind || ''"
-            :detail="item.detail"
-            :badges="item.badges"
-            :indent-level="item.depth"
-            :surface="{ mode: 'static' }"
-            height-mode="fill"
-          />
-        </template>
-      </SVirtualList>
-      <SEmptyState v-else :title="uiLabels.emptyStructure" size="sm" />
-    </section>
-
-    <section class="s-persona-run-workbench__runs">
-      <SPersonaRunConsole
-        :runs-state="runsState"
-        :selected-run-id="selectedRunId"
-        :items-state="itemsState"
-        :events-state="eventsState"
-        :capabilities="{ cancelRun: capabilities.cancelRun }"
-        :operation="consoleOperation"
-        :report-summary="reportSummary"
-        :resolved-labels="uiLabels"
-        :density="density"
-        @select-run="emit('select-run', $event)"
-        @load-more-runs="emit('load-more-runs')"
-        @refresh-events="emit('refresh-events')"
-        @cancel-run="emit('cancel-run')"
-        @load-more-items="emit('load-more-items')"
-        @append-events="emit('append-events')"
-        @load-more-events="emit('load-more-events')"
-      />
-    </section>
-    </div>
-  </div>
-</template>
-
-<style lang="postcss" src="./SPersonaRunWorkbench.css" scoped></style>