(core) Polish doc tutorials

Summary:
The GristDocTutorial table is now always visible to users with edit
access to the trunk, and the Share menu is now available within
tutorial forks, making it easier for editors to replace the original
tutorial trunk with changes made in the fork, and for viewers to export
their copy of the tutorial.

Also, changes to the GristDocTutorial table are now immediately reflected
in the tutorial popup.

Test Plan: Browser tests.

Reviewers: jarek

Reviewed By: jarek

Differential Revision: https://phab.getgrist.com/D3930

app/client/models/DocModel.ts

@@ -26,6 +26,7 @@ import MetaTableModel from 'app/client/models/MetaTableModel';
 import * as rowset from 'app/client/models/rowset';
 import {TableData} from 'app/client/models/TableData';
 import {isHiddenTable, isSummaryTable} from 'app/common/isHiddenTable';
+import {canEdit} from 'app/common/roles';
 import {RowFilterFunc} from 'app/common/RowFilterFunc';
 import {schema, SchemaTypes} from 'app/common/schema';
 import {UIRowId} from 'app/common/UIRowId';
@@ -44,7 +45,7 @@ import {createViewSectionRec, ViewSectionRec} from 'app/client/models/entities/V
 import {CellRec, createCellRec} from 'app/client/models/entities/CellRec';
 import {RefListValue} from 'app/common/gristTypes';
 import {decodeObject} from 'app/plugin/objtypes';
-import { toKo } from 'grainjs';
+import {toKo} from 'grainjs';
 
 // Re-export all the entity types available. The recommended usage is like this:
 //    import {ColumnRec, ViewFieldRec} from 'app/client/models/DocModel';
