AgTable and Tooltip fixes (#765)

* AgTable and Tooltip fixes * Lint fixes * Width fixes for large Date * UAT enhancements done * PR review fixes * PR fixes V2 * TP-52369 | PR review fixes * TP-52369 | PR review fixes2
2024-01-03 17:09:40 +05:30
parent 05f3227ae3
commit 6042f01e76
13 changed files with 127 additions and 187 deletions
--- a/src/components/GlobalSearch/AutoComplete.tsx
+++ b/src/components/GlobalSearch/AutoComplete.tsx
@@ -230,8 +230,8 @@ const AutoComplete: React.FC = () => {
          }}
        >
          {details?.name?.length && details?.name?.length >= 19 ? (
-            <TooltipV2 placement={Directions.BOTTOM}>
-              <TooltipTrigger>
+            <TooltipV2 placement={Directions.TOP}>
+              <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
                <div
                  className={cx(styles.customerName)}
                  dangerouslySetInnerHTML={{
@@ -243,11 +243,7 @@ const AutoComplete: React.FC = () => {
                  }}
                ></div>
              </TooltipTrigger>
-              <TooltipContent
-                className={cx('tooltipWrapper', styles.autoCompleteTooltipWrapper)}
-                arrowColor="var(--tooltip-background-color)"
-                bgColor="var(--tooltip-background-color)"
-              >
+              <TooltipContent className={cx('tooltipWrapper', styles.autoCompleteTooltipWrapper)}>
                {details?.name}
              </TooltipContent>
            </TooltipV2>
--- a/src/components/TooltipV2/TooltipV2.tsx
+++ b/src/components/TooltipV2/TooltipV2.tsx
@@ -175,8 +175,8 @@ export const TooltipContent = React.forwardRef<HTMLDivElement, TooltipContentPro

    const referenceHidden = context?.middlewareData?.hide?.escaped;

-    const arrowColor = props?.arrowColor || 'var(--tooltip-bg-color)';
-    const bgColor = props?.bgColor || 'var(--tooltip-bg-color)';
+    const arrowColor = props?.arrowColor || 'var(--tooltip-background-color)';
+    const bgColor = props?.bgColor || 'var(--tooltip-background-color)';
    if (!context.open) return null;

    return (
--- a/src/pages/CaseDetails/components/CaseDetail.module.scss
+++ b/src/pages/CaseDetails/components/CaseDetail.module.scss
@@ -115,3 +115,16 @@
  color: var(--grayscale-3);
  margin-top: 2px;
 }
+
+.dateValue {
+  display: block;
+  color: var(--navi-color-gray-c2);
+  font-weight: 400;
+  font-size: '14px';
+}
+
+.timeValue {
+  color: var(--grayscale-content-3);
+  font-weight: 400;
+  font-size: '14px';
+}
--- a/src/pages/CaseDetails/components/DateTime/index.module.scss
+++ b/src/pages/CaseDetails/components/DateTime/index.module.scss
@@ -0,0 +1,12 @@
+.dateValue {
+  display: block;
+  color: var(--navi-color-gray-c2);
+  font-weight: 400;
+  font-size: '14px';
+}
+
+.timeValue {
+  color: var(--grayscale-content-3);
+  font-weight: 400;
+  font-size: '14px';
+}
--- a/src/pages/CaseDetails/components/DateTime/index.tsx
+++ b/src/pages/CaseDetails/components/DateTime/index.tsx
@@ -0,0 +1,24 @@
+/* eslint-disable react/prop-types */
+import { DateFormat, dateFormat } from '@cp/src/utils/DateHelper';
+import styles from './index.module.scss';
+import { Typography } from '@navi/web-ui/lib/primitives';
+interface DateTimeProps {
+  istDate?: Date;
+}
+
+const DateTime: React.FC<DateTimeProps> = ({ istDate }) => {
+  const dateValue = istDate ? dateFormat(istDate, DateFormat.LONG_DATE_FORMAT_WITHOUT_TIME) : '';
+  const timeValue = istDate ? dateFormat(istDate, DateFormat.HH_mm_ampm) : '';
+  return (
+    <div>
+      <Typography variant="h4" className={styles.dateValue}>
+        {dateValue}
+      </Typography>
+      <Typography variant="h4" className={styles.timeValue}>
+        {timeValue}
+      </Typography>
+    </div>
+  );
+};
+
+export default DateTime;
--- a/src/pages/CaseDetails/components/Interactions/index.module.scss
+++ b/src/pages/CaseDetails/components/Interactions/index.module.scss
@@ -1,6 +1,5 @@
 .waInteractionsWrapper {
-  padding-left: 24px;
-  padding-right: 24px;
+  padding-right: 5px;
  .header {
    display: flex;
    justify-content: space-between;
@@ -38,19 +37,20 @@
  white-space: nowrap;
 }

-:global {
-  .tooltipWrapper {
-    padding: 4px 8px 4px 8px;
-    box-sizing: border-box;
-    width: max-content;
-    z-index: var(--z-index-tooltip);
-    max-width: 300px;
-    font-weight: 400;
-    font-size: 12px;
-    line-height: 14px;
-    word-wrap: break-word;
-    color: var(--text-primary);
-    border-radius: 4px;
-    background: var(--grayscale-warm-4);
+.teamLeadTable {
+  .ag-cell {
+    padding: 0 12px;
+  }
+
+  .ag-cell:first-child {
+    padding: 0 12px 0 24px;
+  }
+
+  .ag-header-cell {
+    padding: 0 12px;
+  }
+
+  .ag-header-cell:first-child {
+    padding: 0 12px 0 24px;
  }
 }
--- a/src/pages/CaseDetails/components/Interactions/index.tsx
+++ b/src/pages/CaseDetails/components/Interactions/index.tsx
@@ -26,52 +26,40 @@ import { addClickstreamEvent } from '../../../../service/clickStreamEventService
 import { CLICKSTREAM_EVENT_NAMES } from '../../../../service/clickStream.constant';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2';
 import cx from 'classnames';
-import { dateFormat, DateFormat } from '@cp/src/utils/DateHelper';
+import { DateFormat, dateFormat } from '@cp/src/utils/DateHelper';
+import EllipsisText from '@cp/src/components/EllipsisText';
+import DateTime from '../DateTime';

 const WAINTERACTIONS_COL_DEFS = [
+  {
+    field: 'messageTimestamp',
+    headerName: 'Date & Time',
+    cellRenderer: (params: ICellRendererParams) => {
+      const istDate = new Date(params.value);
+      return <DateTime istDate={istDate} />;
+    },
+    width: '140px'
+  },
  {
    field: 'agentName',
    headerName: 'Agent Name',
    width: '150px',
-    cellRenderer: (params: ICellRendererParams) => {
-      const { data } = params;
-      return (
-        <div>
-          <Tooltip placement="top" hiddenPadding={0} hideStrategy="referenceHidden">
-            <TooltipTrigger tooltipTriggerClassName="toolTipTriggerWrapper">
-              <div className={styles.fileName}>{data?.agentName}</div>
-            </TooltipTrigger>
-            <TooltipContent className={cx('tooltipWrapper', styles.uploadHistoryTooltipContent)}>
-              {data?.agentName}
-            </TooltipContent>
-          </Tooltip>
-        </div>
-      );
-    }
+    wrapText: true,
+    cellStyle: { wordBreak: 'break-word', padding: '8' }
  },
-  { field: 'agentNumber', headerName: 'Agent Number', width: '170px' },
+  { field: 'agentNumber', headerName: 'Agent Number', width: '130px' },
  {
    field: 'messageText',
    headerName: 'Message',
-    width: '250px',
+    width: '320px',
    autoHeight: true,
    wrapText: true,
    cellStyle: { wordBreak: 'break-word', padding: '8' }
  },
-  {
-    field: 'messageTimestamp',
-    headerName: 'Time',
-    cellRenderer: (params: ICellRendererParams) => {
-      const value = dateFormat(new Date(params.value), DateFormat.LONG_DATE_FORMAT_WITH_TIME);
-
-      return <div>{value}</div>;
-    },
-    width: '180px'
-  },
  {
    field: 'source',
    headerName: 'Source',
-    width: '90px'
+    width: '110px'
  }
 ];

@@ -158,6 +146,7 @@ const Interactions = () => {
            style={{
              height: `${window?.innerHeight - 405}`
            }}
+            className="teamLeadTable"
            rowData={waInteractionsData?.content}
            columnDefs={WAINTERACTIONS_COL_DEFS}
            sizeColumnsToFit
--- a/src/pages/CaseDetails/components/Overview/FeedbackHistory.tsx
+++ b/src/pages/CaseDetails/components/Overview/FeedbackHistory.tsx
@@ -29,6 +29,7 @@ import { User } from 'src/reducers/commonSlice';
 import { overviewFeedbackStyles } from './utils';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2';
 import EllipsisText from '@cp/src/components/EllipsisText';
+import DateTime from '../DateTime';

 const AgTable = React.lazy(
  () => import(/* webpackChunkName: ['table'] */ '@navi/web-ui/lib/components/AgTable/AgTable')
@@ -38,24 +39,14 @@ export const getColumnDefs = (user: User) => {
  return [
    {
      field: 'feedbackTime',
-      headerName: 'Date and time',
+      headerName: 'Date & Time',
      cellRenderer: (params: ICellRendererParams) => {
-        const value = dateFormat(utcToIST(params.value), DateFormat.LONG_DATE_FORMAT_WITH_TIME);
-
-        return (
-          <Tooltip placement="top" hiddenPadding={0} hideStrategy="referenceHidden">
-            <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
-              <EllipsisText text={value} />
-            </TooltipTrigger>
-            <TooltipContent
-              className="tooltipWrapper"
-              arrowColor="var(--tooltip-background-color)"
-              bgColor="var(--tooltip-background-color)"
-            >
-              {value}
-            </TooltipContent>
-          </Tooltip>
+        const istDate = utcToIST(
+          params.data.ameyoNonConnectedInteractionsInfo?.length
+            ? params.data.ameyoNonConnectedInteractionsInfo[0].createdAt
+            : params.value
        );
+        return <DateTime istDate={istDate} />;
      }
    },
    {
@@ -68,13 +59,7 @@ export const getColumnDefs = (user: User) => {
            <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
              <EllipsisText text={value} />
            </TooltipTrigger>
-            <TooltipContent
-              className="tooltipWrapper"
-              arrowColor="var(--tooltip-background-color)"
-              bgColor="var(--tooltip-background-color)"
-            >
-              {value}
-            </TooltipContent>
+            <TooltipContent className="tooltipWrapper">{value}</TooltipContent>
          </Tooltip>
        );
      }
@@ -111,13 +96,7 @@ export const getColumnDefs = (user: User) => {
            <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
              <EllipsisText text={value} />
            </TooltipTrigger>
-            <TooltipContent
-              className="tooltipWrapper"
-              arrowColor="var(--tooltip-background-color)"
-              bgColor="var(--tooltip-background-color)"
-            >
-              {value}
-            </TooltipContent>
+            <TooltipContent className="tooltipWrapper">{value}</TooltipContent>
          </Tooltip>
        );
      }
--- a/src/pages/CaseDetails/constants/EmiSchedule.component.tsx
+++ b/src/pages/CaseDetails/constants/EmiSchedule.component.tsx
@@ -142,13 +142,7 @@ export const FeeWaiverHistoryColumnDefs: ColDefsType[] = [
          <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
            <EllipsisText text={value} />
          </TooltipTrigger>
-          <TooltipContent
-            className="tooltipWrapper"
-            arrowColor="var(--tooltip-background-color)"
-            bgColor="var(--tooltip-background-color)"
-          >
-            {value}
-          </TooltipContent>
+          <TooltipContent className="tooltipWrapper">{value}</TooltipContent>
        </Tooltip>
      );
    }
--- a/src/pages/CaseDetails/constants/communicationHistory.constant.tsx
+++ b/src/pages/CaseDetails/constants/communicationHistory.constant.tsx
@@ -15,6 +15,8 @@ import FieldFeedbackAction from '../feedbackForm/component/FieldFeedbackAction';
 import { AnswerType, AnswerView, QuestionTags } from '../interfaces/CommunicationHistory.type';
 import { Tooltip, TooltipContent, TooltipTrigger } from '@cp/src/components/TooltipV2/TooltipV2';
 import EllipsisText from '@cp/src/components/EllipsisText';
+import DateTime from '../components/DateTime';
+import { Typography } from '@navi/web-ui/lib/primitives';

 export const CALL_INTERACTIONS = 'callInteractions';
 export const NO_RECORD_FOUND = 'No Record Found';
@@ -64,38 +66,26 @@ export const SYSTEM_INTERACTIONS_TYPE_COL_DEFS = [
  {
    field: 'scheduledTimestamp',
    headerName: 'Date & Time',
-    width: '230px',
+    width: '150px',
    cellRenderer: (params: ICellRendererParams) => {
-      const value = dateFormat(new Date(params.value), DateFormat.LONG_DATE_FORMAT_WITH_TIME);
-
-      return (
-        <Tooltip placement="top" hiddenPadding={0} hideStrategy="referenceHidden">
-          <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
-            <EllipsisText text={value} />
-          </TooltipTrigger>
-          <TooltipContent
-            className="tooltipWrapper"
-            arrowColor="var(--tooltip-background-color)"
-            bgColor="var(--tooltip-background-color)"
-          >
-            {value}
-          </TooltipContent>
-        </Tooltip>
-      );
-    }
+      const istDate = new Date(params.value);
+      return <DateTime istDate={istDate} />;
+    },
+    cellStyle: { paddingRight: '0' }
  },
  {
    field: 'phoneNumber',
    headerName: 'Contacted On',
-    width: '170px'
+    width: '160px',
+    cellStyle: { paddingRight: '0' }
  },
  {
    field: 'message',
    headerName: 'Message',
-    cellStyle: { wordBreak: 'break-word', padding: '8' },
-    width: '400px',
+    width: '470px',
    autoHeight: true,
-    wrapTYext: true
+    wrapTYext: true,
+    cellStyle: { wordBreak: 'break-word', paddingRight: '0', paddingTop: '8', paddingBottom: '8' }
  },
  {
    field: 'status',
@@ -106,7 +96,7 @@ export const SYSTEM_INTERACTIONS_TYPE_COL_DEFS = [
 export const SYSTEM_INTERACTIONS_FIELD_VISIT_TYPE_COL_DEFS = [
  {
    field: 'createdAt',
-    headerName: 'Date time',
+    headerName: 'Date & Time',
    flex: 3,
    width: '230px',
    cellRenderer: (params: ICellRendererParams) => {
@@ -117,13 +107,7 @@ export const SYSTEM_INTERACTIONS_FIELD_VISIT_TYPE_COL_DEFS = [
          <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
            <EllipsisText text={value} />
          </TooltipTrigger>
-          <TooltipContent
-            className="tooltipWrapper"
-            arrowColor="var(--tooltip-background-color)"
-            bgColor="var(--tooltip-background-color)"
-          >
-            {value}
-          </TooltipContent>
+          <TooltipContent className="tooltipWrapper">{value}</TooltipContent>
        </Tooltip>
      );
    }
@@ -232,11 +216,11 @@ const columnWidth = (percentage: number) => {

 const attributesWidth = {
  dateWidth: (percentage: number) =>
-    GLOBAL.SCREEN_WIDTH < 1400 ? '180px' : `${columnWidth(percentage)}px`,
+    GLOBAL.SCREEN_WIDTH < 1400 ? '150px' : `${columnWidth(percentage)}px`,
  recipientNumberWidth: (percentage: number) =>
    GLOBAL.SCREEN_WIDTH < 1400 ? '130px' : `${columnWidth(percentage)}px`,
  feedBackWidth: (percentage: number) =>
-    GLOBAL.SCREEN_WIDTH < 1400 ? '183px' : `${columnWidth(percentage)}px`,
+    GLOBAL.SCREEN_WIDTH < 1400 ? '213px' : `${columnWidth(percentage)}px`,
  typeWidth: (percentage: number) =>
    GLOBAL.SCREEN_WIDTH < 1400 ? '90px' : `${columnWidth(percentage)}px`,
  audioButtonWidth: (percentage: number) =>
@@ -262,33 +246,16 @@ export const getInteractionsFeedbackColumns = (user: User) => {
  return [
    {
      field: 'createdAt',
-      headerName: 'Date Time',
+      headerName: 'Date & Time',
      width: attributesWidth.dateWidth(20),
-      cellStyle: { paddingLeft: '6px', paddingRight: '6px', lineHeight: '1.5rem' },
+      cellStyle: { paddingLeft: '12px', paddingRight: '12px', lineHeight: '1.5rem' },
      cellRenderer: (params: ICellRendererParams) => {
-        const value = dateFormat(
-          utcToIST(
-            params.data.ameyoNonConnectedInteractionsInfo?.length
-              ? params.data.ameyoNonConnectedInteractionsInfo[0].createdAt
-              : params.value
-          ),
-          DateFormat.LONG_DATE_FORMAT_WITH_TIME
-        );
-
-        return (
-          <Tooltip placement="top" hiddenPadding={0} hideStrategy="referenceHidden">
-            <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
-              <EllipsisText text={value} />
-            </TooltipTrigger>
-            <TooltipContent
-              className="tooltipWrapper"
-              arrowColor="var(--tooltip-background-color)"
-              bgColor="var(--tooltip-background-color)"
-            >
-              {value}
-            </TooltipContent>
-          </Tooltip>
+        const istDate = utcToIST(
+          params.data.ameyoNonConnectedInteractionsInfo?.length
+            ? params.data.ameyoNonConnectedInteractionsInfo[0].createdAt
+            : params.value
        );
+        return <DateTime istDate={istDate} />;
      }
    },
    {
--- a/src/pages/LiveLocationTracker/components/AgentsAccordion/AgentDetail.tsx
+++ b/src/pages/LiveLocationTracker/components/AgentsAccordion/AgentDetail.tsx
@@ -107,13 +107,7 @@ const AgentDetail = (props: AgentDetailProps) => {
        </Avatar>
        <div className={styles.agentsDetails}>
          <Tooltip placement="bottom">
-            <TooltipContent
-              className={styles.tooltip}
-              arrowColor="var(--tooltip-background-color)"
-              bgColor="var(--tooltip-background-color)"
-            >
-              {name}
-            </TooltipContent>
+            <TooltipContent className={styles.tooltip}>{name}</TooltipContent>
            {name.length > MIN_CHAR_LENGTH_FOR_TOOLTIP ? (
              <TooltipTrigger>
                <div
--- a/src/pages/LiveLocationTracker/components/AgentsAccordion/FeedbackDetail.tsx
+++ b/src/pages/LiveLocationTracker/components/AgentsAccordion/FeedbackDetail.tsx
@@ -73,13 +73,7 @@ const FeedbackDetail = (props: FeedbackDetailProps) => {
              <div className={styles.feedbackDetailContainer}>
                {feedback?.suspicious ? <ChatBubbleExclamation /> : <ChatBubble />}
                <Tooltip placement="bottom">
-                  <TooltipContent
-                    className={styles.tooltip}
-                    arrowColor="var(--tooltip-background-color)"
-                    bgColor="var(--tooltip-background-color)"
-                  >
-                    {customerName}
-                  </TooltipContent>
+                  <TooltipContent className={styles.tooltip}>{customerName}</TooltipContent>
                  {customerName?.length && customerName?.length > MIN_CHAR_LENGTH_FOR_TOOLTIP ? (
                    <TooltipTrigger>
                      <div className={styles.agentName}>{customerName}</div>
@@ -90,11 +84,7 @@ const FeedbackDetail = (props: FeedbackDetailProps) => {
                </Tooltip>
              </div>
              <Tooltip placement="bottom">
-                <TooltipContent
-                  className={styles.tooltip}
-                  arrowColor="var(--tooltip-background-color)"
-                  bgColor="var(--tooltip-background-color)"
-                >
+                <TooltipContent className={styles.tooltip}>
                  {feedback?.interactionStatus}
                </TooltipContent>
                {feedback?.interactionStatus?.length > MIN_CHAR_LENGTH_FOR_TOOLTIP ? (
--- a/src/pages/TeamLeadDashboard/TableContent.tsx
+++ b/src/pages/TeamLeadDashboard/TableContent.tsx
@@ -18,13 +18,7 @@ export const TEAM_LEAD_COLUMN_DEFS = [
          <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
            <EllipsisText text={params.value} />
          </TooltipTrigger>
-          <TooltipContent
-            className="tooltipWrapper"
-            arrowColor="var(--tooltip-background-color)"
-            bgColor="var(--tooltip-background-color)"
-          >
-            {params.value}
-          </TooltipContent>
+          <TooltipContent className="tooltipWrapper">{params.value}</TooltipContent>
        </Tooltip>
      );
    }
@@ -67,13 +61,7 @@ export const TEAM_LEAD_COLUMN_DEFS = [
          <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
            <EllipsisText text={params.value} />
          </TooltipTrigger>
-          <TooltipContent
-            className="tooltipWrapper"
-            arrowColor="var(--tooltip-background-color)"
-            bgColor="var(--tooltip-background-color)"
-          >
-            {params.value}
-          </TooltipContent>
+          <TooltipContent className="tooltipWrapper">{params.value}</TooltipContent>
        </Tooltip>
      );
    }
@@ -104,13 +92,7 @@ export const TEAM_LEAD_COLUMN_DEFS = [
          <TooltipTrigger tooltipTriggerClassName="tooltipTriggerWrapper">
            <EllipsisText text={params.value} />
          </TooltipTrigger>
-          <TooltipContent
-            className="tooltipWrapper"
-            arrowColor="var(--tooltip-background-color)"
-            bgColor="var(--tooltip-background-color)"
-          >
-            {params.value}
-          </TooltipContent>
+          <TooltipContent className="tooltipWrapper">{params.value}</TooltipContent>
        </Tooltip>
      );
    }