🚸 hide otp, rules and resource rules config by default

This commit is contained in:
Fred KISSIE
2026-02-19 04:59:51 +01:00
parent c3fdda026b
commit 003bf7fdf3
4 changed files with 98 additions and 11 deletions

View File

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

View File

@@ -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>

View File

@@ -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>

View File

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