WIP for Connection Request

Author: oharsta

client/src/App.jsx

@@ -45,19 +45,20 @@ const App = () => {
 
     const [loading, setLoading] = useState(true);
     const [isAuthenticated, setIsAuthenticated] = useState(false);
-    const impersonator= useAppStore(state => state.impersonator);
+    const impersonator = useAppStore(state => state.impersonator);
     const navigate = useNavigate();
     const currentLocation = useLocation();
 
     const refreshUser = () => {
-        me().then(user => {
-            const currentOrganization = useAppStore.getState().currentOrganization
-            const newMenuItems = menuItemsForUser(user, currentOrganization);
-            useAppStore.setState(() => ({
-                user: user,
-                menuItems: newMenuItems
-            }))
-        })
+        me()
+            .then(user => {
+                const currentOrganization = useAppStore.getState().currentOrganization
+                const newMenuItems = menuItemsForUser(user, currentOrganization);
+                useAppStore.setState(() => ({
+                    user: user,
+                    menuItems: newMenuItems
+                }))
+            })
     }
 
     useEffect(() => {
@@ -136,13 +137,14 @@ const App = () => {
                             <Route path="/system/:tab?" element={<System/>}/>
                             <Route path="/profile" element={<Profile setIsAuthenticated={setIsAuthenticated}/>}/>
                             <Route path="/external/:app?" element={<ExternalApplication/>}/>
-                            <Route path="/application-detail/:manageType/:manageId" element={<ApplicationDetail anonymous={false}/>}/>
+                            <Route path="/application-detail/:manageType/:manageId"
+                                   element={<ApplicationDetail anonymous={false} refreshUser={refreshUser}/>}/>
                             <Route path="/refresh-route/:path" element={<RefreshRoute/>}/>
                             <Route path="/feedback" element={<Feedback/>}/>
                             <Route path="/idp/:organizationId" element={<MyOrganization refreshUser={refreshUser}/>}/>
                             <Route path="/authentication-switch" element={<AuthenticationSwitch/>}/>
-                            <Route path="/accessible-apps" element={<ApplicationOverview accessible={true} />}/>
-                            <Route path="/catalogue" element={<ApplicationOverview accessible={false} />}/>
+                            <Route path="/accessible-apps" element={<ApplicationOverview accessible={true}/>}/>
+                            <Route path="/catalogue" element={<ApplicationOverview accessible={false}/>}/>
                             <Route path="*" element={<NotFound/>}/>
                         </Routes>
                     </div>
@@ -160,7 +162,8 @@ const App = () => {
                         <Route path="/connect" element={<Connect/>}/>
                         <Route path="/applications" element={<Applications/>}/>
                         <Route path="/login-info" element={<LoginInfo/>}/>
-                        <Route path="/application-detail/:manageType/:manageId" element={<ApplicationDetail anonymous={true}/>}/>
+                        <Route path="/application-detail/:manageType/:manageId"
+                               element={<ApplicationDetail anonymous={true}/>}/>
                         <Route path="/authentication-switch" element={<AuthenticationSwitch/>}/>
                         <Route path="/*" element={<LoginRedirect/>}/>
                     </Routes>

client/src/components/InfoBlock.jsx

@@ -0,0 +1,12 @@
+import React from "react";
+
+import "./InfoBlock.scss"
+
+export const InfoBlock = ({children, className = ""}) => {
+
+    return (
+        <div className={`info-block ${className}`}>
+            {children}
+        </div>
+    );
+}

client/src/components/InfoBlock.scss

@@ -0,0 +1,56 @@
+@use "../styles/vars" as *;
+@use "../index";
+
+.info-block {
+    border-radius: 10px;
+    border: 1px solid var(--sl-color-green-200);
+    padding: 24px;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 10px;
+    background-color: var(--sl-color-green-100);
+
+    h3 {
+        margin-bottom: 15px;
+    }
+
+    h5 {
+        margin-top: 8px;
+    }
+
+    p.strong {
+        font-weight: 600;
+    }
+
+    .sds--divider {
+        margin: auto 0 10px 0;
+
+        &.largest {
+            margin-top: 20px;
+        }
+    }
+
+    .sds--btn.sds--btn--ghost--light {
+        background-color: black;
+        color: white;
+
+        &:hover {
+            background-color: white;
+            color: black;
+        }
+    }
+
+    &.grey {
+        background-color: var(--sl-color-grey-100);
+        border: 1px solid var(--sds--color--gray--300);
+    }
+
+    &.full-row {
+        grid-column: 1 / -1;
+        background: white;
+        border: 1px solid var(--sds--color--gray--200);
+    }
+
+}
+

client/src/icons/no_access.svg

@@ -184,6 +184,8 @@ const en = {
         team: "My Team",
         joins: "Join Requests",
         invitations: "Invitations",
+        access: "Access",
+        information: "App information"
     },
     joinRequest: {
         info: "Je hebt geen toegang tot de omgeving van <strong>{{name}}</strong>. Je kunt toegang vragen aan de beheerder.",
@@ -977,6 +979,7 @@ const en = {
         name: "App",
         vendor: "Vendor",
         connectRequested: "Requested",
+        connectionMade: "Connected",
         status: "Status",
         created: "Date connected",
         searchPlaceHolder: "Search...",
@@ -996,9 +999,6 @@ const en = {
         surfLink: "https://surf.nl",
         select_locale: "Select your preferred language"
     },
-    appAccess: {
-        roleBasedAccess: "🥸 Toegang verloopt op basis van uitnodiging voor een rol"
-    },
     profile: {
         title: "Profile",
         info: "Your account was created on {{createdAt}}",
@@ -1029,7 +1029,7 @@ const en = {
         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",
+            all: "Iedereen van de {{orgName}} heeft direct automatisch toegang",
             some: "Pas toegangsregels toe"
         },
         memberRequestInfo: [
@@ -1043,7 +1043,23 @@ const en = {
             makeConnection: "Application access has been set",
             requestConnection: "Application access is requested"
         }
+    },
+    appAccess: {
+        title: "Central Access",
+        users: "User from {{name}}",
+        config: "⚡️Configureer automatische toegang op basis van kenmerken",
+        accessFor: "There is access for:",
+        everyBody: "Everybody from {{name}}",
+        noAccessFor: "Geen toegang voor:",
+        noOneGroups: "There are no groups excluded from access",
+        outSideUsers: "Users from outside",
+        roleBasedAccess: "🥸 Toegang verloopt op basis van uitnodiging voor een rol",
+        noOneRole: "There are users yet from outside with a role",
+        roleManagement: "To role management",
+        decentralAccess: "Decentral Access",
+        noDecentralAccess: "This application <span class='red'>is not used</span> by collaborative groups."
     }
+
 }
 
 export default en;

client/src/locale/en.js

@@ -3,7 +3,16 @@ import React, {useEffect, useState} from "react";
 import {connectServiceProviderToIdentityProvider, publicServiceProviderByDetail} from "../api/index.js";
 import I18n from "../locale/I18n.js";
 import {useNavigate, useParams} from "react-router-dom";
-import {Button, ButtonIconPlacement, ButtonType, Loader, RadioOptions, RadioOptionsOrientation} from "@surfnet/sds";
+import {
+    Button,
+    ButtonIconPlacement,
+    ButtonType,
+    Chip,
+    ChipType,
+    Loader,
+    RadioOptions,
+    RadioOptionsOrientation
+} 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";
@@ -21,6 +30,7 @@ import ConfirmationDialog from "../components/ConfirmationDialog.jsx";
 import {authorities} from "../utils/Permissions.js";
 import InputField from "../components/InputField.jsx";
 import {mainMenuItems} from "../utils/MenuItems.js";
+import {TabHeader} from "../components/TabHeader.jsx";
 
 const confirmationModalOptions = {
     makeConnection: "makeConnection",
@@ -30,7 +40,9 @@ const confirmationModalOptions = {
     requestDisconnectConnection: "requestDisconnectConnection",
 }
 
-const ApplicationDetail = ({anonymous}) => {
+const tabNames = ["access", "information"]
+
+const ApplicationDetail = ({anonymous, refreshUser}) => {
 
         const {arp, privacy, user, setFlash} = useAppStore(useShallow(state => ({
             arp: state.arp,
@@ -40,8 +52,10 @@ const ApplicationDetail = ({anonymous}) => {
         })));
 
         const navigate = useNavigate();
-        const {manageType, manageId} = useParams();
+        const [refresh, setRefresh] = useState(-1);
+        const {manageType, manageId, tab = "access"} = useParams();
 
+        const [currentTab, setCurrentTab] = useState(tab);
         const [loading, setLoading] = useState(true);
         const [serviceProvider, setServiceProvider] = useState([]);
         const [showAttributes, setShowAttributes] = useState(false);
@@ -83,7 +97,7 @@ const ApplicationDetail = ({anonymous}) => {
                         breadcrumbPaths: [
                             {path: "/home", value: I18n.t("breadCrumb.access"), menuItemName: mainMenuItems.home},
                             {
-                                path: isAccessible ? "/accessibleApps" : "/catalogue",
+                                path: isAccessible ? "/accessible-apps" : "/catalogue",
                                 value: I18n.t(`navigation.${isAccessible ? "accessibleApps" : "catalogue"}`)
                             },
                             {value: providerName(I18n.locale, res)}
@@ -101,7 +115,7 @@ const ApplicationDetail = ({anonymous}) => {
                 .catch(() => {
                     navigate("/404");
                 });
-        }, [user]);// eslint-disable-line react-hooks/exhaustive-deps
+        }, [user, refresh]);// eslint-disable-line react-hooks/exhaustive-deps
 
         if (loading) {
             return <Loader/>
@@ -238,10 +252,52 @@ const ApplicationDetail = ({anonymous}) => {
 
         const {open, cancel, action, question, title, okButton} = confirmation;
 
+        const renderCurrentTab = () => {
+            switch (currentTab) {
+                case  "access": {
+                    return renderAccessApp();
+                }
+                case  "information": {
+                    return <span>TODO</span>;
+                }
+                default:
+                    throw new Error(`Unknown tab; ${currentTab}`)
+            }
+        }
+
+        const tabChanged = name => {
+            setCurrentTab(name);
+        }
+
+        const renderAccessApp = () => {
+            return <span>TODO renderAccessApp</span>;
+        }
+
         const renderAccessibleApp = () => {
             return (
                 <>
-                    <p>readOnly {readOnly.toString()}</p>
+                    <div className="application-detail-header-container">
+                        <TabHeader tab={currentTab}
+                                   setTab={tabChanged}
+                                   tabNames={tabNames}
+                        >
+                            <div className="application-card-container">
+                                <div className="application-card">
+                                    {metaData["logo:0:url"] && <img src={metaData["logo:0:url"]} alt=""/>}
+                                    {!metaData["logo:0:url"] && <PlaceHolderImage/>}
+                                    <div className="provider-details">
+                                        <h3>{providerName(I18n.locale, serviceProvider)}</h3>
+                                        <p>{providerDescription(I18n.locale, serviceProvider)}</p>
+                                    </div>
+                                </div>
+                                <Chip type={readOnly ? ChipType.Status_error : ChipType.Status_info}
+                                      label={I18n.t(`accessibleApps.${readOnly ? "connectRequested" : "connectionMade"}`)}/>
+                            </div>
+                        </TabHeader>
+                    </div>
+                    <div className="application-detail-page">
+                        {renderCurrentTab()}
+                    </div>
                 </>
             )
         }

client/src/pages/ApplicationDetail.jsx

@@ -16,6 +16,7 @@ div.application-detail-container {
             background-color: var(--sds--color--gray--background);
             border-radius: 6px;
         }
+
         h3 {
             margin-bottom: 20px;
         }
@@ -48,6 +49,36 @@ div.application-detail-container {
         }
     }
 
+    .application-card-container {
+        display: flex;
+        align-items: flex-start;
+        gap: 25px;
+    }
+
+    .application-card {
+        display: flex;
+        background: white;
+        border: 1px solid #EAECF0;
+        border-radius: 10px;
+        gap: 15px;
+        padding: 30px;
+        width: 70%;
+        @media (max-width: $medium) {
+            width: 100%;
+        }
+
+        img, svg {
+            width: 80px;
+            height: 80px;
+        }
+    }
+
+    .application-detail-page {
+        background-color: white;
+        height: 100%;
+        padding: 25px 50px;
+    }
+
     .inner-application-detail-container {
         width: 100%;
         background-color: white;

client/src/pages/ApplicationDetail.scss

@@ -171,9 +171,13 @@ const ApplicationOverview = ({accessible}) => {
             {
                 key: "name",
                 header: I18n.t("accessibleApps.name"),
-                mapper: entity => <div className="app-name">
-                    {entity.name}{entity.connectionRequest && <Chip type={ChipType.Status_error}
-                                                                    label={I18n.t("accessibleApps.connectRequested")}/>}</div>
+                mapper: entity => entity.name
+            },
+            {
+                key: "connectionRequest",
+                header: "",
+                mapper: entity => entity.connectionRequest && <Chip type={ChipType.Status_error}
+                                                                    label={I18n.t("accessibleApps.connectRequested")}/>
             },
             {
                 key: "vendor",
@@ -184,6 +188,12 @@ const ApplicationOverview = ({accessible}) => {
                 key: "created",
                 header: I18n.t("accessibleApps.created"),
                 mapper: entity => formatLongDate(entity.created, true, false)
+            },
+            {
+                key: "space",
+                nonSortable: true,
+                header: "",
+                mapper: () => null
             }
         ];