Fixes allowed actions for viewers and crawlers throughout the app (#1326

) Closes #1294 ### Changes - `crawl-list` component - Adds a check if there are any items in the actions menu. If not, skip rendering the actions menu. - This allows us to give the component no actions! Currently required to remove them for viewers! - Collection Details - Hides "Remove from Collection" option for viewers - Crawls List - Removes the single "View Crawl Details" option from archived items for viewers - All the other actions were already set up correctly to be used by all roles! - Dashboard - Hides org settings gear icon button unless the user is an admin - Hides "Create New" dropdown for viewers - Workflow Details - Hides workflow edit icon button for viewers - Hides the "Delete Crawl" option in archived items for viewers - Hides the "Run Crawl" option for viewers - Workflow List - Hides all edit-related options for viewers, the only option now is copying tags - Removes the deactivate / delete options (were only visible when running a crawl) in the workflow list actions --------- Co-authored-by: Ilya Kreymer <[email protected]> Co-authored-by: sua yoo <[email protected]>
webrecorder · Nov 17, 2023 · f507f1d · f507f1d
1 parent 1218d6e
commit f507f1d
Show file tree

Hide file tree

Showing 8 changed files with 182 additions and 170 deletions.
diff --git a/backend/btrixcloud/crawls.py b/backend/btrixcloud/crawls.py
@@ -833,7 +833,7 @@ async def get_crawl_errors(
         crawl_id: str,
         pageSize: int = DEFAULT_PAGE_SIZE,
         page: int = 1,
-        org: Organization = Depends(org_crawl_dep),
+        org: Organization = Depends(org_viewer_dep),
     ):
         crawl_raw = await ops.get_crawl_raw(crawl_id, org)
         crawl = Crawl.from_dict(crawl_raw)

