feat: workspace breadcrumbs (#6138)

* wip

* wip

* create theme input

* add default case when key not set

* cleanup

* cleanup and set defaults feature

* test fix

* uxqa

* uxqa

* uxqa, exclude mode

* add test

* review feedback

* remove unused prop

* revert Leaderboard

* revert file

* revert file

* only add preload attribute when button has href prop

* fix test

* remove import

* test fix

* add period

* uxqa meeting feedback

* remove import

* fix expression field

* review feedback

* type fix

* test update

* better error handling, global listener issue

* sync once explorespec changes

* reset defaults, remove error page

* add back error page, comment out part of test

* cleanup

* add docs link

* remove import

* wip commit

* layout rework

* cleanup

* render upstream and downstream refs

* remove file

* cleanup

* add test

* test fix

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

@@ -1,8 +1,6 @@
 <script lang="ts">
   import Button from "@rilldata/web-common/components/button/Button.svelte";
   import Input from "@rilldata/web-common/components/forms/Input.svelte";
-  import ThreeDot from "@rilldata/web-common/components/icons/ThreeDot.svelte";
-  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu/";
   import Pencil from "svelte-radix/Pencil1.svelte";
   import Check from "@rilldata/web-common/components/icons/Check.svelte";
   import { scale } from "svelte/transition";
@@ -17,10 +15,7 @@
   export let type: "Project" | "File" = "File";
   export let size: "sm" | "md" | "lg" = "lg";
   export let showIndicator = false;
-
-  let hovering = false;
-  let editing = false;
-  let open = false;
+  export let editing = false;
 
   $: editedValue = value;
 
@@ -38,9 +33,9 @@
 
 <div
   role="presentation"
-  class="h-full w-fit font-medium flex gap-x-0 items-center"
-  on:mouseenter={() => (hovering = true)}
-  on:mouseleave={() => (hovering = false)}
+  class="h-full w-fit font-medium flex gap-x-1.5 items-center group"
+  class:w-full={editing}
+  class:truncate={!editing}
 >
   {#if editing}
     <Input
@@ -59,7 +54,6 @@
         ) {
           return;
         }
-
         reset();
       }}
     />
@@ -74,8 +68,8 @@
       <Check size="16px" />
     </Button>
   {:else}
-    <div class="input-wrapper">
-      <h1 class:bump-down={bumpDown} class="{textClass} {size}">
+    <div class="input-wrapper truncate">
+      <h1 class:bump-down={bumpDown} class={textClass} title={value}>
         {value}
       </h1>
     </div>
