From c8f696037f2145dc6760f5cd0ff82ee637566fea Mon Sep 17 00:00:00 2001
From: James Ivings <james@squarecat.io>
Date: Fri, 6 Aug 2021 12:10:37 +0100
Subject: [PATCH 1/2] added a filter input to the queue menu

---
 .../ui/src/components/Menu/Menu.module.css    | 120 +++++++++++-------
 packages/ui/src/components/Menu/Menu.tsx      |  80 ++++++++----
 2 files changed, 129 insertions(+), 71 deletions(-)

diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index 62662438..e1aff1d9 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/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;
+}
+
+.search-wrapper {
+  color: #f5f8fa;
+  position: relative;
+}
+
+.search-icon {
+  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;
 }
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index 3a919346..1c4fd546 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -1,5 +1,6 @@
+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 { Store } from '../../hooks/useStore';
@@ -11,30 +12,53 @@ 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}>
+        <svg className={s.searchIcon} 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>
+      <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>
+  );
+};

From 2084f11fed00fe5d5b95b126850f51e31305aae1 Mon Sep 17 00:00:00 2001
From: James Ivings <james@squarecat.io>
Date: Fri, 6 Aug 2021 12:35:57 +0100
Subject: [PATCH 2/2] move search icon to module, change css selectors to
 camelCase

---
 packages/ui/src/components/Icons/Search.tsx   | 16 +++++
 .../ui/src/components/Menu/Menu.module.css    |  4 +-
 packages/ui/src/components/Menu/Menu.tsx      | 59 +++++++++----------
 3 files changed, 45 insertions(+), 34 deletions(-)
 create mode 100644 packages/ui/src/components/Icons/Search.tsx

diff --git a/packages/ui/src/components/Icons/Search.tsx b/packages/ui/src/components/Icons/Search.tsx
new file mode 100644
index 00000000..9803b4b8
--- /dev/null
+++ b/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>
+);
diff --git a/packages/ui/src/components/Menu/Menu.module.css b/packages/ui/src/components/Menu/Menu.module.css
index e1aff1d9..c86d981a 100644
--- a/packages/ui/src/components/Menu/Menu.module.css
+++ b/packages/ui/src/components/Menu/Menu.module.css
@@ -71,12 +71,12 @@
   margin-bottom: -0.75em;
 }
 
-.search-wrapper {
+.searchWrapper {
   color: #f5f8fa;
   position: relative;
 }
 
-.search-icon {
+.searchWrapper svg {
   width: 16px;
   height: 16px;
   position: absolute;
diff --git a/packages/ui/src/components/Menu/Menu.tsx b/packages/ui/src/components/Menu/Menu.tsx
index 1c4fd546..3f21dfa2 100644
--- a/packages/ui/src/components/Menu/Menu.tsx
+++ b/packages/ui/src/components/Menu/Menu.tsx
@@ -3,6 +3,7 @@ import React, { useState } from 'react';
 import { AppQueue } from '@bull-board/api/typings/app';
 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';
 
@@ -19,42 +20,36 @@ export const Menu = ({
       <div>QUEUES</div>
 
       <span className={s.searchWrapper}>
-        <svg className={s.searchIcon} 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>
-      <input 
-        className={s.search}
-        type="search" 
-        id="search-queues" 
-        placeholder="Filter queues"
-        value={searchTerm} 
-        onChange={({currentTarget}) => setSearchTerm(currentTarget.value)}
-      />
+        <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>
-                ))
-            }
+            {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>