Fix [Project settings] Fix members tab display logic (#2073)

mlrun · Dec 4, 2023 · ed36032 · ed36032
1 parent 9e5c5f3
commit ed36032
Show file tree

Hide file tree

Showing 6 changed files with 51 additions and 12 deletions.
diff --git a/src/api/projects-iguazio-api.js b/src/api/projects-iguazio-api.js
@@ -53,7 +53,8 @@ const projectsIguazioApi = {
     return iguazioHttpClient.post('/async_transactions', data)
   },
   getScrubbedUsers: config => iguazioHttpClient.get('/scrubbed_users', config),
-  getScrubbedUserGroups: config => iguazioHttpClient.get('/scrubbed_user_groups', config)
+  getScrubbedUserGroups: config => iguazioHttpClient.get('/scrubbed_user_groups', config),
+  getActiveUser: () => iguazioHttpClient.get('/self')
 }
 
 export default projectsIguazioApi
diff --git a/src/components/ProjectSettings/ProjectSettings.js b/src/components/ProjectSettings/ProjectSettings.js
@@ -30,7 +30,14 @@ import ContentMenu from '../../elements/ContentMenu/ContentMenu'
 import { setNotification } from '../../reducers/notificationReducer'
 import projectsIguazioApi from '../../api/projects-iguazio-api'
 import { PROJECTS_SETTINGS_MEMBERS_TAB, PROJECTS_SETTINGS_SECRETS_TAB } from '../../constants'
