🪟 🎉 Add temporary dropdown component for geography selection

airbyte-webapp/src/components/CreateConnection/DataResidency.tsx

@@ -1,9 +1,10 @@
 import { Field, FieldProps, useFormikContext } from "formik";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { DataGeographyDropdown } from "components/common/DataGeographyDropdown";
 import { ControlLabels } from "components/LabeledControl";
-import { DropDown } from "components/ui/DropDown";
 
+import { Geography } from "core/request/AirbyteClient";
 import { useAvailableGeographies } from "packages/cloud/services/geographies/GeographiesService";
 import { links } from "utils/links";
 import { Section } from "views/Connection/ConnectionForm/components/Section";
@@ -22,7 +23,7 @@ export const DataResidency: React.FC<DataResidencyProps> = ({ name = "geography"
   return (
     <Section title={formatMessage({ id: "connection.geographyTitle" })}>
       <Field name={name}>
-        {({ field, form }: FieldProps<string>) => (
+        {({ field, form }: FieldProps<Geography>) => (
           <div className={styles.flexRow}>
             <div className={styles.leftFieldCol}>
               <ControlLabels
@@ -43,17 +44,11 @@ export const DataResidency: React.FC<DataResidencyProps> = ({ name = "geography"
               />
             </div>
             <div className={styles.rightFieldCol}>
-              <DropDown
+              <DataGeographyDropdown
                 isDisabled={form.isSubmitting}
-                options={geographies.map((geography) => ({
-                  label: formatMessage({
-                    id: `connection.geography.${geography}`,
-                    defaultMessage: geography.toUpperCase(),
-                  }),
-                  value: geography,
-                }))}
+                geographies={geographies}
                 value={field.value}
-                onChange={(geography) => setFieldValue(name, geography.value)}
+                onChange={(geography) => setFieldValue(name, geography)}
               />
             </div>
           </div>

airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.module.scss

@@ -0,0 +1,18 @@
+@use "scss/colors";
+@use "scss/variables";
+
+.requestLink {
+  padding: variables.$spacing-md variables.$spacing-lg;
+  color: colors.$blue-400;
+  text-decoration: none;
+  display: block;
+  border-top: 1px solid colors.$grey-100;
+
+  &:hover {
+    background: colors.$grey-100;
+  }
+}
+
+.linkText {
+  margin-left: variables.$spacing-md;
+}

airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx

@@ -0,0 +1,59 @@
+import { faPlus } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { FormattedMessage, useIntl } from "react-intl";
+import { components, MenuListProps } from "react-select";
+
+import { DropDown } from "components/ui/DropDown";
+
+import { Geography } from "core/request/AirbyteClient";
+import { links } from "utils/links";
+
+import styles from "./DataGeographyDropdown.module.scss";
+
+interface DataGeographyDropdownProps {
+  geographies: Geography[];
+  isDisabled?: boolean;
+  onChange: (value: Geography) => void;
+  value: Geography;
+}
+
+const CustomMenuList: React.FC<MenuListProps> = ({ children, ...rest }) => {
+  return (
+    <components.MenuList {...rest}>
+      {children}
+      <a href={links.dataResidencySurvey} target="_blank" rel="noreferrer" className={styles.requestLink}>
+        <FontAwesomeIcon icon={faPlus} />
+        <span className={styles.linkText}>
+          <FormattedMessage id="connection.requestNewGeography" />
+        </span>
+      </a>
+    </components.MenuList>
+  );
+};
+
+export const DataGeographyDropdown: React.FC<DataGeographyDropdownProps> = ({
+  geographies,
+  isDisabled = false,
+  onChange,
+  value,
+}) => {
+  const { formatMessage } = useIntl();
+
+  return (
+    <DropDown
+      isDisabled={isDisabled}
+      options={geographies.map((geography) => ({
+        label: formatMessage({
+          id: `connection.geography.${geography}`,
+          defaultMessage: geography.toUpperCase(),
+        }),
+        value: geography,
+      }))}
+      value={value}
+      onChange={(option) => onChange(option.value)}
+      components={{
+        MenuList: CustomMenuList,
+      }}
+    />
+  );
+};

airbyte-webapp/src/components/common/DataGeographyDropdown/index.ts

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

airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx

@@ -1,9 +1,9 @@
 import React, { useState } from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
+import { DataGeographyDropdown } from "components/common/DataGeographyDropdown";
 import { ControlLabels } from "components/LabeledControl";
 import { Card } from "components/ui/Card";
-import { DropDown } from "components/ui/DropDown";
 import { Spinner } from "components/ui/Spinner";
 
 import { Geography } from "core/request/AirbyteClient";
@@ -22,7 +22,7 @@ export const UpdateConnectionDataResidency: React.FC = () => {
 
   const { geographies } = useAvailableGeographies();
 
-  const handleSubmit = async ({ value }: { value: Geography }) => {
+  const handleSubmit = async (value: Geography) => {
     try {
       setSelectedValue(value);
       await updateConnection({
@@ -63,16 +63,10 @@ export const UpdateConnectionDataResidency: React.FC = () => {
         <div className={styles.dropdownWrapper}>
           <div className={styles.spinner}>{connectionUpdating && <Spinner small />}</div>
           <div className={styles.dropdown}>
-            <DropDown
+            <DataGeographyDropdown
               isDisabled={connectionUpdating}
-              options={geographies.map((geography) => ({
-                label: formatMessage({
-                  id: `connection.geography.${geography}`,
-                  defaultMessage: geography.toUpperCase(),
-                }),
-                value: geography,
-              }))}
-              value={selectedValue || connection.geography}
+              geographies={geographies}
+              value={selectedValue || connection.geography || geographies[0]}
               onChange={handleSubmit}
             />
           </div>

airbyte-webapp/src/locales/en.json

@@ -370,6 +370,7 @@
   "connection.catalogTree.destinationSchema": "'<destination schema>",
 
   "connection.geographyTitle": "Data residency",
+  "connection.requestNewGeography": "Request a new geography",
   "connection.geographyDescription": "Depending on your network configuration, you may need to <lnk>add IP addresses</lnk> to your allowlist.",
   "connection.geography.auto": "Airbyte Default",
   "connection.geography.us": "United States",
@@ -523,6 +524,7 @@
   "settings.defaultDataResidency": "Default Data Residency",
   "settings.defaultGeography": "Geography",
   "settings.defaultDataResidencyDescription": "Choose the default preferred data processing location for all of your connections. The default data residency setting only affects new connections. Existing connections will retain their data residency setting. <lnk>Learn more</lnk>.",
+  "settings.defaultDataResidencyUpdateError": "There was an error updating the default data residency for this workspace.",
 
   "connector.requestConnectorBlock": "Request a new connector",
   "connector.requestConnector": "Request a new connector",

airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx

@@ -3,8 +3,8 @@ import React from "react";
 import { FormattedMessage, useIntl } from "react-intl";
 
 import { ControlLabels } from "components";
+import { DataGeographyDropdown } from "components/common/DataGeographyDropdown";
 import { Button } from "components/ui/Button";
-import { DropDown } from "components/ui/DropDown";
 import { Text } from "components/ui/Text";
 
 import { Geography } from "core/request/AirbyteClient";
@@ -44,7 +44,7 @@ export const DataResidencyView: React.FC = () => {
     } catch (e) {
       registerNotification({
         id: "workspaceSettings.defaultGeographyError",
-        title: formatMessage({ id: "connection.geographyUpdateError" }),
+        title: formatMessage({ id: "settings.defaultDataResidencyUpdateError" }),
         isError: true,
       });
     }
@@ -92,16 +92,10 @@ export const DataResidencyView: React.FC = () => {
                       }
                     />
                     <div className={styles.defaultGeographyDropdown}>
-                      <DropDown
-                        options={geographies.map((geography) => ({
-                          label: formatMessage({
-                            id: `connection.geography.${geography}`,
-                            defaultMessage: geography.toUpperCase(),
-                          }),
-                          value: geography,
-                        }))}
+                      <DataGeographyDropdown
+                        geographies={geographies}
                         value={field.value}
-                        onChange={(option) => form.setFieldValue("defaultGeography", option.value)}
+                        onChange={(geography) => form.setFieldValue("defaultGeography", geography)}
                       />
                     </div>
                   </div>

airbyte-webapp/src/utils/links.ts

@@ -30,6 +30,7 @@ export const links = {
   webhookGuideLink: `${BASE_DOCS_LINK}/operator-guides/configuring-sync-notifications/`,
   cronReferenceLink: "http://www.quartz-scheduler.org/documentation/quartz-2.3.0/tutorials/crontrigger.html",
   cloudAllowlistIPsLink: `${BASE_DOCS_LINK}/cloud/getting-started-with-airbyte-cloud/#allowlist-ip-address`,
+  dataResidencySurvey: "https://forms.gle/Dr7MPTdt9k3xTinL8",
 } as const;
 
 export type OutboundLinks = typeof links;