@@ -166,7 +167,12 @@ export class DocModel {
   // is initialized once on page load. If set, then the tour page (if any) will be visible.
   public showDocTourTable: boolean = (urlState().state.get().docPage === 'GristDocTour');
 
-  public showDocTutorialTable: boolean = !this._docPageModel.isTutorialFork.get();
+  // Whether the GristDocTutorial table should be shown. Initialized once on page load.
+  public showDocTutorialTable: boolean =
+    // We skip subscribing to the observables below since they normally shouldn't change during
+    // this object's lifetime. If that changes, this should be made into a computed observable.
+    !this._docPageModel.isTutorialFork.get() ||
+    canEdit(this._docPageModel.currentDoc.get()?.trunkAccess ?? null);
 
   // List of all the metadata tables.
   private _metaTables: Array<MetaTableModel<any>>;

app/client/models/entities/PageRec.ts

@@ -14,7 +14,7 @@ export function createPageRec(this: PageRec, docModel: DocModel): void {
   // Page is hidden when any of this is true:
   // - It has an empty name (or no name at all)
   // - It is GristDocTour (unless user wants to see it)
-  // - It is GristDocTutorial (and the document is a tutorial fork)
+  // - It is GristDocTutorial (unless user should see it)
   // - It is a page generated for a hidden table TODO: Follow up - don't create
   //   pages for hidden tables.
   // This is used currently only the left panel, to hide pages from the user.

app/client/ui/DocTutorial.ts

@@ -52,6 +52,11 @@ export class DocTutorial extends FloatingPopup {
   public async start() {
     this.showPopup();
     await this._loadSlides();
+
+    const tableData = this._docData.getTable('GristDocTutorial');
+    if (tableData) {
+      this.autoDispose(tableData.tableActionEmitter.addListener(() => this._reloadSlides()));
+    }
   }
 
   protected _buildTitle() {
@@ -214,6 +219,16 @@ export class DocTutorial extends FloatingPopup {
     this._slides.set(slides);
   }
 
+  private async _reloadSlides() {
+    await this._loadSlides();
+    const slides = this._slides.get();
+    if (!slides) { return; }
+
+    if (this._currentSlideIndex.get() > slides.length - 1) {
+      this._currentSlideIndex.set(slides.length - 1);
+    }
+  }
+
   private async _saveCurrentSlidePosition() {
     const currentOptions = this._currentDoc?.options ?? {};
     await this._appModel.api.updateDoc(this._docId, {

app/client/ui/ShareMenu.ts

@@ -41,11 +41,15 @@ export function buildShareMenuButton(pageModel: DocPageModel): DomContents {
       return shareButton(t("Back to Current"), () => [
         menuManageUsers(doc, pageModel),
         menuSaveCopy(t("Save Copy"), doc, appModel),
-        menuOriginal(doc, appModel, true),
+        menuOriginal(doc, appModel, {isSnapshot: true}),
         menuExports(doc, pageModel),
       ], {buttonAction: backToCurrent});
     } else if (doc.isTutorialFork) {
-      return null;
+      return shareButton(t("Save Copy"), () => [
+        menuSaveCopy(t("Save Copy"), doc, appModel),
+        menuOriginal(doc, appModel, {isTutorialFork: true}),
+        menuExports(doc, pageModel),
+      ], {buttonAction: saveCopy});
     } else if (doc.isPreFork || doc.isBareFork) {
       // A new unsaved document, or a fiddle, or a public example.
       const saveActionTitle = doc.isBareFork ? t("Save Document") : t("Save Copy");
@@ -63,14 +67,14 @@ export function buildShareMenuButton(pageModel: DocPageModel): DomContents {
         return shareButton(t("Save Copy"), () => [
           menuManageUsers(doc, pageModel),
           menuSaveCopy(t("Save Copy"), doc, appModel),
-          menuOriginal(doc, appModel, false),
+          menuOriginal(doc, appModel),
           menuExports(doc, pageModel),
         ], {buttonAction: saveCopy});
       } else {
         return shareButton(t("Unsaved"), () => [
           menuManageUsers(doc, pageModel),
           menuSaveCopy(t("Save Copy"), doc, appModel),
-          menuOriginal(doc, appModel, false),
+          menuOriginal(doc, appModel),
           menuExports(doc, pageModel),
         ]);
       }
@@ -142,9 +146,25 @@ function menuManageUsers(doc: DocInfo, pageModel: DocPageModel) {
   ];
 }
 
-// Renders "Return to Original" and "Replace Original" menu items. When used with snapshots, we
-// say "Current Version" in place of the word "Original".
-function menuOriginal(doc: Document, appModel: AppModel, isSnapshot: boolean) {
+interface MenuOriginalOptions {
+  /** Defaults to false. */
+  isSnapshot?: boolean;
+  /** Defaults to false. */
+  isTutorialFork?: boolean;
+}
+
+/**
+ * Renders "Return to Original" and "Replace Original" menu items.
+ *
+ * When used with snapshots, we say "Current Version" in place of the word "Original".
+ *
+ * When used with tutorial forks, the "Return to Original" and "Compare to Original" menu
+ * items are excluded. Note that it's still possible to return to the original by manually
+ * setting the open mode in the URL to "/m/default" - if the menu item were to ever be included
+ * again, it should likely be a shortcut to setting the open mode back to default.
+ */
+function menuOriginal(doc: Document, appModel: AppModel, options: MenuOriginalOptions = {}) {
+  const {isSnapshot = false, isTutorialFork = false} = options;
   const termToUse = isSnapshot ? t("Current Version") : t("Original");
   const origUrlId = buildOriginalUrlId(doc.id, isSnapshot);
   const originalUrl = urlState().makeUrl({doc: origUrlId});
@@ -167,7 +187,7 @@ function menuOriginal(doc: Document, appModel: AppModel, isSnapshot: boolean) {
     replaceTrunkWithFork(user, doc, appModel, origUrlId).catch(reportError);
   }
   return [
-    cssMenuSplitLink({href: originalUrl},
+    isTutorialFork ? null : cssMenuSplitLink({href: originalUrl},
       cssMenuSplitLinkText(t("Return to {{termToUse}}", {termToUse})), testId('return-to-original'),
       cssMenuIconLink({href: originalUrl, target: '_blank'}, testId('open-original'),
         cssMenuIcon('FieldLink'),
@@ -179,7 +199,7 @@ function menuOriginal(doc: Document, appModel: AppModel, isSnapshot: boolean) {
       dom.cls('disabled', !roles.canEdit(doc.trunkAccess || null) || comparingSnapshots),
       testId('replace-original'),
     ),
-    menuItemLink(compareHref, {target: '_blank'}, t("Compare to {{termToUse}}", {termToUse}),
+    isTutorialFork ? null : menuItemLink(compareHref, {target: '_blank'}, t("Compare to {{termToUse}}", {termToUse}),
       menuAnnotate('Beta'),
       testId('compare-original'),
     ),