🪟🎨 Connector builder: Always show inputs button (#20817)

Always show inputs button in connector builder UI
airbytehq · Jan 5, 2023 · 3a8916e · 3a8916e
1 parent f2f17af
commit 3a8916e
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 13 deletions.
diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/ConfigMenu.tsx
@@ -56,7 +56,10 @@ export const ConfigMenu: React.FC<ConfigMenuProps> = ({ className, configJsonErr
               size="sm"
               variant="secondary"
               onClick={() => setIsOpen(true)}
-              disabled={!jsonManifest.spec}
+              disabled={
+                !jsonManifest.spec ||
+                Object.keys(jsonManifest.spec.connection_specification.properties || {}).length === 0
+              }
               icon={<FontAwesomeIcon className={styles.icon} icon={faUser} />}
             >
               <FormattedMessage id="connectorBuilder.inputsButton" />

diff --git a/...-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.module.scss b/...-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.module.scss
@@ -37,6 +37,9 @@ $buttonHeight: 36px;
   gap: variables.$spacing-md;
   background-color: colors.$blue-50;
   border-radius: variables.$border-radius-sm;
+
+  // leave room for config button
+  margin-top: 50px;
 }
 
 .loadingSpinner {

diff --git a/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx b/airbyte-webapp/src/components/connectorBuilder/StreamTestingPanel/StreamTestingPanel.tsx
@@ -55,6 +55,12 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
 
   return (
     <div className={styles.container}>
+      <ConfigMenu
+        className={styles.configButton}
+        configJsonErrors={configJsonErrors}
+        isOpen={isTestInputOpen}
+        setIsOpen={setTestInputOpen}
+      />
       {!hasStreams && (
         <div className={styles.addStreamMessage}>
           <Heading as="h2" className={styles.addStreamHeading}>
@@ -64,18 +70,10 @@ export const StreamTestingPanel: React.FC<unknown> = () => {
         </div>
       )}
       {hasStreams && streamListErrorMessage === undefined && (
-        <>
-          <ConfigMenu
-            className={styles.configButton}
-            configJsonErrors={configJsonErrors}
-            isOpen={isTestInputOpen}
-            setIsOpen={setTestInputOpen}
-          />
-          <div className={styles.selectAndTestContainer}>
-            <StreamSelector className={styles.streamSelector} />
-            <StreamTester hasConfigJsonErrors={configJsonErrors > 0} setTestInputOpen={setTestInputOpen} />
-          </div>
-        </>
+        <div className={styles.selectAndTestContainer}>
+          <StreamSelector className={styles.streamSelector} />
+          <StreamTester hasConfigJsonErrors={configJsonErrors > 0} setTestInputOpen={setTestInputOpen} />
+        </div>
       )}
       {hasStreams && streamListErrorMessage !== undefined && (
         <div className={styles.listErrorDisplay}>