jprdonnelly/airbyte
1
0
Fork 0
mirror of synced 2026-01-06 06:04:16 -05:00
Code Issues Packages Projects Releases Wiki Activity

Add placeholder (#4816)

Browse Source
This commit is contained in:
Artem Astapenko
2021-07-20 01:30:07 +03:00
committed by GitHub
parent b05ab17520
commit 8ff37a2768
11 changed files with 78 additions and 94 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
airbyte-webapp/public/empty-connections.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 244 KiB

BIN
airbyte-webapp/public/empty-destinations.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 134 KiB

BIN
airbyte-webapp/public/empty-sources.png Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 152 KiB

27
airbyte-webapp/src/components/Placeholder/Placeholder.tsx Normal file
View File

@@ -0,0 +1,27 @@
import React from "react";
import styled from "styled-components";
import { ResourceTypes } from "./types";
type PlaceholderProps = {
resource: ResourceTypes;
};
const Img = styled.img<PlaceholderProps>`
max-height: ${({ resource }) =>
resource === ResourceTypes.Connections
? "465"
: resource === ResourceTypes.Destinations
? "409"
: "534"}px;
max-width: 100%;
margin: 100px auto 0;
display: block;
`;
const Placeholder: React.FC<PlaceholderProps> = ({ resource }) => {
return (
<Img src={`/empty-${resource}.png`} alt="placeholder" resource={resource} />
);
};
export default Placeholder;

5
airbyte-webapp/src/components/Placeholder/index.tsx Normal file
View File

@@ -0,0 +1,5 @@
import Placeholder from "./Placeholder";
import { ResourceTypes } from "./types";
export default Placeholder;
export { Placeholder, ResourceTypes };

5
airbyte-webapp/src/components/Placeholder/types.ts Normal file
View File

@@ -0,0 +1,5 @@
export enum ResourceTypes {
Sources = "sources",
Connections = "connections",
Destinations = "destinations",
}

21
airbyte-webapp/src/pages/ConnectionPage/pages/AllConnectionsPage/AllConnectionsPage.tsx
View File

@@ -1,26 +1,15 @@
import React, { Suspense } from "react";
import { FormattedMessage } from "react-intl";
import { useResource } from "rest-hooks";
import styled from "styled-components";
import {
Button,
MainPageWithScroll,
PageTitle,
LoadingPage,
ContentCard,
} from "components";
import { Button, MainPageWithScroll, PageTitle, LoadingPage } from "components";
import ConnectionResource from "core/resources/Connection";
import config from "config";
import ConnectionsTable from "./components/ConnectionsTable";
import { Routes } from "pages/routes";
import useRouter from "components/hooks/useRouterHook";
import EmptyResource from "components/EmptyResourceBlock";
import HeadTitle from "components/HeadTitle";
const Content = styled(ContentCard)`
margin: 0 32px 0 27px;
`;
import Placeholder, { ResourceTypes } from "components/Placeholder";
const AllConnectionsPage: React.FC = () => {
const { push } = useRouter();
@@ -49,11 +38,7 @@ const AllConnectionsPage: React.FC = () => {
{connections.length ? (
<ConnectionsTable connections={connections} />
) : (
<Content>
<EmptyResource
text={<FormattedMessage id="connection.noConnections" />}
/>
</Content>
<Placeholder resource={ResourceTypes.Connections} />
)}
</Suspense>
</MainPageWithScroll>

41
airbyte-webapp/src/pages/DestinationPage/pages/AllDestinationsPage/AllDestinationsPage.tsx
View File

@@ -1,22 +1,16 @@
import React from "react";
import { FormattedMessage } from "react-intl";
import styled from "styled-components";
import { useResource } from "rest-hooks";
import { Button } from "components";
import { Button, MainPageWithScroll } from "components";
import { Routes } from "../../../routes";
import PageTitle from "components/PageTitle";
import useRouter from "components/hooks/useRouterHook";
import DestinationsTable from "./components/DestinationsTable";
import config from "config";
import ContentCard from "components/ContentCard";
import EmptyResource from "components/EmptyResourceBlock";
import DestinationResource from "core/resources/Destination";
import HeadTitle from "components/HeadTitle";
const Content = styled(ContentCard)`
margin: 0 32px 0 27px;
`;
import Placeholder, { ResourceTypes } from "components/Placeholder";
const AllDestinationsPage: React.FC = () => {
const { push } = useRouter();
@@ -29,26 +23,25 @@ const AllDestinationsPage: React.FC = () => {
push(`${Routes.Destination}${Routes.DestinationNew}`);
return (
<>
<HeadTitle titles={[{ id: "admin.destinations" }]} />
<PageTitle
title={<FormattedMessage id="admin.destinations" />}
endComponent={
<Button onClick={onCreateDestination} data-id="new-destination">
<FormattedMessage id="destination.newDestination" />
</Button>
}
/>
<MainPageWithScroll
headTitle={<HeadTitle titles={[{ id: "admin.destinations" }]} />}
pageTitle={
<PageTitle
title={<FormattedMessage id="admin.destinations" />}
endComponent={
<Button onClick={onCreateDestination} data-id="new-destination">
<FormattedMessage id="destination.newDestination" />
</Button>
}
/>
}
>
{destinations.length ? (
<DestinationsTable destinations={destinations} />
) : (
<Content>
<EmptyResource
text={<FormattedMessage id="destinations.noDestinations" />}
/>
</Content>
<Placeholder resource={ResourceTypes.Destinations} />
)}
</>
</MainPageWithScroll>
);
};

17
airbyte-webapp/src/pages/DestinationPage/pages/DestinationItemPage/DestinationItemPage.tsx
View File

@@ -1,13 +1,11 @@
import React, { Suspense, useMemo, useState } from "react";
import { FormattedMessage } from "react-intl";
import styled from "styled-components";
import { useResource } from "rest-hooks";
import PageTitle from "components/PageTitle";
import useRouter from "components/hooks/useRouterHook";
import config from "config";
import ContentCard from "components/ContentCard";
import EmptyResource from "components/EmptyResourceBlock";
import Placeholder, { ResourceTypes } from "components/Placeholder";
import ConnectionResource from "core/resources/Connection";
import { Routes } from "../../../routes";
import Breadcrumbs from "components/Breadcrumbs";
@@ -28,10 +26,6 @@ import ImageBlock from "components/ImageBlock";
import SourceDefinitionResource from "core/resources/SourceDefinition";
import HeadTitle from "components/HeadTitle";
const Content = styled(ContentCard)`
margin: 0 32px 0 27px;
`;
const DestinationItemPage: React.FC = () => {
const { query, push } = useRouter<{ id: string }>();
@@ -140,14 +134,7 @@ const DestinationItemPage: React.FC = () => {
connections={connectionsWithDestination}
/>
) : (
<Content>
<EmptyResource
text={<FormattedMessage id="destinations.noSources" />}
description={
<FormattedMessage id="destinations.addSourceReplicateData" />
}
/>
</Content>
<Placeholder resource={ResourceTypes.Sources} />
)}
</>
);

39
airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/AllSourcesPage.tsx
View File

@@ -1,22 +1,16 @@
import React from "react";
import { FormattedMessage } from "react-intl";
import styled from "styled-components";
import { useResource } from "rest-hooks";
import { Button } from "components";
import { Button, MainPageWithScroll } from "components";
import { Routes } from "../../../routes";
import PageTitle from "components/PageTitle";
import useRouter from "components/hooks/useRouterHook";
import SourcesTable from "./components/SourcesTable";
import config from "config";
import ContentCard from "components/ContentCard";
import EmptyResource from "components/EmptyResourceBlock";
import SourceResource from "core/resources/Source";
import HeadTitle from "components/HeadTitle";
const Content = styled(ContentCard)`
margin: 0 32px 0 27px;
`;
import Placeholder, { ResourceTypes } from "components/Placeholder";
const AllSourcesPage: React.FC = () => {
const { push } = useRouter();
@@ -27,24 +21,25 @@ const AllSourcesPage: React.FC = () => {
const onCreateSource = () => push(`${Routes.Source}${Routes.SourceNew}`);
return (
<>
<HeadTitle titles={[{ id: "admin.sources" }]} />
<PageTitle
title={<FormattedMessage id="sidebar.sources" />}
endComponent={
<Button onClick={onCreateSource} data-id="new-source">
<FormattedMessage id="sources.newSource" />
</Button>
}
/>
<MainPageWithScroll
headTitle={<HeadTitle titles={[{ id: "admin.sources" }]} />}
pageTitle={
<PageTitle
title={<FormattedMessage id="sidebar.sources" />}
endComponent={
<Button onClick={onCreateSource} data-id="new-source">
<FormattedMessage id="sources.newSource" />
</Button>
}
/>
}
>
{sources.length ? (
<SourcesTable sources={sources} />
) : (
<Content>
<EmptyResource text={<FormattedMessage id="sources.noSources" />} />
</Content>
<Placeholder resource={ResourceTypes.Sources} />
)}
</>
</MainPageWithScroll>
);
};

17
airbyte-webapp/src/pages/SourcesPage/pages/SourceItemPage/SourceItemPage.tsx
View File

@@ -1,6 +1,5 @@
import React, { Suspense, useMemo, useState } from "react";
import { FormattedMessage } from "react-intl";
import styled from "styled-components";
import { useResource } from "rest-hooks";
import config from "config";
@@ -9,8 +8,6 @@ import { Routes } from "pages/routes";
import { ImageBlock } from "components";
import PageTitle from "components/PageTitle";
import useRouter from "components/hooks/useRouterHook";
import ContentCard from "components/ContentCard";
import EmptyResource from "components/EmptyResourceBlock";
import Breadcrumbs from "components/Breadcrumbs";
import {
ItemTabs,
@@ -31,10 +28,7 @@ import SourceDefinitionResource from "core/resources/SourceDefinition";
import DestinationsDefinitionResource from "core/resources/DestinationDefinition";
import { getIcon } from "utils/imageUtils";
import HeadTitle from "components/HeadTitle";
const Content = styled(ContentCard)`
margin: 0 32px 0 27px;
`;
import Placeholder, { ResourceTypes } from "components/Placeholder";
const SourceItemPage: React.FC = () => {
const { query, push } = useRouter<{ id: string }>();
@@ -131,14 +125,7 @@ const SourceItemPage: React.FC = () => {
{connectionsWithSource.length ? (
<SourceConnectionTable connections={connectionsWithSource} />
) : (
<Content>
<EmptyResource
text={<FormattedMessage id="sources.noDestinations" />}
description={
<FormattedMessage id="sources.addDestinationReplicateData" />
}
/>
</Content>
<Placeholder resource={ResourceTypes.Destinations} />
)}
</>
);