EPMRPP-92003 || Organization Users page (#4031)

* EPMRPP-92003 || Organization Users page

* EPMRPP-92003 || sonar fix

* EPMRPP-95408 || code review fix -1

* EPMRPP-95408 || merge fix

* EPMRPP-92003 || code review fix -1

* EPMRPP-92003 || code review fix -2

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/componentLibrary/sidebar/sidebar.scss

@@ -42,15 +42,20 @@
   box-sizing: border-box;
   height: 100%;
   gap: 32px;
-  background-image:
-    linear-gradient(to right, $COLOR--darkmode-gray-500 0 48px,$COLOR--darkmode-gray-450 48px 100%);
+  background-image: linear-gradient(
+    to right,
+    $COLOR--darkmode-gray-500 0 48px,
+    $COLOR--darkmode-gray-450 48px 100%
+  );
   z-index: 3;
   width: 328px;
   align-items: start;
 }
 
 @keyframes delay-overflow {
-  to { overflow: visible; }
+  to {
+    overflow: visible;
+  }
 }
 
 .items-block {

app/src/componentLibrary/sidebar/sidebarButton/sidebarButton.scss

@@ -14,7 +14,7 @@
  * limitations under the License.
  */
 
- .btn-icon {
+.btn-icon {
   width: 48px;
   height: 40px;
 

app/src/components/integrations/modals/addLdapIntegrationModal/twoSteps/twoStepsContent/twoStepsContent.scss

@@ -28,7 +28,7 @@
   padding: 24px 16px;
   background-color: $COLOR--bg-000;
   border-radius: 8px;
-  box-shadow: 0 1px 3px 0 rgba(55, 67, 98, 0.10);
+  box-shadow: 0 1px 3px 0 rgba(55, 67, 98, 0.1);
 }
 
 .step {
@@ -54,6 +54,7 @@
   }
 }
 
-.scrollbars { // TODO will be replaced with new Scroll component in the future
+.scrollbars {
+  // TODO will be replaced with new Scroll component in the future
   width: 376px !important;
 }

app/src/components/integrations/modals/addLdapIntegrationModal/twoSteps/twoStepsFooter/twoStepsFooter.scss

@@ -21,7 +21,8 @@
   padding-top: 16px;
 }
 
-.cancel-button, .discard-button {
+.cancel-button,
+.discard-button {
   margin-left: auto;
 }
 

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

@@ -18,6 +18,7 @@ export { FETCH_ORGANIZATIONS } from './constants';
 export { fetchOrganizationsAction } from './actionCreators';
 export { organizationsReducer } from './reducer';
 export {
+  organizationsSelector,
   organizationsListSelector,
   organizationsListLoadingSelector,
   organizationsListPaginationSelector,

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

@@ -18,8 +18,6 @@ import { takeEvery, all, put } from 'redux-saga/effects';
 import { URLS } from 'common/urls';
 import { showDefaultErrorNotification } from 'controllers/notification';
 import { fetchDataAction } from 'controllers/fetch';
-import { organizationSagas } from 'controllers/organization';
-import { projectsSagas } from 'controllers/organization/projects';
 import { FETCH_ORGANIZATIONS, NAMESPACE } from './constants';
 
 function* fetchOrganizations() {
@@ -35,5 +33,5 @@ function* watchFetchOrganizations() {
 }
 
 export function* organizationsSagas() {
-  yield all([watchFetchOrganizations(), organizationSagas(), projectsSagas()]);
+  yield all([watchFetchOrganizations()]);
 }

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

@@ -16,12 +16,7 @@
 
 export { fetchOrganizationProjectsAction, navigateToProjectAction } 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/organization/projects/sagas.js

@@ -21,10 +21,9 @@ import { fetch } from 'common/utils';
 import { hideModalAction } from 'controllers/modal';
 import { NOTIFICATION_TYPES, showNotification } from 'controllers/notification';
 import { fetchOrganizationBySlugAction } from '..';
-import { activeOrganizationSelector } from '../selectors';
+import { activeOrganizationSelector, querySelector } from '../selectors';
 import { fetchOrganizationProjectsAction } from './actionCreators';
-import { querySelector } from './selectors';
-import { CREATE_PROJECT, ERROR_CODES, FETCH_ORGANIZATION_PROJECTS, NAMESPACE } from './constants';
+import { CREATE_PROJECT, FETCH_ORGANIZATION_PROJECTS, ERROR_CODES, NAMESPACE } from './constants';
 
 function* fetchOrganizationProjects({ payload: organizationId }) {
   const query = yield select(querySelector);

app/src/controllers/organization/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 '../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/organization/reducer.js

@@ -19,6 +19,7 @@ import { fetchReducer } from 'controllers/fetch';
 import { loadingReducer } from 'controllers/loading';
 import { queueReducers } from 'common/utils';
 import { projectsReducer } from './projects/reducer';
+import { usersReducer } from './users/reducer';
 import { FETCH_ORGANIZATION_BY_SLUG, SET_ACTIVE_ORGANIZATION } from './constants';
 
 const setActiveOrganizationReducer = (state = [], { type = '', payload = {} }) => {
@@ -41,4 +42,5 @@ export const organizationReducer = combineReducers({
   ),
   organizationLoading: loadingReducer(FETCH_ORGANIZATION_BY_SLUG),
   projects: projectsReducer,
+  users: usersReducer,
 });

app/src/controllers/organization/sagas.js

@@ -20,9 +20,10 @@ import { redirect } from 'redux-first-router';
 import { ORGANIZATIONS_PAGE } from 'controllers/pages';
 import { URLS } from 'common/urls';
 import { showDefaultErrorNotification } from 'controllers/notification';
-import { fetchOrganizationProjectsAction } from 'controllers/organization/projects';
+import { fetchOrganizationProjectsAction, projectsSagas } from './projects';
 import { FETCH_ORGANIZATION_BY_SLUG, PREPARE_ACTIVE_ORGANIZATION_PROJECTS } from './constants';
 import { activeOrganizationSelector } from './selectors';
+import { usersSagas } from './users';
 
 function* fetchOrganizationBySlug({ payload: slug }) {
   try {
@@ -58,5 +59,10 @@ function* watchFetchOrganizationBySlug() {
 }
 
 export function* organizationSagas() {
-  yield all([watchFetchOrganizationProjects(), watchFetchOrganizationBySlug()]);
+  yield all([
+    watchFetchOrganizationProjects(),
+    watchFetchOrganizationBySlug(),
+    projectsSagas(),
+    usersSagas(),
+  ]);
 }

app/src/controllers/organization/selectors.js

@@ -13,8 +13,13 @@
  * See the License for the specific language governing permissions and
  * limitations under the License.
  */
-
+import { createSelector } from 'reselect';
+import { createQueryParametersSelector } from 'controllers/pages';
+import { getAlternativePaginationAndSortParams, PAGE_KEY, SIZE_KEY } from 'controllers/pagination';
+import { SORTING_ASC } from 'controllers/sorting';
 import { organizationsSelector } from 'controllers/instance/organizations/selectors';
+import { SORTING_KEY } from './projects';
+import { DEFAULT_PAGINATION } from './projects/constants';
 
 export const organizationSelector = (state) => organizationsSelector(state).organization || {};
 
@@ -26,3 +31,21 @@ export const activeOrganizationLoadingSelector = (state) =>
 export const activeOrganizationNameSelector = (state) => activeOrganizationSelector(state)?.name;
 
 export const activeOrganizationIdSelector = (state) => activeOrganizationSelector(state)?.id;
+
+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/organization/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/organization/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/organization/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/organization/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);