From 003bf7fdf32a4ec52de5ff4f6d8222f141961f0c Mon Sep 17 00:00:00 2001
From: Fred KISSIE <fredkiss3@gmail.com>
Date: Thu, 19 Feb 2026 04:59:51 +0100
Subject: [PATCH] =?UTF-8?q?=F0=9F=9A=B8=20hide=20otp,=20rules=20and=20reso?=
 =?UTF-8?q?urce=20rules=20config=20by=20default?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 messages/en-US.json                           |  6 +-
 .../resources/policies/create/page.tsx        |  2 +-
 src/components/CreatePolicyForm.tsx           | 91 +++++++++++++++++--
 src/components/tags/tag-popover.tsx           | 10 +-
 4 files changed, 98 insertions(+), 11 deletions(-)

diff --git a/messages/en-US.json b/messages/en-US.json
index 58a772967..91cf42c53 100644
--- a/messages/en-US.json
+++ b/messages/en-US.json
@@ -176,7 +176,11 @@
     "resourcePolicyName": "Policy Name",
     "resourcePolicyNameDescription": "Give this policy a name to identify it across your resources",
     "resourcePolicyNamePlaceholder": "e.g. Internal Access Policy",
-    "policiesSeeAll": "See All Policies",
+    "resourcePoliciesSeeAll": "See All Policies",
+    "resourcePolicyAuthMethodAdd": "Add Authentication Method",
+    "resourcePolicyOtpEmailAdd": "Add OTP emails",
+    "resourcePolicyRulesAdd": "Add Rules",
+    "rulesResourcePolicyDescription": "Configure rules to control access resources associated to this policy",
     "authentication": "Authentication",
     "protected": "Protected",
     "notProtected": "Not Protected",
