(core) Admin Panel and InstallAdmin class to identify installation admins.

Summary: - Add InstallAdmin class to identify users who can manage Grist installation. This is overridable by different Grist flavors (e.g. different in SaaS). It generalizes previous logic used to decide who can control Activation settings (e.g. enable telemetry). - Implement a basic Admin Panel at /admin, and move items previously in the "Support Grist" page into the "Support Grist" section of the Admin Panel. - Replace "Support Grist" menu items with "Admin Panel" and show only to admins. - Add "Support Grist" links to Github sponsorship to user-account menu. - Add "Support Grist" button to top-bar, which - for admins, replaces the previous "Contribute" button and reopens the "Support Grist / opt-in to telemetry" nudge (unchanged) - for everyone else, links to Github sponsorship - in either case, user can dismiss it. Test Plan: Shuffled some test cases between Support Grist and the new Admin Panel, and added some new cases. Reviewers: jarek, paulfitz Reviewed By: jarek, paulfitz Differential Revision: https://phab.getgrist.com/D4194
2026-03-02 04:09:24 +00:00 · 2024-03-23 13:11:06 -04:00
parent 0c05f4cdc4
commit e380fcfa90
32 changed files with 875 additions and 524 deletions
--- a/app/client/components/Forms/FormView.ts
+++ b/app/client/components/Forms/FormView.ts
@@ -496,7 +496,7 @@ export class FormView extends Disposable {
        async (dontShowAgain) => {
          await this._publishForm();
          if (dontShowAgain) {
-            this.gristDoc.appModel.dismissedPopup('publishForm').set(true);
+            this.gristDoc.appModel.dismissPopup('publishForm', true);
          }
        },
        {
@@ -588,7 +588,7 @@ export class FormView extends Disposable {
        async (dontShowAgain) => {
          await this._unpublishForm();
          if (dontShowAgain) {
-            this.gristDoc.appModel.dismissedPopup('unpublishForm').set(true);
+            this.gristDoc.appModel.dismissPopup('unpublishForm', true);
          }
        },
        {
--- a/app/client/lib/helpScout.ts
+++ b/app/client/lib/helpScout.ts
@@ -21,7 +21,6 @@ import {reportWarning} from 'app/client/models/errors';
 import {IAppError} from 'app/client/models/NotifyModel';
 import {GristLoadConfig} from 'app/common/gristUrls';
 import {timeFormat} from 'app/common/timeFormat';
-import {ActiveSessionInfo} from 'app/common/UserAPI';
 import * as version from 'app/common/version';
 import {dom} from 'grainjs';
 import identity = require('lodash/identity');
@@ -249,7 +248,7 @@ function getBeaconUserObj(appModel: AppModel|null): IUserObj|null {
  if (!appModel) { return null; }

  // ActiveSessionInfo["user"] includes optional helpScoutSignature too.
-  const user = appModel.currentValidUser as ActiveSessionInfo["user"]|null;
+  const user = appModel.currentValidUser;

  // For anon user, don't attempt to identify anything. Even the "company" field (when anon on a
  // team doc) isn't useful, because the user may be external to the company.
--- a/app/client/lib/imports.d.ts
+++ b/app/client/lib/imports.d.ts
@@ -1,7 +1,7 @@
 import * as AccountPageModule from 'app/client/ui/AccountPage';
 import * as ActivationPageModule from 'app/client/ui/ActivationPage';
 import * as BillingPageModule from 'app/client/ui/BillingPage';
-import * as SupportGristPageModule from 'app/client/ui/SupportGristPage';
+import * as AdminPanelModule from 'app/client/ui/AdminPanel';
 import * as GristDocModule from 'app/client/components/GristDoc';
 import * as ViewPane from 'app/client/components/ViewPane';
 import * as UserManagerModule from 'app/client/ui/UserManager';
@@ -15,7 +15,7 @@ export type MomentTimezone = typeof momentTimezone;
 export function loadAccountPage(): Promise<typeof AccountPageModule>;
 export function loadActivationPage(): Promise<typeof ActivationPageModule>;
 export function loadBillingPage(): Promise<typeof BillingPageModule>;
-export function loadSupportGristPage(): Promise<typeof SupportGristPageModule>;
+export function loadAdminPanel(): Promise<typeof AdminPanelModule>;
 export function loadGristDoc(): Promise<typeof GristDocModule>;
 export function loadMomentTimezone(): Promise<MomentTimezone>;
 export function loadPlotly(): Promise<PlotlyType>;
--- a/app/client/lib/imports.js
+++ b/app/client/lib/imports.js
@@ -9,7 +9,7 @@
 exports.loadAccountPage = () => import('app/client/ui/AccountPage' /* webpackChunkName: "AccountPage" */);
 exports.loadActivationPage = () => import('app/client/ui/ActivationPage' /* webpackChunkName: "ActivationPage" */);
 exports.loadBillingPage = () => import('app/client/ui/BillingPage' /* webpackChunkName: "BillingModule" */);
-exports.loadSupportGristPage = () => import('app/client/ui/SupportGristPage' /* webpackChunkName: "SupportGristPage" */);
+exports.loadAdminPanel = () => import('app/client/ui/AdminPanel' /* webpackChunkName: "AdminPanel" */);
 exports.loadGristDoc = () => import('app/client/components/GristDoc' /* webpackChunkName: "GristDoc" */);
 // When importing this way, the module is under the "default" member, not sure why (maybe
 // esbuild-loader's doing).
--- a/app/client/models/AppModel.ts
+++ b/app/client/models/AppModel.ts
@@ -25,8 +25,9 @@ import {getDefaultThemePrefs, Theme, ThemeColors, ThemePrefs,
        ThemePrefsChecker} from 'app/common/ThemePrefs';
 import {getThemeColors} from 'app/common/Themes';
 import {getGristConfig} from 'app/common/urlUtils';
+import {ExtendedUser} from 'app/common/UserAPI';
 import {getOrgName, isTemplatesOrg, Organization, OrgError, UserAPI, UserAPIImpl} from 'app/common/UserAPI';
-import {getUserPrefObs, getUserPrefsObs, markAsSeen, markAsUnSeen} from 'app/client/models/UserPrefs';
+import {getUserPrefObs, getUserPrefsObs, markAsSeen} from 'app/client/models/UserPrefs';
 import {bundleChanges, Computed, Disposable, Observable, subscribe} from 'grainjs';

 const t = makeT('AppModel');
@@ -40,7 +41,7 @@ export type PageType =
  | "billing"
  | "welcome"
  | "account"
-  | "support"
+  | "admin"
  | "activation";

 const G = getBrowserGlobals('document', 'window');
@@ -99,8 +100,8 @@ export interface AppModel {
  topAppModel: TopAppModel;
  api: UserAPI;

-  currentUser: FullUser|null;
-  currentValidUser: FullUser|null;      // Like currentUser, but null when anonymous
+  currentUser: ExtendedUser|null;
+  currentValidUser: ExtendedUser|null;      // Like currentUser, but null when anonymous

  currentOrg: Organization|null;        // null if no access to currentSubdomain
  currentOrgName: string;               // Our best guess for human-friendly name.
@@ -141,8 +142,8 @@ export interface AppModel {
  isSupport(): boolean;                 // If user is a Support user
  isOwner(): boolean;                   // If user is an owner of this org
  isOwnerOrEditor(): boolean;           // If user is an owner or editor of this org
-  /** Creates an computed observable to dismiss a popup or check if it was dismissed */
-  dismissedPopup(name: DismissedPopup): Observable<boolean>;
+  isInstallAdmin(): boolean;            // Is user an admin of this installation
+  dismissPopup(name: DismissedPopup, isSeen: boolean): void;  // Mark popup as dismissed or not.
  switchUser(user: FullUser, org?: string): Promise<void>;
 }

@@ -283,7 +284,7 @@ export class AppModelImpl extends Disposable implements AppModel {
  public readonly api: UserAPI = this.topAppModel.api;

  // Compute currentValidUser, turning anonymous into null.
-  public readonly currentValidUser: FullUser|null =
+  public readonly currentValidUser: ExtendedUser|null =
    this.currentUser && !this.currentUser.anonymous ? this.currentUser : null;

  // Figure out the org name, or blank if details are unavailable.
@@ -324,8 +325,8 @@ export class AppModelImpl extends Disposable implements AppModel {
        return 'welcome';
      } else if (state.account) {
        return 'account';
-      } else if (state.supportGrist) {
-        return 'support';
+      } else if (state.adminPanel) {
+        return 'admin';
      } else if (state.activation) {
        return 'activation';
      } else {
@@ -340,7 +341,7 @@ export class AppModelImpl extends Disposable implements AppModel {
        state.billing === 'scheduled' ||
        Boolean(state.account) ||
        Boolean(state.activation) ||
-        Boolean(state.supportGrist)
+        Boolean(state.adminPanel)
      );
    });

@@ -353,7 +354,7 @@ export class AppModelImpl extends Disposable implements AppModel {

  constructor(
    public readonly topAppModel: TopAppModel,
-    public readonly currentUser: FullUser|null,
+    public readonly currentUser: ExtendedUser|null,
    public readonly currentOrg: Organization|null,
    public readonly orgError?: OrgError,
  ) {
@@ -419,6 +420,10 @@ export class AppModelImpl extends Disposable implements AppModel {
    return Boolean(this.currentOrg && isOwnerOrEditor(this.currentOrg));
  }

+  public isInstallAdmin(): boolean {
+    return Boolean(this.currentUser?.isInstallAdmin);
+  }
+
  /**
   * Fetch and update the current org's usage.
   */
@@ -435,16 +440,8 @@ export class AppModelImpl extends Disposable implements AppModel {
    }
  }

-  public dismissedPopup(name: DismissedPopup): Computed<boolean> {
-    const computed = Computed.create(null, use => use(this.dismissedPopups).includes(name));
-    computed.onWrite(value => {
-      if (value) {
-        markAsSeen(this.dismissedPopups, name);
-      } else {
-        markAsUnSeen(this.dismissedPopups, name);
-      }
-    });
-    return computed;
+  public dismissPopup(name: DismissedPopup, isSeen: boolean): void {
+    markAsSeen(this.dismissedPopups, name, isSeen);
  }

  public async switchUser(user: FullUser, org?: string) {
--- a/app/client/models/UserPrefs.ts
+++ b/app/client/models/UserPrefs.ts
@@ -89,12 +89,16 @@ export const {getPrefsObs: getUserPrefsObs, getPrefObs: getUserPrefObs} = makePr
 // For preferences that store a list of items (such as seen docTours), this helper updates the
 // preference to add itemId to it (e.g. to avoid auto-starting the docTour again in the future).
 // prefKey is used only to log a more informative warning on error.
-export function markAsSeen<T>(seenIdsObs: Observable<T[] | undefined>, itemId: T) {
+export function markAsSeen<T>(seenIdsObs: Observable<T[] | undefined>, itemId: T, isSeen = true) {
  const seenIds = seenIdsObs.get() || [];
  try {
    if (!seenIds.includes(itemId)) {
      const seen = new Set(seenIds);
-      seen.add(itemId);
+      if (isSeen) {
+        seen.add(itemId);
+      } else {
+        seen.delete(itemId);
+      }
      seenIdsObs.set([...seen].sort());
    }
  } catch (e) {
@@ -104,17 +108,3 @@ export function markAsSeen<T>(seenIdsObs: Observable<T[] | undefined>, itemId: T
    console.warn("Failed to save preference in markAsSeen", e);
  }
 }
-
-export function markAsUnSeen<T>(seenIdsObs: Observable<T[] | undefined>, itemId: T) {
-  const seenIds = seenIdsObs.get() || [];
-  try {
-    if (seenIds.includes(itemId)) {
-      const seen = new Set(seenIds);
-      seen.delete(itemId);
-      seenIdsObs.set([...seen].sort());
-    }
-  } catch (e) {
-    // tslint:disable-next-line:no-console
-    console.warn("Failed to save preference in markAsUnSeen", e);
-  }
-}
--- a/app/client/models/gristUrlState.ts
+++ b/app/client/models/gristUrlState.ts
@@ -171,7 +171,7 @@ export class UrlStateImpl {
  public updateState(prevState: IGristUrlState, newState: IGristUrlState): IGristUrlState {
    const keepState = (newState.org || newState.ws || newState.homePage || newState.doc || isEmpty(newState) ||
                       newState.account || newState.billing  || newState.activation || newState.welcome ||
-                       newState.supportGrist) ?
+                       newState.adminPanel) ?
      (prevState.org ? {org: prevState.org} : {}) :
      prevState;
    return {...keepState, ...newState};
@@ -205,10 +205,10 @@ export class UrlStateImpl {
    const signupReload = [prevState.login, newState.login].includes('signup')
      && prevState.login !== newState.login;
    // Reload when moving to/from the support Grist page.
-    const supportGristReload = Boolean(prevState.supportGrist) !== Boolean(newState.supportGrist);
+    const adminPanelReload = Boolean(prevState.adminPanel) !== Boolean(newState.adminPanel);
    return Boolean(orgReload || accountReload || billingReload || activationReload ||
      gristConfig.errPage || docReload || welcomeReload || linkKeysReload || signupReload ||
-      supportGristReload);
+      adminPanelReload);
  }

  /**
--- a/app/client/ui/AccountWidget.ts
+++ b/app/client/ui/AccountWidget.ts
@@ -1,6 +1,7 @@
 import {AppModel} from 'app/client/models/AppModel';
 import {DocPageModel} from 'app/client/models/DocPageModel';
 import {getLoginOrSignupUrl, getLoginUrl, getLogoutUrl, getSignupUrl, urlState} from 'app/client/models/gristUrlState';
+import {getAdminPanelName} from 'app/client/ui/AdminPanel';
 import {manageTeamUsers} from 'app/client/ui/OpenUserManager';
 import {createUserImage} from 'app/client/ui/UserImage';
 import * as viewport from 'app/client/ui/viewport';
@@ -146,8 +147,8 @@ export class AccountWidget extends Disposable {

      this._maybeBuildBillingPageMenuItem(),
      this._maybeBuildActivationPageMenuItem(),
-      this._maybeBuildSupportGristPageMenuItem(),
-
+      this._maybeBuildAdminPanelMenuItem(),
+      this._maybeBuildSupportGristButton(),
      mobileModeToggle,

      // TODO Add section ("Here right now") listing icons of other users currently on this doc.
@@ -209,26 +210,34 @@ export class AccountWidget extends Disposable {
  }

  private _maybeBuildActivationPageMenuItem() {
-    const {activation, deploymentType} = getGristConfig();
-    if (deploymentType !== 'enterprise' || !activation?.isManager) {
+    const {deploymentType} = getGristConfig();
+    if (deploymentType !== 'enterprise' || !this._appModel.isInstallAdmin()) {
      return null;
    }

    return menuItemLink(t('Activation'), urlState().setLinkUrl({activation: 'activation'}));
  }

-  private _maybeBuildSupportGristPageMenuItem() {
-    const {deploymentType} = getGristConfig();
-    if (deploymentType !== 'core') {
-      return null;
+  private _maybeBuildAdminPanelMenuItem() {
+    // Only show Admin Panel item to the installation admins.
+    if (this._appModel.currentUser?.isInstallAdmin) {
+      return menuItemLink(
+        getAdminPanelName(),
+        urlState().setLinkUrl({adminPanel: 'admin'}),
+        testId('usermenu-admin-panel'),
+      );
    }
+  }

-    return menuItemLink(
-      t('Support Grist'),
-      cssHeartIcon('💛'),
-      urlState().setLinkUrl({supportGrist: 'support'}),
-      testId('usermenu-support-grist'),
-    );
+  private _maybeBuildSupportGristButton() {
+    const {deploymentType} = getGristConfig();
+    const isEnabled = (deploymentType === 'core') && isFeatureEnabled("supportGrist");
+    if (isEnabled) {
+      return menuItemLink(t('Support Grist'), ' 💛',
+        {href: commonUrls.githubSponsorGristLabs, target: '_blank'},
+        testId('usermenu-support-grist'),
+      );
+    }
  }
 }

@@ -245,10 +254,6 @@ export const cssUserIcon = styled('div', `
  cursor: pointer;
 `);

-const cssHeartIcon = styled('span', `
-  margin-left: 8px;
-`);
-
 const cssUserInfo = styled('div', `
  padding: 12px 24px 12px 16px;
  min-width: 200px;
--- a/app/client/ui/AdminPanel.ts
+++ b/app/client/ui/AdminPanel.ts
@@ -0,0 +1,270 @@
+import {getPageTitleSuffix} from 'app/common/gristUrls';
+import {getGristConfig} from 'app/common/urlUtils';
+import * as version from 'app/common/version';
+import {buildHomeBanners} from 'app/client/components/Banners';
+import {makeT} from 'app/client/lib/localization';
+import {AppModel} from 'app/client/models/AppModel';
+import {urlState} from 'app/client/models/gristUrlState';
+import {AppHeader} from 'app/client/ui/AppHeader';
+import {leftPanelBasic} from 'app/client/ui/LeftPanelCommon';
+import {pagePanels} from 'app/client/ui/PagePanels';
+import {SupportGristPage} from 'app/client/ui/SupportGristPage';
+import {createTopBarHome} from 'app/client/ui/TopBar';
+import {transition} from 'app/client/ui/transitions';
+import {cssBreadcrumbs, separator} from 'app/client/ui2018/breadcrumbs';
+import {mediaSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
+import {icon} from 'app/client/ui2018/icons';
+import {cssLink} from 'app/client/ui2018/links';
+import {Disposable, dom, DomContents, IDisposableOwner, Observable, styled} from 'grainjs';
+
+const t = makeT('AdminPanel');
+
+// Translated "Admin Panel" name, made available to other modules.
+export function getAdminPanelName() {
+  return t("Admin Panel");
+}
+
+export class AdminPanel extends Disposable {
+  private _supportGrist = SupportGristPage.create(this, this._appModel);
+
+  constructor(private _appModel: AppModel) {
+    super();
+    document.title = getAdminPanelName() + getPageTitleSuffix(getGristConfig());
+  }
+
+  public buildDom() {
+    const panelOpen = Observable.create(this, false);
+    return pagePanels({
+      leftPanel: {
+        panelWidth: Observable.create(this, 240),
+        panelOpen,
+        hideOpener: true,
+        header: dom.create(AppHeader, this._appModel),
+        content: leftPanelBasic(this._appModel, panelOpen),
+      },
+      headerMain: this._buildMainHeader(),
+      contentTop: buildHomeBanners(this._appModel),
+      contentMain: dom.create(this._buildMainContent.bind(this)),
+    });
+  }
+
+  private _buildMainHeader() {
+    return dom.frag(
+      cssBreadcrumbs({style: 'margin-left: 16px;'},
+        cssLink(
+          urlState().setLinkUrl({}),
+          t('Home'),
+        ),
+        separator(' / '),
+        dom('span', getAdminPanelName()),
+      ),
+      createTopBarHome(this._appModel),
+    );
+  }
+
+  private _buildMainContent(owner: IDisposableOwner) {
+    return cssPageContainer(
+      dom.cls('clipboard'),
+      {tabIndex: "-1"},
+      cssSection(
+        cssSectionTitle(t('Support Grist')),
+        this._buildItem(owner, {
+          id: 'telemetry',
+          name: t('Telemetry'),
+          description: t('Help us make Grist better'),
+          value: maybeSwitchToggle(this._supportGrist.getTelemetryOptInObservable()),
+          expandedContent: this._supportGrist.buildTelemetrySection(),
+        }),
+        this._buildItem(owner, {
+          id: 'sponsor',
+          name: t('Sponsor'),
+          description: t('Support Grist Labs on GitHub'),
+          value: this._supportGrist.buildSponsorshipSmallButton(),
+          expandedContent: this._supportGrist.buildSponsorshipSection(),
+        }),
+      ),
+      cssSection(
+        cssSectionTitle(t('Version')),
+        this._buildItem(owner, {
+          id: 'version',
+          name: t('Current'),
+          description: t('Current version of Grist'),
+          value: cssValueLabel(`Version ${version.version}`),
+        }),
+      ),
+      testId('admin-panel'),
+    );
+  }
+
+  private _buildItem(owner: IDisposableOwner, options: {
+    id: string,
+    name: DomContents,
+    description: DomContents,
+    value: DomContents,
+    expandedContent?: DomContents,
+  }) {
+    const itemContent = [
+      cssItemName(options.name, testId(`admin-panel-item-name-${options.id}`)),
+      cssItemDescription(options.description),
+      cssItemValue(options.value,
+        testId(`admin-panel-item-value-${options.id}`),
+        dom.on('click', ev => ev.stopPropagation())),
+    ];
+    if (options.expandedContent) {
+      const isCollapsed = Observable.create(owner, true);
+      return cssItem(
+        cssItemShort(
+          dom.domComputed(isCollapsed, (c) => cssCollapseIcon(c ? 'Expand' : 'Collapse')),
+          itemContent,
+          cssItemShort.cls('-expandable'),
+          dom.on('click', () => isCollapsed.set(!isCollapsed.get())),
+        ),
+        cssExpandedContentWrap(
+          transition(isCollapsed, {
+            prepare(elem, close) { elem.style.maxHeight = close ? elem.scrollHeight + 'px' : '0'; },
+            run(elem, close) { elem.style.maxHeight = close ? '0' : elem.scrollHeight + 'px'; },
+            finish(elem, close) { elem.style.maxHeight = close ? '0' : 'unset'; },
+          }),
+          cssExpandedContent(
+            options.expandedContent,
+          ),
+        ),
+        testId(`admin-panel-item-${options.id}`),
+      );
+    } else {
+      return cssItem(
+        cssItemShort(itemContent),
+        testId(`admin-panel-item-${options.id}`),
+      );
+    }
+  }
+}
+
+function maybeSwitchToggle(value: Observable<boolean|null>): DomContents {
+  return dom('div.widget_switch',
+    (elem) => elem.style.setProperty('--grist-actual-cell-color', theme.controlFg.toString()),
+    dom.hide((use) => use(value) === null),
+    dom.cls('switch_on', (use) => use(value) || false),
+    dom.cls('switch_transition', true),
+    dom.on('click', () => value.set(!value.get())),
+    dom('div.switch_slider'),
+    dom('div.switch_circle'),
+  );
+}
+
+const cssPageContainer = styled('div', `
+  overflow: auto;
+  padding: 40px;
+  font-size: ${vars.introFontSize};
+  color: ${theme.text};
+
+  @media ${mediaSmall} {
+    & {
+      padding: 0px;
+      font-size: ${vars.mediumFontSize};
+    }
+  }
+`);
+
+const cssSection = styled('div', `
+  padding: 24px;
+  max-width: 600px;
+  width: 100%;
+  margin: 16px auto;
+  border: 1px solid ${theme.widgetBorder};
+  border-radius: 4px;
+
+  @media ${mediaSmall} {
+    & {
+      width: auto;
+      padding: 12px;
+      margin: 8px;
+    }
+  }
+`);
+
+const cssSectionTitle = styled('div', `
+  height: 32px;
+  line-height: 32px;
+  margin-bottom: 16px;
+  font-size: ${vars.headerControlFontSize};
+  font-weight: ${vars.headerControlTextWeight};
+`);
+
+const cssItem = styled('div', `
+  margin-top: 8px;
+`);
+
+const cssItemShort = styled('div', `
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  padding: 8px;
+  margin: 0 -8px;
+  border-radius: 4px;
+  &-expandable {
+    cursor: pointer;
+  }
+  &-expandable:hover {
+    background-color: ${theme.lightHover};
+  }
+`);
+
+const cssItemName = styled('div', `
+  width: 112px;
+  font-weight: bold;
+  font-size: ${vars.largeFontSize};
+  &:first-child {
+    margin-left: 28px;
+  }
+  @media ${mediaSmall} {
+    & {
+      width: calc(100% - 28px);
+    }
+    &:first-child {
+      margin-left: 0;
+    }
+  }
+`);
+
+const cssItemDescription = styled('div', `
+  margin-right: auto;
+`);
+
+const cssItemValue = styled('div', `
+  flex: none;
+  margin: -16px;
+  padding: 16px;
+  cursor: auto;
+`);
+
+const cssCollapseIcon = styled(icon, `
+  width: 24px;
+  height: 24px;
+  margin-right: 4px;
+  margin-left: -4px;
+  --icon-color: ${theme.lightText};
+`);
+
+const cssExpandedContentWrap = styled('div', `
+  transition: max-height 0.3s ease-in-out;
+  overflow: hidden;
+  max-height: 0;
+`);
+
+const cssExpandedContent = styled('div', `
+  margin-left: 24px;
+  padding: 24px 0;
+  border-bottom: 1px solid ${theme.widgetBorder};
+  .${cssItem.className}:last-child & {
+    padding-bottom: 0;
+    border-bottom: none;
+  }
+`);
+
+const cssValueLabel = styled('div', `
+  padding: 4px 8px;
+  color: ${theme.text};
+  border: 1px solid ${theme.inputBorder};
+  border-radius: ${vars.controlBorderRadius};
+`);
--- a/app/client/ui/AppHeader.ts
+++ b/app/client/ui/AppHeader.ts
@@ -167,8 +167,8 @@ export class AppHeader extends Disposable {
  }

  private _maybeBuildActivationPageMenuItem() {
-    const {activation, deploymentType} = getGristConfig();
-    if (deploymentType !== 'enterprise' || !activation?.isManager) {
+    const {deploymentType} = getGristConfig();
+    if (deploymentType !== 'enterprise' || !this._appModel.isInstallAdmin()) {
      return null;
    }

--- a/app/client/ui/AppUI.ts
+++ b/app/client/ui/AppUI.ts
@@ -1,7 +1,7 @@
 import {buildDocumentBanners, buildHomeBanners} from 'app/client/components/Banners';
 import {ViewAsBanner} from 'app/client/components/ViewAsBanner';
 import {domAsync} from 'app/client/lib/domAsync';
-import {loadAccountPage, loadActivationPage, loadBillingPage, loadSupportGristPage} from 'app/client/lib/imports';
+import {loadAccountPage, loadActivationPage, loadAdminPanel, loadBillingPage} from 'app/client/lib/imports';
 import {createSessionObs, isBoolean, isNumber} from 'app/client/lib/sessionObs';
 import {AppModel, TopAppModel} from 'app/client/models/AppModel';
 import {DocPageModelImpl} from 'app/client/models/DocPageModel';
@@ -81,8 +81,8 @@ function createMainPage(appModel: AppModel, appObj: App) {
      return dom.create(WelcomePage, appModel);
    } else if (pageType === 'account') {
      return domAsync(loadAccountPage().then(ap => dom.create(ap.AccountPage, appModel)));
-    } else if (pageType === 'support') {
-      return domAsync(loadSupportGristPage().then(sgp => dom.create(sgp.SupportGristPage, appModel)));
+    } else if (pageType === 'admin') {
+      return domAsync(loadAdminPanel().then(m => dom.create(m.AdminPanel, appModel)));
    } else if (pageType === 'activation') {
      return domAsync(loadActivationPage().then(ap => dom.create(ap.ActivationPage, appModel)));
    } else {
--- a/app/client/ui/DocMenu.ts
+++ b/app/client/ui/DocMenu.ts
@@ -180,7 +180,7 @@ function createLoadedDocMenu(owner: IDisposableOwner, home: HomeModel) {
        // manage card popups will be needed if more are added later.
        return [
          upgradeButton.showUpgradeCard(css.upgradeCard.cls('')),
-          home.app.supportGristNudge.showCard(),
+          home.app.supportGristNudge.buildNudgeCard(),
        ];
      }),
  ));
--- a/app/client/ui/HomeLeftPane.ts
+++ b/app/client/ui/HomeLeftPane.ts
@@ -5,6 +5,7 @@ import {reportError} from 'app/client/models/AppModel';
 import {docUrl, urlState} from 'app/client/models/gristUrlState';
 import {HomeModel} from 'app/client/models/HomeModel';
 import {getWorkspaceInfo, workspaceName} from 'app/client/models/WorkspaceInfo';
+import {getAdminPanelName} from 'app/client/ui/AdminPanel';
 import {addNewButton, cssAddNewButton} from 'app/client/ui/AddNewButton';
 import {docImport, importFromPlugin} from 'app/client/ui/HomeImports';
 import {
@@ -136,6 +137,14 @@ export function createHomeLeftPane(leftPanelOpen: Observable<boolean>, home: Hom
          ),
        ),
        createVideoTourToolsButton(),
+        (home.app.isInstallAdmin() ?
+          cssPageEntry(
+            cssPageLink(cssPageIcon('Settings'), cssLinkText(getAdminPanelName()),
+              urlState().setLinkUrl({adminPanel: "admin"}),
+              testId('dm-admin-panel'),
+            ),
+          ) : null
+        ),
        createHelpTools(home.app),
      )
    )
--- a/app/client/ui/SupportGristNudge.ts
+++ b/app/client/ui/SupportGristNudge.ts
@@ -5,15 +5,13 @@ import {tokenFieldStyles} from 'app/client/lib/TokenField';
 import {AppModel} from 'app/client/models/AppModel';
 import {urlState} from 'app/client/models/gristUrlState';
 import {TelemetryModel, TelemetryModelImpl} from 'app/client/models/TelemetryModel';
-import {bigPrimaryButton} from 'app/client/ui2018/buttons';
-import {colors, isNarrowScreenObs, theme, vars} from 'app/client/ui2018/cssVars';
+import {basicButton, basicButtonLink, bigPrimaryButton} from 'app/client/ui2018/buttons';
+import {colors, isNarrowScreenObs, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
-import {commonUrls} from 'app/common/gristUrls';
+import {commonUrls, isFeatureEnabled} from 'app/common/gristUrls';
 import {getGristConfig} from 'app/common/urlUtils';
-import {Disposable, dom, makeTestId, Observable, styled} from 'grainjs';
-
-const testId = makeTestId('test-support-grist-nudge-');
+import {Computed, Disposable, dom, DomContents, Observable, styled, UseCB} from 'grainjs';

 const t = makeT('SupportGristNudge');

@@ -21,115 +19,93 @@ type ButtonState =
  | 'collapsed'
  | 'expanded';

-type CardPage =
-  | 'support'
-  | 'opted-in';
-
 /**
- * Nudges users to support Grist by opting in to telemetry.
+ * Nudges users to support Grist by opting in to telemetry or sponsoring on Github.
 *
- * This currently includes a button that opens a card with the nudge.
- * The button is hidden when the card is visible, and vice versa.
+ * For installation admins, this includes a card with a nudge which collapses into a "Support
+ * Grist" button in the top bar. When that's not applicable, it is only a "Support Grist" button
+ * that links to the Github sponsorship page.
+ *
+ * Users can dismiss these nudges.
 */
 export class SupportGristNudge extends Disposable {
-  private readonly _telemetryModel: TelemetryModel = new TelemetryModelImpl(this._appModel);
+  private readonly _telemetryModel: TelemetryModel = TelemetryModelImpl.create(this, this._appModel);

-  private readonly _buttonState: Observable<ButtonState>;
-  private readonly _currentPage: Observable<CardPage>;
-  private readonly _isClosed: Observable<boolean>;
+  private readonly _buttonStateKey = `u=${this._appModel.currentValidUser?.id ?? 0};supportGristNudge`;
+  private _buttonState = localStorageObs(this._buttonStateKey, 'expanded') as Observable<ButtonState>;
+
+  // Whether the nudge just got accepted, and we should temporarily show the "Thanks" version.
+  private _justAccepted = Observable.create(this, false);
+
+  private _showButton: Computed<null|'link'|'expand'>;
+  private _showNudge: Computed<null|'normal'|'accepted'>;

  constructor(private _appModel: AppModel) {
    super();
-    if (!this._shouldShowCardOrButton()) { return; }
+    const {deploymentType, telemetry} = getGristConfig();
+    const isEnabled = (deploymentType === 'core') && isFeatureEnabled("supportGrist");
+    const isAdmin = _appModel.isInstallAdmin();
+    const isTelemetryOn = (telemetry && telemetry.telemetryLevel !== 'off');
+    const isAdminNudgeApplicable = isAdmin && !isTelemetryOn;

-    this._buttonState = localStorageObs(
-      `u=${this._appModel.currentValidUser?.id ?? 0};supportGristNudge`, 'expanded'
-    ) as Observable<ButtonState>;
-    this._currentPage = Observable.create(null, 'support');
-    this._isClosed = Observable.create(this, false);
-  }
-
-  public showButton() {
-    if (!this._shouldShowCardOrButton()) { return null; }
-
-    return dom.maybe(
-      use => !use(isNarrowScreenObs()) && (use(this._buttonState) === 'collapsed' && !use(this._isClosed)),
-      () => this._buildButton()
+    const generallyHide = (use: UseCB) => (
+      !isEnabled ||
+      use(_appModel.dismissedPopups).includes('supportGrist') ||
+      use(isNarrowScreenObs())
    );
+
+    this._showButton = Computed.create(this, use => {
+      if (generallyHide(use)) { return null; }
+      if (!isAdminNudgeApplicable) { return 'link'; }
+      if (use(this._buttonState) !== 'expanded') { return 'expand'; }
+      return null;
+    });
+
+    this._showNudge = Computed.create(this, use => {
+      if (use(this._justAccepted)) { return 'accepted'; }
+      if (generallyHide(use)) { return null; }
+      if (isAdminNudgeApplicable && use(this._buttonState) === 'expanded') { return 'normal'; }
+      return null;
+    });
  }

-  public showCard() {
-    if (!this._shouldShowCardOrButton()) { return null; }
+  public buildTopBarButton(): DomContents {
+    return dom.domComputed(this._showButton, (which) => {
+      if (!which) { return null; }
+      const elemType = (which === 'link') ? basicButtonLink : basicButton;
+      return cssContributeButton(
+        elemType(cssHeartIcon('💛 '), t('Support Grist'),
+          (which === 'link' ?
+            {href: commonUrls.githubSponsorGristLabs, target: '_blank'} :
+            dom.on('click', () => this._buttonState.set('expanded'))
+          ),

-    return dom.maybe(
-      use => !use(isNarrowScreenObs()) && (use(this._buttonState) === 'expanded' && !use(this._isClosed)),
-      () => this._buildCard()
-    );
+          cssContributeButtonCloseButton(
+            icon('CrossSmall'),
+            dom.on('click', (ev) => {
+              ev.stopPropagation();
+              ev.preventDefault();
+              this._dismissAndClose();
+            }),
+            testId('support-grist-button-dismiss'),
+          ),
+          testId('support-grist-button'),
+        )
+      );
+    });
  }

-  private _markAsDismissed() {
-    this._appModel.dismissedPopup('supportGrist').set(true);
-    getStorage().removeItem(
-      `u=${this._appModel.currentValidUser?.id ?? 0};supportGristNudge`);
-
-  }
-
-  private _close() {
-    this._isClosed.set(true);
-  }
-
-  private _dismissAndClose() {
-    this._markAsDismissed();
-    this._close();
-  }
-
-  private _shouldShowCardOrButton() {
-    if (this._appModel.dismissedPopups.get().includes('supportGrist')) {
-      return false;
-    }
-
-    const {activation, deploymentType, telemetry} = getGristConfig();
-    if (deploymentType !== 'core' || !activation?.isManager) {
-      return false;
-    }
-
-    if (telemetry && telemetry.telemetryLevel !== 'off') {
-      return false;
-    }
-
-    return true;
-  }
-
-  private _buildButton() {
-    return cssContributeButton(
-      cssButtonIconAndText(
-        icon('Fireworks'),
-        t('Contribute'),
-      ),
-      cssContributeButtonCloseButton(
-        icon('CrossSmall'),
-        dom.on('click', (ev) => {
-          ev.stopPropagation();
-          this._dismissAndClose();
-        }),
-        testId('contribute-button-close'),
-      ),
-      dom.on('click', () => { this._buttonState.set('expanded'); }),
-      testId('contribute-button'),
-    );
-  }
-
-  private _buildCard() {
-    return cssCard(
-      dom.domComputed(this._currentPage, page => {
-        if (page === 'support') {
-          return this._buildSupportGristCardContent();
-        } else {
-          return this._buildOptedInCardContent();
-        }
-      }),
-      testId('card'),
-    );
+  public buildNudgeCard() {
+    return dom.domComputed(this._showNudge, nudge => {
+      if (!nudge) { return null; }
+      return cssCard(
+        (nudge === 'normal' ?
+          this._buildSupportGristCardContent() :
+          this._buildOptedInCardContent()
+        ),
+        testId('support-nudge'),
+      );
+    });
  }

  private _buildSupportGristCardContent() {
@@ -137,7 +113,7 @@ export class SupportGristNudge extends Disposable {
      cssCloseButton(
        icon('CrossBig'),
        dom.on('click', () => this._buttonState.set('collapsed')),
-        testId('card-close'),
+        testId('support-nudge-close'),
      ),
      cssLeftAlignedHeader(t('Support Grist')),
      cssParagraph(t(
@@ -150,14 +126,14 @@ export class SupportGristNudge extends Disposable {
          'document contents. Opt out any time from the {{supportGristLink}} in the user menu.',
          {
            helpCenterLink: helpCenterLink(),
-            supportGristLink: supportGristLink(),
+            supportGristLink: adminPanelLink(),
          },
        ),
      ),
      cssFullWidthButton(
        t('Opt in to Telemetry'),
        dom.on('click', () => this._optInToTelemetry()),
-        testId('card-opt-in'),
+        testId('support-nudge-opt-in'),
      ),
    ];
  }
@@ -166,8 +142,8 @@ export class SupportGristNudge extends Disposable {
    return [
      cssCloseButton(
        icon('CrossBig'),
-        dom.on('click', () => this._close()),
-        testId('card-close-icon-button'),
+        dom.on('click', () => this._justAccepted.set(false)),
+        testId('support-nudge-close'),
      ),
      cssCenteredFlex(cssSparks()),
      cssCenterAlignedHeader(t('Opted In')),
@@ -175,23 +151,34 @@ export class SupportGristNudge extends Disposable {
        t(
          'Thank you! Your trust and support is greatly appreciated. ' +
          'Opt out any time from the {{link}} in the user menu.',
-          {link: supportGristLink()},
+          {link: adminPanelLink()},
        ),
      ),
      cssCenteredFlex(
        cssPrimaryButton(
          t('Close'),
-          dom.on('click', () => this._close()),
-          testId('card-close-button'),
+          dom.on('click', () => this._justAccepted.set(false)),
+          testId('support-nudge-close-button'),
        ),
      ),
    ];
  }

+  private _markDismissed() {
+    this._appModel.dismissPopup('supportGrist', true);
+    // Also cleanup the no-longer-needed button state from localStorage.
+    getStorage().removeItem(this._buttonStateKey);
+  }
+
+  private _dismissAndClose() {
+    this._markDismissed();
+    this._justAccepted.set(false);
+  }
+
  private async _optInToTelemetry() {
    await this._telemetryModel.updateTelemetryPrefs({telemetryLevel: 'limited'});
-    this._currentPage.set('opted-in');
-    this._markAsDismissed();
+    this._markDismissed();
+    this._justAccepted.set(true);
  }
 }

@@ -202,10 +189,10 @@ function helpCenterLink() {
  );
 }

-function supportGristLink() {
+function adminPanelLink() {
  return cssLink(
-    t('Support Grist page'),
-    {href: urlState().makeUrl({supportGrist: 'support'}), target: '_blank'},
+    t('Admin Panel'),
+    {href: urlState().makeUrl({adminPanel: 'admin'}), target: '_blank'},
  );
 }

@@ -216,26 +203,8 @@ const cssCenteredFlex = styled('div', `
 `);

 const cssContributeButton = styled('div', `
-  position: relative;
-  background: ${theme.controlPrimaryBg};
-  color: ${theme.controlPrimaryFg};
-  border-radius: 25px;
-  padding: 4px 12px 4px 8px;
-  font-style: normal;
-  font-weight: medium;
-  font-size: 13px;
-  line-height: 16px;
-  cursor: pointer;
-  --icon-color: ${theme.controlPrimaryFg};
-
-  &:hover {
-    background: ${theme.controlPrimaryHoverBg};
-  }
-`);
-
-const cssButtonIconAndText = styled('div', `
-  display: flex;
-  gap: 8px;
+  margin-left: 8px;
+  margin-right: 8px;
 `);

 const cssContributeButtonCloseButton = styled(tokenFieldStyles.cssDeleteButton, `
@@ -254,10 +223,14 @@ const cssContributeButtonCloseButton = styled(tokenFieldStyles.cssDeleteButton,
  display: none;
  align-items: center;
  justify-content: center;
+  --icon-color: ${colors.light};

  .${cssContributeButton.className}:hover & {
    display: flex;
  }
+  &:hover {
+    --icon-color: ${colors.lightGreen};
+  }
 `);

 const cssCard = styled('div', `
@@ -325,3 +298,8 @@ const cssSparks = styled('div', `
  display: inline-block;
  background-repeat: no-repeat;
 `);
+
+// This is just to avoid the emoji pushing the button to be taller.
+const cssHeartIcon = styled('span', `
+  line-height: 1;
+`);
--- a/app/client/ui/SupportGristPage.ts
+++ b/app/client/ui/SupportGristPage.ts
@@ -1,29 +1,20 @@
-import {buildHomeBanners} from 'app/client/components/Banners';
 import {makeT} from 'app/client/lib/localization';
 import {AppModel} from 'app/client/models/AppModel';
-import {urlState} from 'app/client/models/gristUrlState';
 import {TelemetryModel, TelemetryModelImpl} from 'app/client/models/TelemetryModel';
-import {AppHeader} from 'app/client/ui/AppHeader';
-import {leftPanelBasic} from 'app/client/ui/LeftPanelCommon';
-import {pagePanels} from 'app/client/ui/PagePanels';
-import {createTopBarHome} from 'app/client/ui/TopBar';
-import {cssBreadcrumbs, separator} from 'app/client/ui2018/breadcrumbs';
-import {bigBasicButton, bigBasicButtonLink, bigPrimaryButton} from 'app/client/ui2018/buttons';
-import {mediaSmall, theme, vars} from 'app/client/ui2018/cssVars';
+import {basicButtonLink, bigBasicButton, bigBasicButtonLink, bigPrimaryButton} from 'app/client/ui2018/buttons';
+import {theme} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {cssLink} from 'app/client/ui2018/links';
 import {loadingSpinner} from 'app/client/ui2018/loaders';
-import {commonUrls, getPageTitleSuffix} from 'app/common/gristUrls';
+import {commonUrls} from 'app/common/gristUrls';
 import {TelemetryPrefsWithSources} from 'app/common/InstallAPI';
-import {getGristConfig} from 'app/common/urlUtils';
-import {Computed, Disposable, dom, makeTestId, Observable, styled, subscribe} from 'grainjs';
+import {Computed, Disposable, dom, makeTestId, styled} from 'grainjs';

 const testId = makeTestId('test-support-grist-page-');

 const t = makeT('SupportGristPage');

 export class SupportGristPage extends Disposable {
-  private readonly _currentPage = Computed.create(this, urlState().state, (_use, s) => s.supportGrist);
  private readonly _model: TelemetryModel = new TelemetryModelImpl(this._appModel);
  private readonly _optInToTelemetry = Computed.create(this, this._model.prefs,
    (_use, prefs) => {
@@ -38,62 +29,19 @@ export class SupportGristPage extends Disposable {

  constructor(private _appModel: AppModel) {
    super();
-    this._setPageTitle();
    this._model.fetchTelemetryPrefs().catch(reportError);
  }

-  public buildDom() {
-    const panelOpen = Observable.create(this, false);
-    return pagePanels({
-      leftPanel: {
-        panelWidth: Observable.create(this, 240),
-        panelOpen,
-        hideOpener: true,
-        header: dom.create(AppHeader, this._appModel),
-        content: leftPanelBasic(this._appModel, panelOpen),
-      },
-      headerMain: this._buildMainHeader(),
-      contentTop: buildHomeBanners(this._appModel),
-      contentMain: this._buildMainContent(),
-    });
-  }
-
-  private _buildMainHeader() {
-    return dom.frag(
-      cssBreadcrumbs({style: 'margin-left: 16px;'},
-        cssLink(
-          urlState().setLinkUrl({}),
-          t('Home'),
-        ),
-        separator(' / '),
-        dom('span', t('Support Grist')),
-      ),
-      createTopBarHome(this._appModel),
-    );
-  }
-
-  private _buildMainContent() {
-    return cssPageContainer(
-      cssPage(
-        dom('div',
-          cssPageTitle(t('Support Grist')),
-          this._buildTelemetrySection(),
-          this._buildSponsorshipSection(),
-        ),
-      ),
-    );
-  }
-
-  private _buildTelemetrySection() {
+  public buildTelemetrySection() {
    return cssSection(
-      cssSectionTitle(t('Telemetry')),
      dom.domComputed(this._model.prefs, prefs => {
        if (prefs === null) {
          return cssSpinnerBox(loadingSpinner());
        }

-        const {activation} = getGristConfig();
-        if (!activation?.isManager) {
+        if (!this._appModel.isInstallAdmin()) {
+          // TODO: We are no longer serving this page to non-admin users, so this branch should no
+          // longer match, and this version perhaps should be removed.
          if (prefs.telemetryLevel.value === 'limited') {
            return [
              cssParagraph(t(
@@ -127,7 +75,9 @@ export class SupportGristPage extends Disposable {
    );
  }

-  private _buildTelemetrySectionButtons(prefs: TelemetryPrefsWithSources) {
+  public getTelemetryOptInObservable() { return this._optInToTelemetry; }
+
+  public _buildTelemetrySectionButtons(prefs: TelemetryPrefsWithSources) {
    const {telemetryLevel: {value, source}} = prefs;
    if (source === 'preferences') {
      return dom.domComputed(this._optInToTelemetry, (optedIn) => {
@@ -159,9 +109,8 @@ export class SupportGristPage extends Disposable {
    }
  }

-  private _buildSponsorshipSection() {
+  public buildSponsorshipSection() {
    return cssSection(
-      cssSectionTitle(t('Sponsor Grist Labs on GitHub')),
      cssParagraph(
        t(
          'Grist software is developed by Grist Labs, which offers free and paid ' +
@@ -189,16 +138,9 @@ export class SupportGristPage extends Disposable {
    );
  }

-  private _setPageTitle() {
-    this.autoDispose(subscribe(this._currentPage, (_use, page): string => {
-      const suffix = getPageTitleSuffix(getGristConfig());
-      switch (page) {
-        case undefined:
-        case 'support': {
-          return document.title = `Support Grist${suffix}`;
-        }
-      }
-    }));
+  public buildSponsorshipSmallButton() {
+    return basicButtonLink('💛 ', t('Sponsor'),
+      {href: commonUrls.githubSponsorGristLabs, target: '_blank'});
  }
 }

@@ -223,44 +165,7 @@ function gristCoreLink() {
  );
 }

-const cssPageContainer = styled('div', `
-  overflow: auto;
-  padding: 64px 80px;
-
-  @media ${mediaSmall} {
-    & {
-      padding: 0px;
-    }
-  }
-`);
-
-const cssPage = styled('div', `
-  padding: 16px;
-  max-width: 600px;
-  width: 100%;
-`);
-
-const cssPageTitle = styled('div', `
-  height: 32px;
-  line-height: 32px;
-  margin-bottom: 24px;
-  color: ${theme.text};
-  font-size: 24px;
-  font-weight: ${vars.headerControlTextWeight};
-`);
-
-const cssSectionTitle = styled('div', `
-  height: 24px;
-  line-height: 24px;
-  margin-bottom: 24px;
-  color: ${theme.text};
-  font-size: ${vars.xlargeFontSize};
-  font-weight: ${vars.headerControlTextWeight};
-`);
-
-const cssSection = styled('div', `
-  margin-bottom: 60px;
-`);
+const cssSection = styled('div', ``);

 const cssParagraph = styled('div', `
  color: ${theme.text};
--- a/app/client/ui/TopBar.ts
+++ b/app/client/ui/TopBar.ts
@@ -28,7 +28,6 @@ export function createTopBarHome(appModel: AppModel) {

  return [
    cssFlexSpace(),
-    appModel.supportGristNudge.showButton(),
    (appModel.isTeamSite && roles.canEditAccess(appModel.currentOrg?.access || null) ?
      [
        basicButton(
@@ -41,6 +40,8 @@ export function createTopBarHome(appModel: AppModel) {
      null
    ),

+    appModel.supportGristNudge.buildTopBarButton(),
+
    buildLanguageMenu(appModel),
    isAnonymous ? null : buildNotifyMenuButton(appModel.notifier, appModel),
    dom('div', dom.create(AccountWidget, appModel)),
--- a/app/client/ui/TutorialCard.ts
+++ b/app/client/ui/TutorialCard.ts
@@ -15,13 +15,11 @@ export function buildTutorialCard(owner: IDisposableOwner, options: Options) {
  if (!isFeatureEnabled('tutorials')) { return null; }

  const {app} = options;
-  const dismissed = app.dismissedPopup('tutorialFirstCard');
-  owner.autoDispose(dismissed);
  function onClose() {
-    dismissed.set(true);
+    app.dismissPopup('tutorialFirstCard', true);
  }
  const visible = Computed.create(owner, (use) =>
-       !use(dismissed)
+       !use(app.dismissedPopups).includes('tutorialFirstCard')
    && !use(isNarrowScreenObs())
  );
  return dom.maybe(visible, () => {
--- a/app/common/UserAPI.ts
+++ b/app/common/UserAPI.ts
@@ -243,8 +243,13 @@ export function getUserRoleText(user: UserAccessData) {
  return roleNames[user.access!] || user.access || 'no access';
 }

+export interface ExtendedUser extends FullUser {
+  helpScoutSignature?: string;
+  isInstallAdmin?: boolean;     // Set if user is allowed to manage this installation.
+}
+
 export interface ActiveSessionInfo {
-  user: FullUser & {helpScoutSignature?: string};
+  user: ExtendedUser;
  org: Organization|null;
  orgError?: OrgError;
 }
--- a/app/common/gristUrls.ts
+++ b/app/common/gristUrls.ts
@@ -44,8 +44,8 @@ export type ActivationPage = typeof ActivationPage.type;
 export const LoginPage = StringUnion('signup', 'login', 'verified', 'forgot-password');
 export type LoginPage = typeof LoginPage.type;

-export const SupportGristPage = StringUnion('support');
-export type SupportGristPage = typeof SupportGristPage.type;
+export const AdminPanelPage = StringUnion('admin');
+export type AdminPanelPage = typeof AdminPanelPage.type;

 // Overall UI style.  "full" is normal, "singlePage" is a single page focused, panels hidden experience.
 export const InterfaceStyle = StringUnion('singlePage', 'full');
@@ -124,7 +124,7 @@ export interface IGristUrlState {
  activation?: ActivationPage;
  login?: LoginPage;
  welcome?: WelcomePage;
-  supportGrist?: SupportGristPage;
+  adminPanel?: AdminPanelPage;
  welcomeTour?: boolean;
  docTour?: boolean;
  manageUsers?: boolean;
@@ -309,7 +309,7 @@ export function encodeUrl(gristConfig: Partial<GristLoadConfig>,
    parts.push(`welcome/${state.welcome}`);
  }

-  if (state.supportGrist) { parts.push(state.supportGrist); }
+  if (state.adminPanel) { parts.push(state.adminPanel); }

  const queryParams = pickBy(state.params, (v, k) => k !== 'linkParameters') as {[key: string]: string};
  for (const [k, v] of Object.entries(state.params?.linkParameters || {})) {
@@ -415,7 +415,7 @@ export function decodeUrl(gristConfig: Partial<GristLoadConfig>, location: Locat
  // the minimum length of a urlId prefix is longer than the maximum length
  // of any of the valid keys in the url.
  for (const key of map.keys()) {
-    if (key.length >= MIN_URLID_PREFIX_LENGTH && !LoginPage.guard(key) && !SupportGristPage.guard(key)) {
+    if (key.length >= MIN_URLID_PREFIX_LENGTH && !LoginPage.guard(key)) {
      map.set('doc', key);
      map.set('slug', map.get(key)!);
      map.delete(key);
@@ -453,9 +453,7 @@ export function decodeUrl(gristConfig: Partial<GristLoadConfig>, location: Locat
    state.activation = ActivationPage.parse(map.get('activation')) || 'activation';
  }
  if (map.has('welcome')) { state.welcome = WelcomePage.parse(map.get('welcome')); }
-  if (map.has('support')) {
-    state.supportGrist = SupportGristPage.parse(map.get('support')) || 'support';
-  }
+  if (map.has('admin')) { state.adminPanel = AdminPanelPage.parse(map.get('admin')) || 'admin'; }
  if (sp.has('planType')) { state.params!.planType = sp.get('planType')!; }
  if (sp.has('billingPlan')) { state.params!.billingPlan = sp.get('billingPlan')!; }
  if (sp.has('billingTask')) {
@@ -740,7 +738,7 @@ export interface GristLoadConfig {
  // Google Tag Manager id. Currently only used to load tag manager for reporting new sign-ups.
  tagManagerId?: string;

-  activation?: Activation;
+  activation?: ActivationState;

  // List of enabled features.
  features?: IFeature[];
@@ -799,6 +797,7 @@ export const Features = StringUnion(
  "multiAccounts",
  "sendToDrive",
  "tutorials",
+  "supportGrist",
 );
 export type IFeature = typeof Features.type;

@@ -834,10 +833,6 @@ export interface ActivationState {
  }
 }

-export interface Activation extends ActivationState {
-  isManager: boolean;
-}
-
 // Acceptable org subdomains are alphanumeric (hyphen also allowed) and of
 // non-zero length.
 const subdomainRegex = /^[-a-z0-9]+$/i;
--- a/app/gen-server/ApiServer.ts
+++ b/app/gen-server/ApiServer.ts
@@ -527,7 +527,10 @@ export class ApiServer {
      )) : null;
      const orgError = (org && org.errMessage) ? {error: org.errMessage, status: org.status} : undefined;
      return sendOkReply(req, res, {
-        user: {...fullUser, helpScoutSignature: helpScoutSign(fullUser.email)},
+        user: {...fullUser,
+          helpScoutSignature: helpScoutSign(fullUser.email),
+          isInstallAdmin: await this._gristServer.getInstallAdmin().isAdminReq(req) || undefined,
+        },
        org: (org && org.data) || null,
        orgError
      });
--- a/app/server/lib/FlexServer.ts
+++ b/app/server/lib/FlexServer.ts
@@ -48,6 +48,7 @@ import {HostedStorageManager} from 'app/server/lib/HostedStorageManager';
 import {IBilling} from 'app/server/lib/IBilling';
 import {IDocStorageManager} from 'app/server/lib/IDocStorageManager';
 import {INotifier} from 'app/server/lib/INotifier';
+import {InstallAdmin} from 'app/server/lib/InstallAdmin';
 import log from 'app/server/lib/log';
 import {getLoginSystem} from 'app/server/lib/logins';
 import {IPermitStore} from 'app/server/lib/Permit';
@@ -55,7 +56,7 @@ import {getAppPathTo, getAppRoot, getUnpackedAppRoot} from 'app/server/lib/place
 import {addPluginEndpoints, limitToPlugins} from 'app/server/lib/PluginEndpoint';
 import {PluginManager} from 'app/server/lib/PluginManager';
 import * as ProcessMonitor from 'app/server/lib/ProcessMonitor';
-import {adaptServerUrl, getOrgUrl, getOriginUrl, getScope, integerParam, isDefaultUser, isParameterOn, optIntegerParam,
+import {adaptServerUrl, getOrgUrl, getOriginUrl, getScope, integerParam, isParameterOn, optIntegerParam,
        optStringParam, RequestWithGristInfo, sendOkReply, stringArrayParam, stringParam, TEST_HTTPS_OFFSET,
        trustOrigin} from 'app/server/lib/requestUtils';
 import {ISendAppPageOptions, makeGristConfig, makeMessagePage, makeSendAppPage} from 'app/server/lib/sendAppPage';
@@ -133,6 +134,7 @@ export class FlexServer implements GristServer {
  private _servesPlugins?: boolean;
  private _bundledWidgets?: ICustomWidget[];
  private _billing: IBilling;
+  private _installAdmin: InstallAdmin;
  private _instanceRoot: string;
  private _docManager: DocManager;
  private _docWorker: DocWorker;
@@ -390,6 +392,11 @@ export class FlexServer implements GristServer {
    return this._notifier;
  }

+  public getInstallAdmin(): InstallAdmin {
+    if (!this._installAdmin) { throw new Error('no InstallAdmin available'); }
+    return this._installAdmin;
+  }
+
  public getAccessTokens() {
    if (this._accessTokens) { return this._accessTokens; }
    this.addDocWorkerMap();
@@ -725,6 +732,7 @@ export class FlexServer implements GristServer {
    // If the installation appears to be new, give it an id and a creation date.
    this._activations = new Activations(this._dbManager);
    await this._activations.current();
+    this._installAdmin = await this.create.createInstallAdmin(this._dbManager);
  }

  public addDocWorkerMap() {
@@ -864,11 +872,6 @@ export class FlexServer implements GristServer {

    this._telemetry = this.create.Telemetry(this._dbManager, this);
    this._telemetry.addEndpoints(this.app);
-    this._telemetry.addPages(this.app, [
-      this._redirectToHostMiddleware,
-      this._userIdMiddleware,
-      this._redirectToLoginWithoutExceptionsMiddleware,
-    ]);
    await this._telemetry.start();

    // Start up a monitor for memory and cpu usage.
@@ -1787,15 +1790,23 @@ export class FlexServer implements GristServer {
  public addInstallEndpoints() {
    if (this._check('install')) { return; }

-    const isManager = expressWrap(
-      (req: express.Request, _res: express.Response, next: express.NextFunction) => {
-        if (!isDefaultUser(req)) { throw new ApiError('Access denied', 403); }
+    const requireInstallAdmin = this.getInstallAdmin().getMiddlewareRequireAdmin();

-        next();
-      }
-    );
+    const adminPageMiddleware = [
+      this._redirectToHostMiddleware,
+      this._userIdMiddleware,
+      this._redirectToLoginWithoutExceptionsMiddleware,
+      // In principle, it may be safe to show the Admin Panel to non-admins but let's protect it
+      // since it's intended for admins, and it's easier not to have to worry how it should behave
+      // for others.
+      requireInstallAdmin,
+    ];
+    this.app.get('/admin', ...adminPageMiddleware, expressWrap(async (req, resp) => {
+      return this.sendAppPage(req, resp, {path: 'app.html', status: 200, config: {}});
+    }));

-    this.app.get('/api/install/prefs', expressWrap(async (_req, resp) => {
+    // Restrict this endpoint to install admins too, for the same reason as the /admin page.
+    this.app.get('/api/install/prefs', requireInstallAdmin, expressWrap(async (_req, resp) => {
      const activation = await this._activations.current();

      return sendOkReply(null, resp, {
@@ -1803,7 +1814,7 @@ export class FlexServer implements GristServer {
      });
    }));

-    this.app.patch('/api/install/prefs', isManager, expressWrap(async (req, resp) => {
+    this.app.patch('/api/install/prefs', requireInstallAdmin, expressWrap(async (req, resp) => {
      const props = {prefs: req.body};
      const activation = await this._activations.current();
      activation.checkProperties(props);
--- a/app/server/lib/GristServer.ts
+++ b/app/server/lib/GristServer.ts
@@ -16,6 +16,7 @@ import { Hosts } from 'app/server/lib/extractOrg';
 import { ICreate } from 'app/server/lib/ICreate';
 import { IDocStorageManager } from 'app/server/lib/IDocStorageManager';
 import { INotifier } from 'app/server/lib/INotifier';
+import { InstallAdmin } from 'app/server/lib/InstallAdmin';
 import { IPermitStore } from 'app/server/lib/Permit';
 import { ISendAppPageOptions } from 'app/server/lib/sendAppPage';
 import { fromCallback } from 'app/server/lib/serverUtils';
@@ -47,6 +48,7 @@ export interface GristServer {
  getDeploymentType(): GristDeploymentType;
  getHosts(): Hosts;
  getActivations(): Activations;
+  getInstallAdmin(): InstallAdmin;
  getHomeDBManager(): HomeDBManager;
  getStorageManager(): IDocStorageManager;
  getTelemetry(): ITelemetry;
@@ -135,6 +137,7 @@ export function createDummyGristServer(): GristServer {
    getDeploymentType() { return 'core'; },
    getHosts() { throw new Error('no hosts'); },
    getActivations() { throw new Error('no activations'); },
+    getInstallAdmin() { throw new Error('no install admin'); },
    getHomeDBManager() { throw new Error('no db'); },
    getStorageManager() { throw new Error('no storage manager'); },
    getTelemetry() { return createDummyTelemetry(); },
@@ -155,7 +158,6 @@ export function createDummyGristServer(): GristServer {
 export function createDummyTelemetry(): ITelemetry {
  return {
    addEndpoints() { /* do nothing */ },
-    addPages() { /* do nothing */ },
    start() { return Promise.resolve(); },
    logEvent() { /* do nothing */ },
    logEventAsync() { return Promise.resolve(); },
--- a/app/server/lib/ICreate.ts
+++ b/app/server/lib/ICreate.ts
@@ -6,6 +6,7 @@ import {ExternalStorage} from 'app/server/lib/ExternalStorage';
 import {createDummyTelemetry, GristServer} from 'app/server/lib/GristServer';
 import {IBilling} from 'app/server/lib/IBilling';
 import {INotifier} from 'app/server/lib/INotifier';
+import {InstallAdmin, SimpleInstallAdmin} from 'app/server/lib/InstallAdmin';
 import {ISandbox, ISandboxCreationOptions} from 'app/server/lib/ISandbox';
 import {IShell} from 'app/server/lib/IShell';
 import {createSandbox, SpawnFn} from 'app/server/lib/NSandbox';
@@ -28,6 +29,9 @@ export interface ICreate {

  NSandbox(options: ISandboxCreationOptions): ISandbox;

+  // Create the logic to determine which users are authorized to manage this Grist installation.
+  createInstallAdmin(dbManager: HomeDBManager): Promise<InstallAdmin>;
+
  deploymentType(): GristDeploymentType;
  sessionSecret(): string;
  // Check configuration of the app early enough to show on startup.
@@ -80,6 +84,7 @@ export function makeSimpleCreator(opts: {
  getExtraHeadHtml?: () => string,
  getSqliteVariant?: () => SqliteVariant,
  getSandboxVariants?: () => Record<string, SpawnFn>,
+  createInstallAdmin?: (dbManager: HomeDBManager) => Promise<InstallAdmin>,
 }): ICreate {
  const {deploymentType, sessionSecret, storage, notifier, billing, telemetry} = opts;
  return {
@@ -157,5 +162,6 @@ export function makeSimpleCreator(opts: {
    },
    getSqliteVariant: opts.getSqliteVariant,
    getSandboxVariants: opts.getSandboxVariants,
+    createInstallAdmin: opts.createInstallAdmin || (async () => new SimpleInstallAdmin()),
  };
 }
--- a/app/server/lib/InstallAdmin.ts
+++ b/app/server/lib/InstallAdmin.ts
@@ -0,0 +1,52 @@
+import {ApiError} from 'app/common/ApiError';
+import {appSettings} from 'app/server/lib/AppSettings';
+import {getUser, RequestWithLogin} from 'app/server/lib/Authorizer';
+import {User} from 'app/gen-server/entity/User';
+import express from 'express';
+
+/**
+ * Class implementing the logic to determine whether a user is authorized to manage the Grist
+ * installation.
+ */
+export abstract class InstallAdmin {
+
+  // Returns true if user is authorized to manage the Grist installation.
+  public abstract isAdminUser(user: User): Promise<boolean>;
+
+  // Returns true if req is authenticated (contains a user) and the user is authorized to manage
+  // the Grist installation. This should not fail, only return true or false.
+  public async isAdminReq(req: express.Request): Promise<boolean> {
+    const user = (req as RequestWithLogin).user;
+    return user ? this.isAdminUser(user) : false;
+  }
+
+  // Returns middleware that fails unless the request includes an authenticated user and this user
+  // is authorized to manage the Grist installation.
+  public getMiddlewareRequireAdmin(): express.RequestHandler {
+    return this._requireAdmin.bind(this);
+  }
+
+  private async _requireAdmin(req: express.Request, resp: express.Response, next: express.NextFunction) {
+    try {
+      // getUser() will fail with 401 if user is not present.
+      if (!await this.isAdminUser(getUser(req))) {
+        throw new ApiError('Access denied', 403);
+      }
+      next();
+    } catch (err) {
+      next(err);
+    }
+  }
+}
+
+// Considers the user whose email matches GRIST_DEFAULT_EMAIL env var, if given, to be the
+// installation admin. If not given, then there is no admin.
+export class SimpleInstallAdmin extends InstallAdmin {
+  private _installAdminEmail = appSettings.section('access').flag('installAdminEmail').readString({
+    envVar: 'GRIST_DEFAULT_EMAIL',
+  });
+
+  public override async isAdminUser(user: User): Promise<boolean> {
+    return this._installAdminEmail ? (user.loginEmail === this._installAdminEmail) : false;
+  }
+}
--- a/app/server/lib/Telemetry.ts
+++ b/app/server/lib/Telemetry.ts
@@ -58,7 +58,6 @@ export interface ITelemetry {
  ): Promise<void>;
  shouldLogEvent(name: TelemetryEvent): boolean;
  addEndpoints(app: express.Express): void;
-  addPages(app: express.Express, middleware: express.RequestHandler[]): void;
  getTelemetryConfig(requestOrSession?: RequestOrSession): TelemetryConfig | undefined;
  fetchTelemetryPrefs(): Promise<void>;
 }
@@ -196,15 +195,6 @@ export class Telemetry implements ITelemetry {
    }));
  }

-  public addPages(app: express.Application, middleware: express.RequestHandler[]) {
-    if (this._deploymentType === 'core') {
-      app.get('/support', ...middleware, expressWrap(async (req, resp) => {
-        return this._gristServer.sendAppPage(req, resp,
-          {path: 'app.html', status: 200, config: {}});
-      }));
-    }
-  }
-
  public getTelemetryConfig(requestOrSession?: RequestOrSession): TelemetryConfig | undefined {
    const prefs = this._telemetryPrefs;
    if (!prefs) {
--- a/app/server/lib/requestUtils.ts
+++ b/app/server/lib/requestUtils.ts
@@ -2,7 +2,7 @@ import {ApiError} from 'app/common/ApiError';
 import {DEFAULT_HOME_SUBDOMAIN, isOrgInPathOnly, parseSubdomain, sanitizePathTail} from 'app/common/gristUrls';
 import * as gutil from 'app/common/gutil';
 import {DocScope, QueryResult, Scope} from 'app/gen-server/lib/HomeDBManager';
-import {getUser, getUserId, RequestWithLogin} from 'app/server/lib/Authorizer';
+import {getUserId, RequestWithLogin} from 'app/server/lib/Authorizer';
 import {RequestWithOrg} from 'app/server/lib/extractOrg';
 import {RequestWithGrist} from 'app/server/lib/GristServer';
 import log from 'app/server/lib/log';
@@ -377,9 +377,3 @@ export function addAbortHandler(req: Request, res: Writable, op: () => void) {
    }
  });
 }
-
-export function isDefaultUser(req: Request) {
-  const defaultEmail = process.env.GRIST_DEFAULT_EMAIL;
-  const {loginEmail} = getUser(req);
-  return defaultEmail && defaultEmail === loginEmail;
-}
--- a/app/server/lib/sendAppPage.ts
+++ b/app/server/lib/sendAppPage.ts
@@ -82,7 +82,7 @@ export function makeGristConfig(options: MakeGristConfigOptions): GristLoadConfi
        ((server?.getBundledWidgets().length || 0) > 0),
    survey: Boolean(process.env.DOC_ID_NEW_USER_INFO),
    tagManagerId: process.env.GOOGLE_TAG_MANAGER_ID,
-    activation: getActivation(req as RequestWithLogin | undefined),
+    activation: (req as RequestWithLogin|undefined)?.activation,
    enableCustomCss: isAffirmative(process.env.APP_STATIC_INCLUDE_CUSTOM_CSS),
    supportedLngs: readLoadedLngs(req?.i18n),
    namespaces: readLoadedNamespaces(req?.i18n),
@@ -306,11 +306,3 @@ function getDocFromConfig(config: GristLoadConfig): Document | null {

  return config.getDoc[config.assignmentId] ?? null;
 }
-
-function getActivation(mreq: RequestWithLogin|undefined) {
-  const defaultEmail = process.env.GRIST_DEFAULT_EMAIL;
-  return {
-    ...mreq?.activation,
-    isManager: Boolean(defaultEmail && defaultEmail === mreq?.user?.loginEmail),
-  };
-}