🚸 hide otp, rules and resource rules config by default

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",

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>

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 ssoEnabled = form.watch("sso");
-    const [selectedIdpId, setSelectedIdpId] = useState<number | null>(null);
+    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>

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);