EPMRPP-90984 || Filter projects

app/src/common/constants/localization.js

@@ -31,6 +31,10 @@ export const COMMON_LOCALE_KEYS = defineMessages({
     id: 'Common.cancel',
     defaultMessage: 'Cancel',
   },
+  APPLY: {
+    id: 'Common.apply',
+    defaultMessage: 'Apply',
+  },
   RENAME: {
     id: 'Common.rename',
     defaultMessage: 'Rename',

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)}`,
+  filterOrganizationProjects: (organizationId) =>
+    `${urlCommonBase}organizations/${organizationId}/projects/searches`,
   organizationUsers: (organizationId, preferencesObj = {}) =>
     `${urlCommonBase}organizations/${organizationId}/users${getQueryParams(preferencesObj)}`,
   projectDelete: ({ organizationId, projectId }) =>

app/src/components/filterEntities/containers/filterEntitiesURLContainer.jsx

@@ -24,7 +24,6 @@
 const FilterEntitiesURL = ({
   entities = {},
   updateFilters = () => {},
-  render,
   debounced = true,
   debounceTime = 1000,
   defaultPagination,
@@ -43,15 +42,70 @@
     [entities, defaultPagination, prefixQueryKey, updateFilters],
   );
 
   const debouncedHandleChange = useCallback(debounce(handleChange, debounceTime), [
     handleChange,
     debounceTime,
   ]);
 
-  return render({
+  return {
     entities,
     onChange: debounced ? debouncedHandleChange : handleChange,
+  };
+};
+
+const filterEntitiesURLForContainer = ({
+  entities = {},
+  updateFilters = () => {},
+  debounced = true,
+  debounceTime = 1000,
+  defaultPagination,
+  prefixQueryKey,
+  render,
+}) => {
+  const filterEntitiesURLParams = FilterEntitiesURL({
+    entities,
+    updateFilters,
+    debounced,
+    debounceTime,
+    defaultPagination,
+    prefixQueryKey,
   });
+  return render(filterEntitiesURLParams);
+};
+
+export const withFilterEntitiesURL = (namespace, prefixQueryKey) => (WrappedComponent) => {
+  const filterEntitiesURL = (props) => {
+    const {
+      entities,
+      defaultPagination,
+      updateFilters,
+      debounced,
+      debounceTime,
+      ...restProps
+    } = props;
+
+    const { entities: filteredEntities, onChange } = FilterEntitiesURL({
+      entities,
+      updateFilters,
+      debounced,
+      debounceTime,
+      defaultPagination,
+      prefixQueryKey,
+    });
+
+    return <WrappedComponent {...restProps} entities={filteredEntities} onChange={onChange} />;
+  };
+
+  return connectRouter(
+    (query) => ({
+      entities: collectFilterEntities(query, prefixQueryKey),
+      defaultPagination: defaultPaginationSelector(),
+    }),
+    {
+      updateFilters: (query, page) => ({ ...query, [PAGE_KEY]: page }),
+    },
+    { namespace },
+  )(filterEntitiesURL);
 };
 
 FilterEntitiesURL.propTypes = {
@@ -73,6 +127,6 @@
     {
       updateFilters: (query, page) => ({ ...query, [PAGE_KEY]: page }),
     },
-  )(FilterEntitiesURL);
+  )(filterEntitiesURLForContainer);
 
 export const FilterEntitiesURLContainer = createFilterEntitiesURLContainer();

app/src/components/filterEntities/containers/index.js

@@ -15,4 +15,4 @@
  */
 
 export { FilterEntitiesContainer } from './filterEntitiesContainer';
-export { FilterEntitiesURLContainer } from './filterEntitiesURLContainer';
+export { FilterEntitiesURLContainer, withFilterEntitiesURL } from './filterEntitiesURLContainer';

app/src/components/filterEntities/entityItemStartTime.jsx

@@ -31,7 +31,7 @@ const endOfToday = moment()
 export const getTimeDateRangePresets = (tracking, events) => [
   {
     label: (
-      <div onClick={() => tracking.trackEvent(events.getChosenDate('Today'))}>
+      <div onClick={() => tracking?.trackEvent(events?.getChosenDate('Today'))}>
         <FormattedMessage id="EntityItemStartTime.today" defaultMessage="Today" />
       </div>
     ),

app/src/controllers/instance/events/utils.js

@@ -57,5 +57,7 @@ export const getAppliedFilters = (filters, projectKey) => {
     };
   });
 
-  return { search_criterias: [...appliedFilters, projectIdFilterParam] };
+  return {
+    search_criterias: [...appliedFilters, ...(projectKey ? [projectIdFilterParam] : [])],
+  };
 };

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

@@ -14,7 +14,12 @@
  * limitations under the License.
  */
 
-import { CREATE_PROJECT, DELETE_PROJECT, FETCH_ORGANIZATION_PROJECTS } from './constants';
+import {
+  CREATE_PROJECT,
+  DELETE_PROJECT,
+  FILTERED_PROJECTS,
+  FETCH_ORGANIZATION_PROJECTS,
+} from './constants';
 
 export const fetchOrganizationProjectsAction = (params) => {
   return {
@@ -32,3 +37,7 @@ export const deleteProjectAction = (project) => ({
   type: DELETE_PROJECT,
   payload: project,
 });
+
+export const fetchFilteredProjectAction = () => ({
+  type: FILTERED_PROJECTS,
+});

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

@@ -18,6 +18,7 @@ import { PAGE_KEY, SIZE_KEY } from 'controllers/pagination';
 import { formatSortingString, SORTING_ASC } from 'controllers/sorting';
 
 export const FETCH_ORGANIZATION_PROJECTS = 'fetchOrganizationProjects';
+export const FILTERED_PROJECTS = 'filteredProjects';
 export const NAMESPACE = 'organizationProjects';
 export const CREATE_PROJECT = 'createProject';
 export const DELETE_PROJECT = 'deleteProject';
@@ -53,3 +54,8 @@ export const initialPaginationState = {
 export const ERROR_CODES = {
   PROJECT_EXISTS: 4095,
 };
+
+export const LAST_RUN_DATE_FILTER_NAME = 'last_launch_occurred';
+export const LAUNCHES_FILTER_NAME = 'launches';
+export const TEAMMATES_FILTER_NAME = 'users';
+export const PROJECT_NAME_FILTER_NAME = 'name';

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

@@ -14,9 +14,14 @@
  * limitations under the License.
  */
 
-export { fetchOrganizationProjectsAction } from './actionCreators';
+export { fetchOrganizationProjectsAction, fetchFilteredProjectAction } from './actionCreators';
 export { projectsReducer } from './reducer';
-export { projectsPaginationSelector, projectsSelector, loadingSelector } from './selectors';
+export {
+  projectsPaginationSelector,
+  projectsSelector,
+  loadingSelector,
+  filterQuerySelector,
+} from './selectors';
 export { projectsSagas } from './sagas';
 export {
   DEFAULT_LIMITATION,
@@ -26,4 +31,10 @@ export {
   DEFAULT_QUERY_PARAMS,
   FETCH_ORGANIZATION_PROJECTS,
   SORTING_KEY,
+  FILTERED_PROJECTS,
+  LAST_RUN_DATE_FILTER_NAME,
+  LAUNCHES_FILTER_NAME,
+  TEAMMATES_FILTER_NAME,
+  PROJECT_NAME_FILTER_NAME,
 } from './constants';
+export { getFormattedDate } from './utils';

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

@@ -20,17 +20,20 @@ import { URLS } from 'common/urls';
 import { fetch } from 'common/utils';
 import { hideModalAction } from 'controllers/modal';
 import { NOTIFICATION_TYPES, showNotification } from 'controllers/notification';
-import { fetchOrganizationBySlugAction } from '..';
-import { querySelector } from './selectors';
-import { activeOrganizationSelector } from '../selectors';
-import { fetchOrganizationProjectsAction } from './actionCreators';
+import { getFormattedDate } from 'controllers/organization/projects/utils';
 import {
+  FILTERED_PROJECTS,
   CREATE_PROJECT,
   FETCH_ORGANIZATION_PROJECTS,
   ERROR_CODES,
   NAMESPACE,
   DELETE_PROJECT,
+  LAST_RUN_DATE_FILTER_NAME,
 } from './constants';
+import { fetchOrganizationBySlugAction } from '..';
+import { filterQuerySelector, querySelector } from './selectors';
+import { activeOrganizationIdSelector, activeOrganizationSelector } from '../selectors';
+import { fetchOrganizationProjectsAction } from './actionCreators';
 
 function* fetchOrganizationProjects({ payload: organizationId }) {
   const query = yield select(querySelector);
@@ -116,6 +119,37 @@ function* deleteProject({ payload: { projectId, projectName } }) {
 function* watchDeleteProject() {
   yield takeEvery(DELETE_PROJECT, deleteProject);
 }
+
+function* fetchFilteredProjects() {
+  const activeOrganizationId = yield select(activeOrganizationIdSelector);
+  const filtersParams = yield select(filterQuerySelector);
+  const { search_criteria: searchCriteria } = filtersParams;
+
+  const lastRunDateFilterIndex = Object.values(searchCriteria).findIndex(
+    (el) => el.filter_key === LAST_RUN_DATE_FILTER_NAME,
+  );
+  if (lastRunDateFilterIndex !== -1) {
+    searchCriteria[lastRunDateFilterIndex].value = getFormattedDate(
+      searchCriteria[lastRunDateFilterIndex].value,
+    );
+  }
+  yield put(
+    fetchDataAction(NAMESPACE)(URLS.filterOrganizationProjects(activeOrganizationId), {
+      method: 'post',
+      data: { ...filtersParams, ...searchCriteria },
+    }),
+  );
+}
+
+function* watchFetchFilteredProjects() {
+  yield takeEvery(FILTERED_PROJECTS, fetchFilteredProjects);
+}
+
 export function* projectsSagas() {
-  yield all([watchFetchProjects(), watchCreateProject(), watchDeleteProject()]);
+  yield all([
+    watchFetchProjects(),
+    watchCreateProject(),
+    watchDeleteProject(),
+    watchFetchFilteredProjects(),
+  ]);
 }

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

@@ -14,10 +14,16 @@
  * limitations under the License.
  */
 
-import { createAlternativeQueryParametersSelector } from 'controllers/pages/selectors';
+import {
+  createAlternativeQueryParametersSelector,
+  createQueryParametersSelector,
+} from 'controllers/pages/selectors';
 import { SORTING_ASC } from 'controllers/sorting';
-import { DEFAULT_PAGINATION, NAMESPACE, SORTING_KEY } from './constants';
+import { createSelector } from 'reselect';
+import { getAlternativePaginationAndSortParams, PAGE_KEY, SIZE_KEY } from 'controllers/pagination';
+import { getAppliedFilters } from 'controllers/instance/events/utils';
 import { organizationSelector } from '../selectors';
+import { DEFAULT_PAGINATION, FILTERED_PROJECTS, NAMESPACE, SORTING_KEY } from './constants';
 
 const domainSelector = (state) => organizationSelector(state).projects || {};
 
@@ -31,3 +37,31 @@ export const querySelector = createAlternativeQueryParametersSelector({
   sortingKey: SORTING_KEY,
   namespace: NAMESPACE,
 });
+
+const createFilterQuerySelector = ({
+  defaultPagination,
+  defaultSorting,
+  sortingKey,
+  namespace,
+} = {}) =>
+  createSelector(
+    createQueryParametersSelector({
+      defaultPagination,
+      defaultSorting,
+      sortingKey,
+      namespace,
+    }),
+    ({ [SIZE_KEY]: limit, [SORTING_KEY]: sort, [PAGE_KEY]: pageNumber, ...rest }) => {
+      return {
+        ...getAlternativePaginationAndSortParams(sort, limit, pageNumber),
+        search_criteria: getAppliedFilters(rest)?.search_criterias,
+      };
+    },
+  );
+
+export const filterQuerySelector = createFilterQuerySelector({
+  defaultPagination: DEFAULT_PAGINATION,
+  defaultSorting: SORTING_ASC,
+  sortingKey: SORTING_KEY,
+  namespace: FILTERED_PROJECTS,
+});

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

@@ -0,0 +1,49 @@
+/*
+ * 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 moment from 'moment/moment';
+import { getMinutesFromTimestamp } from 'common/utils';
+
+export const getFormattedDate = (value) => {
+  const utcString = moment().format('ZZ');
+  const calculateStartDate = (days) =>
+    moment()
+      .startOf('day')
+      .subtract(days - 1, 'days')
+      .valueOf();
+  const endOfToday = moment()
+    .add(1, 'days')
+    .startOf('day')
+    .valueOf();
+  let start = null;
+  switch (value) {
+    case 'today':
+      start = calculateStartDate(1);
+      break;
+    case 'last2days':
+      start = calculateStartDate(2);
+      break;
+    case 'last7days':
+      start = calculateStartDate(7);
+      break;
+    case 'last30days':
+      start = calculateStartDate(30);
+      break;
+    default:
+      break;
+  }
+  return `${getMinutesFromTimestamp(start)};${getMinutesFromTimestamp(endOfToday)};${utcString}`;
+};

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

@@ -67,6 +67,7 @@ export const OrganizationProjectsPage = () => {
 
   const isProjectsEmpty = !projectsLoading && projects.length === 0;
   const [searchValue, setSearchValue] = useState(null);
+  const [appliedFiltersCount, setAppliedFiltersCount] = useState(0);
 
   const showCreateProjectModal = () => {
     dispatch(
@@ -98,7 +99,7 @@ export const OrganizationProjectsPage = () => {
         </div>
       );
     }
-    return searchValue === null ? (
+    return searchValue === null && appliedFiltersCount === 0 ? (
       <EmptyPageState
         hasPermission={hasPermission}
         label={label}
@@ -126,6 +127,8 @@ export const OrganizationProjectsPage = () => {
           onCreateProject={showCreateProjectModal}
           searchValue={searchValue}
           setSearchValue={setSearchValue}
+          appliedFiltersCount={appliedFiltersCount}
+          setAppliedFiltersCount={setAppliedFiltersCount}
         />
         {isProjectsEmpty ? (
           getEmptyPageState()