chore: Derive org ID from shared state (#1985)

- Moves `userOrg` getter from `<btrix-org>` to app state - Batches mutations in app state actions
webrecorder · Aug 5, 2024 · fc43f6e · fc43f6e
1 parent 7411fa5
commit fc43f6e
Show file tree

Hide file tree

Showing 37 changed files with 283 additions and 364 deletions.
diff --git a/frontend/src/classes/BtrixElement.ts b/frontend/src/classes/BtrixElement.ts
@@ -15,6 +15,18 @@ export class BtrixElement extends TailwindElement {
     return this.appState.userInfo;
   }
 
+  protected get userOrg() {
+    return this.appState.userOrg;
+  }
+
+  protected get orgId() {
+    return this.appState.orgId;
+  }
+
+  protected get orgSlug() {
+    return this.appState.orgSlug;
+  }
+
   protected get org() {
     return this.appState.org;
   }

diff --git a/frontend/src/components/screencast.ts b/frontend/src/components/screencast.ts
@@ -1,7 +1,9 @@
 import { localized } from "@lit/localize";
-import { css, html, LitElement, type PropertyValues } from "lit";
+import { css, html, type PropertyValues } from "lit";
 import { customElement, property, state } from "lit/decorators.js";
 
+import { BtrixElement } from "@/classes/BtrixElement";
+
 type Message = {
   id: number; // page ID
 };
@@ -29,14 +31,13 @@ type CloseMessage = Message & {
  * Usage example:
  * ```ts
  * <btrix-screencast
- *   orgId=${orgId}
  *   crawlId=${crawlId}
  * ></btrix-screencast>
  * ```
  */
 @customElement("btrix-screencast")
 @localized()
-export class Screencast extends LitElement {
+export class Screencast extends BtrixElement {
   static baseUrl = `${window.location.protocol === "https:" ? "wss" : "ws"}:${
     process.env.WEBSOCKET_HOST || window.location.host
   }/watch`;
@@ -124,9 +125,6 @@ export class Screencast extends LitElement {
   @property({ type: String })
   authToken?: string;
 
-  @property({ type: String })
-  orgId?: string;
-
   @property({ type: String })
   crawlId?: string;
 
@@ -158,7 +156,7 @@ export class Screencast extends LitElement {
     changedProperties: PropertyValues<this> & Map<string, unknown>,
   ) {
     if (
-      changedProperties.get("orgId") ||
+      changedProperties.get("appState.userOrg") ||
       changedProperties.get("crawlId") ||
       changedProperties.get("authToken")
     ) {

diff --git a/frontend/src/components/ui/select-crawler.ts b/frontend/src/components/ui/select-crawler.ts
@@ -30,7 +30,6 @@ type CrawlerChannelsAPIResponse = {
  * ```ts
  * <btrix-select-crawler
  *   authState=${authState}
- *   orgId=${orgId}
  *   on-change=${({value}) => selectedCrawler = value}
  * ></btrix-select-crawler>
  * ```
@@ -40,9 +39,6 @@ type CrawlerChannelsAPIResponse = {
 @customElement("btrix-select-crawler")
 @localized()
 export class SelectCrawler extends LiteElement {
-  @property({ type: String })
-  orgId!: string;
-
   @property({ type: String })
   crawlerChannel?: string;
 

diff --git a/frontend/src/features/archived-items/crawl-queue.ts b/frontend/src/features/archived-items/crawl-queue.ts
@@ -26,7 +26,6 @@ const POLL_INTERVAL_SECONDS = 5;
  * Usage example:
  * ```ts
  * <btrix-crawl-queue
- *   orgId=${this.crawl.oid}
  *   crawlId=${this.crawl.id}
  *   regex="skip-me"
  * ></btrix-crawl-queue>
@@ -35,9 +34,6 @@ const POLL_INTERVAL_SECONDS = 5;
 @localized()
 @customElement("btrix-crawl-queue")
 export class CrawlQueue extends LiteElement {
-  @property({ type: String })
-  orgId?: string;
-
   @property({ type: String })
   crawlId?: string;
 
@@ -81,7 +77,7 @@ export class CrawlQueue extends LiteElement {
 
   willUpdate(changedProperties: PropertyValues<this> & Map<string, unknown>) {
     if (
-      changedProperties.has("orgId") ||
+      changedProperties.has("appState.userOrg") ||
       changedProperties.has("crawlId") ||
       changedProperties.has("pageSize") ||
       changedProperties.has("regex") ||

diff --git a/frontend/src/features/archived-items/file-uploader.ts b/frontend/src/features/archived-items/file-uploader.ts
@@ -54,9 +54,6 @@ enum AbortReason {
 @localized()
 @customElement("btrix-file-uploader")
 export class FileUploader extends BtrixElement {
-  @property({ type: String })
-  orgId!: string;
-
   @property({ type: Boolean })
   open = false;
 
@@ -262,7 +259,6 @@ export class FileUploader extends BtrixElement {
       <div class="mt-4">
         <btrix-collections-add
           .initialCollections=${this.collectionIds}
-          .orgId=${this.orgId}
           .configId=${"temp"}
           label=${msg("Add to Collection")}
           @collections-change=${(e: CollectionsChangeEvent) =>

diff --git a/frontend/src/features/archived-items/item-metadata-editor.ts b/frontend/src/features/archived-items/item-metadata-editor.ts
@@ -126,7 +126,6 @@ export class CrawlMetadataEditor extends LiteElement {
         <div class="mt-4">
           <btrix-collections-add
             .initialCollections=${this.crawl.collectionIds}
-            .orgId=${this.crawl.oid}
             .configId=${"temp"}
             label=${msg("Add to Collection")}
             @collections-change=${(e: CollectionsChangeEvent) =>

diff --git a/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts b/frontend/src/features/browser-profiles/new-browser-profile-dialog.ts
@@ -16,9 +16,6 @@ import LiteElement, { html } from "@/utils/LiteElement";
 @localized()
 @customElement("btrix-new-browser-profile-dialog")
 export class NewBrowserProfileDialog extends LiteElement {
-  @property({ type: String })
-  orgId!: string;
-
   @property({ type: Boolean })
   open = false;
 
@@ -77,7 +74,6 @@ export class NewBrowserProfileDialog extends LiteElement {
         </div>
         <div class="mt-1">
           <btrix-select-crawler
-            orgId=${this.orgId}
             .crawlerChannel=${this.crawlerChannel}
             @on-change=${(e: SelectCrawlerChangeEvent) =>
               (this.crawlerChannel = e.detail.value!)}

diff --git a/frontend/src/features/browser-profiles/profile-browser.ts b/frontend/src/features/browser-profiles/profile-browser.ts
@@ -3,7 +3,7 @@ import { html, type PropertyValues } from "lit";
 import { customElement, property, query, state } from "lit/decorators.js";
 import { when } from "lit/directives/when.js";
 
-import { TailwindElement } from "@/classes/TailwindElement";
+import { BtrixElement } from "@/classes/BtrixElement";
 import { APIController } from "@/controllers/api";
 import { NotifyController } from "@/controllers/notify";
 import { isApiError, type APIError } from "@/utils/api";
@@ -30,7 +30,6 @@ export type BrowserConnectionChange = {
  * ```ts
  * <btrix-profile-browser
  *   authState=${authState}
- *   orgId=${orgId}
  *   browserId=${browserId}
  *   initialNavigateUrl=${initialNavigateUrl}
  *   origins=${origins}
@@ -44,10 +43,7 @@ export type BrowserConnectionChange = {
  */
 @localized()
 @customElement("btrix-profile-browser")
-export class ProfileBrowser extends TailwindElement {
-  @property({ type: String })
-  orgId!: string;
-
+export class ProfileBrowser extends BtrixElement {
   @property({ type: String })
   browserId?: string;
 

diff --git a/frontend/src/features/browser-profiles/select-browser-profile.ts b/frontend/src/features/browser-profiles/select-browser-profile.ts
@@ -23,7 +23,6 @@ export type SelectBrowserProfileChangeEvent =
  * ```ts
  * <btrix-select-browser-profile
  *   authState=${authState}
- *   orgId=${orgId}
  *   on-change=${({value}) => selectedProfile = value}
  * ></btrix-select-browser-profile>
  * ```
@@ -33,9 +32,6 @@ export type SelectBrowserProfileChangeEvent =
 @customElement("btrix-select-browser-profile")
 @localized()
 export class SelectBrowserProfile extends LiteElement {
-  @property({ type: String })
-  orgId!: string;
-
   @property({ type: String })
   profileId?: string;
 

diff --git a/frontend/src/features/collections/collection-items-dialog.ts b/frontend/src/features/collections/collection-items-dialog.ts
@@ -15,7 +15,7 @@ import type {
   SelectionChangeDetail,
 } from "./collection-workflow-list";
 
-import { TailwindElement } from "@/classes/TailwindElement";
+import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
 import type { PageChangeEvent } from "@/components/ui/pagination";
 import { APIController } from "@/controllers/api";
@@ -72,7 +72,7 @@ const DEFAULT_PAGE_SIZE = 10;
 
 @localized()
 @customElement("btrix-collection-items-dialog")
-export class CollectionItemsDialog extends TailwindElement {
+export class CollectionItemsDialog extends BtrixElement {
   static styles = css`
     btrix-dialog {
       --width: var(--btrix-screen-lg);
@@ -88,12 +88,6 @@ export class CollectionItemsDialog extends TailwindElement {
     }
   `;
 
-  @property({ type: String })
-  orgId!: string;
-
-  @property({ type: String })
-  userId!: string;
-
   @property({ type: Boolean })
   isCrawler?: boolean;
 
@@ -463,7 +457,6 @@ export class CollectionItemsDialog extends TailwindElement {
 
     return html`<section class="flex-1 p-3">
         <btrix-collection-workflow-list
-          orgId=${this.orgId}
           collectionId=${this.collectionId}
           .workflows=${this.workflows.items}
           .selection=${this.selection}
@@ -725,9 +718,11 @@ export class CollectionItemsDialog extends TailwindElement {
   }
 
   private async fetchCrawls(pageParams: APIPaginationQuery = {}) {
+    const userId = this.userInfo!.id;
+
     try {
       this.crawls = await this.getCrawls({
-        userid: this.showOnlyMine ? this.userId : undefined,
+        userid: this.showOnlyMine ? userId : undefined,
         collectionId: this.collectionId,
         sortBy: this.sortCrawlsBy.field,
         sortDirection: this.sortCrawlsBy.direction,
@@ -738,7 +733,7 @@ export class CollectionItemsDialog extends TailwindElement {
       });
       if (!this.showOnlyInCollection) {
         this.workflows = await this.getWorkflows({
-          userid: this.showOnlyMine ? this.userId : undefined,
+          userid: this.showOnlyMine ? userId : undefined,
           sortBy:
             // NOTE "finished" field doesn't exist in crawlconfigs,
             // `lastRun` is used instead
@@ -758,9 +753,11 @@ export class CollectionItemsDialog extends TailwindElement {
   }
 
   private async fetchUploads(pageParams: APIPaginationQuery = {}) {
+    const userId = this.userInfo!.id;
+
     try {
       this.uploads = await this.getUploads({
-        userid: this.showOnlyMine ? this.userId : undefined,
+        userid: this.showOnlyMine ? userId : undefined,
         collectionId: this.showOnlyInCollection ? this.collectionId : undefined,
         sortBy: this.sortUploadsBy.field,
         sortDirection: this.sortUploadsBy.direction,

diff --git a/frontend/src/features/collections/collection-metadata-dialog.ts b/frontend/src/features/collections/collection-metadata-dialog.ts
@@ -20,9 +20,6 @@ export type CollectionSavedEvent = CustomEvent<{
 @localized()
 @customElement("btrix-collection-metadata-dialog")
 export class CollectionMetadataDialog extends LiteElement {
-  @property({ type: String })
-  orgId!: string;
-
   @property({ type: Object })
   collection?: Collection;
 

diff --git a/frontend/src/features/collections/collection-workflow-list.ts b/frontend/src/features/collections/collection-workflow-list.ts
@@ -7,7 +7,7 @@ import { until } from "lit/directives/until.js";
 import isEqual from "lodash/fp/isEqual";
 import queryString from "query-string";
 
-import { TailwindElement } from "@/classes/TailwindElement";
+import { BtrixElement } from "@/classes/BtrixElement";
 import { APIController } from "@/controllers/api";
 import type {
   APIPaginatedList,
@@ -34,7 +34,7 @@ const CRAWLS_PAGE_SIZE = 50;
  */
 @localized()
 @customElement("btrix-collection-workflow-list")
-export class CollectionWorkflowList extends TailwindElement {
+export class CollectionWorkflowList extends BtrixElement {
   static styles = css`
     :host {
       --border: 1px solid var(--sl-panel-border-color);
@@ -106,9 +106,6 @@ export class CollectionWorkflowList extends TailwindElement {
     }
   `;
 
-  @property({ type: String })
-  orgId?: string;
-
   @property({ type: String })
   collectionId?: string;
 

diff --git a/frontend/src/features/collections/collections-add.ts b/frontend/src/features/collections/collections-add.ts
@@ -7,7 +7,7 @@ import { when } from "lit/directives/when.js";
 import debounce from "lodash/fp/debounce";
 import queryString from "query-string";
 
-import { TailwindElement } from "@/classes/TailwindElement";
+import { BtrixElement } from "@/classes/BtrixElement";
 import type { Combobox } from "@/components/ui/combobox";
 import { APIController } from "@/controllers/api";
 import { NotifyController } from "@/controllers/notify";
@@ -31,7 +31,6 @@ export type CollectionsChangeEvent = CustomEvent<{
  * ```ts
  * <btrix-collections-add
  *   .initialCollections=${[]}
- *   .orgId=${this.orgId}
  *   .configId=${this.configId}
  *   @collections-change=${console.log}
  * ></btrix-collections-add>
@@ -40,13 +39,10 @@ export type CollectionsChangeEvent = CustomEvent<{
  */
 @localized()
 @customElement("btrix-collections-add")
-export class CollectionsAdd extends TailwindElement {
+export class CollectionsAdd extends BtrixElement {
   @property({ type: Array })
   initialCollections?: string[];
 
-  @property({ type: String })
-  orgId!: string;
-
   @property({ type: String })
   configId?: string;
 

diff --git a/frontend/src/features/crawl-workflows/exclusion-editor.ts b/frontend/src/features/crawl-workflows/exclusion-editor.ts
@@ -24,7 +24,6 @@ type ResponseData = {
  * Usage example:
  * ```ts
  * <btrix-exclusion-editor
- *   orgId=${this.crawl.oid}
  *   crawlId=${this.crawl.id}
  *   .config=${this.workflow.config}
  *   ?isActiveCrawl=${isActive}
@@ -37,9 +36,6 @@ type ResponseData = {
 @localized()
 @customElement("btrix-exclusion-editor")
 export class ExclusionEditor extends LiteElement {
-  @property({ type: String })
-  orgId?: string;
-
   @property({ type: String })
   crawlId?: string;
 
@@ -67,7 +63,7 @@ export class ExclusionEditor extends LiteElement {
 
   willUpdate(changedProperties: PropertyValues<this> & Map<string, unknown>) {
     if (
-      changedProperties.has("orgId") ||
+      changedProperties.has("appState.userOrg") ||
       changedProperties.has("crawlId") ||
       changedProperties.has("regex")
     ) {
@@ -129,7 +125,6 @@ export class ExclusionEditor extends LiteElement {
 
   private renderQueue() {
     return html`<btrix-crawl-queue
-      orgId=${this.orgId!}
       crawlId=${this.crawlId!}
       regex=${this.regex}
       .exclusions=${this.config?.exclude || []}

diff --git a/frontend/src/features/crawl-workflows/new-workflow-dialog.ts b/frontend/src/features/crawl-workflows/new-workflow-dialog.ts
@@ -70,9 +70,6 @@ export class NewWorkflowDialog extends LitElement {
     }
   `;
 
-  @property({ type: String })
-  orgId!: string;
-
   @property({ type: Boolean })
   open = false;