feat: v2 - add runs and submissions window

src/routes/v2/pages/Editor/EditorV2.tsx

@@ -41,6 +41,7 @@ import { usePipelineDetailsWindow } from "./hooks/usePipelineDetailsWindow";
 import { usePipelineTreeWindow } from "./hooks/usePipelineTreeWindow";
 import { usePropertiesWindowPositioning } from "./hooks/usePropertiesWindowPositioning";
 import { useRecentRunsWindow } from "./hooks/useRecentRunsWindow";
+import { useRunsAndSubmissionWindow } from "./hooks/useRunsAndSubmissionWindow";
 import { useSelectionWindowSync } from "./hooks/useSelectionWindowSync";
 import { useSpecLifecycle } from "./hooks/useSpecLifecycle";
 import { useUndoRedoKeyboard } from "./hooks/useUndoRedoKeyboard";
@@ -80,6 +81,7 @@ const PipelineEditor = withSuspenseWrapper(
     usePipelineTreeWindow();
     useHistoryWindow();
     useRecentRunsWindow();
+    useRunsAndSubmissionWindow();
     useUndoRedoKeyboard();
     useFocusMode();
     useShortcutListener();

src/routes/v2/pages/Editor/components/RunsAndSubmissionContent.tsx

@@ -0,0 +1,77 @@
+import { observer } from "mobx-react-lite";
+
+import { useAwaitAuthorization } from "@/components/shared/Authentication/useAwaitAuthorization";
+import { HuggingFaceAuthButton } from "@/components/shared/HuggingFaceAuth/HuggingFaceAuthButton";
+import GoogleCloudSubmissionDialog from "@/components/shared/Submitters/GoogleCloud/GoogleCloudSubmissionDialog";
+import TangleSubmitter from "@/components/shared/Submitters/Tangle/TangleSubmitter";
+import { Icon } from "@/components/ui/icon";
+import { BlockStack } from "@/components/ui/layout";
+import { Text } from "@/components/ui/typography";
+import { serializeComponentSpec } from "@/models/componentSpec";
+import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
+import { ENABLE_GOOGLE_CLOUD_SUBMITTER } from "@/utils/constants";
+import { deepClone } from "@/utils/deepClone";
+
+export const RunsAndSubmissionContent = observer(() => {
+  const { isAuthorized } = useAwaitAuthorization();
+  const { navigation } = useSharedStores();
+  const rootSpec = navigation.rootSpec;
+  const allIssues = rootSpec?.allValidationIssues ?? [];
+  const errorCount = allIssues.filter((i) => i.severity === "error").length;
+  const hasErrors = errorCount > 0;
+
+  const serializedRootPipelineSpec = rootSpec
+    ? deepClone(serializeComponentSpec(rootSpec))
+    : undefined;
+
+  if (!serializedRootPipelineSpec) {
+    return <EmptyState />;
+  }
+
+  return (
+    <BlockStack
+      fill
+      className="min-h-0 overflow-y-auto"
+      inlineAlign="start"
+      gap="1"
+    >
+      <BlockStack
+        fill
+        align="stretch"
+        gap="1"
+        className="min-h-0 overflow-y-auto p-2"
+        data-testid="runs-and-submission-buttons"
+      >
+        {isAuthorized ? (
+          <TangleSubmitter
+            componentSpec={serializedRootPipelineSpec}
+            isComponentTreeValid={rootSpec?.isValid}
+            onlyFixableIssues={!hasErrors && allIssues.length > 0}
+          />
+        ) : (
+          <HuggingFaceAuthButton
+            title="Sign in to Submit Runs"
+            variant="default"
+          />
+        )}
+
+        {ENABLE_GOOGLE_CLOUD_SUBMITTER && (
+          <GoogleCloudSubmissionDialog
+            componentSpec={serializedRootPipelineSpec}
+          />
+        )}
+      </BlockStack>
+    </BlockStack>
+  );
+});
+
+function EmptyState() {
+  return (
+    <BlockStack fill className="p-4" inlineAlign="center" align="center">
+      <Icon name="FileQuestionMark" size="lg" className="text-gray-300" />
+      <Text size="sm" tone="subdued" className="text-center mt-2">
+        No pipeline loaded
+      </Text>
+    </BlockStack>
+  );
+}

src/routes/v2/pages/Editor/hooks/useRunsAndSubmissionWindow.tsx

@@ -0,0 +1,27 @@
+import { useEffect } from "react";
+
+import { RunsAndSubmissionContent } from "@/routes/v2/pages/Editor/components/RunsAndSubmissionContent";
+import { useSharedStores } from "@/routes/v2/shared/store/SharedStoreContext";
+
+const RUNS_AND_SUBMISSION_WINDOW_ID = "runs-and-submission";
+
+export function useRunsAndSubmissionWindow() {
+  const { windows } = useSharedStores();
+  useEffect(() => {
+    if (!windows.getWindowById(RUNS_AND_SUBMISSION_WINDOW_ID)) {
+      windows.openWindow(<RunsAndSubmissionContent />, {
+        id: RUNS_AND_SUBMISSION_WINDOW_ID,
+        title: "Runs & Submissions",
+        position: { x: 100, y: 460 },
+        size: { width: 280, height: 50 },
+        minSize: {
+          width: 280,
+          height: 50,
+        },
+        disabledActions: ["close"],
+        persisted: true,
+        defaultDockState: "left",
+      });
+    }
+  }, [windows]);
+}

src/routes/v2/shared/windows/viewPresets.ts

@@ -7,6 +7,7 @@ export interface ViewPreset {
 }
 
 const DEFAULT_DOCK_POSITIONS: Record<string, "left" | "right"> = {
+  "runs-and-submission": "left",
   "component-library": "left",
   "pipeline-tree": "left",
   history: "left",
@@ -18,17 +19,24 @@ const DEFAULT_DOCK_POSITIONS: Record<string, "left" | "right"> = {
 
 export const DEFAULT_VIEW_PRESET: ViewPreset = {
   label: "Default",
-  description: "Components, Recent Runs, Pipeline Details",
-  visible: new Set(["component-library", "recent-runs", "pipeline-details"]),
+  description: "Components, Runs & Submissions, Recent Runs, Pipeline Details",
+  visible: new Set([
+    "runs-and-submission",
+    "recent-runs",
+    "component-library",
+    "pipeline-details",
+  ]),
   dockPositions: DEFAULT_DOCK_POSITIONS,
 };
 
 export const VIEW_PRESETS: ViewPreset[] = [
   DEFAULT_VIEW_PRESET,
   {
     label: "All",
-    description: "All windows visible",
+    description:
+      "All windows visible, including Runs & Submissions and Recent Runs",
     visible: new Set([
+      "runs-and-submission",
       "component-library",
       "history",
       "pipeline-tree",

src/utils/constants.ts

@@ -22,6 +22,9 @@ export const GIT_REPO_URL =
 
 export const GIT_COMMIT = import.meta.env.VITE_GIT_COMMIT || "master";
 
+export const ENABLE_GOOGLE_CLOUD_SUBMITTER =
+  import.meta.env.VITE_ENABLE_GOOGLE_CLOUD_SUBMITTER === "true";
+
 export const USER_PIPELINES_LIST_NAME = "user_pipelines";
 
 export const defaultPipelineYamlWithName = (name: string) => `