Show setup guide in side panel for Source and Destination creation #11985

teallarson · 2022-04-13T19:36:17Z

What

Previously, users could only access the setup guide by clicking a link and viewing it in a modal that would block access to the form. We want users to have access to the relevant docs when completing Connector setup in a two-panel view.

There are future iterations of this including an open-by-default functionality. There is more work needed before we can move forward with that.

For now, users can access the documentation the same way as before, however it will now open in a side panel that allows them to continue to access the form.

How

Adds a new Context to track the state of the side panel and the docs url of the currently selected connector
Adds a two panel layout that takes two child React nodes and, depending on the state of the side panel, displays the first panel full screen or both of them side-by-side.
Applies the context and provider to all places we have a source or destination creation form
Connectors that only list external docs will continue to open in a new tab when a user clicks "Setup Guide"

Recommended reading order

/src/views/Connector/ServiceForm/components/Controls/Instruction.tsx
/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationContext.tsx
/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx
Others

CLAassistant · 2022-05-05T13:12:22Z

All committers have signed the CLA.

teallarson · 2022-05-06T20:14:50Z

airbyte-webapp/src/components/PageTitle/PageTitle.tsx

@@ -29,6 +29,15 @@ export const MiddleBlock = styled.div`
  justify-content: center;
 `;

+export const MiddleTitleBlock = styled(H3)`


While I'm not implementing all of the design changes for the main content of the Connector pages, centering the titles made things feel more natural with the docs panel.

edmundito

Looking really good so far. I left a few comments for cleanup. My main concern is that I feel the layout component logic could be simplified and that resizing does not match the design yet.

airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx

edmundito · 2022-05-09T13:09:06Z

airbyte-webapp/src/components/DocumentationPanel/DocumentationPanel.tsx

+    return url.href;
+  };
+
+  const urlReplacerPlugin: PluggableList = [


This could be memoized, including the sanitizeLinks function since it's only used by the result

Done! I hit a ts error, but I believe that's because of the library we're using. If there's a way to solve it so I can remove the ts-expect-error, would love to change whatever is needed.

edmundito · 2022-05-09T13:11:21Z

airbyte-webapp/src/pages/ConnectionPage/ConnectionPage.tsx


-const ConnectionPage: React.FC = () => (
+export const ConnectionPage: React.FC = () => (


Export fixes 🔥

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

...-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/components/DestinationForm.tsx

...yte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx

...te-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationContext.tsx

airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx

edmundito · 2022-05-09T19:37:07Z

airbyte-webapp/src/components/ConnectorBlocks/FormPageContent.tsx

@@ -1,6 +1,7 @@
 import styled from "styled-components";

 const FormPageContent = styled.div<{ big?: boolean }>`
+  width: 80%;


I tested but could not find the impact of this 80% width setting. What does it fix?

It keeps the forms on Create Source and Create Destination from taking up the full panel width when the docs are open.

To see: go to "Sources", "Add a Source", select a connector, click "Setup Guide". Now if you comment out this line, you'll see the form takes up the full div (depending on screen size). Sounds like there are some other things to revisit with this form's styling when the docs are open though as well.

teallarson · 2022-05-11T13:12:18Z

airbyte-webapp/src/views/Connector/ServiceForm/components/Controls/DocumentationLink.tsx

+    <SideViewButton type="button" onClick={() => setDocumentationPanelOpen(!documentationPanelOpen)}>
+      <FormattedMessage id="form.setupGuide" />
+    </SideViewButton>


This probably doesn't need to remain its own component now that it's so pared down... however I'm leaving it in place for two reasons:
(1) It's called by <ConnectorServiceTypeControls /> and to match the pattern in that file, each field/item should be separated out
(2) Trying not to re-architect any forms with this PR as there's a full redesign of these forms in a separate issue coming up

edmundito

Looking really good, just had some notes on code details

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

airbyte-webapp/src/pages/DestinationPage/pages/CreateDestinationPage/CreateDestinationPage.tsx

