finishing test-run home & details design + addin uuid hadnling for te…

…strun
checkmarble · Dec 2, 2024 · 781f5da · 781f5da
1 parent c71e07f
commit 781f5da
Show file tree

Hide file tree

Showing 15 changed files with 300 additions and 206 deletions.
diff --git a/...un/Filters/FilterDetail/CreatorFilter.tsx → ...n/Filters/FilterDetail/CreatorsFilter.tsx b/...un/Filters/FilterDetail/CreatorFilter.tsx → ...n/Filters/FilterDetail/CreatorsFilter.tsx
@@ -4,7 +4,7 @@ import { Avatar, Input, SelectWithCombobox } from 'ui-design-system';
 import { useCreatorFilter } from '../TestRunsFiltersContext';
 import { useOrganizationUsers } from '@app-builder/services/organization/organization-users';
 
-export function CreatorFilter() {
+export function CreatorsFilter() {
   const [value, setSearchValue] = useState('');
   const { creator, setCreator } = useCreatorFilter();
   const deferredValue = useDeferredValue(value);

diff --git a/packages/app-builder/src/components/Scenario/TestRun/Filters/FilterDetail/FilterDetail.tsx b/packages/app-builder/src/components/Scenario/TestRun/Filters/FilterDetail/FilterDetail.tsx
@@ -2,8 +2,8 @@ import { type TestRunFilterName } from '../filters';
 import { StartedAfterFilter } from './StartedAfterFilter';
 import { StatusesFilter } from './StatusesFilter';
 import { match } from 'ts-pattern';
-import { CreatorFilter } from './CreatorFilter';
-import { VersionFilter } from './VersionFilter';
+import { CreatorsFilter } from './CreatorsFilter';
+import { VersionsFilter } from './VersionsFilter';
 
 export function FilterDetail({
   filterName,
@@ -13,8 +13,8 @@ export function FilterDetail({
   return match(filterName)
     .with('startedAfter', () => <StartedAfterFilter />)
     .with('statuses', () => <StatusesFilter />)
-    .with('creator', () => <CreatorFilter />)
-    .with('ref_version', () => <VersionFilter type="ref" />)
-    .with('test_version', () => <VersionFilter type="test" />)
+    .with('creators', () => <CreatorsFilter />)
+    .with('ref_versions', () => <VersionsFilter type="ref" />)
+    .with('test_versions', () => <VersionsFilter type="test" />)
     .exhaustive();
 }
diff --git a/...un/Filters/FilterDetail/VersionFilter.tsx → ...n/Filters/FilterDetail/VersionsFilter.tsx b/...un/Filters/FilterDetail/VersionFilter.tsx → ...n/Filters/FilterDetail/VersionsFilter.tsx
@@ -7,7 +7,7 @@ import {
 } from '../TestRunsFiltersContext';
 import { useScenarioIterations } from '@app-builder/routes/_builder+/scenarios+/$scenarioId+/_layout';
 
-export function VersionFilter({ type }: { type: 'ref' | 'test' }) {
+export function VersionsFilter({ type }: { type: 'ref' | 'test' }) {
   const [value, setSearchValue] = useState('');
   const { refVersion, setRefVersion } = useRefVersionFilter();
   const { testVersion, setTestVersion } = useTestVersionFilter();

diff --git a/packages/app-builder/src/components/Scenario/TestRun/Filters/TestRunsFiltersBar.tsx b/packages/app-builder/src/components/Scenario/TestRun/Filters/TestRunsFiltersBar.tsx
@@ -13,18 +13,15 @@ import {
   useTestRunsFiltersContext,
   useTestRunsFiltersPartition,
   useClearFilter,
-  TestRunsFiltersForm,
   useClearAllFilters,
 } from './TestRunsFiltersContext';
 import { TestRunsFiltersMenu } from './TestRunsFiltersMenu';
 import { FilterDetail } from './FilterDetail';
 import { getFilterIcon, getFilterTKey } from './filters';
-import { useFormContext } from 'react-hook-form';
 
 export function TestRunsFiltersBar() {
   const { t } = useTranslation(['scenarios', 'common']);
   const { onTestRunsFilterClose } = useTestRunsFiltersContext();
-  const { reset } = useFormContext<TestRunsFiltersForm>();
 
   const onOpenChange = useCallback(
     (open: boolean) => {
@@ -60,7 +57,7 @@ export function TestRunsFiltersBar() {
                   <FilterItem.Trigger>
                     <Icon icon={icon} className="size-5" />
                     <span className="text-s font-semibold first-letter:capitalize">
-                      {t(tKey)}
+                      <span>{t(tKey)}</span>
                     </span>
                   </FilterItem.Trigger>
                   <FilterItem.Clear

diff --git a/packages/app-builder/src/components/Scenario/TestRun/Filters/TestRunsFiltersContext.tsx b/packages/app-builder/src/components/Scenario/TestRun/Filters/TestRunsFiltersContext.tsx
@@ -19,9 +19,9 @@ import { type TestRunFilterName, testRunsFilterNames } from './filters';
 export const testRunsFiltersSchema = z.object({
   statuses: z.array(z.enum(testRunStatuses)).optional(),
   startedAfter: z.date().optional(),
-  creator: z.string().optional(),
-  ref_version: z.string().optional(),
-  test_version: z.string().optional(),
+  creators: z.array(z.string()).optional(),
+  ref_versions: z.array(z.string()).optional(),
+  test_versions: z.array(z.string()).optional(),
 });
 
 export type TestRunsFilters = z.infer<typeof testRunsFiltersSchema>;
@@ -36,16 +36,13 @@ const TestRunsFiltersContext = createSimpleContext<TestRunsFiltersContextValue>(
   'TestRunsFiltersContext',
 );
 
-export type TestRunsFiltersForm = {
-  statuses: TestRunStatus[];
-  startedAfter?: Date;
-  creator?: string;
-  ref_version?: string;
-  test_version?: string;
-};
+export type TestRunsFiltersForm = TestRunsFilters;
 
 export const emptyTestRunsFilters: TestRunsFiltersForm = {
   statuses: [],
+  creators: [],
+  ref_versions: [],
+  test_versions: [],
 };
 
 function adaptFilterValues({
@@ -122,26 +119,26 @@ export function useStartedAfterFilter() {
 }
 
 export const useCreatorFilter = () => {
-  const { field } = useController<TestRunsFiltersForm, 'creator'>({
-    name: 'creator',
+  const { field } = useController<TestRunsFiltersForm, 'creators'>({
+    name: 'creators',
   });
   const creator = field.value;
   const setCreator = field.onChange;
   return { creator, setCreator };
 };
 
 export const useRefVersionFilter = () => {
-  const { field } = useController<TestRunsFiltersForm, 'ref_version'>({
-    name: 'ref_version',
+  const { field } = useController<TestRunsFiltersForm, 'ref_versions'>({
+    name: 'ref_versions',
   });
   const refVersion = field.value;
   const setRefVersion = field.onChange;
   return { refVersion, setRefVersion };
 };
 
 export const useTestVersionFilter = () => {
-  const { field } = useController<TestRunsFiltersForm, 'test_version'>({
-    name: 'test_version',
+  const { field } = useController<TestRunsFiltersForm, 'test_versions'>({
+    name: 'test_versions',
   });
   const testVersion = field.value;
   const setTestVersion = field.onChange;

diff --git a/packages/app-builder/src/components/Scenario/TestRun/Filters/filters.ts b/packages/app-builder/src/components/Scenario/TestRun/Filters/filters.ts
@@ -4,9 +4,9 @@ import { match } from 'ts-pattern';
 export const testRunsFilterNames = [
   'startedAfter',
   'statuses',
-  'creator',
-  'ref_version',
-  'test_version',
+  'creators',
+  'ref_versions',
+  'test_versions',
 ] as const;
 
 export type TestRunFilterName = (typeof testRunsFilterNames)[number];
@@ -15,9 +15,9 @@ export const getFilterIcon = (filterName: TestRunFilterName): IconName =>
   match<TestRunFilterName, IconName>(filterName)
     .with('startedAfter', () => 'calendar-month')
     .with('statuses', () => 'category')
-    .with('creator', () => 'person')
-    .with('ref_version', () => 'version')
-    .with('test_version', () => 'version')
+    .with('creators', () => 'person')
+    .with('ref_versions', () => 'version')
+    .with('test_versions', () => 'version')
     .exhaustive();
 
 export const getFilterTKey = (filterName: TestRunFilterName) =>
@@ -27,10 +27,13 @@ export const getFilterTKey = (filterName: TestRunFilterName) =>
       () => 'scenarios:testrun.filters.started_after' as const,
     )
     .with('statuses', () => 'scenarios:testrun.filters.status' as const)
-    .with('creator', () => 'scenarios:testrun.filters.creator' as const)
-    .with('ref_version', () => 'scenarios:testrun.filters.ref_version' as const)
+    .with('creators', () => 'scenarios:testrun.filters.creator' as const)
     .with(
-      'test_version',
+      'ref_versions',
+      () => 'scenarios:testrun.filters.ref_version' as const,
+    )
+    .with(
+      'test_versions',
       () => 'scenarios:testrun.filters.test_version' as const,
     )
     .exhaustive();
diff --git a/packages/app-builder/src/components/Scenario/TestRun/TestRunDetails.tsx b/packages/app-builder/src/components/Scenario/TestRun/TestRunDetails.tsx
@@ -0,0 +1,145 @@
+import { Spinner } from '@app-builder/components/Spinner';
+import { User } from '@app-builder/models';
+import { ScenarioIterationWithType } from '@app-builder/models/scenario-iteration';
+import { TestRun } from '@app-builder/models/testrun';
+import { formatDateTime, useFormatLanguage } from '@app-builder/utils/format';
+import { match } from 'ts-pattern';
+import { Avatar, Tag } from 'ui-design-system';
+import { Icon } from 'ui-icons';
+
+export const TestRunDetails = ({
+  refIterationId,
+  testIterationId,
+  startDate,
+  status,
+  endDate,
+  iterations,
+  creator,
+}: TestRun & {
+  creator?: User;
+  iterations: Record<
+    string,
+    Pick<ScenarioIterationWithType, 'version' | 'type'>
+  >;
+}) => {
+  const language = useFormatLanguage();
+
+  return (
+    <div className="bg-grey-00 border-grey-10 flex flex-row gap-10 rounded-lg border p-8">
+      <div className="flex flex-col gap-2">
+        <span className="text-grey-100 font-semibold">Version</span>
+        <div className="flex flex-row items-center gap-1">
+          <Tag
+            size="big"
+            color="grey-light"
+            className="border-grey-10 gap-1 border px-4 py-2"
+          >
+            <span className="text-grey-100 font-semibold">
+              {`V${iterations[refIterationId]?.version}`}
+            </span>
+            {iterations[refIterationId]?.type === 'live version' ? (
+              <span className="font-semibold text-purple-100">Live</span>
+            ) : null}
+          </Tag>
+          <Icon icon="arrow-range" className="text-grey-100 size-5" />
+          <Tag
+            size="big"
+            color="grey-light"
+            className="border-grey-10 border px-4 py-2"
+          >
+            {`V${iterations[testIterationId]?.version}`}
+          </Tag>
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="text-grey-100 font-semibold">Period</span>
+        <span className="text-s inline-flex h-10 flex-row items-center gap-1">
+          From
+          <span className="font-semibold">
+            {formatDateTime(new Date(+startDate), {
+              language,
+              timeStyle: undefined,
+            })}
+          </span>
+          To
+          <span className="font-semibold">
+            {formatDateTime(new Date(+endDate), {
+              language,
+              timeStyle: undefined,
+            })}
+          </span>
+        </span>
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="text-grey-100 font-semibold">Creator</span>
+        <div className="flex flex-row items-center gap-4">
+          <Avatar
+            firstName={creator?.firstName}
+            lastName={creator?.lastName}
+            size="m"
+          />
+          {creator ? (
+            <span className="text-grey-100 text-s">
+              {creator.firstName} {creator.lastName}
+            </span>
+          ) : null}
+        </div>
+      </div>
+      <div className="flex flex-col gap-2">
+        <span className="text-grey-100 font-semibold">Status</span>
+        <div className="flex flex-row items-center gap-1">
+          {match(status)
+            .with('up', () => (
+              <Tag
+                border="square"
+                size="big"
+                className="inline-flex flex-row items-center gap-1 bg-purple-100"
+              >
+                <Spinner className="size-3" />
+                <span className="text-grey-00 text-s font-semibold">
+                  Ongoing
+                </span>
+              </Tag>
+            ))
+            .with('down', () => (
+              <Tag
+                border="square"
+                size="big"
+                color="grey"
+                className="inline-flex flex-row items-center gap-2"
+              >
+                <span className="text-grey-50 text-s font-semibold">
+                  Archived
+                </span>
+              </Tag>
+            ))
+            .with('unknown', () => (
+              <Tag
+                border="square"
+                size="big"
+                color="grey-light"
+                className="inline-flex flex-row items-center gap-2"
+              >
+                <span className="text-grey-50 text-s font-semibold">
+                  Unknown
+                </span>
+              </Tag>
+            ))
+            .with('pending', () => (
+              <Tag
+                border="square"
+                size="big"
+                color="grey-light"
+                className="inline-flex flex-row items-center gap-2"
+              >
+                <span className="text-grey-50 text-s font-semibold">
+                  Pending
+                </span>
+              </Tag>
+            ))
+            .exhaustive()}
+        </div>
+      </div>
+    </div>
+  );
+};
diff --git a/...nents/Scenario/TestRun/TestRunPreview.tsx → ...ents/Scenario/TestRun/TestRunSelector.tsx b/...nents/Scenario/TestRun/TestRunPreview.tsx → ...ents/Scenario/TestRun/TestRunSelector.tsx
@@ -12,7 +12,7 @@ import { match } from 'ts-pattern';
 import { Avatar, Tag } from 'ui-design-system';
 import { Icon } from 'ui-icons';
 
-export const TestRunPreview = ({
+export const TestRunSelector = ({
   id,
   status,
   refIterationId,
@@ -22,14 +22,12 @@ export const TestRunPreview = ({
   endDate,
   users,
   iterations,
-  className,
 }: TestRun & {
   users: Record<string, Pick<User, 'firstName' | 'lastName'>>;
   iterations: Record<
     string,
     Pick<ScenarioIterationWithType, 'version' | 'type'>
   >;
-  className?: string;
 }) => {
   const navigate = useNavigate();
   const currentScenario = useCurrentScenario();
@@ -41,7 +39,7 @@ export const TestRunPreview = ({
         navigate(
           getRoute('/scenarios/:scenarioId/test-run/:testRunId', {
             scenarioId: fromUUID(currentScenario.id),
-            testRunId: id,
+            testRunId: fromUUID(id),
           }),
         );
       }}
@@ -51,7 +49,6 @@ export const TestRunPreview = ({
           'bg-grey-00 hover:bg-grey-05 border-grey-10': status !== 'up',
           'bg-purple-05 hover:bg-purple-10 border-purple-100': status === 'up',
         },
-        className,
       )}
     >
       <div className="px-4">

diff --git a/packages/app-builder/src/locales/en/scenarios.json b/packages/app-builder/src/locales/en/scenarios.json
@@ -55,6 +55,7 @@
   "testrun.filters.ref_version": "Ref. version",
   "testrun.filters.test_version": "Test version",
   "testrun.filters.started_after": "Started after",
+  "testrun.filters.period": "Period",
   "testrun.filters.creator": "Creator",
   "testrun.filters.status": "Status",
   "testrun.status.up": "Ongoing",