[WEB-402] chore: project issues count (#3911)

* chore: added project issues count * chore: project module and cycle issue count * chore: resolved merge conflicts * chore: added import statement * chore: issue count type added * chore: issue count added in project, cycle and module issues * fix: lint fixes * chore: tooltip added in issue count badge * chore: tooltip added in issue count badge --------- Co-authored-by: NarayanBavisetti <narayan3119@gmail.com> Co-authored-by: sriram veeraghanta <veeraghanta.sriram@gmail.com>
2024-03-11 21:05:00 +05:30
parent b57c389c75
commit 01702e9f66
13 changed files with 256 additions and 51 deletions
--- a/web/components/headers/cycle-issues.tsx
+++ b/web/components/headers/cycle-issues.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
 import { ArrowRight, Plus, PanelRight } from "lucide-react";
-import { Breadcrumbs, Button, ContrastIcon, CustomMenu } from "@plane/ui";
+import { Breadcrumbs, Button, ContrastIcon, CustomMenu, Tooltip } from "@plane/ui";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@@ -142,6 +142,12 @@ export const CycleIssuesHeader: React.FC = observer(() => {
  const canUserCreateIssue =
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

+  const issueCount = cycleDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? cycleDetails.total_issues + cycleDetails?.sub_issues
+      : cycleDetails.total_issues
+    : undefined;
+
  return (
    <>
      <ProjectAnalyticsModal
@@ -197,15 +203,29 @@ export const CycleIssuesHeader: React.FC = observer(() => {
                    label={
                      <>
                        <ContrastIcon className="h-3 w-3" />
-                        <div className=" w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
-                          {cycleDetails?.name && cycleDetails.name}
+                        <div className="flex items-center gap-2 w-auto max-w-[70px] sm:max-w-[200px] truncate">
+                          <p className="truncate">{cycleDetails?.name && cycleDetails.name}</p>
+                          {issueCount && issueCount > 0 ? (
+                            <Tooltip
+                              tooltipContent={`There are ${issueCount} ${
+                                issueCount > 1 ? "issues" : "issue"
+                              } in this cycle`}
+                              position="bottom"
+                            >
+                              <span className="cursor-default flex items-center text-center justify-center px-2 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                                {issueCount}
+                              </span>
+                            </Tooltip>
+                          ) : null}
                        </div>
                      </>
                    }
-                    className="ml-1.5 flex-shrink-0"
+                    className="ml-1.5 flex-shrink-0 truncate"
                    placement="bottom-start"
                  >
-                    {currentProjectCycleIds?.map((cycleId) => <CycleDropdownOption key={cycleId} cycleId={cycleId} />)}
+                    {currentProjectCycleIds?.map((cycleId) => (
+                      <CycleDropdownOption key={cycleId} cycleId={cycleId} />
+                    ))}
                  </CustomMenu>
                }
              />
--- a/web/components/headers/module-issues.tsx
+++ b/web/components/headers/module-issues.tsx
@@ -4,7 +4,7 @@ import Link from "next/link";
 import { useRouter } from "next/router";
 // hooks
 import { ArrowRight, PanelRight, Plus } from "lucide-react";
-import { Breadcrumbs, Button, CustomMenu, DiceIcon } from "@plane/ui";
+import { Breadcrumbs, Button, CustomMenu, DiceIcon, Tooltip } from "@plane/ui";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@@ -143,6 +143,12 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
  const canUserCreateIssue =
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

+  const issueCount = moduleDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? moduleDetails.total_issues + moduleDetails.sub_issues
+      : moduleDetails.total_issues
+    : undefined;
+
  return (
    <>
      <ProjectAnalyticsModal
@@ -198,15 +204,29 @@ export const ModuleIssuesHeader: React.FC = observer(() => {
                    label={
                      <>
                        <DiceIcon className="h-3 w-3" />
-                        <div className="w-auto max-w-[70px] sm:max-w-[200px] inline-block truncate line-clamp-1 overflow-hidden whitespace-nowrap">
-                          {moduleDetails?.name && moduleDetails.name}
+                        <div className="flex items-center gap-2 w-auto max-w-[70px] sm:max-w-[200px] truncate">
+                          <p className="truncate">{moduleDetails?.name && moduleDetails.name}</p>
+                          {issueCount && issueCount > 0 ? (
+                            <Tooltip
+                              tooltipContent={`There are ${issueCount} ${
+                                issueCount > 1 ? "issues" : "issue"
+                              } in this module`}
+                              position="bottom"
+                            >
+                              <span className="cursor-default flex items-center text-center justify-center px-2 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                                {issueCount}
+                              </span>
+                            </Tooltip>
+                          ) : null}
                        </div>
                      </>
                    }
                    className="ml-1.5 flex-shrink-0"
                    placement="bottom-start"
                  >
-                    {projectModuleIds?.map((moduleId) => <ModuleDropdownOption key={moduleId} moduleId={moduleId} />)}
+                    {projectModuleIds?.map((moduleId) => (
+                      <ModuleDropdownOption key={moduleId} moduleId={moduleId} />
+                    ))}
                  </CustomMenu>
                }
              />
--- a/web/components/headers/project-archived-issues.tsx
+++ b/web/components/headers/project-archived-issues.tsx
@@ -5,7 +5,7 @@ import { ArrowLeft } from "lucide-react";
 // hooks
 // constants
 // ui
-import { Breadcrumbs, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
 // components
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@@ -69,6 +69,12 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
    updateFilters(workspaceSlug.toString(), projectId.toString(), EIssueFilterType.DISPLAY_PROPERTIES, property);
  };

+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails.archived_issues + currentProjectDetails.archived_sub_issues
+      : currentProjectDetails.archived_issues
+    : undefined;
+
  return (
    <div className="relative z-10 flex h-14 w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
@@ -82,7 +88,7 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
            <ArrowLeft fontSize={14} strokeWidth={2} />
          </button>
        </div>
-        <div>
+        <div className="flex items-center gap-2.5">
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
@@ -111,6 +117,16 @@ export const ProjectArchivedIssuesHeader: FC = observer(() => {
              }
            />
          </Breadcrumbs>
+          {issueCount && issueCount > 0 ? (
+            <Tooltip
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in project's archived`}
+              position="bottom"
+            >
+              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                {issueCount}
+              </span>
+            </Tooltip>
+          ) : null}
        </div>
      </div>

--- a/web/components/headers/project-draft-issues.tsx
+++ b/web/components/headers/project-draft-issues.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 // hooks
 // components
-import { Breadcrumbs, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, LayersIcon, Tooltip } from "@plane/ui";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
 import { DisplayFiltersSelection, FiltersDropdown, FilterSelection, LayoutSelection } from "components/issues";
@@ -73,11 +73,18 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
    },
    [workspaceSlug, projectId, updateFilters]
  );
+
+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails.draft_issues + currentProjectDetails.draft_sub_issues
+      : currentProjectDetails.draft_issues
+    : undefined;
+
  return (
    <div className="relative z-10 flex h-[3.75rem] w-full flex-shrink-0 flex-row items-center justify-between gap-x-2 gap-y-4 border-b border-custom-border-200 bg-custom-sidebar-background-100 p-4">
      <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
        <SidebarHamburgerToggle />
-        <div>
+        <div className="flex items-center gap-2.5">
          <Breadcrumbs>
            <Breadcrumbs.BreadcrumbItem
              type="text"
@@ -103,6 +110,16 @@ export const ProjectDraftIssueHeader: FC = observer(() => {
              }
            />
          </Breadcrumbs>
+          {issueCount && issueCount > 0 ? (
+            <Tooltip
+              tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in project's draft`}
+              position="bottom"
+            >
+              <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                {issueCount}
+              </span>
+            </Tooltip>
+          ) : null}
        </div>

        <div className="ml-auto flex items-center gap-2">
--- a/web/components/headers/project-issues.tsx
+++ b/web/components/headers/project-issues.tsx
@@ -3,7 +3,7 @@ import { observer } from "mobx-react-lite";
 import { useRouter } from "next/router";
 import { Briefcase, Circle, ExternalLink, Plus } from "lucide-react";
 // hooks
-import { Breadcrumbs, Button, LayersIcon } from "@plane/ui";
+import { Breadcrumbs, Button, LayersIcon, Tooltip } from "@plane/ui";
 import { ProjectAnalyticsModal } from "components/analytics";
 import { BreadcrumbLink } from "components/common";
 import { SidebarHamburgerToggle } from "components/core/sidebar/sidebar-menu-hamburger-toggle";
@@ -102,6 +102,12 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
  const canUserCreateIssue =
    currentProjectRole && [EUserProjectRoles.ADMIN, EUserProjectRoles.MEMBER].includes(currentProjectRole);

+  const issueCount = currentProjectDetails
+    ? issueFilters?.displayFilters?.sub_issue
+      ? currentProjectDetails?.total_issues + currentProjectDetails?.sub_issues
+      : currentProjectDetails?.total_issues
+    : undefined;
+
  return (
    <>
      <ProjectAnalyticsModal
@@ -113,7 +119,7 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
        <div className="flex items-center gap-2 p-4 border-b border-custom-border-200 bg-custom-sidebar-background-100">
          <div className="flex w-full flex-grow items-center gap-2 overflow-ellipsis whitespace-nowrap">
            <SidebarHamburgerToggle />
-            <div>
+            <div className="flex items-center gap-2.5">
              <Breadcrumbs onBack={() => router.back()}>
                <Breadcrumbs.BreadcrumbItem
                  type="text"
@@ -145,6 +151,16 @@ export const ProjectIssuesHeader: React.FC = observer(() => {
                  }
                />
              </Breadcrumbs>
+              {issueCount && issueCount > 0 ? (
+                <Tooltip
+                  tooltipContent={`There are ${issueCount} ${issueCount > 1 ? "issues" : "issue"} in this project`}
+                  position="bottom"
+                >
+                  <span className="cursor-default flex items-center text-center justify-center px-2.5 py-0.5 flex-shrink-0 bg-custom-primary-100/20 text-custom-primary-100 text-xs font-semibold rounded-xl">
+                    {issueCount}
+                  </span>
+                </Tooltip>
+              ) : null}
            </div>
            {currentProjectDetails?.is_deployed && deployUrl && (
              <a