🪟🎨 Connector builder: Show callout when stream listing limit is reach…

…ed (airbytehq#22603)
olivermeyer · Feb 14, 2023 · 816414f · 816414f
1 parent 09a0f65
commit 816414f
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 5 deletions.
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/PageDisplay.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/PageDisplay.tsx
@@ -1,11 +1,12 @@
 import { Tab } from "@headlessui/react";
 import classNames from "classnames";
 import { useField } from "formik";
-import React, { useMemo } from "react";
-import { useIntl } from "react-intl";
+import React, { ReactNode, useMemo } from "react";
+import { FormattedMessage, useIntl } from "react-intl";
 
 import { FlexContainer } from "components/ui/Flex";
 import { Text } from "components/ui/Text";
+import { InfoTooltip } from "components/ui/Tooltip";
 
 import { StreamReadInferredSchema, StreamReadSlicesItemPagesItem } from "core/request/ConnectorBuilderClient";
 import {
@@ -25,7 +26,7 @@ interface PageDisplayProps {
 }
 
 interface TabData {
-  title: string;
+  title: ReactNode;
   key: string;
   content: string;
 }
@@ -34,7 +35,7 @@ export const PageDisplay: React.FC<PageDisplayProps> = ({ page, className, infer
   const { formatMessage } = useIntl();
 
   const { editorView } = useConnectorBuilderFormState();
-  const { testStreamIndex } = useConnectorBuilderTestState();
+  const { testStreamIndex, streamRead } = useConnectorBuilderTestState();
   const [field] = useField(`streams[${testStreamIndex}].schema`);
 
   const formattedRecords = useMemo(() => formatJson(page.records), [page.records]);
@@ -45,7 +46,16 @@ export const PageDisplay: React.FC<PageDisplayProps> = ({ page, className, infer
   let defaultTabIndex = 0;
   const tabs: TabData[] = [
     {
-      title: `${formatMessage({ id: "connectorBuilder.recordsTab" })} (${page.records.length})`,
+      title: (
+        <>
+          {`${formatMessage({ id: "connectorBuilder.recordsTab" })} (${page.records.length})`}
+          {!streamRead.isFetching && streamRead.data && streamRead.data.test_read_limit_reached && (
+            <InfoTooltip>
+              <FormattedMessage id="connectorBuilder.streamTestLimitReached" />
+            </InfoTooltip>
+          )}
+        </>
+      ),
       key: "records",
       content: formattedRecords,
     },

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTester.tsx
@@ -1,6 +1,12 @@
+import { faClose } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { useEffect, useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
+import { useLocalStorage } from "react-use";
 
+import { Button } from "components/ui/Button";
+import { Callout } from "components/ui/Callout";
+import { FlexContainer, FlexItem } from "components/ui/Flex";
 import { ResizablePanels } from "components/ui/ResizablePanels";
 import { Spinner } from "components/ui/Spinner";
 import { Text } from "components/ui/Text";
@@ -37,6 +43,7 @@ export const StreamTester: React.FC<{
       errorUpdatedAt,
     },
   } = useConnectorBuilderTestState();
+  const [showLimitWarning, setShowLimitWarning] = useLocalStorage<boolean>("connectorBuilderLimitWarning", true);
 
   const streamName = streams[testStreamIndex]?.name;
 
@@ -139,6 +146,24 @@ export const StreamTester: React.FC<{
           <Spinner />
         </div>
       )}
+      {!isFetching && streamReadData && streamReadData.test_read_limit_reached && showLimitWarning && (
+        <Callout>
+          <FlexItem grow>
+            <FlexContainer alignItems="center">
+              <FlexItem grow>
+                <FormattedMessage id="connectorBuilder.streamTestLimitReached" />
+              </FlexItem>
+              <Button
+                onClick={() => {
+                  setShowLimitWarning(false);
+                }}
+                variant="clear"
+                icon={<FontAwesomeIcon icon={faClose} />}
+              />
+            </FlexContainer>
+          </FlexItem>
+        </Callout>
+      )}
       {!isFetching && (streamReadData !== undefined || errorMessage !== undefined) && (
         <ResizablePanels
           className={styles.resizablePanelsContainer}

diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json
@@ -767,6 +767,7 @@
   "connectorBuilder.loadingStreamList": "Loading",
   "connectorBuilder.noStreamSelected": "No stream selected",
   "connectorBuilder.streamListUrlError": "Could not load URL",
+  "connectorBuilder.streamTestLimitReached": "Stream testing limit reached. During testing only at max 5 stream slices with 5 pages each will be returned.",
   "connectorBuilder.builderPrompt.button": "Build your connector",
   "connectorBuilder.builderPrompt.title": "Need to build your own source?",
   "connectorBuilder.builderPrompt.description": "Build your source with our {adjective} {noun}",