-import { COMPLETED_STATE, generateMembers, page, tabs, validTabs } from './projectSettings.util'
+import {
+  COMPLETED_STATE,
+  generateMembers,
+  isProjectMembersTabShown,
+  page,
+  tabs,
+  validTabs
+} from './projectSettings.util'
 import { isProjectValid } from '../../utils/handleRedirect'
 import {
   initialMembersState,
@@ -53,6 +60,10 @@ const ProjectSettings = ({ frontendSpec, projectStore }) => {
     () => frontendSpec?.feature_flags?.project_membership === 'enabled',
     [frontendSpec]
   )
+  const projectMembersTabIsShown = useMemo(
+    () => isProjectMembersTabShown(projectMembershipIsEnabled, membersState),
+    [membersState, projectMembershipIsEnabled]
+  )
 
   const fetchProjectIdAndOwner = useCallback(() => {
     return projectsIguazioApi
@@ -108,6 +119,14 @@ const ProjectSettings = ({ frontendSpec, projectStore }) => {
         setProjectMembersIsShown(false)
       })
   }
+  const fetchActiveUser = () => {
+    projectsIguazioApi.getActiveUser().then(response => {
+      membersDispatch({
+        type: membersActions.SET_ACTIVE_USER,
+        payload: response.data.data
+      })
+    })
+  }
   const fetchProjectOwnerVisibility = project => {
     projectsIguazioApi
       .getProjectOwnerVisibility(project)
@@ -124,6 +143,7 @@ const ProjectSettings = ({ frontendSpec, projectStore }) => {
       fetchProjectOwnerVisibility(params.projectName)
       fetchProjectIdAndOwner()
         .then(projectId => {
+          fetchActiveUser()
           fetchProjectMembersVisibility(params.projectName)
 
           return fetchProjectMembers(projectId)
@@ -215,9 +235,9 @@ const ProjectSettings = ({ frontendSpec, projectStore }) => {
           activeTab={params.pageTab}
           location={location}
           screen={page}
-          tabs={tabs(projectMembershipIsEnabled)}
+          tabs={tabs(projectMembersTabIsShown)}
         />
-        {params.pageTab === PROJECTS_SETTINGS_MEMBERS_TAB && projectMembershipIsEnabled ? (
+        {params.pageTab === PROJECTS_SETTINGS_MEMBERS_TAB && projectMembersTabIsShown ? (
           <ProjectSettingsMembers
             changeMembersCallback={changeMembersCallback}
             loading={membersState.loading}

diff --git a/src/components/ProjectSettings/projectSettings.util.js b/src/components/ProjectSettings/projectSettings.util.js
@@ -122,3 +122,17 @@ export const generateMembers = (membersResponse, membersDispatch) => {
     payload: members
   })
 }
+
+export const isProjectMembersTabShown = (
+  projectMembershipIsEnabled,
+  { activeUser, members, projectInfo }
+) => {
+  if (!projectMembershipIsEnabled) {
+    return false
+  }
+
+  const userIsAdmin = members.some(member => member.role === 'Admin' && member.id === activeUser.id)
+  const userIsOwner = activeUser.id === projectInfo.owner.id
+
+  return userIsOwner || userIsAdmin
+}
diff --git a/src/elements/MembersPopUp/membersReducer.js b/src/elements/MembersPopUp/membersReducer.js
@@ -20,6 +20,7 @@ such restriction.
 import { groupBy } from 'lodash'
 
 /*
+ * - activeUser               : logged in user data
  * - projectInfo              : additional information about the project such as ID and Owner of the project
  *                              (data is received from iguazio API).
  * - projectAuthorizationRoles: the list of modification roles (Admin, Editor, Viewer). Each of them contains the list
@@ -34,6 +35,7 @@ import { groupBy } from 'lodash'
  * - groupedVisibleMembers    : grouped members list by their role, which is used to generate the request body.
  * */
 export const initialMembersState = {
+  activeUser: {},
   projectInfo: {
     id: '',
     owner: {
@@ -57,6 +59,7 @@ export const membersActions = {
   GET_PROJECT_USERS_DATA_BEGIN: 'GET_PROJECT_USERS_DATA_BEGIN',
   GET_PROJECT_USERS_DATA_END: 'GET_PROJECT_USERS_DATA_END',
   RESET_MEMBERS_STATE: 'RESET_MEMBERS_STATE',
+  SET_ACTIVE_USER: 'SET_ACTIVE_USER',
   SET_MEMBERS: 'SET_MEMBERS',
   SET_MEMBERS_ORIGINAL: 'SET_MEMBERS_ORIGINAL',
   SET_PROJECT_AUTHORIZATION_ROLES: 'SET_PROJECT_AUTHORIZATION_ROLES',
@@ -81,6 +84,11 @@ export const membersReducer = (state, { type, payload }) => {
         ...state,
         loading: false
       }
+    case membersActions.SET_ACTIVE_USER:
+      return {
+        ...state,
+        activeUser: payload
+      }
     case membersActions.SET_MEMBERS:
       return {
         ...state,

diff --git a/src/elements/ProjectSettingsGeneral/projectSettingsGeneral.scss b/src/elements/ProjectSettingsGeneral/projectSettingsGeneral.scss
@@ -1,8 +1,8 @@
 @import '~igz-controls/scss/colors';
 @import '~igz-controls/scss/mixins';
+@import '../../scss/main.scss';
 
 .settings {
-  @import '../../scss/main.scss';
   &__artifact-path,
   &__goals,
   &__description,

diff --git a/src/elements/ProjectSettingsMembers/ProjectSettingsMembers.js b/src/elements/ProjectSettingsMembers/ProjectSettingsMembers.js
@@ -35,8 +35,7 @@ const ProjectSettingsMembers = ({
   projectMembersIsShown,
   setNotification
 }) => {
-  const totalMembersInProject =
-    membersState.users.length + membersState.userGroups.length
+  const totalMembersInProject = membersState.users.length + membersState.userGroups.length
   return (
     <div className="settings__card">
       {loading ? (
@@ -48,11 +47,8 @@ const ProjectSettingsMembers = ({
               <span className="settings__members-summary_icon">
                 <Users />
               </span>
-              <span className="settings__members-summary_amount">
-                {totalMembersInProject}
-              </span>
-              member{totalMembersInProject !== 1 ? 's have' : ' has'} access to
-              this project
+              <span className="settings__members-summary_amount">{totalMembersInProject}</span>
+              {totalMembersInProject !== 1 ? 'members have' : 'member has'} access to this project
             </div>
             {projectMembersIsShown && (
               <MembersPopUp