Skip to content

Commit 528d705

Browse files
purnimagarg1purnimagarg1
authored
feat(ingestions): redesign ingestion table and page (#13585)
1 parent 14fc4f0 commit 528d705

File tree

8 files changed

+494
-406
lines changed

8 files changed

+494
-406
lines changed

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

Lines changed: 90 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,16 @@
1-
import { Tabs, Typography } from 'antd';
1+
import { Button, PageTitle, Tabs } from '@components';
22
import React, { useEffect, useState } from 'react';
33
import { useHistory } from 'react-router';
44
import styled from 'styled-components';
55

6+
import { Tab } from '@components/components/Tabs/Tabs';
7+
68
import { useUserContext } from '@app/context/useUserContext';
79
import { SecretsList } from '@app/ingestV2/secret/SecretsList';
810
import { IngestionSourceList } from '@app/ingestV2/source/IngestionSourceList';
911
import { TabType } from '@app/ingestV2/types';
1012
import { OnboardingTour } from '@app/onboarding/OnboardingTour';
11-
import {
12-
INGESTION_CREATE_SOURCE_ID,
13-
INGESTION_REFRESH_SOURCES_ID,
14-
} from '@app/onboarding/config/IngestionOnboardingConfig';
13+
import { INGESTION_CREATE_SOURCE_ID } from '@app/onboarding/config/IngestionOnboardingConfig';
1514
import { useAppConfig } from '@app/useAppConfig';
1615
import { useShowNavBarRedesign } from '@app/useShowNavBarRedesign';
1716

@@ -30,32 +29,36 @@ const PageContainer = styled.div<{ $isShowNavBarRedesign?: boolean }>`
3029
`}
3130
`;
3231

33-
const PageHeaderContainer = styled.div`
34-
&& {
35-
padding-left: 24px;
36-
}
32+
const PageContentContainer = styled.div`
33+
display: flex;
34+
flex-direction: column;
35+
gap: 24px;
36+
flex: 1;
37+
margin: 0 20px 20px 20px;
38+
height: calc(100% - 80px);
3739
`;
3840

39-
const PageTitle = styled(Typography.Title)`
41+
const PageHeaderContainer = styled.div`
4042
&& {
41-
margin-bottom: 12px;
43+
padding-left: 20px;
44+
padding-right: 20px;
45+
display: flex;
46+
flex-direction: row;
47+
justify-content: space-between;
48+
align-items: center;
49+
margin-bottom: 16px;
4250
}
4351
`;
4452

45-
const StyledTabs = styled(Tabs)`
46-
&&& .ant-tabs-nav {
47-
margin-bottom: 0;
48-
padding-left: 28px;
49-
}
53+
const TitleContainer = styled.div`
54+
flex: 1;
5055
`;
5156

