fix: Shows "Identities" nav element as disabled for users without rel…

…evant permission (#2813)
Flagsmith · Sep 29, 2023 · 3ec2f6b · 3ec2f6b · vercel · Sep 29, 2023
1 parent 7c3c341
commit 3ec2f6b
Show file tree

Hide file tree

Showing 2 changed files with 20 additions and 4 deletions.
diff --git a/frontend/web/components/Aside.js b/frontend/web/components/Aside.js
@@ -13,6 +13,7 @@ import Permission from 'common/providers/Permission'
 import Icon from './Icon'
 import ProjectSelect from './ProjectSelect'
 import AsideProjectButton from './AsideProjectButton'
+import Constants from 'common/constants'
 
 const Aside = class extends Component {
   static displayName = 'Aside'
@@ -484,21 +485,32 @@ const Aside = class extends Component {
                                                     </span>
                                                   ) : null}
                                                 </NavLink>
-                                                {manageIdentityPermission && (
+                                                {Utils.renderWithPermission(
+                                                  manageIdentityPermission,
+                                                  Constants.environmentPermissions(
+                                                    'View Identities',
+                                                  ),
                                                   <NavLink
                                                     id='users-link'
-                                                    className='aside__environment-list-item mt-1'
+                                                    className={`aside__environment-list-item ${
+                                                      !manageIdentityPermission &&
+                                                      'disabled'
+                                                    } mt-1`}
                                                     exact
                                                     to={`/project/${project.id}/environment/${environment.api_key}/users`}
                                                   >
                                                     <span className='mr-2'>
                                                       <Icon
                                                         name='people'
-                                                        fill='#9DA4AE'
+                                                        fill={
+                                                          manageIdentityPermission
+                                                            ? '#9DA4AE'
+                                                            : '#696969'
+                                                        }
                                                       />
                                                     </span>
                                                     Identities
-                                                  </NavLink>
+                                                  </NavLink>,
                                                 )}
 
                                                 {environmentAdmin && (

diff --git a/frontend/web/styles/project/_utils.scss b/frontend/web/styles/project/_utils.scss
@@ -144,6 +144,10 @@
         background-color: rgba(0,0,0,.2);
     }
 }
+.aside__environment-list-item.disabled {
+    color:#696969;
+    pointer-events: none;
+  }
 
 .justify-content-end {
     justify-content: flex-end;