Allocated devices empty state (#1656)

Empty state added for allocated devices
saeloun · Feb 16, 2024 · c88725e · c88725e
1 parent bf8fc89
commit c88725e
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 7 deletions.
diff --git a/app/javascript/src/components/Profile/UserDetail/AllocatedDevicesDetails/StaticPage.tsx b/app/javascript/src/components/Profile/UserDetail/AllocatedDevicesDetails/StaticPage.tsx
@@ -2,6 +2,8 @@ import React, { Fragment } from "react";
 
 import { MobileIcon } from "miruIcons";
 
+import EmptyStates from "common/EmptyStates";
+
 const StaticPage = ({ devices }) => {
   const DeviceDetails = ({ device }) => {
     const {
@@ -75,9 +77,17 @@ const StaticPage = ({ devices }) => {
 
   return (
     <Fragment>
-      {devices?.map((device, index) => (
-        <DeviceDetails device={device} key={index} />
-      ))}
+      {devices.length > 0 ? (
+        devices.map((device, index) => (
+          <DeviceDetails device={device} key={index} />
+        ))
+      ) : (
+        <EmptyStates
+          Message="No devices found"
+          containerClassName="h-full"
+          showNoSearchResultState={false}
+        />
+      )}
     </Fragment>
   );
 };

diff --git a/app/javascript/src/components/Profile/UserDetail/AllocatedDevicesDetails/index.tsx b/app/javascript/src/components/Profile/UserDetail/AllocatedDevicesDetails/index.tsx
@@ -36,16 +36,15 @@ const AllocatedDevicesDetails = () => {
 
   return (
     <Fragment>
-      {isDesktop && (
+      {isDesktop ? (
         <DetailsHeader
-          showButtons
           editAction={handleEdit}
           isDisableUpdateBtn={false}
+          showButtons={false}
           subTitle=""
           title="Allocated Devices"
         />
-      )}
-      {!isDesktop && (
+      ) : (
         <MobileEditHeader
           backHref="/settings/"
           href="/settings/devices/edit"