ToggleEnterpriseWidget: new frontend toggle for the admin

Strongly patterned after SupportGristPage. In fact, it has almost the
same structure.

Perhaps one day it would be possible to synchronise the logic between
the two toggles even further, but I couldn't see a simple way to do so
now. For now, some code structure duplication seemed easiest in lieau
of more abstractions.

app/client/ui/ToggleEnterpriseWidget.ts

@@ -0,0 +1,82 @@
+import {makeT} from 'app/client/lib/localization';
+import {Computed, Disposable, dom, makeTestId} from "grainjs";
+import {commonUrls} from "app/common/gristUrls";
+import {cssLink} from 'app/client/ui2018/links';
+import {ToggleEnterpriseModel} from 'app/client/models/ToggleEnterpriseModel';
+import {
+  cssOptInButton,
+  cssOptInOutMessage,
+  cssOptOutButton,
+  cssParagraph,
+  cssSection,
+} from 'app/client/ui/AdminTogglesCss';
+
+
+const t = makeT('ToggleEnterprsiePage');
+const testId = makeTestId('test-toggle-enterprise-page-');
+
+export class ToggleEnterpriseWidget extends Disposable {
+  private readonly _model: ToggleEnterpriseModel = new ToggleEnterpriseModel();
+  private readonly _isEnterprise = Computed.create(this, this._model.edition, (_use, edition) => {
+    return edition === 'enterprise';
+  }).onWrite(async (enabled) => {
+    await this._model.updateEnterpriseToggle(enabled ? 'enterprise' : 'core');
+  });
+
+  constructor() {
+    super();
+    this._model.fetchEnterpriseToggle().catch(reportError);
+  }
+
+  public getEnterpriseToggleObservable() {
+    return this._isEnterprise;
+  }
+
+  public buildEnterpriseSection() {
+    return cssSection(
+      dom.domComputed(this._isEnterprise, () => {
+        return [
+          cssParagraph(
+            t('Activation keys are used to run Grist Enterprise after a trial period ' +
+              'of 30 days has expired. Get an activation key by signing up for Grist ' +
+              'Enterprise. You do not need an activation key to run Grist Core.')
+          ),
+          cssParagraph(t('Learn more in our {{link}}.', {
+              link: enterpriseHelpCenterLink(),
+            })),
+          this._buildEnterpriseSectionButtons(),
+        ];
+      }),
+      testId('enterprise-opt-in-section'),
+    );
+  }
+
+  public _buildEnterpriseSectionButtons() {
+    return dom.domComputed(this._isEnterprise, (enterpriseEnabled) => {
+      if (enterpriseEnabled) {
+        return [
+          cssOptInOutMessage(
+            t('Grist Enterprise Edition is enabled.'),
+            testId('enterprise-opt-out-message'),
+          ),
+          cssOptOutButton(t('Disable Grist Enterprise Edition'),
+            dom.on('click', () => this._isEnterprise.set(false)),
+          ),
+        ];
+      } else {
+        return [
+          cssOptInButton(t('Enable Grist Enterprise Edition'),
+            dom.on('click', () => this._isEnterprise.set(true)),
+          ),
+        ];
+      }
+    });
+  }
+}
+
+function enterpriseHelpCenterLink() {
+  return cssLink(
+    t('Help Center'),
+    {href: commonUrls.helpEnterpriseOptIn, target: '_blank'},
+  );
+}

app/common/gristUrls.ts

@@ -84,6 +84,7 @@ export const commonUrls = {
   helpTryingOutChanges: "https://support.getgrist.com/copying-docs/#trying-out-changes",
   helpCustomWidgets: "https://support.getgrist.com/widget-custom",
   helpTelemetryLimited: "https://support.getgrist.com/telemetry-limited",
+  helpEnterpriseOptIn: "https://support.getgrist.com/self-managed/#how-do-i-activate-grist-enterprise",
   helpCalendarWidget: "https://support.getgrist.com/widget-calendar",
   helpLinkKeys: "https://support.getgrist.com/examples/2021-04-link-keys",
   helpFilteringReferenceChoices: "https://support.getgrist.com/col-refs/#filtering-reference-choices-in-dropdown",