toggleable usergroup list

City-of-Helsinki · May 27, 2024 · 0261d0e · 0261d0e
1 parent 5856ee1
commit 0261d0e
Show file tree

Hide file tree

Showing 4 changed files with 50 additions and 31 deletions.
diff --git a/src/app/App.js b/src/app/App.js
@@ -63,12 +63,14 @@ type Props = {
 type State = {
   displaySideMenu: boolean,
   loggedIn: boolean,
+  displayUserGroups: boolean,
 };
 
 class App extends Component<Props, State> {
   state = {
     displaySideMenu: false,
     loggedIn: false,
+    displayUserGroups: false,
   }
 
   timerID: any
@@ -164,6 +166,12 @@ class App extends Component<Props, State> {
     });
   };
 
+  toggleDisplayUserGroups = () => {
+    this.setState({
+      displayUserGroups: !this.state.displayUserGroups,
+    });
+  }
+
   handleDismissErrorModal = () => {
     this.props.closeReveal('apiError');
     this.props.clearError();
@@ -183,7 +191,7 @@ class App extends Component<Props, State> {
       userActiveServiceUnit,
       userServiceUnits,
     } = this.props;
-    const {displaySideMenu} = this.state;
+    const {displaySideMenu, displayUserGroups} = this.state;
     const appStyle = (IS_DEVELOPMENT_URL) ? 'app-dev' : 'app';
 
     if (isEmpty(user) || isEmpty(apiToken)) {
@@ -272,11 +280,25 @@ class App extends Component<Props, State> {
                   pageTitle={pageTitle}
                   showSearch={showSearch}
                   toggleSideMenu={this.toggleSideMenu}
-                  userGroups={userGroups}
+                  toggleDisplayUserGroups={this.toggleDisplayUserGroups}
                   username={get(user, 'profile.name')}
                   userServiceUnits={userServiceUnits}
                   userActiveServiceUnit={userActiveServiceUnit}
                 />
+                {displayUserGroups &&
+                  <section className="app__usergroup-list">
+                    <strong>Käyttäjäryhmät ja palvelukokonaisuudet</strong>
+                    {userGroups && userGroups.length > 1 &&
+                      userGroups.map((group, index) => {
+                        return (
+                          <p className="usergroup-list-item" key={group}>
+                            {group}
+                          </p>
+                        );
+                      })}
+                  </section>
+                }
+
 
                 <section className="app__content">
                   <SideMenu

diff --git a/src/app/_app.scss b/src/app/_app.scss
@@ -14,6 +14,21 @@
     }
   }
 
+  &__usergroup-list {
+    position: absolute;
+    top: rem-calc(60px);
+    right: 0;
+    z-index: 1060;
+    background-color: white;
+    padding: rem-calc(8px) rem-calc(16px);
+    box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.06);
+
+    .usergroup-list-item {
+      line-height: 1;
+      margin: rem-calc(8px) 0;
+    }
+  }
+
   &__content {
     flex: 1;
     display: flex;

diff --git a/src/components/topNavigation/TopNavigation.js b/src/components/topNavigation/TopNavigation.js
@@ -15,6 +15,7 @@ import {getSearchQuery, getUrlParams} from '$util/helpers';
 import {getRouteById, Routes} from '$src/root/routes';
 
 import type {UserGroups, UserServiceUnit, UserServiceUnits} from '$src/usersPermissions/types';
+import InfoIcon from "$components/icons/InfoIcon";
 
 type Props = {
   history: Object,
@@ -25,7 +26,7 @@ type Props = {
   pageTitle: string,
   showSearch: boolean,
   toggleSideMenu: Function,
-  userGroups: UserGroups,
+  toggleDisplayUserGroups: Function,
   userActiveServiceUnit: UserServiceUnit,
   userServiceUnits: UserServiceUnits;
   username: string,
@@ -88,6 +89,7 @@ class TopNavigation extends Component<Props, State> {
       userActiveServiceUnit,
       userServiceUnits,
       username,
+      toggleDisplayUserGroups
     } = this.props;
     const {search} = this.state;
 
@@ -207,7 +209,7 @@ class TopNavigation extends Component<Props, State> {
 
                 <div className="username-wrapper">
                   <p className="username">
-                    {username}{!!userGroups && !!userGroups.length && ` (${userGroups.join(', ')})`}
+                    {username} <button onClick={toggleDisplayUserGroups}><InfoIcon className="user-group-icon" /></button>
                   </p>
                   <button className='logout-link' onClick={handleLogout}>Kirjaudu ulos</button>
                 </div>

diff --git a/src/components/topNavigation/_top-navigation.scss b/src/components/topNavigation/_top-navigation.scss
@@ -74,33 +74,7 @@
   &__right-wrapper {
     display: flex;
     align-items: center;
-
-    .user-icon-wrapper {
-      position: relative;
-      line-height: 1;
-
-      .userIcon {
-        margin: 0;
-        width: 30px;
-        height: 30px;
-      }
-
-      .badge {
-        position: absolute;
-        font-family: $font-family-source;
-        font-size: rem-calc(12px);
-        min-width: rem-calc(20px);
-        padding: rem-calc(4px);
-        color: $white;
-        font-weight: 600;
-        text-align: center;
-        border-radius: 50%;
-        background-color: $red;
-        top: rem-calc(-3px);
-        right: rem-calc(-10px);
-      }
-    }
-
+
     .username-wrapper {
       line-height: 1;
       margin-left: 20px;
@@ -111,6 +85,10 @@
         margin: 0;
         font-weight: 500;
         font-size: rem-calc(16px);
+
+        .user-group-icon g {
+          fill: #0078C0;
+        }
       }
 
       .logout-link {
@@ -179,4 +157,6 @@
       font-weight: 500;
     }
   }
+
+
 }