Try to fix large query problem

messages/en-US.json

@@ -214,6 +214,7 @@
     "resourceErrorDelte": "Error deleting resource",
     "resourcePoliciesBannerTitle": "Re-use Authentication and Access Rules",
     "resourcePoliciesBannerDescription": "Shared resource policies let you define authentication methods and access rules once, then attach them to multiple public resources. When you update a policy, every linked resource inherits the change automatically.",
+    "resourcePoliciesBannerButtonText": "Learn More",
     "resourcePoliciesTitle": "Manage Public Resource Policies",
     "resourcePoliciesAttachedResourcesColumnTitle": "Resources",
     "resourcePoliciesAttachedResources": "{count} resource(s)",

server/routers/site/listSites.ts

@@ -327,27 +327,6 @@ export async function listSites(
             );
         }
 
-        let accessibleSites;
-        if (req.user) {
-            accessibleSites = await db
-                .select({
-                    siteId: sql<number>`COALESCE(${userSites.siteId}, ${roleSites.siteId})`
-                })
-                .from(userSites)
-                .fullJoin(roleSites, eq(userSites.siteId, roleSites.siteId))
-                .where(
-                    or(
-                        eq(userSites.userId, req.user!.userId),
-                        inArray(roleSites.roleId, req.userOrgRoleIds!)
-                    )
-                );
-        } else {
-            accessibleSites = await db
-                .select({ siteId: sites.siteId })
-                .from(sites)
-                .where(eq(sites.orgId, orgId));
-        }
-
         const isLabelFeatureEnabled = await isLicensedOrSubscribed(
             orgId,
             tierMatrix.labels
@@ -364,15 +343,39 @@ export async function listSites(
             labels: labelFilter
         } = parsedQuery.data;
 
-        const accessibleSiteIds = accessibleSites.map((site) => site.siteId);
+        const conditions = [eq(sites.orgId, orgId)];
 
-        const conditions = [
+        if (req.user) {
-            and(
+            const userAccessConditions = [
-                inArray(sites.siteId, accessibleSiteIds),
+                inArray(
-                eq(sites.orgId, orgId)
+                    sites.siteId,
+                    db
+                        .select({ siteId: userSites.siteId })
+                        .from(userSites)
+                        .where(eq(userSites.userId, req.user.userId))
                 )
             ];
 
+            const roleIds = req.userOrgRoleIds ?? [];
+            if (roleIds.length > 0) {
+                userAccessConditions.push(
+                    inArray(
+                        sites.siteId,
+                        db
+                            .select({ siteId: roleSites.siteId })
+                            .from(roleSites)
+                            .where(inArray(roleSites.roleId, roleIds))
+                    )
+                );
+            }
+
+            conditions.push(
+                userAccessConditions.length === 1
+                    ? userAccessConditions[0]
+                    : or(...userAccessConditions)!
+            );
+        }
+
         if (typeof online !== "undefined") {
             conditions.push(eq(sites.online, online));
         }
@@ -418,17 +421,15 @@ export async function listSites(
                     )
                 );
             }
-            conditions.push(or(...queryList));
+            conditions.push(or(...queryList)!);
         }
 
         const baseQuery = querySitesBase().where(and(...conditions));
 
-        // we need to add `as` so that drizzle filters the result as a subquery
+        const countQuery = db
-        const countQuery = db.$count(
+            .select({ count: sql<number>`count(*)` })
-            querySitesBase()
+            .from(sites)
-                .where(and(...conditions))
+            .where(and(...conditions));
-                .as("filtered_sites")
-        );
 
         const siteListQuery = baseQuery
             .limit(pageSize)
@@ -441,11 +442,13 @@ export async function listSites(
                     : asc(sites.name)
             );
 
