From 024d90abbb1dd0e32be60531c21991fc2702245a Mon Sep 17 00:00:00 2001 From: Prateek Surana Date: Wed, 13 Mar 2024 16:46:49 +0530 Subject: [PATCH] Handle merging providers based on different providers in core and static --- .../DeleteThirdPartyProvider.tsx | 7 ++++-- .../thirdPartyPage/ThirdPartyPage.tsx | 25 ++++++++++++++++++- .../tenantDetail/thirdPartyPage/types.ts | 9 +++++++ .../BuiltInProviderInfo.tsx | 18 +++++++------ .../CustomProviderInfo.tsx | 14 +++++------ 5 files changed, 54 insertions(+), 19 deletions(-) create mode 100644 src/ui/components/tenants/tenantDetail/thirdPartyPage/types.ts diff --git a/src/ui/components/tenants/tenantDetail/deleteThirdPartyProvider/DeleteThirdPartyProvider.tsx b/src/ui/components/tenants/tenantDetail/deleteThirdPartyProvider/DeleteThirdPartyProvider.tsx index a2b61a96..51fadcbb 100644 --- a/src/ui/components/tenants/tenantDetail/deleteThirdPartyProvider/DeleteThirdPartyProvider.tsx +++ b/src/ui/components/tenants/tenantDetail/deleteThirdPartyProvider/DeleteThirdPartyProvider.tsx @@ -19,20 +19,23 @@ 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 () => { @@ -40,7 +43,7 @@ export const DeleteThirdPartyProviderDialog = ({ 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 index 76e6d1ed..4855562e 100644 --- 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,13 +80,33 @@ 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> = []; + 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 ( ); } @@ -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 new file mode 100644 index 00000000..772dd7e7 --- /dev/null +++ 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; +}; diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/BuiltInProviderInfo.tsx b/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/BuiltInProviderInfo.tsx index 56d1a640..98063f77 100644 --- 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( getBuiltInProviderInfo(providerId, providerConfig) ); const [errorState, setErrorState] = useState>({}); 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} /> )} diff --git a/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/CustomProviderInfo.tsx b/src/ui/components/tenants/tenantDetail/thirdPartyProviderConfig/CustomProviderInfo.tsx index 40d6669c..40960f31 100644 --- 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>({}); 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} /> )}