fix: show search bar for bucket even when no bucket is found (#5079)

* fix: show search bar even when no bucket is found

* style: replace customized css with clockface component

Author: appletreeisyellow

src/dataExplorer/components/BucketSelector.tsx

@@ -85,59 +85,49 @@ const BucketSelector: FC = () => {
     )
   }
 
-  if (!_buckets.length) {
-    return (
-      <div>
-        <SelectorTitle title="Bucket" info={BUCKET_TOOLTIP} />
-        <Dropdown
-          button={button}
-          menu={onCollapse => (
-            <Dropdown.Menu onCollapse={onCollapse}>
-              <Dropdown.ItemEmpty>No Buckets Available</Dropdown.ItemEmpty>
-            </Dropdown.Menu>
-          )}
-        />
-      </div>
-    )
-  }
+  let body: JSX.Element | JSX.Element[] = (
+    <Dropdown.ItemEmpty>No Buckets Found</Dropdown.ItemEmpty>
+  )
 
-  const body = Object.entries(
-    _buckets.reduce((acc, curr) => {
-      if (!acc[curr.type]) {
-        acc[curr.type] = []
+  if (_buckets.length) {
+    body = Object.entries(
+      _buckets.reduce((acc, curr) => {
+        if (!acc[curr.type]) {
+          acc[curr.type] = []
+        }
+
+        acc[curr.type].push(curr)
+        return acc
+      }, {}) as Record<string, Bucket[]>
+    ).map(([k, v]) => {
+      const items = v.map(bucket => (
+        <Dropdown.Item
+          key={bucket.name}
+          value={bucket}
+          onClick={handleSelectBucket}
+          selected={bucket.name === selectedBucket?.name}
+          title={bucket.name}
+          wrapText={true}
+          testID={`bucket-selector--dropdown--${bucket.name}`}
+        >
+          {bucket.name}
+        </Dropdown.Item>
+      ))
+
+      let name = k
+
+      if (REMAP_BUCKET_TYPES.hasOwnProperty(k)) {
+        name = REMAP_BUCKET_TYPES[k]
       }
 
-      acc[curr.type].push(curr)
-      return acc
-    }, {}) as Record<string, Bucket[]>
-  ).map(([k, v]) => {
-    const items = v.map(bucket => (
-      <Dropdown.Item
-        key={bucket.name}
-        value={bucket}
-        onClick={handleSelectBucket}
-        selected={bucket.name === selectedBucket?.name}
-        title={bucket.name}
-        wrapText={true}
-        testID={`bucket-selector--dropdown--${bucket.name}`}
-      >
-        {bucket.name}
-      </Dropdown.Item>
-    ))
-
-    let name = k
-
-    if (REMAP_BUCKET_TYPES.hasOwnProperty(k)) {
-      name = REMAP_BUCKET_TYPES[k]
-    }
-
-    return (
-      <Fragment key={name}>
-        <Dropdown.Divider text={name} />
-        {items}
-      </Fragment>
-    )
-  })
+      return (
+        <Fragment key={name}>
+          <Dropdown.Divider text={name} />
+          {items}
+        </Fragment>
+      )
+    })
+  }
 
   return (
     <div>

src/shared/components/SearchableDropdown.scss

@@ -3,13 +3,3 @@
   padding: $cf-space-2xs 0;
   border-bottom: $ix-border solid $cf-grey-25;
 }
-
-.searchable-dropdown--empty {
-  padding: $cf-space-2xs;
-  text-align: center;
-  opacity: 0.75;
-  user-select: none;
-  font-style: italic;
-  font-weight: 500;
-  font-size: 12px;
-}

src/shared/components/SearchableDropdown.tsx

@@ -54,7 +54,7 @@ const SearchableDropdown: FC<Props> = ({
   )
 
   let body: JSX.Element | JSX.Element[] = (
-    <div className="searchable-dropdown--empty">{emptyText}</div>
+    <Dropdown.ItemEmpty>{emptyText}</Dropdown.ItemEmpty>
   )
 
   if (filteredOptions.length) {