EPMRPP-90325 || renaming & loader

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

@@ -14,14 +14,14 @@
  * limitations under the License.
  */
 
-import { FETCH_ORGANIZATION_PROJECTS, SET_ACTIVE_ORGANIZATION_NAMESPACE } from './constants';
+import { FETCH_ORGANIZATION_PROJECTS, SET_ACTIVE_ORGANIZATION } from './constants';
 
 export const fetchOrganizationProjectsAction = (payload) => ({
   type: FETCH_ORGANIZATION_PROJECTS,
   payload,
 });
 
 export const setActiveOrganizationAction = (payload) => ({
-  type: SET_ACTIVE_ORGANIZATION_NAMESPACE,
+  type: SET_ACTIVE_ORGANIZATION,
   payload,
 });

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

@@ -16,6 +16,6 @@
 
 export const PROJECTS_NAMESPACE = 'projects';
 
-export const SET_ACTIVE_ORGANIZATION_NAMESPACE = 'setActiveOrganization';
+export const SET_ACTIVE_ORGANIZATION = 'setActiveOrganization';
 
 export const FETCH_ORGANIZATION_PROJECTS = 'fetchOrganizationProjects';

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

@@ -16,11 +16,11 @@
 
 import { combineReducers } from 'redux';
 import { fetchReducer } from 'controllers/fetch';
-import { FETCH_ORGANIZATION_PROJECTS, SET_ACTIVE_ORGANIZATION_NAMESPACE } from './constants';
+import { FETCH_ORGANIZATION_PROJECTS, SET_ACTIVE_ORGANIZATION } from './constants';
 
 export const activeOrganizationReducer = (state = null, { type = '', payload = {} }) => {
   switch (type) {
-    case SET_ACTIVE_ORGANIZATION_NAMESPACE:
+    case SET_ACTIVE_ORGANIZATION:
       return payload;
     default:
       return state;

app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.jsx

@@ -19,8 +19,8 @@ import { userRolesSelector } from 'controllers/user';
 import { canCreateProject } from 'common/utils/permissions';
 import classNames from 'classnames/bind';
 import { organizationsListLoadingSelector } from 'controllers/organizations';
-import { SpinningPreloader } from 'components/preloaders/spinningPreloader';
 import { organizationProjectsSelector } from 'controllers/organizations/organization';
+import { BubblesLoader } from '@reportportal/ui-kit';
 import { ProjectsPageHeader } from './header';
 import { EmptyProjectsState } from './emptyProjectsState';
 import styles from './organizationProjectsPage.scss';
@@ -35,15 +35,17 @@ export const OrganizationProjectsPage = () => {
   const isProjectsEmpty = orgProjects.length === 0;
 
   return (
-    <>
+    <div className={cx('organization-projects-container')}>
       {organizationLoading ? (
-        <SpinningPreloader />
+        <div className={cx('loader')}>
+          <BubblesLoader />
+        </div>
       ) : (
-        <div className={cx('organization-projects-container')}>
+        <>
           <ProjectsPageHeader hasPermission={hasPermission} />
           {isProjectsEmpty && <EmptyProjectsState hasPermission={hasPermission} />}
-        </div>
+        </>
       )}
-    </>
+    </div>
   );
 };

app/src/pages/organization/organizationProjectsPage/organizationProjectsPage.scss

@@ -19,3 +19,10 @@
   flex-direction: column;
   height: 100%;
 }
+
+.loader{
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  height: 100%;
+}