fix: display parse errors on generic file workspaces

rilldata · Dec 9, 2024 · 35ed1ab · 35ed1ab
1 parent 9c87e6b
commit 35ed1ab
Show file tree

Hide file tree

Showing 5 changed files with 48 additions and 48 deletions.
diff --git a/web-common/src/features/metrics-views/editor/MetricsEditor.svelte b/web-common/src/features/metrics-views/editor/MetricsEditor.svelte
@@ -10,9 +10,9 @@
   import { FileArtifact } from "@rilldata/web-common/features/entity-management/file-artifact";
   import { yamlSchema } from "codemirror-json-schema/yaml";
   import type { JSONSchema7 } from "json-schema";
-  import MetricsEditorContainer from "./MetricsEditorContainer.svelte";
   import { createPlaceholder } from "./create-placeholder";
   import metricsSchema from "./metrics-schema.json";
+  import WorkspaceEditorContainer from "@rilldata/web-common/layout/workspace/WorkspaceEditorContainer.svelte";
 
   export let filePath: string;
   export let metricsViewName: string;
@@ -36,7 +36,7 @@
   $: mainError = errors?.at(0);
 </script>
 
-<MetricsEditorContainer error={mainError}>
+<WorkspaceEditorContainer error={mainError}>
   <Editor
     bind:autoSave
     bind:editor
@@ -59,4 +59,4 @@
       yamlSchema(metricsJsonSchema),
     ]}
   />
-</MetricsEditorContainer>
+</WorkspaceEditorContainer>
diff --git a/web-common/src/features/metrics-views/editor/MetricsEditorContainer.svelte b/web-common/src/features/metrics-views/editor/MetricsEditorContainer.svelte
diff --git a/web-common/src/features/workspaces/ExploreWorkspace.svelte b/web-common/src/features/workspaces/ExploreWorkspace.svelte
@@ -17,12 +17,12 @@
   import { workspaces } from "@rilldata/web-common/layout/workspace/workspace-stores";
   import ViewSelector from "@rilldata/web-common/features/visual-editing/ViewSelector.svelte";
   import VisualExploreEditing from "./VisualExploreEditing.svelte";
-  import MetricsEditorContainer from "../metrics-views/editor/MetricsEditorContainer.svelte";
   import { mapParseErrorsToLines } from "../metrics-views/errors";
   import ErrorPage from "@rilldata/web-common/components/ErrorPage.svelte";
   import { createRuntimeServiceGetExplore } from "@rilldata/web-common/runtime-client";
   import Spinner from "../entity-management/Spinner.svelte";
   import DashboardWithProviders from "../dashboards/workspace/DashboardWithProviders.svelte";
+  import WorkspaceEditorContainer from "@rilldata/web-common/layout/workspace/WorkspaceEditorContainer.svelte";
 
   export let fileArtifact: FileArtifact;
 
@@ -98,7 +98,7 @@
     </div>
   </WorkspaceHeader>
 
-  <MetricsEditorContainer
+  <WorkspaceEditorContainer
     slot="body"
     error={mainError}
     showError={!!$remoteContent && selectedView === "code"}
@@ -125,7 +125,7 @@
         <Spinner status={1} size="48px" />
       {/if}
     {/if}
-  </MetricsEditorContainer>
+  </WorkspaceEditorContainer>
 
   <VisualExploreEditing
     autoSave={selectedView === "viz" || $autoSave}

diff --git a/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte b/web-common/src/layout/workspace/WorkspaceEditorContainer.svelte
@@ -1,6 +1,30 @@
-<div
-  class="size-full flex-shrink-1 overflow-hidden border rounded-[2px]"
-  style:min-height="150px"
->
-  <slot />
+<script lang="ts">
+  import type { LineStatus } from "@rilldata/web-common/components/editor/line-status/state";
+  import CancelCircle from "@rilldata/web-common/components/icons/CancelCircle.svelte";
+  import { LIST_SLIDE_DURATION } from "@rilldata/web-common/layout/config";
+  import { slide } from "svelte/transition";
+
+  export let error: LineStatus | undefined = undefined;
+  export let showError = true;
+</script>
+
+<div class="flex flex-col size-full gap-y-1">
+  <div
+    class="size-full border overflow-y-hidden rounded-[2px] bg-background flex flex-col items-center justify-center"
+    class:!border-red-500={error}
+  >
+    <slot />
+  </div>
+
+  {#if error && showError}
+    <div
+      role="status"
+      transition:slide={{ duration: LIST_SLIDE_DURATION }}
+      class="editor-error ui-editor-text-error ui-editor-bg-error border border-red-500 border-l-4 px-2 py-5 max-h-72 overflow-auto"
+    >
+      <div class="flex gap-x-2 items-center">
+        <CancelCircle />{error.message}
+      </div>
+    </div>
+  {/if}
 </div>
diff --git a/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte b/web-local/src/routes/(application)/(workspace)/files/[...file]/+page.svelte
@@ -18,6 +18,8 @@
   import { queryClient } from "@rilldata/web-common/lib/svelte-query/globalQueryClient.js";
   import { onMount } from "svelte";
   import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import type { PageData } from "./$types";
+  import { mapParseErrorsToLines } from "@rilldata/web-common/features/metrics-views/errors";
 
   const workspaces = new Map([
     [ResourceKind.Source, SourceWorkspace],
@@ -30,7 +32,7 @@
     [undefined, null],
   ]);
 
-  export let data;
+  export let data: PageData;
 
   let editor: EditorView;
 
@@ -44,7 +46,9 @@
     resourceName,
     inferredResourceKind,
     path,
+    remoteContent,
     getResource,
+    getAllErrors,
   } = fileArtifact);
 
   $: resourceKind = <ResourceKind | undefined>$resourceName?.kind;
@@ -60,6 +64,13 @@
       ? [customYAMLwithJSONandSQL]
       : getExtensionsForFile(path);
 
+  $: allErrorsQuery = getAllErrors(queryClient, instanceId);
+  $: allErrors = $allErrorsQuery;
+
+  $: errors = mapParseErrorsToLines(allErrors, $remoteContent ?? "");
+
+  $: mainError = errors?.at(0);
+
   onMount(() => {
     expandDirectory(path);
     // TODO: Focus on the code editor
@@ -93,7 +104,7 @@
       filePath={path}
       hasUnsavedChanges={$hasUnsavedChanges}
     />
-    <WorkspaceEditorContainer slot="body">
+    <WorkspaceEditorContainer slot="body" error={mainError}>
       <Editor
         {fileArtifact}
         {extensions}