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

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;

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

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"

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

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,

airbyte-webapp/src/locales/en.json

@@ -504,6 +504,11 @@
   "errorView.unknown": "Unknown",
   "errorView.unknownError": "Unknown error occurred",
 
+  "frequency.manual": "Manual",
+  "frequency.minutes": "{value} min",
+  "frequency.hour": "hour",
+  "frequency.hours": "{value, plural, one {# hour} other {# hours}}",
+
   "ui.goBack": "Go back",
   "ui.input.showPassword": "Show password",
   "ui.input.hidePassword": "Hide password",

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

airbyte-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,
     });
   };
 

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

airbyte-webapp/src/views/Connection/ConnectionForm/formConfig.tsx

@@ -261,17 +261,23 @@ 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",
+              },
+              {
+                value: formatMessage(
+                  {
+                    id: `frequency.${
+                      item.config.timeUnit === "hours" && item.config.units === 1 ? "hour" : item.config.timeUnit
+                    }`,
+                  },
+                  { value: item.config?.units }
+                ),
+              }
+            )
+          : formatMessage({ id: "frequency.manual" }),
       })),
     [formatMessage]
   );