Add placeholder

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

@@ -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;

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

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

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

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

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

@@ -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>

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

@@ -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>
   );
 };
 

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

@@ -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} />
         )}
       </>
     );

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

@@ -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>
   );
 };
 

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

@@ -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} />
         )}
       </>
     );