diff --git a/packages/app-builder/package.json b/packages/app-builder/package.json index 6071b18d5..f2702d4c7 100644 --- a/packages/app-builder/package.json +++ b/packages/app-builder/package.json @@ -107,6 +107,7 @@ "ui-design-system": "workspace:*", "ui-icons": "workspace:*", "zod": "^3.23.8", - "zustand": "^5.0.0" + "zustand": "^5.0.0", + "@swan-io/boxed": "^3.2.0" } } diff --git a/packages/app-builder/src/components/Breadcrumbs.tsx b/packages/app-builder/src/components/Breadcrumbs.tsx new file mode 100644 index 000000000..32519869e --- /dev/null +++ b/packages/app-builder/src/components/Breadcrumbs.tsx @@ -0,0 +1,79 @@ +import { Link, useMatches } from '@remix-run/react'; +import { Future } from '@swan-io/boxed'; +import clsx from 'clsx'; +import { + type FunctionComponent, + type PropsWithChildren, + useEffect, + useState, +} from 'react'; +import { filter } from 'remeda'; + +type Links = { + Element: FunctionComponent | undefined; + pathname: string; +}[]; + +const Separator = () => ( + / +); + +const LinkWrapper = ({ + isLast, + children, + pathname, +}: PropsWithChildren<{ isLast: boolean; pathname: string }>) => { + return isLast ? ( + children + ) : ( + + {children} + + ); +}; + +export const BreadCrumbs = () => { + const matches = useMatches(); + const [links, setLinks] = useState([]); + + console.log('Matches', matches); + + useEffect(() => { + Future.all( + matches.map(({ id, pathname }) => + Future.fromPromise( + import(/* @vite-ignore */ `../${id}`) as Promise<{ + BreadCrumb?: FunctionComponent; + }>, + ).map((result) => ({ + Element: result.isOk() ? result.value.BreadCrumb : undefined, + pathname, + })), + ), + ) + .map(filter((r) => r.Element !== undefined)) + .then(setLinks); + }, [matches]); + + return ( +
+ {links.map(({ Element, pathname }, i) => { + const isLast = i === links.length - 1; + + return Element ? ( +
+ + + + {!isLast ? : null} +
+ ) : null; + })} +
+ ); +}; diff --git a/packages/app-builder/src/repositories/TestRunRepository.ts b/packages/app-builder/src/repositories/TestRunRepository.ts index be462e808..b31a2bc61 100644 --- a/packages/app-builder/src/repositories/TestRunRepository.ts +++ b/packages/app-builder/src/repositories/TestRunRepository.ts @@ -14,6 +14,7 @@ import { } from '@app-builder/models/testrun'; import { toUUID } from '@app-builder/utils/short-uuid'; import { addDays } from 'date-fns'; +import { sleep } from 'radash'; import { randomInteger } from 'remeda'; import short from 'short-uuid'; @@ -30,13 +31,13 @@ export interface TestRunRepository { const testruns: TestRun[] = [ { - id: '989ed5e4-c7ca-4685-9535-a3e1ab9dfc75', - refIterationId: '6f6fe0d8-9a1a-4d5a-bdd7-fa7fcda1b4e3', - scenarioId: '6f6fe0d8-0804-4500-ae68-f4e56ea780d7', - testIterationId: '6f6fe0d8-bbc8-4df3-a913-c0064ed99e4e', + id: '84386e82-2da2-493a-a08f-0e6456756193', + refIterationId: '84386e82-45cf-4fdf-9112-9fab1a55e8be', + scenarioId: '84386e82-a26f-4317-b1e3-373efdf6f6b1', + testIterationId: '84386e82-4d57-4aea-9c62-d60d496319a6', startDate: new Date().toISOString(), endDate: addDays(new Date(), 1).toISOString(), - creatorId: '96762987-8895-4af2-9c0a-2dffde09985c', + creatorId: '34c74c92-4570-4623-9ea8-fa9374d11e4b', status: 'up', }, ]; @@ -176,8 +177,15 @@ export const makeGetTestRunRepository2 = () => { return Promise.resolve(); }, listTestRuns: () => Promise.resolve(testruns), - listDecisions: () => Promise.resolve(testrunDecisions), - listRuleExecutions: () => Promise.resolve(testrunRuleExecutions), + listDecisions: async () => { + await sleep(1500); + return testrunDecisions; + }, + listRuleExecutions: async () => { + await sleep(4000); + //throw new Error('Some Timeout'); + return testrunRuleExecutions; + }, launchTestRun: (args: TestRunCreateInput) => { const testRun: TestRun = { id: toUUID(short.generate()), diff --git a/packages/app-builder/src/routes/_builder+/analytics.tsx b/packages/app-builder/src/routes/_builder+/analytics.tsx index 4b2908acc..38284c2ff 100644 --- a/packages/app-builder/src/routes/_builder+/analytics.tsx +++ b/packages/app-builder/src/routes/_builder+/analytics.tsx @@ -1,4 +1,5 @@ import { ErrorComponent, Page } from '@app-builder/components'; +import { BreadCrumbs } from '@app-builder/components/Breadcrumbs'; import { isAnalyticsAvailable } from '@app-builder/services/feature-access'; import { serverServices } from '@app-builder/services/init.server'; import { notFound } from '@app-builder/utils/http/http-responses'; @@ -41,19 +42,26 @@ export async function loader({ request }: LoaderFunctionArgs) { }); } +export const BreadCrumb = () => { + const { t } = useTranslation(['navigation']); + + return ( +
+ + + {t('navigation:analytics')} + +
+ ); +}; + export default function Analytics() { - const { t } = useTranslation(handle.i18n); const { globalDashbord } = useLoaderData(); return ( -
- - - {t('navigation:analytics')} - -
+