Make the device selector filter case insensitive + ignore the current…

…ly selected device (#1975)

* feat(device-selector): case insensitive search

* style(pretty): pretty

* test(header-device-selector): fix/add test case for current device exclusion

src/components/device-page/header-device-selector.test.tsx

@@ -15,7 +15,23 @@ it('all devices are visible in dropdown', async () => {
     };
     render(<HeaderDeviceSelector allDevices={devices} currentDevice={currentDevice} />);
     await waitFor(() => fireEvent.click(screen.getByLabelText(/Select a device/)));
-    expect(document.querySelectorAll('.dropdown-item')).toHaveLength(2);
+    expect(document.querySelectorAll('.dropdown-item')).toHaveLength(1);
+});
+
+it('the current device is excluded from the list', async () => {
+    const ieeeAddress1 = 'FF:FF:FF:FF:FF:AA';
+    const ieeeAddress2 = 'AA:AA:AA:AA:AA:AA';
+    const currentDevice = createMockDevice({ ieee_address: ieeeAddress1, friendly_name: 'DONT SHOW ME' });
+    const devices = {
+        [ieeeAddress1]: currentDevice,
+        [ieeeAddress2]: createMockDevice({ ieee_address: ieeeAddress2, friendly_name: 'Other Device' }),
+    };
+    render(<HeaderDeviceSelector allDevices={devices} currentDevice={currentDevice} />);
+    await waitFor(() => fireEvent.click(screen.getByLabelText(/Select a device/)));
+    expect(document.querySelectorAll('.dropdown-item'));
+
+    expect(document.querySelectorAll('.dropdown-item').item(0).textContent).toContain('Other Device');
+    expect(document.querySelectorAll('.dropdown-item').item(0).textContent).not.toContain('DONT SHOW ME');
 });
 
 it('device can be selected', async () => {

src/components/device-page/header-device-selector.tsx

@@ -25,7 +25,11 @@ export function HeaderDeviceSelectorRaw(props: HeaderDeviceSelectorProps): JSX.E
     const { allDevices, currentDevice, tab = 'info', t } = props;
     const [searchTerm, setSearchTerm] = useState<string>('');
 
-    const selectedDevices = Object.values(allDevices).filter((d) => d.friendly_name.includes(searchTerm));
+    const selectedDevices = Object.values(allDevices).filter(
+        (d) =>
+            d.friendly_name.toLowerCase().includes(searchTerm.toLowerCase()) &&
+            d.ieee_address !== currentDevice.ieee_address,
+    );
 
     return (
         <h1 className="h3">