added device actions to support page

src/device/DeviceActions.tsx

@@ -510,10 +510,14 @@ export default function DeviceActions(props: Props) {
     );
   };
 
+  const showSupport = () => {
+    return user.allowedTo("provision") && !location.pathname.includes("support")
+  }
+
   const buttons = () => {
     return (
       <React.Fragment>
-        {user.allowedTo("provision") && <Tooltip title="Support">
+        {showSupport() && <Tooltip title="Support">
           <IconButton onClick={() => navigate("support", { state: {device: device, devicePageData: devicePageData }})}>
             <Visibility />
           </IconButton>

src/pages/DeviceSupport.tsx

@@ -9,6 +9,11 @@ import { Component, Device, Interaction } from "models";
 import { getContextKeys, getContextTypes } from "pbHelpers/Context";
 import SmartBreadcrumb from "common/SmartBreadcrumb";
 import { DevicePageData } from "./Device";
+import AddComponentManualDialog from "component/AddComponentManualDialog";
+import { useGlobalState } from "providers";
+import DeviceActions from "device/DeviceActions";
+import { cloneDeep } from "lodash";
+import { FindAvailablePositions } from "pbHelpers/DeviceAvailability";
 
 interface TabPanelProps {
   children?: React.ReactNode;
@@ -38,6 +43,7 @@ export default function DeviceSupport() {
   const theme = useTheme()
 
   const { state } = useLocation();
+	const [{ user, as }] = useGlobalState()
   const [device, setDevice] = useState<Device>(Device.create())
   const [devicePageData, setDevicePageData] = useState<DevicePageData>(state?.devicePageData ? state.devicePageData : undefined)
   const [tabNumber, setTabNumber] = useState(0)
@@ -49,6 +55,8 @@ export default function DeviceSupport() {
   const [platform, setPlatform] = useState<pond.DevicePlatform>(
     pond.DevicePlatform.DEVICE_PLATFORM_INVALID
   );
+	const [addComponentManualDialogOpen, setAddComponentManualDialogOpen] = useState(false)
+	const [loading, setLoading] = useState(false)
 
   // useEffect(() => {
   //   if (state?.device) return
@@ -62,6 +70,7 @@ export default function DeviceSupport() {
 			setDevice(Device.create(state?.devicePageData.device))
 			return
 		}
+		setLoading(true)
     deviceAPI.getPageData(deviceID, getContextKeys(), getContextTypes()).then(resp => {
       setDevice(resp.data?.device ? Device.create(resp.data?.device) : Device.create())
 			setDevicePageData({
@@ -71,7 +80,9 @@ export default function DeviceSupport() {
 				permissions: resp.data.permissions,
 				preferences: resp.data.user?.preferences as pond.DevicePreferences
 			})
-    })
+    }).finally(() => {
+			setLoading(false)
+		})
   }, [deviceID, state?.devicePageData])
 
   const handleChange = (_event: React.ChangeEvent<{}>, newValue: number) => {
@@ -151,9 +162,47 @@ export default function DeviceSupport() {
     });
   };
 
+	const toggleNotificationPreference = () => {
+		let updatedPreferences = cloneDeep(devicePageData.preferences);
+		updatedPreferences.notify = !devicePageData.preferences.notify;
+		let updatedDevicePageData = cloneDeep(devicePageData)
+		updatedDevicePageData.preferences = updatedPreferences
+		deviceAPI
+			.updatePreferences(deviceID, updatedPreferences, getContextKeys(), getContextTypes(), as)
+			.then(() => setDevicePageData(updatedDevicePageData))
+			.catch(() => {
+				snackbar.error(
+					"Error occured while " +
+						(devicePageData.preferences.notify ? "enabling" : "disabling") +
+						" notifications"
+				);
+			});
+	};
+
 	return (
 		<PageContainer>
-      <SmartBreadcrumb deviceName={device.name()} state={{devicePageData: devicePageData}} />
+			<Grid container justifyContent={"space-between"}>
+				<Grid>
+				<SmartBreadcrumb deviceName={device.name()} state={{devicePageData: devicePageData}} />
+				</Grid>
+				<Grid>
+					
+					<DeviceActions
+						device={device}
+						isPaused={false}
+						isLoading={loading}
+						permissions={devicePageData.permissions}
+						preferences={devicePageData.preferences}
+						toggleNotificationPreference={toggleNotificationPreference}
+						refreshCallback={() => {}}
+						availablePositions={new Map()}
+						availableOffsets={new Map()} 
+						components={[...devicePageData.components.map(comp => Component.any(comp))]}
+						interactions={devicePageData.interactions.map(inter => Interaction.any(inter))}    
+					/>
+				</Grid>
+			</Grid>
+      {/* <SmartBreadcrumb deviceName={device.name()} state={{devicePageData: devicePageData}} /> */}
 			<Tabs
 				style={{ position: "sticky" }}
 				value={tabNumber}
@@ -182,12 +231,25 @@ export default function DeviceSupport() {
 								Reset Count Tx - 1000, Are you sure (ONLY use when device not responding)
 							</Button>
 						</Grid>
+						
 						<Grid>
 							<Button color="primary" onClick={clearPending}>
 								Clear Pending
 							</Button>
 						</Grid>
 					</Grid>
+					<Grid>
+						<AddComponentManualDialog 
+							device={device.id()}
+							open={addComponentManualDialogOpen}
+							onClose={() => setAddComponentManualDialogOpen(false)}
+						/>
+						{user.hasFeature("developer") === true && 
+							<Button onClick={() => setAddComponentManualDialogOpen(true)}>
+								Manual Comp
+							</Button>
+						}
+					</Grid>
 					<Grid container direction="row">
 						<Grid>
 							<TextField