Handle merging providers based on different providers in core and static

supertokens · Mar 13, 2024 · 024d90a · 024d90a
1 parent c30dcf9
commit 024d90a
Show file tree

Hide file tree

Showing 5 changed files with 54 additions and 19 deletions.
diff --git a/src/ui/components/tenants/tenantDetail/deleteThirdPartyProvider/DeleteThirdPartyProvider.tsx b/src/ui/components/tenants/tenantDetail/deleteThirdPartyProvider/DeleteThirdPartyProvider.tsx
@@ -19,28 +19,31 @@ import { PopupContentContext } from "../../../../contexts/PopupContentContext";
 import Button from "../../../button";
 import { Dialog, DialogContent, DialogFooter } from "../../../dialog";
 import { useTenantDetailContext } from "../TenantDetailContext";
+import { ProviderInfoProps } from "../thirdPartyPage/types";
 import "./deleteThirdPartyProvider.scss";
 
 export const DeleteThirdPartyProviderDialog = ({
 	onCloseDialog,
 	thirdPartyId,
 	goBack,
+	handlePostSaveProviders,
 }: {
 	onCloseDialog: () => void;
 	goBack: () => void;
 	thirdPartyId: string;
+	handlePostSaveProviders: ProviderInfoProps["handlePostSaveProviders"];
 }) => {
 	const [isDeletingProvider, setIsDeletingProvider] = useState(false);
 	const { deleteThirdPartyProvider } = useThirdPartyService();
-	const { tenantInfo, refetchTenant } = useTenantDetailContext();
+	const { tenantInfo } = useTenantDetailContext();
 	const { showToast } = useContext(PopupContentContext);
 
 	const handleDeleteProperty = async () => {
 		try {
 			setIsDeletingProvider(true);
 			const res = await deleteThirdPartyProvider(tenantInfo.tenantId, thirdPartyId);
 			if (res.status === "OK") {
-				await refetchTenant();
+				await handlePostSaveProviders("delete", thirdPartyId);
 				onCloseDialog();
 				goBack();
 			} else {

diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyPage/ThirdPartyPage.tsx b/src/ui/components/tenants/tenantDetail/thirdPartyPage/ThirdPartyPage.tsx
@@ -13,6 +13,7 @@
  * under the License.
  */
 import { Dispatch, SetStateAction } from "react";
+import { useThirdPartyService } from "../../../../../api/tenants";
 import { TenantDashboardView } from "../../../../../api/tenants/types";
 import { IN_BUILT_THIRD_PARTY_PROVIDERS } from "../../../../../constants";
 import { getImageUrl } from "../../../../../utils";
@@ -79,20 +80,41 @@ const ProviderInfo = ({
 	isAddingNewProvider: boolean;
 	handleGoBack: (shouldGoBackToDetailPage?: boolean) => void;
 }) => {
-	const { resolvedProviders } = useTenantDetailContext();
+	const { resolvedProviders, tenantInfo, refetchTenant } = useTenantDetailContext();
+	const { createOrUpdateThirdPartyProvider } = useThirdPartyService();
 	const providerConfig = isAddingNewProvider
 		? undefined
 		: resolvedProviders.find((p) => p.thirdPartyId === providerId);
 	const isInBuiltProvider =
 		typeof providerId === "string" && IN_BUILT_THIRD_PARTY_PROVIDERS.some(({ id }) => providerId.startsWith(id));
 
+	const handlePostSaveProviders = async (action: "add-or-update" | "delete", providerId: string) => {
+		let promises: Array<Promise<unknown>> = [];
+		if (resolvedProviders.length > 0 && tenantInfo.thirdParty.providers.length === 0) {
+			if (action === "add-or-update" && isAddingNewProvider) {
+				promises = resolvedProviders.map((provider) => {
+					return createOrUpdateThirdPartyProvider(tenantInfo.tenantId, provider);
+				});
+			} else {
+				promises = resolvedProviders
+					.filter((provider) => provider.thirdPartyId !== providerId)
+					.map((provider) => {
+						return createOrUpdateThirdPartyProvider(tenantInfo.tenantId, provider);
+					});
+			}
+		}
+		await Promise.all(promises);
+		await refetchTenant();
+	};
+
 	if (isInBuiltProvider) {
 		return (
 			<BuiltInProviderInfo
 				providerId={providerId}
 				providerConfig={providerConfig}
 				handleGoBack={handleGoBack}
 				isAddingNewProvider={isAddingNewProvider}
+				handlePostSaveProviders={handlePostSaveProviders}
 			/>
 		);
 	}
@@ -104,6 +126,7 @@ const ProviderInfo = ({
 			providerConfig={providerConfig}
 			handleGoBack={handleGoBack}
 			isAddingNewProvider={isAddingNewProvider}
+			handlePostSaveProviders={handlePostSaveProviders}
 		/>
 	);
 };

diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyPage/types.ts b/src/ui/components/tenants/tenantDetail/thirdPartyPage/types.ts
@@ -0,0 +1,9 @@
+import { ProviderConfig } from "../../../../../api/tenants/types";
+
+export type ProviderInfoProps = {
+	providerId?: string;
+	isAddingNewProvider: boolean;
+	handleGoBack: (shouldGoBackToDetailPage?: boolean) => void;
+	providerConfig?: ProviderConfig;
+	handlePostSaveProviders: (action: "add-or-update" | "delete", providerId: string) => Promise<void>;
+};
diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/BuiltInProviderInfo.tsx b/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/BuiltInProviderInfo.tsx
@@ -22,28 +22,29 @@ import Button from "../../../button";
 import { DeleteThirdPartyProviderDialog } from "../deleteThirdPartyProvider/DeleteThirdPartyProvider";
 import { useTenantDetailContext } from "../TenantDetailContext";
 import { PanelHeader, PanelHeaderTitleWithTooltip, PanelRoot } from "../tenantDetailPanel/TenantDetailPanel";
+import { ProviderInfoProps } from "../thirdPartyPage/types";
 import { ThirdPartyProviderButton } from "../thirdPartyProviderButton/ThirdPartyProviderButton";
 import { ThirdPartyProviderInput } from "../thirdPartyProviderInput/ThirdPartyProviderInput";
 import { ClientConfig } from "./ClientConfig";
 import "./thirdPartyProviderConfig.scss";
 
+type BuiltInProviderInfoProps = ProviderInfoProps & {
+	providerId: string;
+};
+
 export const BuiltInProviderInfo = ({
 	providerId,
 	providerConfig,
 	handleGoBack,
 	isAddingNewProvider,
-}: {
-	providerId: string;
-	providerConfig?: ProviderConfig;
-	handleGoBack: (shouldGoBackToDetailPage?: boolean) => void;
-	isAddingNewProvider: boolean;
-}) => {
+	handlePostSaveProviders,
+}: BuiltInProviderInfoProps) => {
 	const [providerConfigState, setProviderConfigState] = useState<ProviderConfig>(
 		getBuiltInProviderInfo(providerId, providerConfig)
 	);
 	const [errorState, setErrorState] = useState<Record<string, string>>({});
 	const [isDeleteProviderDialogOpen, setIsDeleteProviderDialogOpen] = useState(false);
-	const { tenantInfo, refetchTenant, resolvedProviders } = useTenantDetailContext();
+	const { tenantInfo, resolvedProviders } = useTenantDetailContext();
 	const [isSaving, setIsSaving] = useState(false);
 	const { showToast } = useContext(PopupContentContext);
 	const { createOrUpdateThirdPartyProvider } = useThirdPartyService();
@@ -196,7 +197,7 @@ export const BuiltInProviderInfo = ({
 			try {
 				setIsSaving(true);
 				await createOrUpdateThirdPartyProvider(tenantInfo.tenantId, normalizedProviderConfig);
-				await refetchTenant();
+				await handlePostSaveProviders("add-or-update", normalizedProviderConfig.thirdPartyId);
 				handleGoBack(true);
 			} catch (e) {
 				showToast({
@@ -306,6 +307,7 @@ export const BuiltInProviderInfo = ({
 					onCloseDialog={() => setIsDeleteProviderDialogOpen(false)}
 					thirdPartyId={providerId}
 					goBack={() => handleGoBack(true)}
+					handlePostSaveProviders={handlePostSaveProviders}
 				/>
 			)}
 		</PanelRoot>

diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/CustomProviderInfo.tsx b/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/CustomProviderInfo.tsx
@@ -23,6 +23,7 @@ import { DeleteThirdPartyProviderDialog } from "../deleteThirdPartyProvider/Dele
 import { KeyValueInput } from "../keyValueInput/KeyValueInput";
 import { useTenantDetailContext } from "../TenantDetailContext";
 import { PanelHeader, PanelHeaderTitleWithTooltip, PanelRoot } from "../tenantDetailPanel/TenantDetailPanel";
+import { ProviderInfoProps } from "../thirdPartyPage/types";
 import {
 	ThirdPartyProviderInput,
 	ThirdPartyProviderInputLabel,
@@ -35,16 +36,12 @@ export const CustomProviderInfo = ({
 	providerConfig,
 	handleGoBack,
 	isAddingNewProvider,
-}: {
-	providerId?: string;
-	providerConfig?: ProviderConfig;
-	handleGoBack: (shouldGoBackToDetailPage?: boolean) => void;
-	isAddingNewProvider: boolean;
-}) => {
+	handlePostSaveProviders,
+}: ProviderInfoProps) => {
 	const [providerConfigState, setProviderConfigState] = useState(getInitialProviderInfo(providerConfig));
 	const [errorState, setErrorState] = useState<Record<string, string>>({});
 	const [isDeleteProviderDialogOpen, setIsDeleteProviderDialogOpen] = useState(false);
-	const { resolvedProviders, refetchTenant, tenantInfo } = useTenantDetailContext();
+	const { resolvedProviders, tenantInfo } = useTenantDetailContext();
 	const [isSaving, setIsSaving] = useState(false);
 	const { showToast } = useContext(PopupContentContext);
 	const { createOrUpdateThirdPartyProvider } = useThirdPartyService();
@@ -300,7 +297,7 @@ export const CustomProviderInfo = ({
 		try {
 			setIsSaving(true);
 			await createOrUpdateThirdPartyProvider(tenantInfo.tenantId, normalizedProviderConfig as ProviderConfig);
-			await refetchTenant();
+			await handlePostSaveProviders("add-or-update", normalizedProviderConfig.thirdPartyId);
 			handleGoBack(true);
 		} catch (e) {
 			showToast({
@@ -540,6 +537,7 @@ export const CustomProviderInfo = ({
 					onCloseDialog={() => setIsDeleteProviderDialogOpen(false)}
 					thirdPartyId={providerId ?? ""}
 					goBack={() => handleGoBack(true)}
+					handlePostSaveProviders={handlePostSaveProviders}
 				/>
 			)}
 		</PanelRoot>