Jamakase/update connector version (#2462)

* Add indicator * Add current and latest version to tables * Add latest note * Show indicator in sidebar * Add improvements to useNotification hook
airbytehq · Mar 16, 2021 · 9b5f0b7 · 9b5f0b7
1 parent 0c5d983
commit 9b5f0b7
Show file tree

Hide file tree

Showing 12 changed files with 251 additions and 21 deletions.
diff --git a/airbyte-webapp/src/components/Indicator/Indicator.tsx b/airbyte-webapp/src/components/Indicator/Indicator.tsx
@@ -0,0 +1,10 @@
+import styled from "styled-components";
+
+const Indicator = styled.div`
+  height: 10px;
+  width: 10px;
+  border-radius: 50%;
+  background: ${({ theme }) => theme.dangerColor};
+`;
+
+export default Indicator;
diff --git a/airbyte-webapp/src/components/Indicator/index.tsx b/airbyte-webapp/src/components/Indicator/index.tsx
@@ -0,0 +1,4 @@
+import Indicator from "./Indicator";
+
+export default Indicator;
+export { Indicator };
diff --git a/airbyte-webapp/src/components/SideBar/SideBar.tsx b/airbyte-webapp/src/components/SideBar/SideBar.tsx
@@ -12,6 +12,8 @@ import Version from "../Version";
 import Destination from "./components/Destination";
 import { Routes } from "pages/routes";
 import config from "config";
+import Indicator from "../Indicator";
+import useNotification from "../hooks/services/useNotification";
 
 const Bar = styled.nav`
   width: 100px;
@@ -46,6 +48,7 @@ const MenuItem = styled(NavLink)`
   line-height: 15px;
   margin-top: 7px;
   text-decoration: none;
+  position: relative;
 
   &.active {
     color: ${({ theme }) => theme.whiteColor};
@@ -88,7 +91,15 @@ const AdminIcon = styled(FontAwesomeIcon)`
   line-height: 15px;
 `;
 
+const Notification = styled(Indicator)`
+  position: absolute;
+  top: 11px;
+  right: 23px;
+`;
+
 const SideBar: React.FC = () => {
+  const { hasNewVersions } = useNotification();
+
   return (
     <Bar>
       <div>
@@ -122,6 +133,7 @@ const SideBar: React.FC = () => {
           </li>
           <li>
             <MenuItem to={Routes.Admin} activeClassName="active">
+              {hasNewVersions ? <Notification /> : null}
               <AdminIcon icon={faCog} />
               <Text>
                 <FormattedMessage id="sidebar.admin" />

diff --git a/airbyte-webapp/src/components/hooks/services/useNotification.tsx b/airbyte-webapp/src/components/hooks/services/useNotification.tsx
@@ -0,0 +1,44 @@
+import { useResource } from "rest-hooks";
+import config from "config";
+import { useMemo } from "react";
+
+import SourceDefinitionResource from "../../../core/resources/SourceDefinition";
+import DestinationDefinitionResource from "../../../core/resources/DestinationDefinition";
+
+type NotificationService = {
+  hasNewVersions: boolean;
+};
+
+const useNotification = (): NotificationService => {
+  const { sourceDefinitions } = useResource(
+    SourceDefinitionResource.listShape(),
+    {
+      workspaceId: config.ui.workspaceId,
+    }
+  );
+  const { destinationDefinitions } = useResource(
+    DestinationDefinitionResource.listShape(),
+    {
+      workspaceId: config.ui.workspaceId,
+    }
+  );
+
+  const hasNewVersions = useMemo(() => {
+    const hasNewSourceVersion = sourceDefinitions.some(
+      (source) => source.latestDockerImageTag !== source.dockerImageTag
+    );
+
+    const hasNewDestinationVersion = destinationDefinitions.some(
+      (destination) =>
+        destination.latestDockerImageTag !== destination.dockerImageTag
+    );
+
+    return hasNewSourceVersion || hasNewDestinationVersion;
+  }, [sourceDefinitions, destinationDefinitions]);
+
+  return {
+    hasNewVersions,
+  };
+};
+
+export default useNotification;
diff --git a/airbyte-webapp/src/core/resources/DestinationDefinition.ts b/airbyte-webapp/src/core/resources/DestinationDefinition.ts
@@ -6,6 +6,7 @@ export interface DestinationDefinition {
   name: string;
   dockerRepository: string;
   dockerImageTag: string;
+  latestDockerImageTag: string;
   documentationUrl: string;
 }
 
@@ -16,6 +17,7 @@ export default class DestinationDefinitionResource
   readonly name: string = "";
   readonly dockerRepository: string = "";
   readonly dockerImageTag: string = "";
+  readonly latestDockerImageTag: string = "";
   readonly documentationUrl: string = "";
 
   pk(): string {
@@ -31,6 +33,37 @@ export default class DestinationDefinitionResource
   > {
     return {
       ...super.listShape(),
+      fetch: async (
+        params: Readonly<Record<string, string | number>>
+      ): Promise<{ destinationDefinitions: DestinationDefinition[] }> => {
+        const definition = await this.fetch(
+          "post",
+          `${this.url(params)}/list`,
+          params
+        );
+        const latestDefinition = await this.fetch(
+          "post",
+          `${this.url(params)}/list_latest`,
+          params
+        );
+
+        const result: DestinationDefinition[] = definition.destinationDefinitions.map(
+          (destination: DestinationDefinition) => {
+            const withLatest = latestDefinition.destinationDefinitions.find(
+              (latestDestination: DestinationDefinition) =>
+                latestDestination.destinationDefinitionId ===
+                destination.destinationDefinitionId
+            );
+
+            return {
+              ...destination,
+              latestDockerImageTag: withLatest?.dockerImageTag,
+            };
+          }
+        );
+
+        return { destinationDefinitions: result };
+      },
       schema: { destinationDefinitions: [this] },
     };
   }

diff --git a/airbyte-webapp/src/core/resources/SourceDefinition.ts b/airbyte-webapp/src/core/resources/SourceDefinition.ts
@@ -6,6 +6,7 @@ export interface SourceDefinition {
   name: string;
   dockerRepository: string;
   dockerImageTag: string;
+  latestDockerImageTag: string;
   documentationUrl: string;
 }
 
@@ -16,6 +17,7 @@ export default class SourceDefinitionResource
   readonly name: string = "";
   readonly dockerRepository: string = "";
   readonly dockerImageTag: string = "";
+  readonly latestDockerImageTag: string = "";
   readonly documentationUrl: string = "";
 
   pk(): string {
@@ -29,6 +31,36 @@ export default class SourceDefinitionResource
   ): ReadShape<SchemaDetail<{ sourceDefinitions: SourceDefinition[] }>> {
     return {
       ...super.listShape(),
+      fetch: async (
+        params: Readonly<Record<string, string | number>>
+      ): Promise<{ sourceDefinitions: SourceDefinition[] }> => {
+        const definition = await this.fetch(
+          "post",
+          `${this.url(params)}/list`,
+          params
+        );
+        const latestDefinition = await this.fetch(
+          "post",
+          `${this.url(params)}/list_latest`,
+          params
+        );
+
+        const result: SourceDefinition[] = definition.sourceDefinitions.map(
+          (source: SourceDefinition) => {
+            const withLatest = latestDefinition.sourceDefinitions.find(
+              (latestSource: SourceDefinition) =>
+                latestSource.sourceDefinitionId === source.sourceDefinitionId
+            );
+
+            return {
+              ...source,
+              latestDockerImageTag: withLatest?.dockerImageTag,
+            };
+          }
+        );
+
+        return { sourceDefinitions: result };
+      },
       schema: { sourceDefinitions: [this] },
     };
   }

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -221,9 +221,12 @@
   "admin.manageDestination": "Manage your destination connectors",
   "admin.availableDestinations": "Available destination connectors",
   "admin.connectors": "Connectors",
+  "admin.currentVersion": "Current version",
   "admin.image": "Image",
   "admin.codeSource": "Code source",
   "admin.tag": "Tag",
+  "admin.changeTo": "Change to",
+  "admin.latestNote": " (latest)",
   "admin.addNewConnector": "Add new connector",
   "admin.connectorName": "Connector display name",
   "admin.connectorName.placeholder": "Connector name",

diff --git a/airbyte-webapp/src/pages/AdminPage/components/ConnectorCell.tsx b/airbyte-webapp/src/pages/AdminPage/components/ConnectorCell.tsx
@@ -1,25 +1,34 @@
 import React from "react";
 import styled from "styled-components";
+import Indicator from "../../../components/Indicator";
 
 type IProps = {
   connectorName: string;
   img?: string;
+  hasUpdate?: boolean;
 };
 
 const Content = styled.div<{ enabled?: boolean }>`
   display: flex;
   align-items: center;
   padding-left: 30px;
+  position: relative;
 `;
 
 const Image = styled.img`
   height: 17px;
   margin-right: 9px;
 `;
 
-const ConnectorCell: React.FC<IProps> = ({ connectorName, img }) => {
+const Notification = styled(Indicator)`
+  position: absolute;
+  left: 8px;
+`;
+
+const ConnectorCell: React.FC<IProps> = ({ connectorName, img, hasUpdate }) => {
   return (
     <Content>
+      {hasUpdate && <Notification />}
       <Image src={img || "/default-logo-catalog.svg"} alt={"logo"} />
       {connectorName}
     </Content>

diff --git a/airbyte-webapp/src/pages/AdminPage/components/DestinationsView.tsx b/airbyte-webapp/src/pages/AdminPage/components/DestinationsView.tsx
@@ -62,8 +62,19 @@ const DestinationsView: React.FC = () => {
         Header: <FormattedMessage id="admin.connectors" />,
         accessor: "name",
         customWidth: 25,
-        Cell: ({ cell }: CellProps<never>) => (
-          <ConnectorCell connectorName={cell.value} />
+        Cell: ({
+          cell,
+          row,
+        }: CellProps<{
+          latestDockerImageTag: string;
+          dockerImageTag: string;
+        }>) => (
+          <ConnectorCell
+            connectorName={cell.value}
+            hasUpdate={
+              row.original.latestDockerImageTag !== row.original.dockerImageTag
+            }
+          />
         ),
       },
       {
@@ -77,23 +88,32 @@ const DestinationsView: React.FC = () => {
           />
         ),
       },
+      {
+        Header: <FormattedMessage id="admin.currentVersion" />,
+        accessor: "dockerImageTag",
+        customWidth: 10,
+      },
       {
         Header: (
           <FormContentTitle>
-            <FormattedMessage id="admin.tag" />
+            <FormattedMessage id="admin.changeTo" />
           </FormContentTitle>
         ),
-        accessor: "dockerImageTag",
+        accessor: "latestDockerImageTag",
         collapse: true,
         Cell: ({
           cell,
           row,
-        }: CellProps<{ destinationDefinitionId: string }>) => (
+        }: CellProps<{
+          sourceDefinitionId: string;
+          dockerImageTag: string;
+        }>) => (
           <VersionCell
             version={cell.value}
-            id={row.original.destinationDefinitionId}
+            id={row.original.sourceDefinitionId}
             onChange={onUpdateVersion}
-            feedback={feedbackList[row.original.destinationDefinitionId]}
+            feedback={feedbackList[row.original.sourceDefinitionId]}
+            currentVersion={row.original.dockerImageTag}
           />
         ),
       },
@@ -114,6 +134,7 @@ const DestinationsView: React.FC = () => {
           item.destination?.destinationDefinitionId || "",
         dockerRepository: destinationInfo?.dockerRepository,
         dockerImageTag: destinationInfo?.dockerImageTag,
+        latestDockerImageTag: destinationInfo?.latestDockerImageTag,
         documentationUrl: destinationInfo?.documentationUrl,
         feedback: "",
       };

diff --git a/airbyte-webapp/src/pages/AdminPage/components/PageComponents.tsx b/airbyte-webapp/src/pages/AdminPage/components/PageComponents.tsx
@@ -11,13 +11,13 @@ const Block = styled.div`
 `;
 
 const FormContent = styled.div`
-  width: 270px;
-  margin: -10px 0 -10px 218px;
+  width: 253px;
+  margin: -10px 0 -10px 200px;
   position: relative;
 `;
 
 const FormContentTitle = styled(FormContent)`
-  margin: 0 0 0 218px;
+  margin: 0 0 0 200px;
 `;
 
 export { Title, Block, FormContent, FormContentTitle };