airbyte-webapp/src/pages/SourcesPage/pages/CreateSourcePage/CreateSourcePage.tsx

...yte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx

airbyte-webapp/src/locales/en.json

airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanel.tsx

krishnaglick

Looks good locally!
I wouldn't mind a button to open documentation floating on the right vs just the link/button we have now, but that's outside the current scope 👍

...te-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationContext.tsx

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/CreationFormPage.tsx

krishnaglick · 2022-05-12T17:51:51Z

airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx

+            {currentStep === StepType.SET_UP_CONNECTION && (
+              <ConnectionStep onNextStep={() => setCurrentStep(StepType.FINAl)} />
+            )}
+            {currentStep === StepType.FINAl && <FinalStep />}


This could be cleaner in a switch

This page could definitely be cleaned up. The only change I made here was to wrap it in the ConnectorDocumentationWrapper. I am hesitant to change other logic with this PR.

airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx

...yte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx

teallarson · 2022-05-12T19:09:47Z

Looks good locally! I wouldn't mind a button to open documentation floating on the right vs just the link/button we have now, but that's outside the current scope 👍

The link goes away in the next iteration where it's open by default... which should be next week now that designs are finalized 🙌

airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx

...yte-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationLayout.tsx

...te-webapp/src/views/Connector/ConnectorDocumentationLayout/ConnectorDocumentationWrapper.tsx

teallarson · 2022-05-18T15:27:10Z

airbyte-webapp/src/pages/ConnectionPage/pages/CreationFormPage/components/SourceForm.tsx

@@ -40,7 +41,13 @@ const SourceFormComponent: React.FC<IProps> = ({ afterSubmit }) => {
    }, 2000);
  };

