feat: Add tags to profile + consolidate tag filter (#2976)

- Allows users to set tags on browser profiles
- Allows users to filter browser profiles by tag
- Refactors `workflow-tag-filter` and `archived-item-tag-filter` into
single `tag-filter`

Author: SuaYoo

frontend/src/components/ui/index.ts

@@ -41,7 +41,8 @@ import("./select-crawler-proxy");
 import("./select-crawler");
 import("./syntax-input");
 import("./table");
-import("./tag-input");
 import("./tag");
+import("./tag-filter");
+import("./tag-input");
 import("./time-input");
 import("./user-language-select");

frontend/src/components/ui/tag-filter/index.ts

@@ -0,0 +1 @@
+import "./tag-filter";

frontend/src/features/archived-items/archived-item-tag-filter.ts renamed to frontend/src/components/ui/tag-filter/tag-filter.ts

@@ -20,37 +20,39 @@ import { repeat } from "lit/directives/repeat.js";
 import queryString from "query-string";
 import { isFocusable } from "tabbable";
 
+import type {
+  BtrixChangeTagFilterEvent,
+  TagCount,
+  TagCounts,
+  TagType,
+} from "./types";
+
 import { BtrixElement } from "@/classes/BtrixElement";
-import type { BtrixChangeEvent } from "@/events/btrix-change";
-import type { ArchivedItem } from "@/types/crawler";
-import { type WorkflowTag, type WorkflowTags } from "@/types/workflow";
 import { stopProp } from "@/utils/events";
 import { isNotEqual } from "@/utils/is-not-equal";
 import { tw } from "@/utils/tailwind";
 
 const MAX_TAGS_IN_LABEL = 5;
-
-type ChangeArchivedItemTagEventDetails =
-  | { tags: string[]; type: "and" | "or" }
-  | undefined;
-
-export type BtrixChangeArchivedItemTagFilterEvent =
-  BtrixChangeEvent<ChangeArchivedItemTagEventDetails>;
+const apiPathForTagType: Record<TagType, string> = {
+  workflow: "crawlconfigs",
+  "workflow-crawl": "crawls",
+  "archived-item": "all-crawls",
+  "archived-item-crawl": "crawls",
+  upload: "uploads",
+  profile: "profiles",
+};
 
 /**
  * @fires btrix-change
  */
-@customElement("btrix-archived-item-tag-filter")
+@customElement("btrix-tag-filter")
 @localized()
-export class ArchivedItemTagFilter extends BtrixElement {
-  @property({ type: Array })
-  tags?: string[];
-
+export class TagFilter extends BtrixElement {
   @property({ type: String })
-  itemType?: ArchivedItem["type"];
+  tagType?: TagType;
 
-  @property({ type: Boolean })
-  includeNotSuccessful = false;
+  @property({ type: Array })
+  tags?: string[];
 
   @state()
   private searchString = "";
@@ -61,7 +63,7 @@ export class ArchivedItemTagFilter extends BtrixElement {
   @queryAll("sl-checkbox")
   private readonly checkboxes!: NodeListOf<SlCheckbox>;
 
-  private readonly fuse = new Fuse<WorkflowTag>([], {
+  private readonly fuse = new Fuse<TagCount>([], {
     keys: ["tag"],
   });
 
@@ -82,14 +84,22 @@ export class ArchivedItemTagFilter extends BtrixElement {
   }
 
   private readonly orgTagsTask = new Task(this, {
-    task: async ([itemType], { signal }) => {
-      const query = queryString.stringify({
-        onlySuccessful: !this.includeNotSuccessful,
-        crawlType: itemType,
-      });
-
-      const { tags } = await this.api.fetch<WorkflowTags>(
-        `/orgs/${this.orgId}/all-crawls/tagCounts?${query}`,
+    task: async ([tagType], { signal }) => {
+      if (!tagType) {
+        console.debug("no tagType");
+        return;
+      }
+
+      let query = "";
+
+      if (tagType === "workflow-crawl") {
+        query = queryString.stringify({
+          onlySuccessful: false,
+        });
+      }
+
+      const { tags } = await this.api.fetch<TagCounts>(
+        `/orgs/${this.orgId}/${apiPathForTagType[tagType]}/tagCounts${query && `?${query}`}`,
         { signal },
       );
 
@@ -98,7 +108,7 @@ export class ArchivedItemTagFilter extends BtrixElement {
       // Match fuse shape
       return tags.map((item) => ({ item }));
     },
-    args: () => [this.itemType] as const,
+    args: () => [this.tagType] as const,
   });
 
   render() {
@@ -149,9 +159,8 @@ export class ArchivedItemTagFilter extends BtrixElement {
                       this.checkboxes.forEach((checkbox) => {
                         checkbox.checked = false;
                       });
-
+                      this.selected = new Map();
                       this.type = "or";
-
                       void this.dispatchChange();
                     }}
                     >${msg("Clear")}</sl-button
@@ -190,6 +199,8 @@ export class ArchivedItemTagFilter extends BtrixElement {
 
           ${this.orgTagsTask.render({
             complete: (tags) => {
+              if (!tags) return;
+
               let options = tags;
 
               if (tags.length && this.searchString) {
@@ -267,8 +278,8 @@ export class ArchivedItemTagFilter extends BtrixElement {
     `;
   }
 
-  private renderList(opts: { item: WorkflowTag }[]) {
-    const tag = (tag: WorkflowTag) => {
+  private renderList(opts: { item: TagCount }[]) {
+    const tag = (tag: TagCount) => {
       const checked = this.selected.get(tag.tag) === true;
 
       return html`
@@ -314,9 +325,7 @@ export class ArchivedItemTagFilter extends BtrixElement {
       .filter(([_tag, selected]) => selected)
       .map(([tag]) => tag);
     this.dispatchEvent(
-      new CustomEvent<
-        BtrixChangeEvent<ChangeArchivedItemTagEventDetails>["detail"]
-      >("btrix-change", {
+      new CustomEvent<BtrixChangeTagFilterEvent["detail"]>("btrix-change", {
         detail: {
           value: selectedTags.length
             ? { tags: selectedTags, type: this.type }

frontend/src/components/ui/tag-filter/types.ts

@@ -0,0 +1,24 @@
+import type { BtrixChangeEvent } from "@/events/btrix-change";
+
+export type TagType =
+  | "workflow"
+  | "workflow-crawl"
+  | "archived-item"
+  | "archived-item-crawl"
+  | "upload"
+  | "profile";
+
+export type TagCount = {
+  tag: string;
+  count: number;
+};
+
+export type TagCounts = {
+  tags: TagCount[];
+};
+
+export type ChangeTagEventDetails =
+  | { tags: string[]; type: "and" | "or" }
+  | undefined;
+
+export type BtrixChangeTagFilterEvent = BtrixChangeEvent<ChangeTagEventDetails>;

frontend/src/components/ui/tag-input.ts

@@ -150,6 +150,10 @@ export class TagInput extends LitElement {
   @query("sl-popup")
   private readonly combobox!: SlPopup;
 
+  public getTags() {
+    return this.tags;
+  }
+
   connectedCallback() {
     if (this.initialTags) {
       this.tags = this.initialTags;

frontend/src/features/archived-items/file-uploader.ts

@@ -11,13 +11,13 @@ import queryString from "query-string";
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { FileRemoveEvent } from "@/components/ui/file-list";
 import type { BtrixFileChangeEvent } from "@/components/ui/file-list/events";
+import type { TagCount, TagCounts } from "@/components/ui/tag-filter/types";
 import type {
   TagInputEvent,
   Tags,
   TagsChangeEvent,
 } from "@/components/ui/tag-input";
 import { type CollectionsChangeEvent } from "@/features/collections/collections-add";
-import { type WorkflowTag, type WorkflowTags } from "@/types/workflow";
 import { APIError } from "@/utils/api";
 import { maxLengthValidator } from "@/utils/form";
 
@@ -71,7 +71,7 @@ export class FileUploader extends BtrixElement {
   private collectionIds: string[] = [];
 
   @state()
-  private tagOptions: WorkflowTag[] = [];
+  private tagOptions: TagCount[] = [];
 
   @state()
   private tagsToSave: Tags = [];
@@ -86,7 +86,7 @@ export class FileUploader extends BtrixElement {
   private readonly form!: Promise<HTMLFormElement>;
 
   // For fuzzy search:
-  private readonly fuse = new Fuse<WorkflowTag>([], {
+  private readonly fuse = new Fuse<TagCount>([], {
     keys: ["tag"],
     shouldSort: false,
     threshold: 0.2, // stricter; default is 0.6
@@ -362,7 +362,7 @@ export class FileUploader extends BtrixElement {
 
   private async fetchTags() {
     try {
-      const { tags } = await this.api.fetch<WorkflowTags>(
+      const { tags } = await this.api.fetch<TagCounts>(
         `/orgs/${this.orgId}/crawlconfigs/tagCounts`,
       );
 

frontend/src/features/archived-items/index.ts

@@ -1,6 +1,5 @@
 import("./archived-item-list");
 import("./archived-item-state-filter");
-import("./archived-item-tag-filter");
 import("./crawl-log-table");
 import("./crawl-logs");
 import("./delete-item-dialog");

frontend/src/features/archived-items/item-metadata-editor.ts

@@ -7,6 +7,7 @@ import { customElement, property, query, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 
 import { BtrixElement } from "@/classes/BtrixElement";
+import type { TagCount, TagCounts } from "@/components/ui/tag-filter/types";
 import type {
   TagInputEvent,
   Tags,
@@ -17,7 +18,6 @@ import type {
   CollectionsChangeEvent,
 } from "@/features/collections/collections-add";
 import type { ArchivedItem } from "@/types/crawler";
-import { type WorkflowTag, type WorkflowTags } from "@/types/workflow";
 import { isSuccessfullyFinished } from "@/utils/crawler";
 import { maxLengthValidator } from "@/utils/form";
 
@@ -54,7 +54,7 @@ export class CrawlMetadataEditor extends BtrixElement {
   private includeName = false;
 
   @state()
-  private tagOptions: WorkflowTag[] = [];
+  private tagOptions: TagCount[] = [];
 
   @state()
   private tagsToSave: Tags = [];
@@ -69,7 +69,7 @@ export class CrawlMetadataEditor extends BtrixElement {
   public readonly collectionInput?: CollectionsAdd | null;
 
   // For fuzzy search:
-  private readonly fuse = new Fuse<WorkflowTag>([], {
+  private readonly fuse = new Fuse<TagCount>([], {
     keys: ["tag"],
     shouldSort: false,
     threshold: 0.2, // stricter; default is 0.6
@@ -191,7 +191,7 @@ export class CrawlMetadataEditor extends BtrixElement {
   private async fetchTags() {
     if (!this.crawl) return;
     try {
-      const { tags } = await this.api.fetch<WorkflowTags>(
+      const { tags } = await this.api.fetch<TagCounts>(
         `/orgs/${this.crawl.oid}/crawlconfigs/tagCounts`,
       );
 

frontend/src/features/browser-profiles/profile-metadata-dialog.ts

@@ -7,6 +7,7 @@ import { customElement, property, query, state } from "lit/decorators.js";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
+import type { TagInput } from "@/components/ui/tag-input";
 import type { ProfileUpdatedEvent } from "@/features/browser-profiles/types";
 import type { Profile } from "@/types/crawler";
 import { isApiError } from "@/utils/api";
@@ -42,6 +43,9 @@ export class ProfileMetadataDialog extends BtrixElement {
   @query(`sl-textarea[name="description"]`)
   private readonly descriptionInput?: SlTextarea | null;
 
+  @query(`btrix-tag-input`)
+  private readonly tagInput?: TagInput | null;
+
   private readonly validateNameMax = maxLengthValidator(50);
   private readonly validateDescriptionMax = maxLengthValidator(500);
 
@@ -53,11 +57,15 @@ export class ProfileMetadataDialog extends BtrixElement {
         return;
       }
 
-      const params = serialize(this.form) as {
+      const formValues = serialize(this.form) as {
         name: string;
         description: string;
       };
 
+      const tags = this.tagInput?.getTags();
+
+      const params = { ...formValues, tags };
+
       try {
         await this.api.fetch<{ updated: boolean }>(
           `/orgs/${this.orgId}/profiles/${profile.id}`,
@@ -170,16 +178,10 @@ export class ProfileMetadataDialog extends BtrixElement {
           @sl-input=${this.validateDescriptionMax.validate}
         ></sl-textarea>
 
-        ${
-          // <btrix-tag-input
-          // name="tags"
-          // .initialTags=${[]}
-          // .tagOptions=${[]}
-          // @tag-input=${console.log}
-          // @tags-change=${console.log}
-          // ></btrix-tag-input>
-          undefined
-        }
+        <btrix-tag-input
+          name="tags"
+          .initialTags=${this.profile.tags}
+        ></btrix-tag-input>
       </form>
       <div slot="footer" class="flex justify-between">
         <sl-button form="crawlDetailsForm" type="reset" size="small"

frontend/src/features/crawl-workflows/index.ts

@@ -10,6 +10,5 @@ import("./workflow-editor");
 import("./workflow-list");
 import("./workflow-schedule-filter");
 import("./workflow-search");
-import("./workflow-tag-filter");
 import("./workflow-profile-filter");
 import("./workflow-last-crawl-state-filter");