fix: file conflict resolution (#6272)

* fix: file conflict resolution

* cleanup and janet feedback

* cleanup and test fixes

* cleanup and test fixes

* abstract diff bar and further cleanup

* correct property access

* reverting a file should never autosave

* remove comment

* fix comment inconsistency

* fix issue when saving a file with the same content

* extend autosave debounce

* no unsaved change fix

* type fixes

web-common/package.json

@@ -25,6 +25,7 @@
     "@codemirror/lang-yaml": "^6.1.1",
     "@codemirror/language": "^6.10.3",
     "@codemirror/lint": "^6.8.2",
+    "@codemirror/merge": "^6.7.4",
     "@codemirror/search": "^6.5.6",
     "@codemirror/state": "^6.4.1",
     "@codemirror/view": "^6.34.1",

web-common/src/components/button/Button.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
   import { builderActions, getAttrs, type Builder } from "bits-ui";
   import { createEventDispatcher } from "svelte";
+  import LoadingSpinner from "../icons/LoadingSpinner.svelte";
 
   const dispatch = createEventDispatcher();
 
@@ -40,6 +41,7 @@
   export let gray = false;
   export let danger = false;
   export let preload = true;
+  export let loadingCopy = "Loading";
   // needed to set certain style that could be overridden by the style block in this component
   export let forcedStyle = "";
 
@@ -78,6 +80,7 @@
   form={submitForm ? form : undefined}
   aria-label={label}
   {target}
+  aria-disabled={disabled}
   rel={target === "_blank" ? "noopener noreferrer" : rel}
   {...getAttrs(builders)}
   use:builderActions={{ builders }}
@@ -86,32 +89,9 @@
   {...href ? { "data-sveltekit-preload-data": preload } : {}}
 >
   {#if loading}
-    <svg
-      xmlns="http://www.w3.org/2000/svg"
-      width="15"
-      height="15"
-      viewBox="0 0 24 24"
-    >
-      <path
-        fill="currentColor"
-        d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
-        opacity=".25"
-      />
-      <path
-        fill="currentColor"
-        d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
-      >
-        <animateTransform
-          attributeName="transform"
-          dur="0.75s"
-          repeatCount="indefinite"
-          type="rotate"
-          values="0 12 12;360 12 12"
-        />
-      </path>
-    </svg>
+    <LoadingSpinner size="15px" />
     {#if !square && !circle && !compact}
-      <span>Loading</span>
+      <span>{loadingCopy}</span>
     {/if}
   {:else}
     <slot />
@@ -340,6 +320,14 @@
     @apply text-red-600;
   }
 
+  .danger.subtle {
+    @apply bg-red-50 text-red-600;
+  }
+
+  .danger.subtle:hover {
+    @apply bg-red-100;
+  }
+
   /* SHAPE STYLES */
 
   .square,

web-common/src/components/forms/FieldSwitcher.svelte

@@ -21,6 +21,10 @@
     @apply capitalize;
   }
 
+  button:hover:not(.selected) {
+    @apply bg-slate-50;
+  }
+
   .option-wrapper {
     @apply flex h-6 text-sm w-fit mb-1 rounded-[2px];
   }

web-common/src/components/icons/LoadingSpinner.svelte

@@ -0,0 +1,26 @@
+<script>
+  export let size = "1em";
+</script>
+
+<svg height={size} viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg">
+  <path
+    d="M12,1A11,11,0,1,0,23,12,11,11,0,0,0,12,1Zm0,19a8,8,0,1,1,8-8A8,8,0,0,1,12,20Z"
+    opacity=".25"
+  />
+  <path
+    d="M12,4a8,8,0,0,1,7.89,6.7A1.53,1.53,0,0,0,21.38,12h0a1.5,1.5,0,0,0,1.48-1.75,11,11,0,0,0-21.72,0A1.5,1.5,0,0,0,2.62,12h0a1.53,1.53,0,0,0,1.49-1.3A8,8,0,0,1,12,4Z"
+    class="spinner"
+  />
+</svg>
+
+<style>
+  .spinner {
+    transform-origin: center;
+    animation: spinner_StKS 0.75s infinite linear;
+  }
+  @keyframes spinner_StKS {
+    100% {
+      transform: rotate(360deg);
+    }
+  }
+</style>

web-common/src/features/dashboards/time-controls/super-pill/components/Comparison.svelte

@@ -96,9 +96,10 @@
   }}
   typeahead={!showSelector}
 >
-  <DropdownMenu.Trigger asChild let:builder>
+  <DropdownMenu.Trigger asChild let:builder {disabled}>
     <button
       {disabled}
+      aria-disabled={disabled}
       use:builder.action
       {...builder}
       aria-label="Select time comparison option"