+  const { setDocumentationPanelOpen } = useDocumentationPanelContext();
+
+  useEffect(() => {


The Documentation Panel auto-closes on route change. However, during Onboarding and Connection workflows we do not change routes. Ideally, I think we should change routes during these flows. For now, we can call "close" in this manner in these workflows.

dizel852 · 2022-05-18T17:09:47Z

At approximately 355px of side panel width, it starts blinking

dizel852 · 2022-05-18T17:12:02Z

Overlay on left side doesn't fully cover the page if there is a scroll

teallarson · 2022-05-18T20:17:55Z

At approximately 355px of side panel width, it starts blinking

@dizel852 can you tell me what browser you're on that you're able to produce this? I've tried in Firefox, Safari, and Chrome and can't seem to get any to reproduce that bug! I did push a change earlier today, but I don't think it would have solved that bug?

Overlay on left side doesn't fully cover the page if there is a scroll

Should be resolved now!

dizel852 · 2022-05-19T10:46:54Z

@dizel852 can you tell me what browser you're on that you're able to produce this? I've tried in Firefox, Safari, and Chrome and can't seem to get any to reproduce that bug! I did push a change earlier today, but I don't think it would have solved that bug?

I use Chrome on Mac M1, probably that's why you can't reproduce it.

Also double-checked on other browsers:
Firefox - looks good, at least don't blink.
Safari - blinking.

I'm pretty this issue relates to 3rd package - react-reflex. I've found one of the sandboxes and the issue is reproduced:
https://www.loom.com/share/22931eeb526b4d6ba0f9d77aff2abac2
https://codesandbox.io/s/rough-water-mnbtw

It's barely noticeable since it blinks very fast.
I guess we can leave it as-is for now, since we can't do much with it.

Should be resolved now!

Confirm! The issue is gone 😄

teallarson · 2022-05-19T14:08:53Z

I would say it was super noticeable! Was able to reproduce it and fix it by adding overflow: scroll. Now the library react-reflex uses to make panels size aware is able to do its job better.

…ation

dizel852 · 2022-05-19T14:44:29Z

I would say it was super noticeable! Was able to reproduce it and fix it by adding overflow: scroll. Now the library react-reflex uses to make panels size aware is able to do its job better.

Yeap, confirm! It doesn't blink anymore. But I have one more concern 😅

During dragging resize button, looks like the browser tries to calculate scroll width and the whole UI is "twitches".
Can we somehow detect when the user starts dragging that resize button and set the appropriate CSS style to don't calculate the scroll width? That would allow us to make really smooth resize 😀

Here's an example:
https://www.loom.com/share/c5dfd68aced3458494d1abaf0a7121f4

Co-authored-by: Krishna Glick <krishna@airbyte.io>

…t/ConnectorDocumentationLayout.tsx Co-authored-by: Krishna Glick <krishna@airbyte.io>

teallarson · 2022-05-19T16:32:23Z

Merging in its current state after discussing with @edmundito if all checks pass.

…irbytehq#11985) * Works on Sources and Destination create now * styling for side panel * side panel now reusable component * works as expected in Connections flow * move documentation url to context * cleanup * fix incorrect docs fetching * move documentation panel into documentation layout * move layout and provider to wrapper * memoize the replaced urls * cleanup unused props * make panels size aware * adjust min size of docs panel * cleanup * Show placeholder if no docs exist * remove unneeded ternary * use react.fc * add context to settings pages for sources/destinations * fix general documentation panel styling * close on navigation * rename context, close panel on step change * fix scroll with dark overlay * add overflow scroll to fix blinking * fix merge bug

…11985) * Works on Sources and Destination create now * styling for side panel * side panel now reusable component * works as expected in Connections flow * move documentation url to context * cleanup * fix incorrect docs fetching * move documentation panel into documentation layout * move layout and provider to wrapper * memoize the replaced urls * cleanup unused props * make panels size aware * adjust min size of docs panel * cleanup * Show placeholder if no docs exist * remove unneeded ternary * use react.fc * add context to settings pages for sources/destinations * fix general documentation panel styling * close on navigation * rename context, close panel on step change * fix scroll with dark overlay * add overflow scroll to fix blinking * fix merge bug

github-actions bot added area/frontend area/platform issues related to the platform labels Apr 13, 2022

teallarson commented May 6, 2022

View reviewed changes

teallarson marked this pull request as ready for review May 9, 2022 07:30

teallarson requested a review from a team as a code owner May 9, 2022 07:30

edmundito reviewed May 9, 2022

View reviewed changes

teallarson changed the title ~~WIP - show setup guide in side panel for Source and Destination creation~~ Show setup guide in side panel for Source and Destination creation May 9, 2022

teallarson commented May 11, 2022

View reviewed changes

edmundito reviewed May 11, 2022

View reviewed changes

teallarson commented May 12, 2022

View reviewed changes

airbyte-webapp/src/views/Connector/ConnectorDocumentationLayout/DocumentationPanel.tsx Outdated Show resolved Hide resolved

krishnaglick reviewed May 12, 2022

View reviewed changes

teallarson requested review from edmundito and krishnaglick May 12, 2022 19:10

krishnaglick reviewed May 12, 2022

View reviewed changes

edmundito approved these changes May 12, 2022

View reviewed changes

teallarson commented May 18, 2022

View reviewed changes

teallarson added 2 commits May 19, 2022 10:40

WIP: add side panel for displaying docs during setup of source/destin…

73a114e

…ation

source page working

c5ce500

teallarson added 4 commits May 19, 2022 10:45

Works on Sources and Destination create now

757c0a5

move into subdir to match pattern

3566d20

cleanup from merge

575e028

styling for side panel

ec52d1b

teallarson and others added 19 commits May 19, 2022 10:56

cleanup

6207076

Show placeholder if no docs exist

ea5aff3

add placeholder if no setup guide found

3128e67

move component to components, handle "no guide found" more cleanly

17550b9

remove unnecessary fragments

1f9ee99

fix typo in onboarding types

40927f8

Update airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx

05f12ed

Co-authored-by: Krishna Glick <krishna@airbyte.io>

Update airbyte-webapp/src/views/Connector/ConnectorDocumentationLayou…

b859633

…t/ConnectorDocumentationLayout.tsx Co-authored-by: Krishna Glick <krishna@airbyte.io>

Update airbyte-webapp/src/views/Connector/ConnectorDocumentationLayou…

a044688

…t/ConnectorDocumentationLayout.tsx Co-authored-by: Krishna Glick <krishna@airbyte.io>

remove unneeded ternary

787364e

use react.fc

15e8da3

try moving import

2bf7b42

add context to settings pages for sources/destinations

5b3c553

fix general documentation panel styling

51c5138

close on navigation

2254731

rename context, close panel on step change

0c00f79

wrap serviceform tests in connectordocumentationwrapper

b557c49

fix scroll with dark overlay

b94478c

add overflow scroll to fix blinking

ccd1009

teallarson force-pushed the teal-side-panel-setup-guide branch from 303e0eb to ccd1009 Compare May 19, 2022 15:00

teallarson added 3 commits May 19, 2022 11:17

fix build, remove rotated header

a7e9208

cleanup

84fa8a1

fix merge bug

9549956

teallarson merged commit fce4dca into master May 19, 2022

teallarson deleted the teal-side-panel-setup-guide branch May 19, 2022 17:19

octavia-squidington-iii mentioned this pull request May 20, 2022

Bump Airbyte version from 0.38.4-alpha to 0.39.0-alpha #13065

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Show setup guide in side panel for Source and Destination creation #11985

Show setup guide in side panel for Source and Destination creation #11985

teallarson commented Apr 13, 2022 •

edited

Loading

CLAassistant commented May 5, 2022 •

edited

Loading

teallarson May 6, 2022

edmundito left a comment

edmundito May 9, 2022

teallarson May 11, 2022

edmundito May 9, 2022

edmundito May 9, 2022

teallarson May 9, 2022 •

edited

Loading

teallarson May 11, 2022 •

edited

Loading

edmundito left a comment

krishnaglick left a comment

krishnaglick May 12, 2022

teallarson May 12, 2022

teallarson commented May 12, 2022

teallarson May 18, 2022

dizel852 commented May 18, 2022

dizel852 commented May 18, 2022

teallarson commented May 18, 2022 •

edited

Loading

dizel852 commented May 19, 2022 •

edited

Loading

teallarson commented May 19, 2022

dizel852 commented May 19, 2022 •

edited

Loading

teallarson commented May 19, 2022


		const ConnectionPage: React.FC = () => (
		export const ConnectionPage: React.FC = () => (

Show setup guide in side panel for Source and Destination creation #11985

Show setup guide in side panel for Source and Destination creation #11985

Conversation

teallarson commented Apr 13, 2022 • edited Loading

What

How

Recommended reading order

CLAassistant commented May 5, 2022 • edited Loading

Choose a reason for hiding this comment

edmundito left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

teallarson May 9, 2022 • edited Loading

Choose a reason for hiding this comment

teallarson May 11, 2022 • edited Loading

Choose a reason for hiding this comment

edmundito left a comment

Choose a reason for hiding this comment

krishnaglick left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

teallarson commented May 12, 2022

Choose a reason for hiding this comment

dizel852 commented May 18, 2022

dizel852 commented May 18, 2022

teallarson commented May 18, 2022 • edited Loading

dizel852 commented May 19, 2022 • edited Loading

teallarson commented May 19, 2022

dizel852 commented May 19, 2022 • edited Loading

teallarson commented May 19, 2022

teallarson commented Apr 13, 2022 •

edited

Loading

CLAassistant commented May 5, 2022 •

edited

Loading

teallarson May 9, 2022 •

edited

Loading

teallarson May 11, 2022 •

edited

Loading

teallarson commented May 18, 2022 •

edited

Loading

dizel852 commented May 19, 2022 •

edited

Loading

dizel852 commented May 19, 2022 •

edited

Loading