Merge pull request #150 from stephb9959/main

[WIFI-11957] Added device search bar to device page top-bar

package-lock.json

@@ -1,12 +1,12 @@
 {
   "name": "ucentral-client",
-  "version": "2.8.0(42)",
+  "version": "2.8.0(43)",
   "lockfileVersion": 2,
   "requires": true,
   "packages": {
     "": {
       "name": "ucentral-client",
-      "version": "2.8.0(42)",
+      "version": "2.8.0(43)",
       "license": "ISC",
       "dependencies": {
         "@chakra-ui/icons": "^2.0.11",

package.json

@@ -1,6 +1,6 @@
 {
   "name": "ucentral-client",
-  "version": "2.8.0(42)",
+  "version": "2.8.0(43)",
   "description": "",
   "private": true,
   "main": "index.tsx",

src/components/Buttons/DeviceActionDropdown/index.tsx

@@ -1,16 +1,5 @@
 import React from 'react';
-import {
-  Button,
-  IconButton,
-  Menu,
-  MenuButton,
-  MenuItem,
-  MenuList,
-  Portal,
-  Spinner,
-  Tooltip,
-  useToast,
-} from '@chakra-ui/react';
+import { Button, IconButton, Menu, MenuButton, MenuItem, MenuList, Spinner, Tooltip, useToast } from '@chakra-ui/react';
 import axios from 'axios';
 import { Wrench } from 'phosphor-react';
 import { useTranslation } from 'react-i18next';
@@ -34,6 +23,7 @@ interface Props {
   onOpenTelemetryModal: (serialNumber: string) => void;
   onOpenScriptModal: (device: GatewayDevice) => void;
   size?: 'sm' | 'md' | 'lg';
+  isCompact?: boolean;
 }
 
 const DeviceActionDropdown = ({
@@ -49,6 +39,7 @@ const DeviceActionDropdown = ({
   onOpenConfigureModal,
   onOpenScriptModal,
   size,
+  isCompact,
 }: Props) => {
   const { t } = useTranslation();
   const toast = useToast();
@@ -157,9 +148,9 @@ const DeviceActionDropdown = ({
   const handleConnectClick = () => getRtty();
 
   return (
-    <Menu preventOverflow>
+    <Menu>
       <Tooltip label={t('commands.other')}>
-        {size === undefined ? (
+        {size === undefined || isCompact ? (
           <MenuButton
             as={IconButton}
             aria-label="Commands"
@@ -181,24 +172,22 @@ const DeviceActionDropdown = ({
           </MenuButton>
         )}
       </Tooltip>
-      <Portal>
-        <MenuList>
-          <MenuItem onClick={handleBlinkClick}>{t('commands.blink')}</MenuItem>
-          <MenuItem onClick={handleOpenConfigure}>{t('controller.configure.title')}</MenuItem>
-          <MenuItem onClick={handleConnectClick}>{t('commands.connect')}</MenuItem>
-          <MenuItem onClick={handleOpenQueue}>{t('controller.queue.title')}</MenuItem>
-          <MenuItem onClick={handleOpenFactoryReset}>{t('commands.factory_reset')}</MenuItem>
-          <MenuItem onClick={handleOpenUpgrade}>{t('commands.firmware_upgrade')}</MenuItem>
-          <RebootMenuItem device={device} refresh={refresh} />
-          <MenuItem onClick={handleOpenTelemetry}>{t('controller.telemetry.title')}</MenuItem>
-          <MenuItem onClick={handleOpenScript}>{t('script.one')}</MenuItem>
-          <MenuItem onClick={handleOpenTrace}>{t('controller.devices.trace')}</MenuItem>
-          <MenuItem onClick={handleUpdateToLatest} hidden>
-            {t('premium.toolbox.upgrade_to_latest')}
-          </MenuItem>
-          <MenuItem onClick={handleOpenScan}>{t('commands.wifiscan')}</MenuItem>
-        </MenuList>
-      </Portal>
+      <MenuList>
+        <MenuItem onClick={handleBlinkClick}>{t('commands.blink')}</MenuItem>
+        <MenuItem onClick={handleOpenConfigure}>{t('controller.configure.title')}</MenuItem>
+        <MenuItem onClick={handleConnectClick}>{t('commands.connect')}</MenuItem>
+        <MenuItem onClick={handleOpenQueue}>{t('controller.queue.title')}</MenuItem>
+        <MenuItem onClick={handleOpenFactoryReset}>{t('commands.factory_reset')}</MenuItem>
+        <MenuItem onClick={handleOpenUpgrade}>{t('commands.firmware_upgrade')}</MenuItem>
+        <RebootMenuItem device={device} refresh={refresh} />
+        <MenuItem onClick={handleOpenTelemetry}>{t('controller.telemetry.title')}</MenuItem>
+        <MenuItem onClick={handleOpenScript}>{t('script.one')}</MenuItem>
+        <MenuItem onClick={handleOpenTrace}>{t('controller.devices.trace')}</MenuItem>
+        <MenuItem onClick={handleUpdateToLatest} hidden>
+          {t('premium.toolbox.upgrade_to_latest')}
+        </MenuItem>
+        <MenuItem onClick={handleOpenScan}>{t('commands.wifiscan')}</MenuItem>
+      </MenuList>
     </Menu>
   );
 };

src/pages/Device/Wrapper.tsx

@@ -26,6 +26,7 @@ import DeviceActionDropdown from 'components/Buttons/DeviceActionDropdown';
 import { RefreshButton } from 'components/Buttons/RefreshButton';
 import { Card } from 'components/Containers/Card';
 import { CardHeader } from 'components/Containers/Card/CardHeader';
+import DeviceSearchBar from 'components/DeviceSearchBar';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
 import { ConfigureModal } from 'components/Modals/ConfigureModal';
 import { EventQueueModal } from 'components/Modals/EventQueueModal';
@@ -112,7 +113,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
     <>
       {isCompact ? (
         <Card p={2} mb={4}>
-          <CardHeader>
+          <CardHeader overflowX="auto">
             <HStack spacing={2}>
               <Heading size="md">{serialNumber}</Heading>
               {connectedTag}
@@ -126,6 +127,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
             </HStack>
             <Spacer />
             <HStack spacing={2}>
+              {breakpoint !== 'base' && breakpoint !== 'md' && <DeviceSearchBar />}
               {getDevice?.data && (
                 <DeviceActionDropdown
                   // @ts-ignore
@@ -140,6 +142,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
                   onOpenTelemetryModal={telemetryModalProps.onOpen}
                   onOpenScriptModal={scriptModal.openModal}
                   size="md"
+                  isCompact
                 />
               )}
               <RefreshButton
@@ -177,6 +180,7 @@ const DevicePageWrapper = ({ serialNumber }: Props) => {
               </HStack>
               <Spacer />
               <HStack spacing={2}>
+                <DeviceSearchBar />
                 {getDevice?.data && (
                   <DeviceActionDropdown
                     // @ts-ignore

src/pages/Devices/ListCard/index.tsx

@@ -5,7 +5,6 @@ import ReactCountryFlag from 'react-country-flag';
 import { useTranslation } from 'react-i18next';
 import { useNavigate } from 'react-router-dom';
 import Actions from './Actions';
-import DeviceSearchBar from './DeviceSearchBar';
 import DeviceListFirmwareButton from './FirmwareButton';
 import AP from './icons/AP.png';
 import IOT from './icons/IOT.png';
@@ -16,6 +15,7 @@ import { CardBody } from 'components/Containers/Card/CardBody';
 import { CardHeader } from 'components/Containers/Card/CardHeader';
 import { ColumnPicker } from 'components/DataTables/ColumnPicker';
 import { DataTable } from 'components/DataTables/DataTable';
+import DeviceSearchBar from 'components/DeviceSearchBar';
 import FormattedDate from 'components/InformationDisplays/FormattedDate';
 import { ConfigureModal } from 'components/Modals/ConfigureModal';
 import { EventQueueModal } from 'components/Modals/EventQueueModal';