🪟 🎉 Add temporary dropdown component for geography selection (#19127)

* add temporary data geography dropdown * remove commented code * adjust comment * remove console.log * avoid any type

Author: Joey Marshment-Howell

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;