Added a filter input to the queue menu

packages/ui/src/components/Icons/Search.tsx

@@ -0,0 +1,16 @@
+import React from 'react';
+
+export const SearchIcon = () => (
+  <svg
+    xmlns="http://www.w3.org/2000/svg"
+    viewBox="0 0 32 32"
+    fill="none"
+    stroke="currentcolor"
+    strokeLinecap="round"
+    strokeLinejoin="round"
+    strokeWidth="2"
+  >
+    <circle cx="14" cy="14" r="12" />
+    <path d="M23 23 L30 30" />
+  </svg>
+);

packages/ui/src/components/Menu/Menu.module.css

@@ -1,72 +1,106 @@
 .aside {
-    position: fixed;
-    z-index: 99;
-    top: var(--header-height);
-    left: 0;
-    bottom: 0;
-    width: var(--menu-width);
-    background: linear-gradient(
-            to bottom,
-            hsl(217, 22%, 20%),
-            hsl(217, 22%, 16%) 80%,
-            hsl(217, 22%, 12%)
-    );
-    padding-top: 1rem;
-    color: #d5d9dc;
-    display: flex;
-    flex-direction: column;
-    box-shadow: 4px 0 8px 3px rgba(38, 46, 60, 0.1);
+  position: fixed;
+  z-index: 99;
+  top: var(--header-height);
+  left: 0;
+  bottom: 0;
+  width: var(--menu-width);
+  background: linear-gradient(
+    to bottom,
+    hsl(217, 22%, 20%),
+    hsl(217, 22%, 16%) 80%,
+    hsl(217, 22%, 12%)
+  );
+  padding-top: 1rem;
+  color: #d5d9dc;
+  display: flex;
+  flex-direction: column;
+  box-shadow: 4px 0 8px 3px rgba(38, 46, 60, 0.1);
 }
 
 .aside > div {
-    color: #828e97;
-    font-size: 0.833em;
-    padding: 0 1rem;
+  color: #828e97;
+  font-size: 0.833em;
+  padding: 0 1rem;
 }
 
 .aside nav {
-    flex: 1;
-    overflow-y: auto;
+  flex: 1;
+  overflow-y: auto;
 }
 
 .menu {
-    list-style: none;
-    padding: 0;
+  list-style: none;
+  padding: 0;
 }
 
 .menu li + li {
-    border-top: 1px solid hsl(206, 9%, 25%);
+  border-top: 1px solid hsl(206, 9%, 25%);
 }
 
 .menu a {
-    color: inherit;
-    text-decoration: none;
-    display: block;
-    padding: 1rem 1.25rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    transition: background-color 100ms ease-in;
-    border-left: 3px solid transparent;
+  color: inherit;
+  text-decoration: none;
+  display: block;
+  padding: 1rem 1.25rem;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  transition: background-color 100ms ease-in;
+  border-left: 3px solid transparent;
 }
 
 .menu a:hover {
-    background-color: rgba(255, 255, 255, 0.05);
-    border-left-color: hsl(184, 20%, 30%);
+  background-color: rgba(255, 255, 255, 0.05);
+  border-left-color: hsl(184, 20%, 30%);
 }
 
 .menu a.active {
-    background-color: rgba(255, 255, 255, 0.1);
-    border-left-color: #4abec7;
+  background-color: rgba(255, 255, 255, 0.1);
+  border-left-color: #4abec7;
 }
 
 .appVersion {
-    text-align: center;
+  text-align: center;
 }
 
 .isPaused {
-    color: #828e97;
-    font-size: 0.833em;
-   display: block;
-margin-bottom: -0.75em;
+  color: #828e97;
+  font-size: 0.833em;
+  display: block;
+  margin-bottom: -0.75em;
+}
+
+.searchWrapper {
+  color: #f5f8fa;
+  position: relative;
+}
+
+.searchWrapper svg {
+  width: 16px;
+  height: 16px;
+  position: absolute;
+  pointer-events: none;
+  top: 22px;
+  left: 20px;
+  stroke-width: 2px;
+  color: #c5c9cd;
+}
+
+.search {
+  border: 2px solid #1d232e;
+  border-radius: 18px;
+  margin: 10px 10px;
+  background-color: #303a4b;
+  height: 40px;
+  padding: 0 12px 0 32px;
+  color: #f5f8fa;
+  line-height: 40px;
+}
+
+.search:focus-visible,
+.search:focus,
+.search:active {
+  border: 2px solid #4abec7;
+  outline: 0;
 }

packages/ui/src/components/Menu/Menu.tsx

@@ -1,7 +1,9 @@
+import React, { useState } from 'react';
+
 import { AppQueue } from '@bull-board/api/typings/app';
-import React from 'react';
 import { NavLink } from 'react-router-dom';
 import { STATUS_LIST } from '../../constants/status-list';
+import { SearchIcon } from '../Icons/Search';
 import { Store } from '../../hooks/useStore';
 import s from './Menu.module.css';
 
@@ -11,30 +13,47 @@ export const Menu = ({
 }: {
   queues: AppQueue[] | undefined;
   selectedStatuses: Store['selectedStatuses'];
-}) => (
-  <aside className={s.aside}>
-    <div>QUEUES</div>
-    <nav>
-      {!!queues && (
-        <ul className={s.menu}>
-          {queues.map(({ name: queueName, isPaused }) => (
-            <li key={queueName}>
-              <NavLink
-                to={`/queue/${encodeURIComponent(queueName)}${
-                  !selectedStatuses[queueName] || selectedStatuses[queueName] === STATUS_LIST[0]
-                    ? ''
-                    : `?status=${selectedStatuses[queueName]}`
-                }`}
-                activeClassName={s.active}
-                title={queueName}
-              >
-                {queueName} {isPaused && <span className={s.isPaused}>[ Paused ]</span>}
-              </NavLink>
-            </li>
-          ))}
-        </ul>
-      )}
-    </nav>
-    <div className={s.appVersion}>{process.env.APP_VERSION}</div>
-  </aside>
-);
+}) => {
+  const [searchTerm, setSearchTerm] = useState('');
+  return (
+    <aside className={s.aside}>
+      <div>QUEUES</div>
+
+      <span className={s.searchWrapper}>
+        <SearchIcon />
+        <input
+          className={s.search}
+          type="search"
+          id="search-queues"
+          placeholder="Filter queues"
+          value={searchTerm}
+          onChange={({ currentTarget }) => setSearchTerm(currentTarget.value)}
+        />
+      </span>
+      <nav>
+        {!!queues && (
+          <ul className={s.menu}>
+            {queues
+              .filter(({ name }) => name.includes(searchTerm))
+              .map(({ name: queueName, isPaused }) => (
+                <li key={queueName}>
+                  <NavLink
+                    to={`/queue/${encodeURIComponent(queueName)}${
+                      !selectedStatuses[queueName] || selectedStatuses[queueName] === STATUS_LIST[0]
+                        ? ''
+                        : `?status=${selectedStatuses[queueName]}`
+                    }`}
+                    activeClassName={s.active}
+                    title={queueName}
+                  >
+                    {queueName} {isPaused && <span className={s.isPaused}>[ Paused ]</span>}
+                  </NavLink>
+                </li>
+              ))}
+          </ul>
+        )}
+      </nav>
+      <div className={s.appVersion}>{process.env.APP_VERSION}</div>
+    </aside>
+  );
+};