diff --git a/src/app/[orgId]/settings/(private)/resources/policies/create/page.tsx b/src/app/[orgId]/settings/(private)/resources/policies/create/page.tsx
index e43ef39ee..19fd2ca37 100644
--- a/src/app/[orgId]/settings/(private)/resources/policies/create/page.tsx
+++ b/src/app/[orgId]/settings/(private)/resources/policies/create/page.tsx
@@ -35,7 +35,7 @@ export default async function CreateResourcePolicyPage(
 
                 <Button asChild variant="outline">
                     <Link href={`/${params.orgId}/settings/resources/policies`}>
-                        {t("policiesSeeAll")}
+                        {t("resourcePoliciesSeeAll")}
                     </Link>
                 </Button>
             </div>
diff --git a/src/components/CreatePolicyForm.tsx b/src/components/CreatePolicyForm.tsx
index 96154edfe..01d56fa46 100644
--- a/src/components/CreatePolicyForm.tsx
+++ b/src/components/CreatePolicyForm.tsx
@@ -88,7 +88,8 @@ import {
     Check,
     ChevronsUpDown,
     InfoIcon,
-    Key
+    Key,
+    Plus
 } from "lucide-react";
 import { useTranslations } from "next-intl";
 
@@ -314,8 +315,8 @@ function PolicyUsersRolesSection({
     allIdps
 }: PolicyUsersRolesSectionProps) {
     const t = useTranslations();
-    const [ssoEnabled, setSsoEnabled] = useState(true);
-    const [selectedIdpId, setSelectedIdpId] = useState<number | null>(null);
+    const ssoEnabled = form.watch("sso");
+    const selectedIdpId = form.watch("skipToIdpId");
     const [activeRolesTagIndex, setActiveRolesTagIndex] = useState<
         number | null
     >(null);
@@ -338,9 +339,8 @@ function PolicyUsersRolesSection({
                     <SwitchInput
                         id="sso-toggle"
                         label={t("ssoUse")}
-                        defaultChecked={true}
+                        defaultChecked={ssoEnabled}
                         onCheckedChange={(val) => {
-                            setSsoEnabled(val);
                             form.setValue("sso", val);
                         }}
                     />
@@ -445,11 +445,9 @@ function PolicyUsersRolesSection({
                             <Select
                                 onValueChange={(value) => {
                                     if (value === "none") {
-                                        setSelectedIdpId(null);
                                         form.setValue("skipToIdpId", null);
                                     } else {
                                         const id = parseInt(value);
-                                        setSelectedIdpId(id);
                                         form.setValue("skipToIdpId", id);
                                     }
                                 }}
@@ -493,6 +491,33 @@ function PolicyUsersRolesSection({
 
 function PolicyAuthMethodsSection() {
     const t = useTranslations();
+    const [isOpen, setIsOpen] = useState(false);
+
+    if (!isOpen) {
+        return (
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("resourceAuthMethods")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("resourceAuthMethodsDescriptions")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+                <SettingsSectionBody>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => setIsOpen(true)}
+                    >
+                        <Plus className="mr-2 h-4 w-4" />
+                        {t("resourcePolicyAuthMethodAdd")}
+                    </Button>
+                </SettingsSectionBody>
+            </SettingsSection>
+        );
+    }
+
     return (
         <SettingsSection>
             <SettingsSectionHeader>
@@ -562,11 +587,37 @@ function PolicyOtpEmailSection({
     emailEnabled
 }: PolicyOtpEmailSectionProps) {
     const t = useTranslations();
+    const [isOpen, setIsOpen] = useState(false);
     const [whitelistEnabled, setWhitelistEnabled] = useState(false);
     const [activeEmailTagIndex, setActiveEmailTagIndex] = useState<
         number | null
     >(null);
 
+    if (!isOpen) {
+        return (
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("otpEmailTitle")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("otpEmailTitleDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+                <SettingsSectionBody>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => setIsOpen(true)}
+                    >
+                        <Plus className="mr-2 h-4 w-4" />
+                        {t("resourcePolicyOtpEmailAdd")}
+                    </Button>
+                </SettingsSectionBody>
+            </SettingsSection>
+        );
+    }
+
     return (
         <SettingsSection>
             <SettingsSectionHeader>
@@ -680,6 +731,7 @@ function PolicyRulesSection({
     isMaxmindAsnAvailable
 }: PolicyRulesSectionProps) {
     const t = useTranslations();
+    const [isOpen, setIsOpen] = useState(false);
     const [rules, setRules] = useState<LocalRule[]>([]);
     const [rulesEnabled, setRulesEnabled] = useState(false);
     const [openAddRuleCountrySelect, setOpenAddRuleCountrySelect] =
@@ -1176,6 +1228,31 @@ function PolicyRulesSection({
         state: { pagination: { pageIndex: 0, pageSize: 1000 } }
     });
 
+    if (!isOpen) {
+        return (
+            <SettingsSection>
+                <SettingsSectionHeader>
+                    <SettingsSectionTitle>
+                        {t("rulesResource")}
+                    </SettingsSectionTitle>
+                    <SettingsSectionDescription>
+                        {t("rulesResourcePolicyDescription")}
+                    </SettingsSectionDescription>
+                </SettingsSectionHeader>
+                <SettingsSectionBody>
+                    <Button
+                        type="button"
+                        variant="outline"
+                        onClick={() => setIsOpen(true)}
+                    >
+                        <Plus className="mr-2 h-4 w-4" />
+                        {t("resourcePolicyRulesAdd")}
+                    </Button>
+                </SettingsSectionBody>
+            </SettingsSection>
+        );
+    }
+
     return (
         <SettingsSection>
             <SettingsSectionHeader>
diff --git a/src/components/tags/tag-popover.tsx b/src/components/tags/tag-popover.tsx
index 533619a7c..59b81bb9d 100644
--- a/src/components/tags/tag-popover.tsx
+++ b/src/components/tags/tag-popover.tsx
@@ -1,4 +1,10 @@
-import React, { useCallback, useEffect, useRef, useState } from "react";
+import React, {
+    useCallback,
+    useEffect,
+    useLayoutEffect,
+    useRef,
+    useState
+} from "react";
 import { Popover, PopoverContent, PopoverTrigger } from "../ui/popover";
 import { TagInputStyleClassesProps, type Tag as TagType } from "./tag-input";
 import { TagList, TagListProps } from "./tag-list";
@@ -44,7 +50,7 @@ export const TagPopover: React.FC<TagPopoverProps> = ({
 
     const t = useTranslations();
 
-    useEffect(() => {
+    useLayoutEffect(() => {
         const handleResize = () => {
             if (triggerContainerRef.current && triggerRef.current) {
                 setPopoverWidth(triggerContainerRef.current.offsetWidth);