Show manual frequency in connection table and use intl for frequency …

…values (#13621) * Update frequency cell in connection table to return Manual when manual sync * Move frequency labels to en.json * Update frequencyConfig text prop to type Add getFrequencyConfig utility to correctly find frequency configuration * Fix testid for createTestConnection dropdown * Show manual in Replication settings dropdown when schedule is manual * Split form.every string into minutes and seconds with pluralization Signed-off-by: Edmundo Ruiz Ghanem <[email protected]> * Updte testid in update connection test
airbytehq · Jun 10, 2022 · a0e3780 · a0e3780
1 parent 3016172
commit a0e3780
Show file tree

Hide file tree

Showing 12 changed files with 59 additions and 58 deletions.
diff --git a/airbyte-webapp-e2e-tests/cypress/commands/connection.ts b/airbyte-webapp-e2e-tests/cypress/commands/connection.ts
@@ -17,7 +17,7 @@ export const createTestConnection = (sourceName: string, destinationName: string
 
   cy.get("div[data-testid='connectionName']").type("Connection name");
   cy.get("div[data-testid='schedule']").click();
-  cy.get("div[data-testid='manual']").click();
+  cy.get("div[data-testid='Manual']").click();
 
   cy.get("div[data-testid='namespaceDefinition']").click();
   cy.get("div[data-testid='namespaceDefinition-source']").click();

diff --git a/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts b/airbyte-webapp-e2e-tests/cypress/integration/connection.spec.ts
@@ -28,7 +28,7 @@ describe("Connection main actions", () => {
     cy.get("div[data-id='replication-step']").click();
 
     cy.get("div[data-testid='schedule']").click();
-    cy.get("div[data-testid='Every 5 min']").click();
+    cy.get("div[data-testid='Every 5 minutes']").click();
     cy.get("button[type=submit]").first().click();
     cy.wait("@updateConnection");
     cy.get("span[data-id='success-result']").should("exist");

diff --git a/airbyte-webapp/src/components/EntityTable/components/FrequencyCell.tsx b/airbyte-webapp/src/components/EntityTable/components/FrequencyCell.tsx
@@ -1,12 +1,10 @@
 import React from "react";
+import { FormattedMessage } from "react-intl";
 import styled from "styled-components";
 
-import FrequencyConfig from "config/FrequencyConfig.json";
-import { equal } from "utils/objects";
+import { ConnectionSchedule } from "core/request/AirbyteClient";
 
-import { ConnectionSchedule } from "../../../core/request/AirbyteClient";
-
-interface IProps {
+interface FrequencyCellProps {
   value: ConnectionSchedule;
   enabled?: boolean;
 }
@@ -15,9 +13,10 @@ const Content = styled.div<{ enabled?: boolean }>`
   color: ${({ theme, enabled }) => (!enabled ? theme.greyColor40 : "inherit")};
 `;
 
-const FrequencyCell: React.FC<IProps> = ({ value, enabled }) => {
-  const cellText = FrequencyConfig.find((item) => equal(item.config, value));
-  return <Content enabled={enabled}>{cellText?.text || ""}</Content>;
-};
+const FrequencyCell: React.FC<FrequencyCellProps> = ({ value, enabled }) => (
+  <Content enabled={enabled}>
+    <FormattedMessage id={`frequency.${value ? value.timeUnit : "manual"}`} values={{ value: value?.units }} />
+  </Content>
+);
 
 export default FrequencyCell;
diff --git a/airbyte-webapp/src/components/EntityTable/hooks.tsx b/airbyte-webapp/src/components/EntityTable/hooks.tsx
@@ -1,4 +1,4 @@
-import FrequencyConfig from "config/FrequencyConfig.json";
+import { getFrequencyConfig } from "config/utils";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
 import { useSyncConnection, useUpdateConnection } from "hooks/services/useConnectionHook";
 
@@ -25,17 +25,15 @@ const useSyncActions = (): {
       status: connection.status === ConnectionStatus.active ? ConnectionStatus.inactive : ConnectionStatus.active,
     });
 
-    const frequency = FrequencyConfig.find(
-      (item) => JSON.stringify(item.config) === JSON.stringify(connection.schedule)
-    );
+    const frequency = getFrequencyConfig(connection.schedule);
 
     analyticsService.track("Source - Action", {
       action: connection.status === "active" ? "Disable connection" : "Reenable connection",
       connector_source: connection.source?.sourceName,
       connector_source_id: connection.source?.sourceDefinitionId,
       connector_destination: connection.destination?.destinationName,
       connector_destination_definition_id: connection.destination?.destinationDefinitionId,
-      frequency: frequency?.text,
+      frequency: frequency?.type,
     });
   };
 

diff --git a/airbyte-webapp/src/config/FrequencyConfig.json b/airbyte-webapp/src/config/FrequencyConfig.json
@@ -1,74 +1,73 @@
 [
   {
-    "text": "manual",
+    "type": "manual",
     "config": null
   },
   {
-    "text": "5 min",
+    "type": "5 min",
     "config": {
       "units": 5,
       "timeUnit": "minutes"
     }
   },
   {
-    "text": "15 min",
+    "type": "15 min",
     "config": {
       "units": 15,
       "timeUnit": "minutes"
     }
   },
   {
-    "text": "30 min",
+    "type": "30 min",
     "config": {
       "units": 30,
       "timeUnit": "minutes"
     }
   },
   {
-    "text": "1 hour",
-    "simpleText": "hour",
+    "type": "1 hour",
     "config": {
       "units": 1,
       "timeUnit": "hours"
     }
   },
   {
-    "text": "2 hours",
+    "type": "2 hours",
     "config": {
       "units": 2,
       "timeUnit": "hours"
     }
   },
   {
-    "text": "3 hours",
+    "type": "3 hours",
     "config": {
       "units": 3,
       "timeUnit": "hours"
     }
   },
   {
-    "text": "6 hours",
+    "type": "6 hours",
     "config": {
       "units": 6,
       "timeUnit": "hours"
     }
   },
   {
-    "text": "8 hours",
+    "type": "8 hours",
     "config": {
       "units": 8,
       "timeUnit": "hours"
     }
   },
   {
-    "text": "12 hours",
+    "type": "12 hours",
     "config": {
       "units": 12,
       "timeUnit": "hours"
     }
   },
   {
-    "text": "24 hours",
+    "type": "24 hours",
     "config": {
       "units": 24,
       "timeUnit": "hours"

diff --git a/airbyte-webapp/src/config/utils.ts b/airbyte-webapp/src/config/utils.ts
@@ -0,0 +1,6 @@
+import FrequencyConfig from "config/FrequencyConfig.json";
+import { ConnectionSchedule } from "core/request/AirbyteClient";
+import { equal } from "utils/objects";
+
+export const getFrequencyConfig = (schedule?: ConnectionSchedule) =>
+  FrequencyConfig.find((item) => (!schedule && !item) || equal(item.config, schedule));
diff --git a/airbyte-webapp/src/hooks/services/useConnectionHook.tsx b/airbyte-webapp/src/hooks/services/useConnectionHook.tsx
@@ -1,12 +1,11 @@
 import { QueryClient, useMutation, useQueryClient } from "react-query";
 
-import FrequencyConfig from "config/FrequencyConfig.json";
+import { getFrequencyConfig } from "config/utils";
 import { SyncSchema } from "core/domain/catalog";
 import { WebBackendConnectionService } from "core/domain/connection";
 import { ConnectionService } from "core/domain/connection/ConnectionService";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
 import { useInitService } from "services/useInitService";
-import { equal } from "utils/objects";
 
 import { useConfig } from "../../config";
 import {
@@ -91,15 +90,15 @@ export const useSyncConnection = () => {
   const analyticsService = useAnalyticsService();
 
   return useMutation((connection: WebBackendConnectionRead) => {
-    const frequency = FrequencyConfig.find((item) => equal(item.config, connection.schedule));
+    const frequency = getFrequencyConfig(connection.schedule);
 
     analyticsService.track("Source - Action", {
       action: "Full refresh sync",
       connector_source: connection.source?.sourceName,
       connector_source_id: connection.source?.sourceDefinitionId,
       connector_destination: connection.destination?.name,
       connector_destination_definition_id: connection.destination?.destinationDefinitionId,
-      frequency: frequency?.text,
+      frequency: frequency?.type,
     });
 
     return service.sync(connection.connectionId);
@@ -142,11 +141,11 @@ const useCreateConnection = () => {
 
       const enabledStreams = values.syncCatalog.streams.filter((stream) => stream.config?.selected).length;
 
-      const frequencyData = FrequencyConfig.find((item) => equal(item.config, values.schedule));
+      const frequencyData = getFrequencyConfig(values.schedule);
 
       analyticsService.track("New Connection - Action", {
         action: "Set up connection",
-        frequency: frequencyData?.text,
+        frequency: frequencyData?.type,
         connector_source_definition: source?.sourceName,
         connector_source_definition_id: sourceDefinition?.sourceDefinitionId,
         connector_destination_definition: destination?.destinationName,

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -63,7 +63,8 @@
   "form.destinationRetest": "Retest destination",
   "form.discardChanges": "Discard changes",
   "form.discardChangesConfirmation": "There are unsaved changes. Are you sure you want to discard your changes?",
-  "form.every": "Every {value}",
+  "form.every.minutes": "Every {value, plural, one {minute} other {# minutes}}",
+  "form.every.hours": "Every {value, plural, one {hour} other {# hours}}",
   "form.testingConnection": "Testing connection...",
   "form.successTests": "All connection tests passed!",
   "form.failedTests": "The connection tests failed.",
@@ -504,6 +505,10 @@
   "errorView.unknown": "Unknown",
   "errorView.unknownError": "Unknown error occurred",
 
+  "frequency.manual": "Manual",
+  "frequency.minutes": "{value} min",
+  "frequency.hours": "{value, plural, one {# hour} other {# hours}}",
+
   "ui.goBack": "Go back",
   "ui.input.showPassword": "Show password",
   "ui.input.hidePassword": "Hide password",

diff --git a/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx b/airbyte-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/ConnectionItemPage.tsx
@@ -5,12 +5,11 @@ import { LoadingPage, MainPageWithScroll } from "components";
 import { AlertBanner } from "components/base/Banner/AlertBanner";
 import HeadTitle from "components/HeadTitle";
 
-import FrequencyConfig from "config/FrequencyConfig.json";
+import { getFrequencyConfig } from "config/utils";
 import { ConnectionStatus } from "core/request/AirbyteClient";
 import { useAnalyticsService } from "hooks/services/Analytics/useAnalyticsService";
 import { useGetConnection } from "hooks/services/useConnectionHook";
 import TransformationView from "pages/ConnectionPage/pages/ConnectionItemPage/components/TransformationView";
-import { equal } from "utils/objects";
 
 import ConnectionPageTitle from "./components/ConnectionPageTitle";
 import { ReplicationView } from "./components/ReplicationView";
@@ -32,7 +31,7 @@ const ConnectionItemPage: React.FC = () => {
 
   const analyticsService = useAnalyticsService();
 
-  const frequency = FrequencyConfig.find((item) => equal(item.config, connection.schedule));
+  const frequency = getFrequencyConfig(connection.schedule);
 
   const onAfterSaveSchema = () => {
     analyticsService.track("Source - Action", {
@@ -41,7 +40,7 @@ const ConnectionItemPage: React.FC = () => {
       connector_source_id: source.sourceDefinitionId,
       connector_destination: destination.destinationName,
       connector_destination_definition_id: destination.destinationDefinitionId,
-      frequency: frequency?.text,
+      frequency: frequency?.type,
     });
   };
 

diff --git a/...te-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx b/...te-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/EnabledControl.tsx
@@ -30,11 +30,11 @@ const Content = styled.div`
 interface EnabledControlProps {
   connection: WebBackendConnectionRead;
   disabled?: boolean;
-  frequencyText?: string;
+  frequencyType?: string;
   onStatusUpdating?: (updating: boolean) => void;
 }
 
-const EnabledControl: React.FC<EnabledControlProps> = ({ connection, disabled, frequencyText, onStatusUpdating }) => {
+const EnabledControl: React.FC<EnabledControlProps> = ({ connection, disabled, frequencyType, onStatusUpdating }) => {
   const { mutateAsync: updateConnection, isLoading } = useUpdateConnection();
   const analyticsService = useAnalyticsService();
 
@@ -57,7 +57,7 @@ const EnabledControl: React.FC<EnabledControlProps> = ({ connection, disabled, f
       connector_source_id: connection.source?.sourceDefinitionId,
       connector_destination: connection.destination?.name,
       connector_destination_definition_id: connection.destination?.destinationDefinitionId,
-      frequency: frequencyText,
+      frequency: frequencyType,
     });
   };
 

diff --git a/...te-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.tsx b/...te-webapp/src/pages/ConnectionPage/pages/ConnectionItemPage/components/StatusMainInfo.tsx
@@ -6,13 +6,12 @@ import styled from "styled-components";
 
 import ConnectorCard from "components/ConnectorCard";
 
-import FrequencyConfig from "config/FrequencyConfig.json";
+import { getFrequencyConfig } from "config/utils";
 import { ConnectionStatus, SourceRead, DestinationRead, WebBackendConnectionRead } from "core/request/AirbyteClient";
 import { FeatureItem, useFeatureService } from "hooks/services/Feature";
 import { RoutePaths } from "pages/routePaths";
 import { useDestinationDefinition } from "services/connector/DestinationDefinitionService";
 import { useSourceDefinition } from "services/connector/SourceDefinitionService";
-import { equal } from "utils/objects";
 
 import EnabledControl from "./EnabledControl";
 
@@ -55,7 +54,7 @@ export const StatusMainInfo: React.FC<StatusMainInfoProps> = ({
   const destinationDefinition = useDestinationDefinition(destination.destinationDefinitionId);
 
   const allowSync = hasFeature(FeatureItem.AllowSync);
-  const frequency = FrequencyConfig.find((item) => equal(item.config, connection.schedule));
+  const frequency = getFrequencyConfig(connection.schedule);
 
   const sourceConnectionPath = `../../${RoutePaths.Source}/${source.sourceId}`;
   const destinationConnectionPath = `../../${RoutePaths.Destination}/${destination.destinationId}`;
@@ -84,7 +83,7 @@ export const StatusMainInfo: React.FC<StatusMainInfoProps> = ({
           onStatusUpdating={onStatusUpdating}
           disabled={!allowSync}
           connection={connection}
-          frequencyText={frequency?.text}
+          frequencyType={frequency?.type}
         />
       )}
     </MainContainer>

diff --git a/airbyte-webapp/src/views/Connection/ConnectionForm/formConfig.tsx b/airbyte-webapp/src/views/Connection/ConnectionForm/formConfig.tsx
@@ -234,7 +234,7 @@ const useInitialValues = (
     const initialValues: FormikConnectionFormValues = {
       name: connection.name ?? `${connection.source.name} <> ${connection.destination.name}`,
       syncCatalog: initialSchema,
-      schedule: connection.schedule !== undefined ? connection.schedule : DEFAULT_SCHEDULE,
+      schedule: connection.connectionId ? connection.schedule ?? null : DEFAULT_SCHEDULE,
       prefix: connection.prefix || "",
       namespaceDefinition: connection.namespaceDefinition || NamespaceDefinitionType.source,
       namespaceFormat: connection.namespaceFormat ?? SOURCE_NAMESPACE_TAG,
@@ -261,17 +261,14 @@ const useFrequencyDropdownData = (): DropDownRow.IDataItem[] => {
     () =>
       FrequencyConfig.map((item) => ({
         value: item.config,
-        label:
-          item.config === null
-            ? item.text
-            : formatMessage(
-                {
-                  id: "form.every",
-                },
-                {
-                  value: item.simpleText || item.text,
-                }
-              ),
+        label: item.config
+          ? formatMessage(
+              {
+                id: `form.every.${item.config.timeUnit}`,
+              },
+              { value: item.config.units }
+            )
+          : formatMessage({ id: "frequency.manual" }),
       })),
     [formatMessage]
   );