Skip to content

Commit a039705

Browse files
purnimagarg1purnimagarg1
authored
feat(ui/ingestion): create new page for ingestion run details (#15443)
1 parent 1696304 commit a039705

File tree

24 files changed

+538
-153
lines changed

24 files changed

+538
-153
lines changed

‎datahub-web-react/src/alchemy-components/components/Breadcrumb/Breadcrumb.stories.tsx‎

Lines changed: 100 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,100 @@
1+
import { BADGE } from '@geometricpanda/storybook-addon-badges';
2+
import type { Meta, StoryObj } from '@storybook/react';
3+
import React from 'react';
4+
5+
import { Breadcrumb } from '@components/components/Breadcrumb';
6+
import { Icon } from '@components/components/Icon';
7+
8+
// Auto Docs
9+
const meta = {
10+
title: 'Components / Breadcrumb',
11+
component: Breadcrumb,
12+
13+
parameters: {
14+
layout: 'centered',
15+
badges: [BADGE.STABLE, 'readyForDesignReview'],
16+
docs: {
17+
subtitle: 'Breadcrumb navigation component',
18+
},
19+
},
20+
21+
argTypes: {
22+
items: {
23+
description:
24+
'The breadcrumb items. Items can be a link (`href`), clickable (`onClick`), or non-interactive text.',
25+
control: { type: 'object' },
26+
},
27+
},
28+
29+
args: {
30+
items: [
31+
{ label: 'Home', href: '/' },
32+
{ label: 'Data Sources', href: '/data-sources' },
33+
{ label: 'Details', isCurrent: true },
34+
],
35+
},
36+
} satisfies Meta<typeof Breadcrumb>;
37+
38+
export default meta;
39+
40+
type Story = StoryObj<typeof meta>;
41+
42+
export const sandbox: Story = {
43+
tags: ['dev'],
44+
render: (props) => <Breadcrumb {...props} />,
45+
};
46+
47+
export const basic = () => (
48+
<Breadcrumb
49+
items={[
50+
{ label: 'Home', href: '/' },
51+
{ label: 'Library', href: '/library' },
52+
{ label: 'Details', isCurrent: true },
53+
]}
54+
/>
55+
);
56+
57+
export const withClickableButton = () => (
58+
<Breadcrumb
59+
items={[
60+
{ label: 'Back', onClick: () => {} },
61+
{ label: 'Data Sources', href: '/sources' },
62+
{ label: 'Details', isCurrent: true },
63+
]}
64+
/>
65+
);
66+
67+
export const onlyText = () => (
68+
<Breadcrumb items={[{ label: 'Level 1' }, { label: 'Level 2' }, { label: 'Final Level', isCurrent: true }]} />
69+
);
70+
71+
export const withCustomSeparator = () => (
72+
<Breadcrumb
73+
items={[
74+
{
75+
label: 'Home',
76+
href: '/',
77+
separator: <Icon icon="ArrowRight" source="phosphor" color="gray" colorLevel={1800} size="sm" />,
78+
},
79+
{
80+
label: 'Projects',
81+
href: '/projects',
82+
separator: <Icon icon="ArrowRight" source="phosphor" color="gray" colorLevel={1800} size="sm" />,
83+
},
84+
{ label: 'Overview', isCurrent: true },
85+
]}
86+
/>
87+
);
88+
89+
export const longBreadcrumb = () => (
90+
<Breadcrumb
91+
items={[
92+
{ label: 'Home', href: '/' },
93+
{ label: 'Section', href: '/section' },
94+
{ label: 'Category', href: '/category' },
95+
{ label: 'Type', href: '/type' },
96+
{ label: 'Item', href: '/item' },
97+
{ label: 'Details', isCurrent: true },
98+
]}
99+
/>
100+
);

‎datahub-web-react/src/alchemy-components/components/Breadcrumb/Breadcrumb.tsx‎

Lines changed: 48 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,48 @@
1+
import React from 'react';
2+
3+
import {
4+
BreadcrumbButton,
5+
BreadcrumbItemContainer,
6+
BreadcrumbLink,
7+
Wrapper,
8+
} from '@components/components/Breadcrumb/components';
9+
import { BreadcrumbProps } from '@components/components/Breadcrumb/types';
10+
import { Icon } from '@components/components/Icon';
11+
import { Text } from '@components/components/Text';
12+
13+
export const Breadcrumb = ({ items }: BreadcrumbProps) => {
14+
const defaultSeparator = <Icon icon="CaretRight" source="phosphor" color="gray" colorLevel={1800} size="sm" />;
15+
16+
return (
17+
<Wrapper>
18+
{items.map((item, index) => {
19+
const isLast = index === items.length - 1;
20+
21+
let content;
22+
23+
if (item.href) {
24+
content = <BreadcrumbLink to={item.href}>{item.label}</BreadcrumbLink>;
25+
} else if (item.onClick) {
26+
content = (
27+
<BreadcrumbButton size="sm" color="gray" colorLevel={1800} onClick={item.onClick}>
28+
{item.label}
29+
</BreadcrumbButton>
30+
);
31+
} else {
32+
content = (
33+
<Text size="sm" weight={item.isCurrent ? 'semiBold' : 'medium'} color="gray" colorLevel={1800}>
34+
{item.label}
35+
</Text>
36+
);
37+
}
38+
39+
return (
40+
<BreadcrumbItemContainer>
41+
{content}
42+
{!isLast && <>{item.separator || defaultSeparator}</>}
43+
</BreadcrumbItemContainer>
44+
);
45+
})}
46+
</Wrapper>
47+
);
48+
};

‎datahub-web-react/src/alchemy-components/components/Breadcrumb/components.ts‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
import { Link } from 'react-router-dom';
2+
import styled from 'styled-components';
3+
4+
import { Text } from '@components/components/Text';
5+
import { colors } from '@components/theme';
6+
7+
export const Wrapper = styled.nav`
8+
display: flex;
9+
align-items: center;
10+
gap: 4px;
11+
`;
12+
13+
export const BreadcrumbItemContainer = styled.span`
14+
display: flex;
15+
align-items: center;
16+
gap: 4px;
17+
`;
18+
19+
export const BreadcrumbLink = styled(Link)`
20+
color: ${colors.gray[1800]};
21+
font-size: 12px;
22+
text-decoration: none;
23+
cursor: pointer;
24+
`;
25+
26+
export const BreadcrumbButton = styled(Text)`
27+
cursor: pointer;
28+
29+
:hover {
30+
color: ${colors.primary[500]};
31+
}
32+
`;

‎datahub-web-react/src/alchemy-components/components/Breadcrumb/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1 @@
1+
export { Breadcrumb } from './Breadcrumb';

‎datahub-web-react/src/alchemy-components/components/Breadcrumb/types.ts‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
export interface BreadcrumbItem {
2+
label: string | React.ReactNode;
3+
href?: string;
4+
onClick?: () => void;
5+
isCurrent?: boolean;
6+
separator?: React.ReactNode;
7+
}
8+
9+
export interface BreadcrumbProps {
10+
items: BreadcrumbItem[];
11+
}

‎datahub-web-react/src/alchemy-components/components/PageTitle/PageTitle.tsx‎

Lines changed: 9 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -14,13 +14,21 @@ const Wrapper = styled.div`
1414
justify-content: space-between;
1515
`;
1616

17-
export const PageTitle = ({ title, subTitle, pillLabel, variant = 'pageHeader', actionButton }: PageTitleProps) => {
17+
export const PageTitle = ({
18+
title,
19+
subTitle,
20+
pillLabel,
21+
variant = 'pageHeader',
22+
actionButton,
23+
titlePill,
24+
}: PageTitleProps) => {
1825
return (
1926
<Wrapper style={actionButton ? { width: '100%' } : {}}>
2027
<Container>
2128
<Title data-testid="page-title" variant={variant}>
2229
<OverflowText text={title} />
2330
{pillLabel ? <Pill label={pillLabel} size="sm" clickable={false} /> : null}
31+
{titlePill}
2432
</Title>
2533

2634
{subTitle ? <SubTitle variant={variant}>{subTitle}</SubTitle> : null}

‎datahub-web-react/src/alchemy-components/components/PageTitle/types.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -10,4 +10,5 @@ export interface PageTitleProps {
1010
icon?: React.ReactNode;
1111
onClick: () => void;
1212
};
13+
titlePill?: React.ReactNode;
1314
}

‎datahub-web-react/src/alchemy-components/index.ts‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -50,3 +50,4 @@ export * from './components/Utils';
5050
export * from './components/WhiskerChart';
5151
export * from './components/InfiniteScrollList';
5252
export * from './components/Editor';
53+
export * from './components/Breadcrumb';

‎datahub-web-react/src/app/ingestV2/IngestionRoutes.tsx‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ import { Route, Switch } from 'react-router-dom';
33

44
import { ManageIngestionPage } from '@app/ingestV2/ManageIngestionPage';
55
import { useIngestionOnboardingRedesignV1 } from '@app/ingestV2/hooks/useIngestionOnboardingRedesignV1';
6+
import IngestionRunDetailsPage from '@app/ingestV2/runDetails/IngestionRunDetailsPage';
67
import { IngestionSourceCreatePage } from '@app/ingestV2/source/multiStepBuilder/IngestionSourceCreatePage';
78
import { IngestionSourceUpdatePage } from '@app/ingestV2/source/multiStepBuilder/IngestionSourceUpdatePage';
89
import { PageRoutes } from '@conf/Global';
@@ -18,6 +19,9 @@ export default function IngestionRoutes() {
1819
{shouldShowIngestionOnboardingRedesignV1 && (
1920
<Route path={PageRoutes.INGESTION_UPDATE} render={() => <IngestionSourceUpdatePage />} />
2021
)}
22+
{shouldShowIngestionOnboardingRedesignV1 && (
23+
<Route path={PageRoutes.INGESTION_RUN_DETAILS} render={() => <IngestionRunDetailsPage />} />
24+
)}
2125
<Route path={PageRoutes.INGESTION} render={() => <ManageIngestionPage />} />
2226
</Switch>
2327
);

‎datahub-web-react/src/app/ingestV2/executions/components/BaseTab.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,7 @@ import styled from 'styled-components';
44
import colors from '@src/alchemy-components/theme/foundations/colors';
55

66
export const SectionBase = styled.div`
7-
padding: 16px 30px 0;
7+
padding: 16px 20px 16px 0;
88
`;
99

1010
export const SectionHeader = styled(Typography.Title)`

0 commit comments

Comments
 (0)