Hide QA UI from users without crawler role (#1733)

Resolves https://github.com/webrecorder/browsertrix/issues/1732

- Hides QA tab and QA review page from users with viewer role
- Fixes empty menu button rendering for viewers on archived item detail
page

frontend/src/pages/org/archived-item-detail/archived-item-detail.ts

@@ -249,10 +249,14 @@ export class ArchivedItemDetail extends TailwindElement {
 
   render() {
     const authToken = this.authState!.headers.Authorization.split(" ")[1];
-    let sectionContent: string | TemplateResult = "";
+    let sectionContent: string | TemplateResult<1> = "";
 
     switch (this.activeTab) {
-      case "qa":
+      case "qa": {
+        if (!this.isCrawler) {
+          sectionContent = "";
+          break;
+        }
         sectionContent = this.renderPanel(
           html`${this.renderTitle(
               html`${msg("Quality Assurance")}
@@ -276,6 +280,7 @@ export class ArchivedItemDetail extends TailwindElement {
           `,
         );
         break;
+      }
       case "replay":
         sectionContent = this.renderPanel(msg("Replay"), this.renderReplay(), [
           tw`overflow-hidden rounded-lg border`,
@@ -478,7 +483,7 @@ export class ArchivedItemDetail extends TailwindElement {
           label: msg("Overview"),
         })}
         ${when(
-          this.itemType === "crawl",
+          this.itemType === "crawl" && this.isCrawler,
           () => html`
             ${renderNavItem({
               section: "qa",
@@ -553,11 +558,13 @@ export class ArchivedItemDetail extends TailwindElement {
                 </sl-button-group>
               `
             : ""}
-          ${this.crawl && this.isCrawler
+          ${this.isCrawler
-            ? this.renderMenu()
+            ? this.crawl
-            : html`<sl-skeleton
+              ? this.renderMenu()
-                class="h-8 w-24 [--border-radius:theme(borderRadius.sm)]"
+              : html`<sl-skeleton
-              ></sl-skeleton>`}
+                  class="h-8 w-24 [--border-radius:theme(borderRadius.sm)]"
+                ></sl-skeleton>`
+            : nothing}
         </div>
       </header>
     `;

frontend/src/pages/org/archived-item-qa/archived-item-qa.ts

@@ -99,9 +99,6 @@ export class ArchivedItemQA extends TailwindElement {
   @property({ type: String })
   qaRunId?: string;
 
-  @property({ type: Boolean })
-  isCrawler = false;
-
   @property({ type: String })
   tab: QATypes.QATab = "screenshots";
 
@@ -838,7 +835,7 @@ export class ArchivedItemQA extends TailwindElement {
       );
     } catch {
       this.notify.toast({
-        message: msg("Sorry, couldn't retrieve QA data at this time."),
+        message: msg("Sorry, couldn't retrieve analysis runs at this time."),
         variant: "danger",
         icon: "exclamation-octagon",
       });

frontend/src/pages/org/index.ts

@@ -527,7 +527,13 @@ export class Org extends LiteElement {
 
     if (params.itemId) {
       if (params.qaTab) {
-        return html` <btrix-archived-item-qa
+        if (!this.isCrawler) {
+          return html`<btrix-not-found
+            class="flex items-center justify-center"
+          ></btrix-not-found>`;
+        }
+
+        return html`<btrix-archived-item-qa
           class="flex-1"
           .authState=${this.authState!}
           orgId=${this.orgId}
@@ -535,7 +541,6 @@ export class Org extends LiteElement {
           itemPageId=${ifDefined(params.itemPageId)}
           qaRunId=${ifDefined(params.qaRunId)}
           tab=${params.qaTab}
-          ?isCrawler=${this.isCrawler}
         ></btrix-archived-item-qa>`;
       }