Merge pull request #2344 from webrecorder/frontend-collection-control…

…-constriction

Button reworks and navigation updates

frontend/docs/docs/user-guide/org-settings.md

@@ -4,17 +4,20 @@ Settings that apply to the entire organization are found in the **Settings** pag
 
 ## General
 
-### Name and URL
+### Name, URL, and other basic information
 
-Choose a display name for your org that's unique and memorable, like the name of your company, organization, or personal project. This name will be visible in the org's [public profile](#profile), if that page is enabled.
+Your org name appears throughout the web application and in email notifications. Choose a display name for your org that's unique and memorable, like the name of your company, organization, or personal project.
 
-The org URL is where you and other org members will go to view the dashboard, configure org settings, and manage all other org-related activities. Changing this URL will also update the URL of your org's public profile, if enabled.
+The org URL is where you and other org members will go to view the dashboard, configure org settings, and manage all other org-related activities. If your org has a [public collections gallery](#public-collections-gallery) enabled, changing this will also update the URL to the gallery.
 
-Org name and URLs are unique to each Browsertrix instance (for example, on `app.browsertrix.com`) and you may be prompted to change the org name or URL identifier if either are already in use by another org.
+Org name and URLs are unique to each Browsertrix instance (for example, on `app.browsertrix.com`) and you may be prompted to change the org name or URL if either are already in use by another org.
 
-### Profile
+??? info "What information will be visible to the public?"
+    All org information is private until you make the org visible. Once your org is made visible to the public, the org name, description, and website will appear on the org's public gallery page. You can preview how information appears to the public by clicking **View as public**.
 
-Enable and configure a public profile page for your org. Once enabled, anyone on the internet with a link to your org's profile page will be able to view public information like the org name, description, and public collections.
+### Public Collections Gallery
+
+Enable a homepage for your public collections to easily share all public collections in your org. Once enabled, anyone on the internet with a link to your org's public collections gallery will be able to browse public collections and view general information like the org name, description, and website.
 
 ## Billing
 

frontend/src/decorators/needLogin.test.ts

@@ -19,6 +19,7 @@ describe("needLogin", () => {
     }
 
     const Element = needLogin(
+      // @ts-expect-error not stubbing full BtrixElement
       class TestElement extends LiteElementMock {
         appState = appState;
       } as unknown as {

frontend/src/features/collections/collection-metadata-dialog.ts

@@ -16,6 +16,7 @@ import { DEFAULT_THUMBNAIL } from "./collection-thumbnail";
 import { BtrixElement } from "@/classes/BtrixElement";
 import type { Dialog } from "@/components/ui/dialog";
 import type { SelectCollectionAccess } from "@/features/collections/select-collection-access";
+import { alerts } from "@/strings/collections/alerts";
 import { CollectionAccess, type Collection } from "@/types/collection";
 import { isApiError } from "@/utils/api";
 import { maxLengthValidator } from "@/utils/form";
@@ -170,12 +171,10 @@ export class CollectionMetadataDialog extends BtrixElement {
             <btrix-alert variant="warning" class="mt-2">
               ${org.enablePublicProfile
                 ? msg(
-                    "This collection will be visible on the org public profile, even without archived items. You may want to set visibility to 'Unlisted' until archived items have been added.",
+                    "This collection will be visible in the org public collection gallery, even without archived items. You may want to set visibility to 'Unlisted' until archived items have been added.",
                   )
                 : html`
-                    ${msg(
-                      "This collection will be visible on the org profile page, which isn't public yet. To make the org profile and this collection visible to the public, update org profile settings.",
-                    )}
+                    ${alerts.orgNotPublicWarning}
                     <a
                       class="ml-auto flex items-center gap-1.5 font-medium underline hover:no-underline"
                       href=${`${this.navigate.orgBasePath}/settings`}

frontend/src/features/collections/collections-grid.ts

@@ -108,7 +108,7 @@ export class CollectionsGrid extends BtrixElement {
           html`<btrix-collection-edit-dialog
             .collectionId=${this.collectionBeingEdited ?? undefined}
             ?open=${!!this.collectionBeingEdited}
-            @sl-hide=${() => {
+            @sl-after-hide=${() => {
               this.collectionBeingEdited = null;
               // TODO propagate an event back up & refresh collections
               // void this.fetchCollection();
@@ -121,22 +121,15 @@ export class CollectionsGrid extends BtrixElement {
   private readonly renderActions = (collection: PublicCollection) => html`
     <div class="pointer-events-none absolute left-0 right-0 top-0 aspect-video">
       <div class="pointer-events-auto absolute bottom-2 right-2">
-        <btrix-overflow-dropdown raised>
-          <sl-menu>
-            <sl-menu-item
-              @click=${() => (this.collectionBeingEdited = collection.id)}
-            >
-              <sl-icon name="pencil" slot="prefix"></sl-icon>
-              ${msg("Edit Collection")}
-            </sl-menu-item>
-            <btrix-menu-item-link
-              href=${`/${RouteNamespace.PublicOrgs}/${this.orgSlugState}/collections/${collection.slug}`}
-            >
-              <sl-icon slot="prefix" name="globe2"></sl-icon>
-              ${msg("Visit Public Page")}
-            </btrix-menu-item-link>
-          </sl-menu>
-        </btrix-overflow-dropdown>
+        <btrix-button raised>
+          <sl-icon
+            label=${msg("Edit Collection")}
+            name="pencil"
+            @click=${() => {
+              this.collectionBeingEdited = collection.id;
+            }}
+          ></sl-icon>
+        </btrix-button>
       </div>
     </div>
   `;

frontend/src/features/collections/edit-dialog/sharing-section.ts

@@ -10,11 +10,11 @@ import { customElement, property } from "lit/decorators.js";
 import { ifDefined } from "lit/directives/if-defined.js";
 import { when } from "lit/directives/when.js";
 
+import { collectionShareLink } from "../helpers/share-link";
 import { type SelectCollectionAccess } from "../select-collection-access";
 
 import { BtrixElement } from "@/classes/BtrixElement";
 import { viewStateContext, type ViewStateContext } from "@/context/view-state";
-import { RouteNamespace } from "@/routes";
 import { CollectionAccess, type Collection } from "@/types/collection";
 
 @customElement("btrix-collection-share-settings")
@@ -39,15 +39,11 @@ export class CollectionShareSettings extends BtrixElement {
   }
 
   private get shareLink() {
-    const baseUrl = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}`;
-    if (this.collection) {
-      return `${baseUrl}/${
-        this.collection.access === CollectionAccess.Private
-          ? `${RouteNamespace.PrivateOrgs}/${this.orgSlugState}/collections/view/${this.collection.id}`
-          : `${RouteNamespace.PublicOrgs}/${this.viewState?.params.slug || ""}/collections/${this.collection.slug}`
-      }`;
-    }
-    return "";
+    return collectionShareLink(
+      this.collection,
+      this.orgSlugState,
+      this.viewState?.params.slug || "",
+    );
   }
 
   private get publicReplaySrc() {

frontend/src/features/collections/helpers/share-link.ts

@@ -0,0 +1,20 @@
+import { RouteNamespace } from "@/routes";
+import { CollectionAccess, type Collection } from "@/types/collection";
+
+export function collectionShareLink(
+  collection:
+    | (Pick<Collection, "id" | "slug"> & Partial<Pick<Collection, "access">>)
+    | undefined,
+  privateSlug: string | null,
+  publicSlug: string | null,
+) {
+  const baseUrl = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}`;
+  if (collection) {
+    return `${baseUrl}/${
+      collection.access === CollectionAccess.Private
+        ? `${RouteNamespace.PrivateOrgs}/${privateSlug}/collections/view/${collection.id}`
+        : `${RouteNamespace.PublicOrgs}/${publicSlug}/collections/${collection.slug}`
+    }`;
+  }
+  return "";
+}

frontend/src/features/collections/select-collection-access.ts

@@ -28,7 +28,7 @@ export class SelectCollectionAccess extends BtrixElement {
     [CollectionAccess.Public]: {
       label: msg("Public"),
       icon: "globe2",
-      detail: msg("Anyone can view on the org's public profile"),
+      detail: msg("Anyone can view from the org public collections gallery"),
     },
   };