feat: add tags to all resources; feature flag to view tags as folders

proto/gen/rill/runtime/v1/runtime.swagger.yaml

@@ -4403,6 +4403,11 @@ definitions:
         items:
           type: string
         title: Array of dimension or measure names
+      tags:
+        type: array
+        items:
+          type: string
+        description: Tags for organizing and filtering the canvas on the project dashboards list.
   v1CanvasState:
     type: object
     properties:
@@ -5252,6 +5257,11 @@ definitions:
       definedInMetricsView:
         type: boolean
         description: When true, it indicates that the explore was defined in a metrics view either explicitly or emitted because version was not set.
+      tags:
+        type: array
+        items:
+          type: string
+        description: Tags for organizing and filtering the explore on the project dashboards list.
   v1ExploreState:
     type: object
     properties:

proto/rill/runtime/v1/resources.proto

@@ -487,6 +487,8 @@ message ExploreSpec {
   bool allow_custom_time_range = 20;
   // When true, it indicates that the explore was defined in a metrics view either explicitly or emitted because version was not set.
   bool defined_in_metrics_view = 21;
+  // Tags for organizing and filtering the explore on the project dashboards list.
+  repeated string tags = 22;
 }
 
 message ExploreState {
@@ -866,6 +868,8 @@ message CanvasSpec {
   repeated SecurityRule security_rules = 6;
   // Array of dimension or measure names
   repeated string pinned_filters = 16;
+  // Tags for organizing and filtering the canvas on the project dashboards list.
+  repeated string tags = 19;
 }
 
 message CanvasState {

runtime/parser/parse_canvas.go

@@ -49,6 +49,7 @@ type CanvasYAML struct {
 		} `yaml:"items"`
 	}
 	Security *SecurityPolicyYAML `yaml:"security"`
+	Tags     []string            `yaml:"tags"`
 }
 
 func (p *Parser) parseCanvas(node *Node) error {
@@ -288,6 +289,7 @@ func (p *Parser) parseCanvas(node *Node) error {
 	r.CanvasSpec.Rows = rows
 	r.CanvasSpec.SecurityRules = rules
 	r.CanvasSpec.PinnedFilters = tmp.Filters.Pinned
+	r.CanvasSpec.Tags = tmp.Tags
 
 	// Track inline components
 	for _, def := range inlineComponentDefs {

runtime/parser/parse_explore.go

@@ -37,6 +37,7 @@ type ExploreYAML struct {
 		HidePivot bool `yaml:"hide_pivot"`
 	} `yaml:"embeds"`
 	Security *SecurityPolicyYAML `yaml:"security"`
+	Tags     []string            `yaml:"tags"`
 }
 
 // ExploreTimeRangeYAML represents a time range in an ExploreYAML.
@@ -295,6 +296,7 @@ func (p *Parser) parseExplore(node *Node) error {
 	r.ExploreSpec.SecurityRules = rules
 	r.ExploreSpec.LockTimeZone = tmp.LockTimeZone
 	r.ExploreSpec.AllowCustomTimeRange = allowCustomTimeRange
+	r.ExploreSpec.Tags = tmp.Tags
 
 	return nil
 }

web-admin/src/features/dashboards/listing/DashboardsFilterToolbar.svelte

@@ -0,0 +1,71 @@
+<script lang="ts">
+  import { beforeNavigate } from "$app/navigation";
+  import * as DropdownMenu from "@rilldata/web-common/components/dropdown-menu";
+  import CaretDownIcon from "@rilldata/web-common/components/icons/CaretDownIcon.svelte";
+  import CaretUpIcon from "@rilldata/web-common/components/icons/CaretUpIcon.svelte";
+  import { Search } from "@rilldata/web-common/components/search";
+
+  export let availableTags: string[] = [];
+  export let selectedTags: string[] = [];
+  export let onTagsChange: (tags: string[]) => void;
+  export let searchText = "";
+
+  let tagsOpen = false;
+
+  beforeNavigate(() => {
+    searchText = "";
+  });
+
+  function toggleTag(tag: string) {
+    onTagsChange(
+      selectedTags.includes(tag)
+        ? selectedTags.filter((t) => t !== tag)
+        : [...selectedTags, tag],
+    );
+  }
+
+  $: tagsLabel =
+    selectedTags.length === 0
+      ? "All tags"
+      : selectedTags.length === 1
+        ? selectedTags[0]
+        : `${selectedTags[0]}, +${selectedTags.length - 1} other${selectedTags.length > 2 ? "s" : ""}`;
+</script>
+
+<div class="flex flex-row items-center gap-x-2">
+  {#if availableTags.length > 0}
+    <DropdownMenu.Root bind:open={tagsOpen}>
+      <DropdownMenu.Trigger
+        class="min-w-fit min-h-9 flex flex-row gap-1 items-center rounded-sm border bg-input {tagsOpen
+          ? 'bg-gray-200'
+          : 'hover:bg-surface-hover'} px-2 py-1"
+      >
+        <span class="text-fg-secondary font-medium text-sm">{tagsLabel}</span>
+        {#if tagsOpen}
+          <CaretUpIcon size="12px" />
+        {:else}
+          <CaretDownIcon size="12px" />
+        {/if}
+      </DropdownMenu.Trigger>
+      <DropdownMenu.Content align="start" class="w-48 max-h-72 overflow-y-auto">
+        {#each availableTags as tag (tag)}
+          <DropdownMenu.CheckboxItem
+            checked={selectedTags.includes(tag)}
+            onCheckedChange={() => toggleTag(tag)}
+          >
+            {tag}
+          </DropdownMenu.CheckboxItem>
+        {/each}
+      </DropdownMenu.Content>
+    </DropdownMenu.Root>
+  {/if}
+
+  <div class="flex-1 min-w-0">
+    <Search
+      placeholder="Search"
+      autofocus={false}
+      bind:value={searchText}
+      rounded="lg"
+    />
+  </div>
+</div>