feat(plugin-multi-tenant): prompt the user to confirm the change of tenant before actually updating (#12382)

packages/plugin-multi-tenant/src/providers/TenantSelectionProvider/index.client.tsx

@@ -11,6 +11,7 @@ type ContextType = {
    * Array of options to select from
    */
   options: OptionObject[]
+  preventRefreshOnChange: boolean
   /**
    * The currently selected tenant ID
    */
@@ -28,20 +29,26 @@ type ContextType = {
    * @param args.refresh - Whether to refresh the page after changing the tenant
    */
   setTenant: (args: { id: number | string | undefined; refresh?: boolean }) => void
+  /**
+   *
+   */
+  updateTenants: (args: { id: number | string; label: string }) => void
 }
 
 const Context = createContext<ContextType>({
   options: [],
+  preventRefreshOnChange: false,
   selectedTenantID: undefined,
   setPreventRefreshOnChange: () => null,
   setTenant: () => null,
+  updateTenants: () => null,
 })
 
 export const TenantSelectionProviderClient = ({
   children,
   initialValue,
   tenantCookie,
-  tenantOptions,
+  tenantOptions: tenantOptionsFromProps,
 }: {
   children: React.ReactNode
   initialValue?: number | string
@@ -54,6 +61,9 @@ export const TenantSelectionProviderClient = ({
   const [preventRefreshOnChange, setPreventRefreshOnChange] = React.useState(false)
   const { user } = useAuth()
   const userID = React.useMemo(() => user?.id, [user?.id])
+  const [tenantOptions, setTenantOptions] = React.useState<OptionObject[]>(
+    () => tenantOptionsFromProps,
+  )
   const selectedTenantLabel = React.useMemo(
     () => tenantOptions.find((option) => option.value === selectedTenantID)?.label,
     [selectedTenantID, tenantOptions],
@@ -91,6 +101,20 @@ export const TenantSelectionProviderClient = ({
     [deleteCookie, preventRefreshOnChange, router, setCookie, setSelectedTenantID, tenantOptions],
   )
 
+  const updateTenants = React.useCallback<ContextType['updateTenants']>(({ id, label }) => {
+    setTenantOptions((prev) => {
+      return prev.map((currentTenant) => {
+        if (id === currentTenant.value) {
+          return {
+            label,
+            value: id,
+          }
+        }
+        return currentTenant
+      })
+    })
+  }, [])
+
   React.useEffect(() => {
     if (selectedTenantID && !tenantOptions.find((option) => option.value === selectedTenantID)) {
       if (tenantOptions?.[0]?.value) {
@@ -105,13 +129,14 @@ export const TenantSelectionProviderClient = ({
     if (userID && !tenantCookie) {
       // User is logged in, but does not have a tenant cookie, set it
       setSelectedTenantID(initialValue)
+      setTenantOptions(tenantOptionsFromProps)
       if (initialValue) {
         setCookie(String(initialValue))
       } else {
         deleteCookie()
       }
     }
-  }, [userID, tenantCookie, initialValue, setCookie, deleteCookie, router])
+  }, [userID, tenantCookie, initialValue, setCookie, deleteCookie, router, tenantOptionsFromProps])
 
   React.useEffect(() => {
     if (!userID && tenantCookie) {
@@ -132,9 +157,11 @@ export const TenantSelectionProviderClient = ({
       <Context
         value={{
           options: tenantOptions,
+          preventRefreshOnChange,
           selectedTenantID,
           setPreventRefreshOnChange,
           setTenant,
+          updateTenants,
         }}
       >
         {children}