🪟 🎉 Suggest most frequently used Destinations / Suggest Google Sheets as a first destination

[dizel852]

What

Closes #13160

How

• Add frequently used destinations to the Connector form.

• By default, there will be 2 destinations: BigQuery and Snowflake.

• The list of destinations can be overwritten by LaunchDarkly by providing the array of destinationDefinitionId.

• Add a card with a suggestion to use Google Sheets as a first destination, in case a user has none.

• By default, it's turned off.

• The destination can be overwritten by LaunchDarkly by providing the destinationDefinitionId

Screen recording(demo): https://www.loom.com/share/e154e902b5514b98a4d7692ca5eafb74

Recommended reading order

1. /components/SlickSlider/*.* - new reusable base component with tests and storybook
2. /ServiceForm/components/FrequentlyUsedDestinations - component, tests, storybook
3. /ServiceForm/components/StartWithDestination - component, tests, storybook
4. src/views/Connector/ServiceForm/ServiceForm.tsx - where new components was added
5. ...rest of the files

[dizel852]

Few comments regarding decisions I've made during the work on the feature:

1. Some empty space under <FrequentlyUsedDestinations />

Due to the current implementation of <ServiceForm />, I need to put <FrequentlyUsedDestinations /> inside Formik. On a higher level, each Formik field is wrapped by <FormSection /> which has margin-bottom: 27px. I guess this one will be fixed in #13056

2. Two <ContentCard /> in one Formik form.

So initially we have a structure like:

<ContentCard>
    <Formik />
     .......
</ContentCard>

Due to design, we need to decouple one of Formik's fields and render it in a separate <ContentCard />, but we can't do that due to current implementation, and we need to use some Formik's hook inside a context. So as a solution we render this card as is, but with position: absolute:

<ContentCard>
    <Formik>
     .......
     <ContentCard>
          <StartWithDestination />
     </ContentCard>
    </Formik>
</ContentCard>

https://github.com/airbytehq/airbyte/blob/92701f553f7bf22bd5c2687b70a051e2c614bb8f/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/StartWithDestination.module.scss#L4-L21

And since our <StartWithDestination /> component is absolutely positioned, so now it hides the "Close onboarding" button. Hence we need to move the button a little bit down(very hacky 😞 ) : https://github.com/airbytehq/airbyte/blob/92701f553f7bf22bd5c2687b70a051e2c614bb8f/airbyte-webapp/src/pages/OnboardingPage/OnboardingPage.tsx#L42-L50

Probably I miss something, and there is a more elegant solution...

[dizel852]

ℹ️ The PR should be merged after this one - PR

[dizel852]

I'm not sure how to alter what LaunchDarkly sends for local testing so I can't verify the slider.

In order to test the case when LaunchDarkly provides us with some data, we just need to change the default useExperiment value. Example: From const startWithDestinationId = useExperiment("connector.startWithDestinationId", ""); To const startWithDestinationId = useExperiment("connector.startWithDestinationId", "424892c4-daac-4491-b35d-c6688ba547ba");

[krishnaglick]

Can we make the Destination's have cursor: pointer?

[dizel852]

Can we make the Destination's have cursor: pointer?

Sure! Good idea! I also felt like something was missing. Will fix it!

[krishnaglick]

Do we want this empty space here when there's no recommended destination?

[dizel852]

Do we want this empty space here when there's no recommended destination?

@krishnaglick Definitely - no. But! There is always some "but" 😄 I've already explained why that happens in the very first comment - https://github.com/airbytehq/airbyte/pull/16355#issuecomment-1240028725 (second point)

Any ideas on how we could deal with it?

[timroes]

Regarding the styling, is there a specific reason we need to have this position: absolute instead of just having them regular static positioned element below each other? I'm happy to take a look here, just trying to understand what's the main problem why this didn't seem to work so far?

[dizel852]

Regarding the styling, is there a specific reason we need to have this position: absolute instead of just having them regular static positioned element below each other? I'm happy to take a look here, just trying to understand what's the main problem why this didn't seem to work so far?

@timroes already mentioned it in the comment - https://github.com/airbytehq/airbyte/pull/16355#issuecomment-1240028725 (point 2)

I need to call Formik's hook out of the Formik's Context here, to set the connector for Formik: https://github.com/airbytehq/airbyte/blob/92701f553f7bf22bd5c2687b70a051e2c614bb8f/airbyte-webapp/src/views/Connector/ServiceForm/components/StartWithDestination/StartWithDestination.tsx#L17

Since we can't do that, one of the solutions is to place <StartWithDestination /> component inside Formik, and move it outside the <Card /> component using styles. If we remove position: absolute it will look like this:

If it's okay - I will make changes and remove position: absolute

[timroes]

@dizel852 I would prefer that more than the hacky absolute positioning (and the issues coming from it) :) let's just remove the top margin now a bit so it's looking a bit more natural. We can always revisit the design once we split away the connector type from the formik form later.

Cc @nataliekwong to let you know we're having a slightly different design in the first version until we've done some more code cleanup to enable the other design.

[dizel852]

@nataliekwong Looks nice?

[nataliekwong]

@dizel852 Looks great! Small nit: could we change the capitalization to say "Most frequently used destinations"

fyi @letiescanciano as we could use LaunchDarkly to run personalization here (using Clearbit tech)

[dizel852]

@dizel852 Looks great! Small nit: could we change the capitalization to say "Most frequently used destinations"

fyi @letiescanciano as we could use LaunchDarkly to run personalization here (using Clearbit tech)

Sure, no pb! Will push fix in a minute