WIP for #533

oharsta · oharsta · commit 2acb11d790ac · 2026-04-08T11:22:47.000+02:00
diff --git a/client/src/components/SelectField.jsx b/client/src/components/SelectField.jsx
@@ -11,7 +11,7 @@ export default function SelectField({
                                         toolTip = null, searchable = false, small = false,
                                         clearable = false, isMulti = false, creatable = false,
                                         onInputChange = null, required = false, info = null,
-    className="", isAlert=false
+                                        className = "", isAlert = false
                                     }) {
     return (
         <div className={`select-field ${className}`}>
diff --git a/client/src/locale/en.js b/client/src/locale/en.js
@@ -1102,6 +1102,8 @@ const en = {
         noStepUpPolicies: "No stepUp policies have been configured yet",
         newPolicy: "New authorization rule",
         editPolicy: "Edit authorization rule",
+        newStepUpPolicy: "New stepup policy",
+        editStepUpPolicy: "Edit stepup policy",
         new: "New authorization rule",
         active: "Active",
         paused: "Paused",
@@ -1122,10 +1124,10 @@ const en = {
         allAttributesMatchTooltip: "Policies with a logical AND rule enforce that all attributes defined must match those of the person trying to log in.<br/><br/>Policies defined with a logical OR only require one of the attributes to match the attributes of the person requesting access.",
         all: "All",
         any: "Any",
-        filters: "Filter on attributes",
+        filters: "Filter on attribute(s)",
         attribute: "Attribute",
         attributePlaceholder: "Select an attribute",
-        addAttributePlaceholder: "Add another attribute",
+        addAttributePlaceholder: "Add attribute +",
         permittedValues: "Permitted value(s)",
         permittedValuesPlaceholder: "Add values(s)...",
         denyEn: "English message for users without access",
@@ -1175,7 +1177,21 @@ const en = {
         negateApplication: "Select <strong>Negate selection</strong> to apply this policy to all service providers except the ones you chose.",
         serviceProvidersPlaceholder: "Select application(s) to filter the policies",
         serviceProvidersPlaceholderPolicy: "Choose application(s) for this policy",
-        serviceProviders: "Applications"
+        serviceProviders: "Applications",
+        policiesFound: "{{nbr}} policies found",
+        policiesFoundForServiceProvider: "{{nbr}} policies found for {{names}}",
+        policiesFoundSingle: "{{nbr}} policy found",
+        policiesFoundSingleForServiceProvider: "{{nbr}} policiy found for {{names}}",
+        attributesRequired:"At least one attribute with one of more valid values is required",
+        form: {
+            allow: "Allow access when",
+            deny: "Deny access when",
+            any: "is any of",
+            all: "is all of",
+            none: "is none of",
+            and: "and",
+            or: "or"
+        }
     },
     manage: {
         name: "Name",
diff --git a/client/src/pages/ApplicationMigrate.jsx b/client/src/pages/ApplicationMigrate.jsx
@@ -18,6 +18,7 @@ const ApplicationMigrate = () => {
     const [application, setApplication] = useState(null);
     const [applications, setApplications] = useState([]);
     const [confirmation, setConfirmation] = useState({});
+    const [refresh, setRefresh] = useState(new Date());
 
     useEffect(() => {
         Promise.all([allAplicationsLight(), organizationsLight()])
@@ -26,7 +27,7 @@ const ApplicationMigrate = () => {
                 setOrganizations(res[1].map(org => ({...org, label: org.name, value: org.id})));
                 setLoading(false);
             });
-    }, []);
+    }, [refresh]);
 
     if (loading) {
         return <Loader/>
@@ -51,8 +52,9 @@ const ApplicationMigrate = () => {
             setConfirmation({});
             migrateApplication(application.id, organization.id)
                 .then(() => {
+                    setApplication(null);
                     setOrganization(null);
-                    setLoading(false);
+                    setRefresh(new Date());
                     setFlash(I18n.t("applicationMigrate.flash.migrated", {
                         application: application.name,
                         organisation: organization.label
diff --git a/client/src/pages/Policies.jsx b/client/src/pages/Policies.jsx
@@ -55,6 +55,7 @@ const Policies = () => {
                 return;
             }
             newCurrentPolicy.data.attributes = groupByValues([...newCurrentPolicy.data.attributes]);
+            newCurrentPolicy.originalName = newCurrentPolicy.data.name;
         }
         window.scrollTo({top: 0, behavior: "smooth"});
         setCurrentPolicy(newCurrentPolicy);
@@ -145,6 +146,7 @@ const Policies = () => {
                                     .some(sp => selectedServiceProviders.some(sel => sp.name === sel.value)))}
                             currentOrganization={currentOrganization}
                             policyDetails={toPolicyDetail}
+                            selectedServiceProviders={selectedServiceProviders}
                             refreshPolicies={refreshPolicies}
                             serviceProviders={serviceProviders}
                         />
diff --git a/client/src/pages/Policies.scss b/client/src/pages/Policies.scss
@@ -27,7 +27,8 @@ div.policies-outer-container {
 
     .app-policies {
         display: flex;
-        width: 75%;
+        width: 100%;
+        padding-right: 100px;
         gap: 25px;
         @media (max-width: $medium) {
             width: 100%;
diff --git a/client/src/policies/PolicyForm.jsx b/client/src/policies/PolicyForm.jsx
@@ -1,6 +1,6 @@
 import "./PolicyForm.scss";
-import React, {useState} from "react";
-import {Button, ButtonType, Chip, ChipType, SegmentedControl, Tooltip} from "@surfnet/sds";
+import React, {Fragment, useState} from "react";
+import {Button, ButtonType, Chip, ChipType} from "@surfnet/sds";
 import I18n from "../locale/I18n.js";
 import InputField from "../components/InputField.jsx";
 import {useAppStore} from "../stores/AppStore.js";
@@ -29,6 +29,11 @@ export const PolicyForm = ({
     const [confirmation, setConfirmation] = useState({});
     const [attributeValueErrors, setAttributeValueErrors] = useState({});
 
+    const accessOptions = ["allow", "deny"].map(name => ({value: name, label: I18n.t(`policies.form.${name}`)}));
+    const conditionalOptions = ["any", "all"].map(name => ({value: name, label: I18n.t(`policies.form.${name}`)}));
+    const negatedOptions = ["any", "none"].map(name => ({value: name, label: I18n.t(`policies.form.${name}`)}));
+    const orOptions = ["and", "or"].map(name => ({value: name, label: I18n.t(`policies.form.${name}`)}));
+
     const required = ["name", "denyAdvice", "denyAdviceNl"];
 
     const {setFlash, allowedAttributes} = useAppStore(useShallow(state => ({
@@ -42,7 +47,8 @@ export const PolicyForm = ({
 
     const isValid = () => {
         const allAttributesValuesValid = Object.values(attributeValueErrors).every(values => isEmpty(values));
-        return required.every(attr => !isEmpty(policy.data[attr])) && !duplicatePolicyName && allAttributesValuesValid;
+        const hasAttributes = policy.data.attributes.filter(attr => !isEmpty(attr.name) && !isEmpty(attr.value)).length > 0;
+        return required.every(attr => !isEmpty(policy.data[attr])) && !duplicatePolicyName && allAttributesValuesValid && hasAttributes;
     }
 
     const doDeletePolicy = (confirmationRequired, policy) => {
@@ -68,6 +74,7 @@ export const PolicyForm = ({
 
     const submit = () => {
         setInitial(false);
+
         if (isValid()) {
             const promise = isExistingPolicy ? updatePolicy : newPolicy;
             //We need to destructure the attributes with multiple values, to single attribute / value pairs
@@ -103,11 +110,13 @@ export const PolicyForm = ({
     }
 
     const attributeDeleted = index => {
-        const newAttributes = policy.data.attributes.filter((item, i) => i !== index);
-        internalUpdatePolicy({attributes: defaultAttributes(newAttributes)});
         const deletedAttribute = policy.data.attributes[index];
         delete attributeValueErrors[deletedAttribute.name];
         setAttributeValueErrors({...attributeValueErrors});
+
+        const filteredAttributes = policy.data.attributes.filter((item, i) => i !== index);
+        const newAttributes = defaultAttributes(filteredAttributes);
+        internalUpdatePolicy({attributes: newAttributes});
     }
 
     const attributeValueChanged = (values, index) => {
@@ -159,7 +168,7 @@ export const PolicyForm = ({
             />}
             <div className="policy-form-header">
                 <div className="header-top">
-                    <h2>{I18n.t(`appAccess.${isExistingPolicy ? "editPolicy" : "newPolicy"}`)}</h2>
+                    <h2>{I18n.t(`appAccess.${isExistingPolicy ? (policy.data.type === "reg" ? "editPolicy" : "editStepUpPolicy") : (policy.data.type === "reg" ? "newPolicy" : "newStepUpPolicy")}`)}</h2>
                     {isExistingPolicy &&
                         <div className="policy-header-actions">
                             <Chip type={ChipType.Status_info}
@@ -184,64 +193,72 @@ export const PolicyForm = ({
                     <ErrorIndicator adjustMargin={true}
                                     msg={I18n.t("appAccess.duplicateName", {name: policy.data.name})}/>}
 
-                <SelectField
-                    value={serviceProviderOptions.filter(option => policy.data.serviceProviderIds.some(sp => sp.name === option.value))}
-                    searchable={true}
-                    name={I18n.t("policies.serviceProviders")}
-                    options={serviceProviderOptions}
-                    placeholder={I18n.t("policies.serviceProvidersPlaceholderPolicy")}
-                    onChange={val => internalUpdatePolicy({
-                        serviceProviderIds: isEmpty(val) ? [] :
-                            val.map(sp => ({name: sp.value}))
-                    })}
-                    isMulti={true}/>
-
-                <div className="row">
-                    <div className="row-item">
-                        <span className="label standalone">{I18n.t("appAccess.allowDeny")}
-                            <Tooltip tip={I18n.t("appAccess.denyRuleTooltip")}/>
-                        </span>
-                        <SegmentedControl onClick={val => denyRuleToggle(val)}
-                                          option={policy.data.denyRule ? "deny" : "allow"}
-                                          options={["deny", "allow"]}
-                                          optionLabelResolver={option => I18n.t(`appAccess.${option}`)}/>
-                    </div>
-                    <div className="row-item">
-                        <span className="label standalone">{I18n.t("appAccess.allAttributesMatch")}
-                            <Tooltip tip={I18n.t("appAccess.allAttributesMatchTooltip")}/>
-                        </span>
-                        <SegmentedControl onClick={val => internalUpdatePolicy({allAttributesMustMatch: val === "all"})}
-                                          option={policy.data.allAttributesMustMatch ? "all" : "any"}
-                                          options={["all", "any"]}
-                                          optionLabelResolver={option => I18n.t(`appAccess.${option}`)}/>
-                    </div>
+                <label className="stand-alone">{I18n.t("policies.serviceProviders")}</label>
+                <div className="row-service-providers">
+                    <SelectField value={policy.data.serviceProvidersNegated ? negatedOptions[1] : negatedOptions[0]}
+                                 required={true}
+                                 onChange={() => internalUpdatePolicy({serviceProvidersNegated: !policy.data.serviceProvidersNegated})}
+                                 className="any-of-service-providers"
+                                 options={negatedOptions}/>
+                    <SelectField
+                        value={serviceProviderOptions.filter(option => policy.data.serviceProviderIds.some(sp => sp.name === option.value))}
+                        searchable={true}
+                        options={serviceProviderOptions}
+                        className="service-providers"
+                        placeholder={I18n.t("policies.serviceProvidersPlaceholderPolicy")}
+                        onChange={val => internalUpdatePolicy({
+                            serviceProviderIds: isEmpty(val) ? [] :
+                                val.map(sp => ({name: sp.value}))
+                        })}
+                        isMulti={true}/>
                 </div>
+
                 <span className="label standalone">{I18n.t("appAccess.filters")}</span>
                 <div className="filters">
                     {policy.data.attributes.map((attribute, index) =>
-                        <div key={index} className="attribute">
-                            <div className="attribute-name-wrapper">
-                                <SelectField name={I18n.t("appAccess.attribute")}
-                                             placeholder={I18n.t("appAccess.attributePlaceholder")}
-                                             value={allowedAttributes.find(attr => attr.value === attribute.name)}
+                        <Fragment key={index}>
+                            <div className="deletable-attribute">
+                                {index === 0 &&
+                                    <SelectField value={policy.data.denyRule ? accessOptions[1] : accessOptions[0]}
+                                                 required={true}
+                                                 className="select-access-rule"
+                                                 onChange={option => denyRuleToggle(option.value)}
+                                                 options={accessOptions}/>
+                                }
+                                {index !== 0 &&
+                                    <SelectField
+                                        value={policy.data.allAttributesMustMatch ? orOptions[0] : orOptions[1]}
+                                        required={true}
+                                        className="select-access-rule"
+                                        onChange={() => internalUpdatePolicy({allAttributesMustMatch: !policy.data.allAttributesMustMatch})}
+                                        options={orOptions}/>
+                                }
+                                <SelectField placeholder={I18n.t("appAccess.attributePlaceholder")}
+                                             value={isEmpty(attribute.name) ? null : allowedAttributes.find(attr => attr.value === attribute.name)}
                                              required={true}
+                                             className="attribute-name"
                                              onChange={option => attributeSelected(option, index)}
                                              options={policy.data.denyRule ? allowedAttributes
                                                  .filter(option => option.allowedInDenyRule) : allowedAttributes}/>
-                                {(!isEmpty(attribute.name) && !isEmpty(attribute.value)) &&
-                                    <Button type={ButtonType.Delete}
-                                            onClick={() => attributeDeleted(index)}
-                                    />
-                                }
+
+                                <SelectField value={conditionalOptions[0]}
+                                             required={true}
+                                             disabled={true}
+                                             className="conditional-options"
+                                             options={conditionalOptions}/>
+
+                                <SelectField value={attribute.value}
+                                             creatable={true}
+                                             required={true}
+                                             className="attribute-value"
+                                             error={!initial && isEmpty(attribute.value)}
+                                             placeholder={I18n.t("appAccess.permittedValuesPlaceholder")}
+                                             onChange={values => attributeValueChanged(values, index)}
+                                />
+                                <Button type={ButtonType.Delete}
+                                        onClick={() => attributeDeleted(index)}
+                                />
                             </div>
-                            <SelectField name={I18n.t("appAccess.permittedValues")}
-                                         value={attribute.value}
-                                         creatable={true}
-                                         required={true}
-                                         error={!initial && isEmpty(attribute.value)}
-                                         placeholder={I18n.t("appAccess.permittedValuesPlaceholder")}
-                                         onChange={values => attributeValueChanged(values, index)}
-                            />
                             {!isEmpty(attributeValueErrors[attribute.name]) &&
                                 <ErrorIndicator adjustMargin={false}
                                                 msg={I18n.t("appAccess.attributeValueErrors",
@@ -251,18 +268,19 @@ export const PolicyForm = ({
                                                             attributeValueErrors[attribute.name].map(val => `'${val}'`),
                                                             I18n.t("forms.and"))
                                                     })}/>}
-                        </div>)}
-                    {policy.data.attributes.every(attribute => attribute.name && !isEmpty(attribute.value)) &&
-                        <div className="add-attribute-container">
-                            <SelectField placeholder={I18n.t("appAccess.addAttributePlaceholder")}
-                                         value={null}
-                                         onChange={option => attributeAdded(option)}
-                                         options={policy.data.denyRule ? allowedAttributes
-                                             .filter(option => option.allowedInDenyRule) : allowedAttributes}/>
-                        </div>
-                    }
+                        </Fragment>)}
+                    {(!initial && policy.data.attributes.filter(attr => !isEmpty(attr.name) && !isEmpty(attr.value)).length === 0) &&
+                        <ErrorIndicator msg={I18n.t("policies.attributesRequired")}/>}
+                    <div className="add-attribute-container">
+                        <SelectField placeholder={I18n.t("appAccess.addAttributePlaceholder")}
+                                     value={null}
+                                     onChange={option => attributeAdded(option)}
+                                     options={policy.data.denyRule ? allowedAttributes
+                                         .filter(option => option.allowedInDenyRule) : allowedAttributes}/>
+                    </div>
 
                 </div>
+
                 <InputField name={I18n.t("appAccess.denyEn")}
                             value={policy.data.denyAdvice}
                             required={true}
diff --git a/client/src/policies/PolicyForm.scss b/client/src/policies/PolicyForm.scss
diff --git a/client/src/policies/PolicyOverview.jsx b/client/src/policies/PolicyOverview.jsx
diff --git a/client/src/utils/Policy.js b/client/src/utils/Policy.js
