Fixes #515

Author: oharsta

client/src/locale/en.js

@@ -987,6 +987,7 @@ const en = {
         name: "App",
         vendor: "Vendor",
         connectRequested: "Requested",
+        disconnectRequested: "Pending disconnect",
         connectionMade: "Connected",
         status: "Status",
         created: "Date connected",
@@ -1036,7 +1037,8 @@ const en = {
         requestMember: "Request application",
         requested: "Application requested",
         disconnect: "Disconnect",
-        disconnectRequested: "Request disconnection",
+        disconnectRequested: "Request disconnect",
+        disconnectRequestedQuestion: "In order to disconnect this application from your institution, we will create a ticket for SURF support. They will disconnect the application.",
         back: "← Back to other apps",
         defaultAccess: "How do you want to configure default access?",
         requestConnection: "A connection to this application must be approved",

client/src/pages/ApplicationDetail.jsx

@@ -29,7 +29,7 @@ import {isEmpty, stopEvent} from "../utils/Utils.js";
 import {useAppStore} from "../stores/AppStore.js";
 import {useShallow} from "zustand/react/shallow";
 import ConfirmationDialog from "../components/ConfirmationDialog.jsx";
-import {authorities, deriveAccess, hasRequestedDisconnect, isAdmin} from "../utils/Permissions.js";
+import {authorities, deriveAccess, isAdmin} from "../utils/Permissions.js";
 import InputField from "../components/InputField.jsx";
 import {mainMenuItems} from "../utils/MenuItems.js";
 import {TabHeader} from "../components/TabHeader.jsx";
@@ -78,6 +78,7 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
     const [memberRequestSend, setMemberRequestSend] = useState(false);
     const [accessible, setAccessible] = useState(false);
     const [readOnly, setReadOnly] = useState(true);
+    const [pendingDisconnect, setPendingDisconnect] = useState(true);
     const [requestedDisconnect, setRequestedDisconnect] = useState(true);
     const [showPolicyOverview, setShowPolicyOverview] = useState(false);
     const [showPolicyDetails, setShowPolicyDetails] = useState(false);
@@ -121,13 +122,12 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
                     return;
                 }
                 //See if this application is already connected
-                const {isAccessible, isReadOnly} = deriveAccess(user, res.data.entityid);
-                const isRequestedDisconnect = hasRequestedDisconnect(user, res.data.entityid);
+                const {isAccessible, isReadOnly, isPendingDisconnect} = deriveAccess(user, res.data.entityid);
                 const adminUser = isAdmin(user, authorities);
                 setAccessible(isAccessible);
                 setIsAdminUser(adminUser);
                 setReadOnly(isReadOnly);
-                setRequestedDisconnect(isRequestedDisconnect);
+                setPendingDisconnect(isPendingDisconnect);
                 //Update breadcrumb
                 useAppStore.setState({
                     breadcrumbPaths: [
@@ -362,7 +362,7 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
                 cancel: () => cancelConfirmation(),
                 action: () => doRequestDisconnection(false),
                 title: null,
-                question: null,
+                question: I18n.t("applicationConnect.disconnectRequestedQuestion"),
                 okButton: I18n.t("applicationConnect.disconnectRequested")
             });
         } else {
@@ -540,6 +540,26 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
         return renderDetailsApp();
     }
 
+    const chipTypeForConnectionStatus = () => {
+        if (readOnly) {
+            return ChipType.Status_error;
+        }
+        if (pendingDisconnect) {
+            return ChipType.Status_warning;
+        }
+        return ChipType.Status_info;
+    }
+
+    const translationForConnectionStatus = () => {
+        if (readOnly) {
+            return I18n.t("accessibleApps.connectRequested");
+        }
+        if (pendingDisconnect) {
+            return I18n.t("accessibleApps.disconnectRequested");
+        }
+        return I18n.t("accessibleApps.connectionMade");
+    }
+
     const renderAccessibleApp = () => {
         return (
             <>
@@ -558,13 +578,13 @@ const ApplicationDetail = ({anonymous, refreshUser}) => {
                                 </div>
                             </div>
                             <div className="accessible-options">
-                                <Chip type={readOnly ? ChipType.Status_error : ChipType.Status_info}
-                                      label={I18n.t(`accessibleApps.${readOnly ? "connectRequested" : "connectionMade"}`)}/>
-                                {(!readOnly && currentOrganization.manageIdentifier && isAdminUser) &&
-                                    <Button onClick={() => doRequestDisconnection(true)}
-                                            disabled={requestedDisconnect}
-                                            type={ButtonType.DestructiveSecondary}
-                                            txt={I18n.t(`applicationConnect.${requestedDisconnect ? "disconnectRequested" : "disconnect"}`)}/>}
+                                <Chip type={chipTypeForConnectionStatus()}
+                                      label={translationForConnectionStatus()}/>
+                                {(!readOnly && currentOrganization.manageIdentifier && isAdminUser && !pendingDisconnect)
+                                    && <Button onClick={() => doRequestDisconnection(true)}
+                                               type={ButtonType.DestructiveSecondary}
+                                               txt={I18n.t("applicationConnect.disconnect")}/>
+                                }
                             </div>
                         </div>
                     </TabHeader>

client/src/utils/Permissions.js

@@ -78,7 +78,7 @@ export const hasApplicationDeleteAccess = (user, application) => {
 }
 
 export const deriveAccess = (user, spEntityId) => {
-    let isAccessible = false, isReadOnly = false;
+    let isAccessible = false, isReadOnly = false, isPendingDisconnect = false;
     if (isEmpty(user.identityProvider)) {
         //External user
         return {isAccessible, isReadOnly};
@@ -94,26 +94,13 @@ export const deriveAccess = (user, spEntityId) => {
             cr.pathUpdates.allowedEntities.name === spEntityId
         );
     }
+    isPendingDisconnect = user.changeRequests.some(cr =>
+            cr.requestType === CHANGE_REQUEST_TYPE.UNLINK_REQUEST &&
+            cr.pathUpdateType === "REMOVAL" &&
+            cr.pathUpdates.allowedEntities.name === spEntityId
+        );
 
-    return {isAccessible, isReadOnly};
-}
-
-export const hasRequestedDisconnect = (user, spEntityId) => {
-    if (isEmpty(user.identityProvider)) {
-        //External user
-        return false;
-    }
-    const allowedEntities = user.identityProvider.data.allowedEntities.map(e => e.name);
-    if (allowedEntities.includes(spEntityId)) {
-        //already connected
-        return false;
-    }
-    user.changeRequests.some(cr =>
-        cr.requestType === CHANGE_REQUEST_TYPE.LINK_REQUEST &&
-        cr.pathUpdateType === "REMOVAL" &&
-        cr.pathUpdates.allowedEntities.name === spEntityId
-    );
-
+    return {isAccessible, isReadOnly, isPendingDisconnect};
 }
 
 export const isAdmin = (user, authorities) => {