Correctly disable dropzone when host is offline

packages/web_ui/src/components/Dropzone.tsx

@@ -3,11 +3,19 @@ import { DraggingContext } from "../model/is_dragging";
 import { useContext } from "react";
 
 // This component is used to display a dropzone when a file is being dragged over the parent component
-export function Dropzone() {
+export function Dropzone({ disabled = false }: { disabled?: boolean }) {
 	const isDroppingFile = useContext(DraggingContext);
 
+	const textStyle: { color?: string } = {};
+	let text = "Drop to upload";
+	if (disabled) {
+		textStyle.color = "red";
+		text = "Target is offline";
+	}
+	const borderColor = disabled ? "gray" : "rgb(22, 119, 255)";
+
 	return <div
-		className="dropzone" // Don't remove this class, linked to SiteLayout.tsx
+		className={`dropzone ${disabled ? "disabled" : "enabled"}`} // Don't remove this class, linked to SiteLayout
 		style={{
 			position: "absolute",
 			top: "0",
@@ -17,7 +25,7 @@ export function Dropzone() {
 			zIndex: "90",
 			backgroundColor: "#88888844",
 			borderRadius: "20px",
-			border: "dashed 2px rgb(22, 119, 255)",
+			border: `dashed 2px ${borderColor}`,
 			display: isDroppingFile ? "block" : "none",
 		}}
 	>
@@ -34,9 +42,9 @@ export function Dropzone() {
 				height: "100%",
 			}}
 		>
-			<InboxOutlined />
-			<p style={{ fontSize: "24px", display: "block", textAlign: "center", marginTop: "8px" }}>
-				Drop to upload
+			<InboxOutlined style={textStyle} />
+			<p style={{ ...textStyle, fontSize: "24px", display: "block", textAlign: "center", marginTop: "8px" }}>
+				{text}
 			</p>
 		</div>
 	</div>;

packages/web_ui/src/components/SavesList.tsx

@@ -363,7 +363,7 @@ export default function SavesList(props: { instance: lib.InstanceDetails }) {
 							zIndex: "1010",
 						}}
 					>
-						<Dropzone />
+						<Dropzone disabled={hostOffline} />
 						{saveTable}
 					</div>
 				</Upload.Dragger>

packages/web_ui/src/components/SiteLayout.tsx

@@ -13,7 +13,7 @@ import { DraggingContext } from "../model/is_dragging";
 
 const { Header, Sider } = Layout;
 
-function isDropzone(element: HTMLElement | null): boolean {
+function isActiveDropzone(element: HTMLElement | null): boolean {
 	if (!element) {
 		return false;
 	}
@@ -21,7 +21,7 @@ function isDropzone(element: HTMLElement | null): boolean {
 	let depth = 0;
 	while (element && depth < checkDepth) {
 		if (element.classList.contains("dropzone")) {
-			return true;
+			return element.classList.contains("enabled");
 		}
 		element = element.parentElement;
 		depth += 1;
@@ -105,7 +105,7 @@ export default function SiteLayout() {
 		onDrop={(e) => {
 			setDragging(0);
 			// Prevent dropping outside of dropzone
-			if (!isDropzone(e.target as HTMLElement)) {
+			if (!isActiveDropzone(e.target as HTMLElement)) {
 				e.preventDefault();
 				e.stopPropagation();
 			}
@@ -114,7 +114,7 @@ export default function SiteLayout() {
 		onDragOver={(e) => {
 			e.preventDefault();
 			// Change cursor
-			if (isDropzone(e.target as HTMLElement)) {
+			if (isActiveDropzone(e.target as HTMLElement)) {
 				e.dataTransfer.dropEffect = "copy";
 			} else {
 				e.dataTransfer.dropEffect = "none";

packages/web_ui/src/components/UploadButton.tsx

@@ -6,13 +6,14 @@ import { DraggingContext } from "../model/is_dragging";
 
 export default function UploadButton(props: React.ComponentProps<typeof Button>) {
 	const isDroppingFile = useContext(DraggingContext);
+	const borderColor = props.disabled ? "gray" : "rgb(22, 119, 255)";
 	return <Button
-		className="dropzone"
+		className={`dropzone ${props.disabled ? "disabled" : "enabled"}`}
 		{...props}
 		style={{
 			...props.style,
 			// Distinct border when dropping file
-			border: isDroppingFile ? "dashed 2px rgb(22, 119, 255)" : undefined,
+			border: isDroppingFile ? `dashed 2px ${borderColor}` : undefined,
 		}}
 		icon={isDroppingFile ? <InboxOutlined /> : props.icon || <UploadOutlined />}
 	>