YAML editor; integration into /dashboard/<name>/edit (#2639)

* work out placeholder text

* update placeholder to enable auto-generating

* adds in skeleton and bootstrap functions to placeholder

* renames components

* fix overflow issues in new metrics editor

* remove all error state when buffer is empty

* move editor plugins around

* update Placeholder.svelte

* adds link to documentation in metrics inspector

* move doc link

* self-review

* update package.json to move to devDependencies

* spacing on docs link

* center align doc link

* remove unused var

* remove doc link from inspector

* minor refactors to code org for extensions

* adds slight debounce to state update function for line levels

* move to queryClient.fetchQuery in placeholder model bootstrap

* update component structure; move status updates to MetricsWorkspace.svelte

* moves basic extensions to base.ts

* adds a way to annotate an editor buffer update so we can either add or remove debouncing updates

* establishes line number gutter marker, and breaks out the gutters for the line statuses into two distinct entities

* fix debounce situation when document is empty

* block button nav to dashboard if invalid config

* adds create-debouncer.ts, which is a simpler debouncer that operates on the end of a debounced sequence, not the beginning

* add story for generic YAML editor, including option for adding line errors

* rename files; change Portal implementation since we presume this is all browser-only, which helps with Storybook

* adds line number gutter test

* add line status gutter tests

* adds line status highlighter tests

* adds basic tests for indent-guide extension

* fix lint error in GoToDashboardButton.svelte

* remove unused metrics editor files; fix types

* remove unneeded logic from EditorContainer.svelte

* shifts around logic to be per-surface

* refine reconciliation debouncing

* add basic model summary info to metrics inspector based on feedback

* fix line level error coloring

* adapts e2e tests and adds a new empty metrics flow

* switches debounce annotation to be a boolean

* fix minor prettier errors

* revert useTestServer.ts

* fix line-number-gutter.spec.ts

* fix YAMLEditor.spec.ts

* refine placeholder code

* streamlines and fixes codemirror dependencies; removes old codemirror package code from web-local

* moves to metrics editor container; re-instates other dashboard tests that were skipped before

* fix lint error

* moves metrics def errors function to file-artifacts-store.ts and makes it generic for any file type

* rename function for file artifact reconciliation errors

* move errors to common place for metrics-view

* remove unneeded flex which was causing metrics editor to mount halfway down

* fix story lint errors

* re-adds storybook editor  view

* fix line selection color compositing

* address feedback comments

* removes mismatch between line errors and reconciled yaml file

* remove console..og

package.json

@@ -33,4 +33,4 @@
     "d3-line-chunked": "^1.5.1",
     "d3-selection": "^3.0.0"
   }
-}
+}

web-common/package.json

@@ -12,6 +12,15 @@
     "build-storybook": "storybook build"
   },
   "devDependencies": {
+    "@codemirror/legacy-modes": "^6.3.2",
+    "@codemirror/state": "^6.2.1",
+    "@codemirror/view": "^6.14.0",
+    "@codemirror/autocomplete": "^6.8.1",
+    "@codemirror/commands": "^6.2.4",
+    "@codemirror/lang-sql": "^6.5.2",
+    "@codemirror/language": "^6.8.0",
+    "@codemirror/lint": "^6.4.0",
+    "@codemirror/search": "^6.5.0",
     "@storybook/addon-essentials": "^7.0.18",
     "@storybook/addon-interactions": "^7.0.18",
     "@storybook/addon-links": "^7.0.18",
@@ -26,6 +35,7 @@
     "@typescript-eslint/parser": "^5.27.0",
     "@vitest/coverage-c8": "^0.31.0",
     "axios": "^0.27.2",
+    "codemirror": "^6.3.2",
     "date-fns": "^2.30.0",
     "eslint": "^8.16.0",
     "eslint-config-prettier": "^8.3.0",

web-common/src/app.css

@@ -102,9 +102,25 @@
   .ui-measure-bar-excluded {
     @apply bg-gray-100 dark:bg-gray-700;
   }
+
+  .ui-editor-text-error {
+    color: var(--ui-editor-error-foreground);
+  }
+
+  .ui-editor-bg-error {
+    @apply bg-red-50;
+  }
+
+  .ui-editor-border-error {
+    border-color: var(--ui-editor-error-foreground);
+  }
 }
 
 @layer base {
+  :root {
+    --ui-editor-error-foreground: hsl(0, 75%, 45%);
+  }
+
   h1,
   h2,
   h3,

web-common/src/components/Portal.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-  import { browser } from "$app/environment";
   import { onDestroy, onMount } from "svelte";
 
   export let target: string = undefined;
@@ -10,22 +9,21 @@
   let targetEntity;
 
   onMount(() => {
-    if (browser) {
-      portal = document.createElement("div");
-      portal.className = "portal";
-      if (!target) {
-        targetEntity = document.body;
-      } else {
-        targetEntity = document.querySelector(target);
-      }
-      targetEntity.appendChild(portal);
-      portal.appendChild(ref);
+    portal = document.createElement("div");
+    portal.className = "portal";
+    if (!target) {
+      targetEntity = document.body;
+    } else {
+      targetEntity = document.querySelector(target);
     }
+    targetEntity.appendChild(portal);
+    portal.appendChild(ref);
+
     mounted = true;
   });
 
   onDestroy(() => {
-    if (browser && portal) {
+    if (portal) {
       portal.remove();
     }
   });

web-common/src/components/date-picker/Litepicker.spec.ts

@@ -1,6 +1,6 @@
+import { fireEvent, render, waitFor } from "@testing-library/svelte";
+import { afterEach, beforeEach, describe, expect, it } from "vitest";
 import Litepicker from "./Litepicker.svelte";
-import { describe, it, expect, beforeEach, afterEach } from "vitest";
-import { render, waitFor, fireEvent } from "@testing-library/svelte";
 
 // TODO: jsdom isn't firing our focus event listener in `onOpenMount`