Skip to content

Commit 8ff37a2

Browse files
jamakasejamakase
authored
Add placeholder (#4816)
1 parent b05ab17 commit 8ff37a2

File tree

11 files changed

+78
-94
lines changed

11 files changed

+78
-94
lines changed

‎airbyte-webapp/public/empty-connections.png

244 KB
Loading

‎airbyte-webapp/public/empty-destinations.png

134 KB
Loading

‎airbyte-webapp/public/empty-sources.png

152 KB
Loading

‎airbyte-webapp/src/components/Placeholder/Placeholder.tsx

+27
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import React from "react";
2+
import styled from "styled-components";
3+
import { ResourceTypes } from "./types";
4+
5+
type PlaceholderProps = {
6+
resource: ResourceTypes;
7+
};
8+
9+
const Img = styled.img<PlaceholderProps>`
10+
max-height: ${({ resource }) =>
11+
resource === ResourceTypes.Connections
12+
? "465"
13+
: resource === ResourceTypes.Destinations
14+
? "409"
15+
: "534"}px;
16+
max-width: 100%;
17+
margin: 100px auto 0;
18+
display: block;
19+
`;
20+
21+
const Placeholder: React.FC<PlaceholderProps> = ({ resource }) => {
22+
return (
23+
<Img src={`/empty-${resource}.png`} alt="placeholder" resource={resource} />
24+
);
25+
};
26+
27+
export default Placeholder;

‎airbyte-webapp/src/components/Placeholder/index.tsx

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
import Placeholder from "./Placeholder";
2+
import { ResourceTypes } from "./types";
3+
4+
export default Placeholder;
5+
export { Placeholder, ResourceTypes };

‎airbyte-webapp/src/components/Placeholder/types.ts

+5
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
export enum ResourceTypes {
2+
Sources = "sources",
3+
Connections = "connections",
4+
Destinations = "destinations",
5+
}

‎airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx

+3-18
Original file line numberDiff line numberDiff line change
@@ -1,26 +1,15 @@
11
import React, { Suspense } from "react";
22
import { FormattedMessage } from "react-intl";
33
import { useResource } from "rest-hooks";
4-
import styled from "styled-components";
54

6-
import {
7-
Button,
8-
MainPageWithScroll,
9-
PageTitle,
10-
LoadingPage,
11-
ContentCard,
12-
} from "components";
5+
import { Button, MainPageWithScroll, PageTitle, LoadingPage } from "components";
136
import ConnectionResource from "core/resources/Connection";
147
import config from "config";
158
import ConnectionsTable from "./components/ConnectionsTable";
169
import { Routes } from "pages/routes";
1710
import useRouter from "components/hooks/useRouterHook";
18-
import EmptyResource from "components/EmptyResourceBlock";
1911
import HeadTitle from "components/HeadTitle";
20-
21-
const Content = styled(ContentCard)`
22-
margin: 0 32px 0 27px;
23-
`;
12+
import Placeholder, { ResourceTypes } from "components/Placeholder";
2413

2514
const AllConnectionsPage: React.FC = () => {
2615
const { push } = useRouter();
@@ -49,11 +38,7 @@ const AllConnectionsPage: React.FC = () => {
4938
{connections.length ? (
5039
<ConnectionsTable connections={connections} />
5140
) : (
52-
<Content>
53-
<EmptyResource
54-
text={<FormattedMessage id="connection.noConnections" />}
55-
/>
56-
</Content>
41+
<Placeholder resource={ResourceTypes.Connections} />
5742
)}
5843
</Suspense>
5944
</MainPageWithScroll>

‎airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx

+17-24
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
import React from "react";
22
import { FormattedMessage } from "react-intl";
3-
import styled from "styled-components";
43
import { useResource } from "rest-hooks";
54

6-
import { Button } from "components";
5+
import { Button, MainPageWithScroll } from "components";
76
import { Routes } from "../../../routes";
87
import PageTitle from "components/PageTitle";
98
import useRouter from "components/hooks/useRouterHook";
109
import DestinationsTable from "./components/DestinationsTable";
1110
import config from "config";
12-
import ContentCard from "components/ContentCard";
13-
import EmptyResource from "components/EmptyResourceBlock";
1411
import DestinationResource from "core/resources/Destination";
1512
import HeadTitle from "components/HeadTitle";
16-
17-
const Content = styled(ContentCard)`
18-
margin: 0 32px 0 27px;
19-
`;
13+
import Placeholder, { ResourceTypes } from "components/Placeholder";
2014

2115
const AllDestinationsPage: React.FC = () => {
2216
const { push } = useRouter();
@@ -29,26 +23,25 @@ const AllDestinationsPage: React.FC = () => {
2923
push(`${Routes.Destination}${Routes.DestinationNew}`);
3024

3125
return (
32-
<>
33-
<HeadTitle titles={[{ id: "admin.destinations" }]} />
34-
<PageTitle
35-
title={<FormattedMessage id="admin.destinations" />}
36-
endComponent={
37-
<Button onClick={onCreateDestination} data-id="new-destination">
38-
<FormattedMessage id="destination.newDestination" />
39-
</Button>
40-
}
41-
/>
26+
<MainPageWithScroll
27+
headTitle={<HeadTitle titles={[{ id: "admin.destinations" }]} />}
28+
pageTitle={
29+
<PageTitle
30+
title={<FormattedMessage id="admin.destinations" />}
31+
endComponent={
32+
<Button onClick={onCreateDestination} data-id="new-destination">
33+
<FormattedMessage id="destination.newDestination" />
34+
</Button>
35+
}
36+
/>
37+
}
38+
>
4239
{destinations.length ? (
4340
<DestinationsTable destinations={destinations} />
4441
) : (
45-
<Content>
46-
<EmptyResource
47-
text={<FormattedMessage id="destinations.noDestinations" />}
48-
/>
49-
</Content>
42+
<Placeholder resource={ResourceTypes.Destinations} />
5043
)}
51-
</>
44+
</MainPageWithScroll>
5245
);
5346
};
5447

‎airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx

+2-15
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,11 @@
11
import React, { Suspense, useMemo, useState } from "react";
22
import { FormattedMessage } from "react-intl";
3-
import styled from "styled-components";
43
import { useResource } from "rest-hooks";
54

65
import PageTitle from "components/PageTitle";
76
import useRouter from "components/hooks/useRouterHook";
87
import config from "config";
9-
import ContentCard from "components/ContentCard";
10-
import EmptyResource from "components/EmptyResourceBlock";
8+
import Placeholder, { ResourceTypes } from "components/Placeholder";
119
import ConnectionResource from "core/resources/Connection";
1210
import { Routes } from "../../../routes";
1311
import Breadcrumbs from "components/Breadcrumbs";
@@ -28,10 +26,6 @@ import ImageBlock from "components/ImageBlock";
2826
import SourceDefinitionResource from "core/resources/SourceDefinition";
2927
import HeadTitle from "components/HeadTitle";
3028

31-
const Content = styled(ContentCard)`
32-
margin: 0 32px 0 27px;
33-
`;
34-
3529
const DestinationItemPage: React.FC = () => {
3630
const { query, push } = useRouter<{ id: string }>();
3731

@@ -140,14 +134,7 @@ const DestinationItemPage: React.FC = () => {
140134
connections={connectionsWithDestination}
141135
/>
142136
) : (
143-
<Content>
144-
<EmptyResource
145-
text={<FormattedMessage id="destinations.noSources" />}
146-
description={
147-
<FormattedMessage id="destinations.addSourceReplicateData" />
148-
}
149-
/>
150-
</Content>
137+
<Placeholder resource={ResourceTypes.Sources} />
151138
)}
152139
</>
153140
);

‎airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx

+17-22
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,16 @@
11
import React from "react";
22
import { FormattedMessage } from "react-intl";
3-
import styled from "styled-components";
43
import { useResource } from "rest-hooks";
54

6-
import { Button } from "components";
5+
import { Button, MainPageWithScroll } from "components";
76
import { Routes } from "../../../routes";
87
import PageTitle from "components/PageTitle";
98
import useRouter from "components/hooks/useRouterHook";
109
import SourcesTable from "./components/SourcesTable";
1110
import config from "config";
12-
import ContentCard from "components/ContentCard";
13-
import EmptyResource from "components/EmptyResourceBlock";
1411
import SourceResource from "core/resources/Source";
1512
import HeadTitle from "components/HeadTitle";
16-
17-
const Content = styled(ContentCard)`
18-
margin: 0 32px 0 27px;
19-
`;
13+
import Placeholder, { ResourceTypes } from "components/Placeholder";
2014

2115
const AllSourcesPage: React.FC = () => {
2216
const { push } = useRouter();
@@ -27,24 +21,25 @@ const AllSourcesPage: React.FC = () => {
2721

2822
const onCreateSource = () => push(`${Routes.Source}${Routes.SourceNew}`);
2923
return (
30-
<>
31-
<HeadTitle titles={[{ id: "admin.sources" }]} />
32-
<PageTitle
33-
title={<FormattedMessage id="sidebar.sources" />}
34-
endComponent={
35-
<Button onClick={onCreateSource} data-id="new-source">
36-
<FormattedMessage id="sources.newSource" />
37-
</Button>
38-
}
39-
/>
24+
<MainPageWithScroll
25+
headTitle={<HeadTitle titles={[{ id: "admin.sources" }]} />}
26+
pageTitle={
27+
<PageTitle
28+
title={<FormattedMessage id="sidebar.sources" />}
29+
endComponent={
30+
<Button onClick={onCreateSource} data-id="new-source">
31+
<FormattedMessage id="sources.newSource" />
32+
</Button>
33+
}
34+
/>
35+
}
36+
>
4037
{sources.length ? (
4138
<SourcesTable sources={sources} />
4239
) : (
43-
<Content>
44-
<EmptyResource text={<FormattedMessage id="sources.noSources" />} />
45-
</Content>
40+
<Placeholder resource={ResourceTypes.Sources} />
4641
)}
47-
</>
42+
</MainPageWithScroll>
4843
);
4944
};
5045

‎airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx

+2-15
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,5 @@
11
import React, { Suspense, useMemo, useState } from "react";
22
import { FormattedMessage } from "react-intl";
3-
import styled from "styled-components";
43
import { useResource } from "rest-hooks";
54

65
import config from "config";
@@ -9,8 +8,6 @@ import { Routes } from "pages/routes";
98
import { ImageBlock } from "components";
109
import PageTitle from "components/PageTitle";
1110
import useRouter from "components/hooks/useRouterHook";
12-
import ContentCard from "components/ContentCard";
13-
import EmptyResource from "components/EmptyResourceBlock";
1411
import Breadcrumbs from "components/Breadcrumbs";
1512
import {
1613
ItemTabs,
@@ -31,10 +28,7 @@ import SourceDefinitionResource from "core/resources/SourceDefinition";
3128
import DestinationsDefinitionResource from "core/resources/DestinationDefinition";
3229
import { getIcon } from "utils/imageUtils";
3330
import HeadTitle from "components/HeadTitle";
34-
35-
const Content = styled(ContentCard)`
36-
margin: 0 32px 0 27px;
37-
`;
31+
import Placeholder, { ResourceTypes } from "components/Placeholder";
3832

3933
const SourceItemPage: React.FC = () => {
4034
const { query, push } = useRouter<{ id: string }>();
@@ -131,14 +125,7 @@ const SourceItemPage: React.FC = () => {
131125
{connectionsWithSource.length ? (
132126
<SourceConnectionTable connections={connectionsWithSource} />
133127
) : (
134-
<Content>
135-
<EmptyResource
136-
text={<FormattedMessage id="sources.noDestinations" />}
137-
description={
138-
<FormattedMessage id="sources.addDestinationReplicateData" />
139-
}
140-
/>
141-
</Content>
128+
<Placeholder resource={ResourceTypes.Destinations} />
142129
)}
143130
</>
144131
);

0 commit comments

Comments
 (0)