From 5f1209f1dbaec55e36f5d3320e65b4c3cfc6168a Mon Sep 17 00:00:00 2001
From: Aaryan Khandelwal <65252264+aaryan610@users.noreply.github.com>
Date: Tue, 8 Aug 2023 14:13:26 +0530
Subject: [PATCH] chore: empty state for multi-level dropdown (#1802)

* fix :label filter should show something if there is no label #1779 (#1795)

* style: children empty state

---------

Co-authored-by: Pankaj Chotaliya <34762752+pankajvc@users.noreply.github.com>
---
 .../components/ui/multi-level-dropdown.tsx    | 52 +++++++++++--------
 1 file changed, 29 insertions(+), 23 deletions(-)

diff --git a/apps/app/components/ui/multi-level-dropdown.tsx b/apps/app/components/ui/multi-level-dropdown.tsx
index 9a4ebdbe4..cfdaa72d5 100644
--- a/apps/app/components/ui/multi-level-dropdown.tsx
+++ b/apps/app/components/ui/multi-level-dropdown.tsx
@@ -66,7 +66,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
             >
               <Menu.Items
                 static
-                className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 text-xs shadow-lg focus:outline-none"
+                className="absolute right-0 z-10 mt-1 w-36 origin-top-right select-none rounded-md bg-custom-background-90 border border-custom-border-300 text-xs shadow-lg focus:outline-none"
               >
                 {options.map((option) => (
                   <div className="relative p-1" key={option.id}>
@@ -107,7 +107,7 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                     </Menu.Item>
                     {option.hasChildren && option.id === openChildFor && (
                       <div
-                        className={`absolute top-0 w-36 origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 shadow-lg focus:outline-none ${
+                        className={`absolute top-0 min-w-36 whitespace-nowrap origin-top-right select-none overflow-y-scroll rounded-md bg-custom-background-90 border border-custom-border-300 shadow-lg focus:outline-none ${
                           direction === "left"
                             ? "right-full -translate-x-1"
                             : "left-full translate-x-1"
@@ -125,27 +125,33 @@ export const MultiLevelDropdown: React.FC<MultiLevelDropdownProps> = ({
                       >
                         {option.children ? (
                           <div className="space-y-1 p-1">
-                            {option.children.map((child) => {
-                              if (child.element) return child.element;
-                              else
-                                return (
-                                  <button
-                                    key={child.id}
-                                    type="button"
-                                    onClick={() => onSelect(child.value)}
-                                    className={`${
-                                      child.selected ? "bg-custom-background-80" : ""
-                                    } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
-                                  >
-                                    {child.label}{" "}
-                                    <CheckIcon
-                                      className={`h-3.5 w-3.5 opacity-0 ${
-                                        child.selected ? "opacity-100" : ""
-                                      }`}
-                                    />
-                                  </button>
-                                );
-                            })}
+                            {option.children.length === 0 ? (
+                              <p className="text-custom-text-200 text-center px-1 py-1.5">
+                                No {option.label} found
+                              </p> //if no children found, show this message.
+                            ) : (
+                              option.children.map((child) => {
+                                if (child.element) return child.element;
+                                else
+                                  return (
+                                    <button
+                                      key={child.id}
+                                      type="button"
+                                      onClick={() => onSelect(child.value)}
+                                      className={`${
+                                        child.selected ? "bg-custom-background-80" : ""
+                                      } flex w-full items-center justify-between break-words rounded px-1 py-1.5 text-left text-custom-text-200 hover:bg-custom-background-80`}
+                                    >
+                                      {child.label}{" "}
+                                      <CheckIcon
+                                        className={`h-3.5 w-3.5 opacity-0 ${
+                                          child.selected ? "opacity-100" : ""
+                                        }`}
+                                      />
+                                    </button>
+                                  );
+                              })
+                            )}
                           </div>
                         ) : (
                           <Loader className="p-1 space-y-2">