refactor(frontend): App index route (mainly file explorer) (#5287)

frontend/__tests__/components/file-explorer/file-explorer.test.tsx

@@ -4,7 +4,7 @@ import { renderWithProviders } from "test-utils";
 import { describe, it, expect, vi, Mock, afterEach } from "vitest";
 import toast from "#/utils/toast";
 import AgentState from "#/types/agent-state";
-import FileExplorer from "#/components/file-explorer/file-explorer";
+import { FileExplorer } from "#/routes/_oh.app._index/file-explorer/file-explorer";
 import OpenHands from "#/api/open-hands";
 
 const toastSpy = vi.spyOn(toast, "error");

frontend/src/hooks/query/use-vscode-url.ts

@@ -0,0 +1,43 @@
+import { useQuery } from "@tanstack/react-query";
+import React from "react";
+import { useTranslation } from "react-i18next";
+import { useDispatch } from "react-redux";
+import toast from "#/utils/toast";
+import { addAssistantMessage } from "#/state/chat-slice";
+import { I18nKey } from "#/i18n/declaration";
+import OpenHands from "#/api/open-hands";
+
+export const useVSCodeUrl = () => {
+  const { t } = useTranslation();
+  const dispatch = useDispatch();
+
+  const data = useQuery({
+    queryKey: ["vscode_url"],
+    queryFn: OpenHands.getVSCodeUrl,
+    enabled: false,
+  });
+
+  const { data: vscodeUrlObject, isFetching } = data;
+
+  React.useEffect(() => {
+    if (isFetching) return;
+
+    if (vscodeUrlObject?.vscode_url) {
+      dispatch(
+        addAssistantMessage(
+          "You opened VS Code. Please inform the agent of any changes you made to the workspace or environment. To avoid conflicts, it's best to pause the agent before making any changes.",
+        ),
+      );
+      window.open(vscodeUrlObject.vscode_url, "_blank");
+    } else if (vscodeUrlObject?.error) {
+      toast.error(
+        `open-vscode-error-${new Date().getTime()}`,
+        t(I18nKey.EXPLORER$VSCODE_SWITCHING_ERROR_MESSAGE, {
+          error: vscodeUrlObject.error,
+        }),
+      );
+    }
+  }, [vscodeUrlObject, isFetching]);
+
+  return data;
+};

frontend/src/routes/_oh.app._index/constants.ts

@@ -0,0 +1,11 @@
+export const ASSET_FILE_TYPES = [
+  ".png",
+  ".jpg",
+  ".jpeg",
+  ".bmp",
+  ".gif",
+  ".pdf",
+  ".mp4",
+  ".webm",
+  ".ogg",
+];