🪟 [Multi Cloud] Geography Dropdown Component

[natalyjazzviolin]

What

Closes https://github.com/airbytehq/airbyte-cloud/issues/3283

• This creates a dropdown component with mock data for the Geography API as a first step in the Multi Cloud project.
• The component has a storybook file and currently does not affect production.

Recommended reading order

1. airbyte-webapp/src/components/GeographyDropdown/GeographyDropdown.tsx
2. airbyte-webapp/src/components/GeographyDropdown/GeographyDropdown.module.scss
3. airbyte-webapp/src/components/GeographyDropdown/index.stories.tsx

🚨 User Impact 🚨

Pre-merge Checklist

Expand the relevant checklist and delete the others.

New Connector

Community member or Airbyter

• Community member? Grant edit access to maintainers (instructions)
• Secrets in the connector's spec are annotated with airbyte_secret
• Unit & integration tests added and passing. Community members, please provide proof of success locally e.g: screenshot or copy-paste unit, integration, and acceptance test output. To run acceptance tests for a Python connector, follow instructions in the README. For java connectors run ./gradlew :airbyte-integrations:connectors:<name>:integrationTest.
• Code reviews completed
• Documentation updated
  • Connector's README.md
  • Connector's bootstrap.md. See description and examples
  • docs/integrations/<source or destination>/<name>.md including changelog. See changelog example
  • docs/integrations/README.md
  • airbyte-integrations/builds.md
• PR name follows PR naming conventions

Airbyter

If this is a community PR, the Airbyte engineer reviewing this PR is responsible for the below items.

• Create a non-forked branch based on this PR and test the below items on it
• Build is successful
• If new credentials are required for use in CI, add them to GSM. Instructions.
• /test connector=connectors/<name> command is passing
• New Connector version released on Dockerhub by running the /publish command described here
• After the connector is published, connector added to connector index as described here
• Seed specs have been re-generated by building the platform and committing the changes to the seed spec files, as described here

Updating a connector

Community member or Airbyter

• Grant edit access to maintainers (instructions)
• Secrets in the connector's spec are annotated with airbyte_secret
• Unit & integration tests added and passing. Community members, please provide proof of success locally e.g: screenshot or copy-paste unit, integration, and acceptance test output. To run acceptance tests for a Python connector, follow instructions in the README. For java connectors run ./gradlew :airbyte-integrations:connectors:<name>:integrationTest.
• Code reviews completed
• Documentation updated
  • Connector's README.md
  • Connector's bootstrap.md. See description and examples
  • Changelog updated in docs/integrations/<source or destination>/<name>.md including changelog. See changelog example
• PR name follows PR naming conventions

Airbyter

If this is a community PR, the Airbyte engineer reviewing this PR is responsible for the below items.

• Create a non-forked branch based on this PR and test the below items on it
• Build is successful
• If new credentials are required for use in CI, add them to GSM. Instructions.
• /test connector=connectors/<name> command is passing
• New Connector version released on Dockerhub and connector version bumped by running the /publish command described here

Connector Generator

• Issue acceptance criteria met
• PR name follows PR naming conventions
• If adding a new generator, add it to the list of scaffold modules being tested
• The generator test modules (all connectors with -scaffold in their name) have been updated with the latest scaffold by running ./gradlew :airbyte-integrations:connector-templates:generator:testScaffoldTemplates then checking in your changes
• Documentation which references the generator is updated as needed

Tests

Unit

Put your unit tests output here.

Integration

Put your integration tests output here.

Acceptance

Put your acceptance tests output here.

[joeykmh]

Good start! I spun it up locally but the styling is not looking quite right:

It looks like some of your styles are being overridden by react-select default styles:

[joeykmh]

Left a few more comments, let me know if anything is unclear!

[natalyjazzviolin]

@josephkmh thank you for the review! I apologize for missing silly details, I was struggling with types and trying to get this ready ASAP - will make sure to be more attentive next time!!

I am still looking into how to set the isFocused styles correctly - for now I've altered the code so the dropdown options are accessible. The selected option background color does not persist, so I am wondering if it's best to set it outside of that style block somehow. I'm actively looking into it, but if you've got any advice - please let me know! Thank you for your time!

[timroes]

The theme files are going to go away, since they are only used for our legacy styled-components system. We should not use them in new code anymore. Instead if you need to get access in TS to colors, you should explicitally export them from your own SCSS file, e.g. see https://github.com/airbytehq/airbyte/blob/master/airbyte-webapp/src/components/ui/StatusIcon/CircleLoader.module.scss#L21-L25

Ideally though whenever possible you should prefer setting className instead and have all styling in the SCSS file (but there are legit cases when that's not necessarily possible, I'm not sure if this place here might support className actually?).

[joeykmh]

I advised to import from scss/export.module.scss here, but seems like re-exporting is the preferred method. Sorry for the bad advice @natalyjazzviolin!

FWIW I think you could do all this styling in GeographyDropdown.module.scss. You can beat react-select's CSS specificity by using something like :global(.reactSelect__option--is-focused).option { ... }. Note that :global() is special CSS modules syntax that lets you reference a non-scoped "normal" CSS class.

[natalyjazzviolin]

@josephkmh react-select's specificity was trumping the GeographyDropdown.module.scss styles, but this is really helpful, thank you! I'll get right on it!

[joeykmh]

@natalyjazzviolin could we move this component to src/components/common folder? We are doing a bit of a folder restructure and I think that's the best place for this component to live.

[CLAassistant]

All committers have signed the CLA.

[timroes]

CLosing this for now, since we first want to continue work on ListBox and then rebuild this on top of ListBox.