Fixes #483

Author: oharsta

client/src/App.jsx

@@ -2,7 +2,7 @@ import React, {useEffect, useState} from 'react'
 import {Loader} from "@surfnet/sds";
 import './App.scss';
 import {Navigate, Route, Routes, useLocation, useNavigate} from "react-router-dom";
-import {arp, configuration, csrf, me, privacy} from "./api/index.js";
+import {allowedAttributes, arp, configuration, csrf, me, privacy} from "./api/index.js";
 import {useAppStore} from "./stores/AppStore.js";
 import {Flash} from "./components/Flash.jsx";
 import {Header} from "./components/Header.jsx";
@@ -65,12 +65,13 @@ const App = () => {
     useEffect(() => {
         csrf().then(token => {
             useAppStore.setState(() => ({csrfToken: token.token}));
-            Promise.all([configuration(), arp(), privacy()])
+            Promise.all([configuration(), arp(), privacy(), allowedAttributes()])
                 .then(res => {
                     useAppStore.setState(() => ({
                         config: res[0],
                         arp: res[1],
-                        privacy: res[2]
+                        privacy: res[2],
+                        allowedAttributes: res[3]
                     }));
                     setIsAuthenticated(res[0].authenticated);
                     if (res[0].authenticated) {

client/src/locale/en.js

@@ -1034,13 +1034,11 @@ const en = {
         request: "Request connection",
         requestMember: "Request application",
         back: "← Back to other apps",
-        defaultAccess: "Hoe wil je default toegang instellen?",
+        defaultAccessTitle: "Koppelen aan {{name}}",
         requestConnection: "Koppeling met deze applicatie moet worden aangevraagd",
         requestConnectionInfo: "De leverancier van deze applicatie ontvangt en beoordeelt de aanvraag. ",
-        access: {
-            all: "Iedereen van de {{orgName}} heeft direct automatisch toegang",
-            some: "Pas toegangsregels toe"
-        },
+        defaultAccessInfo: "Deze applicatie is direct koppelbaar, er is geen toestemming van de leverancier voor nodig.",
+        defaultAccessInfo2: "Na de koppeling kan de toegang tot de applicatie direct worden ingesteld.",
         memberRequestInfo: {
             info:"Om een applicatie gekoppelde te krijgen met het SURF Access platform, moet akkoord gegeven worden worden door de SURF Access Verantwoordelijke van de {{orgName}} organisatie.",
             subInfo:"Geef hieronder aan waarom je deze applicatie geactiveerd wil hebben. Wij versturen het bericht naar hem of haar, je ontvangt zelf ook een kopie."
@@ -1061,9 +1059,11 @@ const en = {
         cancelRequestTitle: "Cancel the request.",
         cancelRequestQuestion: "Are you sure you don't want to have access to this application? The request will be withdrawn.",
         config: "⚡️ Configure automatic access based on attributes",
+        edit: "Maintain policies",
         accessFor: "There is access for:",
-        everyBody: "Everybody from {{name}}",
-        notEveryBody: "Not everybody from {{name}}",
+        everyBody: "Everybody from {{name}} has access",
+        notEveryBody: "Automatic access is limited",
+        policies: "{{nbr}} policies active",
         noAccessFor: "No access for:",
         noOneGroups: "There are no groups excluded from access",
         groupsPresent: "There are certain groups excluded from access",
@@ -1080,10 +1080,11 @@ const en = {
         eduIDOnly: "eduID only",
         everyIdp: "any IdP",
         backToAccess: "← back to access",
-        authorizationRules: "Authorization rules for:",
+        authorizationRules: "Authorization rules",
         noPolicies: "No authorization rules have been configured yet",
         newPolicy: "New authorization rule",
         editPolicy: "Edit authorization rule",
+        new: "New policy",
         active: "Active",
         paused: "Paused",
         activate: "Activate",
@@ -1113,13 +1114,21 @@ const en = {
         denyPlaceholder: "Type your descriptive message",
         submitNew: "Save and activate",
         submitExisting: "Update",
+        breakdown: {
+            if: "If",
+            when: "When"
+        },
         flash: {
             created: "Policy {{name}} has been created and is ready for use",
             updated: "Policy {{name}} has been updated",
             deleted: "Policy {{name}} has been deleted",
+            paused: "Policy {{name}} has been paused",
+            activated: "Policy {{name}} has been activated",
         },
         confirmation: {
-            deleteQuestion: "Are you sure you want to delete this policy?"
+            deleteQuestion: "Are you sure you want to delete this policy?",
+            activateQuestion: "Are you sure you want to activate this policy?",
+            pauseQuestion: "Are you sure you want to pause this policy? The policy will no longer be evaluated.",
         }
     },
     error: {

client/src/pages/ApplicationDetail.jsx

@@ -10,18 +10,7 @@ import I18n from "../locale/I18n.js";
 import ExternalLinkIcon from "../icons/external-link.svg";
 import NotAllowedIcon from "../icons/not-allowed.svg";
 import {useNavigate, useParams} from "react-router-dom";
-import {
-    Alert,
-    AlertType,
-    Button,
-    ButtonIconPlacement,
-    ButtonType,
-    Chip,
-    ChipType,
-    Loader,
-    RadioOptions,
-    RadioOptionsOrientation
-} from "@surfnet/sds";
+import {Alert, AlertType, Button, ButtonIconPlacement, ButtonType, Chip, ChipType, Loader} from "@surfnet/sds";
 import StudentPng from "../icons/student2.png";
 import PlaceHolderImage from "@surfnet/sds/icons/placeholder-image.svg";
 import ArrowLeftIcon from "@surfnet/sds/icons/functional-icons/arrow-left-2.svg";
@@ -80,7 +69,6 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
     const [connectWithoutInteraction, setConnectWithoutInteraction] = useState(false);
     const [isAdminUser, setIsAdminUser] = useState(false);
     const [confirmation, setConfirmation] = useState({});
-    const [accessChoice, setAccessChoice] = useState("ALL");
     const [confirmationModalOption, setConfirmationModalOption] = useState(null);
     const [message, setMessage] = useState("");
     const [memberRequestSend, setMemberRequestSend] = useState(false);
@@ -103,6 +91,7 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
             }
             newCurrentPolicy.data.attributes = groupByValues([...newCurrentPolicy.data.attributes]);
         }
+        window.scrollTo({top: 0, behavior: "smooth"});
         setCurrentPolicy(newCurrentPolicy);
         setShowPolicyDetails(true);
         navigate(`/application-detail/${manageType}/${manageId}/details/${policyIdentifier}`);
@@ -223,19 +212,9 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
         if (confirmationModalOption === confirmationModalOptions.makeConnection) {
             return (
                 <div className="connect-options-container">
-                    <RadioOptions name={"access"}
-                                  label={I18n.t("applicationConnect.defaultAccess")}
-                                  value={accessChoice}
-                                  onChange={e => {
-                                      const newValue = e.target.id.replace("access_", "").toUpperCase();
-                                      setAccessChoice(newValue);
-                                  }}
-                                  isMultiple={true}
-                                  labels={["ALL", "SOME"]}
-                                  labelResolver={label => I18n.t(`applicationConnect.access.${label.toLowerCase()}`, {
-                                      orgName: providerName(I18n.locale, user.identityProvider)
-                                  })}
-                                  orientation={RadioOptionsOrientation.column}/>
+                    <h3>{I18n.t("applicationConnect.defaultAccessTitle", {name: providerName(I18n.locale, serviceProvider)})}</h3>
+                    <p>{I18n.t("applicationConnect.defaultAccessInfo")}</p>
+                    <p>{I18n.t("applicationConnect.defaultAccessInfo2")}</p>
                 </div>
             );
         } else if (confirmationModalOption === confirmationModalOptions.requestConnectionByMember) {
@@ -271,7 +250,6 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
     const cancelConfirmation = () => {
         setConfirmation({});
         setMessage("");
-        setAccessChoice("ALL")
     }
 
     const cancelConnectionRequest = (withConfirmation, e) => {
@@ -309,7 +287,7 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
                 action: () => doRequestConnection(false, newModalOption),
                 title: null,
                 question: null,
-                okButton: I18n.t(!isAdminUser ? "applicationConnect.sendMessage" : "forms.proceed")
+                okButton: I18n.t(!isAdminUser ? "applicationConnect.sendMessage" : "applicationConnect.connect")
             });
         } else {
             cancelConfirmation();
@@ -406,7 +384,6 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
                     }
                     {showPolicyOverview &&
                         <PolicyOverview
-                            serviceProvider={serviceProvider}
                             policies={policies}
                             backToAccess={e => backToAccess(e, "")}
                             policyDetails={toPolicyDetail}
@@ -427,28 +404,18 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
                                                 setShowPolicyOverview(true);
                                                 navigate(`/application-detail/${manageType}/${manageId}/overview`);
                                             }}
-                                            txt={I18n.t("forms.edit")}/>
+                                            txt={I18n.t("appAccess.edit")}/>
                                 </div>
-                                <p>{I18n.t("appAccess.accessFor")}</p>
                                 <div className="access-card large">
                                     <h4>{I18n.t(`appAccess.${isEmpty(policies) ? "everyBody" : "notEveryBody"}`,
                                         {name: providerOrganizationName(I18n.locale, serviceProvider)})}</h4>
+                                    {!isEmpty(policies) &&
+                                        <Chip type={ChipType.Status_info}
+                                              label={I18n.t("appAccess.policies", {nbr: policies.length})}
+                                              className={"policies-active"}/>
+                                    }
                                     {renderLogo(user.identityProvider.data.metaDataFields)}
                                 </div>
-                                <p>{I18n.t(`appAccess.${isEmpty(policies) ? "noAccessFor" : "accessFor"}`)}</p>
-                                {isEmpty(policies) && <>
-                                    <div className="access-card grey">
-                                        {I18n.t("appAccess.noOneGroups")}
-                                    </div>
-                                </>}
-                                {!isEmpty(policies) && <>
-                                    {policies.map((policy, index) =>
-                                        <div key={index} className="access-card large">
-                                            {policy.data.name}
-
-                                        </div>)}
-
-                                </>}
                             </InfoBlock>
                             <InfoBlock className="no-gap">
                                 <div className="grouped">

client/src/pages/ApplicationDetail.scss

@@ -285,6 +285,12 @@ div.application-detail-container {
 
         .app-access-central {
             width: 65%;
+
+            .sds--chips.policies-active {
+                margin: 0 auto;
+                background-color: var(--sl-color-warning);
+                color: white;
+            }
         }
 
         .app-access-decentral {
@@ -334,15 +340,15 @@ div.application-detail-container {
         .access-card {
             background: white;
             margin: 10px 0;
-            border: 1px solid var(--sl-color-grey-400);
+            border: 1px solid var(--sl-color-secondary-400);
             border-radius: 10px;
             display: flex;
             align-items: center;
             padding: 8px;
             width: 100%;
 
             &.grey {
-                background-color: var(--sl-color-grey-400);
+                background-color: var(--sds--color--gray--background);
                 font-style: italic;
             }
 

client/src/pages/Connection.jsx

@@ -21,6 +21,7 @@ import {AppTeamManagement} from "../application/AppTeamManagement.jsx";
 import {connectOptions, visibilities} from "../utils/Connection.js";
 import {isEmpty} from "../utils/Utils.js";
 import {mainMenuItems} from "../utils/MenuItems.js";
+import {useShallow} from "zustand/react/shallow";
 
 const tabNames = ["overview", "testing", "prod", "application", "contract", "appteam"]
 
@@ -31,7 +32,12 @@ const protocolOptions = Object.values(PROTOCOLS).map(protocol => ({
 
 export const Connection = () => {
     const {applicationId, tab = "overview", connectionId} = useParams();
-    const {user, config, arp, privacy} = useAppStore(state => state);
+    const {user, config, arp, privacy} = useAppStore(useShallow(state => ({
+        user: state.user,
+        config: state.config,
+        arp: state.arp,
+        privacy: state.privacy,
+    })));
 
     const [application, setApplication] = useState({organization: {}});
     const [profileOptions, setProfileOptions] = useState([]);
@@ -63,8 +69,11 @@ export const Connection = () => {
                 useAppStore.setState({
                     breadcrumbPaths: [
                         {path: "/home", value: I18n.t("breadCrumb.access"), menuItemName: mainMenuItems.home},
-                        {path: `/organization/${res.organization.id}`, value: I18n.t(`navigation.${mainMenuItems.yourApps}`),
-                            menuItemName: mainMenuItems.yourApps},
+                        {
+                            path: `/organization/${res.organization.id}`,
+                            value: I18n.t(`navigation.${mainMenuItems.yourApps}`),
+                            menuItemName: mainMenuItems.yourApps
+                        },
                         {value: res.name}
                     ]
                 });
@@ -252,11 +261,11 @@ export const Connection = () => {
     return (
         <div className="application-connection-container">
             <ApplicationConnectionHeader tabs={tabNames.map(name => ({
-                    name: name,
-                    disabled:
-                        (name === "prod" && !testConnectionComplete) ||
-                        (name === "application" && false) || //!testConnectionComplete) ||
-                        (name === "contract" && false)//!productionConnectionComplete)
+                name: name,
+                disabled:
+                    (name === "prod" && !testConnectionComplete) ||
+                    (name === "application" && false) || //!testConnectionComplete) ||
+                    (name === "contract" && false)//!productionConnectionComplete)
             }))}
                                          application={application}
                                          currentTab={currentTab}