EPMRPP-92003 || Organization Users page

app/src/common/constants/permissions.js

@@ -106,8 +106,8 @@ export const PERMISSIONS_MAP = {
   },
   [MEMBER]: {
     [VIEWER]: {
-      [ACTIONS.SEE_SETTINGS]: true,
-      [ACTIONS.SEE_MEMBERS]: true,
+      [ACTIONS.SEE_SETTINGS]: false,
+      [ACTIONS.SEE_MEMBERS]: false,
     },
     [EDITOR]: {
       [ACTIONS.SEE_SETTINGS]: true,

app/src/common/urls.js

@@ -129,6 +129,8 @@ export const URLS = {
     `${urlCommonBase}organizations${getQueryParams(preferencesObj)}`,
   organizationProjects: (organizationId, preferencesObj = {}) =>
     `${urlCommonBase}organizations/${organizationId}/projects${getQueryParams(preferencesObj)}`,
+  organizationUsers: (organizationId, preferencesObj = {}) =>
+    `${urlCommonBase}organizations/${organizationId}/users${getQueryParams(preferencesObj)}`,
 
   projectByName: (projectKey) => `${urlBase}project/${projectKey}`,
   project: (ids = []) => `${urlBase}project?ids=${ids.join(',')}`,

app/src/controllers/organizations/index.js

@@ -17,5 +17,9 @@
 export { FETCH_ORGANIZATIONS } from './constants';
 export { fetchOrganizationsAction } from './actionCreators';
 export { organizationsReducer } from './reducer';
-export { organizationsListSelector, organizationsListLoadingSelector } from './selectors';
+export {
+  organizationsListSelector,
+  organizationsListLoadingSelector,
+  querySelector,
+} from './selectors';
 export { organizationsSagas } from './sagas';

app/src/controllers/organizations/organization/reducer.js

@@ -18,6 +18,7 @@ import { combineReducers } from 'redux';
 import { fetchReducer } from 'controllers/fetch';
 import { loadingReducer } from 'controllers/loading';
 import { queueReducers } from 'common/utils';
+import { usersReducer } from 'controllers/organizations/users/reducer';
 import { projectsReducer } from '../projects/reducer';
 import { FETCH_ORGANIZATION_BY_SLUG, SET_ACTIVE_ORGANIZATION } from './constants';
 
@@ -41,4 +42,5 @@ export const organizationReducer = combineReducers({
   ),
   organizationLoading: loadingReducer(FETCH_ORGANIZATION_BY_SLUG),
   projects: projectsReducer,
+  users: usersReducer,
 });

app/src/controllers/organizations/projects/index.js

@@ -20,12 +20,7 @@ export {
   navigateToProjectSectionAction,
 } from './actionCreators';
 export { projectsReducer } from './reducer';
-export {
-  projectsPaginationSelector,
-  projectsSelector,
-  loadingSelector,
-  querySelector,
-} from './selectors';
+export { projectsPaginationSelector, projectsSelector, loadingSelector } from './selectors';
 export { projectsSagas } from './sagas';
 export {
   DEFAULT_LIMITATION,

app/src/controllers/organizations/projects/sagas.js

@@ -24,7 +24,7 @@ import { ERROR_CODES } from 'controllers/instance/projects/constants';
 import { fetchOrganizationBySlugAction } from '../organization';
 import { activeOrganizationSelector } from '../organization/selectors';
 import { fetchOrganizationProjectsAction } from './actionCreators';
-import { querySelector } from './selectors';
+import { querySelector } from '../selectors';
 import { CREATE_PROJECT, FETCH_ORGANIZATION_PROJECTS, NAMESPACE } from './constants';
 
 function* fetchOrganizationProjects({ payload: organizationId }) {

app/src/controllers/organizations/projects/selectors.js

@@ -14,37 +14,10 @@
  * limitations under the License.
  */
 
-import { createSelector } from 'reselect';
-import { createQueryParametersSelector } from 'controllers/pages';
-import { SORTING_ASC } from 'controllers/sorting';
-import { getAlternativePaginationAndSortParams, PAGE_KEY, SIZE_KEY } from 'controllers/pagination';
-import { SORTING_KEY, DEFAULT_PAGINATION } from './constants';
 import { organizationSelector } from '../organization/selectors';
 
 const domainSelector = (state) => organizationSelector(state).projects || {};
 
 export const projectsPaginationSelector = (state) => domainSelector(state).pagination;
 export const projectsSelector = (state) => domainSelector(state).projects;
 export const loadingSelector = (state) => domainSelector(state).loading || false;
-
-export const createOrganizationProjectsParametersSelector = ({
-  defaultPagination,
-  defaultSorting,
-  sortingKey,
-} = {}) =>
-  createSelector(
-    createQueryParametersSelector({
-      defaultPagination,
-      defaultSorting,
-      sortingKey,
-    }),
-    ({ [SIZE_KEY]: limit, [SORTING_KEY]: sort, [PAGE_KEY]: pageNumber, ...rest }) => {
-      return { ...getAlternativePaginationAndSortParams(sort, limit, pageNumber), ...rest };
-    },
-  );
-
-export const querySelector = createOrganizationProjectsParametersSelector({
-  defaultPagination: DEFAULT_PAGINATION,
-  defaultDirection: SORTING_ASC,
-  sortingKey: SORTING_KEY,
-});

app/src/controllers/organizations/sagas.js

@@ -19,6 +19,7 @@ import { URLS } from 'common/urls';
 import { showDefaultErrorNotification } from 'controllers/notification';
 import { fetchDataAction } from 'controllers/fetch';
 import { organizationSagas } from 'controllers/organizations/organization/sagas';
+import { usersSagas } from './users';
 import { FETCH_ORGANIZATIONS, NAMESPACE } from './constants';
 import { projectsSagas } from './projects';
 
@@ -35,5 +36,5 @@ function* watchFetchOrganizations() {
 }
 
 export function* organizationsSagas() {
-  yield all([watchFetchOrganizations(), organizationSagas(), projectsSagas()]);
+  yield all([watchFetchOrganizations(), organizationSagas(), projectsSagas(), usersSagas()]);
 }

app/src/controllers/organizations/selectors.js

@@ -14,8 +14,33 @@
  * limitations under the License.
  */
 
+import { createSelector } from 'reselect';
+import { createQueryParametersSelector } from 'controllers/pages';
+import { getAlternativePaginationAndSortParams, PAGE_KEY, SIZE_KEY } from 'controllers/pagination';
+import { SORTING_KEY } from 'controllers/organizations/projects';
+import { DEFAULT_PAGINATION } from 'controllers/organizations/projects/constants';
+import { SORTING_ASC } from 'controllers/sorting';
+
 export const organizationsSelector = (state) => state.organizations || {};
 
 export const organizationsListSelector = (state) => organizationsSelector(state).list || [];
 
 export const organizationsListLoadingSelector = (state) => organizationsSelector(state).listLoading;
+
+export const createParametersSelector = ({ defaultPagination, defaultSorting, sortingKey } = {}) =>
+  createSelector(
+    createQueryParametersSelector({
+      defaultPagination,
+      defaultSorting,
+      sortingKey,
+    }),
+    ({ [SIZE_KEY]: limit, [SORTING_KEY]: sort, [PAGE_KEY]: pageNumber, ...rest }) => {
+      return { ...getAlternativePaginationAndSortParams(sort, limit, pageNumber), ...rest };
+    },
+  );
+
+export const querySelector = createParametersSelector({
+  defaultPagination: DEFAULT_PAGINATION,
+  defaultDirection: SORTING_ASC,
+  sortingKey: SORTING_KEY,
+});

app/src/controllers/organizations/users/actionCreators.js

@@ -0,0 +1,29 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { FETCH_ORGANIZATION_USERS, PREPARE_ACTIVE_ORGANIZATION_USERS } from './constants';
+
+export const prepareActiveOrganizationUsersAction = (payload) => ({
+  type: PREPARE_ACTIVE_ORGANIZATION_USERS,
+  payload,
+});
+
+export const fetchOrganizationUsersAction = (params) => {
+  return {
+    type: FETCH_ORGANIZATION_USERS,
+    payload: params,
+  };
+};

app/src/controllers/organizations/users/constants.js

@@ -0,0 +1,19 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export const FETCH_ORGANIZATION_USERS = 'fetchOrganizationUsers';
+export const PREPARE_ACTIVE_ORGANIZATION_USERS = 'prepareActiveOrganizationUsers';
+export const NAMESPACE = 'organizationUsers';

app/src/controllers/organizations/users/index.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+export { NAMESPACE, FETCH_ORGANIZATION_USERS } from './constants';
+export {
+  prepareActiveOrganizationUsersAction,
+  fetchOrganizationUsersAction,
+} from './actionCreators';
+export { usersPaginationSelector, usersSelector, loadingSelector } from './selectors';
+export { usersSagas } from './sagas';

app/src/controllers/organizations/users/reducer.js

@@ -0,0 +1,37 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { combineReducers } from 'redux';
+import { fetchReducer } from 'controllers/fetch';
+import { alternativePaginationReducer } from 'controllers/pagination';
+import { loadingReducer } from 'controllers/loading';
+import { createPageScopedReducer } from 'common/utils/createPageScopedReducer';
+import { ORGANIZATION_USERS_PAGE } from 'controllers/pages/constants';
+import { NAMESPACE } from './constants';
+import { initialPaginationState } from '../projects/constants';
+
+export const usersFetchReducer = fetchReducer(NAMESPACE, {
+  contentPath: 'items',
+  initialState: [],
+});
+
+export const reducer = combineReducers({
+  pagination: alternativePaginationReducer(NAMESPACE, initialPaginationState),
+  loading: loadingReducer(NAMESPACE),
+  users: usersFetchReducer,
+});
+
+export const usersReducer = createPageScopedReducer(reducer, ORGANIZATION_USERS_PAGE);

app/src/controllers/organizations/users/sagas.js

@@ -0,0 +1,59 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { createFetchPredicate, fetchDataAction } from 'controllers/fetch';
+import { URLS } from 'common/urls';
+import { all, put, select, take, takeEvery } from 'redux-saga/effects';
+import { activeOrganizationSelector } from 'controllers/organizations/organization';
+import { FETCH_ORGANIZATION_BY_SLUG } from 'controllers/organizations/organization/constants';
+import { fetchOrganizationUsersAction } from 'controllers/organizations/users/actionCreators';
+import {
+  FETCH_ORGANIZATION_USERS,
+  NAMESPACE,
+  PREPARE_ACTIVE_ORGANIZATION_USERS,
+} from './constants';
+import { querySelector } from '../selectors';
+
+function* fetchOrganizationUsers({ payload: organizationId }) {
+  const query = yield select(querySelector);
+
+  yield put(fetchDataAction(NAMESPACE)(URLS.organizationUsers(organizationId, { ...query })));
+}
+
+function* watchFetchUsers() {
+  yield takeEvery(FETCH_ORGANIZATION_USERS, fetchOrganizationUsers);
+}
+
+function* prepareActiveOrganizationUsers({ payload: { organizationSlug } }) {
+  let activeOrganization = yield select(activeOrganizationSelector);
+  try {
+    if (!activeOrganization || organizationSlug !== activeOrganization?.slug) {
+      yield take(createFetchPredicate(FETCH_ORGANIZATION_BY_SLUG));
+      activeOrganization = yield select(activeOrganizationSelector);
+    }
+    yield put(fetchOrganizationUsersAction(activeOrganization.id));
+  } catch (error) {
+    throw new Error(error);
+  }
+}
+
+function* watchFetchOrganizationUsers() {
+  yield takeEvery(PREPARE_ACTIVE_ORGANIZATION_USERS, prepareActiveOrganizationUsers);
+}
+
+export function* usersSagas() {
+  yield all([watchFetchUsers(), watchFetchOrganizationUsers()]);
+}

app/src/controllers/organizations/users/selectors.js

@@ -0,0 +1,23 @@
+/*
+ * Copyright 2024 EPAM Systems
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+import { organizationSelector } from '../organization/selectors';
+
+const domainSelector = (state) => organizationSelector(state).users || {};
+
+export const usersPaginationSelector = (state) => domainSelector(state).pagination;
+export const usersSelector = (state) => domainSelector(state).users;
+export const loadingSelector = (state) => domainSelector(state).loading || false;

app/src/controllers/pages/constants.js

@@ -33,7 +33,7 @@ export const PLUGIN_UI_EXTENSION_ADMIN_PAGE = 'PLUGIN_UI_EXTENSION_ADMIN_PAGE';
 // inside
 export const API_PAGE = 'API_PAGE';
 export const ORGANIZATION_PROJECTS_PAGE = 'ORGANIZATION_PROJECTS_PAGE';
-export const ORGANIZATION_MEMBERS_PAGE = 'ORGANIZATION_MEMBERS_PAGE';
+export const ORGANIZATION_USERS_PAGE = 'ORGANIZATION_USERS_PAGE';
 export const ORGANIZATION_SETTINGS_PAGE = 'ORGANIZATION_SETTINGS_PAGE';
 export const PROJECT_PAGE = 'PROJECT_PAGE';
 export const PROJECT_DASHBOARD_PAGE = 'PROJECT_DASHBOARD_PAGE';
@@ -72,6 +72,7 @@ export const PROJECT_PLUGIN_PAGE = 'PROJECT_PLUGIN_PAGE';
 export const pageNames = {
   [NOT_FOUND]: NOT_FOUND,
   ORGANIZATION_PROJECTS_PAGE,
+  ORGANIZATION_USERS_PAGE,
   PROJECTS_PAGE,
   PROJECT_DETAILS_PAGE,
   ALL_USERS_PAGE,

app/src/controllers/pages/index.js

@@ -93,7 +93,7 @@ export {
   PLUGIN_UI_EXTENSION_ADMIN_PAGE,
   PROJECT_PLUGIN_PAGE,
   ORGANIZATION_PROJECTS_PAGE,
-  ORGANIZATION_MEMBERS_PAGE,
+  ORGANIZATION_USERS_PAGE,
   ORGANIZATION_SETTINGS_PAGE,
 } from './constants';
 export { NOT_FOUND } from 'redux-first-router';

app/src/layouts/organizationLayout/organizationSidebar/organizationSidebar.jsx

@@ -23,7 +23,7 @@ import { useIntl } from 'react-intl';
 import { canSeeMembers } from 'common/utils/permissions';
 import {
   ORGANIZATION_PROJECTS_PAGE,
-  ORGANIZATION_MEMBERS_PAGE,
+  ORGANIZATION_USERS_PAGE,
   ORGANIZATION_SETTINGS_PAGE,
   PROJECTS_PAGE,
   USER_PROFILE_PAGE_ORGANIZATION_LEVEL,
@@ -74,7 +74,7 @@ export const OrganizationSidebar = ({ onClickNavBtn }) => {
         onClick: (isSidebarCollapsed) =>
           onClickButton({ itemName: messages.users.defaultMessage, isSidebarCollapsed }),
         link: {
-          type: ORGANIZATION_MEMBERS_PAGE,
+          type: ORGANIZATION_USERS_PAGE,
           payload: { organizationSlug },
         },
         icon: MembersIcon,