From 7866287b4b63aaa4ea60554288ab40e9d4b406e7 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Tue, 20 Sep 2022 16:22:27 -0400 Subject: [PATCH 01/10] Add validation to WorkspaceSettingsView Use i18n string sin WorkspaceSettingsView buttons --- .../WorkspaceSettingsView/WorkspaceSettingsView.tsx | 12 +++++++++--- 1 file changed, 9 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx index 7f804a66e322..8738b846a278 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx @@ -2,6 +2,7 @@ import classNames from "classnames"; import { Field, FieldProps, Form, Formik } from "formik"; import React from "react"; import { FormattedMessage, useIntl } from "react-intl"; +import * as yup from "yup"; import { Button, Label, LabeledInput, LabeledSwitch, LoadingButton } from "components"; import { InfoTooltip } from "components/base/Tooltip"; @@ -27,6 +28,10 @@ const AdvancedModeSwitchLabel = () => ( ); +const ValidationSchema = yup.object().shape({ + name: yup.string().required("form.empty.error"), +}); + export const WorkspaceSettingsView: React.FC = () => { const { formatMessage } = useIntl(); useTrackPage(PageTrackingCodes.SETTINGS_WORKSPACE); @@ -60,6 +65,7 @@ export const WorkspaceSettingsView: React.FC = () => { name: payload.name, }); }} + validationSchema={ValidationSchema} > {({ dirty, isSubmitting, resetForm, isValid, setFieldValue }) => (
@@ -93,10 +99,10 @@ export const WorkspaceSettingsView: React.FC = () => {
- - save changes + +
From 2c686ec37cd801e0751a62dfcc1d5b8240addf4e Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Tue, 20 Sep 2022 16:44:56 -0400 Subject: [PATCH 02/10] Invalidate the workspace query when updating the workspace in cloud --- .../services/workspaces/WorkspacesService.tsx | 16 ++++++++-------- .../WorkspaceSettingsView.tsx | 13 +++++++++---- .../services/workspaces/WorkspacesService.tsx | 9 +++++++++ 3 files changed, 26 insertions(+), 12 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx index 77f11904a525..204c0162bedd 100644 --- a/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx +++ b/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx @@ -5,11 +5,13 @@ import { CloudWorkspacesService } from "packages/cloud/lib/domain/cloudWorkspace import { CloudWorkspace, CloudWorkspaceUsage } from "packages/cloud/lib/domain/cloudWorkspaces/types"; import { useCurrentUser } from "packages/cloud/services/auth/AuthService"; import { useConfig } from "packages/cloud/services/config"; +import { useSuspenseQuery } from "services/connector/useSuspenseQuery"; import { SCOPE_USER } from "services/Scope"; import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares"; import { useInitService } from "services/useInitService"; +import { useWorkspaceService } from "services/workspaces/WorkspacesService"; -import { useSuspenseQuery } from "../../../../services/connector/useSuspenseQuery"; +export { useWorkspaceService }; export const workspaceKeys = { all: [SCOPE_USER, "cloud_workspaces"] as const, @@ -57,7 +59,7 @@ export function useCreateWorkspace() { }).mutateAsync; } -export function useUpdateWorkspace() { +export function useUpdateCloudWorkspace() { const service = useGetWorkspaceService(); const queryClient = useQueryClient(); @@ -81,7 +83,7 @@ export function useUpdateWorkspace() { return [...list.slice(0, index), result, ...list.slice(index + 1)]; }); - queryClient.setQueryData([workspaceKeys.detail(result.workspaceId)], (old) => { + queryClient.setQueryData(workspaceKeys.detail(result.workspaceId), (old) => { return { ...old, ...result, @@ -108,14 +110,14 @@ export function useRemoveWorkspace() { export function useGetCloudWorkspace(workspaceId: string): CloudWorkspace { const service = useGetWorkspaceService(); - return useSuspenseQuery([workspaceKeys.detail(workspaceId)], () => service.get(workspaceId)); + return useSuspenseQuery(workspaceKeys.detail(workspaceId), () => service.get(workspaceId)); } export function useInvalidateCloudWorkspace(workspaceId: string): () => Promise { const queryClient = useQueryClient(); return useCallback( - () => queryClient.invalidateQueries([workspaceKeys.detail(workspaceId)]), + () => queryClient.invalidateQueries(workspaceKeys.detail(workspaceId)), [queryClient, workspaceId] ); } @@ -123,7 +125,5 @@ export function useInvalidateCloudWorkspace(workspaceId: string): () => Promise< export function useGetUsage(workspaceId: string): CloudWorkspaceUsage { const service = useGetWorkspaceService(); - return useSuspenseQuery([workspaceKeys.usage(workspaceId)], () => service.getUsage(workspaceId)); + return useSuspenseQuery(workspaceKeys.usage(workspaceId), () => service.getUsage(workspaceId)); } - -export { useWorkspaceService } from "services/workspaces/WorkspacesService"; diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx index 8738b846a278..940e1a5a8af1 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx @@ -12,10 +12,11 @@ import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import { useRemoveWorkspace, - useUpdateWorkspace, + useUpdateCloudWorkspace, useWorkspaceService, } from "packages/cloud/services/workspaces/WorkspacesService"; import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponents"; +import { useInvalidateWorkspaceQuery } from "services/workspaces/WorkspacesService"; import styles from "./WorkspaceSettingsView.module.scss"; @@ -38,7 +39,8 @@ export const WorkspaceSettingsView: React.FC = () => { const { exitWorkspace } = useWorkspaceService(); const workspace = useCurrentWorkspace(); const removeWorkspace = useRemoveWorkspace(); - const updateWorkspace = useUpdateWorkspace(); + const updateCloudWorkspace = useUpdateCloudWorkspace(); + const invalidateWorkspaceQuery = useInvalidateWorkspaceQuery(); const [isAdvancedMode, setAdvancedMode] = useAdvancedModeSetting(); return ( @@ -59,12 +61,15 @@ export const WorkspaceSettingsView: React.FC = () => { advancedMode: isAdvancedMode, }} onSubmit={async (payload) => { + const { workspaceId } = workspace; setAdvancedMode(payload.advancedMode); - return updateWorkspace.mutateAsync({ - workspaceId: workspace.workspaceId, + await updateCloudWorkspace.mutateAsync({ + workspaceId, name: payload.name, }); + await invalidateWorkspaceQuery(workspaceId); }} + enableReinitialize validationSchema={ValidationSchema} > {({ dirty, isSubmitting, resetForm, isValid, setFieldValue }) => ( diff --git a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx index ab448c9d1ec3..129f60151698 100644 --- a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx +++ b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx @@ -127,3 +127,12 @@ export const useUpdateWorkspace = () => { }, }); }; + +export const useInvalidateWorkspaceQuery = () => { + const queryClient = useQueryClient(); + + return useCallback( + (workspaceId: string) => queryClient.invalidateQueries(workspaceKeys.detail(workspaceId)), + [queryClient] + ); +}; From 6fd2c19f4cb50f67c9bf6fd38f74ab017eeb7468 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Tue, 20 Sep 2022 16:48:06 -0400 Subject: [PATCH 03/10] Rename Cloud WorkspacesService to CloudWorkspacesServices to avoid confusion with WorkspaceService Update functions in CloudWorkspacesServices to include the word Cloud --- airbyte-webapp/src/packages/cloud/cloudRoutes.tsx | 2 +- .../{WorkspacesService.tsx => CloudWorkspacesService.tsx} | 4 ++-- airbyte-webapp/src/packages/cloud/views/DefaultView.tsx | 2 +- .../views/credits/CreditsPage/components/CreditsUsage.tsx | 2 +- .../credits/CreditsPage/components/RemainingCredits.tsx | 2 +- .../src/packages/cloud/views/layout/MainView/MainView.tsx | 2 +- .../src/packages/cloud/views/layout/SideBar/SideBar.tsx | 2 +- .../views/workspaces/WorkspacePopout/WorkspacePopout.tsx | 5 ++++- .../WorkspaceSettingsView/WorkspaceSettingsView.tsx | 6 +++--- .../workspaces/WorkspacesPage/components/WorkspacesList.tsx | 6 +++--- 10 files changed, 18 insertions(+), 15 deletions(-) rename airbyte-webapp/src/packages/cloud/services/workspaces/{WorkspacesService.tsx => CloudWorkspacesService.tsx} (98%) diff --git a/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx b/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx index 14a49bcda8bc..368fe28c4a29 100644 --- a/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx +++ b/airbyte-webapp/src/packages/cloud/cloudRoutes.tsx @@ -27,7 +27,7 @@ import { CompleteOauthRequest } from "views/CompleteOauthRequest"; import { RoutePaths } from "../../pages/routePaths"; import { CreditStatus } from "./lib/domain/cloudWorkspaces/types"; import { LDExperimentServiceProvider } from "./services/thirdParty/launchdarkly"; -import { useGetCloudWorkspace } from "./services/workspaces/WorkspacesService"; +import { useGetCloudWorkspace } from "./services/workspaces/CloudWorkspacesService"; import { DefaultView } from "./views/DefaultView"; import { VerifyEmailAction } from "./views/FirebaseActionRoute"; import { CloudSettingsPage } from "./views/settings/CloudSettingsPage"; diff --git a/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx similarity index 98% rename from airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx rename to airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx index 204c0162bedd..b6d4993820b8 100644 --- a/airbyte-webapp/src/packages/cloud/services/workspaces/WorkspacesService.tsx +++ b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx @@ -47,7 +47,7 @@ export function useListCloudWorkspacesAsync(): QueryObserverResult(workspaceKeys.lists(), () => service.listByUser(user.userId)); } -export function useCreateWorkspace() { +export function useCreateCloudWorkspace() { const service = useGetWorkspaceService(); const queryClient = useQueryClient(); const user = useCurrentUser(); @@ -94,7 +94,7 @@ export function useUpdateCloudWorkspace() { ); } -export function useRemoveWorkspace() { +export function useRemoveCloudWorkspace() { const service = useGetWorkspaceService(); const queryClient = useQueryClient(); diff --git a/airbyte-webapp/src/packages/cloud/views/DefaultView.tsx b/airbyte-webapp/src/packages/cloud/views/DefaultView.tsx index 26714faadd4a..2df567ec51b5 100644 --- a/airbyte-webapp/src/packages/cloud/views/DefaultView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/DefaultView.tsx @@ -2,7 +2,7 @@ import { Navigate } from "react-router-dom"; import { RoutePaths } from "../../../pages/routePaths"; import { CloudRoutes } from "../cloudRoutes"; -import { useListCloudWorkspaces } from "../services/workspaces/WorkspacesService"; +import { useListCloudWorkspaces } from "../services/workspaces/CloudWorkspacesService"; export const DefaultView: React.FC = () => { const workspaces = useListCloudWorkspaces(); diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx index ed1ebc44925c..cabb690cf97e 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx @@ -6,7 +6,7 @@ import BarChart from "components/BarChart"; import { Card } from "components/base/Card"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; -import { useGetUsage } from "packages/cloud/services/workspaces/WorkspacesService"; +import { useGetUsage } from "packages/cloud/services/workspaces/CloudWorkspacesService"; import UsagePerConnectionTable from "./UsagePerConnectionTable"; diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx index b8fc8cdc9751..343afc01e60b 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx @@ -15,7 +15,7 @@ import { useStripeCheckout } from "packages/cloud/services/stripe/StripeService" import { useGetCloudWorkspace, useInvalidateCloudWorkspace, -} from "packages/cloud/services/workspaces/WorkspacesService"; +} from "packages/cloud/services/workspaces/CloudWorkspacesService"; interface Props { selfServiceCheckoutEnabled: boolean; diff --git a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx index 9217d92ee9ca..a4c3f2b666ca 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/MainView/MainView.tsx @@ -8,7 +8,7 @@ import { AlertBanner } from "components/base/Banner/AlertBanner"; import { CloudRoutes } from "packages/cloud/cloudRoutes"; import { CreditStatus } from "packages/cloud/lib/domain/cloudWorkspaces/types"; -import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/WorkspacesService"; +import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/CloudWorkspacesService"; import SideBar from "packages/cloud/views/layout/SideBar"; import { useCurrentWorkspace } from "services/workspaces/WorkspacesService"; import { ResourceNotFoundErrorBoundary } from "views/common/ResorceNotFoundErrorBoundary"; diff --git a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx index 1a20d46e6041..887bd0438fbb 100644 --- a/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx +++ b/airbyte-webapp/src/packages/cloud/views/layout/SideBar/SideBar.tsx @@ -12,7 +12,7 @@ import { FeatureItem, IfFeatureEnabled } from "hooks/services/Feature"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import { CloudRoutes } from "packages/cloud/cloudRoutes"; import { useIntercom } from "packages/cloud/services/thirdParty/intercom"; -import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/WorkspacesService"; +import { useGetCloudWorkspace } from "packages/cloud/services/workspaces/CloudWorkspacesService"; import { WorkspacePopout } from "packages/cloud/views/workspaces/WorkspacePopout"; import ChatIcon from "views/layout/SideBar/components/ChatIcon"; import ConnectionsIcon from "views/layout/SideBar/components/ConnectionsIcon"; diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx index ab93946b949f..5fd9bab026bf 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx @@ -6,7 +6,10 @@ import styled from "styled-components"; import { Popout } from "components"; import { IDataItem } from "components/base/DropDown/components/Option"; -import { useWorkspaceService, useListCloudWorkspacesAsync } from "packages/cloud/services/workspaces/WorkspacesService"; +import { + useWorkspaceService, + useListCloudWorkspacesAsync, +} from "packages/cloud/services/workspaces/CloudWorkspacesService"; import { useCurrentWorkspace } from "services/workspaces/WorkspacesService"; import ExitIcon from "./components/ExitIcon"; diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx index 940e1a5a8af1..b9146f9dcc85 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx @@ -11,10 +11,10 @@ import { useTrackPage, PageTrackingCodes } from "hooks/services/Analytics"; import { useAdvancedModeSetting } from "hooks/services/useAdvancedModeSetting"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import { - useRemoveWorkspace, + useRemoveCloudWorkspace, useUpdateCloudWorkspace, useWorkspaceService, -} from "packages/cloud/services/workspaces/WorkspacesService"; +} from "packages/cloud/services/workspaces/CloudWorkspacesService"; import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponents"; import { useInvalidateWorkspaceQuery } from "services/workspaces/WorkspacesService"; @@ -38,7 +38,7 @@ export const WorkspaceSettingsView: React.FC = () => { useTrackPage(PageTrackingCodes.SETTINGS_WORKSPACE); const { exitWorkspace } = useWorkspaceService(); const workspace = useCurrentWorkspace(); - const removeWorkspace = useRemoveWorkspace(); + const removeWorkspace = useRemoveCloudWorkspace(); const updateCloudWorkspace = useUpdateCloudWorkspace(); const invalidateWorkspaceQuery = useInvalidateWorkspaceQuery(); const [isAdvancedMode, setAdvancedMode] = useAdvancedModeSetting(); diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx index d11a5664786d..d36d923838af 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx @@ -2,10 +2,10 @@ import React from "react"; import styled from "styled-components"; import { - useCreateWorkspace, + useCreateCloudWorkspace, useListCloudWorkspaces, useWorkspaceService, -} from "packages/cloud/services/workspaces/WorkspacesService"; +} from "packages/cloud/services/workspaces/CloudWorkspacesService"; import WorkspaceItem from "./WorkspaceItem"; import WorkspacesControl from "./WorkspacesControl"; @@ -20,7 +20,7 @@ const Content = styled.div` const WorkspacesList: React.FC = () => { const workspaces = useListCloudWorkspaces(); const { selectWorkspace } = useWorkspaceService(); - const createWorkspace = useCreateWorkspace(); + const createWorkspace = useCreateCloudWorkspace(); return ( From 071d94348c5093d86e3ae20a3210aea52a9f61e3 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Tue, 20 Sep 2022 16:50:45 -0400 Subject: [PATCH 04/10] useInvalidateWorkspaceQuery -> useInvalidateWorkspace --- .../WorkspaceSettingsView/WorkspaceSettingsView.tsx | 6 +++--- .../src/services/workspaces/WorkspacesService.tsx | 6 +++--- 2 files changed, 6 insertions(+), 6 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx index b9146f9dcc85..f48d2091c49b 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx @@ -16,7 +16,7 @@ import { useWorkspaceService, } from "packages/cloud/services/workspaces/CloudWorkspacesService"; import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponents"; -import { useInvalidateWorkspaceQuery } from "services/workspaces/WorkspacesService"; +import { useInvalidateWorkspace } from "services/workspaces/WorkspacesService"; import styles from "./WorkspaceSettingsView.module.scss"; @@ -40,7 +40,7 @@ export const WorkspaceSettingsView: React.FC = () => { const workspace = useCurrentWorkspace(); const removeWorkspace = useRemoveCloudWorkspace(); const updateCloudWorkspace = useUpdateCloudWorkspace(); - const invalidateWorkspaceQuery = useInvalidateWorkspaceQuery(); + const invalidateWorkspace = useInvalidateWorkspace(workspace.workspaceId); const [isAdvancedMode, setAdvancedMode] = useAdvancedModeSetting(); return ( @@ -67,7 +67,7 @@ export const WorkspaceSettingsView: React.FC = () => { workspaceId, name: payload.name, }); - await invalidateWorkspaceQuery(workspaceId); + await invalidateWorkspace(); }} enableReinitialize validationSchema={ValidationSchema} diff --git a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx index 129f60151698..ebde26c29202 100644 --- a/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx +++ b/airbyte-webapp/src/services/workspaces/WorkspacesService.tsx @@ -128,11 +128,11 @@ export const useUpdateWorkspace = () => { }); }; -export const useInvalidateWorkspaceQuery = () => { +export const useInvalidateWorkspace = (workspaceId: string) => { const queryClient = useQueryClient(); return useCallback( - (workspaceId: string) => queryClient.invalidateQueries(workspaceKeys.detail(workspaceId)), - [queryClient] + () => queryClient.invalidateQueries(workspaceKeys.detail(workspaceId)), + [queryClient, workspaceId] ); }; From 606967caa2577b22a004667ecb041c2adef25c37 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Tue, 20 Sep 2022 16:55:32 -0400 Subject: [PATCH 05/10] Remove useWorkspaceService import from CloudWorkspacesService --- .../cloud/services/workspaces/CloudWorkspacesService.tsx | 3 --- .../views/workspaces/WorkspacePopout/WorkspacePopout.tsx | 7 ++----- .../WorkspaceSettingsView/WorkspaceSettingsView.tsx | 9 ++++----- .../WorkspacesPage/components/WorkspacesList.tsx | 2 +- 4 files changed, 7 insertions(+), 14 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx index b6d4993820b8..d291891ea3ce 100644 --- a/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx +++ b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx @@ -9,9 +9,6 @@ import { useSuspenseQuery } from "services/connector/useSuspenseQuery"; import { SCOPE_USER } from "services/Scope"; import { useDefaultRequestMiddlewares } from "services/useDefaultRequestMiddlewares"; import { useInitService } from "services/useInitService"; -import { useWorkspaceService } from "services/workspaces/WorkspacesService"; - -export { useWorkspaceService }; export const workspaceKeys = { all: [SCOPE_USER, "cloud_workspaces"] as const, diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx index 5fd9bab026bf..87834316cc64 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacePopout/WorkspacePopout.tsx @@ -6,11 +6,8 @@ import styled from "styled-components"; import { Popout } from "components"; import { IDataItem } from "components/base/DropDown/components/Option"; -import { - useWorkspaceService, - useListCloudWorkspacesAsync, -} from "packages/cloud/services/workspaces/CloudWorkspacesService"; -import { useCurrentWorkspace } from "services/workspaces/WorkspacesService"; +import { useListCloudWorkspacesAsync } from "packages/cloud/services/workspaces/CloudWorkspacesService"; +import { useCurrentWorkspace, useWorkspaceService } from "services/workspaces/WorkspacesService"; import ExitIcon from "./components/ExitIcon"; diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx index f48d2091c49b..93c7c771e799 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx @@ -13,10 +13,9 @@ import { useCurrentWorkspace } from "hooks/services/useWorkspace"; import { useRemoveCloudWorkspace, useUpdateCloudWorkspace, - useWorkspaceService, } from "packages/cloud/services/workspaces/CloudWorkspacesService"; import { Content, SettingsCard } from "pages/SettingsPage/pages/SettingsComponents"; -import { useInvalidateWorkspace } from "services/workspaces/WorkspacesService"; +import { useInvalidateWorkspace, useWorkspaceService } from "services/workspaces/WorkspacesService"; import styles from "./WorkspaceSettingsView.module.scss"; @@ -38,7 +37,7 @@ export const WorkspaceSettingsView: React.FC = () => { useTrackPage(PageTrackingCodes.SETTINGS_WORKSPACE); const { exitWorkspace } = useWorkspaceService(); const workspace = useCurrentWorkspace(); - const removeWorkspace = useRemoveCloudWorkspace(); + const removeCloudWorkspace = useRemoveCloudWorkspace(); const updateCloudWorkspace = useUpdateCloudWorkspace(); const invalidateWorkspace = useInvalidateWorkspace(workspace.workspaceId); const [isAdvancedMode, setAdvancedMode] = useAdvancedModeSetting(); @@ -120,9 +119,9 @@ export const WorkspaceSettingsView: React.FC = () => {
removeWorkspace.mutateAsync(workspace.workspaceId)} + onClick={() => removeCloudWorkspace.mutateAsync(workspace.workspaceId)} > diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx index d36d923838af..05b810f77de3 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx @@ -4,8 +4,8 @@ import styled from "styled-components"; import { useCreateCloudWorkspace, useListCloudWorkspaces, - useWorkspaceService, } from "packages/cloud/services/workspaces/CloudWorkspacesService"; +import { useWorkspaceService } from "services/workspaces/WorkspacesService"; import WorkspaceItem from "./WorkspaceItem"; import WorkspacesControl from "./WorkspacesControl"; From cd6e37d5bd8b71dc10a37e98ab7bae667018a060 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Tue, 20 Sep 2022 17:07:03 -0400 Subject: [PATCH 06/10] Update var names using CloudWorkspacesService --- .../views/credits/CreditsPage/components/RemainingCredits.tsx | 4 ++-- .../workspaces/WorkspacesPage/components/WorkspacesList.tsx | 4 ++-- 2 files changed, 4 insertions(+), 4 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx index 343afc01e60b..d8af4b013c33 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/RemainingCredits.tsx @@ -62,7 +62,7 @@ const RemainingCredits: React.FC = ({ selfServiceCheckoutEnabled }) => { const currentWorkspace = useCurrentWorkspace(); const cloudWorkspace = useGetCloudWorkspace(currentWorkspace.workspaceId); const [searchParams, setSearchParams] = useSearchParams(); - const invalidateWorkspace = useInvalidateCloudWorkspace(currentWorkspace.workspaceId); + const invalidateCloudWorkspace = useInvalidateCloudWorkspace(currentWorkspace.workspaceId); const { isLoading, mutateAsync: createCheckout } = useStripeCheckout(); const analytics = useAnalyticsService(); const [isWaitingForCredits, setIsWaitingForCredits] = useState(false); @@ -79,7 +79,7 @@ const RemainingCredits: React.FC = ({ selfServiceCheckoutEnabled }) => { if (!hasRecentCreditIncrease(cloudWorkspace)) { setIsWaitingForCredits(true); retryIntervalId.current = window.setInterval(() => { - invalidateWorkspace(); + invalidateCloudWorkspace(); }, 3000); } } diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx index 05b810f77de3..93cf9dc3ca5c 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx @@ -20,7 +20,7 @@ const Content = styled.div` const WorkspacesList: React.FC = () => { const workspaces = useListCloudWorkspaces(); const { selectWorkspace } = useWorkspaceService(); - const createWorkspace = useCreateCloudWorkspace(); + const createCloudWorkspace = useCreateCloudWorkspace(); return ( @@ -29,7 +29,7 @@ const WorkspacesList: React.FC = () => { {workspace.name} ))} - + ); }; From cff92e7c729e460adca6718f9a2955e54ec2ae14 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Tue, 20 Sep 2022 17:07:29 -0400 Subject: [PATCH 07/10] Rename useGetUsage to useGetCloudWorkspaceUsage --- .../cloud/services/workspaces/CloudWorkspacesService.tsx | 2 +- .../views/credits/CreditsPage/components/CreditsUsage.tsx | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx index d291891ea3ce..ba3551360ae9 100644 --- a/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx +++ b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx @@ -119,7 +119,7 @@ export function useInvalidateCloudWorkspace(workspaceId: string): () => Promise< ); } -export function useGetUsage(workspaceId: string): CloudWorkspaceUsage { +export function useGetCloudWorkspaceUsage(workspaceId: string): CloudWorkspaceUsage { const service = useGetWorkspaceService(); return useSuspenseQuery(workspaceKeys.usage(workspaceId), () => service.getUsage(workspaceId)); diff --git a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx index cabb690cf97e..0f1d5ff2f20e 100644 --- a/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx +++ b/airbyte-webapp/src/packages/cloud/views/credits/CreditsPage/components/CreditsUsage.tsx @@ -6,7 +6,7 @@ import BarChart from "components/BarChart"; import { Card } from "components/base/Card"; import { useCurrentWorkspace } from "hooks/services/useWorkspace"; -import { useGetUsage } from "packages/cloud/services/workspaces/CloudWorkspacesService"; +import { useGetCloudWorkspaceUsage } from "packages/cloud/services/workspaces/CloudWorkspacesService"; import UsagePerConnectionTable from "./UsagePerConnectionTable"; @@ -35,7 +35,7 @@ const CreditsUsage: React.FC = () => { const { formatMessage, formatDate } = useIntl(); const { workspaceId } = useCurrentWorkspace(); - const data = useGetUsage(workspaceId); + const data = useGetCloudWorkspaceUsage(workspaceId); const chartData = useMemo( () => From 6f0d7cbb0bd56e9a64c807f16d335872e1447dbb Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 21 Sep 2022 10:46:53 -0400 Subject: [PATCH 08/10] tsx -> ts --- .../{CloudWorkspacesService.tsx => CloudWorkspacesService.ts} | 0 1 file changed, 0 insertions(+), 0 deletions(-) rename airbyte-webapp/src/packages/cloud/services/workspaces/{CloudWorkspacesService.tsx => CloudWorkspacesService.ts} (100%) diff --git a/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.ts similarity index 100% rename from airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.tsx rename to airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.ts From 0cffd30453d0031dd7a793c397bd4f0c09db6fbf Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 21 Sep 2022 10:58:46 -0400 Subject: [PATCH 09/10] Cleanup mutateAsync usage around CloudWorkspacesService hooks --- .../services/workspaces/CloudWorkspacesService.ts | 2 +- .../WorkspaceSettingsView/WorkspaceSettingsView.tsx | 10 +++++----- .../WorkspacesPage/components/WorkspacesList.tsx | 2 +- 3 files changed, 7 insertions(+), 7 deletions(-) diff --git a/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.ts b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.ts index ba3551360ae9..c35342bb3db2 100644 --- a/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.ts +++ b/airbyte-webapp/src/packages/cloud/services/workspaces/CloudWorkspacesService.ts @@ -53,7 +53,7 @@ export function useCreateCloudWorkspace() { onSuccess: (result) => { queryClient.setQueryData(workspaceKeys.lists(), (old) => [...(old ?? []), result]); }, - }).mutateAsync; + }); } export function useUpdateCloudWorkspace() { diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx index 93c7c771e799..619a976c576f 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspaceSettingsView/WorkspaceSettingsView.tsx @@ -37,8 +37,8 @@ export const WorkspaceSettingsView: React.FC = () => { useTrackPage(PageTrackingCodes.SETTINGS_WORKSPACE); const { exitWorkspace } = useWorkspaceService(); const workspace = useCurrentWorkspace(); - const removeCloudWorkspace = useRemoveCloudWorkspace(); - const updateCloudWorkspace = useUpdateCloudWorkspace(); + const { mutateAsync: removeCloudWorkspace, isLoading: isRemovingCloudWorkspace } = useRemoveCloudWorkspace(); + const { mutateAsync: updateCloudWorkspace } = useUpdateCloudWorkspace(); const invalidateWorkspace = useInvalidateWorkspace(workspace.workspaceId); const [isAdvancedMode, setAdvancedMode] = useAdvancedModeSetting(); @@ -62,7 +62,7 @@ export const WorkspaceSettingsView: React.FC = () => { onSubmit={async (payload) => { const { workspaceId } = workspace; setAdvancedMode(payload.advancedMode); - await updateCloudWorkspace.mutateAsync({ + await updateCloudWorkspace({ workspaceId, name: payload.name, }); @@ -119,9 +119,9 @@ export const WorkspaceSettingsView: React.FC = () => {
removeCloudWorkspace.mutateAsync(workspace.workspaceId)} + onClick={() => removeCloudWorkspace(workspace.workspaceId)} > diff --git a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx index 93cf9dc3ca5c..a07ccc011168 100644 --- a/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx +++ b/airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/components/WorkspacesList.tsx @@ -20,7 +20,7 @@ const Content = styled.div` const WorkspacesList: React.FC = () => { const workspaces = useListCloudWorkspaces(); const { selectWorkspace } = useWorkspaceService(); - const createCloudWorkspace = useCreateCloudWorkspace(); + const { mutateAsync: createCloudWorkspace } = useCreateCloudWorkspace(); return ( From cc7d002fa1ac867fbf6727ccec91238c8faf38f5 Mon Sep 17 00:00:00 2001 From: Edmundo Ruiz Ghanem Date: Wed, 21 Sep 2022 11:19:55 -0400 Subject: [PATCH 10/10] Remove reference to CloudWorkspacesServices in ConnectionFormService test --- .../hooks/services/Connection/ConnectionFormService.test.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/airbyte-webapp/src/hooks/services/Connection/ConnectionFormService.test.tsx b/airbyte-webapp/src/hooks/services/Connection/ConnectionFormService.test.tsx index 6201cd430016..e6f8abd6985c 100644 --- a/airbyte-webapp/src/hooks/services/Connection/ConnectionFormService.test.tsx +++ b/airbyte-webapp/src/hooks/services/Connection/ConnectionFormService.test.tsx @@ -17,7 +17,7 @@ import { useConnectionFormService, } from "./ConnectionFormService"; -["packages/cloud/services/workspaces/WorkspacesService", "services/workspaces/WorkspacesService"].forEach((s) => +["services/workspaces/WorkspacesService"].forEach((s) => jest.mock(s, () => ({ useCurrentWorkspaceId: () => mockWorkspace.workspaceId, useCurrentWorkspace: () => mockWorkspace,