@@ -88,43 +82,29 @@
     {/if}
 
     {#if editable}
-      <DropdownMenu.Root bind:open>
-        <DropdownMenu.Trigger asChild let:builder>
-          <Button
-            label="{type} title actions"
-            builders={[builder]}
-            square
-            small
-            type="ghost"
-            class={hovering ? "" : "opacity-0 pointer-events-none"}
-          >
-            <ThreeDot size="16px" />
-          </Button>
-        </DropdownMenu.Trigger>
-
-        <DropdownMenu.Content align="start">
-          <DropdownMenu.Item
-            on:click={() => {
-              editing = !editing;
-            }}
-          >
-            <Pencil size="16px" />
-            Rename
-          </DropdownMenu.Item>
-        </DropdownMenu.Content>
-      </DropdownMenu.Root>
+      <span class="group-hover:flex hidden">
+        <Button
+          label="{type} title actions"
+          square
+          small
+          type="ghost"
+          on:click={() => {
+            editing = !editing;
+          }}
+        >
+          <Pencil size="16px" />
+        </Button>
+      </span>
     {/if}
   {/if}
 </div>
 
 <style lang="postcss">
   h1 {
-    @apply flex items-center;
     @apply p-0 bg-transparent;
-    @apply size-full;
+    @apply w-full max-w-fit;
     @apply outline-none border-0;
-    @apply cursor-default min-w-fit;
-    vertical-align: middle;
+    @apply cursor-default truncate;
   }
 
   .bump-down {
@@ -133,21 +113,9 @@
 
   .input-wrapper {
     @apply overflow-hidden;
-    @apply flex justify-center items-center px-2;
-    @apply w-fit  justify-center;
+    @apply flex justify-center items-center pl-2;
+    @apply justify-center;
     @apply border border-transparent rounded-[2px];
     @apply h-fit;
   }
-
-  .sm {
-    height: 24px;
-  }
-
-  .md {
-    height: 26px;
-  }
-
-  .lg {
-    height: 30px;
-  }
 </style>

web-common/src/features/editor/FileWorkspaceHeader.svelte

@@ -6,10 +6,12 @@
   import { WorkspaceHeader } from "../../layout/workspace";
   import type { ResourceKind } from "../entity-management/resource-selectors";
   import { PROTECTED_FILES } from "../file-explorer/protected-paths";
+  import type { V1Resource } from "@rilldata/web-common/runtime-client";
 
   export let filePath: string;
   export let hasUnsavedChanges: boolean;
   export let resourceKind: ResourceKind | undefined;
+  export let resource: V1Resource | undefined;
 
   let fileName: string;
 
@@ -35,4 +37,5 @@
   {hasUnsavedChanges}
   showInspectorToggle={false}
   titleInput={fileName}
+  {resource}
 />

web-common/src/features/entity-management/file-artifacts.ts

@@ -26,6 +26,8 @@ export class FileArtifacts {
         case ResourceKind.Explore:
         case ResourceKind.Component:
         case ResourceKind.Canvas:
+        case ResourceKind.Theme:
+        case ResourceKind.API:
           // set query data for GetResource to avoid refetching data we already have
           queryClient.setQueryData(
             getRuntimeServiceGetResourceQueryKey(instanceId, {

web-common/src/features/file-explorer/new-files.ts

@@ -53,7 +53,7 @@ export function getPathForNewResourceFile(
   return `${folderName}/${newName}${extension}`;
 }
 
-const ResourceKindMap: Record<
+export const ResourceKindMap: Record<
   UserFacingResourceKinds,
   {
     folderName: string;

web-common/src/features/workspaces/CrumbTrigger.svelte

@@ -0,0 +1,26 @@
+<script lang="ts">
+  import type { ResourceKind } from "../entity-management/resource-selectors";
+  import { resourceIconMapping } from "../entity-management/resource-icon-mapping";
+  import { Settings } from "lucide-svelte";
+  import File from "@rilldata/web-common/components/icons/File.svelte";
+
+  export let kind: ResourceKind | undefined;
+  export let label: string | undefined;
+  export let size = 12;
+  export let filePath: string;
+
+  $: icon = kind
+    ? resourceIconMapping[kind]
+    : filePath === "/.env" || filePath === "/rill.yaml"
+      ? Settings
+      : File;
+</script>
+
+<span class="gap-x-1.5 items-center font-medium flex" title={label}>
+  <span class="flex-none">
+    <svelte:component this={icon} size="{size}px" />
+  </span>
+  <span class="truncate">
+    {label ?? "Loading..."}
+  </span>
+</span>

web-common/src/features/workspaces/ExploreWorkspace.svelte

@@ -42,20 +42,20 @@
 
   $: resourceQuery = getResource(queryClient, instanceId);
 
-  $: ({ data } = $resourceQuery);
+  $: ({ data: resource } = $resourceQuery);
 
   $: allErrorsQuery = getAllErrors(queryClient, instanceId);
   $: allErrors = $allErrorsQuery;
-  $: resourceIsReconciling = resourceIsLoading(data);
+  $: resourceIsReconciling = resourceIsLoading(resource);
 
   $: workspace = workspaces.get(filePath);
   $: selectedViewStore = workspace.view;
 
   $: selectedView = $selectedViewStore ?? "code";
 
-  $: exploreResource = data?.explore;
+  $: exploreResource = resource?.explore;
 
-  $: metricsViewName = data?.meta?.refs?.find(
+  $: metricsViewName = resource?.meta?.refs?.find(
     (ref) => ref.kind === ResourceKind.MetricsView,
   )?.name;
 
@@ -79,6 +79,7 @@
 
 <WorkspaceContainer>
   <WorkspaceHeader
+    {resource}
     hasUnsavedChanges={$hasUnsavedChanges}
     onTitleChange={onChangeCallback}
     slot="header"

web-common/src/features/workspaces/MetricsWorkspace.svelte

@@ -80,6 +80,7 @@
 <WorkspaceContainer inspector={isModelingSupported && $selectedView === "code"}>
   <WorkspaceHeader
     {filePath}
+    {resource}
     resourceKind={ResourceKind.MetricsView}
     hasUnsavedChanges={$hasUnsavedChanges}
     onTitleChange={onChangeCallback}

web-common/src/features/workspaces/ModelWorkspace.svelte

@@ -89,6 +89,7 @@
 <WorkspaceContainer>
   <WorkspaceHeader
     {filePath}
+    {resource}
     resourceKind={ResourceKind.Model}
     slot="header"
     titleInput={fileName}

web-common/src/features/workspaces/SourceWorkspace.svelte

@@ -129,6 +129,7 @@
 <WorkspaceContainer>
   <WorkspaceHeader
     {filePath}
+    {resource}
     resourceKind={ResourceKind.Source}
     slot="header"
     titleInput={fileName}

web-common/src/features/workspaces/WorkspaceBreadcrumbs.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import {
+    createRuntimeServiceListResources,
+    type V1Resource,
+  } from "@rilldata/web-common/runtime-client";
+  import { ResourceKind } from "../entity-management/resource-selectors";
+  import { runtime } from "@rilldata/web-common/runtime-client/runtime-store";
+  import WorkspaceCrumb from "./WorkspaceCrumb.svelte";
+
+  export let resource: V1Resource | undefined;
+  export let filePath: string;
+
+  $: ({ instanceId } = $runtime);
+
+  $: resourceKind = resource?.meta?.name?.kind as ResourceKind | undefined;
+  $: resourceName = resource?.meta?.name?.name;
+
+  $: resourcesQuery = createRuntimeServiceListResources(instanceId);
+  $: allResources = $resourcesQuery.data?.resources ?? [];
+
+  $: lateralResources = allResources.filter(({ meta }) => {
+    if (meta?.name?.name === resourceName && meta?.name?.kind === resourceKind)
+      return true;
+    if (!meta?.refs?.length) return false;
+
+    return meta?.refs?.every(({ name, kind }) =>
+      resource?.meta?.refs?.find(
+        (ref) => ref?.name === name && ref?.kind === kind,
+      ),
+    );
+  });
+</script>
+
+<nav
+  class="flex gap-x-1.5 items-center h-7 flex-none w-full pr-3 truncate line-clamp-1"
+>
+  <WorkspaceCrumb
+    selectedResource={resource}
+    resources={lateralResources}
+    {allResources}
+    {filePath}
+    current
+  />
+</nav>