From d194cc81c5beef486e5a93ff8fce84c73c8fcbef Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 8 Nov 2022 16:40:29 +0100 Subject: [PATCH 1/5] add temporary data geography dropdown --- .../CreateConnection/DataResidency.tsx | 14 ++--- .../DataGeographyDropdown.module.scss | 18 ++++++ .../DataGeographyDropdown.tsx | 60 +++++++++++++++++++ .../common/DataGeographyDropdown/index.ts | 1 + .../UpdateConnectionDataResidency.tsx | 14 ++--- airbyte-webapp/src/locales/en.json | 2 + .../DataResidencyView/DataResidencyView.tsx | 14 +++-- airbyte-webapp/src/utils/links.ts | 1 + 8 files changed, 100 insertions(+), 24 deletions(-) create mode 100644 airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.module.scss create mode 100644 airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx create mode 100644 airbyte-webapp/src/components/common/DataGeographyDropdown/index.ts diff --git a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx index 6943c82e3bf0..6281d9414377 100644 --- a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx +++ b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx @@ -1,8 +1,8 @@ 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 { useAvailableGeographies } from "packages/cloud/services/geographies/GeographiesService"; import { links } from "utils/links"; @@ -43,17 +43,11 @@ export const DataResidency: React.FC = ({ name = "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)} />
diff --git a/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.module.scss b/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.module.scss new file mode 100644 index 000000000000..a67430c60392 --- /dev/null +++ b/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; +} diff --git a/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx b/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx new file mode 100644 index 000000000000..2df0eccf2217 --- /dev/null +++ b/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx @@ -0,0 +1,60 @@ +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; + // eslint-disable-next-line @typescript-eslint/no-explicit-any + value: any; // our current dropdown types values as any +} + +const CustomMenuList: React.FC = ({ children, ...rest }) => { + return ( + + {children} + + + + + + + + ); +}; + +export const DataGeographyDropdown: React.FC = ({ + geographies, + isDisabled = false, + onChange, + value, +}) => { + const { formatMessage } = useIntl(); + + return ( + ({ + label: formatMessage({ + id: `connection.geography.${geography}`, + defaultMessage: geography.toUpperCase(), + }), + value: geography, + }))} + value={value} + onChange={(option) => onChange(option.value)} + components={{ + MenuList: CustomMenuList, + }} + /> + ); +}; diff --git a/airbyte-webapp/src/components/common/DataGeographyDropdown/index.ts b/airbyte-webapp/src/components/common/DataGeographyDropdown/index.ts new file mode 100644 index 000000000000..88c96d65a297 --- /dev/null +++ b/airbyte-webapp/src/components/common/DataGeographyDropdown/index.ts @@ -0,0 +1 @@ +export { DataGeographyDropdown } from "./DataGeographyDropdown"; diff --git a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx index 85e7e56daff9..a292343484d4 100644 --- a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx +++ b/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,15 +63,9 @@ export const UpdateConnectionDataResidency: React.FC = () => {
{connectionUpdating && }
- ({ - label: formatMessage({ - id: `connection.geography.${geography}`, - defaultMessage: geography.toUpperCase(), - }), - value: geography, - }))} + geographies={geographies} value={selectedValue || connection.geography} onChange={handleSubmit} /> diff --git a/airbyte-webapp/src/locales/en.json b/airbyte-webapp/src/locales/en.json index 3eeb625c4719..1ed3e9aa66ca 100644 --- a/airbyte-webapp/src/locales/en.json +++ b/airbyte-webapp/src/locales/en.json @@ -370,6 +370,7 @@ "connection.catalogTree.destinationSchema": "'", "connection.geographyTitle": "Data residency", + "connection.requestNewGeography": "Request a new geography", "connection.geographyDescription": "Depending on your network configuration, you may need to add IP addresses 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. Learn more.", + "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", diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx index b2a83b27de98..7a6fe5611f22 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx +++ b/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"; @@ -35,6 +35,7 @@ export const DataResidencyView: React.FC = () => { values: DefaultDataResidencyFormValues, { resetForm }: FormikHelpers ) => { + console.log(values); try { await updateWorkspace({ workspaceId: workspace.workspaceId, @@ -44,7 +45,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,7 +93,12 @@ export const DataResidencyView: React.FC = () => { } />
- form.setFieldValue("defaultGeography", geography)} + /> + {/* ({ label: formatMessage({ id: `connection.geography.${geography}`, @@ -102,7 +108,7 @@ export const DataResidencyView: React.FC = () => { }))} value={field.value} onChange={(option) => form.setFieldValue("defaultGeography", option.value)} - /> + /> */}
)} diff --git a/airbyte-webapp/src/utils/links.ts b/airbyte-webapp/src/utils/links.ts index 957f87b08f80..4d63709ff54d 100644 --- a/airbyte-webapp/src/utils/links.ts +++ b/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; From 44e6b719d1850591e5a279ce305fe810ce42e216 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 8 Nov 2022 16:47:56 +0100 Subject: [PATCH 2/5] remove commented code --- .../DataResidencyView/DataResidencyView.tsx | 11 ----------- 1 file changed, 11 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx index 7a6fe5611f22..e8252ec39b3e 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx @@ -98,17 +98,6 @@ export const DataResidencyView: React.FC = () => { value={field.value} onChange={(geography) => form.setFieldValue("defaultGeography", geography)} /> - {/* ({ - label: formatMessage({ - id: `connection.geography.${geography}`, - defaultMessage: geography.toUpperCase(), - }), - value: geography, - }))} - value={field.value} - onChange={(option) => form.setFieldValue("defaultGeography", option.value)} - /> */}
)} From 8c26eeb03461f2be89070dee342c3f4e0d5bc916 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 8 Nov 2022 16:48:22 +0100 Subject: [PATCH 3/5] adjust comment --- .../common/DataGeographyDropdown/DataGeographyDropdown.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx b/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx index 2df0eccf2217..d56d092e1692 100644 --- a/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx +++ b/airbyte-webapp/src/components/common/DataGeographyDropdown/DataGeographyDropdown.tsx @@ -15,7 +15,7 @@ interface DataGeographyDropdownProps { isDisabled?: boolean; onChange: (value: Geography) => void; // eslint-disable-next-line @typescript-eslint/no-explicit-any - value: any; // our current dropdown types values as any + value: any; // our current dropdown types options as any anyway } const CustomMenuList: React.FC = ({ children, ...rest }) => { From 56b8c188dbbb2a053e015fe25dae8120a3d284a6 Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 8 Nov 2022 19:17:58 +0100 Subject: [PATCH 4/5] remove console.log --- .../views/workspaces/DataResidencyView/DataResidencyView.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx index e8252ec39b3e..553e9508ef62 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/DataResidencyView/DataResidencyView.tsx @@ -35,7 +35,6 @@ export const DataResidencyView: React.FC = () => { values: DefaultDataResidencyFormValues, { resetForm }: FormikHelpers ) => { - console.log(values); try { await updateWorkspace({ workspaceId: workspace.workspaceId, From 86a4dfc32055ebb8a1d131e226e6c15542c56f5e Mon Sep 17 00:00:00 2001 From: josephkmh Date: Tue, 8 Nov 2022 19:59:07 +0100 Subject: [PATCH 5/5] avoid any type --- .../src/components/CreateConnection/DataResidency.tsx | 3 ++- .../common/DataGeographyDropdown/DataGeographyDropdown.tsx | 3 +-- .../UpdateConnectionDataResidency.tsx | 2 +- 3 files changed, 4 insertions(+), 4 deletions(-) diff --git a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx index 6281d9414377..088a72f7b13f 100644 --- a/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx +++ b/airbyte-webapp/src/components/CreateConnection/DataResidency.tsx @@ -4,6 +4,7 @@ import { FormattedMessage, useIntl } from "react-intl"; import { DataGeographyDropdown } from "components/common/DataGeographyDropdown"; import { ControlLabels } from "components/LabeledControl"; +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 = ({ name = "geography" return (
- {({ field, form }: FieldProps) => ( + {({ field, form }: FieldProps) => (
void; - // eslint-disable-next-line @typescript-eslint/no-explicit-any - value: any; // our current dropdown types options as any anyway + value: Geography; } const CustomMenuList: React.FC = ({ children, ...rest }) => { diff --git a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx index a292343484d4..9bf9c44372d0 100644 --- a/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx +++ b/airbyte-webapp/src/components/connection/UpdateConnectionDataResidency/UpdateConnectionDataResidency.tsx @@ -66,7 +66,7 @@ export const UpdateConnectionDataResidency: React.FC = () => {