🪟🐛 Connector builder UI: Fix datetime stream slicer (#21161)

* fix datetime stream slicer * Update airbyte-webapp/src/components/connectorBuilder/Builder/StreamSlicerSection.tsx Co-authored-by: Lake Mossman <lake@airbyte.io> * Update airbyte-webapp/src/components/connectorBuilder/Builder/StreamSlicerSection.tsx Co-authored-by: Lake Mossman <lake@airbyte.io> Co-authored-by: Lake Mossman <lake@airbyte.io>
airbytehq · Jan 11, 2023 · 592c656 · 592c656
1 parent 8398e64
commit 592c656
Show file tree

Hide file tree

Showing 2 changed files with 9 additions and 8 deletions.
diff --git a/airbyte-webapp/src/components/connectorBuilder/Builder/StreamSlicerSection.tsx b/airbyte-webapp/src/components/connectorBuilder/Builder/StreamSlicerSection.tsx
@@ -5,7 +5,6 @@ import { ControlLabels } from "components/LabeledControl";
 
 import { RequestOption, SimpleRetrieverStreamSlicer } from "core/request/ConnectorManifest";
 
-import { timeDeltaRegex } from "../types";
 import { BuilderCard } from "./BuilderCard";
 import { BuilderField } from "./BuilderField";
 import { BuilderFieldWithInputs } from "./BuilderFieldWithInputs";
@@ -97,6 +96,12 @@ export const StreamSlicerSection: React.FC<StreamSlicerSectionProps> = ({ stream
             label="Datetime format"
             tooltip="Specify the format of the start and end time, e.g. %Y-%m-%d"
           />
+          <BuilderFieldWithInputs
+            type="string"
+            path={buildPath("cursor_granularity")}
+            label="Cursor granularity"
+            tooltip="Smallest increment the datetime format has (ISO 8601 duration) that will be used to ensure that the start of a slice does not overlap with the end of the previous one, e.g. for %Y-%m-%d the granularity should be P1D, for %Y-%m-%dT%H:%M:%SZ the granularity should be PT1S"
+          />
           <BuilderFieldWithInputs
             type="string"
             path={buildPath("start_datetime")}
@@ -113,8 +118,7 @@ export const StreamSlicerSection: React.FC<StreamSlicerSectionProps> = ({ stream
             type="string"
             path={buildPath("step")}
             label="Step"
-            tooltip="Time interval for which to break up stream into slices, e.g. 1d"
-            pattern={timeDeltaRegex}
+            tooltip="Time interval (ISO 8601 duration) for which to break up stream into slices, e.g. P1D for daily slices"
           />
           <BuilderFieldWithInputs
             type="string"
@@ -127,7 +131,7 @@ export const StreamSlicerSection: React.FC<StreamSlicerSectionProps> = ({ stream
               type="string"
               path={buildPath("lookback_window")}
               label="Lookback window"
-              tooltip="How many days before the start_datetime to read data for, e.g. 31d"
+              tooltip="Time interval (ISO 8601 duration) before the start_datetime to read data for, e.g. P1M for looking back one month"
               optional
             />
             <ToggleGroupField<RequestOption>

diff --git a/airbyte-webapp/src/components/connectorBuilder/types.ts b/airbyte-webapp/src/components/connectorBuilder/types.ts
@@ -253,9 +253,6 @@ const nonPathRequestOptionSchema = yup
   .notRequired()
   .default(undefined);
 
-// eslint-disable-next-line no-useless-escape
-export const timeDeltaRegex = /^(([\.\d]+?)y)?(([\.\d]+?)m)?(([\.\d]+?)w)?(([\.\d]+?)d)?$/;
-
 const regularSlicerShape = {
   cursor_field: yup.mixed().when("type", {
     is: (val: string) => val !== "SubstreamSlicer" && val !== "CartesianProductStreamSlicer",
@@ -280,7 +277,7 @@ const regularSlicerShape = {
   }),
   step: yup.mixed().when("type", {
     is: "DatetimeStreamSlicer",
-    then: yup.string().matches(timeDeltaRegex, "form.pattern.error").required("form.empty.error"),
+    then: yup.string().required("form.empty.error"),
     otherwise: (schema) => schema.strip(),
   }),
   datetime_format: yup.mixed().when("type", {