From 71dcbd938e3098ff309501e5cf6dbae79b40f723 Mon Sep 17 00:00:00 2001
From: Anmol Singh Bhatia <121005188+anmolsinghbhatia@users.noreply.github.com>
Date: Wed, 15 Jan 2025 15:23:30 +0530
Subject: [PATCH] [WEB-3078] chore: empty state config (#6397)

* chore: empty state config updated

* chore: code refactor

* chore: date range picker icon updated

* fix: tree map content css

---------

Co-authored-by: Prateek Shourya <prateekshourya29@gmail.com>
---
 .../core/charts/tree-map/map-content.tsx        |  4 ++--
 web/core/components/dropdowns/date-range.tsx    | 14 +++++++-------
 web/core/constants/empty-state.ts               | 17 ++++++++++++++++-
 3 files changed, 25 insertions(+), 10 deletions(-)

diff --git a/web/core/components/core/charts/tree-map/map-content.tsx b/web/core/components/core/charts/tree-map/map-content.tsx
index e2f2959f74..e7e1bfae16 100644
--- a/web/core/components/core/charts/tree-map/map-content.tsx
+++ b/web/core/components/core/charts/tree-map/map-content.tsx
@@ -196,7 +196,7 @@ export const CustomTreeMapContent: React.FC<any> = ({
             L${pX},${pY + LAYOUT.RADIUS}
             Q${pX},${pY} ${pX + LAYOUT.RADIUS},${pY}
           `}
-          className={cn("transition-colors duration-200 hover:opacity-90 cursor-pointer", fillClassName)}
+          className={cn("transition-colors duration-200 hover:opacity-90", fillClassName)}
           fill={fillColor ?? "currentColor"}
         />
 
@@ -269,7 +269,7 @@ export const CustomTreeMapContent: React.FC<any> = ({
 
   return (
     <g>
-      <rect x={x} y={y} width={width} height={height} fill="transparent" className="cursor-pointer" />
+      <rect x={x} y={y} width={width} height={height} fill="transparent" />
       {renderContent()}
     </g>
   );
diff --git a/web/core/components/dropdowns/date-range.tsx b/web/core/components/dropdowns/date-range.tsx
index 453215e994..a7914701f3 100644
--- a/web/core/components/dropdowns/date-range.tsx
+++ b/web/core/components/dropdowns/date-range.tsx
@@ -4,7 +4,7 @@ import React, { useEffect, useRef, useState } from "react";
 import { Placement } from "@popperjs/core";
 import { DateRange, DayPicker, Matcher } from "react-day-picker";
 import { usePopper } from "react-popper";
-import { ArrowRight, CalendarDays } from "lucide-react";
+import { ArrowRight, CalendarCheck2, CalendarDays } from "lucide-react";
 import { Combobox } from "@headlessui/react";
 // ui
 import { Button, ComboDropDown } from "@plane/ui";
@@ -33,7 +33,6 @@ type Props = {
     from?: boolean;
     to?: boolean;
   };
-  icon?: React.ReactNode;
   minDate?: Date;
   maxDate?: Date;
   onSelect: (range: DateRange | undefined) => void;
@@ -50,6 +49,7 @@ type Props = {
     to: Date | undefined;
   };
   renderByDefault?: boolean;
+  renderPlaceholder?: boolean;
 };
 
 export const DateRangeDropdown: React.FC<Props> = (props) => {
@@ -68,7 +68,6 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
       from: true,
       to: true,
     },
-    icon = <CalendarDays className="h-3 w-3 flex-shrink-0" />,
     minDate,
     maxDate,
     onSelect,
@@ -82,6 +81,7 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
     tabIndex,
     value,
     renderByDefault = true,
+    renderPlaceholder = true,
   } = props;
   // states
   const [isOpen, setIsOpen] = useState(false);
@@ -166,15 +166,15 @@ export const DateRangeDropdown: React.FC<Props> = (props) => {
         <span
           className={cn("h-full flex items-center justify-center gap-1 rounded-sm flex-grow", buttonFromDateClassName)}
         >
-          {!hideIcon.from && icon}
-          {dateRange.from ? renderFormattedDate(dateRange.from) : placeholder.from}
+          {!hideIcon.from && <CalendarDays className="h-3 w-3 flex-shrink-0" />}
+          {dateRange.from ? renderFormattedDate(dateRange.from) : renderPlaceholder ? placeholder.from : ""}
         </span>
         <ArrowRight className="h-3 w-3 flex-shrink-0" />
         <span
           className={cn("h-full flex items-center justify-center gap-1 rounded-sm flex-grow", buttonToDateClassName)}
         >
-          {!hideIcon.to && icon}
-          {dateRange.to ? renderFormattedDate(dateRange.to) : placeholder.to}
+          {!hideIcon.to && <CalendarCheck2 className="h-3 w-3 flex-shrink-0" />}
+          {dateRange.to ? renderFormattedDate(dateRange.to) : renderPlaceholder ? placeholder.to : ""}
         </span>
       </DropdownButton>
     </button>
diff --git a/web/core/constants/empty-state.ts b/web/core/constants/empty-state.ts
index 2ec4cb417c..7ba5a19255 100644
--- a/web/core/constants/empty-state.ts
+++ b/web/core/constants/empty-state.ts
@@ -83,6 +83,9 @@ export enum EmptyStateType {
   ISSUE_RELATION_EMPTY_STATE = "issue-relation-empty-state",
   ISSUE_COMMENT_EMPTY_STATE = "issue-comment-empty-state",
 
+  EPIC_RELATION_SEARCH_EMPTY_STATE = "epic-relation-search-empty-state",
+  EPIC_RELATION_EMPTY_STATE = "epic-relation-empty-state",
+
   NOTIFICATION_DETAIL_EMPTY_STATE = "notification-detail-empty-state",
   NOTIFICATION_ALL_EMPTY_STATE = "notification-all-empty-state",
   NOTIFICATION_MENTIONS_EMPTY_STATE = "notification-mentions-empty-state",
@@ -639,7 +642,7 @@ const emptyStateDetails = {
   },
   [EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE]: {
     key: EmptyStateType.ISSUE_RELATION_SEARCH_EMPTY_STATE,
-    title: "No maching issues found",
+    title: "No matching issues found",
     path: "/empty-state/search/search",
   },
   [EmptyStateType.ISSUE_RELATION_EMPTY_STATE]: {
@@ -647,6 +650,18 @@ const emptyStateDetails = {
     title: "No issues found",
     path: "/empty-state/search/issues",
   },
+
+  [EmptyStateType.EPIC_RELATION_SEARCH_EMPTY_STATE]: {
+    key: EmptyStateType.EPIC_RELATION_SEARCH_EMPTY_STATE,
+    title: "No matching epics found",
+    path: "/empty-state/search/search",
+  },
+  [EmptyStateType.EPIC_RELATION_EMPTY_STATE]: {
+    key: EmptyStateType.EPIC_RELATION_EMPTY_STATE,
+    title: "No epics found",
+    path: "/empty-state/search/issues",
+  },
+
   [EmptyStateType.ISSUE_COMMENT_EMPTY_STATE]: {
     key: EmptyStateType.ISSUE_COMMENT_EMPTY_STATE,
     title: "No comments yet",