From 1e9ca5f0d88be0677ef80d58d49f145586ab0df4 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Sun, 10 Dec 2023 17:20:30 +0530 Subject: [PATCH 1/4] TP-50753 | url based pagination added --- src/Pages/Dashboard/index.tsx | 61 +++++++++++-------- .../Dashboard/partials/FilterWrapper.tsx | 4 +- 2 files changed, 37 insertions(+), 28 deletions(-) diff --git a/src/Pages/Dashboard/index.tsx b/src/Pages/Dashboard/index.tsx index b0f0b03..58fe5c2 100644 --- a/src/Pages/Dashboard/index.tsx +++ b/src/Pages/Dashboard/index.tsx @@ -1,7 +1,8 @@ import { FC, useState, useEffect, useRef } from 'react'; - +import { useDispatch, useSelector } from 'react-redux'; +import { useSearchParams, useNavigate } from 'react-router-dom'; import { toast } from '@navi/web-ui/lib/primitives/Toast/index'; - +import { setDashboardData } from '@src/slices/dashboardSlice'; import FallbackComponent from '@src/components/Fallback'; import { ApiService } from '@src/services/api'; import useClickStream from '@src/services/clickStream'; @@ -10,13 +11,11 @@ import { FETCH_INCIDENTS_DATA } from './constants'; import SearchResultsTable from './partials/SearchResultsTable'; import DashboardHeader from './partials/DashboardHeader'; import styles from './Dashboard.module.scss'; -import { useDispatch, useSelector } from 'react-redux'; -import { setDashboardData } from '@src/slices/dashboardSlice'; -import { useSearchParams } from 'react-router-dom'; const Dashboard: FC = () => { const data = useSelector((state: any) => state.dashboard.data); const dispatch = useDispatch(); + const navigate = useNavigate(); const [pageDetails, setPageDetails] = useState({ pageNumber: 0, pageSize: 10, @@ -63,43 +62,54 @@ const Dashboard: FC = () => { }, []); useEffect(() => { - // persist filters on window reload - const searchParam = searchParams.toString(); - if (searchParam) { - searchParamRef.current = `${searchParam}&`; - startIncidentSearch(`${searchParam}&${pageNumberRef.current}`); + const pageNumberParam = searchParams.get('page_number'); + const pageSizeParam = searchParams.get('page_size'); + if (pageNumberParam) { + setPageNumber(Number(pageNumberParam)); } else { - startIncidentSearch(); + searchParams.set('page_number', '0'); + setPageNumber(0); } + if (pageSizeParam) { + setPageSize(Number(pageSizeParam)); + } else { + searchParams.set('page_size', '10'); + setPageSize(10); + } + const searchParam = searchParams.toString(); + updateURLAndFetchData(searchParam); }, [searchParams.toString()]); const handlePageNumber = (pageNumber: number): void => { - const finalParams = `page_number=${ - pageNumber - 1 - }&page_size=${currentPageSize}`; - setPageNumber(pageNumber - 1); - pageNumberRef.current = `page_number=${ - pageNumber - 1 - }&page_size=${currentPageSize}`; - startIncidentSearch(`${searchParamRef.current}${finalParams}`); + searchParams.set('page_number', (pageNumber - 1).toString()); + const updatedQuery = searchParams.toString(); + updateURLAndFetchData(updatedQuery); }; const handlePageSize = (pageSize: number): void => { - const finalParams = `page_number=0&page_size=${pageSize}`; - setPageSize(pageSize); - pageNumberRef.current = `page_number=0&page_size=${pageSize}`; - startIncidentSearch(`${searchParamRef.current}${finalParams}`); + searchParams.set('page_size', pageSize.toString()); + const updatedQuery = searchParams.toString(); + updateURLAndFetchData(updatedQuery); }; const fetchIncidentData = (props: any): void => { const { filterQuery = '', isDrawer = false } = props; - const finalParams = filterQuery ? `${filterQuery}&` : ''; + const finalParams = filterQuery ? `${filterQuery}` : ''; setPageNumber(0); searchParamRef.current = finalParams; pageNumberRef.current = `page_number=${ isDrawer ? currentPageNumber : '0' }&page_size=${currentPageSize}`; - startIncidentSearch(`${finalParams}${pageNumberRef.current}`); + startIncidentSearch(`${finalParams}`); + }; + + const updateURLAndFetchData = (updatedQuery: string) => { + navigate({ + search: updatedQuery, + }); + fetchIncidentData({ + filterQuery: updatedQuery, + }); }; const returnTable = (): JSX.Element => { @@ -126,7 +136,6 @@ const Dashboard: FC = () => { fetchIncidentData={fetchIncidentData} startIncidentSearch={startIncidentSearch} /> - {returnTable()} ); diff --git a/src/Pages/Dashboard/partials/FilterWrapper.tsx b/src/Pages/Dashboard/partials/FilterWrapper.tsx index 90a743e..b809f37 100644 --- a/src/Pages/Dashboard/partials/FilterWrapper.tsx +++ b/src/Pages/Dashboard/partials/FilterWrapper.tsx @@ -50,12 +50,12 @@ const FilterWrapper: FC = ({ }); }, []); - const isFilterCountPresent = (): boolean => filterCount !== 0; + const isFilterCountPresent = (): boolean => filterCount > 2; const returnFilterCount = (): JSX.Element | null => { return isFilterCountPresent() ? ( - {filterCount} + {filterCount - 2} ) : null; }; From 1d4aea9cd32764698510637555107c01a830dbb2 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Mon, 11 Dec 2023 09:51:57 +0530 Subject: [PATCH 2/4] TP-50753 | back btn functionality update --- src/Pages/Incidents/Header/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/Incidents/Header/index.tsx b/src/Pages/Incidents/Header/index.tsx index 0c16459..a260302 100644 --- a/src/Pages/Incidents/Header/index.tsx +++ b/src/Pages/Incidents/Header/index.tsx @@ -16,7 +16,7 @@ interface HeaderProps { const Header: FC = ({ incidentName, title }) => { const navigate = useNavigate(); const handleBacktoDashboard = (): void => { - navigate('../'); + navigate(-1); }; return (
From 4e8f1e2e9fda73a6019214a048ccb50998d8c30e Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Mon, 11 Dec 2023 10:15:22 +0530 Subject: [PATCH 3/4] TP-50753 | minor fix --- src/Pages/Dashboard/index.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Pages/Dashboard/index.tsx b/src/Pages/Dashboard/index.tsx index 58fe5c2..75e3c1d 100644 --- a/src/Pages/Dashboard/index.tsx +++ b/src/Pages/Dashboard/index.tsx @@ -78,7 +78,7 @@ const Dashboard: FC = () => { } const searchParam = searchParams.toString(); updateURLAndFetchData(searchParam); - }, [searchParams.toString()]); + }, [searchParams]); const handlePageNumber = (pageNumber: number): void => { searchParams.set('page_number', (pageNumber - 1).toString()); From 265b572d4403b3d426a4c0814b3fc7f4e21fe2be Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Wed, 13 Dec 2023 11:43:59 +0530 Subject: [PATCH 4/4] TP-51191 | added check for empty strings in the jira links --- .../Incidents/DescriptionContent/index.tsx | 67 ++++++++++--------- 1 file changed, 35 insertions(+), 32 deletions(-) diff --git a/src/Pages/Incidents/DescriptionContent/index.tsx b/src/Pages/Incidents/DescriptionContent/index.tsx index 4f1a4db..6387f29 100644 --- a/src/Pages/Incidents/DescriptionContent/index.tsx +++ b/src/Pages/Incidents/DescriptionContent/index.tsx @@ -268,9 +268,10 @@ const DescriptionContent: React.FC = ({ color="var(--navi-color-gray-c2)" className={styles['typo-style']} > - {state.jiraLinks?.length || 0} linked tickets   + {state.jiraLinks?.filter(link => link !== '').length || 0}{' '} + linked tickets   - {state.jiraLinks?.length > 0 && ( + {state.jiraLinks?.filter(link => link !== '').length > 0 && ( <> {state.showLinkedTickets && ( @@ -298,39 +299,41 @@ const DescriptionContent: React.FC = ({
{state.showLinkedTickets && (
- {state.jiraLinks?.map((jiraLink, index) => ( -
-
-
- - jiraLink !== '') + ?.map((jiraLink, index) => ( +
+
+
+ - {truncateText(jiraLink)} - - + + {truncateText(jiraLink)} + + +
+
+    +
+ handleCopyClick(jiraLink)} /> +
+
+ handleDeleteIconClick(jiraLink)} + width={20} + height={20} + color="var(--navi-color-gray-c3)" + />
-    -
- handleCopyClick(jiraLink)} /> -
-
- handleDeleteIconClick(jiraLink)} - width={20} - height={20} - color="var(--navi-color-gray-c3)" - /> -
-
- ))} + ))}
)}