From 657c1b70f3643e4204e0e713866761c867db2175 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 16:11:00 -0800 Subject: [PATCH 01/14] update route --- frontend/src/routes.ts | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts index a6b20cde1a..52fccba69d 100644 --- a/frontend/src/routes.ts +++ b/frontend/src/routes.ts @@ -9,7 +9,7 @@ export enum OrgTab { export enum RouteNamespace { PrivateOrgs = "orgs", - PublicOrgs = "profile", + PublicOrgs = "explore", } export const ROUTES = { From 6b2d1b4d1c33883d81c0c11bb79871a629429cc1 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 16:22:20 -0800 Subject: [PATCH 02/14] update text --- .../collections/collection-metadata-dialog.ts | 7 +++---- .../features/collections/select-collection-access.ts | 2 +- frontend/src/features/collections/share-collection.ts | 11 ++++------- frontend/src/pages/org/dashboard.ts | 6 +++--- frontend/src/pages/org/profile.ts | 6 +++--- frontend/src/pages/org/settings/components/profile.ts | 4 ++-- frontend/src/pages/org/settings/settings.ts | 2 +- frontend/src/strings/collections/warning.ts | 7 +++++++ 8 files changed, 24 insertions(+), 21 deletions(-) create mode 100644 frontend/src/strings/collections/warning.ts diff --git a/frontend/src/features/collections/collection-metadata-dialog.ts b/frontend/src/features/collections/collection-metadata-dialog.ts index fcbb6b7da4..d9658512f6 100644 --- a/frontend/src/features/collections/collection-metadata-dialog.ts +++ b/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 { warning } from "@/strings/collections/warning"; import { CollectionAccess, type Collection } from "@/types/collection"; import { isApiError } from "@/utils/api"; import { maxLengthValidator } from "@/utils/form"; @@ -168,12 +169,10 @@ export class CollectionMetadataDialog extends BtrixElement { ${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 on the org's public page, 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.", - )} + ${warning.orgNotPublic} { this.tabGroup?.show(Tab.Link); }} - class="[--body-spacing:0] [--width:40rem]" + class="[--width:40rem] [--body-spacing:0]" > html` - ${msg( - "The org profile page isn't public yet. To make the org profile and this collection visible to the public, update profile visibility in org settings.", - )} + ${warning.orgNotPublic} `, )} @@ -311,9 +310,7 @@ export class ShareCollection extends BtrixElement {
${msg("Thumbnail")} diff --git a/frontend/src/pages/org/dashboard.ts b/frontend/src/pages/org/dashboard.ts index 56d17f8b39..565fd53142 100644 --- a/frontend/src/pages/org/dashboard.ts +++ b/frontend/src/pages/org/dashboard.ts @@ -310,8 +310,8 @@ export class Dashboard extends BtrixElement { > ${this.org?.enablePublicProfile - ? msg("Visit Public Profile") - : msg("Preview Public Profile")} + ? msg("Visit Public Page") + : msg("Preview Public Page")} ${when(this.org, (org) => org.enablePublicProfile @@ -331,7 +331,7 @@ export class Dashboard extends BtrixElement { }} > - ${msg("Copy Link to Profile")} + ${msg("Copy Link to Public Page")} ` : html` diff --git a/frontend/src/pages/org/profile.ts b/frontend/src/pages/org/profile.ts index fdcbb73a10..ad0019418e 100644 --- a/frontend/src/pages/org/profile.ts +++ b/frontend/src/pages/org/profile.ts @@ -87,11 +87,11 @@ export class OrgProfile extends BtrixElement { - ${msg("This is a private preview of your org's profile page")} + ${msg("This is a private preview of your org's public page")}

${msg( - "Update your org's profile settings to make this page visible to anyone on the internet.", + "Update your org's visibility settings to make this page visible to anyone on the internet.", )} ${this.appState.isAdmin ? html` @@ -124,7 +124,7 @@ export class OrgProfile extends BtrixElement { actions: when( this.canEditOrg, () => - html` + html` `, msg( - "If enabled, anyone will be able to view your org's profile page and public collections.", + "If enabled, anyone will be able to view your org's name, description, and public collections.", ), ], [ @@ -70,7 +70,7 @@ export class OrgSettingsProfile extends BtrixElement { html`

diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index f0b744bb21..ef19cd9bd3 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -314,7 +314,7 @@ export class OrgSettings extends BtrixElement { `, msg( - "Customize your org's Browsertrix URL. This will also apply to the URL to your org's public profile page, if you've enabled it.", + "Customize your org's Browsertrix URL. This will also apply to the URL to your org's public page, if you've enabled it.", ), ], ])} diff --git a/frontend/src/strings/collections/warning.ts b/frontend/src/strings/collections/warning.ts new file mode 100644 index 0000000000..eb0467af99 --- /dev/null +++ b/frontend/src/strings/collections/warning.ts @@ -0,0 +1,7 @@ +import { msg } from "@lit/localize"; + +export const warning = { + orgNotPublic: msg( + "This org isn't visible to the public yet. To make the org and this collection public, update the org's visibility settings.", + ), +}; From c18b56c4e97883d19162da838c58920275c09596 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 16:38:13 -0800 Subject: [PATCH 03/14] update section --- .../pages/org/settings/components/profile.ts | 56 ++++++++++--------- 1 file changed, 29 insertions(+), 27 deletions(-) diff --git a/frontend/src/pages/org/settings/components/profile.ts b/frontend/src/pages/org/settings/components/profile.ts index d5dd874048..d119dd7fd2 100644 --- a/frontend/src/pages/org/settings/components/profile.ts +++ b/frontend/src/pages/org/settings/components/profile.ts @@ -20,7 +20,7 @@ export class OrgSettingsProfile extends BtrixElement { [ html`
`, msg( - "If enabled, anyone will be able to view your org's name, description, and public collections.", + "If enabled, anyone will be able to view the org name, description, and public collections in the org's public page or via API.", ), ], + [ + html` +
+ +
+ `, + html` + ${msg( + html`To customize this URL, + ${msg("update your Org URL in General settings")}.`, + )} + `, + ], [ html` `, - msg("Write a short description to introduce your organization."), + msg( + "Write a short description to introduce your organization to the public.", + ), ], [ html` @@ -66,31 +89,10 @@ export class OrgSettingsProfile extends BtrixElement { `, msg("Link to your organization's (or your personal) website."), ], - [ - html` -
- -
- `, - html` - ${msg( - html`To customize this URL, - ${msg("update your Org URL in General settings")}.`, - )} - `, - ], ]; return html` -

${msg("Profile")}

+

${msg("Visibility")}

@@ -100,7 +102,7 @@ export class OrgSettingsProfile extends BtrixElement { href=${`/${RouteNamespace.PublicOrgs}/${this.orgSlugState}`} target="_blank" > - ${msg("Preview public profile page")} + ${msg("Preview public page")} ${msg("Save")} @@ -141,7 +143,7 @@ export class OrgSettingsProfile extends BtrixElement { } this.notify.toast({ - message: msg("Org profile has been updated."), + message: msg("Org settings has been updated."), variant: "success", icon: "check2-circle", }); From aceaca33d61cff32c282df1c4933c944541abfdb Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 18:16:10 -0800 Subject: [PATCH 04/14] update docs --- frontend/docs/docs/user-guide/org-settings.md | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/frontend/docs/docs/user-guide/org-settings.md b/frontend/docs/docs/user-guide/org-settings.md index 5c5f50d37a..15e97c2d35 100644 --- a/frontend/docs/docs/user-guide/org-settings.md +++ b/frontend/docs/docs/user-guide/org-settings.md @@ -6,15 +6,15 @@ Settings that apply to the entire organization are found in the **Settings** pag ### Name and URL -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. +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 page](#visibility), if that page is 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. 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. Changing this URL will also update the URL of your org's public page, if enabled. 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. -### Profile +### Visibility -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. +Enable and configure a public page for your org. Once enabled, anyone on the internet with a link to your org's page will be able to view public information like the org name, description, and public collections. ## Billing From b8b7a3b94aa3419828ce83150a83edbbb9cd6584 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 18:21:34 -0800 Subject: [PATCH 05/14] rename files --- frontend/src/index.ts | 6 +++--- frontend/src/pages/index.ts | 1 + frontend/src/pages/org/index.ts | 1 - .../org/settings/components/{profile.ts => visibility.ts} | 4 ++-- frontend/src/pages/org/settings/settings.ts | 4 ++-- frontend/src/pages/public/index.ts | 1 + frontend/src/pages/{org/profile.ts => public/org.ts} | 4 ++-- frontend/src/routes.ts | 2 +- 8 files changed, 12 insertions(+), 11 deletions(-) rename frontend/src/pages/org/settings/components/{profile.ts => visibility.ts} (97%) create mode 100644 frontend/src/pages/public/index.ts rename frontend/src/pages/{org/profile.ts => public/org.ts} (99%) diff --git a/frontend/src/index.ts b/frontend/src/index.ts index 7054a37300..de489f9cab 100644 --- a/frontend/src/index.ts +++ b/frontend/src/index.ts @@ -817,11 +817,11 @@ export class App extends BtrixElement { >`; } - case "publicOrgProfile": - return html``; + >`; case "publicCollection": { const { collectionSlug, collectionTab } = this.viewState.params; diff --git a/frontend/src/pages/index.ts b/frontend/src/pages/index.ts index 142bce53f1..bf3410b96a 100644 --- a/frontend/src/pages/index.ts +++ b/frontend/src/pages/index.ts @@ -11,3 +11,4 @@ import(/* webpackChunkName: "users-invite" */ "./users-invite"); import(/* webpackChunkName: "accept-invite" */ "./invite/accept"); import(/* webpackChunkName: "account-settings" */ "./account-settings"); import(/* webpackChunkName: "collections" */ "./collections"); +import(/* webpackChunkName: "public" */ "./public"); diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts index e27e4d09d6..a869f341e1 100644 --- a/frontend/src/pages/org/index.ts +++ b/frontend/src/pages/org/index.ts @@ -41,7 +41,6 @@ import "./browser-profiles-detail"; import "./browser-profiles-list"; import "./settings/settings"; import "./dashboard"; -import "./profile"; import(/* webpackChunkName: "org" */ "./archived-item-qa/archived-item-qa"); import(/* webpackChunkName: "org" */ "./workflows-new"); diff --git a/frontend/src/pages/org/settings/components/profile.ts b/frontend/src/pages/org/settings/components/visibility.ts similarity index 97% rename from frontend/src/pages/org/settings/components/profile.ts rename to frontend/src/pages/org/settings/components/visibility.ts index d119dd7fd2..c835b908d0 100644 --- a/frontend/src/pages/org/settings/components/profile.ts +++ b/frontend/src/pages/org/settings/components/visibility.ts @@ -9,8 +9,8 @@ import { RouteNamespace } from "@/routes"; import { formValidator, maxLengthValidator } from "@/utils/form"; @localized() -@customElement("btrix-org-settings-profile") -export class OrgSettingsProfile extends BtrixElement { +@customElement("btrix-org-settings-visibility") +export class OrgSettingsVisibility extends BtrixElement { private readonly validateDescriptionMax = maxLengthValidator(150); render() { diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index ef19cd9bd3..e0aac1b9c6 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -31,7 +31,7 @@ import { formatAPIUser } from "@/utils/user"; import "./components/billing"; import "./components/crawling-defaults"; -import "./components/profile"; +import "./components/visibility"; const styles = unsafeCSS(stylesheet); @@ -171,7 +171,7 @@ export class OrgSettings extends BtrixElement { ${this.renderPanelHeader({ title: msg("General") })} ${this.renderInformation()} - + ${this.renderApi()} diff --git a/frontend/src/pages/public/index.ts b/frontend/src/pages/public/index.ts new file mode 100644 index 0000000000..afaa511903 --- /dev/null +++ b/frontend/src/pages/public/index.ts @@ -0,0 +1 @@ +import "./org"; diff --git a/frontend/src/pages/org/profile.ts b/frontend/src/pages/public/org.ts similarity index 99% rename from frontend/src/pages/org/profile.ts rename to frontend/src/pages/public/org.ts index ad0019418e..301a18f9c4 100644 --- a/frontend/src/pages/org/profile.ts +++ b/frontend/src/pages/public/org.ts @@ -9,8 +9,8 @@ import { page, pageHeading } from "@/layouts/page"; import type { OrgData, PublicOrgCollections } from "@/types/org"; @localized() -@customElement("btrix-org-profile") -export class OrgProfile extends BtrixElement { +@customElement("btrix-public-org") +export class PublicOrg extends BtrixElement { @property({ type: String }) orgSlug?: string; diff --git a/frontend/src/routes.ts b/frontend/src/routes.ts index 52fccba69d..dd38ef8adf 100644 --- a/frontend/src/routes.ts +++ b/frontend/src/routes.ts @@ -35,7 +35,7 @@ export const ROUTES = { `(/${OrgTab.Settings}(/:settingsTab))`, ].join(""), publicOrgs: `/${RouteNamespace.PublicOrgs}(/)`, - publicOrgProfile: `/${RouteNamespace.PublicOrgs}/:slug(/)`, + publicOrg: `/${RouteNamespace.PublicOrgs}/:slug(/)`, publicCollection: `/${RouteNamespace.PublicOrgs}/:slug/collections/:collectionSlug(/:collectionTab)`, users: "/users", usersInvite: "/users/invite", From a7f4d53eedcc56132b7c2d632c671a75c68c993a Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 18:26:45 -0800 Subject: [PATCH 06/14] update strings --- frontend/src/pages/org/settings/components/visibility.ts | 5 +++-- frontend/src/pages/org/settings/settings.ts | 4 +++- frontend/src/strings/orgs/alerts.ts | 6 ++++++ 3 files changed, 12 insertions(+), 3 deletions(-) create mode 100644 frontend/src/strings/orgs/alerts.ts diff --git a/frontend/src/pages/org/settings/components/visibility.ts b/frontend/src/pages/org/settings/components/visibility.ts index c835b908d0..7209c13f78 100644 --- a/frontend/src/pages/org/settings/components/visibility.ts +++ b/frontend/src/pages/org/settings/components/visibility.ts @@ -6,6 +6,7 @@ import { customElement } from "lit/decorators.js"; import { BtrixElement } from "@/classes/BtrixElement"; import { columns, type Cols } from "@/layouts/columns"; import { RouteNamespace } from "@/routes"; +import { alerts } from "@/strings/orgs/alerts"; import { formValidator, maxLengthValidator } from "@/utils/form"; @localized() @@ -143,7 +144,7 @@ export class OrgSettingsVisibility extends BtrixElement { } this.notify.toast({ - message: msg("Org settings has been updated."), + message: alerts.settingsUpdateSuccess, variant: "success", icon: "check2-circle", }); @@ -151,7 +152,7 @@ export class OrgSettingsVisibility extends BtrixElement { console.debug(err); this.notify.toast({ - message: msg("Sorry, couldn't update org at this time."), + message: alerts.settingsUpdateFailure, variant: "danger", icon: "exclamation-octagon", }); diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index e0aac1b9c6..e57a901668 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -33,6 +33,8 @@ import "./components/billing"; import "./components/crawling-defaults"; import "./components/visibility"; +import { alerts } from "@/strings/orgs/alerts"; + const styles = unsafeCSS(stylesheet); type Tab = "information" | "members" | "billing" | "crawling-defaults"; @@ -790,7 +792,7 @@ export class OrgSettings extends BtrixElement { this.navigate.to(`${this.navigate.orgBasePath}/settings`); this.notify.toast({ - message: msg("Org successfully updated."), + message: alerts.settingsUpdateSuccess, variant: "success", icon: "check2-circle", id: "org-update-status", diff --git a/frontend/src/strings/orgs/alerts.ts b/frontend/src/strings/orgs/alerts.ts new file mode 100644 index 0000000000..a5753130e1 --- /dev/null +++ b/frontend/src/strings/orgs/alerts.ts @@ -0,0 +1,6 @@ +import { msg } from "@lit/localize"; + +export const alerts = { + settingsUpdateSuccess: msg("Updated org settings."), + settingsUpdateFailure: msg("Sorry, couldn't update org at this time."), +}; From 3d286c9c5d01f8ba85f0e8c4b091ca10d8cebc3d Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 18:28:00 -0800 Subject: [PATCH 07/14] update file name --- .../src/features/collections/collection-metadata-dialog.ts | 4 ++-- frontend/src/features/collections/share-collection.ts | 4 ++-- frontend/src/strings/collections/{warning.ts => alerts.ts} | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) rename frontend/src/strings/collections/{warning.ts => alerts.ts} (77%) diff --git a/frontend/src/features/collections/collection-metadata-dialog.ts b/frontend/src/features/collections/collection-metadata-dialog.ts index d9658512f6..c03b61baa0 100644 --- a/frontend/src/features/collections/collection-metadata-dialog.ts +++ b/frontend/src/features/collections/collection-metadata-dialog.ts @@ -16,7 +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 { warning } from "@/strings/collections/warning"; +import { alerts } from "@/strings/collections/alerts"; import { CollectionAccess, type Collection } from "@/types/collection"; import { isApiError } from "@/utils/api"; import { maxLengthValidator } from "@/utils/form"; @@ -172,7 +172,7 @@ export class CollectionMetadataDialog extends BtrixElement { "This collection will be visible on the org's public page, even without archived items. You may want to set visibility to 'Unlisted' until archived items have been added.", ) : html` - ${warning.orgNotPublic} + ${alerts.orgNotPublicWarning} html` - ${warning.orgNotPublic} + ${alerts.orgNotPublicWarning} `, )} diff --git a/frontend/src/strings/collections/warning.ts b/frontend/src/strings/collections/alerts.ts similarity index 77% rename from frontend/src/strings/collections/warning.ts rename to frontend/src/strings/collections/alerts.ts index eb0467af99..e9414894bd 100644 --- a/frontend/src/strings/collections/warning.ts +++ b/frontend/src/strings/collections/alerts.ts @@ -1,7 +1,7 @@ import { msg } from "@lit/localize"; -export const warning = { - orgNotPublic: msg( +export const alerts = { + orgNotPublicWarning: msg( "This org isn't visible to the public yet. To make the org and this collection public, update the org's visibility settings.", ), }; From 3a4567cfd025155c041c6f2fb43ecdac65772bbf Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 18:29:39 -0800 Subject: [PATCH 08/14] fix lint issue --- frontend/src/pages/org/settings/settings.ts | 3 +-- 1 file changed, 1 insertion(+), 2 deletions(-) diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index e57a901668..897112c157 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -20,6 +20,7 @@ import type { APIUser } from "@/index"; import { columns } from "@/layouts/columns"; import { pageHeader } from "@/layouts/pageHeader"; import { RouteNamespace } from "@/routes"; +import { alerts } from "@/strings/orgs/alerts"; import type { APIPaginatedList } from "@/types/api"; import { isApiError } from "@/utils/api"; import { formValidator, maxLengthValidator } from "@/utils/form"; @@ -33,8 +34,6 @@ import "./components/billing"; import "./components/crawling-defaults"; import "./components/visibility"; -import { alerts } from "@/strings/orgs/alerts"; - const styles = unsafeCSS(stylesheet); type Tab = "information" | "members" | "billing" | "crawling-defaults"; From 294950ff47ecb9875a15a2ca8121202807f54989 Mon Sep 17 00:00:00 2001 From: sua yoo Date: Tue, 21 Jan 2025 20:42:02 -0800 Subject: [PATCH 09/14] combine setting sections --- frontend/src/pages/org/index.ts | 12 + .../org/settings/components/visibility.ts | 123 ++++------ frontend/src/pages/org/settings/settings.ts | 211 +++++++++++++----- 3 files changed, 208 insertions(+), 138 deletions(-) diff --git a/frontend/src/pages/org/index.ts b/frontend/src/pages/org/index.ts index a869f341e1..cc68523188 100644 --- a/frontend/src/pages/org/index.ts +++ b/frontend/src/pages/org/index.ts @@ -12,6 +12,7 @@ import type { Tab as CollectionTab } from "./collection-detail"; import type { Member, OrgRemoveMemberEvent, + UpdateOrgDetail, UserRoleChangeEvent, } from "./settings/settings"; @@ -627,6 +628,17 @@ export class Org extends BtrixElement { return html`) => { + e.stopPropagation(); + + // Optimistic update + AppStateService.partialUpdateOrg({ + id: this.orgId, + ...e.detail, + }); + + void this.updateOrg(); + }} @org-user-role-change=${this.onUserRoleChange} @org-remove-member=${this.onOrgRemoveMember} >`; diff --git a/frontend/src/pages/org/settings/components/visibility.ts b/frontend/src/pages/org/settings/components/visibility.ts index 7209c13f78..8b94c25d5e 100644 --- a/frontend/src/pages/org/settings/components/visibility.ts +++ b/frontend/src/pages/org/settings/components/visibility.ts @@ -1,43 +1,25 @@ import { localized, msg } from "@lit/localize"; -import { serialize } from "@shoelace-style/shoelace/dist/utilities/form.js"; +import type { SlChangeEvent, SlSwitch } from "@shoelace-style/shoelace"; import { html } from "lit"; import { customElement } from "lit/decorators.js"; +import { UPDATED_STATUS_TOAST_ID, type UpdateOrgDetail } from "../settings"; + import { BtrixElement } from "@/classes/BtrixElement"; import { columns, type Cols } from "@/layouts/columns"; import { RouteNamespace } from "@/routes"; import { alerts } from "@/strings/orgs/alerts"; -import { formValidator, maxLengthValidator } from "@/utils/form"; +/** + * @fires btrix-update-org + */ @localized() @customElement("btrix-org-settings-visibility") export class OrgSettingsVisibility extends BtrixElement { - private readonly validateDescriptionMax = maxLengthValidator(150); - render() { const orgBaseUrl = `${window.location.protocol}//${window.location.hostname}${window.location.port ? `:${window.location.port}` : ""}`; const cols: Cols = [ - [ - html` - -
- - ${msg("Allow anyone to view org")} - -
- `, - msg( - "If enabled, anyone will be able to view the org name, description, and public collections in the org's public page or via API.", - ), - ], [ html`
@@ -59,72 +41,33 @@ export class OrgSettingsVisibility extends BtrixElement { )} `, ], - [ - html` - - `, - msg( - "Write a short description to introduce your organization to the public.", - ), - ], - [ - html` - - `, - msg("Link to your organization's (or your personal) website."), - ], ]; return html`

${msg("Visibility")}

- -
${columns(cols)}
-
- - ${msg("Preview public page")} - - - ${msg("Save")} - -
- + ${msg("Allow anyone to view org")} +
${columns(cols)}
`; } - private readonly checkFormValidity = formValidator(this); - - private async onSubmit(e: SubmitEvent) { - e.preventDefault(); - - const form = e.currentTarget as HTMLFormElement; + private readonly onVisibilityChange = async (e: SlChangeEvent) => { + const checked = (e.target as SlSwitch).checked; - if (!(await this.checkFormValidity(form))) return; - - const { enablePublicProfile, publicDescription, publicUrl } = - serialize(form); + if (checked === this.org?.enablePublicProfile) { + return; + } try { const data = await this.api.fetch<{ updated: boolean }>( @@ -132,21 +75,30 @@ export class OrgSettingsVisibility extends BtrixElement { { method: "POST", body: JSON.stringify({ - enablePublicProfile: enablePublicProfile === "on", - publicDescription, - publicUrl, + enablePublicProfile: checked, }), }, ); if (!data.updated) { - throw new Error(); + throw new Error("`data.updated` is not true"); } + this.dispatchEvent( + new CustomEvent("btrix-update-org", { + detail: { + enablePublicProfile: checked, + }, + bubbles: true, + composed: true, + }), + ); + this.notify.toast({ - message: alerts.settingsUpdateSuccess, + message: msg("Updated org visibility."), variant: "success", icon: "check2-circle", + id: UPDATED_STATUS_TOAST_ID, }); } catch (err) { console.debug(err); @@ -155,7 +107,8 @@ export class OrgSettingsVisibility extends BtrixElement { message: alerts.settingsUpdateFailure, variant: "danger", icon: "exclamation-octagon", + id: UPDATED_STATUS_TOAST_ID, }); } - } + }; } diff --git a/frontend/src/pages/org/settings/settings.ts b/frontend/src/pages/org/settings/settings.ts index 897112c157..3fd54f5914 100644 --- a/frontend/src/pages/org/settings/settings.ts +++ b/frontend/src/pages/org/settings/settings.ts @@ -24,7 +24,7 @@ import { alerts } from "@/strings/orgs/alerts"; import type { APIPaginatedList } from "@/types/api"; import { isApiError } from "@/utils/api"; import { formValidator, maxLengthValidator } from "@/utils/form"; -import { AccessCode, isAdmin, isCrawler } from "@/utils/orgs"; +import { AccessCode, isAdmin, isCrawler, type OrgData } from "@/utils/orgs"; import slugifyStrict from "@/utils/slugify"; import { AppStateService } from "@/utils/state"; import { tw } from "@/utils/tailwind"; @@ -56,6 +56,10 @@ export type OrgRemoveMemberEvent = CustomEvent<{ member: Member; }>; +export type UpdateOrgDetail = Partial; + +export const UPDATED_STATUS_TOAST_ID = "org-updated-status" as const; + /** * Usage: * ```ts @@ -65,6 +69,7 @@ export type OrgRemoveMemberEvent = CustomEvent<{ * > * ``` * + * @fires btrix-update-org * @fires org-user-role-change * @fires org-remove-member */ @@ -104,6 +109,7 @@ export class OrgSettings extends BtrixElement { } private readonly validateOrgNameMax = maxLengthValidator(40); + private readonly validateDescriptionMax = maxLengthValidator(150); async willUpdate(changedProperties: PropertyValues) { if (changedProperties.has("isAddingMember") && this.isAddingMember) { @@ -318,9 +324,53 @@ export class OrgSettings extends BtrixElement { "Customize your org's Browsertrix URL. This will also apply to the URL to your org's public page, if you've enabled it.", ), ], + [ + html` + + `, + msg( + "Write a short description to introduce your organization to the public.", + ), + ], + [ + html` + + `, + msg("Link to your organization's (or your personal) website."), + ], ])}
-