Jamakase/refactor initial load (#7713)

* Refactor initial load * Fetch data for sidebar in async * Use current version by default in connector version input * Add custom image annotation
airbytehq · Nov 9, 2021 · 84a5328 · 84a5328
1 parent 16b626c
commit 84a5328
Show file tree

Hide file tree

Showing 14 changed files with 109 additions and 89 deletions.
diff --git a/airbyte-webapp/src/hooks/services/useConnector.tsx b/airbyte-webapp/src/hooks/services/useConnector.tsx
@@ -1,10 +1,11 @@
-import { useFetcher, useResource } from "rest-hooks";
+import { useFetcher } from "rest-hooks";
 import { useMemo } from "react";
 
 import SourceDefinitionResource from "core/resources/SourceDefinition";
 import DestinationDefinitionResource from "core/resources/DestinationDefinition";
 import { Connector } from "core/domain/connector";
-import { useWorkspace } from "hooks/services/useWorkspace";
+import { useSourceDefinitionList } from "./useSourceDefinition";
+import { useDestinationDefinitionList } from "./useDestinationDefinition";
 
 type ConnectorService = {
   hasNewVersions: boolean;
@@ -17,24 +18,12 @@ type ConnectorService = {
 };
 
 const useConnector = (): ConnectorService => {
-  const { workspace } = useWorkspace();
-  const { sourceDefinitions } = useResource(
-    SourceDefinitionResource.listShape(),
-    {
-      workspaceId: workspace.workspaceId,
-    }
-  );
-  const { destinationDefinitions } = useResource(
-    DestinationDefinitionResource.listShape(),
-    {
-      workspaceId: workspace.workspaceId,
-    }
-  );
+  const { sourceDefinitions } = useSourceDefinitionList();
+  const { destinationDefinitions } = useDestinationDefinitionList();
 
   const updateSourceDefinition = useFetcher(
     SourceDefinitionResource.updateShape()
   );
-
   const updateDestinationDefinition = useFetcher(
     DestinationDefinitionResource.updateShape()
   );

diff --git a/airbyte-webapp/src/hooks/services/useDestinationDefinition.tsx b/airbyte-webapp/src/hooks/services/useDestinationDefinition.tsx
@@ -0,0 +1,18 @@
+import { useResource } from "rest-hooks";
+
+import DestinationDefinitionResource, {
+  DestinationDefinition,
+} from "core/resources/DestinationDefinition";
+import useWorkspace from "./useWorkspace";
+
+const useDestinationDefinitionList = (): {
+  destinationDefinitions: DestinationDefinition[];
+} => {
+  const { workspace } = useWorkspace();
+
+  return useResource(DestinationDefinitionResource.listShape(), {
+    workspaceId: workspace.workspaceId,
+  });
+};
+
+export { useDestinationDefinitionList };
diff --git a/airbyte-webapp/src/hooks/services/useSourceDefinition.tsx b/airbyte-webapp/src/hooks/services/useSourceDefinition.tsx
@@ -0,0 +1,18 @@
+import { useResource } from "rest-hooks";
+
+import SourceDefinitionResource, {
+  SourceDefinition,
+} from "core/resources/SourceDefinition";
+import useWorkspace from "./useWorkspace";
+
+const useSourceDefinitionList = (): {
+  sourceDefinitions: SourceDefinition[];
+} => {
+  const { workspace } = useWorkspace();
+
+  return useResource(SourceDefinitionResource.listShape(), {
+    workspaceId: workspace.workspaceId,
+  });
+};
+
+export { useSourceDefinitionList };
diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -369,6 +369,7 @@
   "admin.downloadSchedulerLogs": "Download Scheduler Logs",
   "admin.upgradeAll": "Upgrade all",
   "admin.upgraded": "Upgraded!",
+  "admin.customImage": "custom",
 
   "settings.accountSettings": "Account Settings",
   "settings.changeSaved": "change saved!",

diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx
@@ -8,10 +8,8 @@ import { faStar } from "@fortawesome/free-solid-svg-icons";
 import { Routes } from "packages/cloud/routes";
 import { useConfig } from "config";
 
-import useConnector from "hooks/services/useConnector";
 import useWorkspace from "hooks/services/useWorkspace";
 import { Link } from "components";
-import Indicator from "components/Indicator";
 import { WorkspacePopout } from "packages/cloud/views/workspaces/WorkspacePopout";
 
 import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon";
@@ -21,6 +19,7 @@ import OnboardingIcon from "views/layout/SideBar/components/OnboardingIcon";
 import SettingsIcon from "views/layout/SideBar/components/SettingsIcon";
 import SourceIcon from "views/layout/SideBar/components/SourceIcon";
 import { useGetWorkspace } from "packages/cloud/services/workspaces/WorkspacesService";
+import { NotificationIndicator } from "views/layout/SideBar/NotificationIndicator";
 
 const CreditsIcon = styled(FontAwesomeIcon)`
   font-size: 21px;
@@ -90,12 +89,6 @@ const Text = styled.div`
   margin-top: 7px;
 `;
 
-const Notification = styled(Indicator)`
-  position: absolute;
-  top: 11px;
-  right: 23px;
-`;
-
 const WorkspaceButton = styled.div`
   font-size: 9px;
   line-height: 21px;
@@ -115,7 +108,6 @@ const WorkspaceButton = styled.div`
 `;
 
 const SideBar: React.FC = () => {
-  const { hasNewVersions } = useConnector();
   const config = useConfig();
   const { workspace } = useWorkspace();
   const { data: cloudWorkspace } = useGetWorkspace(workspace.workspaceId);
@@ -202,7 +194,7 @@ const SideBar: React.FC = () => {
               location.pathname.startsWith(Routes.Settings)
             }
           >
-            {hasNewVersions ? <Notification /> : null}
+            <NotificationIndicator />
             <SettingsIcon />
             <Text>
               <FormattedMessage id="sidebar.settings" />

diff --git a/...bapp/src/pages/DestinationPage/pages/AllDestinationsPage/components/DestinationsTable.tsx b/...bapp/src/pages/DestinationPage/pages/AllDestinationsPage/components/DestinationsTable.tsx
@@ -1,33 +1,23 @@
 import React from "react";
-import { useResource } from "rest-hooks";
 
 import { ImplementationTable } from "components/EntityTable";
+import { getEntityTableData } from "components/EntityTable/utils";
+import { EntityTableDataItem } from "components/EntityTable/types";
+
 import { Routes } from "pages/routes";
 import useRouter from "hooks/useRouter";
-import ConnectionResource from "core/resources/Connection";
 import { Destination } from "core/resources/Destination";
-import { getEntityTableData } from "components/EntityTable/utils";
-import { EntityTableDataItem } from "components/EntityTable/types";
-import DestinationDefinitionResource from "core/resources/DestinationDefinition";
-import useWorkspace from "hooks/services/useWorkspace";
+import { useDestinationDefinitionList } from "hooks/services/useDestinationDefinition";
+import { useConnectionList } from "hooks/services/useConnectionHook";
 
 type IProps = {
   destinations: Destination[];
 };
 
 const DestinationsTable: React.FC<IProps> = ({ destinations }) => {
   const { push } = useRouter();
-  const { workspace } = useWorkspace();
-  const { connections } = useResource(ConnectionResource.listShape(), {
-    workspaceId: workspace.workspaceId,
-  });
-
-  const { destinationDefinitions } = useResource(
-    DestinationDefinitionResource.listShape(),
-    {
-      workspaceId: workspace.workspaceId,
-    }
-  );
+  const { connections } = useConnectionList();
+  const { destinationDefinitions } = useDestinationDefinitionList();
 
   const data = getEntityTableData(
     destinations,

diff --git a/...te-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx b/...te-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx
@@ -2,7 +2,7 @@ import React, { useState } from "react";
 import { FormattedMessage } from "react-intl";
 import { useResource } from "rest-hooks";
 
-import { Routes } from "../../../routes";
+import { Routes } from "pages/routes";
 import PageTitle from "components/PageTitle";
 import DestinationForm from "./components/DestinationForm";
 import useRouter from "hooks/useRouter";

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/SourcesPage.tsx
@@ -1,31 +1,23 @@
 import React, { useCallback, useMemo, useState } from "react";
 import { useIntl } from "react-intl";
-import { useFetcher, useResource } from "rest-hooks";
+import { useFetcher } from "rest-hooks";
 import { useAsyncFn } from "react-use";
 
 import SourceDefinitionResource, {
   SourceDefinition,
 } from "core/resources/SourceDefinition";
-import { SourceResource } from "core/resources/Source";
 import useConnector from "hooks/services/useConnector";
 import ConnectorsView from "./components/ConnectorsView";
-import useWorkspace from "hooks/services/useWorkspace";
+import { useSourceDefinitionList } from "hooks/services/useSourceDefinition";
+import { useSourceList } from "hooks/services/useSourceHook";
 
 const SourcesPage: React.FC = () => {
   const [isUpdateSuccess, setIsUpdateSucces] = useState(false);
   const [feedbackList, setFeedbackList] = useState<Record<string, string>>({});
 
-  const { workspace } = useWorkspace();
   const formatMessage = useIntl().formatMessage;
-  const { sources } = useResource(SourceResource.listShape(), {
-    workspaceId: workspace.workspaceId,
-  });
-  const { sourceDefinitions } = useResource(
-    SourceDefinitionResource.listShape(),
-    {
-      workspaceId: workspace.workspaceId,
-    }
-  );
+  const { sources } = useSourceList();
+  const { sourceDefinitions } = useSourceDefinitionList();
 
   const updateSourceDefinition = useFetcher(
     SourceDefinitionResource.updateShape()

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorCell.tsx
@@ -3,11 +3,13 @@ import styled from "styled-components";
 
 import Indicator from "components/Indicator";
 import { getIcon } from "utils/imageUtils";
+import { FormattedMessage } from "react-intl";
 
 type IProps = {
   connectorName: string;
   img?: string;
   hasUpdate?: boolean;
+  isDeprecated?: boolean;
 };
 
 const Content = styled.div<{ enabled?: boolean }>`
@@ -30,12 +32,28 @@ const Notification = styled(Indicator)`
   left: 8px;
 `;
 
-const ConnectorCell: React.FC<IProps> = ({ connectorName, img, hasUpdate }) => {
+const CustomAnnotation = styled.span`
+  color: ${({ theme }) => theme.greyColor40};
+`;
+
+const ConnectorCell: React.FC<IProps> = ({
+  connectorName,
+  img,
+  hasUpdate,
+  isDeprecated,
+}) => {
   return (
     <Content>
       {hasUpdate && <Notification />}
       <Image>{getIcon(img)}</Image>
-      {connectorName}
+      <span>
+        {connectorName}{" "}
+        {isDeprecated ? (
+          <CustomAnnotation>
+            ( <FormattedMessage id="admin.customImage" /> )
+          </CustomAnnotation>
+        ) : null}
+      </span>
     </Content>
   );
 };

diff --git a/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx b/airbyte-webapp/src/pages/SettingsPage/pages/ConnectorsPage/components/ConnectorsView.tsx
@@ -59,6 +59,7 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
             connectorName={cell.value}
             img={row.original.icon}
             hasUpdate={Connector.hasNewerVersion(row.original)}
+            isDeprecated={Connector.isDeprecated(row.original)}
           />
         ),
       },
@@ -90,7 +91,7 @@ const ConnectorsView: React.FC<ConnectorsViewProps> = ({
               collapse: true,
               Cell: ({ cell, row }: CellProps<ConnectorDefinition>) => (
                 <VersionCell
-                  version={cell.value}
+                  version={cell.value || row.original.dockerImageTag}
                   id={Connector.id(row.original)}
                   onChange={onUpdateVersion}
                   feedback={feedbackList[Connector.id(row.original)]}

diff --git a/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx b/airbyte-webapp/src/pages/SourcesPage/pages/AllSourcesPage/components/SourcesTable.tsx
@@ -1,33 +1,24 @@
 import React from "react";
-import { useResource } from "rest-hooks";
 
 import { ImplementationTable } from "components/EntityTable";
+import { getEntityTableData } from "components/EntityTable/utils";
+import { EntityTableDataItem } from "components/EntityTable/types";
+
 import { Routes } from "pages/routes";
 import useRouter from "hooks/useRouter";
 import { Source } from "core/resources/Source";
-import ConnectionResource from "core/resources/Connection";
-import { getEntityTableData } from "components/EntityTable/utils";
-import { EntityTableDataItem } from "components/EntityTable/types";
-import SourceDefinitionResource from "core/resources/SourceDefinition";
-import useWorkspace from "hooks/services/useWorkspace";
+import { useConnectionList } from "hooks/services/useConnectionHook";
+import { useSourceDefinitionList } from "hooks/services/useSourceDefinition";
 
 type IProps = {
   sources: Source[];
 };
 
 const SourcesTable: React.FC<IProps> = ({ sources }) => {
   const { push } = useRouter();
-  const { workspace } = useWorkspace();
-  const { connections } = useResource(ConnectionResource.listShape(), {
-    workspaceId: workspace.workspaceId,
-  });
-
-  const { sourceDefinitions } = useResource(
-    SourceDefinitionResource.listShape(),
-    {
-      workspaceId: workspace.workspaceId,
-    }
-  );
+
+  const { connections } = useConnectionList();
+  const { sourceDefinitions } = useSourceDefinitionList();
 
   const data = getEntityTableData(
     sources,

diff --git a/...te-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx b/...te-webapp/src/pages/SourcesPage/pages/SourceItemPage/components/SourceConnectionTable.tsx
@@ -2,7 +2,7 @@ import React, { useCallback } from "react";
 import { useResource } from "rest-hooks";
 
 import { ConnectionTable } from "components/EntityTable";
-import { Routes } from "../../../../routes";
+import { Routes } from "pages/routes";
 import useRouter from "hooks/useRouter";
 import { Connection } from "core/resources/Connection";
 import useSyncActions from "components/EntityTable/hooks";

diff --git a/airbyte-webapp/src/views/layout/SideBar/NotificationIndicator.tsx b/airbyte-webapp/src/views/layout/SideBar/NotificationIndicator.tsx
@@ -0,0 +1,17 @@
+import React from "react";
+import styled from "styled-components";
+
+import useConnector from "hooks/services/useConnector";
+import Indicator from "components/Indicator";
+
+const Notification = styled(Indicator)`
+  position: absolute;
+  top: 11px;
+  right: 23px;
+`;
+
+export const NotificationIndicator: React.FC = () => {
+  const { hasNewVersions } = useConnector();
+
+  return hasNewVersions ? <Notification /> : null;
+};