-        const [totalCount, rows] = await Promise.all([
+        const [countRows, rows] = await Promise.all([
             countQuery,
             siteListQuery
         ]);
 
+        const totalCount = Number(countRows[0]?.count ?? 0);
+
         // Get latest version asynchronously without blocking the response
         const latestNewtVersionPromise = getLatestNewtVersion();
 

src/app/[orgId]/settings/general/page.tsx

@@ -282,7 +282,7 @@ function GeneralSectionForm({ org }: SectionFormProps) {
                                         <FormDescription>
                                             {t("newtAutoUpdateDescription")}{" "}
                                             <a
-                                                href="https://docs.pangolin.net/manage/sites/configure-site#auto-update"
+                                                href="https://docs.pangolin.net/manage/sites/auto-update"
                                                 target="_blank"
                                                 rel="noopener noreferrer"
                                                 className="text-primary hover:underline inline-flex items-center gap-1"

src/app/[orgId]/settings/resources/public/[niceId]/rdp/page.tsx

@@ -229,7 +229,7 @@ function RdpServerForm({
                                 sitesField="selectedSites"
                                 destinationField="destination"
                                 destinationPortField="destinationPort"
-                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp"
+                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp#site-and-host-configuration"
                                 defaultPort={3389}
                             />
                         </SettingsSectionForm>

src/app/[orgId]/settings/resources/public/[niceId]/ssh/page.tsx

@@ -467,7 +467,7 @@ function SshServerForm({
                                             <p className="text-sm text-muted-foreground">
                                                 {t("sshDaemonDisclaimer")}{" "}
                                                 <a
-                                                    href="https://docs.pangolin.net/manage/resources/public/ssh"
+                                                    href="https://docs.pangolin.net/manage/ssh"
                                                     target="_blank"
                                                     rel="noopener noreferrer"
                                                     className="text-primary hover:underline inline-flex items-center gap-1"
@@ -589,7 +589,7 @@ function SshServerForm({
                                             sitesField="selectedSites"
                                             destinationField="destination"
                                             destinationPortField="destinationPort"
-                                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
+                                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh#site-and-host-configuration"
                                             defaultPort={22}
                                         />
                                     </SettingsFormCell>
@@ -602,7 +602,7 @@ function SshServerForm({
                                             siteField="selectedSite"
                                             destinationField="destination"
                                             destinationPortField="destinationPort"
-                                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
+                                            learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh#site-and-host-configuration"
                                             defaultPort={22}
                                         />
                                     </SettingsFormCell>

src/app/[orgId]/settings/resources/public/create/page.tsx

@@ -80,7 +80,6 @@ import { toASCII } from "punycode";
 import {
     useMemo,
     useState,
-    useTransition,
     useEffect
 } from "react";
 import { useForm, type Resolver } from "react-hook-form";
@@ -229,7 +228,7 @@ export default function Page() {
     >([]);
     const [loadingExitNodes, setLoadingExitNodes] = useState(build === "saas");
 
-    const [createLoading, startTransition] = useTransition();
+    const [createLoading, setCreateLoading] = useState(false);
     const [showSnippets, setShowSnippets] = useState(false);
     const [niceId, setNiceId] = useState<string>("");
 
@@ -461,6 +460,7 @@ export default function Page() {
     };
 
     async function onSubmit() {
+        setCreateLoading(true);
         const baseData = baseForm.getValues();
 
         try {
@@ -707,6 +707,8 @@ export default function Page() {
                     t("resourceErrorCreateMessageDescription")
                 )
             });
+        } finally {
+            setCreateLoading(false);
         }
     }
 
@@ -762,7 +764,7 @@ export default function Page() {
             ssh: "SSH",
             rdp: "RDP",
             vnc: "VNC",
-        }
+        };
     }
 
     const typeOptions: OptionSelectOption<NewResourceType>[] =
@@ -1097,7 +1099,7 @@ export default function Page() {
                                                                     "sshDaemonDisclaimer"
                                                                 )}{" "}
                                                                 <a
-                                                                    href="https://docs.pangolin.net/manage/resources/public/ssh"
+                                                                    href="https://docs.pangolin.net/manage/ssh"
                                                                     target="_blank"
                                                                     rel="noopener noreferrer"
                                                                     className="text-primary hover:underline inline-flex items-center gap-1"
@@ -1235,7 +1237,7 @@ export default function Page() {
                                                                 sitesField="selectedSites"
                                                                 destinationField="destination"
                                                                 destinationPortField="destinationPort"
-                                                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
+                                                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh#site-and-host-configuration"
                                                                 defaultPort={22}
                                                             />
                                                         </Form>
@@ -1256,7 +1258,7 @@ export default function Page() {
                                                                 siteField="selectedSite"
                                                                 destinationField="destination"
                                                                 destinationPortField="destinationPort"
-                                                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh"
+                                                                learnMoreHref="https://docs.pangolin.net/manage/resources/public/ssh#site-and-host-configuration"
                                                                 defaultPort={22}
                                                             />
                                                         </Form>
@@ -1306,7 +1308,7 @@ export default function Page() {
                                                     sitesField="selectedSites"
                                                     destinationField="destination"
                                                     destinationPortField="destinationPort"
-                                                    learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp"
+                                                    learnMoreHref="https://docs.pangolin.net/manage/resources/public/rdp#site-and-host-configuration"
                                                     defaultPort={3389}
                                                 />
                                             </Form>
@@ -1353,7 +1355,7 @@ export default function Page() {
                                                     sitesField="selectedSites"
                                                     destinationField="destination"
                                                     destinationPortField="destinationPort"
-                                                    learnMoreHref="https://docs.pangolin.net/manage/resources/public/vnc"
+                                                    learnMoreHref="https://docs.pangolin.net/manage/resources/public/vnc#site-and-host-configuration"
                                                     defaultPort={5900}
                                                 />
                                             </Form>
@@ -1427,7 +1429,7 @@ export default function Page() {
                                         }
                                     }}
                                     loading={createLoading}
-                                    disabled={!areAllTargetsValid() || browserGatewayDisabled}
+                                    disabled={!areAllTargetsValid() || browserGatewayDisabled || createLoading}
                                 >
                                     {t("resourceCreate")}
                                 </Button>

src/app/[orgId]/settings/sites/[niceId]/general/page.tsx

@@ -317,7 +317,7 @@ export default function GeneralPage() {
                                                             "siteAutoUpdateDescription"
                                                         )}{" "}
                                                         <a
-                                                            href="https://docs.pangolin.net/manage/sites/configure-site#auto-update"
+                                                            href="https://docs.pangolin.net/manage/sites/auto-update"
                                                             target="_blank"
                                                             rel="noopener noreferrer"
                                                             className="text-primary hover:underline inline-flex items-center gap-1"

src/app/ssh/SshClient.tsx

@@ -596,7 +596,7 @@ export default function SshClient({
                                         <p className="text-sm text-muted-foreground">
                                             {t("sshPrivateKeyDisclaimer")}{" "}
                                             <Link
-                                                href="https://docs.pangolin.net/"
+                                                href="https://docs.pangolin.net/manage/ssh#authentication-method"
                                                 target="_blank"
                                                 rel="noopener noreferrer"
                                                 className="text-primary hover:underline inline-flex items-center gap-1"

src/app/vnc/VncClient.tsx

@@ -124,21 +124,21 @@ export default function VncClient({
             authToken: target.authToken
         });
 
-        try {
+        // try {
-            const checkParams = new URLSearchParams(params);
+        //     const checkParams = new URLSearchParams(params);
-            checkParams.set("checkOnly", "1");
+        //     checkParams.set("checkOnly", "1");
-            const response = await fetch(`${base}?${checkParams.toString()}`);
+        //     const response = await fetch(`${base}?${checkParams.toString()}`);
-            if (!response.ok) {
+        //     if (!response.ok) {
-                const detail = (await response.text()).trim();
+        //         const detail = (await response.text()).trim();
-                setConnectError(detail || t("sshErrorConnectionClosed"));
+        //         setConnectError(detail || t("sshErrorConnectionClosed"));
-                setConnecting(false);
+        //         setConnecting(false);
-                return;
+        //         return;
-            }
+        //     }
-        } catch {
+        // } catch {
-            setConnectError(t("sshErrorWebSocket"));
+        //     setConnectError(t("sshErrorWebSocket"));
-            setConnecting(false);
+        //     setConnecting(false);
-            return;
+        //     return;
-        }
+        // }
 
         let RFB: new (
             target: HTMLElement,

src/components/BrowserGatewayTargetForm.tsx

@@ -222,7 +222,7 @@ export function BrowserGatewayTargetForm<T extends FieldValues>(
                     <a
                         href={
                             props.learnMoreHref ??
-                            "https://docs.pangolin.net/manage/resources/public/ssh"
+                            "https://docs.pangolin.net/manage/resources/private/multi-site-routing"
                         }
                         target="_blank"
                         rel="noopener noreferrer"

src/components/CreateOrgLabelDialog.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
 import type { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
@@ -18,6 +20,7 @@ import {
     CredenzaTitle
 } from "./Credenza";
 import { OrgLabelForm } from "./OrgLabelForm";
+import { PaidFeaturesAlert } from "./PaidFeaturesAlert";
 import { Button } from "./ui/button";
 
 export type CreateOrgLabelDialogProps = {
@@ -35,6 +38,8 @@ export function CreateOrgLabelDialog({
 }: CreateOrgLabelDialogProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
+    const { isPaidUser } = usePaidStatus();
+    const canManageLabels = isPaidUser(tierMatrix.labels);
     const [isSubmitting, startTransition] = useTransition();
 
     async function createOrgLabel(data: { name: string; color: string }) {
@@ -79,8 +84,11 @@ export function CreateOrgLabelDialog({
                     </CredenzaDescription>
                 </CredenzaHeader>
                 <CredenzaBody>
+                    <PaidFeaturesAlert tiers={tierMatrix.labels} />
                     <OrgLabelForm
+                        disabled={!canManageLabels}
                         onSubmit={(data) => {
+                            if (!canManageLabels) return;
                             startTransition(async () => createOrgLabel(data));
                         }}
                     />
@@ -98,7 +106,7 @@ export function CreateOrgLabelDialog({
                     <Button
                         type="submit"
                         form="org-label-form"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || !canManageLabels}
                         loading={isSubmitting}
                     >
                         {t("labelCreate")}

src/components/EditOrgLabelDialog.tsx

@@ -1,8 +1,10 @@
 "use client";
 
 import { useEnvContext } from "@app/hooks/useEnvContext";
+import { usePaidStatus } from "@app/hooks/usePaidStatus";
 import { toast } from "@app/hooks/useToast";
 import { createApiClient, formatAxiosError } from "@app/lib/api";
+import { tierMatrix } from "@server/lib/billing/tierMatrix";
 import type { CreateOrEditLabelResponse } from "@server/routers/labels/types";
 import type { AxiosResponse } from "axios";
 import { useTranslations } from "next-intl";
@@ -18,6 +20,7 @@ import {
     CredenzaTitle
 } from "./Credenza";
 import { OrgLabelForm } from "./OrgLabelForm";
+import { PaidFeaturesAlert } from "./PaidFeaturesAlert";
 import { Button } from "./ui/button";
 
 export type EditOrgLabelDialogProps = {
@@ -41,6 +44,8 @@ export function EditOrgLabelDialog({
 }: EditOrgLabelDialogProps) {
     const t = useTranslations();
     const api = createApiClient(useEnvContext());
+    const { isPaidUser } = usePaidStatus();
+    const canManageLabels = isPaidUser(tierMatrix.labels);
     const [isSubmitting, startTransition] = useTransition();
 
     async function editOrgLabel(data: { name: string; color: string }) {
@@ -85,9 +90,12 @@ export function EditOrgLabelDialog({
                     </CredenzaDescription>
                 </CredenzaHeader>
                 <CredenzaBody>
+                    <PaidFeaturesAlert tiers={tierMatrix.labels} />
                     <OrgLabelForm
+                        disabled={!canManageLabels}
                         defaultValue={label}
                         onSubmit={(data) => {
+                            if (!canManageLabels) return;
                             startTransition(async () => editOrgLabel(data));
                         }}
                     />
@@ -105,7 +113,7 @@ export function EditOrgLabelDialog({
                     <Button
                         type="submit"
                         form="org-label-form"
-                        disabled={isSubmitting}
+                        disabled={isSubmitting || !canManageLabels}
                         loading={isSubmitting}
                     >
                         {t("labelEdit")}

src/components/OrgLabelForm.tsx

@@ -35,9 +35,14 @@ export type LabelFormData = z.infer<typeof labelFormSchema>;
 export type OrgLabelFormProps = {
     onSubmit: (data: LabelFormData) => void;
     defaultValue?: LabelFormData;
+    disabled?: boolean;
 };
 
-export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
+export function OrgLabelForm({
+    onSubmit,
+    defaultValue,
+    disabled = false
+}: OrgLabelFormProps) {
     const t = useTranslations();
 
     const colorValues = Object.values(LABEL_COLORS);
@@ -70,9 +75,7 @@ export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
                         <FormItem>
                             <FormLabel>{t("labelNameField")}</FormLabel>
                             <FormControl>
-                                <Input
+                                <Input {...field} disabled={disabled} />
-                                    {...field}
-                                />
                             </FormControl>
                             <FormMessage />
                         </FormItem>
@@ -88,6 +91,7 @@ export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
                             <Select
                                 onValueChange={field.onChange}
                                 value={field.value}
+                                disabled={disabled}
                             >
                                 <SelectTrigger className="w-full">
                                     <SelectValue
@@ -110,7 +114,9 @@ export function OrgLabelForm({ onSubmit, defaultValue }: OrgLabelFormProps) {
                                                     }}
                                                 />
                                                 <span data-name>
-                                                    {color.charAt(0).toUpperCase() +
+                                                    {color
+                                                        .charAt(0)
+                                                        .toUpperCase() +
                                                         color.slice(1)}
                                                 </span>
                                             </SelectItem>

src/components/PrivateResourceForm.tsx

@@ -2079,7 +2079,7 @@ export function PrivateResourceForm({
                                     <p className="text-sm text-muted-foreground">
                                         {t("sshDaemonDisclaimer")}{" "}
                                         <a
-                                            href="https://docs.pangolin.net/manage/resources/private/ssh"
+                                            href="https://docs.pangolin.net/manage/ssh"
                                             target="_blank"
                                             rel="noopener noreferrer"
                                             className="text-primary hover:underline inline-flex items-center gap-1"

src/components/PublicResourcesTable.tsx

@@ -767,7 +767,7 @@ function TargetStatusCell({
 
     if (!targets || targets.length === 0) {
         return (
-            <div className="flex items-center gap-2 px-2">
+            <div className="flex items-center gap-2 px-0">
                 <StatusIcon status="unknown" />
                 <span className="text-sm">{t("resourcesTableNoTargets")}</span>
             </div>

src/components/ResourcePoliciesBanner.tsx

@@ -1,7 +1,9 @@
 "use client";
 
-import { Shield } from "lucide-react";
+import { Button } from "@app/components/ui/button";
+import { Shield, ArrowRight } from "lucide-react";
 import { useTranslations } from "next-intl";
+import Link from "next/link";
 import DismissableBanner from "./DismissableBanner";
 
 export const ResourcePoliciesBanner = () => {
@@ -14,7 +16,22 @@ export const ResourcePoliciesBanner = () => {
             title={t("resourcePoliciesBannerTitle")}
             titleIcon={<Shield className="w-5 h-5 text-primary" />}
             description={t("resourcePoliciesBannerDescription")}
-        />
+        >
+            <Link
+                href="https://docs.pangolin.net/manage/resources/public/resource-policies"
+                target="_blank"
+                rel="noopener noreferrer"
+            >
+                <Button
+                    variant="outline"
+                    size="sm"
+                    className="gap-2 hover:bg-primary/10 hover:border-primary/50 transition-colors"
+                >
+                    {t("resourcePoliciesBannerButtonText")}
+                    <ArrowRight className="w-4 h-4" />
+                </Button>
+            </Link>
+        </DismissableBanner>
     );
 };
 

src/components/newt-install-commands.tsx

@@ -354,7 +354,7 @@ WantedBy=default.target`
                             {t.rich("siteInstallAdvantechDocsDescription", {
                                 docsLink: (chunks) => (
                                     <a
-                                        href="https://docs.pangolin.net/manage/sites/install-advantech"
+                                        href="https://docs.pangolin.net/manage/sites/install-site"
                                         target="_blank"
                                         rel="noopener noreferrer"
                                         className="text-primary hover:underline inline-flex items-center gap-1"

src/components/resource-policy/EditPolicyForm.tsx

@@ -8,13 +8,14 @@ import { usePaidStatus } from "@app/hooks/usePaidStatus";
 
 import { orgQueries } from "@app/lib/queries";
 import { build } from "@server/build";
-import { tierMatrix } from "@server/lib/billing/tierMatrix";
+import { TierFeature, tierMatrix } from "@server/lib/billing/tierMatrix";
 import { useQuery } from "@tanstack/react-query";
 
 import { useMemo } from "react";
 import { EditPolicyNameSectionForm } from "./EditPolicyNameSectionForm";
 import { PolicyAuthStackSection } from "./PolicyAuthStackSection";
 import { PolicyAccessRulesSection } from "./PolicyAccessRulesSection";
+import { PaidFeaturesAlert } from "@app/components/PaidFeaturesAlert";
 
 export type EditPolicyFormSection = "general" | "authentication" | "rules";
 
@@ -71,13 +72,17 @@ export function EditPolicyForm({
         return <></>;
     }
 
+    const policyTiers = tierMatrix[TierFeature.ResourcePolicies];
+    const isDisabled = !isPaidUser(policyTiers);
+    const effectiveReadonly = readonly || isDisabled;
+
     const authSection = (
         <PolicyAuthStackSection
             mode="edit"
             orgId={org.org.orgId}
             allIdps={allIdps}
             emailEnabled={env.email.emailEnabled}
-            readonly={readonly}
+            readonly={effectiveReadonly}
             resourceId={resourceId}
         />
     );
@@ -87,32 +92,82 @@ export function EditPolicyForm({
             mode="edit"
             isMaxmindAvailable={isMaxmindAvailable}
             isMaxmindAsnAvailable={isMaxmindASNAvailable}
-            readonly={readonly}
+            readonly={effectiveReadonly}
             resourceId={resourceId}
         />
     );
 
     if (section === "general") {
-        return <EditPolicyNameSectionForm readonly={readonly} />;
+        return (
+            <>
+                <PaidFeaturesAlert tiers={policyTiers} />
+                <div
+                    className={
+                        isDisabled
+                            ? "pointer-events-none opacity-50"
+                            : undefined
+                    }
+                >
+                    <EditPolicyNameSectionForm readonly={effectiveReadonly} />
+                </div>
+            </>
+        );
     }
 
     if (section === "authentication") {
-        return authSection;
+        return (
+            <>
+                <PaidFeaturesAlert tiers={policyTiers} />
+                <div
+                    className={
+                        isDisabled
+                            ? "pointer-events-none opacity-50"
+                            : undefined
+                    }
+                >
+                    {authSection}
+                </div>
+            </>
+        );
     }
 
     if (section === "rules") {
-        return rulesSection;
+        return (
+            <>
+                <PaidFeaturesAlert tiers={policyTiers} />
+                <div
+                    className={
+                        isDisabled
+                            ? "pointer-events-none opacity-50"
+                            : undefined
+                    }
+                >
+                    {rulesSection}
+                </div>
+            </>
+        );
     }
 
     return (
+        <>
+            <PaidFeaturesAlert tiers={policyTiers} />
+            <div
+                className={
+                    isDisabled ? "pointer-events-none opacity-50" : undefined
+                }
+            >
                 <SettingsContainer>
                     {!hidePolicyNameForm && !isOverlay && (
-                <EditPolicyNameSectionForm readonly={readonly} />
+                        <EditPolicyNameSectionForm
+                            readonly={effectiveReadonly}
+                        />
                     )}
 
                     {authSection}
 
                     {rulesSection}
                 </SettingsContainer>
+            </div>
+        </>
     );
 }