From 8476618d14a6f6cc772914b6de87b5898247ab16 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Mon, 27 Nov 2023 11:13:51 +0530 Subject: [PATCH 01/28] TP-48565 | initial commit --- src/Pages/JiraDashboard/index.tsx | 7 ++++ src/assets/JiraDashboardIcon.tsx | 64 +++++++++++++++++++++++++++++++ src/components/LeftNav/index.tsx | 11 +++++- src/router.tsx | 6 +++ 4 files changed, 86 insertions(+), 2 deletions(-) create mode 100644 src/Pages/JiraDashboard/index.tsx create mode 100644 src/assets/JiraDashboardIcon.tsx diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx new file mode 100644 index 0000000..466e14f --- /dev/null +++ b/src/Pages/JiraDashboard/index.tsx @@ -0,0 +1,7 @@ +import { FC } from 'react'; + +const Tableau: FC = () => { + return
jiraDashboard
; +}; + +export default Tableau; diff --git a/src/assets/JiraDashboardIcon.tsx b/src/assets/JiraDashboardIcon.tsx new file mode 100644 index 0000000..729cf1d --- /dev/null +++ b/src/assets/JiraDashboardIcon.tsx @@ -0,0 +1,64 @@ +import React, { FC } from 'react'; + +import { IconProps } from '@navi/web-ui/lib/icons/types'; + +const JiraDashboardIcon: FC = () => { + return ( + + + + + + + + + + + + + + + + + + + ); +}; + +export default JiraDashboardIcon; diff --git a/src/components/LeftNav/index.tsx b/src/components/LeftNav/index.tsx index f8a7e0a..840cad3 100644 --- a/src/components/LeftNav/index.tsx +++ b/src/components/LeftNav/index.tsx @@ -10,11 +10,11 @@ import LeadIcon from '@navi/web-ui/lib/icons/LeadIcon'; import { NavItemType } from '@navi/web-ui/lib/components/Navbar/types'; import { Typography } from '@navi/web-ui/lib/primitives'; import { toast } from '@navi/web-ui/lib/primitives/Toast'; - +import JiraDashboardIcon from '@src/assets/JiraDashboardIcon'; import Dialog from '../Dialog'; import styles from './LeftNav.module.scss'; -import Footer from '../Footer'; import GroupIcon from '../../assets/GroupIcon'; + interface LeftNavProps { children?: React.ReactNode; } @@ -68,6 +68,13 @@ const LeftNav: React.FC = ({ children }) => { Icon: GroupIcon, handleNavigation: () => navigate('/metrics'), }, + { + itemType: 'simpleNavItem', + label: 'Jira dashboard', + route: '/jiraDashboard', + Icon: JiraDashboardIcon, + handleNavigation: () => navigate('/jiraDashboard'), + }, ]; const returnUserData = () => { diff --git a/src/router.tsx b/src/router.tsx index 3aa4847..f1c1761 100644 --- a/src/router.tsx +++ b/src/router.tsx @@ -5,6 +5,7 @@ const Incident = lazy(() => import('./Pages/Incidents/index')); const Team = lazy(() => import('./Pages/Team/index')); const Severity = lazy(() => import('./Pages/Severity/index')); const Tableau = lazy(() => import('./Pages/Tableau/index')); +const JiraDashboard = lazy(() => import('./Pages/JiraDashboard/index')); import { CustomRouteObject } from './types'; const routes: CustomRouteObject[] = [ @@ -33,6 +34,11 @@ const routes: CustomRouteObject[] = [ path: '/metrics', element: , }, + { + id: 'JIRA_DASHBOARD', + path: '/jiraDashboard', + element: , + }, ]; export default routes; From 2a7ce24047ad01ddeb170eeda4fe0099c4a83e7a Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 30 Nov 2023 11:45:21 +0530 Subject: [PATCH 02/28] TP-48565 | initial commit --- src/Pages/JiraDashboard/Dashboard.module.scss | 43 +++++ .../SearchResultsTable.module.scss | 59 +++++++ src/Pages/JiraDashboard/constants.ts | 9 ++ src/Pages/JiraDashboard/index.tsx | 117 +++++++++++++- .../partials/DashboardHeader.module.scss | 46 ++++++ .../partials/DashboardHeader.tsx | 45 ++++++ .../partials/HyperlinkCellRenderer.tsx | 25 +++ .../partials/SearchResultsTable.tsx | 148 ++++++++++++++++++ .../JiraDashboard/partials/SmartSearch.tsx | 68 ++++++++ src/slices/jiraDashboardSlice.tsx | 16 ++ src/store/index.tsx | 2 + 11 files changed, 574 insertions(+), 4 deletions(-) create mode 100644 src/Pages/JiraDashboard/Dashboard.module.scss create mode 100644 src/Pages/JiraDashboard/SearchResultsTable.module.scss create mode 100644 src/Pages/JiraDashboard/constants.ts create mode 100644 src/Pages/JiraDashboard/partials/DashboardHeader.module.scss create mode 100644 src/Pages/JiraDashboard/partials/DashboardHeader.tsx create mode 100644 src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx create mode 100644 src/Pages/JiraDashboard/partials/SearchResultsTable.tsx create mode 100644 src/Pages/JiraDashboard/partials/SmartSearch.tsx create mode 100644 src/slices/jiraDashboardSlice.tsx diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss new file mode 100644 index 0000000..691bd1e --- /dev/null +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -0,0 +1,43 @@ +.table-wrapper { + box-sizing: border-box; + padding-bottom: 24px; + margin-bottom: 70px; +} + +.dashboard-wrapper { + padding: 24px; +} + +.houston-id-wrapper { + display: flex; + align-items: center; + gap: 8px; +} + +.houston-id-wrapper { + display: flex; + align-items: center; + gap: 8px; + + .hyperlink { + color: #585757; + text-decoration: none; + transition: color 0.3s; + } + + .go-to-link-icon { + display: none; + transition: opacity 0.3s; + } + + &:hover { + .hyperlink { + color: #0276fe; + } + + .go-to-link-icon { + display: inline-block; + opacity: 1; + } + } +} diff --git a/src/Pages/JiraDashboard/SearchResultsTable.module.scss b/src/Pages/JiraDashboard/SearchResultsTable.module.scss new file mode 100644 index 0000000..342d016 --- /dev/null +++ b/src/Pages/JiraDashboard/SearchResultsTable.module.scss @@ -0,0 +1,59 @@ +.desktop-table-search-list { + & > * { + .pagination-wrapper-class { + overflow: visible; + + .incident-list-table-pagination { + border-radius: 0 0 8px 8px; + } + } + + .ag-cell-value { + overflow: visible; + } + + .ag-row { + z-index: 0; + + &:hover { + z-index: 1; + } + } + + .ag-row { + &.ag-row-focus { + z-index: 2; + } + } + + .ag-root-wrapper, + .ag-root, + .ag-body-viewport, + .ag-body-viewport-wrapper, + .ag-center-cols-clipper, + .ag-center-cols-viewport { + overflow: visible !important; + } + } +} + +.pagination-wrapper-class { + overflow: visible; + + .search-list-table-pagination { + border-radius: 0 0 8px 8px; + } +} + +.incident-search-list-table { + box-sizing: border-box; + margin-bottom: 56px; +} + +.drawer-wrapper { + width: 458px !important; +} + +:export { + sessionId: rgb(88, 87, 87); +} diff --git a/src/Pages/JiraDashboard/constants.ts b/src/Pages/JiraDashboard/constants.ts new file mode 100644 index 0000000..8eabc79 --- /dev/null +++ b/src/Pages/JiraDashboard/constants.ts @@ -0,0 +1,9 @@ +export const DashboardHeaderConstants = { + title: 'JIRA tickets', + searchTitle: 'Select date range: ', +}; + +//TO DO: Need to change the API URL +export const FETCH_JIRA_DATA = (payload: string): string => { + return `${window?.config?.BASE_API_URL}/incidents?${payload}`; +}; diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index 466e14f..6d01839 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -1,7 +1,116 @@ -import { FC } from 'react'; +import { FC, useState, useEffect, useRef } from 'react'; +import { useSearchParams } from 'react-router-dom'; +import { useDispatch, useSelector } from 'react-redux'; +import { toast } from '@navi/web-ui/lib/primitives/Toast/index'; +import FallbackComponent from '@src/components/Fallback'; +import { setJiraDashboardData } from '@src/slices/jiraDashboardSlice'; +import { ApiService } from '@src/services/api'; +import { FETCH_JIRA_DATA } from './constants'; +import SearchResultsTable from './partials/SearchResultsTable'; +import DashboardHeader from './partials/DashboardHeader'; +import styles from './Dashboard.module.scss'; -const Tableau: FC = () => { - return
jiraDashboard
; +const JiraDashboard: FC = () => { + const data = useSelector((state: any) => state.jiraDashboard.data); + const dispatch = useDispatch(); + const [pageDetails, setPageDetails] = useState({ + pageNumber: 0, + pageSize: 10, + totalElements: 0, + }); + const [isLoading, setIsLoading] = useState(false); + const [currentPageNumber, setPageNumber] = useState(0); + const [currentPageSize, setPageSize] = useState(10); + const [searchParams, setSearchParams] = useSearchParams(); + const pageNumberRef = useRef( + `page_number=${currentPageNumber}&page_size=${currentPageSize}`, + ); + const searchParamRef = useRef(''); + + const startIncidentSearch = (param = pageNumberRef.current): void => { + const endPoint = FETCH_JIRA_DATA(param); + setIsLoading(true); + ApiService.get(endPoint) + .then(response => { + setIsLoading(false); + dispatch(setJiraDashboardData(response?.data?.data)); + setPageDetails(response?.data?.pages); + }) + .catch(error => { + const toastMessage = `${ + error?.response?.data?.error?.message + ? `${error?.response?.data?.error?.message},` + : '' + }`; + setIsLoading(false); + toast.error(toastMessage); + dispatch(setJiraDashboardData([])); + }); + }; + + useEffect(() => { + const searchParam = searchParams.toString(); + if (searchParam) { + searchParamRef.current = `${searchParam}&`; + startIncidentSearch(`${searchParam}&${pageNumberRef.current}`); + } else { + startIncidentSearch(); + } + }, [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}`); + }; + + 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}`); + }; + + const fetchIncidentData = (props: any): void => { + const { filterQuery = '', isDrawer = false } = props; + const finalParams = filterQuery ? `${filterQuery}&` : ''; + setPageNumber(0); + searchParamRef.current = finalParams; + pageNumberRef.current = `page_number=${ + isDrawer ? currentPageNumber : '0' + }&page_size=${currentPageSize}`; + startIncidentSearch(`${finalParams}${pageNumberRef.current}`); + }; + + const returnTable = (): JSX.Element => { + if (isLoading) { + return ; + } + return ( +
+ +
+ ); + }; + + return ( +
+ + {returnTable()} +
+ ); }; -export default Tableau; +export default JiraDashboard; diff --git a/src/Pages/JiraDashboard/partials/DashboardHeader.module.scss b/src/Pages/JiraDashboard/partials/DashboardHeader.module.scss new file mode 100644 index 0000000..8398a69 --- /dev/null +++ b/src/Pages/JiraDashboard/partials/DashboardHeader.module.scss @@ -0,0 +1,46 @@ +.more-info-wrapper { + display: flex; + align-items: center; + gap: 12px; +} + +.filter-components-wrapper { + display: flex; + justify-content: space-between; +} + +.input-wrapper { + display: flex; + align-items: center; + width: 360px; + border-radius: 6px; + padding: 11px 0 11px 0; + &_search-title { + margin-right: 8px; + } + + &_on-error { + margin-top: -20px; + margin-right: 8px; + } + + input { + margin: 0 12px; + &:-ms-input-placeholder { + color: var(--navi-color-gray-c3) !important; + } + } +} + +.input-container { + min-width: 360px; + height: 36px; + &_disabled { + div { + cursor: not-allowed; + input { + cursor: not-allowed; + } + } + } +} diff --git a/src/Pages/JiraDashboard/partials/DashboardHeader.tsx b/src/Pages/JiraDashboard/partials/DashboardHeader.tsx new file mode 100644 index 0000000..327d06c --- /dev/null +++ b/src/Pages/JiraDashboard/partials/DashboardHeader.tsx @@ -0,0 +1,45 @@ +import { FC } from 'react'; +import { useState } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { Typography } from '@navi/web-ui/lib/primitives'; +import { DashboardHeaderConstants } from '../constants'; +import styles from './DashboardHeader.module.scss'; +import SmartSearch from './SmartSearch'; + +interface DashboardHeaderProps { + fetchIncidentData: (payload: any) => void; +} + +const DashboardHeader: FC = ({ fetchIncidentData }) => { + const { title } = DashboardHeaderConstants; + const [searchValue, setSearchValue] = useState(''); + const navigate = useNavigate(); + + const updateURLAndFetchData = (updatedQuery: string) => { + navigate({ + search: updatedQuery, + }); + fetchIncidentData({ + filterQuery: updatedQuery, + }); + }; + + return ( +
+
+ {title} +
+
+
+ +
+
+
+ ); +}; + +export default DashboardHeader; diff --git a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx new file mode 100644 index 0000000..56602e8 --- /dev/null +++ b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx @@ -0,0 +1,25 @@ +import React from 'react'; +import GoToLinkIcon from '@src/assets/GoToLinkIcon'; +import styles from '../Dashboard.module.scss'; + +//TO DO: will change once backend is ready +const HyperlinkCellRenderer = props => { + const { value } = props; + return ( +
+ + {value} + +
+ +
+
+ ); +}; + +export default HyperlinkCellRenderer; diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx new file mode 100644 index 0000000..576fa71 --- /dev/null +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -0,0 +1,148 @@ +import { FC, useState, useRef } from 'react'; +import { useNavigate } from 'react-router-dom'; +import { AgTable, Pagination } from '@navi/web-ui/lib/components'; +import { returnFormattedDate } from '@src/services/globalUtils'; +import styles from '../SearchResultsTable.module.scss'; +import cx from 'classnames'; +import HyperlinkCellRenderer from './HyperlinkCellRenderer'; + +//TO DO: will be moved to constants file +interface SearchResultTableProps { + currentPageData: any; + pageDetails: any; + currentPageSize: number; + handlePageNumberChange: (pageNumber: number) => void; + handlePageSizeChange: (pageSize: number) => void; + fetchIncidentData: (props: any) => void; +} + +const defaultColDef = { + cellStyle: { lineHeight: 2 }, + wrapText: true, + autoHeight: true, + width: 200, +}; + +const SearchResultsTable: FC = ({ + currentPageData, + pageDetails, + currentPageSize, + handlePageNumberChange, + handlePageSizeChange, + fetchIncidentData, +}) => { + const { pageNumber, totalElements } = pageDetails; + const [drawerState, setDrawerState] = useState(false); + const incidentData = useRef({}); + const navigate = useNavigate(); + + const cellStyle = { + 'text-overflow': 'ellipsis', + 'white-space': 'nowrap', + overflow: 'hidden', + }; + + const rowData = currentPageData?.map((item: any, ind: number) => { + let index = 1; + + if (pageNumber === 0) { + index = 1; + } else if (pageNumber > 0) { + index = currentPageSize * pageNumber + 1; + } + return { + sNo: ind === 0 ? index : index + ind, + id: item?.id, + incidentName: item?.incidentName, + title: item?.title, + statusName: item?.statusName, + severityName: item?.severityName, + teamName: item?.teamName, + createdAt: returnFormattedDate(item?.createdAt), + createdBy: item?.createdBy, + updatedBy: item?.updatedBy, + updatedAt: returnFormattedDate(item?.updatedAt), + slackChannel: item?.slackChannel, + }; + }); + + //TO DO: column data will change once backend is ready + const columnData = [ + { + field: 'incidentName1', + headerName: 'Linked Houston I.D.', + suppressMovable: true, + cellRenderer: HyperlinkCellRenderer, + }, + { + field: 'incidentName1', + headerName: 'JIRA ticket I.D.', + suppressMovable: true, + }, + { + field: 'incidentName1', + headerName: 'JIRA status', + suppressMovable: true, + }, + { + field: 'incidentName1', + headerName: 'JIRA description', + suppressMovable: true, + width: 700, + }, + { + field: 'incidentName1', + headerName: 'JIRA assigned to', + suppressMovable: true, + }, + { + field: 'incidentName1', + headerName: 'JIRA created on', + suppressMovable: true, + }, + ]; + + const onGridSizeChanged = (params: { + api: { sizeColumnsToFit: () => void }; + }): void => { + if (params?.api?.sizeColumnsToFit) params.api.sizeColumnsToFit(); + }; + + return ( +
+ + } + columnDefs={columnData} + rowData={rowData} + theme="alpine" + sizeColumnsToFit + domLayout="autoHeight" + paginationWrapperClasses={styles['pagination-wrapper-class']} + suppressCellFocus + defaultColDef={defaultColDef} + suppressRowHoverHighlight={true} + onGridSizeChanged={onGridSizeChanged} + suppressColumnMoveAnimation + rowHeight={54} + detailRowAutoHeight={true} + /> +
+ ); +}; + +export default SearchResultsTable; diff --git a/src/Pages/JiraDashboard/partials/SmartSearch.tsx b/src/Pages/JiraDashboard/partials/SmartSearch.tsx new file mode 100644 index 0000000..4ab7178 --- /dev/null +++ b/src/Pages/JiraDashboard/partials/SmartSearch.tsx @@ -0,0 +1,68 @@ +import React, { FC, useState, useEffect } from 'react'; +import cx from 'classnames'; +import { Button, BorderedInput } from '@navi/web-ui/lib/primitives'; +import SearchIcon from '@navi/web-ui/lib/icons/SearchIcon/SearchIcon'; +import styles from './DashboardHeader.module.scss'; +import { useSearchParams } from 'react-router-dom'; + +interface SmartSearchProps { + setSearchValue: (payload: string) => void; + searchValue: string; + updateURLAndFetchData: (payload: string) => void; +} + +const SmartSearch: FC = ({ + setSearchValue, + searchValue, + updateURLAndFetchData, +}) => { + const [searchParams] = useSearchParams(); + + useEffect(() => { + const searchParam = searchParams.get('incident_name'); + if (searchParam) { + setSearchValue(searchParam); + } else { + setSearchValue(''); + } + }, [searchParams]); + + const handleSearchInput = (e: React.ChangeEvent) => { + setSearchValue(e.target.value); + }; + const clearSearch = () => { + searchParams.delete('incident_name'); + const updatedQuery = searchParams.toString(); + updateURLAndFetchData(updatedQuery); + }; + //TO DO: will be moved to constants file + const placeHolder = 'Search by Houston I.D.'; + + const onKeyPressClickHandler = (event: React.KeyboardEvent) => { + if (event.key === 'Enter') { + if (searchValue === '') { + clearSearch(); + } else { + searchParams.set('incident_name', searchValue); + const updatedQuery = searchParams.toString(); + updateURLAndFetchData(updatedQuery); + } + } + }; + + return ( +
+ } + fullWidth + value={searchValue} + onChange={handleSearchInput} + placeholder={placeHolder} + containerClassName={cx(styles['input-container'])} + onKeyPress={onKeyPressClickHandler} + /> +
+ ); +}; + +export default SmartSearch; diff --git a/src/slices/jiraDashboardSlice.tsx b/src/slices/jiraDashboardSlice.tsx new file mode 100644 index 0000000..5a949ef --- /dev/null +++ b/src/slices/jiraDashboardSlice.tsx @@ -0,0 +1,16 @@ +import { createSlice } from '@reduxjs/toolkit'; + +const jiraDashboardSlice = createSlice({ + name: 'jiraDashboard', + initialState: { + data: Array(), + }, + reducers: { + setJiraDashboardData: (state, action) => { + state.data = action.payload; + }, + }, +}); + +export const { setJiraDashboardData } = jiraDashboardSlice.actions; +export default jiraDashboardSlice.reducer; diff --git a/src/store/index.tsx b/src/store/index.tsx index 508e351..96c692b 100644 --- a/src/store/index.tsx +++ b/src/store/index.tsx @@ -2,11 +2,13 @@ import { configureStore } from '@reduxjs/toolkit'; import teamReducer from '../slices/teamSlice'; import severityReducer from '../slices/sevSlice'; import dashboardReducer from '../slices/dashboardSlice'; +import jiraDashboardReducer from '../slices/jiraDashboardSlice'; const store = configureStore({ reducer: { team: teamReducer, severity: severityReducer, dashboard: dashboardReducer, + jiraDashboard: jiraDashboardReducer, }, }); From 7b065399a687b0395b5d86953615dcfd0bee5f44 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 30 Nov 2023 12:05:37 +0530 Subject: [PATCH 03/28] TP-48565 | some names changed --- src/Pages/JiraDashboard/index.tsx | 18 +++++++++--------- .../JiraDashboard/partials/DashboardHeader.tsx | 6 +++--- .../partials/SearchResultsTable.tsx | 4 ++-- 3 files changed, 14 insertions(+), 14 deletions(-) diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index 6d01839..d119f8a 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -27,7 +27,7 @@ const JiraDashboard: FC = () => { ); const searchParamRef = useRef(''); - const startIncidentSearch = (param = pageNumberRef.current): void => { + const startJiraSearch = (param = pageNumberRef.current): void => { const endPoint = FETCH_JIRA_DATA(param); setIsLoading(true); ApiService.get(endPoint) @@ -52,9 +52,9 @@ const JiraDashboard: FC = () => { const searchParam = searchParams.toString(); if (searchParam) { searchParamRef.current = `${searchParam}&`; - startIncidentSearch(`${searchParam}&${pageNumberRef.current}`); + startJiraSearch(`${searchParam}&${pageNumberRef.current}`); } else { - startIncidentSearch(); + startJiraSearch(); } }, [searchParams.toString()]); @@ -66,17 +66,17 @@ const JiraDashboard: FC = () => { pageNumberRef.current = `page_number=${ pageNumber - 1 }&page_size=${currentPageSize}`; - startIncidentSearch(`${searchParamRef.current}${finalParams}`); + startJiraSearch(`${searchParamRef.current}${finalParams}`); }; 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}`); + startJiraSearch(`${searchParamRef.current}${finalParams}`); }; - const fetchIncidentData = (props: any): void => { + const fetchJiraData = (props: any): void => { const { filterQuery = '', isDrawer = false } = props; const finalParams = filterQuery ? `${filterQuery}&` : ''; setPageNumber(0); @@ -84,7 +84,7 @@ const JiraDashboard: FC = () => { pageNumberRef.current = `page_number=${ isDrawer ? currentPageNumber : '0' }&page_size=${currentPageSize}`; - startIncidentSearch(`${finalParams}${pageNumberRef.current}`); + startJiraSearch(`${finalParams}${pageNumberRef.current}`); }; const returnTable = (): JSX.Element => { @@ -99,7 +99,7 @@ const JiraDashboard: FC = () => { pageDetails={pageDetails} handlePageNumberChange={handlePageNumber} handlePageSizeChange={handlePageSize} - fetchIncidentData={fetchIncidentData} + fetchJiraData={fetchJiraData} /> ); @@ -107,7 +107,7 @@ const JiraDashboard: FC = () => { return (
- + {returnTable()}
); diff --git a/src/Pages/JiraDashboard/partials/DashboardHeader.tsx b/src/Pages/JiraDashboard/partials/DashboardHeader.tsx index 327d06c..f3f4fd5 100644 --- a/src/Pages/JiraDashboard/partials/DashboardHeader.tsx +++ b/src/Pages/JiraDashboard/partials/DashboardHeader.tsx @@ -7,10 +7,10 @@ import styles from './DashboardHeader.module.scss'; import SmartSearch from './SmartSearch'; interface DashboardHeaderProps { - fetchIncidentData: (payload: any) => void; + fetchJiraData: (payload: any) => void; } -const DashboardHeader: FC = ({ fetchIncidentData }) => { +const DashboardHeader: FC = ({ fetchJiraData }) => { const { title } = DashboardHeaderConstants; const [searchValue, setSearchValue] = useState(''); const navigate = useNavigate(); @@ -19,7 +19,7 @@ const DashboardHeader: FC = ({ fetchIncidentData }) => { navigate({ search: updatedQuery, }); - fetchIncidentData({ + fetchJiraData({ filterQuery: updatedQuery, }); }; diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 576fa71..9dc7277 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -13,7 +13,7 @@ interface SearchResultTableProps { currentPageSize: number; handlePageNumberChange: (pageNumber: number) => void; handlePageSizeChange: (pageSize: number) => void; - fetchIncidentData: (props: any) => void; + fetchJiraData: (props: any) => void; } const defaultColDef = { @@ -29,7 +29,7 @@ const SearchResultsTable: FC = ({ currentPageSize, handlePageNumberChange, handlePageSizeChange, - fetchIncidentData, + fetchJiraData, }) => { const { pageNumber, totalElements } = pageDetails; const [drawerState, setDrawerState] = useState(false); From 1edd09afcadda9aa26fc090a0f0a71c0e9e931cf Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 30 Nov 2023 12:08:00 +0530 Subject: [PATCH 04/28] TP-48565 | added to dos --- src/Pages/JiraDashboard/partials/SearchResultsTable.tsx | 1 + 1 file changed, 1 insertion(+) diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 9dc7277..6981030 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -42,6 +42,7 @@ const SearchResultsTable: FC = ({ overflow: 'hidden', }; + //TO DO: this will change once backend is ready currently using it for testing const rowData = currentPageData?.map((item: any, ind: number) => { let index = 1; From fd3e5547472541fa2255140c9d5d6d711747f731 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 30 Nov 2023 18:46:34 +0530 Subject: [PATCH 05/28] TP-48565 | mocking added --- src/Pages/JiraDashboard/constants.ts | 2 +- .../partials/HyperlinkCellRenderer.tsx | 19 +++++++++++-------- .../partials/SearchResultsTable.tsx | 9 +++++++-- 3 files changed, 19 insertions(+), 11 deletions(-) diff --git a/src/Pages/JiraDashboard/constants.ts b/src/Pages/JiraDashboard/constants.ts index 8eabc79..29f380e 100644 --- a/src/Pages/JiraDashboard/constants.ts +++ b/src/Pages/JiraDashboard/constants.ts @@ -5,5 +5,5 @@ export const DashboardHeaderConstants = { //TO DO: Need to change the API URL export const FETCH_JIRA_DATA = (payload: string): string => { - return `${window?.config?.BASE_API_URL}/incidents?${payload}`; + return `https://mocki.io/v1/8d6f5f75-cef2-4881-970d-f720570da7f7`; }; diff --git a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx index 56602e8..0ce60c2 100644 --- a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx +++ b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx @@ -1,20 +1,23 @@ import React from 'react'; +import { useNavigate } from 'react-router-dom'; import GoToLinkIcon from '@src/assets/GoToLinkIcon'; import styles from '../Dashboard.module.scss'; -//TO DO: will change once backend is ready -const HyperlinkCellRenderer = props => { - const { value } = props; +const HyperlinkCellRenderer = ({ value, id }) => { + const navigate = useNavigate(); + const handleClick = () => { + navigate(`/incident/${id}`); + }; + return (
diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 6981030..57e6027 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -70,10 +70,15 @@ const SearchResultsTable: FC = ({ //TO DO: column data will change once backend is ready const columnData = [ { - field: 'incidentName1', + field: 'incidentName', headerName: 'Linked Houston I.D.', suppressMovable: true, - cellRenderer: HyperlinkCellRenderer, + cellRenderer: params => ( + + ), }, { field: 'incidentName1', From ac919de2c811b30025e159c49180c2250108e0ae Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Mon, 4 Dec 2023 12:01:59 +0530 Subject: [PATCH 06/28] TP-48565 | icons added --- src/Pages/JiraDashboard/constants.ts | 2 +- src/Pages/JiraDashboard/index.tsx | 68 +++++++++++++++++++ .../partials/SearchResultsTable.tsx | 34 ++++++---- .../JiraDashboard/partials/ticketNameCell.tsx | 50 ++++++++++++++ src/assets/JiraIcons/BugIcon.tsx | 35 ++++++++++ src/assets/JiraIcons/EpicIcon.tsx | 35 ++++++++++ src/assets/JiraIcons/StoryIcon.tsx | 35 ++++++++++ src/assets/JiraIcons/SubTaskIcon.tsx | 35 ++++++++++ src/assets/JiraIcons/TaskIcon.tsx | 35 ++++++++++ 9 files changed, 313 insertions(+), 16 deletions(-) create mode 100644 src/Pages/JiraDashboard/partials/ticketNameCell.tsx create mode 100644 src/assets/JiraIcons/BugIcon.tsx create mode 100644 src/assets/JiraIcons/EpicIcon.tsx create mode 100644 src/assets/JiraIcons/StoryIcon.tsx create mode 100644 src/assets/JiraIcons/SubTaskIcon.tsx create mode 100644 src/assets/JiraIcons/TaskIcon.tsx diff --git a/src/Pages/JiraDashboard/constants.ts b/src/Pages/JiraDashboard/constants.ts index 29f380e..c529d4e 100644 --- a/src/Pages/JiraDashboard/constants.ts +++ b/src/Pages/JiraDashboard/constants.ts @@ -5,5 +5,5 @@ export const DashboardHeaderConstants = { //TO DO: Need to change the API URL export const FETCH_JIRA_DATA = (payload: string): string => { - return `https://mocki.io/v1/8d6f5f75-cef2-4881-970d-f720570da7f7`; + return `https://mocki.io/v1/09bc40a5-1e6b-4217-8c82-c1e35f87230f`; }; diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index d119f8a..2bebe7e 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -114,3 +114,71 @@ const JiraDashboard: FC = () => { }; export default JiraDashboard; +/* +{ + "data": [ + { + "id": 532, + "incidentName": "#_houston-7789”, + "ticketType": "Epic", + "ticketName": "TP-54234", + "JiraStatus": "To Do", + "JiraDescription": "Jira Integration on Houston Dashboard. Jira Integration on Houston Dashboard", + "JiraAssignedTo": "Houston", + "JiraLink": "https://jira.com/TP-54234", + "Date": "oct 12, 2021" + }, + { + "id": 531, + "incidentName": "#_houston-7798, + "ticketType": “SubTask”, + "ticketName": "TP-54243", + "JiraStatus": "In progress", + "JiraDescription": "ira Integration on Houston Dashboard", + "JiraAssignedTo": "CRM", + "JiraLink": "https://jira.com/TP-54345", + "Date": "oct 12, 2021" + }, + { + "id": 530, + "incidentName": "#_houston-7767", + "ticketType": “Task”, + "ticketName": "TP-54234", + "JiraStatus": "In progress", + "JiraDescription": "ira Integration on Houston Dashboard", + "JiraAssignedTo": "Houston", + "JiraLink": "https://jira.com/TP-54234", + "Date": "oct 12, 2021" + }, + { + "id": 529, + "incidentName": "#_houston-7727", + "ticketType": “Bug”, + "ticketName": "TP-54234", + "JiraStatus": "In progress", + "JiraDescription": "ira Integration on Houston Dashboard", + "JiraAssignedTo": "Alfred", + "JiraLink": "https://jira.com/TP-54234", + "Date": "oct 12, 2021" + }, + { + "id": 528, + "incidentName": "#_houston-7707", + "ticketType": “Story”, + "ticketName": "TP-54234", + "JiraStatus": "In progress", + "JiraDescription": "ira Integration on Houston Dashboard", + "JiraAssignedTo": "Payment", + "JiraLink": "https://jira.com/TP-54234", + "Date": "oct 12, 2021" + } + ], + "pages": { + "totalElements": 5, + "totalPages": 1, + "pageSize": 10, + "pageNumber": 0 + }, + "status": 200 +} +*/ diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 57e6027..cd7a879 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -5,7 +5,7 @@ import { returnFormattedDate } from '@src/services/globalUtils'; import styles from '../SearchResultsTable.module.scss'; import cx from 'classnames'; import HyperlinkCellRenderer from './HyperlinkCellRenderer'; - +import TicketNameCell from './ticketNameCell'; //TO DO: will be moved to constants file interface SearchResultTableProps { currentPageData: any; @@ -55,15 +55,12 @@ const SearchResultsTable: FC = ({ sNo: ind === 0 ? index : index + ind, id: item?.id, incidentName: item?.incidentName, - title: item?.title, - statusName: item?.statusName, - severityName: item?.severityName, - teamName: item?.teamName, - createdAt: returnFormattedDate(item?.createdAt), - createdBy: item?.createdBy, - updatedBy: item?.updatedBy, - updatedAt: returnFormattedDate(item?.updatedAt), - slackChannel: item?.slackChannel, + ticketName: item?.ticketName, + ticketType: item?.ticketType, + JiraStatus: 'To Do', + JiraDescription: + 'Jira Integration on Houston Dashboard. Jira Integration on Houston Dashboard', + JiraAssignedTo: 'Houston', }; }); @@ -81,23 +78,30 @@ const SearchResultsTable: FC = ({ ), }, { - field: 'incidentName1', + field: 'ticketName', headerName: 'JIRA ticket I.D.', suppressMovable: true, + cellRenderer: params => ( + + ), }, { - field: 'incidentName1', + field: 'JiraStatus', headerName: 'JIRA status', suppressMovable: true, }, { - field: 'incidentName1', + field: 'JiraDescription', headerName: 'JIRA description', suppressMovable: true, - width: 700, + width: 600, }, { - field: 'incidentName1', + field: 'JiraAssignedTo', headerName: 'JIRA assigned to', suppressMovable: true, }, diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx new file mode 100644 index 0000000..623b311 --- /dev/null +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -0,0 +1,50 @@ +import React from 'react'; +import { useNavigate } from 'react-router-dom'; +import GoToLinkIcon from '@src/assets/GoToLinkIcon'; +import styles from '../Dashboard.module.scss'; +import StoryIcon from '@src/assets/JiraIcons/StoryIcon'; +import SubTaskIcon from '@src/assets/JiraIcons/SubTaskIcon'; +import TaskIcon from '@src/assets/JiraIcons/TaskIcon'; +import EpicIcon from '@src/assets/JiraIcons/EpicIcon'; +import BugIcon from '@src/assets/JiraIcons/BugIcon'; + +const getTicketIcon = ticketType => { + switch (ticketType) { + case 'Story': + return ; + case 'SubTask': + return ; + case 'Task': + return ; + case 'Epic': + return ; + case 'Bug': + return ; + default: + return null; + } +}; + +const TicketNameCell = ({ tickerName, ticketLink, ticketType }) => { + const handleClick = () => { + window.open(ticketLink, '_blank'); + }; + console.log('ticketType', ticketType); + return ( +
+ {getTicketIcon(ticketType)} +
+ {tickerName} +
+
+ +
+
+ ); +}; + +export default TicketNameCell; diff --git a/src/assets/JiraIcons/BugIcon.tsx b/src/assets/JiraIcons/BugIcon.tsx new file mode 100644 index 0000000..1542d73 --- /dev/null +++ b/src/assets/JiraIcons/BugIcon.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react'; + +import { IconProps } from '../types'; + +const BugIcon: FC = ({ + width = '16', + height = '16', + ...restProps +}) => { + return ( + + + + + + + + + + + ); +}; + +export default BugIcon; diff --git a/src/assets/JiraIcons/EpicIcon.tsx b/src/assets/JiraIcons/EpicIcon.tsx new file mode 100644 index 0000000..1ec527e --- /dev/null +++ b/src/assets/JiraIcons/EpicIcon.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react'; + +import { IconProps } from '../types'; + +const EpicIcon: FC = ({ + width = '16', + height = '16', + ...restProps +}) => { + return ( + + + + + + + + + + + ); +}; + +export default EpicIcon; diff --git a/src/assets/JiraIcons/StoryIcon.tsx b/src/assets/JiraIcons/StoryIcon.tsx new file mode 100644 index 0000000..05f941b --- /dev/null +++ b/src/assets/JiraIcons/StoryIcon.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react'; + +import { IconProps } from '../types'; + +const StoryIcon: FC = ({ + width = '16', + height = '16', + ...restProps +}) => { + return ( + + + + + + + + + + + ); +}; + +export default StoryIcon; diff --git a/src/assets/JiraIcons/SubTaskIcon.tsx b/src/assets/JiraIcons/SubTaskIcon.tsx new file mode 100644 index 0000000..cc13b4b --- /dev/null +++ b/src/assets/JiraIcons/SubTaskIcon.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react'; + +import { IconProps } from '../types'; + +const SubTaskIcon: FC = ({ + width = '16', + height = '16', + ...restProps +}) => { + return ( + + + + + + + + + + + ); +}; + +export default SubTaskIcon; diff --git a/src/assets/JiraIcons/TaskIcon.tsx b/src/assets/JiraIcons/TaskIcon.tsx new file mode 100644 index 0000000..b536156 --- /dev/null +++ b/src/assets/JiraIcons/TaskIcon.tsx @@ -0,0 +1,35 @@ +import { FC } from 'react'; + +import { IconProps } from '../types'; + +const TaskIcon: FC = ({ + width = '16', + height = '16', + ...restProps +}) => { + return ( + + + + + + + + + + + ); +}; + +export default TaskIcon; From 52fe83c047b4103feb69caa9c4fa12f9127deaf9 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Tue, 5 Dec 2023 11:56:12 +0530 Subject: [PATCH 07/28] TP-48565 | url based pagination --- src/Pages/JiraDashboard/Dashboard.module.scss | 4 +- .../SearchResultsTable.module.scss | 2 +- src/Pages/JiraDashboard/constants.ts | 1 - src/Pages/JiraDashboard/index.tsx | 113 ++++++------------ .../JiraDashboard/partials/ticketNameCell.tsx | 1 - 5 files changed, 40 insertions(+), 81 deletions(-) diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index 691bd1e..e9be6c0 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -20,7 +20,7 @@ gap: 8px; .hyperlink { - color: #585757; + color: var(--navi-color-gray-c2); text-decoration: none; transition: color 0.3s; } @@ -32,7 +32,7 @@ &:hover { .hyperlink { - color: #0276fe; + color: var(--navi-color-blue-base); } .go-to-link-icon { diff --git a/src/Pages/JiraDashboard/SearchResultsTable.module.scss b/src/Pages/JiraDashboard/SearchResultsTable.module.scss index 342d016..11c2cbf 100644 --- a/src/Pages/JiraDashboard/SearchResultsTable.module.scss +++ b/src/Pages/JiraDashboard/SearchResultsTable.module.scss @@ -55,5 +55,5 @@ } :export { - sessionId: rgb(88, 87, 87); + sessionId: var(--navi-color-gray-c2); } diff --git a/src/Pages/JiraDashboard/constants.ts b/src/Pages/JiraDashboard/constants.ts index c529d4e..36444aa 100644 --- a/src/Pages/JiraDashboard/constants.ts +++ b/src/Pages/JiraDashboard/constants.ts @@ -1,6 +1,5 @@ export const DashboardHeaderConstants = { title: 'JIRA tickets', - searchTitle: 'Select date range: ', }; //TO DO: Need to change the API URL diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index 2bebe7e..f13ba04 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -1,5 +1,5 @@ import { FC, useState, useEffect, useRef } from 'react'; -import { useSearchParams } from 'react-router-dom'; +import { useSearchParams, useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { toast } from '@navi/web-ui/lib/primitives/Toast/index'; import FallbackComponent from '@src/components/Fallback'; @@ -26,8 +26,10 @@ const JiraDashboard: FC = () => { `page_number=${currentPageNumber}&page_size=${currentPageSize}`, ); const searchParamRef = useRef(''); + const navigate = useNavigate(); const startJiraSearch = (param = pageNumberRef.current): void => { + console.log('param', param); const endPoint = FETCH_JIRA_DATA(param); setIsLoading(true); ApiService.get(endPoint) @@ -49,10 +51,25 @@ const JiraDashboard: FC = () => { }; useEffect(() => { + const pageNumberParam = searchParams.get('page_number'); + const pageSizeParam = searchParams.get('page_size'); + if (pageNumberParam) { + setPageNumber(Number(pageNumberParam)); + } else { + 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); + console.log('searchParam', searchParam); if (searchParam) { - searchParamRef.current = `${searchParam}&`; - startJiraSearch(`${searchParam}&${pageNumberRef.current}`); + startJiraSearch(`${searchParam}`); } else { startJiraSearch(); } @@ -66,14 +83,17 @@ const JiraDashboard: FC = () => { pageNumberRef.current = `page_number=${ pageNumber - 1 }&page_size=${currentPageSize}`; - startJiraSearch(`${searchParamRef.current}${finalParams}`); + searchParams.set('page_number', (pageNumber - 1).toString()); + const updatedQuery = searchParams.toString(); + updateURLAndFetchData(updatedQuery); + //startJiraSearch(`${searchParamRef.current}`); }; const handlePageSize = (pageSize: number): void => { - const finalParams = `page_number=0&page_size=${pageSize}`; - setPageSize(pageSize); - pageNumberRef.current = `page_number=0&page_size=${pageSize}`; - startJiraSearch(`${searchParamRef.current}${finalParams}`); + searchParams.set('page_size', pageSize.toString()); + const updatedQuery = searchParams.toString(); + updateURLAndFetchData(updatedQuery); + //startJiraSearch(`${searchParamRef.current}`); }; const fetchJiraData = (props: any): void => { @@ -87,6 +107,15 @@ const JiraDashboard: FC = () => { startJiraSearch(`${finalParams}${pageNumberRef.current}`); }; + const updateURLAndFetchData = (updatedQuery: string) => { + navigate({ + search: updatedQuery, + }); + fetchJiraData({ + filterQuery: updatedQuery, + }); + }; + const returnTable = (): JSX.Element => { if (isLoading) { return ; @@ -114,71 +143,3 @@ const JiraDashboard: FC = () => { }; export default JiraDashboard; -/* -{ - "data": [ - { - "id": 532, - "incidentName": "#_houston-7789”, - "ticketType": "Epic", - "ticketName": "TP-54234", - "JiraStatus": "To Do", - "JiraDescription": "Jira Integration on Houston Dashboard. Jira Integration on Houston Dashboard", - "JiraAssignedTo": "Houston", - "JiraLink": "https://jira.com/TP-54234", - "Date": "oct 12, 2021" - }, - { - "id": 531, - "incidentName": "#_houston-7798, - "ticketType": “SubTask”, - "ticketName": "TP-54243", - "JiraStatus": "In progress", - "JiraDescription": "ira Integration on Houston Dashboard", - "JiraAssignedTo": "CRM", - "JiraLink": "https://jira.com/TP-54345", - "Date": "oct 12, 2021" - }, - { - "id": 530, - "incidentName": "#_houston-7767", - "ticketType": “Task”, - "ticketName": "TP-54234", - "JiraStatus": "In progress", - "JiraDescription": "ira Integration on Houston Dashboard", - "JiraAssignedTo": "Houston", - "JiraLink": "https://jira.com/TP-54234", - "Date": "oct 12, 2021" - }, - { - "id": 529, - "incidentName": "#_houston-7727", - "ticketType": “Bug”, - "ticketName": "TP-54234", - "JiraStatus": "In progress", - "JiraDescription": "ira Integration on Houston Dashboard", - "JiraAssignedTo": "Alfred", - "JiraLink": "https://jira.com/TP-54234", - "Date": "oct 12, 2021" - }, - { - "id": 528, - "incidentName": "#_houston-7707", - "ticketType": “Story”, - "ticketName": "TP-54234", - "JiraStatus": "In progress", - "JiraDescription": "ira Integration on Houston Dashboard", - "JiraAssignedTo": "Payment", - "JiraLink": "https://jira.com/TP-54234", - "Date": "oct 12, 2021" - } - ], - "pages": { - "totalElements": 5, - "totalPages": 1, - "pageSize": 10, - "pageNumber": 0 - }, - "status": 200 -} -*/ diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 623b311..45ce4f3 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -29,7 +29,6 @@ const TicketNameCell = ({ tickerName, ticketLink, ticketType }) => { const handleClick = () => { window.open(ticketLink, '_blank'); }; - console.log('ticketType', ticketType); return (
{getTicketIcon(ticketType)} From cd09b8262c7996b6034fe9fd1a50743b5f7c527e Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 7 Dec 2023 11:40:20 +0530 Subject: [PATCH 08/28] TP-48565 | branch rebased --- src/Pages/JiraDashboard/constants.ts | 7 ++++++- src/Pages/JiraDashboard/index.tsx | 22 ++++------------------ 2 files changed, 10 insertions(+), 19 deletions(-) diff --git a/src/Pages/JiraDashboard/constants.ts b/src/Pages/JiraDashboard/constants.ts index 36444aa..d689c7c 100644 --- a/src/Pages/JiraDashboard/constants.ts +++ b/src/Pages/JiraDashboard/constants.ts @@ -1,8 +1,13 @@ +import { createURL } from '@src/services/globalUtils'; + +const URL_PREFIX = createURL('/houston'); + export const DashboardHeaderConstants = { title: 'JIRA tickets', }; //TO DO: Need to change the API URL export const FETCH_JIRA_DATA = (payload: string): string => { - return `https://mocki.io/v1/09bc40a5-1e6b-4217-8c82-c1e35f87230f`; + return `${URL_PREFIX}/get-jira-statuses?${payload}`; + //return `https://mocki.io/v1/09bc40a5-1e6b-4217-8c82-c1e35f87230f`; }; diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index f13ba04..abe6f48 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -28,7 +28,7 @@ const JiraDashboard: FC = () => { const searchParamRef = useRef(''); const navigate = useNavigate(); - const startJiraSearch = (param = pageNumberRef.current): void => { + const startJiraSearch = (param): void => { console.log('param', param); const endPoint = FETCH_JIRA_DATA(param); setIsLoading(true); @@ -67,44 +67,30 @@ const JiraDashboard: FC = () => { } const searchParam = searchParams.toString(); updateURLAndFetchData(searchParam); - console.log('searchParam', searchParam); - if (searchParam) { - startJiraSearch(`${searchParam}`); - } else { - startJiraSearch(); - } + //console.log('searchParam', 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}`; searchParams.set('page_number', (pageNumber - 1).toString()); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); - //startJiraSearch(`${searchParamRef.current}`); }; const handlePageSize = (pageSize: number): void => { searchParams.set('page_size', pageSize.toString()); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); - //startJiraSearch(`${searchParamRef.current}`); }; const fetchJiraData = (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}`; - startJiraSearch(`${finalParams}${pageNumberRef.current}`); + startJiraSearch(`${finalParams}`); }; const updateURLAndFetchData = (updatedQuery: string) => { From eee8d06034afc6ede5978d31eef94f1ad6b6cbf6 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Tue, 12 Dec 2023 15:16:15 +0530 Subject: [PATCH 09/28] TP-48565 | comment resolved --- src/Pages/JiraDashboard/constants.ts | 4 ++-- src/Pages/JiraDashboard/index.tsx | 6 ++---- src/Pages/JiraDashboard/partials/DashboardHeader.tsx | 2 +- src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx | 2 +- src/Pages/JiraDashboard/partials/SearchResultsTable.tsx | 3 ++- src/Pages/JiraDashboard/partials/SmartSearch.tsx | 4 ++-- src/Pages/JiraDashboard/partials/ticketNameCell.tsx | 4 ++-- 7 files changed, 12 insertions(+), 13 deletions(-) diff --git a/src/Pages/JiraDashboard/constants.ts b/src/Pages/JiraDashboard/constants.ts index d689c7c..2fe85c2 100644 --- a/src/Pages/JiraDashboard/constants.ts +++ b/src/Pages/JiraDashboard/constants.ts @@ -8,6 +8,6 @@ export const DashboardHeaderConstants = { //TO DO: Need to change the API URL export const FETCH_JIRA_DATA = (payload: string): string => { - return `${URL_PREFIX}/get-jira-statuses?${payload}`; - //return `https://mocki.io/v1/09bc40a5-1e6b-4217-8c82-c1e35f87230f`; + // return `${URL_PREFIX}/get-jira-statuses?${payload}`; + return `https://mocki.io/v1/09bc40a5-1e6b-4217-8c82-c1e35f87230f`; }; diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index abe6f48..6a48f12 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -29,7 +29,6 @@ const JiraDashboard: FC = () => { const navigate = useNavigate(); const startJiraSearch = (param): void => { - console.log('param', param); const endPoint = FETCH_JIRA_DATA(param); setIsLoading(true); ApiService.get(endPoint) @@ -67,8 +66,7 @@ const JiraDashboard: FC = () => { } const searchParam = searchParams.toString(); updateURLAndFetchData(searchParam); - //console.log('searchParam', searchParam); - }, [searchParams.toString()]); + }, [searchParams]); const handlePageNumber = (pageNumber: number): void => { searchParams.set('page_number', (pageNumber - 1).toString()); @@ -93,7 +91,7 @@ const JiraDashboard: FC = () => { startJiraSearch(`${finalParams}`); }; - const updateURLAndFetchData = (updatedQuery: string) => { + const updateURLAndFetchData = (updatedQuery: string): void => { navigate({ search: updatedQuery, }); diff --git a/src/Pages/JiraDashboard/partials/DashboardHeader.tsx b/src/Pages/JiraDashboard/partials/DashboardHeader.tsx index f3f4fd5..c92bc18 100644 --- a/src/Pages/JiraDashboard/partials/DashboardHeader.tsx +++ b/src/Pages/JiraDashboard/partials/DashboardHeader.tsx @@ -15,7 +15,7 @@ const DashboardHeader: FC = ({ fetchJiraData }) => { const [searchValue, setSearchValue] = useState(''); const navigate = useNavigate(); - const updateURLAndFetchData = (updatedQuery: string) => { + const updateURLAndFetchData = (updatedQuery: string): void => { navigate({ search: updatedQuery, }); diff --git a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx index 0ce60c2..48bc893 100644 --- a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx +++ b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx @@ -5,7 +5,7 @@ import styles from '../Dashboard.module.scss'; const HyperlinkCellRenderer = ({ value, id }) => { const navigate = useNavigate(); - const handleClick = () => { + const handleClick = (): void => { navigate(`/incident/${id}`); }; diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index cd7a879..785bedc 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -6,6 +6,7 @@ import styles from '../SearchResultsTable.module.scss'; import cx from 'classnames'; import HyperlinkCellRenderer from './HyperlinkCellRenderer'; import TicketNameCell from './ticketNameCell'; +import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant'; //TO DO: will be moved to constants file interface SearchResultTableProps { currentPageData: any; @@ -128,7 +129,7 @@ const SearchResultsTable: FC = ({ = ({ } }, [searchParams]); - const handleSearchInput = (e: React.ChangeEvent) => { + const handleSearchInput = (e: React.ChangeEvent): void => { setSearchValue(e.target.value); }; const clearSearch = () => { @@ -38,7 +38,7 @@ const SmartSearch: FC = ({ //TO DO: will be moved to constants file const placeHolder = 'Search by Houston I.D.'; - const onKeyPressClickHandler = (event: React.KeyboardEvent) => { + const onKeyPressClickHandler = (event: React.KeyboardEvent): void => { if (event.key === 'Enter') { if (searchValue === '') { clearSearch(); diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 45ce4f3..41d3181 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -8,7 +8,7 @@ import TaskIcon from '@src/assets/JiraIcons/TaskIcon'; import EpicIcon from '@src/assets/JiraIcons/EpicIcon'; import BugIcon from '@src/assets/JiraIcons/BugIcon'; -const getTicketIcon = ticketType => { +const getTicketIcon = (ticketType: string): JSX.Element | null => { switch (ticketType) { case 'Story': return ; @@ -26,7 +26,7 @@ const getTicketIcon = ticketType => { }; const TicketNameCell = ({ tickerName, ticketLink, ticketType }) => { - const handleClick = () => { + const handleClick = (): void => { window.open(ticketLink, '_blank'); }; return ( From da5c5378555efdc8d85e58d621048b0749c955ca Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Tue, 19 Dec 2023 14:17:10 +0530 Subject: [PATCH 10/28] TP-48565 | link integerated --- src/Pages/JiraDashboard/Dashboard.module.scss | 1 + src/Pages/JiraDashboard/constants.ts | 4 +-- src/Pages/JiraDashboard/index.tsx | 2 +- .../partials/SearchResultsTable.tsx | 19 ++++++----- .../JiraDashboard/partials/ticketNameCell.tsx | 9 ++--- src/assets/JiraIcons/TechTaskIcon.tsx | 33 +++++++++++++++++++ 6 files changed, 51 insertions(+), 17 deletions(-) create mode 100644 src/assets/JiraIcons/TechTaskIcon.tsx diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index e9be6c0..7a882d5 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -38,6 +38,7 @@ .go-to-link-icon { display: inline-block; opacity: 1; + padding-top: 8px; } } } diff --git a/src/Pages/JiraDashboard/constants.ts b/src/Pages/JiraDashboard/constants.ts index 2fe85c2..0072143 100644 --- a/src/Pages/JiraDashboard/constants.ts +++ b/src/Pages/JiraDashboard/constants.ts @@ -6,8 +6,6 @@ export const DashboardHeaderConstants = { title: 'JIRA tickets', }; -//TO DO: Need to change the API URL export const FETCH_JIRA_DATA = (payload: string): string => { - // return `${URL_PREFIX}/get-jira-statuses?${payload}`; - return `https://mocki.io/v1/09bc40a5-1e6b-4217-8c82-c1e35f87230f`; + return `${URL_PREFIX}/get-jira-statuses?${payload}`; }; diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index 6a48f12..b531147 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -35,7 +35,7 @@ const JiraDashboard: FC = () => { .then(response => { setIsLoading(false); dispatch(setJiraDashboardData(response?.data?.data)); - setPageDetails(response?.data?.pages); + setPageDetails(response?.data?.page); }) .catch(error => { const toastMessage = `${ diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 785bedc..18dd2ae 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -54,14 +54,15 @@ const SearchResultsTable: FC = ({ } return { sNo: ind === 0 ? index : index + ind, - id: item?.id, + id: item?.incidentID, incidentName: item?.incidentName, - ticketName: item?.ticketName, - ticketType: item?.ticketType, - JiraStatus: 'To Do', - JiraDescription: - 'Jira Integration on Houston Dashboard. Jira Integration on Houston Dashboard', - JiraAssignedTo: 'Houston', + ticketName: item?.jiraKey, + ticketType: item?.jiraType, + JiraStatus: item?.jiraStatus, + JiraDescription: item?.jiraSummary, + JiraAssignedTo: item?.teamsInvolved, + JiraCreatedOn: returnFormattedDate(item?.jiraCreateAt), + JiraLink: item?.jiraLink, }; }); @@ -85,7 +86,7 @@ const SearchResultsTable: FC = ({ cellRenderer: params => ( ), @@ -107,7 +108,7 @@ const SearchResultsTable: FC = ({ suppressMovable: true, }, { - field: 'incidentName1', + field: 'JiraCreatedOn', headerName: 'JIRA created on', suppressMovable: true, }, diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 41d3181..965ccba 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -1,18 +1,17 @@ -import React from 'react'; -import { useNavigate } from 'react-router-dom'; import GoToLinkIcon from '@src/assets/GoToLinkIcon'; -import styles from '../Dashboard.module.scss'; import StoryIcon from '@src/assets/JiraIcons/StoryIcon'; import SubTaskIcon from '@src/assets/JiraIcons/SubTaskIcon'; import TaskIcon from '@src/assets/JiraIcons/TaskIcon'; import EpicIcon from '@src/assets/JiraIcons/EpicIcon'; import BugIcon from '@src/assets/JiraIcons/BugIcon'; +import TechTaskIcon from '@src/assets/JiraIcons/TechTaskIcon'; +import styles from '../Dashboard.module.scss'; const getTicketIcon = (ticketType: string): JSX.Element | null => { switch (ticketType) { case 'Story': return ; - case 'SubTask': + case 'Sub-task': return ; case 'Task': return ; @@ -20,6 +19,8 @@ const getTicketIcon = (ticketType: string): JSX.Element | null => { return ; case 'Bug': return ; + case 'Tech Task': + return ; default: return null; } diff --git a/src/assets/JiraIcons/TechTaskIcon.tsx b/src/assets/JiraIcons/TechTaskIcon.tsx new file mode 100644 index 0000000..750553f --- /dev/null +++ b/src/assets/JiraIcons/TechTaskIcon.tsx @@ -0,0 +1,33 @@ +import { FC } from 'react'; + +import { IconProps } from '../types'; + +const TechTaskIcon: FC = ({ + width = '16', + height = '16', + ...restProps +}) => { + return ( + + + + + ); +}; + +export default TechTaskIcon; From 6b2ee4a25381a45d40add6bc002ed56f27c5e947 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Tue, 19 Dec 2023 15:37:11 +0530 Subject: [PATCH 11/28] TP-48565 | page number fix --- src/Pages/JiraDashboard/index.tsx | 12 ++++++------ .../JiraDashboard/partials/SearchResultsTable.tsx | 8 +++++--- 2 files changed, 11 insertions(+), 9 deletions(-) diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index b531147..83972b6 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -14,7 +14,7 @@ const JiraDashboard: FC = () => { const data = useSelector((state: any) => state.jiraDashboard.data); const dispatch = useDispatch(); const [pageDetails, setPageDetails] = useState({ - pageNumber: 0, + pageNumber: 1, pageSize: 10, totalElements: 0, }); @@ -55,8 +55,8 @@ const JiraDashboard: FC = () => { if (pageNumberParam) { setPageNumber(Number(pageNumberParam)); } else { - searchParams.set('page_number', '0'); - setPageNumber(0); + searchParams.set('page_number', '1'); + setPageNumber(1); } if (pageSizeParam) { setPageSize(Number(pageSizeParam)); @@ -69,7 +69,7 @@ const JiraDashboard: FC = () => { }, [searchParams]); const handlePageNumber = (pageNumber: number): void => { - searchParams.set('page_number', (pageNumber - 1).toString()); + searchParams.set('page_number', pageNumber.toString()); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); }; @@ -83,10 +83,10 @@ const JiraDashboard: FC = () => { const fetchJiraData = (props: any): void => { const { filterQuery = '', isDrawer = false } = props; const finalParams = filterQuery ? `${filterQuery}` : ''; - setPageNumber(0); + setPageNumber(1); searchParamRef.current = finalParams; pageNumberRef.current = `page_number=${ - isDrawer ? currentPageNumber : '0' + isDrawer ? currentPageNumber : '1' }&page_size=${currentPageSize}`; startJiraSearch(`${finalParams}`); }; diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 18dd2ae..6f507e1 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -21,7 +21,7 @@ const defaultColDef = { cellStyle: { lineHeight: 2 }, wrapText: true, autoHeight: true, - width: 200, + width: 150, }; const SearchResultsTable: FC = ({ @@ -100,17 +100,19 @@ const SearchResultsTable: FC = ({ field: 'JiraDescription', headerName: 'JIRA description', suppressMovable: true, - width: 600, + width: 500, }, { field: 'JiraAssignedTo', headerName: 'JIRA assigned to', suppressMovable: true, + width: 225, }, { field: 'JiraCreatedOn', headerName: 'JIRA created on', suppressMovable: true, + width: 200, }, ]; @@ -132,7 +134,7 @@ const SearchResultsTable: FC = ({ Date: Thu, 21 Dec 2023 11:50:45 +0530 Subject: [PATCH 12/28] TP-48565 | custom tooltip --- src/Pages/JiraDashboard/Dashboard.module.scss | 8 ++ .../partials/SearchResultsTable.tsx | 17 ++- .../JiraDashboard/partials/ticketNameCell.tsx | 35 ++++-- .../CustomTooltip/Tooltip.module.scss | 112 ++++++++++++++++++ src/components/CustomTooltip/Tooltip.tsx | 41 +++++++ src/components/CustomTooltip/index.tsx | 3 + src/components/CustomTooltip/types.ts | 10 ++ 7 files changed, 214 insertions(+), 12 deletions(-) create mode 100644 src/components/CustomTooltip/Tooltip.module.scss create mode 100644 src/components/CustomTooltip/Tooltip.tsx create mode 100644 src/components/CustomTooltip/index.tsx create mode 100644 src/components/CustomTooltip/types.ts diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index 7a882d5..de4b7b7 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -12,6 +12,14 @@ display: flex; align-items: center; gap: 8px; + // position: fixed; +} + +.id-wrapper { + display: flex; + align-items: center; + gap: 8px; + position: fixed; } .houston-id-wrapper { diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 6f507e1..73caefa 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -7,6 +7,7 @@ import cx from 'classnames'; import HyperlinkCellRenderer from './HyperlinkCellRenderer'; import TicketNameCell from './ticketNameCell'; import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant'; +import { Tooltip } from '@navi/web-ui/lib/primitives'; //TO DO: will be moved to constants file interface SearchResultTableProps { currentPageData: any; @@ -21,7 +22,8 @@ const defaultColDef = { cellStyle: { lineHeight: 2 }, wrapText: true, autoHeight: true, - width: 150, + width: 200, + // tooltipComponent: CustomTooltip, }; const SearchResultsTable: FC = ({ @@ -78,6 +80,7 @@ const SearchResultsTable: FC = ({ id={params.data.id} /> ), + width: 200, }, { field: 'ticketName', @@ -90,6 +93,8 @@ const SearchResultsTable: FC = ({ ticketType={params.data.ticketType} /> ), + //tooltipField: 'ticketName', + //tooltipComponentParams: { color: '#55AA77' }, }, { field: 'JiraStatus', @@ -101,6 +106,14 @@ const SearchResultsTable: FC = ({ headerName: 'JIRA description', suppressMovable: true, width: 500, + maxwidth: 500, + minwidth: 500, + cellStyle: { + 'text-overflow': 'ellipsis', + 'white-space': 'nowrap', + overflow: 'hidden', + padding: 0, + }, }, { field: 'JiraAssignedTo', @@ -154,6 +167,8 @@ const SearchResultsTable: FC = ({ suppressColumnMoveAnimation rowHeight={54} detailRowAutoHeight={true} + tooltipShowDelay={0} + tooltipHideDelay={2000} />
); diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 965ccba..8dd1e5a 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -5,8 +5,12 @@ import TaskIcon from '@src/assets/JiraIcons/TaskIcon'; import EpicIcon from '@src/assets/JiraIcons/EpicIcon'; import BugIcon from '@src/assets/JiraIcons/BugIcon'; import TechTaskIcon from '@src/assets/JiraIcons/TechTaskIcon'; +import { AlertOutlineIcon } from '@navi/web-ui/lib/icons'; +// import { Tooltip } from '@navi/web-ui/lib/primitives'; import styles from '../Dashboard.module.scss'; +import Tooltip from '@src/components/CustomTooltip'; + const getTicketIcon = (ticketType: string): JSX.Element | null => { switch (ticketType) { case 'Story': @@ -22,7 +26,7 @@ const getTicketIcon = (ticketType: string): JSX.Element | null => { case 'Tech Task': return ; default: - return null; + return ; } }; @@ -32,16 +36,25 @@ const TicketNameCell = ({ tickerName, ticketLink, ticketType }) => { }; return (
- {getTicketIcon(ticketType)} -
- {tickerName} -
-
- +
+ {ticketType ? ( + getTicketIcon(ticketType) + ) : ( + + {getTicketIcon('')} + + )} +
+ {tickerName} +
+
+
+ +
); diff --git a/src/components/CustomTooltip/Tooltip.module.scss b/src/components/CustomTooltip/Tooltip.module.scss new file mode 100644 index 0000000..23e153a --- /dev/null +++ b/src/components/CustomTooltip/Tooltip.module.scss @@ -0,0 +1,112 @@ +@mixin arrowTipStyles { + content: ''; + border-width: 4px; + border-style: solid; + position: absolute; + box-sizing: border-box; +} + +.tooltip-wrapper { + position: relative; + display: inline-block; + + .tooltip { + position: absolute; + box-sizing: border-box; + padding: 4px 8px; + border-radius: 4px; + background: var(--navi-tooltip-background-color); + box-shadow: var(--navi-tooltip-drop-shadow); + z-index: 1; + visibility: hidden; + white-space: nowrap; + + &.top { + bottom: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + } + + &.bottom { + top: calc(100% + 8px); + left: 50%; + transform: translateX(-50%); + } + + &.left { + top: 50%; + right: calc(100% + 8px); + transform: translateY(-50%); + } + + &.right { + top: 50%; + left: calc(100% + 8px); + transform: translateY(-50%); + } + + &.show-tooltip { + visibility: visible; + } + } + + &.with-pointer { + .tooltip { + &.top { + &::after { + @include arrowTipStyles(); + top: 100%; + left: 50%; + transform: translateX(-50%); + border-color: var(--navi-tooltip-background-color) transparent + transparent transparent; + } + } + + &.bottom { + &::after { + @include arrowTipStyles(); + bottom: 100%; + left: 50%; + transform: translateX(-50%); + border-color: transparent transparent + var(--navi-tooltip-background-color) transparent; + } + } + + &.left { + &::after { + @include arrowTipStyles(); + top: 50%; + left: 100%; + transform: translateY(-50%); + border-color: transparent transparent transparent + var(--navi-tooltip-background-color); + } + } + + &.right { + &::after { + @include arrowTipStyles(); + right: 100%; + top: 50%; + transform: translateY(-50%); + border-color: transparent var(--navi-tooltip-background-color) + transparent transparent; + } + } + } + } +} + +.tooltip-wrapper-on-hover { + &:hover { + .tooltip { + visibility: visible; + } + } +} + +:export { + textColor: var(--navi-tooltip-text-color); +} diff --git a/src/components/CustomTooltip/Tooltip.tsx b/src/components/CustomTooltip/Tooltip.tsx new file mode 100644 index 0000000..f869bcf --- /dev/null +++ b/src/components/CustomTooltip/Tooltip.tsx @@ -0,0 +1,41 @@ +import React from 'react'; +import cx from 'classnames'; +import Typography from '@navi/web-ui/lib/primitives/Typography'; +import styles from './Tooltip.module.scss'; +import { TooltipProps } from './types'; + +const Tooltip: React.FC = ({ + showTooltip = false, + showOnHover = true, + text = '', + position = 'bottom', + withPointer = true, + children, + ...restProps +}) => { + const tooltipWrapperStyles = cx(styles['tooltip-wrapper'], { + [styles['tooltip-wrapper-on-hover']]: showOnHover, + [styles['with-pointer']]: withPointer, + }); + const tooltipStyles = cx(styles.tooltip, styles[position], { + [styles['show-tooltip']]: showTooltip, + }); + + return ( +
+ {children} + + {text} +
dscds
+ +
+ ); +}; + +export default Tooltip; diff --git a/src/components/CustomTooltip/index.tsx b/src/components/CustomTooltip/index.tsx new file mode 100644 index 0000000..d8851cb --- /dev/null +++ b/src/components/CustomTooltip/index.tsx @@ -0,0 +1,3 @@ +import Tooltip from './Tooltip'; + +export default Tooltip; diff --git a/src/components/CustomTooltip/types.ts b/src/components/CustomTooltip/types.ts new file mode 100644 index 0000000..559064e --- /dev/null +++ b/src/components/CustomTooltip/types.ts @@ -0,0 +1,10 @@ +type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'; + +export interface TooltipProps extends React.ComponentPropsWithRef<'div'> { + showTooltip?: boolean; + showOnHover?: boolean; + text: string; + withPointer?: boolean; + position: TooltipPosition; + children?: React.ReactNode; +} From e0ab9c1e4a91cc3c6d513064c3f13f3bc3ee35cb Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 21 Dec 2023 15:06:39 +0530 Subject: [PATCH 13/28] TP-48565 | multiple team handled --- src/Pages/JiraDashboard/Dashboard.module.scss | 16 +++ src/Pages/JiraDashboard/index.tsx | 12 +- .../partials/SearchResultsTable.tsx | 11 +- .../partials/TeamAssignedCellRenderer.tsx | 50 ++++++++ .../JiraDashboard/partials/ticketNameCell.tsx | 15 ++- .../CustomTooltip/Tooltip.module.scss | 112 ------------------ src/components/CustomTooltip/Tooltip.tsx | 41 ------- src/components/CustomTooltip/index.tsx | 3 - src/components/CustomTooltip/types.ts | 10 -- 9 files changed, 87 insertions(+), 183 deletions(-) create mode 100644 src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx delete mode 100644 src/components/CustomTooltip/Tooltip.module.scss delete mode 100644 src/components/CustomTooltip/Tooltip.tsx delete mode 100644 src/components/CustomTooltip/index.tsx delete mode 100644 src/components/CustomTooltip/types.ts diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index de4b7b7..7c836a2 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -50,3 +50,19 @@ } } } + +.alert-icon { + margin-top: 4px; +} + +.team-parent-style { + display: flex; + align-items: center; + position: fixed; +} + +.team-style { + display: flex; + align-items: center; + position: fixed; +} diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index 83972b6..b531147 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -14,7 +14,7 @@ const JiraDashboard: FC = () => { const data = useSelector((state: any) => state.jiraDashboard.data); const dispatch = useDispatch(); const [pageDetails, setPageDetails] = useState({ - pageNumber: 1, + pageNumber: 0, pageSize: 10, totalElements: 0, }); @@ -55,8 +55,8 @@ const JiraDashboard: FC = () => { if (pageNumberParam) { setPageNumber(Number(pageNumberParam)); } else { - searchParams.set('page_number', '1'); - setPageNumber(1); + searchParams.set('page_number', '0'); + setPageNumber(0); } if (pageSizeParam) { setPageSize(Number(pageSizeParam)); @@ -69,7 +69,7 @@ const JiraDashboard: FC = () => { }, [searchParams]); const handlePageNumber = (pageNumber: number): void => { - searchParams.set('page_number', pageNumber.toString()); + searchParams.set('page_number', (pageNumber - 1).toString()); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); }; @@ -83,10 +83,10 @@ const JiraDashboard: FC = () => { const fetchJiraData = (props: any): void => { const { filterQuery = '', isDrawer = false } = props; const finalParams = filterQuery ? `${filterQuery}` : ''; - setPageNumber(1); + setPageNumber(0); searchParamRef.current = finalParams; pageNumberRef.current = `page_number=${ - isDrawer ? currentPageNumber : '1' + isDrawer ? currentPageNumber : '0' }&page_size=${currentPageSize}`; startJiraSearch(`${finalParams}`); }; diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 73caefa..3e458a7 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -5,6 +5,7 @@ import { returnFormattedDate } from '@src/services/globalUtils'; import styles from '../SearchResultsTable.module.scss'; import cx from 'classnames'; import HyperlinkCellRenderer from './HyperlinkCellRenderer'; +import TeamAssignedCellRenderer from './TeamAssignedCellRenderer'; import TicketNameCell from './ticketNameCell'; import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant'; import { Tooltip } from '@navi/web-ui/lib/primitives'; @@ -23,7 +24,6 @@ const defaultColDef = { wrapText: true, autoHeight: true, width: 200, - // tooltipComponent: CustomTooltip, }; const SearchResultsTable: FC = ({ @@ -93,8 +93,6 @@ const SearchResultsTable: FC = ({ ticketType={params.data.ticketType} /> ), - //tooltipField: 'ticketName', - //tooltipComponentParams: { color: '#55AA77' }, }, { field: 'JiraStatus', @@ -119,7 +117,10 @@ const SearchResultsTable: FC = ({ field: 'JiraAssignedTo', headerName: 'JIRA assigned to', suppressMovable: true, - width: 225, + cellRenderer: params => ( + + ), + width: 300, }, { field: 'JiraCreatedOn', @@ -147,7 +148,7 @@ const SearchResultsTable: FC = ({ { + const renderTeamNames = () => { + if (!teamsInvolved || teamsInvolved.length === 0) { + return null; + } + + const firstTeam = teamsInvolved[0]; + const remainingTeams = teamsInvolved.slice(1); + + if (remainingTeams.length === 0) { + // Only one team, display its name + return
{firstTeam}
; + } else { + // More than one team, display the first team and a tooltip with the rest + const tooltipText = remainingTeams.join(', '); + + return ( +
+
+ {firstTeam} & +
+ + +  {remainingTeams.length} more + + +
+
+
+ ); + } + }; + + return
{renderTeamNames()}
; +}; + +export default TeamAssignedCellRenderer; diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 8dd1e5a..385f436 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -6,11 +6,9 @@ import EpicIcon from '@src/assets/JiraIcons/EpicIcon'; import BugIcon from '@src/assets/JiraIcons/BugIcon'; import TechTaskIcon from '@src/assets/JiraIcons/TechTaskIcon'; import { AlertOutlineIcon } from '@navi/web-ui/lib/icons'; -// import { Tooltip } from '@navi/web-ui/lib/primitives'; +import { Tooltip } from '@navi/web-ui/lib/primitives'; import styles from '../Dashboard.module.scss'; -import Tooltip from '@src/components/CustomTooltip'; - const getTicketIcon = (ticketType: string): JSX.Element | null => { switch (ticketType) { case 'Story': @@ -40,8 +38,14 @@ const TicketNameCell = ({ tickerName, ticketLink, ticketType }) => { {ticketType ? ( getTicketIcon(ticketType) ) : ( - - {getTicketIcon('')} + +
+ {getTicketIcon(ticketType)} +
)}
{ > {tickerName}
-
diff --git a/src/components/CustomTooltip/Tooltip.module.scss b/src/components/CustomTooltip/Tooltip.module.scss deleted file mode 100644 index 23e153a..0000000 --- a/src/components/CustomTooltip/Tooltip.module.scss +++ /dev/null @@ -1,112 +0,0 @@ -@mixin arrowTipStyles { - content: ''; - border-width: 4px; - border-style: solid; - position: absolute; - box-sizing: border-box; -} - -.tooltip-wrapper { - position: relative; - display: inline-block; - - .tooltip { - position: absolute; - box-sizing: border-box; - padding: 4px 8px; - border-radius: 4px; - background: var(--navi-tooltip-background-color); - box-shadow: var(--navi-tooltip-drop-shadow); - z-index: 1; - visibility: hidden; - white-space: nowrap; - - &.top { - bottom: calc(100% + 8px); - left: 50%; - transform: translateX(-50%); - } - - &.bottom { - top: calc(100% + 8px); - left: 50%; - transform: translateX(-50%); - } - - &.left { - top: 50%; - right: calc(100% + 8px); - transform: translateY(-50%); - } - - &.right { - top: 50%; - left: calc(100% + 8px); - transform: translateY(-50%); - } - - &.show-tooltip { - visibility: visible; - } - } - - &.with-pointer { - .tooltip { - &.top { - &::after { - @include arrowTipStyles(); - top: 100%; - left: 50%; - transform: translateX(-50%); - border-color: var(--navi-tooltip-background-color) transparent - transparent transparent; - } - } - - &.bottom { - &::after { - @include arrowTipStyles(); - bottom: 100%; - left: 50%; - transform: translateX(-50%); - border-color: transparent transparent - var(--navi-tooltip-background-color) transparent; - } - } - - &.left { - &::after { - @include arrowTipStyles(); - top: 50%; - left: 100%; - transform: translateY(-50%); - border-color: transparent transparent transparent - var(--navi-tooltip-background-color); - } - } - - &.right { - &::after { - @include arrowTipStyles(); - right: 100%; - top: 50%; - transform: translateY(-50%); - border-color: transparent var(--navi-tooltip-background-color) - transparent transparent; - } - } - } - } -} - -.tooltip-wrapper-on-hover { - &:hover { - .tooltip { - visibility: visible; - } - } -} - -:export { - textColor: var(--navi-tooltip-text-color); -} diff --git a/src/components/CustomTooltip/Tooltip.tsx b/src/components/CustomTooltip/Tooltip.tsx deleted file mode 100644 index f869bcf..0000000 --- a/src/components/CustomTooltip/Tooltip.tsx +++ /dev/null @@ -1,41 +0,0 @@ -import React from 'react'; -import cx from 'classnames'; -import Typography from '@navi/web-ui/lib/primitives/Typography'; -import styles from './Tooltip.module.scss'; -import { TooltipProps } from './types'; - -const Tooltip: React.FC = ({ - showTooltip = false, - showOnHover = true, - text = '', - position = 'bottom', - withPointer = true, - children, - ...restProps -}) => { - const tooltipWrapperStyles = cx(styles['tooltip-wrapper'], { - [styles['tooltip-wrapper-on-hover']]: showOnHover, - [styles['with-pointer']]: withPointer, - }); - const tooltipStyles = cx(styles.tooltip, styles[position], { - [styles['show-tooltip']]: showTooltip, - }); - - return ( -
- {children} - - {text} -
dscds
- -
- ); -}; - -export default Tooltip; diff --git a/src/components/CustomTooltip/index.tsx b/src/components/CustomTooltip/index.tsx deleted file mode 100644 index d8851cb..0000000 --- a/src/components/CustomTooltip/index.tsx +++ /dev/null @@ -1,3 +0,0 @@ -import Tooltip from './Tooltip'; - -export default Tooltip; diff --git a/src/components/CustomTooltip/types.ts b/src/components/CustomTooltip/types.ts deleted file mode 100644 index 559064e..0000000 --- a/src/components/CustomTooltip/types.ts +++ /dev/null @@ -1,10 +0,0 @@ -type TooltipPosition = 'left' | 'right' | 'top' | 'bottom'; - -export interface TooltipProps extends React.ComponentPropsWithRef<'div'> { - showTooltip?: boolean; - showOnHover?: boolean; - text: string; - withPointer?: boolean; - position: TooltipPosition; - children?: React.ReactNode; -} From 9035ceeee4c2b26570d566addb5752071b88632a Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 21 Dec 2023 15:43:12 +0530 Subject: [PATCH 14/28] TP-48565 | jira description alignment fix --- src/Pages/JiraDashboard/partials/SearchResultsTable.tsx | 4 +--- src/Pages/JiraDashboard/partials/ticketNameCell.tsx | 2 +- 2 files changed, 2 insertions(+), 4 deletions(-) diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 3e458a7..0dc5719 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -104,13 +104,11 @@ const SearchResultsTable: FC = ({ headerName: 'JIRA description', suppressMovable: true, width: 500, - maxwidth: 500, - minwidth: 500, + cellStyle: { 'text-overflow': 'ellipsis', 'white-space': 'nowrap', overflow: 'hidden', - padding: 0, }, }, { diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 385f436..d8acdd2 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -40,7 +40,7 @@ const TicketNameCell = ({ tickerName, ticketLink, ticketType }) => { ) : (
From 144e04b8126bbc55b72bb8c5f38d3e1698bd71b0 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 21 Dec 2023 18:31:35 +0530 Subject: [PATCH 15/28] TP-48565 | added fc and interface --- src/Pages/JiraDashboard/Dashboard.module.scss | 3 +-- src/Pages/JiraDashboard/index.tsx | 8 +++++-- .../partials/DashboardHeader.tsx | 2 +- .../partials/HyperlinkCellRenderer.tsx | 12 +++++++++-- .../partials/SearchResultsTable.tsx | 13 ++++-------- .../JiraDashboard/partials/SmartSearch.tsx | 8 +++---- .../partials/TeamAssignedCellRenderer.tsx | 21 +++++++------------ .../JiraDashboard/partials/ticketNameCell.tsx | 13 +++++++++++- src/services/globalUtils.ts | 2 +- src/slices/jiraDashboardSlice.tsx | 4 ++-- src/types/index.d.ts | 12 +++++++++++ 11 files changed, 61 insertions(+), 37 deletions(-) diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index 7c836a2..15b104b 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -12,7 +12,6 @@ display: flex; align-items: center; gap: 8px; - // position: fixed; } .id-wrapper { @@ -52,7 +51,7 @@ } .alert-icon { - margin-top: 4px; + margin-top: 6px; } .team-parent-style { diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index b531147..cad3f11 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -5,13 +5,17 @@ import { toast } from '@navi/web-ui/lib/primitives/Toast/index'; import FallbackComponent from '@src/components/Fallback'; import { setJiraDashboardData } from '@src/slices/jiraDashboardSlice'; import { ApiService } from '@src/services/api'; +import { JiraDashboardData } from '@src/types'; import { FETCH_JIRA_DATA } from './constants'; import SearchResultsTable from './partials/SearchResultsTable'; import DashboardHeader from './partials/DashboardHeader'; import styles from './Dashboard.module.scss'; const JiraDashboard: FC = () => { - const data = useSelector((state: any) => state.jiraDashboard.data); + const data = useSelector( + (state: { jiraDashboard: { data: JiraDashboardData[] } }) => + state.jiraDashboard.data, + ); const dispatch = useDispatch(); const [pageDetails, setPageDetails] = useState({ pageNumber: 0, @@ -28,7 +32,7 @@ const JiraDashboard: FC = () => { const searchParamRef = useRef(''); const navigate = useNavigate(); - const startJiraSearch = (param): void => { + const startJiraSearch = (param: string): void => { const endPoint = FETCH_JIRA_DATA(param); setIsLoading(true); ApiService.get(endPoint) diff --git a/src/Pages/JiraDashboard/partials/DashboardHeader.tsx b/src/Pages/JiraDashboard/partials/DashboardHeader.tsx index c92bc18..c49700b 100644 --- a/src/Pages/JiraDashboard/partials/DashboardHeader.tsx +++ b/src/Pages/JiraDashboard/partials/DashboardHeader.tsx @@ -7,7 +7,7 @@ import styles from './DashboardHeader.module.scss'; import SmartSearch from './SmartSearch'; interface DashboardHeaderProps { - fetchJiraData: (payload: any) => void; + fetchJiraData: (payload: { filterQuery: string }) => void; } const DashboardHeader: FC = ({ fetchJiraData }) => { diff --git a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx index 48bc893..47db4be 100644 --- a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx +++ b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx @@ -1,9 +1,17 @@ -import React from 'react'; +import React, { FC } from 'react'; import { useNavigate } from 'react-router-dom'; import GoToLinkIcon from '@src/assets/GoToLinkIcon'; import styles from '../Dashboard.module.scss'; -const HyperlinkCellRenderer = ({ value, id }) => { +interface HyperlinkCellRendererProps { + value: string; + id: number; +} + +const HyperlinkCellRenderer: FC = ({ + value, + id, +}) => { const navigate = useNavigate(); const handleClick = (): void => { navigate(`/incident/${id}`); diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 0dc5719..7760cc2 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -1,15 +1,14 @@ import { FC, useState, useRef } from 'react'; import { useNavigate } from 'react-router-dom'; import { AgTable, Pagination } from '@navi/web-ui/lib/components'; +import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant'; import { returnFormattedDate } from '@src/services/globalUtils'; -import styles from '../SearchResultsTable.module.scss'; import cx from 'classnames'; import HyperlinkCellRenderer from './HyperlinkCellRenderer'; import TeamAssignedCellRenderer from './TeamAssignedCellRenderer'; import TicketNameCell from './ticketNameCell'; -import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant'; -import { Tooltip } from '@navi/web-ui/lib/primitives'; -//TO DO: will be moved to constants file +import styles from '../SearchResultsTable.module.scss'; + interface SearchResultTableProps { currentPageData: any; pageDetails: any; @@ -45,7 +44,6 @@ const SearchResultsTable: FC = ({ overflow: 'hidden', }; - //TO DO: this will change once backend is ready currently using it for testing const rowData = currentPageData?.map((item: any, ind: number) => { let index = 1; @@ -68,7 +66,6 @@ const SearchResultsTable: FC = ({ }; }); - //TO DO: column data will change once backend is ready const columnData = [ { field: 'incidentName', @@ -156,7 +153,7 @@ const SearchResultsTable: FC = ({ columnDefs={columnData} rowData={rowData} theme="alpine" - sizeColumnsToFit + sizeColumnsToFit={true} domLayout="autoHeight" paginationWrapperClasses={styles['pagination-wrapper-class']} suppressCellFocus @@ -166,8 +163,6 @@ const SearchResultsTable: FC = ({ suppressColumnMoveAnimation rowHeight={54} detailRowAutoHeight={true} - tooltipShowDelay={0} - tooltipHideDelay={2000} />
); diff --git a/src/Pages/JiraDashboard/partials/SmartSearch.tsx b/src/Pages/JiraDashboard/partials/SmartSearch.tsx index 7701aad..d802a65 100644 --- a/src/Pages/JiraDashboard/partials/SmartSearch.tsx +++ b/src/Pages/JiraDashboard/partials/SmartSearch.tsx @@ -1,9 +1,9 @@ -import React, { FC, useState, useEffect } from 'react'; +import React, { FC, useEffect } from 'react'; +import { useSearchParams } from 'react-router-dom'; import cx from 'classnames'; -import { Button, BorderedInput } from '@navi/web-ui/lib/primitives'; +import { BorderedInput } from '@navi/web-ui/lib/primitives'; import SearchIcon from '@navi/web-ui/lib/icons/SearchIcon/SearchIcon'; import styles from './DashboardHeader.module.scss'; -import { useSearchParams } from 'react-router-dom'; interface SmartSearchProps { setSearchValue: (payload: string) => void; @@ -35,7 +35,7 @@ const SmartSearch: FC = ({ const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); }; - //TO DO: will be moved to constants file + const placeHolder = 'Search by Houston I.D.'; const onKeyPressClickHandler = (event: React.KeyboardEvent): void => { diff --git a/src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx b/src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx index 4c18f5f..4d33162 100644 --- a/src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx +++ b/src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx @@ -1,13 +1,15 @@ -import React from 'react'; +import React, { FC } from 'react'; import styles from '../Dashboard.module.scss'; import { Tooltip, Typography } from '@navi/web-ui/lib/primitives'; -const TeamAssignedCellRenderer = ({ - teamsInvolved, -}: { +interface TeamAssignedCellRendererProps { teamsInvolved: string[]; +} + +const TeamAssignedCellRenderer: FC = ({ + teamsInvolved, }) => { - const renderTeamNames = () => { + const renderTeamNames = (): React.ReactNode => { if (!teamsInvolved || teamsInvolved.length === 0) { return null; } @@ -16,10 +18,8 @@ const TeamAssignedCellRenderer = ({ const remainingTeams = teamsInvolved.slice(1); if (remainingTeams.length === 0) { - // Only one team, display its name return
{firstTeam}
; } else { - // More than one team, display the first team and a tooltip with the rest const tooltipText = remainingTeams.join(', '); return ( @@ -27,12 +27,7 @@ const TeamAssignedCellRenderer = ({
{firstTeam} &
- +  {remainingTeams.length} more diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index d8acdd2..6b17e58 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -1,3 +1,4 @@ +import React, { FC } from 'react'; import GoToLinkIcon from '@src/assets/GoToLinkIcon'; import StoryIcon from '@src/assets/JiraIcons/StoryIcon'; import SubTaskIcon from '@src/assets/JiraIcons/SubTaskIcon'; @@ -28,7 +29,17 @@ const getTicketIcon = (ticketType: string): JSX.Element | null => { } }; -const TicketNameCell = ({ tickerName, ticketLink, ticketType }) => { +interface TicketNameCellProps { + tickerName: string; + ticketLink: string; + ticketType: string; +} + +const TicketNameCell: FC = ({ + tickerName, + ticketLink, + ticketType, +}) => { const handleClick = (): void => { window.open(ticketLink, '_blank'); }; diff --git a/src/services/globalUtils.ts b/src/services/globalUtils.ts index 52980a8..47eb489 100644 --- a/src/services/globalUtils.ts +++ b/src/services/globalUtils.ts @@ -24,7 +24,7 @@ export const convertToCamelCase = (input: string): string => { export const returnFormattedDate = (date: any): string => { if (!date) { - return '-'; + return ''; } const formattedDate = new Date(date); return `${formattedDate?.toLocaleDateString()} ${formattedDate?.toLocaleTimeString()}`; diff --git a/src/slices/jiraDashboardSlice.tsx b/src/slices/jiraDashboardSlice.tsx index 5a949ef..ae95fab 100644 --- a/src/slices/jiraDashboardSlice.tsx +++ b/src/slices/jiraDashboardSlice.tsx @@ -1,9 +1,9 @@ import { createSlice } from '@reduxjs/toolkit'; - +import { JiraDashboardData } from '@src/types'; const jiraDashboardSlice = createSlice({ name: 'jiraDashboard', initialState: { - data: Array(), + data: [] as JiraDashboardData[], }, reducers: { setJiraDashboardData: (state, action) => { diff --git a/src/types/index.d.ts b/src/types/index.d.ts index d634852..e987ac0 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -23,3 +23,15 @@ export interface CustomRouteObject { element: JSX.Element; } declare module '*.module.scss'; + +export interface JiraDashboardData { + incidentID: number; + incidentName: string; + jiraKey: string; + jiraLink: string; + jiraType: string; + jiraSummary: string; + jiraStatus: string; + teamsInvolved: string[]; + jiraCreateAt: string; +} From a72cf3be344b7fa818104e57705eb4b4a13be888 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 21 Dec 2023 18:39:45 +0530 Subject: [PATCH 16/28] TP-48565 | type added --- src/Pages/JiraDashboard/partials/SearchResultsTable.tsx | 8 ++++++-- 1 file changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 7760cc2..b9e286a 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -3,6 +3,7 @@ import { useNavigate } from 'react-router-dom'; import { AgTable, Pagination } from '@navi/web-ui/lib/components'; import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant'; import { returnFormattedDate } from '@src/services/globalUtils'; +import { JiraDashboardData } from '@src/types'; import cx from 'classnames'; import HyperlinkCellRenderer from './HyperlinkCellRenderer'; import TeamAssignedCellRenderer from './TeamAssignedCellRenderer'; @@ -10,8 +11,11 @@ import TicketNameCell from './ticketNameCell'; import styles from '../SearchResultsTable.module.scss'; interface SearchResultTableProps { - currentPageData: any; - pageDetails: any; + currentPageData: JiraDashboardData[]; + pageDetails: { + pageNumber: number; + totalElements: number; + }; currentPageSize: number; handlePageNumberChange: (pageNumber: number) => void; handlePageSizeChange: (pageSize: number) => void; From b8e50ad80e9585b597c7b5b1f000ecc40c6b79c9 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Fri, 22 Dec 2023 11:01:32 +0530 Subject: [PATCH 17/28] TP-48565 | minor fix --- src/Pages/JiraDashboard/partials/DashboardHeader.module.scss | 4 ++++ src/Pages/JiraDashboard/partials/SearchResultsTable.tsx | 5 +++-- 2 files changed, 7 insertions(+), 2 deletions(-) diff --git a/src/Pages/JiraDashboard/partials/DashboardHeader.module.scss b/src/Pages/JiraDashboard/partials/DashboardHeader.module.scss index 8398a69..e36d964 100644 --- a/src/Pages/JiraDashboard/partials/DashboardHeader.module.scss +++ b/src/Pages/JiraDashboard/partials/DashboardHeader.module.scss @@ -43,4 +43,8 @@ } } } + + * input::placeholder { + color: var(--navi-color-gray-c3) !important; + } } diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index b9e286a..9102f75 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -1,4 +1,4 @@ -import { FC, useState, useRef } from 'react'; +import { FC, useState, useRef, useEffect } from 'react'; import { useNavigate } from 'react-router-dom'; import { AgTable, Pagination } from '@navi/web-ui/lib/components'; import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant'; @@ -46,6 +46,7 @@ const SearchResultsTable: FC = ({ 'text-overflow': 'ellipsis', 'white-space': 'nowrap', overflow: 'hidden', + enableColResize: true, }; const rowData = currentPageData?.map((item: any, ind: number) => { @@ -105,7 +106,6 @@ const SearchResultsTable: FC = ({ headerName: 'JIRA description', suppressMovable: true, width: 500, - cellStyle: { 'text-overflow': 'ellipsis', 'white-space': 'nowrap', @@ -126,6 +126,7 @@ const SearchResultsTable: FC = ({ headerName: 'JIRA created on', suppressMovable: true, width: 200, + flex: 1, }, ]; From 83cfe0e86c407c4d7eef422ecb1082898e5d5917 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Wed, 3 Jan 2024 12:29:17 +0530 Subject: [PATCH 18/28] TP-48565 | comments resolved --- src/Pages/JiraDashboard/Dashboard.module.scss | 4 ++++ src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx | 2 +- src/Pages/JiraDashboard/partials/ticketNameCell.tsx | 2 +- 3 files changed, 6 insertions(+), 2 deletions(-) diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index 15b104b..e614656 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -1,3 +1,7 @@ +:export { + goToLinkColor: #0276fe; +} + .table-wrapper { box-sizing: border-box; padding-bottom: 24px; diff --git a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx index 47db4be..e8556e6 100644 --- a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx +++ b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx @@ -27,7 +27,7 @@ const HyperlinkCellRenderer: FC = ({ {value}
- +
); diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 6b17e58..5fa7bc0 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -67,7 +67,7 @@ const TicketNameCell: FC = ({ {tickerName}
- +
From c1dfcc4393b9921fffd794086edbce3e50764719 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Wed, 3 Jan 2024 15:52:42 +0530 Subject: [PATCH 19/28] TP-48565 | styling comment resolve --- src/Pages/JiraDashboard/Dashboard.module.scss | 1 + .../JiraDashboard/partials/HyperlinkCellRenderer.tsx | 6 +----- src/Pages/JiraDashboard/partials/SmartSearch.tsx | 4 +--- .../partials/TeamAssignedCellRenderer.tsx | 2 +- src/Pages/JiraDashboard/partials/ticketNameCell.tsx | 10 +++------- 5 files changed, 7 insertions(+), 16 deletions(-) diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index e614656..8e79de1 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -44,6 +44,7 @@ &:hover { .hyperlink { color: var(--navi-color-blue-base); + cursor: pointer; } .go-to-link-icon { diff --git a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx index e8556e6..4becf79 100644 --- a/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx +++ b/src/Pages/JiraDashboard/partials/HyperlinkCellRenderer.tsx @@ -19,11 +19,7 @@ const HyperlinkCellRenderer: FC = ({ return (
-
+
{value}
diff --git a/src/Pages/JiraDashboard/partials/SmartSearch.tsx b/src/Pages/JiraDashboard/partials/SmartSearch.tsx index d802a65..e686262 100644 --- a/src/Pages/JiraDashboard/partials/SmartSearch.tsx +++ b/src/Pages/JiraDashboard/partials/SmartSearch.tsx @@ -36,8 +36,6 @@ const SmartSearch: FC = ({ updateURLAndFetchData(updatedQuery); }; - const placeHolder = 'Search by Houston I.D.'; - const onKeyPressClickHandler = (event: React.KeyboardEvent): void => { if (event.key === 'Enter') { if (searchValue === '') { @@ -57,7 +55,7 @@ const SmartSearch: FC = ({ fullWidth value={searchValue} onChange={handleSearchInput} - placeholder={placeHolder} + placeholder="Search by Houston I.D." containerClassName={cx(styles['input-container'])} onKeyPress={onKeyPressClickHandler} /> diff --git a/src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx b/src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx index 4d33162..cb56744 100644 --- a/src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx +++ b/src/Pages/JiraDashboard/partials/TeamAssignedCellRenderer.tsx @@ -28,7 +28,7 @@ const TeamAssignedCellRenderer: FC = ({ {firstTeam} &
- +  {remainingTeams.length} more diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 5fa7bc0..471c161 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -1,4 +1,6 @@ import React, { FC } from 'react'; +import { AlertOutlineIcon } from '@navi/web-ui/lib/icons'; +import { Tooltip } from '@navi/web-ui/lib/primitives'; import GoToLinkIcon from '@src/assets/GoToLinkIcon'; import StoryIcon from '@src/assets/JiraIcons/StoryIcon'; import SubTaskIcon from '@src/assets/JiraIcons/SubTaskIcon'; @@ -6,8 +8,6 @@ import TaskIcon from '@src/assets/JiraIcons/TaskIcon'; import EpicIcon from '@src/assets/JiraIcons/EpicIcon'; import BugIcon from '@src/assets/JiraIcons/BugIcon'; import TechTaskIcon from '@src/assets/JiraIcons/TechTaskIcon'; -import { AlertOutlineIcon } from '@navi/web-ui/lib/icons'; -import { Tooltip } from '@navi/web-ui/lib/primitives'; import styles from '../Dashboard.module.scss'; const getTicketIcon = (ticketType: string): JSX.Element | null => { @@ -59,11 +59,7 @@ const TicketNameCell: FC = ({
)} -
+
{tickerName}
From 6c3cb7833f6361c5cae0e3724620f4fc7e927c7b Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Wed, 3 Jan 2024 16:48:07 +0530 Subject: [PATCH 20/28] TP-48565 | pageDetail to redux --- src/Pages/JiraDashboard/index.tsx | 19 +++++++++++-------- src/slices/jiraDashboardSlice.tsx | 23 ++++++++++++++++++----- 2 files changed, 29 insertions(+), 13 deletions(-) diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index cad3f11..d5a8de9 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -3,9 +3,12 @@ import { useSearchParams, useNavigate } from 'react-router-dom'; import { useDispatch, useSelector } from 'react-redux'; import { toast } from '@navi/web-ui/lib/primitives/Toast/index'; import FallbackComponent from '@src/components/Fallback'; -import { setJiraDashboardData } from '@src/slices/jiraDashboardSlice'; +import { + setJiraDashboardData, + setPageDetails, +} from '@src/slices/jiraDashboardSlice'; import { ApiService } from '@src/services/api'; -import { JiraDashboardData } from '@src/types'; +import { JiraDashboardData, JiraDashboardState } from '@src/types'; import { FETCH_JIRA_DATA } from './constants'; import SearchResultsTable from './partials/SearchResultsTable'; import DashboardHeader from './partials/DashboardHeader'; @@ -16,12 +19,12 @@ const JiraDashboard: FC = () => { (state: { jiraDashboard: { data: JiraDashboardData[] } }) => state.jiraDashboard.data, ); + const pageDetails = useSelector( + (state: { jiraDashboard: JiraDashboardState }) => + state.jiraDashboard.pageDetails, + ); + const dispatch = useDispatch(); - const [pageDetails, setPageDetails] = useState({ - pageNumber: 0, - pageSize: 10, - totalElements: 0, - }); const [isLoading, setIsLoading] = useState(false); const [currentPageNumber, setPageNumber] = useState(0); const [currentPageSize, setPageSize] = useState(10); @@ -39,7 +42,7 @@ const JiraDashboard: FC = () => { .then(response => { setIsLoading(false); dispatch(setJiraDashboardData(response?.data?.data)); - setPageDetails(response?.data?.page); + dispatch(setPageDetails(response?.data?.page)); }) .catch(error => { const toastMessage = `${ diff --git a/src/slices/jiraDashboardSlice.tsx b/src/slices/jiraDashboardSlice.tsx index ae95fab..e5811c0 100644 --- a/src/slices/jiraDashboardSlice.tsx +++ b/src/slices/jiraDashboardSlice.tsx @@ -1,16 +1,29 @@ import { createSlice } from '@reduxjs/toolkit'; -import { JiraDashboardData } from '@src/types'; +import { JiraDashboardState } from '@src/types'; + +const initialState: JiraDashboardState = { + data: [], + pageDetails: { + pageNumber: 0, + pageSize: 10, + totalElements: 0, + }, +}; + const jiraDashboardSlice = createSlice({ name: 'jiraDashboard', - initialState: { - data: [] as JiraDashboardData[], - }, + initialState, reducers: { setJiraDashboardData: (state, action) => { state.data = action.payload; }, + setPageDetails: (state, action) => { + state.pageDetails = action.payload; + }, }, }); -export const { setJiraDashboardData } = jiraDashboardSlice.actions; +export const { setJiraDashboardData, setPageDetails } = + jiraDashboardSlice.actions; + export default jiraDashboardSlice.reducer; From f82724891300cd7c31ce7207accb935967de83d3 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Wed, 3 Jan 2024 17:55:13 +0530 Subject: [PATCH 21/28] TP-48565 | migration to store --- src/Pages/JiraDashboard/index.tsx | 38 +++++++++++++------------------ src/slices/jiraDashboardSlice.tsx | 21 +++++++++++++++-- src/types/index.d.ts | 12 ++++++++++ 3 files changed, 47 insertions(+), 24 deletions(-) diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index d5a8de9..7dbdfeb 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -6,6 +6,9 @@ import FallbackComponent from '@src/components/Fallback'; import { setJiraDashboardData, setPageDetails, + setIsLoading, + setCurrentPageNumber, + setCurrentPageSize, } from '@src/slices/jiraDashboardSlice'; import { ApiService } from '@src/services/api'; import { JiraDashboardData, JiraDashboardState } from '@src/types'; @@ -19,28 +22,23 @@ const JiraDashboard: FC = () => { (state: { jiraDashboard: { data: JiraDashboardData[] } }) => state.jiraDashboard.data, ); - const pageDetails = useSelector( - (state: { jiraDashboard: JiraDashboardState }) => - state.jiraDashboard.pageDetails, - ); + const { pageDetails, isLoading, currentPageNumber, currentPageSize } = + useSelector( + (state: { jiraDashboard: JiraDashboardState }) => state.jiraDashboard, + ); const dispatch = useDispatch(); - const [isLoading, setIsLoading] = useState(false); - const [currentPageNumber, setPageNumber] = useState(0); - const [currentPageSize, setPageSize] = useState(10); const [searchParams, setSearchParams] = useSearchParams(); - const pageNumberRef = useRef( - `page_number=${currentPageNumber}&page_size=${currentPageSize}`, - ); + const searchParamRef = useRef(''); const navigate = useNavigate(); const startJiraSearch = (param: string): void => { const endPoint = FETCH_JIRA_DATA(param); - setIsLoading(true); + dispatch(setIsLoading(true)); ApiService.get(endPoint) .then(response => { - setIsLoading(false); + dispatch(setIsLoading(false)); dispatch(setJiraDashboardData(response?.data?.data)); dispatch(setPageDetails(response?.data?.page)); }) @@ -50,7 +48,7 @@ const JiraDashboard: FC = () => { ? `${error?.response?.data?.error?.message},` : '' }`; - setIsLoading(false); + dispatch(setIsLoading(true)); toast.error(toastMessage); dispatch(setJiraDashboardData([])); }); @@ -60,16 +58,16 @@ const JiraDashboard: FC = () => { const pageNumberParam = searchParams.get('page_number'); const pageSizeParam = searchParams.get('page_size'); if (pageNumberParam) { - setPageNumber(Number(pageNumberParam)); + dispatch(setCurrentPageNumber(Number(pageNumberParam))); } else { searchParams.set('page_number', '0'); - setPageNumber(0); + dispatch(setCurrentPageNumber(0)); } if (pageSizeParam) { - setPageSize(Number(pageSizeParam)); + dispatch(setCurrentPageSize(Number(pageSizeParam))); } else { searchParams.set('page_size', '10'); - setPageSize(10); + dispatch(setCurrentPageSize(10)); } const searchParam = searchParams.toString(); updateURLAndFetchData(searchParam); @@ -90,11 +88,7 @@ const JiraDashboard: FC = () => { const fetchJiraData = (props: any): void => { const { filterQuery = '', isDrawer = false } = props; const finalParams = filterQuery ? `${filterQuery}` : ''; - setPageNumber(0); - searchParamRef.current = finalParams; - pageNumberRef.current = `page_number=${ - isDrawer ? currentPageNumber : '0' - }&page_size=${currentPageSize}`; + dispatch(setCurrentPageNumber(0)); startJiraSearch(`${finalParams}`); }; diff --git a/src/slices/jiraDashboardSlice.tsx b/src/slices/jiraDashboardSlice.tsx index e5811c0..8cf2794 100644 --- a/src/slices/jiraDashboardSlice.tsx +++ b/src/slices/jiraDashboardSlice.tsx @@ -8,6 +8,9 @@ const initialState: JiraDashboardState = { pageSize: 10, totalElements: 0, }, + isLoading: false, + currentPageNumber: 0, + currentPageSize: 10, }; const jiraDashboardSlice = createSlice({ @@ -20,10 +23,24 @@ const jiraDashboardSlice = createSlice({ setPageDetails: (state, action) => { state.pageDetails = action.payload; }, + setIsLoading: (state, action) => { + state.isLoading = action.payload; + }, + setCurrentPageNumber: (state, action) => { + state.currentPageNumber = action.payload; + }, + setCurrentPageSize: (state, action) => { + state.currentPageSize = action.payload; + }, }, }); -export const { setJiraDashboardData, setPageDetails } = - jiraDashboardSlice.actions; +export const { + setJiraDashboardData, + setPageDetails, + setIsLoading, + setCurrentPageNumber, + setCurrentPageSize, +} = jiraDashboardSlice.actions; export default jiraDashboardSlice.reducer; diff --git a/src/types/index.d.ts b/src/types/index.d.ts index e987ac0..4ca4f90 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -35,3 +35,15 @@ export interface JiraDashboardData { teamsInvolved: string[]; jiraCreateAt: string; } + +export interface JiraDashboardState { + data: JiraDashboardData[]; + pageDetails: { + pageNumber: number; + pageSize: number; + totalElements: number; + }; + isLoading: boolean; + currentPageNumber: number; + currentPageSize: number; +} From 9ab5b92d01ceafc8a873d1a9b0cf84db405a4253 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Wed, 3 Jan 2024 19:25:34 +0530 Subject: [PATCH 22/28] TP-48565 | minor fix --- src/Pages/JiraDashboard/index.tsx | 2 -- src/Pages/JiraDashboard/partials/SearchResultsTable.tsx | 4 ---- 2 files changed, 6 deletions(-) diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index 7dbdfeb..299b244 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -29,8 +29,6 @@ const JiraDashboard: FC = () => { const dispatch = useDispatch(); const [searchParams, setSearchParams] = useSearchParams(); - - const searchParamRef = useRef(''); const navigate = useNavigate(); const startJiraSearch = (param: string): void => { diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 9102f75..5cd9f48 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -35,12 +35,8 @@ const SearchResultsTable: FC = ({ currentPageSize, handlePageNumberChange, handlePageSizeChange, - fetchJiraData, }) => { const { pageNumber, totalElements } = pageDetails; - const [drawerState, setDrawerState] = useState(false); - const incidentData = useRef({}); - const navigate = useNavigate(); const cellStyle = { 'text-overflow': 'ellipsis', From e8e86d302c77b8b0609ccfce33f4415889ddfd5d Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Wed, 3 Jan 2024 20:21:21 +0530 Subject: [PATCH 23/28] TP-48565 | minor fix --- src/Pages/JiraDashboard/Dashboard.module.scss | 4 ++++ src/Pages/JiraDashboard/partials/SearchResultsTable.tsx | 3 ++- src/Pages/JiraDashboard/partials/ticketNameCell.tsx | 2 +- src/Pages/JiraDashboard/types.ts | 4 ++++ 4 files changed, 11 insertions(+), 2 deletions(-) create mode 100644 src/Pages/JiraDashboard/types.ts diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index 8e79de1..b86d37d 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -2,6 +2,10 @@ goToLinkColor: #0276fe; } +:export { + alertIconRed: #e92c2c; +} + .table-wrapper { box-sizing: border-box; padding-bottom: 24px; diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 5cd9f48..5abe787 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -5,6 +5,7 @@ import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constan import { returnFormattedDate } from '@src/services/globalUtils'; import { JiraDashboardData } from '@src/types'; import cx from 'classnames'; +import { FetchJiraDataProps } from '../types'; import HyperlinkCellRenderer from './HyperlinkCellRenderer'; import TeamAssignedCellRenderer from './TeamAssignedCellRenderer'; import TicketNameCell from './ticketNameCell'; @@ -19,7 +20,7 @@ interface SearchResultTableProps { currentPageSize: number; handlePageNumberChange: (pageNumber: number) => void; handlePageSizeChange: (pageSize: number) => void; - fetchJiraData: (props: any) => void; + fetchJiraData: (props: FetchJiraDataProps) => void; } const defaultColDef = { diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 471c161..12e7947 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -25,7 +25,7 @@ const getTicketIcon = (ticketType: string): JSX.Element | null => { case 'Tech Task': return ; default: - return ; + return ; } }; diff --git a/src/Pages/JiraDashboard/types.ts b/src/Pages/JiraDashboard/types.ts new file mode 100644 index 0000000..a4a954d --- /dev/null +++ b/src/Pages/JiraDashboard/types.ts @@ -0,0 +1,4 @@ +export type FetchJiraDataProps = { + filterQuery?: string; + isDrawer?: boolean; +}; From 4626d6421d7a25a84637c01aa4658d6bdc74bf64 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Wed, 3 Jan 2024 23:04:56 +0530 Subject: [PATCH 24/28] TP-48565 | added proper types --- src/Pages/JiraDashboard/index.tsx | 3 ++- .../JiraDashboard/partials/SearchResultsTable.tsx | 7 +++---- src/Pages/JiraDashboard/types.ts | 12 ++++++++++++ 3 files changed, 17 insertions(+), 5 deletions(-) diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index 299b244..4b16c10 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -12,6 +12,7 @@ import { } from '@src/slices/jiraDashboardSlice'; import { ApiService } from '@src/services/api'; import { JiraDashboardData, JiraDashboardState } from '@src/types'; +import { FetchJiraDataProps } from './types'; import { FETCH_JIRA_DATA } from './constants'; import SearchResultsTable from './partials/SearchResultsTable'; import DashboardHeader from './partials/DashboardHeader'; @@ -83,7 +84,7 @@ const JiraDashboard: FC = () => { updateURLAndFetchData(updatedQuery); }; - const fetchJiraData = (props: any): void => { + const fetchJiraData = (props: FetchJiraDataProps): void => { const { filterQuery = '', isDrawer = false } = props; const finalParams = filterQuery ? `${filterQuery}` : ''; dispatch(setCurrentPageNumber(0)); diff --git a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx index 5abe787..b41f37f 100644 --- a/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx +++ b/src/Pages/JiraDashboard/partials/SearchResultsTable.tsx @@ -1,11 +1,10 @@ -import { FC, useState, useRef, useEffect } from 'react'; -import { useNavigate } from 'react-router-dom'; +import { FC } from 'react'; import { AgTable, Pagination } from '@navi/web-ui/lib/components'; import { DropDownPosition } from '@navi/web-ui/lib/components/Pagination/constant'; import { returnFormattedDate } from '@src/services/globalUtils'; import { JiraDashboardData } from '@src/types'; import cx from 'classnames'; -import { FetchJiraDataProps } from '../types'; +import { FetchJiraDataProps, JiraTableRow } from '../types'; import HyperlinkCellRenderer from './HyperlinkCellRenderer'; import TeamAssignedCellRenderer from './TeamAssignedCellRenderer'; import TicketNameCell from './ticketNameCell'; @@ -46,7 +45,7 @@ const SearchResultsTable: FC = ({ enableColResize: true, }; - const rowData = currentPageData?.map((item: any, ind: number) => { + const rowData = currentPageData?.map((item: JiraTableRow, ind: number) => { let index = 1; if (pageNumber === 0) { diff --git a/src/Pages/JiraDashboard/types.ts b/src/Pages/JiraDashboard/types.ts index a4a954d..cf9fb4b 100644 --- a/src/Pages/JiraDashboard/types.ts +++ b/src/Pages/JiraDashboard/types.ts @@ -2,3 +2,15 @@ export type FetchJiraDataProps = { filterQuery?: string; isDrawer?: boolean; }; + +export type JiraTableRow = { + incidentID: number; + incidentName: string; + jiraKey: string; + jiraLink: string; + jiraType: string; + jiraSummary: string; + jiraStatus: string; + teamsInvolved: string[]; + jiraCreateAt: string; +}; From 2e35d76f3051c283009cca5a3cc143686b937e81 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 4 Jan 2024 10:56:24 +0530 Subject: [PATCH 25/28] TP-48565 | comment resolved --- src/Pages/JiraDashboard/Dashboard.module.scss | 13 +++++-------- src/Pages/JiraDashboard/index.tsx | 1 + .../JiraDashboard/partials/ticketNameCell.tsx | 16 +++++++++------- src/assets/index.ts | 7 +++++++ 4 files changed, 22 insertions(+), 15 deletions(-) create mode 100644 src/assets/index.ts diff --git a/src/Pages/JiraDashboard/Dashboard.module.scss b/src/Pages/JiraDashboard/Dashboard.module.scss index b86d37d..b50c433 100644 --- a/src/Pages/JiraDashboard/Dashboard.module.scss +++ b/src/Pages/JiraDashboard/Dashboard.module.scss @@ -1,11 +1,3 @@ -:export { - goToLinkColor: #0276fe; -} - -:export { - alertIconRed: #e92c2c; -} - .table-wrapper { box-sizing: border-box; padding-bottom: 24px; @@ -74,3 +66,8 @@ align-items: center; position: fixed; } + +:export { + goToLinkColor: #0276fe; + alertIconRed: #e92c2c; +} diff --git a/src/Pages/JiraDashboard/index.tsx b/src/Pages/JiraDashboard/index.tsx index 4b16c10..1ec5e2f 100644 --- a/src/Pages/JiraDashboard/index.tsx +++ b/src/Pages/JiraDashboard/index.tsx @@ -56,6 +56,7 @@ const JiraDashboard: FC = () => { useEffect(() => { const pageNumberParam = searchParams.get('page_number'); const pageSizeParam = searchParams.get('page_size'); + //TODO: creating a general util for below to be used across all both dashboards if (pageNumberParam) { dispatch(setCurrentPageNumber(Number(pageNumberParam))); } else { diff --git a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx index 12e7947..faa4036 100644 --- a/src/Pages/JiraDashboard/partials/ticketNameCell.tsx +++ b/src/Pages/JiraDashboard/partials/ticketNameCell.tsx @@ -1,13 +1,15 @@ import React, { FC } from 'react'; import { AlertOutlineIcon } from '@navi/web-ui/lib/icons'; import { Tooltip } from '@navi/web-ui/lib/primitives'; -import GoToLinkIcon from '@src/assets/GoToLinkIcon'; -import StoryIcon from '@src/assets/JiraIcons/StoryIcon'; -import SubTaskIcon from '@src/assets/JiraIcons/SubTaskIcon'; -import TaskIcon from '@src/assets/JiraIcons/TaskIcon'; -import EpicIcon from '@src/assets/JiraIcons/EpicIcon'; -import BugIcon from '@src/assets/JiraIcons/BugIcon'; -import TechTaskIcon from '@src/assets/JiraIcons/TechTaskIcon'; +import { + GoToLinkIcon, + StoryIcon, + SubTaskIcon, + TaskIcon, + EpicIcon, + BugIcon, + TechTaskIcon, +} from '@src/assets'; import styles from '../Dashboard.module.scss'; const getTicketIcon = (ticketType: string): JSX.Element | null => { diff --git a/src/assets/index.ts b/src/assets/index.ts new file mode 100644 index 0000000..9bfc202 --- /dev/null +++ b/src/assets/index.ts @@ -0,0 +1,7 @@ +export { default as GoToLinkIcon } from './GoToLinkIcon'; +export { default as StoryIcon } from './JiraIcons/StoryIcon'; +export { default as SubTaskIcon } from './JiraIcons/SubTaskIcon'; +export { default as TaskIcon } from './JiraIcons/TaskIcon'; +export { default as EpicIcon } from './JiraIcons/EpicIcon'; +export { default as BugIcon } from './JiraIcons/BugIcon'; +export { default as TechTaskIcon } from './JiraIcons/TechTaskIcon'; From c03d5f2189fe4529cd5bf0c3904d182d12a5110d Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Thu, 4 Jan 2024 13:51:05 +0530 Subject: [PATCH 26/28] TP-48565 | added action types --- src/slices/jiraDashboardSlice.tsx | 20 +++++++++++++------- src/types/index.d.ts | 6 ++++++ 2 files changed, 19 insertions(+), 7 deletions(-) diff --git a/src/slices/jiraDashboardSlice.tsx b/src/slices/jiraDashboardSlice.tsx index 8cf2794..81d75a9 100644 --- a/src/slices/jiraDashboardSlice.tsx +++ b/src/slices/jiraDashboardSlice.tsx @@ -1,5 +1,11 @@ -import { createSlice } from '@reduxjs/toolkit'; -import { JiraDashboardState } from '@src/types'; +import { createSlice, PayloadAction } from '@reduxjs/toolkit'; +import { JiraDashboardState, JiraDashboardData, PageDetails } from '@src/types'; + +type SetJiraDashboardDataAction = PayloadAction; +type SetPageDetailsAction = PayloadAction; +type SetIsLoadingAction = PayloadAction; +type SetCurrentPageNumberAction = PayloadAction; +type SetCurrentPageSizeAction = PayloadAction; const initialState: JiraDashboardState = { data: [], @@ -17,19 +23,19 @@ const jiraDashboardSlice = createSlice({ name: 'jiraDashboard', initialState, reducers: { - setJiraDashboardData: (state, action) => { + setJiraDashboardData: (state, action: SetJiraDashboardDataAction) => { state.data = action.payload; }, - setPageDetails: (state, action) => { + setPageDetails: (state, action: SetPageDetailsAction) => { state.pageDetails = action.payload; }, - setIsLoading: (state, action) => { + setIsLoading: (state, action: SetIsLoadingAction) => { state.isLoading = action.payload; }, - setCurrentPageNumber: (state, action) => { + setCurrentPageNumber: (state, action: SetCurrentPageNumberAction) => { state.currentPageNumber = action.payload; }, - setCurrentPageSize: (state, action) => { + setCurrentPageSize: (state, action: SetCurrentPageSizeAction) => { state.currentPageSize = action.payload; }, }, diff --git a/src/types/index.d.ts b/src/types/index.d.ts index 4ca4f90..d91b444 100644 --- a/src/types/index.d.ts +++ b/src/types/index.d.ts @@ -47,3 +47,9 @@ export interface JiraDashboardState { currentPageNumber: number; currentPageSize: number; } + +export interface PageDetails { + pageNumber: number; + pageSize: number; + totalElements: number; +} From a91d8c6e10cd3f52ec1e3086895146eb1b254e34 Mon Sep 17 00:00:00 2001 From: AyushRanjan Date: Fri, 5 Jan 2024 12:11:57 +0530 Subject: [PATCH 27/28] TP-53357 | setting default page to 0 --- src/Pages/Dashboard/partials/Date.tsx | 4 ++++ src/Pages/Dashboard/partials/SmartSearch.tsx | 6 ++++++ src/components/FilterVerticalTabs/index.tsx | 4 ++++ 3 files changed, 14 insertions(+) diff --git a/src/Pages/Dashboard/partials/Date.tsx b/src/Pages/Dashboard/partials/Date.tsx index 405e54d..a3e6a11 100644 --- a/src/Pages/Dashboard/partials/Date.tsx +++ b/src/Pages/Dashboard/partials/Date.tsx @@ -55,6 +55,8 @@ const Date: React.FC = ({ const clearDate = () => { searchParams.delete('from'); searchParams.delete('to'); + searchParams.set('page_number', '0'); + searchParams.set('page_size', '10'); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); }; @@ -70,6 +72,8 @@ const Date: React.FC = ({ searchParams.set('from', formattedStartDate); searchParams.set('to', formattedEndDate); searchParams.delete('incident_name'); + searchParams.set('page_number', '0'); + searchParams.set('page_size', '10'); clearSearchValue(); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); diff --git a/src/Pages/Dashboard/partials/SmartSearch.tsx b/src/Pages/Dashboard/partials/SmartSearch.tsx index 9ada4a9..a2b965a 100644 --- a/src/Pages/Dashboard/partials/SmartSearch.tsx +++ b/src/Pages/Dashboard/partials/SmartSearch.tsx @@ -32,6 +32,8 @@ const SmartSearch: FC = ({ }; const clearSearch = () => { searchParams.delete('incident_name'); + searchParams.set('page_number', '0'); + searchParams.set('page_size', '10'); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); }; @@ -41,6 +43,8 @@ const SmartSearch: FC = ({ clearSearch(); } else { searchParams.set('incident_name', searchValue); + searchParams.set('page_number', '0'); + searchParams.set('page_size', '10'); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); } @@ -54,6 +58,8 @@ const SmartSearch: FC = ({ clearSearch(); } else { searchParams.set('incident_name', searchValue); + searchParams.set('page_number', '0'); + searchParams.set('page_size', '10'); const updatedQuery = searchParams.toString(); updateURLAndFetchData(updatedQuery); } diff --git a/src/components/FilterVerticalTabs/index.tsx b/src/components/FilterVerticalTabs/index.tsx index 36d4df0..9fd4d31 100644 --- a/src/components/FilterVerticalTabs/index.tsx +++ b/src/components/FilterVerticalTabs/index.tsx @@ -123,6 +123,8 @@ const FilterVerticalTabs: FC = ({ } selectedFilters.forEach(([key, value]) => { searchParams.set(key, [value].toString()); + searchParams.set('page_number', '0'); + searchParams.set('page_size', '10'); }); handleFetchData(searchParams.toString()); getSelectedFilterMap(selectedFiltersMap); @@ -227,6 +229,8 @@ const FilterVerticalTabs: FC = ({ searchParams.delete('team_ids'); searchParams.delete('statuses'); searchParams.delete('severity_ids'); + searchParams.set('page_number', '0'); + searchParams.set('page_size', '10'); handleFetchData(searchParams.toString()); }; From 4a96a09077e4da01c796671f3b6436a32225ce13 Mon Sep 17 00:00:00 2001 From: Pooja Jaiswal Date: Mon, 8 Jan 2024 14:39:32 +0530 Subject: [PATCH 28/28] TP-48516 | Mark incident as duplicate from Houston UI (#105) * TP-48516 | design implemented * TP-48516 | updated Goto incident and css changes * TP-48516 | Api integrated * TP-48516 | added input validations , api integration * TP-48516 | Disabled duplicate button * TP-48516 | resolving PR commits * TP-48516 | resolved error message color bug * TP-48516 | added return type * TP-48516 | resolving PR comments * TP-48516 | padding for GoTo CTA increased --- package.json | 2 +- src/Pages/Incidents/Incidents.module.scss | 22 + src/Pages/Incidents/constants.ts | 28 +- src/Pages/Incidents/index.tsx | 581 ++++++++++++++-------- 4 files changed, 410 insertions(+), 223 deletions(-) diff --git a/package.json b/package.json index f528df1..8af7131 100644 --- a/package.json +++ b/package.json @@ -33,7 +33,7 @@ }, "dependencies": { "@navi/dark-knight": "^1.0.13", - "@navi/web-ui": "^1.58.13", + "@navi/web-ui": "^1.59.2", "@reduxjs/toolkit": "^1.9.7", "@stoddabr/react-tableau-embed-live": "^0.3.26", "antd": "^5.9.4", diff --git a/src/Pages/Incidents/Incidents.module.scss b/src/Pages/Incidents/Incidents.module.scss index e55fe1a..309e996 100644 --- a/src/Pages/Incidents/Incidents.module.scss +++ b/src/Pages/Incidents/Incidents.module.scss @@ -183,3 +183,25 @@ .popup-style { display: inline; } + +.hint-text { + margin-top: 24px; + font-size: 12px; + color: var(--navi-color-blue-base); + border: none; + :hover { + cursor: pointer; + } +} + +.incident-input { + margin-top: 20px; + input { + color: var(--navi-color-gray-c2); + } +} + +.incident-label { + font-size: 13px; + font-weight: 400; +} diff --git a/src/Pages/Incidents/constants.ts b/src/Pages/Incidents/constants.ts index 91a6ce5..d030070 100644 --- a/src/Pages/Incidents/constants.ts +++ b/src/Pages/Incidents/constants.ts @@ -15,7 +15,7 @@ export const IncidentConstants = { incidentId: 'Incident Id', }; -const URL_PREFIX = createURL('/houston'); +export const URL_PREFIX = createURL('/houston'); export const FETCH_INCIDENT_DATA = (payload: any): string => { return `${URL_PREFIX}/incidents/${payload}`; @@ -38,6 +38,7 @@ export const FETCH_AUDIT_LOG = (incidentId: string): string => { return `${URL_PREFIX}/logs/incident/${incidentId}`; }; +export const incidentRegrex = /^_houston-0*[1-9][0-9]*$/; export interface ContentProps { incidentData: any; } @@ -64,7 +65,10 @@ export interface CreatedInfoProps { updatedAt: string; isLastItem: boolean; } - +export interface ResponseType { + data: ''; + status: number; +} export const actionTypes = { SET_INCIDENT_DATA: 'SET_INCIDENT_DATA', SET_HEADER_DATA: 'SET_HEADER_DATA', @@ -84,6 +88,10 @@ export const actionTypes = { SET_IS_SEVERITY_PICKER_OPEN: 'SET_IS_SEVERITY_PICKER_OPEN', SET_IS_STATUS_PICKER_OPEN: 'SET_IS_STATUS_PICKER_OPEN', SET_IS_TEAM_PICKER_OPEN: 'SET_IS_TEAM_PICKER_OPEN', + SET_DUPLICATE_DIALOG: 'SET_DUPLICATE_DIALOG', + SET_INCIDENT_NAME: 'SET_INCIDENT_NAME', + SET_ERROR_MSG: 'SET_ERROR_MSG', + RESET_DUPLICATE_DIALOG: 'RESET_DUPLICATE_DIALOG', }; export const reducer = (state, action) => { @@ -108,6 +116,8 @@ export const reducer = (state, action) => { return { ...state, totalLog: action.payload }; case actionTypes.SET_OPEN_DIALOG: return { ...state, openDialog: action.payload }; + case actionTypes.SET_DUPLICATE_DIALOG: + return { ...state, openDuplicateDialog: action.payload }; case actionTypes.SET_OPEN_CONFIRMATION_DIALOG: return { ...state, openConfirmationDialog: action.payload }; case actionTypes.SET_SELECTED_OPTION: @@ -124,6 +134,17 @@ export const reducer = (state, action) => { return { ...state, isStatusPickerOpen: action.payload }; case actionTypes.SET_IS_TEAM_PICKER_OPEN: return { ...state, isTeamPickerOpen: action.payload }; + case actionTypes.SET_INCIDENT_NAME: + return { ...state, incidentName: action.payload }; + case actionTypes.SET_ERROR_MSG: + return { ...state, errorMsg: action.payload }; + case actionTypes.RESET_DUPLICATE_DIALOG: + return { + ...state, + openDuplicateDialog: false, + incidentName: '', + errorMsg: '', + }; default: return state; } @@ -148,6 +169,9 @@ export const initialState = { isSeverityPickerOpen: false, isStatusPickerOpen: false, isTeamPickerOpen: false, + incidentName: '', + openDuplicateDialog: false, + errorMsg: '', }; export const RESOLVE_STATUS = '4'; diff --git a/src/Pages/Incidents/index.tsx b/src/Pages/Incidents/index.tsx index b543816..9cc61d1 100644 --- a/src/Pages/Incidents/index.tsx +++ b/src/Pages/Incidents/index.tsx @@ -1,12 +1,18 @@ import { FC, useEffect, useState, useReducer, MutableRefObject } from 'react'; import { useMatch } from 'react-router-dom'; import classnames from 'classnames'; +import { Tabs } from 'antd'; import { toast } from '@navi/web-ui/lib/primitives/Toast'; import { AlertOutlineIcon, ArrowDownIcon } from '@navi/web-ui/lib/icons'; -import TabItem from '@navi/web-ui/lib-esm/components/Tabs/TabItem'; -import Tabs from '@navi/web-ui/lib-esm/components/Tabs/Tabs'; import { SelectPicker } from '@navi/web-ui/lib/components'; -import { ModalDialog, Tooltip, Typography } from '@navi/web-ui/lib/primitives'; +import { + BorderedInput, + ModalDialog, + Tooltip, + Typography, + Button, +} from '@navi/web-ui/lib/primitives'; + import { SelectPickerOptionProps } from '@navi/web-ui/lib/components/SelectPicker/types'; import GoToLinkIcon from '@src/assets/GoToLinkIcon'; import { ApiService } from '@src/services/api'; @@ -34,15 +40,15 @@ import { StatusType, TeamType, SLACK_BASE_URL, + incidentRegrex, + ResponseType, } from './constants'; import styles from './Incidents.module.scss'; const Incident: FC = () => { const [state, dispatch] = useReducer(reducer, initialState); - const { fireEvent } = useClickStream(); const { EVENT_NAME, SCREEN_NAME } = CLICK_STREAM_EVENT_FACTORY; - const updatedSeverities = generateOptions(state.headerData?.severities); const updatedStatuses = generateOptions(state.headerData?.incidentStatuses); const updatedTeams = generateOptions(state.headerData?.teams); @@ -54,6 +60,8 @@ const Incident: FC = () => { path: '/incident/:incidentId', }); const incidentId = IncidentMatch?.params?.incidentId || ''; + const currentIncidentId = parseInt(incidentId, 10); + const incidentName = state.incidentName; const severityMap = state.headerData?.severities?.reduce((map, severity) => { map[severity.value] = severity.label; @@ -70,6 +78,7 @@ const Incident: FC = () => { map[Incidentteam.value] = Incidentteam.label; return map; }, {}); + const handleSevClickOutside = () => { dispatch({ type: actionTypes.SET_IS_SEVERITY_PICKER_OPEN, @@ -376,16 +385,6 @@ const Incident: FC = () => { payload: 'resolved', }); dispatch({ type: actionTypes.SET_OPEN_DIALOG, payload: true }); - } else if (value === DUPLICATE_STATUS) { - dispatch({ - type: actionTypes.SET_DIALOG_TEXT, - payload: 'Duplicate incident', - }); - dispatch({ - type: actionTypes.SET_DIALOG_BODY_TEXT, - payload: 'duplicate', - }); - dispatch({ type: actionTypes.SET_OPEN_DIALOG, payload: true }); } else { toast('Updating ticket. Please wait a moment.', { icon: , @@ -436,11 +435,16 @@ const Incident: FC = () => { payload: false, }); dispatch({ type: actionTypes.SET_IS_TEAM_PICKER_OPEN, payload: false }); - if ( - updateType === StatusType && - (selectedvalue === RESOLVE_STATUS || selectedvalue === DUPLICATE_STATUS) - ) { + if (updateType === StatusType && selectedvalue === RESOLVE_STATUS) { handleStatusSelectionChange(selectedOption); + } else if ( + updateType === StatusType && + selectedvalue === DUPLICATE_STATUS + ) { + dispatch({ + type: actionTypes.SET_DUPLICATE_DIALOG, + payload: true, + }); } else { dispatch({ type: actionTypes.SET_UPDATE_TYPE, payload: updateType }); dispatch({ @@ -508,6 +512,81 @@ const Incident: FC = () => { } `; } }; + const handleIncidentChange = ( + e: React.ChangeEvent, + ): void => { + const inputValue = e.target.value; + validateIncidentID(inputValue); + dispatch({ + type: actionTypes.SET_INCIDENT_NAME, + payload: inputValue, + }); + }; + const handleResetDialog = (): void => { + dispatch({ + type: actionTypes.RESET_DUPLICATE_DIALOG, + }); + }; + const validateIncidentID = (value: string): void => { + dispatch({ + type: actionTypes.SET_ERROR_MSG, + payload: !incidentRegrex.test(value) + ? 'Please enter a valid incident I.D.' + : '', + }); + }; + + const extractIncidentId = (incidentName: string): number | null => { + return (match => (match ? parseInt(match[1], 10) : null))( + incidentName.match(/_houston-(\d+)/), + ); + }; + const duplicateOfId = extractIncidentId(incidentName); + const disable = (): boolean => { + return !incidentName || !validate(incidentName); + }; + const goToIncident = (): void => { + if (state.incidentName) { + const incidentId = extractIncidentId(state.incidentName); + window.open(`/incident/${incidentId}`, '_blank'); + } + }; + const validate = (value: string): boolean => incidentRegrex.test(value); + const isDisabled = (): boolean => { + const incidentId = extractIncidentId(state.incidentName); + return !incidentId; + }; + + const markDuplicateIncident = (): void => { + const endPoint = UPDATE_INCIDENT; + toast('Updating ticket. Please wait a moment.', { + icon: , + }); + ApiService.post(endPoint, { + id: currentIncidentId, + status: DUPLICATE_STATUS, + duplicateOfId: duplicateOfId, + }) + .then((response: ResponseType) => { + if (response?.status === 200) { + const toastMessage = `This incident is marked as duplicate of _houston-${duplicateOfId}`; + toast.success(toastMessage); + startIncidentSearch(); + fetchIncidentLog(); + handleResetDialog(); + fetchParticipants(); + } + }) + .catch(error => { + const toastMessage = `${ + error?.response?.data?.error?.message + ? `${error?.response?.data?.error?.message}` + : 'Something went wrong. Please try again.' + }`; + toast.error(toastMessage); + startIncidentSearch(); + }); + }; return ( @@ -521,222 +600,232 @@ const Incident: FC = () => {
- -
-
-
-
- - UPDATE INCIDENT - - {!isUserParticipantList && ( -
- -
- -
- -
- )} -
- -
-
-
+ defaultActiveKey="1" + items={[ + { + key: '1', + label: 'Details', + children: ( +
+
+
+
- Severity + UPDATE INCIDENT -
-
-
-
- + - {severityMap && state.severity?.value - ? severityMap[state.severity.value] - : '-'} - +
+ +
+
-
- -
-
-
- {state.isSeverityPickerOpen && ( -
- - handleOpenConfirmationDailog( - selectedOption, - SeverityType, - ) - } - options={updatedSeverities} - selectedValue={state.severity?.value.toString()} - /> -
- )} -
+ )}
-
-
-
- - Status - -
-
-
-
- - {incidentStatusMap && state.status?.value - ? incidentStatusMap[state.status.value] - : '-'} - -
-
- -
-
-
- {state.isStatusPickerOpen && ( -
- - handleOpenConfirmationDailog( - selectedOption, - StatusType, - ) - } - options={updatedStatuses} - selectedValue={state.status?.value.toString()} - /> -
- )} -
-
-
-
-
- - Team - -
-
-
-
- - {teamsMap && state.team?.value - ? teamsMap[state.team.value] - : '-'} - -
+
+
- + + Severity + +
+
+
+
+ + {severityMap && state.severity?.value + ? severityMap[state.severity.value] + : '-'} + +
+
+ +
+
+
+ {state.isSeverityPickerOpen && ( +
+ + handleOpenConfirmationDailog( + selectedOption, + SeverityType, + ) + } + options={updatedSeverities} + selectedValue={state.severity?.value.toString()} + /> +
+ )} +
- -
- {state.isTeamPickerOpen && ( -
+
+ - - handleOpenConfirmationDailog( - selectedOption, - TeamType, - ) - } - options={updatedTeams} - selectedValue={state.team?.value.toString()} - /> + Status + +
+
+
+
+ + {incidentStatusMap && state.status?.value + ? incidentStatusMap[state.status.value] + : '-'} + +
+
+ +
- )} +
+ {state.isStatusPickerOpen && ( +
+ + handleOpenConfirmationDailog( + selectedOption, + StatusType, + ) + } + options={updatedStatuses} + selectedValue={state.status?.value.toString()} + /> +
+ )} +
+
+
+
+
+ + Team + +
+
+
+
+ + {teamsMap && state.team?.value + ? teamsMap[state.team.value] + : '-'} + +
+ +
+ +
+
+ +
+ {state.isTeamPickerOpen && ( +
+ + handleOpenConfirmationDailog( + selectedOption, + TeamType, + ) + } + options={updatedTeams} + selectedValue={state.team?.value.toString()} + /> +
+ )} +
+
+ +
-
- { - - } +
- - -
-
- - + ), + }, + ]} + />
{open && ( { }, { label: 'Open Channel', - startAdornment: , + startAdornment: ( + + ), onClick: handleGoToSlackChannel, }, ]} @@ -761,6 +852,54 @@ const Incident: FC = () => { )} + {state.openDuplicateDialog ? ( + { + markDuplicateIncident(); + }, + }, + ]} + header={`Duplicate incident`} + onClose={handleResetDialog} + > + + Once marked as duplicate, this incident will be archived after 24 + hours. + +
+ } + /> +
+ + + + ) : null} {state.openDialog ? ( { { label: 'Go to slack channel', onClick: handleGoToSlackChannel, - startAdornment: , + startAdornment: ( + + ), }, ]} header={`${state.dialogText}`}