dev: added tooltip to title and added info for issues (#1112)

* update: tooltip in the blocks

* dev: added tooltip to title and added info for issues

apps/app/components/cycles/cycles-list-gantt-chart.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
+// ui
+import { Tooltip } from "components/ui";
 // types
 import { ICycle } from "types";
 
@@ -31,9 +33,11 @@ export const CyclesListGanttChartView: FC<Props> = ({ cycles }) => {
     <Link href={`/${workspaceSlug}/projects/${projectId}/cycles/${data?.id}`}>
       <a className="relative flex items-center w-full h-full overflow-hidden shadow-sm">
         <div className="flex-shrink-0 w-[4px] h-full" style={{ backgroundColor: "#858e96" }} />
-        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-          {data?.name}
-        </div>
+        <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
+          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+            {data?.name}
+          </div>
+        </Tooltip>
       </a>
     </Link>
   );

apps/app/components/cycles/gantt-chart.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
+// ui
+import { Tooltip } from "components/ui";
 // hooks
 import useGanttChartCycleIssues from "hooks/gantt-chart/cycle-issues-view";
 
@@ -38,9 +40,23 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
           className="flex-shrink-0 w-[4px] h-full"
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
-        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-          {data?.name}
-        </div>
+        <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
+          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+            {data?.name}
+          </div>
+        </Tooltip>
+        {data.infoToggle && (
+          <Tooltip
+            tooltipContent={`No due-date set, rendered according to last updated date.`}
+            className={`z-[999999]`}
+          >
+            <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
+              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+                info
+              </span>
+            </div>
+          </Tooltip>
+        )}
       </a>
     </Link>
   );
@@ -59,10 +75,20 @@ export const CycleIssuesGanttChartView: FC<Props> = ({}) => {
   const blockFormat = (blocks: any) =>
     blocks && blocks.length > 0
       ? blocks.map((_block: any) => {
-          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          let startDate = new Date(_block.created_at);
+          let targetDate = new Date(_block.updated_at);
+          let infoToggle = true;
+
+          if (_block?.start_date && _block.target_date) {
+            startDate = _block?.start_date;
+            targetDate = _block.target_date;
+            infoToggle = false;
+          }
+
           return {
-            start_date: new Date(_block.created_at),
-            target_date: new Date(_block.updated_at),
+            start_date: new Date(startDate),
+            target_date: new Date(targetDate),
+            infoToggle: infoToggle,
             data: _block,
           };
         })

apps/app/components/gantt-chart/blocks/index.tsx

@@ -49,7 +49,10 @@ export const GanttChartBlocks: FC<{
                         width: `${block?.position?.width}px`,
                       }}
                     >
-                      {blockRender({ ...block?.data })}
+                      {blockRender({
+                        ...block?.data,
+                        infoToggle: block?.infoToggle ? true : false,
+                      })}
                     </div>
 
                     <div className="flex-shrink-0 relative w-0 h-0 flex items-center invisible group-hover:visible whitespace-nowrap">

apps/app/components/issues/gantt-chart.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
+// ui
+import { Tooltip } from "components/ui";
 // hooks
 import useGanttChartIssues from "hooks/gantt-chart/issue-view";
 
@@ -37,9 +39,23 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
           className="flex-shrink-0 w-[4px] h-full"
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
-        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-          {data?.name}
-        </div>
+        <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
+          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+            {data?.name}
+          </div>
+        </Tooltip>
+        {data.infoToggle && (
+          <Tooltip
+            tooltipContent={`No due-date set, rendered according to last updated date.`}
+            className={`z-[999999]`}
+          >
+            <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
+              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+                info
+              </span>
+            </div>
+          </Tooltip>
+        )}
       </a>
     </Link>
   );
@@ -51,17 +67,25 @@ export const IssueGanttChartView: FC<Props> = ({}) => {
       start_date: data?.start_date,
       target_date: data?.target_date,
     };
-
-    console.log("payload", payload);
   };
 
   const blockFormat = (blocks: any) =>
     blocks && blocks.length > 0
       ? blocks.map((_block: any) => {
-          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          let startDate = new Date(_block.created_at);
+          let targetDate = new Date(_block.updated_at);
+          let infoToggle = true;
+
+          if (_block?.start_date && _block.target_date) {
+            startDate = _block?.start_date;
+            targetDate = _block.target_date;
+            infoToggle = false;
+          }
+
           return {
-            start_date: new Date(_block.created_at),
-            target_date: new Date(_block.updated_at),
+            start_date: new Date(startDate),
+            target_date: new Date(targetDate),
+            infoToggle: infoToggle,
             data: _block,
           };
         })