diff --git a/frontend/src/components/crawl-list.ts b/frontend/src/components/crawl-list.ts
@@ -207,6 +207,9 @@ export class CrawlListItem extends LitElement {
   @state()
   private dropdownIsOpen?: boolean;
 
+  @state()
+  private hasMenuItems?: boolean;
+
   // TODO localize
   private numberFormatter = new Intl.NumberFormat(undefined, {
     notation: "compact",
@@ -357,35 +360,7 @@ export class CrawlListItem extends LitElement {
           )}
         </div>
       </div>
-      <div class="col action">
-        <sl-icon-button
-          class="dropdownTrigger"
-          label=${msg("Actions")}
-          name="three-dots-vertical"
-          @click=${(e: MouseEvent) => {
-            // Prevent anchor link default behavior
-            e.preventDefault();
-            // Stop prop to anchor link
-            e.stopPropagation();
-            this.dropdownIsOpen = !this.dropdownIsOpen;
-          }}
-          @focusout=${(e: FocusEvent) => {
-            const relatedTarget = e.relatedTarget as HTMLElement;
-            if (relatedTarget) {
-              if (this.menuArr[0]?.contains(relatedTarget)) {
-                // Keep dropdown open if moving to menu selection
-                return;
-              }
-              if (this.row?.isEqualNode(relatedTarget)) {
-                // Handle with click event
-                return;
-              }
-            }
-            this.dropdownIsOpen = false;
-          }}
-        >
-        </sl-icon-button>
-      </div>
+      ${this.renderActions()}
     </a>`;
   }
 
@@ -406,6 +381,7 @@ export class CrawlListItem extends LitElement {
     >
       <slot
         name="menu"
+        @slotchange=${() => (this.hasMenuItems = this.menuArr.length > 0)}
         @sl-select=${() => (this.dropdownIsOpen = false)}
       ></slot>
     </div> `;
@@ -440,6 +416,42 @@ export class CrawlListItem extends LitElement {
     `;
   }
 
+  private renderActions() {
+    if (!this.hasMenuItems) {
+      return;
+    }
+
+    return html` <div class="col action">
+      <sl-icon-button
+        class="dropdownTrigger"
+        label=${msg("Actions")}
+        name="three-dots-vertical"
+        @click=${(e: MouseEvent) => {
+          // Prevent anchor link default behavior
+          e.preventDefault();
+          // Stop prop to anchor link
+          e.stopPropagation();
+          this.dropdownIsOpen = !this.dropdownIsOpen;
+        }}
+        @focusout=${(e: FocusEvent) => {
+          const relatedTarget = e.relatedTarget as HTMLElement;
+          if (relatedTarget) {
+            if (this.menuArr[0]?.contains(relatedTarget)) {
+              // Keep dropdown open if moving to menu selection
+              return;
+            }
+            if (this.row?.isEqualNode(relatedTarget)) {
+              // Handle with click event
+              return;
+            }
+          }
+          this.dropdownIsOpen = false;
+        }}
+      >
+      </sl-icon-button>
+    </div>`;
+  }
+
   private repositionDropdown() {
     const { x, y } = this.dropdownTrigger.getBoundingClientRect();
     this.dropdown.style.left = `${x + window.scrollX}px`;

diff --git a/frontend/src/pages/org/collection-detail.ts b/frontend/src/pages/org/collection-detail.ts
@@ -623,15 +623,19 @@ export class CollectionDetail extends LiteElement {
         orgSlug=${this.appState.orgSlug || ""}
         .crawl=${item}
       >
-        <sl-menu slot="menu">
-          <sl-menu-item
-            style="--sl-color-neutral-700: var(--warning)"
-            @click=${() => this.removeArchivedItem(item.id, idx)}
-          >
-            <sl-icon name="folder-minus" slot="prefix"></sl-icon>
-            ${msg("Remove from Collection")}
-          </sl-menu-item>
-        </sl-menu>
+        ${when(
+          this.isCrawler,
+          () =>
+            html` <sl-menu slot="menu">
+              <sl-menu-item
+                style="--sl-color-neutral-700: var(--warning)"
+                @click=${() => this.removeArchivedItem(item.id, idx)}
+              >
+                <sl-icon name="folder-minus" slot="prefix"></sl-icon>
+                ${msg("Remove from Collection")}
+              </sl-menu-item>
+            </sl-menu>`
+        )}
       </btrix-crawl-list-item>
     `;
 

diff --git a/frontend/src/pages/org/crawls-list.ts b/frontend/src/pages/org/crawls-list.ts
@@ -447,28 +447,11 @@ export class CrawlsList extends LiteElement {
         orgSlug=${this.appState.orgSlug || ""}
         .crawl=${item}
       >
-        <sl-menu slot="menu">
-          ${when(
-            this.isCrawler,
-            this.crawlerMenuItemsRenderer(item),
-            () => html`
-              <sl-menu-item
-                @click=${() =>
-                  this.navTo(
-                    `${this.orgBasePath}/items/${
-                      item.type === "upload" ? "upload" : "crawl"
-                    }/${item.id}`
-                  )}
-              >
-                ${msg("View Crawl Details")}
-              </sl-menu-item>
-            `
-          )}
-        </sl-menu>
+        <sl-menu slot="menu"> ${this.crawlerMenuItemsRenderer(item)} </sl-menu>
       </btrix-crawl-list-item>
     `;
 
-  private crawlerMenuItemsRenderer = (item: Crawl) => () =>
+  private crawlerMenuItemsRenderer = (item: Crawl) =>
     // HACK shoelace doesn't current have a way to override non-hover
     // color without resetting the --sl-color-neutral-700 variable
     html`

diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts
@@ -36,6 +36,12 @@ export class Dashboard extends LiteElement {
   @property({ type: Object })
   authState!: AuthState;
 
+  @property({ type: Boolean })
+  isCrawler?: boolean;
+
+  @property({ type: Boolean })
+  isAdmin?: boolean;
+
   @property({ type: String })
   orgId!: string;
 
@@ -96,48 +102,55 @@ export class Dashboard extends LiteElement {
         <h1 class="min-w-0 text-xl font-semibold leading-8 mr-auto">
           ${this.org?.name}
         </h1>
-        <sl-icon-button
-          href=${`${this.orgBasePath}/settings`}
-          class="text-lg"
-          name="gear"
-          label="Edit org settings"
-          @click=${this.navLink}
-        ></sl-icon-button>
-        <sl-dropdown
-          distance="4"
-          placement="bottom-end"
-          @sl-select=${(e: SlSelectEvent) => {
-            this.dispatchEvent(
-              <SelectNewDialogEvent>new CustomEvent("select-new-dialog", {
-                detail: e.detail.item.value,
-              })
-            );
-          }}
-        >
-          <sl-button slot="trigger" size="small" caret>
-            <sl-icon slot="prefix" name="plus-lg"></sl-icon>
-            ${msg("Create New...")}
-          </sl-button>
-          <sl-menu>
-            <sl-menu-item value="workflow"
-              >${msg("Crawl Workflow")}</sl-menu-item
-            >
-            <sl-menu-item
-              value="upload"
-              ?disabled=${!this.metrics || quotaReached}
-              >${msg("Upload")}</sl-menu-item
-            >
-            <sl-menu-item value="collection">
-              ${msg("Collection")}
-            </sl-menu-item>
-            <sl-menu-item
-              value="browser-profile"
-              ?disabled=${!this.metrics || quotaReached}
-            >
-              ${msg("Browser Profile")}
-            </sl-menu-item>
-          </sl-menu>
-        </sl-dropdown>
+        ${when(
+          this.isAdmin,
+          () =>
+            html` <sl-icon-button
+              href=${`${this.orgBasePath}/settings`}
+              class="text-lg"
+              name="gear"
+              label="Edit org settings"
+              @click=${this.navLink}
+            ></sl-icon-button>`
+        )}
+        ${when(
+          this.isCrawler,
+          () => html` <sl-dropdown
+            distance="4"
+            placement="bottom-end"
+            @sl-select=${(e: SlSelectEvent) => {
+              this.dispatchEvent(
+                <SelectNewDialogEvent>new CustomEvent("select-new-dialog", {
+                  detail: e.detail.item.value,
+                })
+              );
+            }}
+          >
+            <sl-button slot="trigger" size="small" caret>
+              <sl-icon slot="prefix" name="plus-lg"></sl-icon>
+              ${msg("Create New...")}
+            </sl-button>
+            <sl-menu>
+              <sl-menu-item value="workflow"
+                >${msg("Crawl Workflow")}</sl-menu-item
+              >
+              <sl-menu-item
+                value="upload"
+                ?disabled=${!this.metrics || quotaReached}
+                >${msg("Upload")}</sl-menu-item
+              >
+              <sl-menu-item value="collection">
+                ${msg("Collection")}
+              </sl-menu-item>
+              <sl-menu-item
+                value="browser-profile"
+                ?disabled=${!this.metrics || quotaReached}
+              >
+                ${msg("Browser Profile")}
+              </sl-menu-item>
+            </sl-menu>
+          </sl-dropdown>`
+        )}
       </header>
       <main>
         <div class="flex flex-col md:flex-row gap-6">

diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts
@@ -455,6 +455,8 @@ export class Org extends LiteElement {
         .authState=${this.authState!}
         orgId=${this.orgId}
         .org=${this.org || null}
+        ?isCrawler=${this.isCrawler}
+        ?isAdmin=${this.isAdmin}
         @select-new-dialog=${this.onSelectNewDialog}
       ></btrix-dashboard>
     `;

diff --git a/frontend/src/pages/org/workflow-detail.ts b/frontend/src/pages/org/workflow-detail.ts
@@ -448,7 +448,7 @@ export class WorkflowDetail extends LiteElement {
         )}
       </h3>`;
     }
-    if (this.activePanel === "settings") {
+    if (this.activePanel === "settings" && this.isCrawler == true) {
       return html` <h3>${this.tabLabels[this.activePanel]}</h3>
         <sl-icon-button
           name="gear"
@@ -460,7 +460,7 @@ export class WorkflowDetail extends LiteElement {
         >
         </sl-icon-button>`;
     }
-    if (this.activePanel === "watch") {
+    if (this.activePanel === "watch" && this.isCrawler == true) {
       return html` <h3>${this.tabLabels[this.activePanel]}</h3>
         <sl-button
           size="small"
@@ -836,31 +836,32 @@ export class WorkflowDetail extends LiteElement {
             this.crawls,
             () =>
               this.crawls!.items.map(
-                (crawl: Crawl) => html`
-                  <btrix-crawl-list-item
-                    orgSlug=${this.appState.orgSlug || ""}
-                    .crawl=${crawl}
-                  >
-                    <sl-format-date
-                      slot="id"
-                      date=${`${crawl.started}Z`}
-                      month="2-digit"
-                      day="2-digit"
-                      year="2-digit"
-                      hour="2-digit"
-                      minute="2-digit"
-                    ></sl-format-date>
-                    <sl-menu slot="menu">
+                (crawl: Crawl) => html` <btrix-crawl-list-item
+                  orgSlug=${this.appState.orgSlug || ""}
+                  .crawl=${crawl}
+                >
+                  <sl-format-date
+                    slot="id"
+                    date=${`${crawl.started}Z`}
+                    month="2-digit"
+                    day="2-digit"
+                    year="2-digit"
+                    hour="2-digit"
+                    minute="2-digit"
+                  ></sl-format-date>
+                  ${when(
+                    this.isCrawler,
+                    () => html` <sl-menu slot="menu">
                       <sl-menu-item
                         style="--sl-color-neutral-700: var(--danger)"
                         @click=${() => this.deleteCrawl(crawl)}
                       >
                         <sl-icon name="trash3" slot="prefix"></sl-icon>
                         ${msg("Delete Crawl")}
                       </sl-menu-item>
-                    </sl-menu>
-                  </btrix-crawl-list-item>
-                `
+                    </sl-menu>`
+                  )}</btrix-crawl-list-item
+                >`
               ),
             () => html`<div
               class="w-full flex items-center justify-center my-24 text-3xl"
@@ -1037,24 +1038,26 @@ export class WorkflowDetail extends LiteElement {
               >
             `
           )}
-
-          <sl-tooltip
-            content=${msg(
-              "Org Storage Full or Monthly Execution Minutes Reached"
-            )}
-            ?disabled=${!this.orgStorageQuotaReached &&
-            !this.orgExecutionMinutesQuotaReached}
-          >
-            <sl-button
-              size="small"
-              ?disabled=${this.orgStorageQuotaReached ||
-              this.orgExecutionMinutesQuotaReached}
-              @click=${() => this.runNow()}
+          ${when(
+            this.isCrawler,
+            () => html` <sl-tooltip
+              content=${msg(
+                "Org Storage Full or Monthly Execution Minutes Reached"
+              )}
+              ?disabled=${!this.orgStorageQuotaReached &&
+              !this.orgExecutionMinutesQuotaReached}
             >
-              <sl-icon name="play" slot="prefix"></sl-icon>
-              ${msg("Run Crawl")}
-            </sl-button>
-          </sl-tooltip>
+              <sl-button
+                size="small"
+                ?disabled=${this.orgStorageQuotaReached ||
+                this.orgExecutionMinutesQuotaReached}
+                @click=${() => this.runNow()}
+              >
+                <sl-icon name="play" slot="prefix"></sl-icon>
+                ${msg("Run Crawl")}
+              </sl-button>
+            </sl-tooltip>`
+          )}
         </div>
       </section>
     `;