52-
const Tab = styled(Tabs.TabPane)`
53-
font-size: 14px;
54-
line-height: 22px;
57+
const HeaderActionsContainer = styled.div`
58+
display: flex;
59+
justify-content: flex-end;
5560
`;
5661

57-
const ListContainer = styled.div``;
58-
5962
export const ManageIngestionPage = () => {
6063
/**
6164
* Determines which view should be visible: ingestion sources or secrets.
@@ -67,6 +70,8 @@ export const ManageIngestionPage = () => {
6770
const showSecretsTab = isIngestionEnabled && me && me.platformPrivileges?.manageSecrets;
6871
const [selectedTab, setSelectedTab] = useState<TabType>(TabType.Sources);
6972
const isShowNavBarRedesign = useShowNavBarRedesign();
73+
const [showCreateSourceModal, setShowCreateSourceModal] = useState<boolean>(false);
74+
const [showCreateSecretModal, setShowCreateSecretModal] = useState<boolean>(false);
7075

7176
// defaultTab might not be calculated correctly on mount, if `config` or `me` haven't been loaded yet
7277
useEffect(() => {
@@ -84,29 +89,76 @@ export const ManageIngestionPage = () => {
8489
}
8590
};
8691

87-
const TabTypeToListComponent = {
88-
[TabType.Sources]: <IngestionSourceList />,
89-
[TabType.Secrets]: <SecretsList />,
92+
const tabs: Tab[] = [
93+
showIngestionTab && {
94+
component: (
95+
<IngestionSourceList
96+
showCreateModal={showCreateSourceModal}
97+
setShowCreateModal={setShowCreateSourceModal}
98+
/>
99+
),
100+
key: TabType.Sources as string,
101+
name: TabType.Sources as string,
102+
},
103+
showSecretsTab && {
104+
component: (
105+
<SecretsList showCreateModal={showCreateSecretModal} setShowCreateModal={setShowCreateSecretModal} />
106+
),
107+
key: TabType.Secrets as string,
108+
name: TabType.Secrets as string,
109+
},
110+
].filter((tab): tab is Tab => Boolean(tab));
111+
112+
const handleCreateSource = () => {
113+
setShowCreateSourceModal(true);
114+
};
115+
116+
const handleCreateSecret = () => {
117+
setShowCreateSecretModal(true);
90118
};
91119

92120
return (
93121
<PageContainer $isShowNavBarRedesign={isShowNavBarRedesign}>
94-
<OnboardingTour stepIds={[INGESTION_CREATE_SOURCE_ID, INGESTION_REFRESH_SOURCES_ID]} />
122+
<OnboardingTour stepIds={[INGESTION_CREATE_SOURCE_ID]} />
95123
<PageHeaderContainer>
96-
<PageTitle level={3}>Manage Data Sources</PageTitle>
97-
<Typography.Paragraph type="secondary">
98-
Configure and schedule syncs to import data from your data sources
99-
</Typography.Paragraph>
124+
<TitleContainer>
125+
<PageTitle
126+
title="Manage Data Sources"
127+
subTitle="Configure and schedule syncs to import data from your data sources"
128+
/>
129+
</TitleContainer>
130+
<HeaderActionsContainer>
131+
{selectedTab === TabType.Sources && showIngestionTab && (
132+
<Button
133+
variant="filled"
134+
id={INGESTION_CREATE_SOURCE_ID}
135+
onClick={handleCreateSource}
136+
data-testid="create-ingestion-source-button"
137+
icon={{ icon: 'Plus', source: 'phosphor' }}
138+
>
139+
Create new source
140+
</Button>
141+
)}
142+
143+
{selectedTab === TabType.Secrets && showSecretsTab && (
144+
<Button
145+
variant="filled"
146+
onClick={handleCreateSecret}
147+
data-testid="create-secret-button"
148+
icon={{ icon: 'Plus', source: 'phosphor' }}
149+
>
150+
Create new secret
151+
</Button>
152+
)}
153+
</HeaderActionsContainer>
100154
</PageHeaderContainer>
101-
<StyledTabs
102-
activeKey={selectedTab}
103-
size="large"
104-
onTabClick={(tab) => onSwitchTab(tab, { clearQueryParams: true })}
105-
>
106-
{showIngestionTab && <Tab key={TabType.Sources} tab={TabType.Sources} />}
107-
{showSecretsTab && <Tab key={TabType.Secrets} tab={TabType.Secrets} />}
108-
</StyledTabs>
109-
<ListContainer>{TabTypeToListComponent[selectedTab]}</ListContainer>
155+
<PageContentContainer>
156+
<Tabs
157+
tabs={tabs}
158+
selectedTab={selectedTab}
159+
onChange={(tab) => onSwitchTab(tab, { clearQueryParams: true })}
160+
/>
161+
</PageContentContainer>
110162
</PageContainer>
111163
);
112164
};

‎datahub-web-react/src/app/ingestV2/secret/SecretsList.tsx

Lines changed: 6 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -50,7 +50,12 @@ const StyledTableWithNavBarRedesign = styled(StyledTable)`
5050

5151
const DEFAULT_PAGE_SIZE = 25;
5252

53-
export const SecretsList = () => {
53+
interface Props {
54+
showCreateModal: boolean;
55+
setShowCreateModal: (show: boolean) => void;
56+
}
57+
58+
export const SecretsList = ({ showCreateModal: isCreatingSecret, setShowCreateModal: setIsCreatingSecret }: Props) => {
5459
const isShowNavBarRedesign = useShowNavBarRedesign();
5560
const entityRegistry = useEntityRegistry();
5661
const location = useLocation();
@@ -64,8 +69,6 @@ export const SecretsList = () => {
6469
const pageSize = DEFAULT_PAGE_SIZE;
6570
const start = (page - 1) * pageSize;
6671

67-
// Whether or not there is an urn to show in the modal
68-
const [isCreatingSecret, setIsCreatingSecret] = useState<boolean>(false);
6972
const [editSecret, setEditSecret] = useState<SecretBuilderState | undefined>(undefined);
7073

7174
const [deleteSecretMutation] = useDeleteSecretMutation();

0 commit comments

Comments
 (0)