fix(plugin-multi-tenant): selected tenant could become incorrect when navigating out of doc (#10723)

### What?
When switching tenants from within a document and then navigating back
out to the list view, the tenant would not be set correctly.

### Why?
This was because we handle the tenant selector selection differently
when viewing a document.

### How?
Now when you navigate out, the page will refresh the cookie.

Also adds test suite config that shows how the dom can be used to
manipulate styles per tenant.

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

@@ -37,6 +37,10 @@ export const TenantSelectionProviderClient = ({
   const [preventRefreshOnChange, setPreventRefreshOnChange] = React.useState(false)
   const { user } = useAuth()
   const userID = React.useMemo(() => user?.id, [user?.id])
+  const selectedTenantLabel = React.useMemo(
+    () => tenantOptions.find((option) => option.value === selectedTenantID)?.label,
+    [selectedTenantID, tenantOptions],
+  )
 
   const router = useRouter()
 
@@ -80,16 +84,21 @@ export const TenantSelectionProviderClient = ({
   }, [userID, router])
 
   return (
-    <Context.Provider
-      value={{
-        options: tenantOptions,
-        selectedTenantID,
-        setPreventRefreshOnChange,
-        setTenant,
-      }}
+    <span
+      data-selected-tenant-id={selectedTenantID}
+      data-selected-tenant-title={selectedTenantLabel}
     >
-      {children}
-    </Context.Provider>
+      <Context.Provider
+        value={{
+          options: tenantOptions,
+          selectedTenantID,
+          setPreventRefreshOnChange,
+          setTenant,
+        }}
+      >
+        {children}
+      </Context.Provider>
+    </span>
   )
 }
 

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

@@ -41,14 +41,10 @@ export const TenantSelectionProvider = async ({
 
   const cookies = await getCookies()
   const tenantCookie = cookies.get('payload-tenant')?.value
-  const selectedTenant =
-    tenantOptions.find((option) => option.value === tenantCookie)?.label || tenantCookie
 
   return (
-    <span data-selected-tenant-id={tenantCookie} data-selected-tenant-title={selectedTenant}>
-      <TenantSelectionProviderClient initialValue={tenantCookie} tenantOptions={tenantOptions}>
-        {children}
-      </TenantSelectionProviderClient>
-    </span>
+    <TenantSelectionProviderClient initialValue={tenantCookie} tenantOptions={tenantOptions}>
+      {children}
+    </TenantSelectionProviderClient>
   )
 }