Merge branch 'master' into rca-link

2023-12-13 18:38:31 +05:30
parent 7e9d61299c 42c4c89077
commit fd15e60e95
4 changed files with 74 additions and 62 deletions
--- 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);
    }
-  }, [searchParams.toString()]);
+    if (pageSizeParam) {
+      setPageSize(Number(pageSizeParam));
+    } else {
+      searchParams.set('page_size', '10');
+      setPageSize(10);
+    }
+    const searchParam = searchParams.toString();
+    updateURLAndFetchData(searchParam);
+  }, [searchParams]);

  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()}
    </div>
  );
--- a/src/Pages/Dashboard/partials/FilterWrapper.tsx
+++ b/src/Pages/Dashboard/partials/FilterWrapper.tsx
@@ -50,12 +50,12 @@ const FilterWrapper: FC<FilterWrapperProps> = ({
      });
  }, []);

-  const isFilterCountPresent = (): boolean => filterCount !== 0;
+  const isFilterCountPresent = (): boolean => filterCount > 2;

  const returnFilterCount = (): JSX.Element | null => {
    return isFilterCountPresent() ? (
      <Typography as="span" variant="p3" color={styles.filterSelectedIndicated}>
-        {filterCount}
+        {filterCount - 2}
      </Typography>
    ) : null;
  };
--- a/src/Pages/Incidents/DescriptionContent/index.tsx
+++ b/src/Pages/Incidents/DescriptionContent/index.tsx
@@ -292,9 +292,10 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
                  color="var(--navi-color-gray-c2)"
                  className={styles['typo-style']}
                >
-                  {state.jiraLinks?.length || 0} linked tickets&nbsp;&nbsp;
+                  {state.jiraLinks?.filter(link => link !== '').length || 0}{' '}
+                  linked tickets&nbsp;&nbsp;
                </Typography>
-                {state.jiraLinks?.length > 0 && (
+                {state.jiraLinks?.filter(link => link !== '').length > 0 && (
                  <>
                    {state.showLinkedTickets && (
                      <ArrowUpSolidIcon width={8} height={8} />
@@ -322,39 +323,41 @@ const DescriptionContent: React.FC<DescriptionContentProps> = ({
            <div>
              {state.showLinkedTickets && (
                <div>
-                  {state.jiraLinks?.map((jiraLink, index) => (
-                    <div key={index} className={styles['link-row-style']}>
-                      <div>
-                        <div className={styles['jira-link-row']}>
-                          <a
-                            href={jiraLink}
-                            target="_blank"
-                            rel="noreferrer"
-                            className={styles['jira-link']}
-                          >
-                            <Typography
-                              variant="h4"
-                              color="var(--navi-color-blue-base)"
+                  {state.jiraLinks
+                    .filter(jiraLink => jiraLink !== '')
+                    ?.map((jiraLink, index) => (
+                      <div key={index} className={styles['link-row-style']}>
+                        <div>
+                          <div className={styles['jira-link-row']}>
+                            <a
+                              href={jiraLink}
+                              target="_blank"
+                              rel="noreferrer"
+                              className={styles['jira-link']}
                            >
-                              {truncateText(jiraLink)}
-                            </Typography>
-                          </a>
+                              <Typography
+                                variant="h4"
+                                color="var(--navi-color-blue-base)"
+                              >
+                                {truncateText(jiraLink)}
+                              </Typography>
+                            </a>
+                          </div>
+                        </div>
+                        &nbsp;&nbsp;
+                        <div className={styles['copyicon-style']}>
+                          <CopyIcon onClick={() => handleCopyClick(jiraLink)} />
+                        </div>
+                        <div className={styles['deleteicon-style']}>
+                          <DeleteIconOutlined
+                            onClick={() => handleDeleteIconClick(jiraLink)}
+                            width={20}
+                            height={20}
+                            color="var(--navi-color-gray-c3)"
+                          />
                        </div>
                      </div>
-                      &nbsp;&nbsp;
-                      <div className={styles['copyicon-style']}>
-                        <CopyIcon onClick={() => handleCopyClick(jiraLink)} />
-                      </div>
-                      <div className={styles['deleteicon-style']}>
-                        <DeleteIconOutlined
-                          onClick={() => handleDeleteIconClick(jiraLink)}
-                          width={20}
-                          height={20}
-                          color="var(--navi-color-gray-c3)"
-                        />
-                      </div>
-                    </div>
-                  ))}
+                    ))}
                </div>
              )}
            </div>
--- a/src/Pages/Incidents/Header/index.tsx
+++ b/src/Pages/Incidents/Header/index.tsx
@@ -16,7 +16,7 @@ interface HeaderProps {
 const Header: FC<HeaderProps> = ({ incidentName, title }) => {
  const navigate = useNavigate();
  const handleBacktoDashboard = (): void => {
-    navigate('../');
+    navigate(-1);
  };
  return (
    <div>