apps/app/components/modules/gantt-chart.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
+// ui
+import { Tooltip } from "components/ui";
 // hooks
 import useGanttChartModuleIssues from "hooks/gantt-chart/module-issues-view";
 
@@ -38,9 +40,23 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
           className="flex-shrink-0 w-[4px] h-full"
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
-        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-          {data?.name}
-        </div>
+        <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
+          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+            {data?.name}
+          </div>
+        </Tooltip>
+        {data.infoToggle && (
+          <Tooltip
+            tooltipContent={`No due-date set, rendered according to last updated date.`}
+            className={`z-[999999]`}
+          >
+            <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
+              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+                info
+              </span>
+            </div>
+          </Tooltip>
+        )}
       </a>
     </Link>
   );
@@ -59,10 +75,20 @@ export const ModuleIssuesGanttChartView: FC<Props> = ({}) => {
   const blockFormat = (blocks: any) =>
     blocks && blocks.length > 0
       ? blocks.map((_block: any) => {
-          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          let startDate = new Date(_block.created_at);
+          let targetDate = new Date(_block.updated_at);
+          let infoToggle = true;
+
+          if (_block?.start_date && _block.target_date) {
+            startDate = _block?.start_date;
+            targetDate = _block.target_date;
+            infoToggle = false;
+          }
+
           return {
-            start_date: new Date(_block.created_at),
-            target_date: new Date(_block.updated_at),
+            start_date: new Date(startDate),
+            target_date: new Date(targetDate),
+            infoToggle: infoToggle,
             data: _block,
           };
         })

apps/app/components/modules/modules-list-gantt-chart.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
+// ui
+import { Tooltip } from "components/ui";
 // types
 import { IModule } from "types";
 // constants
@@ -38,9 +40,11 @@ export const ModulesListGanttChartView: FC<Props> = ({ modules }) => {
           className="flex-shrink-0 w-[4px] h-full"
           style={{ backgroundColor: MODULE_STATUS.find((s) => s.value === data.status)?.color }}
         />
-        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-          {data?.name}
-        </div>
+        <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
+          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+            {data?.name}
+          </div>
+        </Tooltip>
       </a>
     </Link>
   );

apps/app/components/views/gantt-chart.tsx

@@ -4,6 +4,8 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // components
 import { GanttChartRoot } from "components/gantt-chart";
+// ui
+import { Tooltip } from "components/ui";
 // hooks
 import useGanttChartViewIssues from "hooks/gantt-chart/view-issues-view";
 
@@ -38,9 +40,23 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
           className="flex-shrink-0 w-[4px] h-full"
           style={{ backgroundColor: data?.state_detail?.color || "#858e96" }}
         />
-        <div className="w-full text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden">
-          {data?.name}
-        </div>
+        <Tooltip tooltipContent={data?.name} className={`z-[999999]`}>
+          <div className="text-brand-base text-[15px] whitespace-nowrap py-[4px] px-2.5 overflow-hidden w-full">
+            {data?.name}
+          </div>
+        </Tooltip>
+        {data.infoToggle && (
+          <Tooltip
+            tooltipContent={`No due-date set, rendered according to last updated date.`}
+            className={`z-[999999]`}
+          >
+            <div className="flex-shrink-0 mx-2 w-[18px] h-[18px] overflow-hidden flex justify-center items-center">
+              <span className="material-symbols-rounded text-brand-secondary text-[18px]">
+                info
+              </span>
+            </div>
+          </Tooltip>
+        )}
       </a>
     </Link>
   );
@@ -59,10 +75,20 @@ export const ViewIssuesGanttChartView: FC<Props> = ({}) => {
   const blockFormat = (blocks: any) =>
     blocks && blocks.length > 0
       ? blocks.map((_block: any) => {
-          if (_block?.start_date && _block.target_date) console.log("_block", _block);
+          let startDate = new Date(_block.created_at);
+          let targetDate = new Date(_block.updated_at);
+          let infoToggle = true;
+
+          if (_block?.start_date && _block.target_date) {
+            startDate = _block?.start_date;
+            targetDate = _block.target_date;
+            infoToggle = false;
+          }
+
           return {
-            start_date: new Date(_block.created_at),
-            target_date: new Date(_block.updated_at),
+            start_date: new Date(startDate),
+            target_date: new Date(targetDate),
+            infoToggle: infoToggle,
             data: _block,
           };
         })