Add "shareable" notices to workflow list & detail (#2788)

Closes #2785

Author: emma-sg

frontend/src/features/crawl-workflows/templates/shareable-notice.ts

@@ -0,0 +1,14 @@
+import { msg } from "@lit/localize";
+import { html } from "lit";
+
+export const ShareableNotice = () =>
+  html`<btrix-popover
+    content=${msg(
+      "The latest crawl from this workflow is publicly accessible to anyone with the link. This can be changed with the Browsertrix API.",
+    )}
+  >
+    <btrix-badge class="part-[base]:min-h-5" variant="warning">
+      <sl-icon name="info-circle" class="align-icon mr-1"></sl-icon>
+      ${msg("Public")}
+    </btrix-badge>
+  </btrix-popover>`;

frontend/src/features/crawl-workflows/workflow-list.ts

@@ -19,6 +19,9 @@ import {
   query,
   queryAssignedElements,
 } from "lit/decorators.js";
+import { when } from "lit/directives/when.js";
+
+import { ShareableNotice } from "./templates/shareable-notice";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { OverflowDropdown } from "@/components/ui/overflow-dropdown";
@@ -250,7 +253,8 @@ export class WorkflowListItem extends BtrixElement {
       }}
     >
       <div class="col">
-        <div class="detail url truncate">
+        <div class="detail url items-center truncate">
+          ${when(this.workflow?.shareable, ShareableNotice)}
           ${this.safeRender(this.renderName)}
         </div>
         <div class="desc">

frontend/src/pages/org/workflow-detail.ts

@@ -23,6 +23,7 @@ import {
 import { ClipboardController } from "@/controllers/clipboard";
 import { CrawlStatus } from "@/features/archived-items/crawl-status";
 import { ExclusionEditor } from "@/features/crawl-workflows/exclusion-editor";
+import { ShareableNotice } from "@/features/crawl-workflows/templates/shareable-notice";
 import { pageError } from "@/layouts/pageError";
 import { pageNav, type Breadcrumb } from "@/layouts/pageHeader";
 import { WorkflowTab } from "@/routes";
@@ -445,16 +446,17 @@ export class WorkflowDetail extends BtrixElement {
 
         <div>
           <header class="col-span-1 mb-3 flex flex-wrap gap-2">
-            <div class="flex max-w-full flex-wrap gap-x-2 gap-y-1.5">
+            <div
+              class="flex max-w-full flex-wrap items-center gap-x-2 gap-y-1.5"
+            >
               <btrix-detail-page-title
                 .item=${this.workflow}
               ></btrix-detail-page-title>
+              ${when(this.workflow?.shareable, ShareableNotice)}
               ${when(
                 this.workflow?.inactive,
                 () => html`
-                  <btrix-badge
-                    class="inline-block align-middle"
-                    variant="warning"
+                  <btrix-badge class="min-h-5" variant="warning"
                     >${msg("Inactive")}</btrix-badge
                   >
                 `,
@@ -471,9 +473,7 @@ export class WorkflowDetail extends BtrixElement {
               )}
             </div>
 
-            <div
-              class="flex-0 order-first ml-auto flex flex-wrap justify-end gap-2 lg:order-last"
-            >
+            <div class="flex-0 ml-auto flex flex-wrap justify-end gap-2">
               ${when(
                 this.isCrawler && this.workflow && !this.workflow.inactive,
                 this.renderActions,

frontend/src/types/crawler.ts

@@ -107,6 +107,7 @@ export type Workflow = CrawlConfig & {
   isCrawlRunning: boolean | null;
   autoAddCollections: string[];
   seedCount: number;
+  shareable?: boolean;
 };
 
 export type ListWorkflow = Omit<Workflow, "config">;