🪟 🎉 Show connector builder button in connection creation flow for sou…

…rces (#7256) Co-authored-by: Vladimir <dizel852@gmail.com>
airbytehq · Jun 15, 2023 · 4256d5e · 4256d5e
1 parent 9677de6
commit 4256d5e
Show file tree

Hide file tree

Showing 4 changed files with 66 additions and 65 deletions.
diff --git a/airbyte-webapp/src/components/connection/CreateConnection/CreateNewDestination.tsx b/airbyte-webapp/src/components/connection/CreateConnection/CreateNewDestination.tsx
@@ -106,13 +106,11 @@ export const CreateNewDestination: React.FC = () => {
   if (selectedDestinationDefinitionId) {
     return (
       <>
-        <FlexContainer justifyContent="flex-start">
-          <Box mb="md">
-            <Button variant="clear" onClick={onGoBack} icon={<Icon type="chevronLeft" size="lg" />}>
-              <FormattedMessage id="connectorBuilder.backButtonLabel" />
-            </Button>
-          </Box>
-        </FlexContainer>
+        <Box mb="md">
+          <Button variant="clear" onClick={onGoBack} icon={<Icon type="chevronLeft" size="lg" />}>
+            <FormattedMessage id="connectorBuilder.backButtonLabel" />
+          </Button>
+        </Box>
         <DestinationForm
           selectedDestinationDefinitionId={selectedDestinationDefinitionId}
           destinationDefinitions={destinationDefinitions}

diff --git a/airbyte-webapp/src/components/connection/CreateConnection/CreateNewSource.tsx b/airbyte-webapp/src/components/connection/CreateConnection/CreateNewSource.tsx
@@ -102,13 +102,11 @@ export const CreateNewSource: React.FC = () => {
   if (selectedSourceDefinitionId) {
     return (
       <>
-        <FlexContainer justifyContent="flex-start">
-          <Box mb="md">
-            <Button variant="clear" onClick={onGoBack} icon={<Icon type="chevronLeft" size="lg" />}>
-              <FormattedMessage id="connectorBuilder.backButtonLabel" />
-            </Button>
-          </Box>
-        </FlexContainer>
+        <Box mb="md">
+          <Button variant="clear" onClick={onGoBack} icon={<Icon type="chevronLeft" size="lg" />}>
+            <FormattedMessage id="connectorBuilder.backButtonLabel" />
+          </Button>
+        </Box>
         <SourceForm
           selectedSourceDefinitionId={selectedSourceDefinitionId}
           sourceDefinitions={sourceDefinitions}
@@ -125,6 +123,7 @@ export const CreateNewSource: React.FC = () => {
         connectorDefinitions={filteredSourceDefinitions}
         onConnectorButtonClick={(sourceDefinition) => onSelectSourceDefinitionId(sourceDefinition.sourceDefinitionId)}
         onOpenRequestConnectorModal={onOpenRequestConnectorModal}
+        showConnectorBuilderButton
       />
     </FlexContainer>
   );

diff --git a/airbyte-webapp/src/components/connection/CreateConnection/SelectDestination.tsx b/airbyte-webapp/src/components/connection/CreateConnection/SelectDestination.tsx
@@ -76,31 +76,33 @@ export const SelectDestination: React.FC = () => {
 
   return (
     <>
-      <Card withPadding>
-        <Heading as="h2">
-          <FormattedMessage id="connectionForm.defineDestination" />
-        </Heading>
-        <Box mt="md">
-          <RadioButtonTiles
-            name="destinationType"
-            options={[
-              {
-                value: EXISTING_DESTINATION_TYPE,
-                label: "connectionForm.destinationExisting",
-                description: "connectionForm.destinationExistingDescription",
-                disabled: destinations.length === 0,
-              },
-              {
-                value: NEW_DESTINATION_TYPE,
-                label: "connectionForm.destinationNew",
-                description: "connectionForm.destinationNewDescription",
-              },
-            ]}
-            selectedValue={selectedDestinationType}
-            onSelectRadioButton={(id) => onSelectDestinationType(id)}
-          />
-        </Box>
-      </Card>
+      {!searchParams.get(DESTINATION_DEFINITION_PARAM) && (
+        <Card withPadding>
+          <Heading as="h2">
+            <FormattedMessage id="connectionForm.defineDestination" />
+          </Heading>
+          <Box mt="md">
+            <RadioButtonTiles
+              name="destinationType"
+              options={[
+                {
+                  value: EXISTING_DESTINATION_TYPE,
+                  label: "connectionForm.destinationExisting",
+                  description: "connectionForm.destinationExistingDescription",
+                  disabled: destinations.length === 0,
+                },
+                {
+                  value: NEW_DESTINATION_TYPE,
+                  label: "connectionForm.destinationNew",
+                  description: "connectionForm.destinationNewDescription",
+                },
+              ]}
+              selectedValue={selectedDestinationType}
+              onSelectRadioButton={(id) => onSelectDestinationType(id)}
+            />
+          </Box>
+        </Card>
+      )}
       <Box mt="xl">
         {selectedDestinationType === EXISTING_DESTINATION_TYPE && (
           <SelectExistingConnector connectors={destinations} selectConnector={selectDestination} />

diff --git a/airbyte-webapp/src/components/connection/CreateConnection/SelectSource.tsx b/airbyte-webapp/src/components/connection/CreateConnection/SelectSource.tsx
@@ -75,38 +75,40 @@ export const SelectSource: React.FC = () => {
 
   return (
     <>
-      <Card withPadding>
-        <Heading as="h2">
-          <FormattedMessage id="connectionForm.defineSource" />
-        </Heading>
-        <Box mt="md">
-          <RadioButtonTiles
-            name="sourceType"
-            options={[
-              {
-                value: EXISTING_SOURCE_TYPE,
-                label: "connectionForm.sourceExisting",
-                description: "connectionForm.sourceExistingDescription",
-                disabled: sources.length === 0,
-              },
-              {
-                value: NEW_SOURCE_TYPE,
-                label: "onboarding.sourceSetUp",
-                description: "onboarding.sourceSetUp.description",
-              },
-            ]}
-            selectedValue={selectedSourceType}
-            onSelectRadioButton={(id) => onSelectSourceType(id)}
-          />
-        </Box>
-      </Card>
+      {!searchParams.get(SOURCE_DEFINITION_PARAM) && (
+        <Card withPadding>
+          <Heading as="h2">
+            <FormattedMessage id="connectionForm.defineSource" />
+          </Heading>
+          <Box mt="md">
+            <RadioButtonTiles
+              name="sourceType"
+              options={[
+                {
+                  value: EXISTING_SOURCE_TYPE,
+                  label: "connectionForm.sourceExisting",
+                  description: "connectionForm.sourceExistingDescription",
+                  disabled: sources.length === 0,
+                },
+                {
+                  value: NEW_SOURCE_TYPE,
+                  label: "onboarding.sourceSetUp",
+                  description: "onboarding.sourceSetUp.description",
+                },
+              ]}
+              selectedValue={selectedSourceType}
+              onSelectRadioButton={(id) => onSelectSourceType(id)}
+            />
+          </Box>
+        </Card>
+      )}
       <Box mt="xl">
         {selectedSourceType === EXISTING_SOURCE_TYPE && (
           <SelectExistingConnector connectors={sources} selectConnector={selectSource} />
         )}
         {selectedSourceType === NEW_SOURCE_TYPE && <CreateNewSource />}
+        <CloudInviteUsersHint connectorType="source" />
       </Box>
-      <CloudInviteUsersHint connectorType="source" />
     </>
   );
 };