🪟 [Multi Cloud] Geography Dropdown Component

airbyte-webapp/.stylelintrc

@@ -6,7 +6,7 @@
     "stylelint-config-prettier-scss"
   ],
   "rules": {
-    "selector-class-pattern": "^[a-z][a-zA-Z0-9]+$",
+    "selector-class-pattern": "^[a-z][a-zA-Z0-9_/-]+$",
     "color-function-notation": null,
     "font-family-name-quotes": null,
     "no-unknown-animations": true,

airbyte-webapp/package.json

@@ -40,6 +40,7 @@
     "classnames": "^2.3.1",
     "dayjs": "^1.11.3",
     "firebase": "^9.8.2",
+    "flag-icons": "^6.6.6",
     "flat": "^5.0.2",
     "formik": "^2.2.9",
     "framer-motion": "^6.3.11",

airbyte-webapp/src/components/GeographyDropdown/GeographyDropdown.module.scss

@@ -0,0 +1,70 @@
+@use "scss/variables";
+@use "scss/colors";
+
+.menuList {
+  padding: 10px 16px;
+  margin-top: 10px;
+  max-width: 300px;
+  color: colors.$blue-300;
+  border-top: solid colors.$dark-blue-50 1px;
+
+  :first-child {
+    padding-right: 8px;
+  }
+
+  :last-child {
+    font-size: variables.$spacing-lg;
+  }
+}
+
+.reactSelectContainer {
+  width: 300px;
+
+  & .option {
+    display: flex;
+    align-items: center;
+    padding: 6px 20px 6px 6px;
+    margin: 0 10px;
+    max-width: 280px;
+    font-weight: 500;
+    color: colors.$black;
+    border-radius: 10px;
+    cursor: pointer;
+  }
+}
+
+.flag {
+  padding: 9px 6px;
+  border-radius: 7px;
+  background-color: colors.$white;
+  display: flex;
+  align-items: center;
+}
+
+.label {
+  padding-left: 8px;
+}
+
+.optionLabel {
+  display: flex;
+  align-items: center;
+  font-weight: 500;
+}
+
+/* stylelint-disable no-descending-specificity */
+:global(.reactSelect__option--is-focused).option {
+  background-color: colors.$grey-50;
+
+  &:active {
+    background-color: colors.$grey-50;
+  }
+}
+
+:global(.reactSelect__option--is-selected).option {
+  background-color: colors.$blue-50;
+
+  &:active {
+    background-color: colors.$blue-50;
+  }
+}
+/* stylelint-enable no-descending-specificity */

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

@@ -0,0 +1,85 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import React, { useState } from "react";
+import { useIntl } from "react-intl";
+import { components, OptionProps, MenuListProps, StylesConfig } from "react-select";
+
+import "/node_modules/flag-icons/css/flag-icons.min.css";
+
+import { DropDown } from "components/ui/DropDown";
+import { DropdownProps } from "components/ui/DropDown";
+
+import { Geography } from "core/request/AirbyteClient";
+
+import styles from "./GeographyDropdown.module.scss";
+
+const GeographyOption: React.FC<OptionProps> = (props) => {
+  const { formatMessage } = useIntl();
+  return (
+    <components.Option className={styles.option} {...props}>
+      <div className={styles.flag}>
+        <span className={`fi fi-${props.label === "auto" ? "us" : props.label}`} />
+      </div>
+      <span className={styles.label}>{formatMessage({ id: `geography.${props.label}` })}</span>
+    </components.Option>
+  );
+};
+
+const MenuList = (props: MenuListProps) => {
+  const { formatMessage } = useIntl();
+  return (
+    <components.MenuList {...props}>
+      {props.children}
+      <div className={styles.menuList}>
+        <FontAwesomeIcon icon={faPlus} />
+        <span>{formatMessage({ id: "geography.new" })}</span>
+      </div>
+    </components.MenuList>
+  );
+};
+
+interface GeographySelectOption {
+  label: Geography;
+  value: Geography;
+}
+
+export const GeographyDropdown: React.FC<DropdownProps<GeographySelectOption>> = ({ options }) => {
+  const [option, setOption] = useState({});
+  const { formatMessage } = useIntl();
+  const handleOptionSelect = (event: { label: string }) => {
+    setOption(event.label);
+  };
+
+  const formatOptionLabel = ({ label }: { label: string }) => {
+    return (
+      <div className={styles.optionLabel}>
+        <div className={styles.flag}>
+          <span className={`fi fi-${label === "auto" ? "us" : label}`} />
+        </div>
+        <span className={styles.label}>
+          {formatMessage({ id: `geography.${label}`, defaultMessage: label.toUpperCase() })}
+        </span>
+      </div>
+    );
+  };
+
+  const customStyles: StylesConfig<GeographySelectOption> = {
+    valueContainer: () => ({
+      display: "flex",
+    }),
+  };
+
+  return (
+    <DropDown
+      className={styles.reactSelectContainer}
+      classNamePrefix="reactSelect"
+      options={options}
+      components={{ Option: GeographyOption, MenuList }}
+      onChange={handleOptionSelect}
+      value={option}
+      formatOptionLabel={formatOptionLabel}
+      styles={customStyles}
+      placeholder={formatMessage({ id: "geography.select" })}
+    />
+  );
+};

airbyte-webapp/src/components/GeographyDropdown/index.stories.tsx

@@ -0,0 +1,31 @@
+import { ComponentStory, ComponentMeta } from "@storybook/react";
+
+import { GeographyDropdown } from "./GeographyDropdown";
+
+export default {
+  title: "Common/GeographyDropdown",
+  component: GeographyDropdown,
+} as ComponentMeta<typeof GeographyDropdown>;
+
+const Template: ComponentStory<typeof GeographyDropdown> = (args) => <GeographyDropdown {...args} />;
+
+export const Empty = Template.bind({});
+Empty.args = {};
+
+export const Primary = Template.bind({});
+Primary.args = {
+  options: [
+    {
+      value: "us",
+      label: "us",
+    },
+    {
+      value: "auto",
+      label: "auto",
+    },
+    {
+      value: "eu",
+      label: "eu",
+    },
+  ],
+};

airbyte-webapp/src/components/GeographyDropdown/index.ts

@@ -0,0 +1 @@
+export { GeographyDropdown } from "./GeographyDropdown";

airbyte-webapp/src/locales/en.json

@@ -406,6 +406,12 @@
   "form.frequency.placeholder": "Select a frequency",
   "form.frequency.message": "Set how often data should sync to the destination",
 
+  "geography.us": "United States",
+  "geography.eu": "Europe",
+  "geography.auto": "Airbyte default",
+  "geography.new": "Request a new geography",
+  "geography.select": "Select a region …",
+
   "connection.replicationFrequency": "Replication frequency*",
   "connection.replicationFrequency.subtitle": "Set how often data should sync to the destination",
   "connection.normalization": "Normalization",