feat: add tooltip on the feature

fix: various nitpicks

app/client/ui/DocumentSettings.ts

@@ -13,7 +13,7 @@ import type {DocPageModel} from 'app/client/models/DocPageModel';
 import {urlState} from 'app/client/models/gristUrlState';
 import {KoSaveableObservable} from 'app/client/models/modelUtil';
 import {AdminSection, AdminSectionItem} from 'app/client/ui/AdminPanelCss';
-import {hoverTooltip, showTransientTooltip} from 'app/client/ui/tooltips';
+import {hoverTooltip, showTransientTooltip, withInfoTooltip} from 'app/client/ui/tooltips';
 import {bigBasicButton, bigPrimaryButton} from 'app/client/ui2018/buttons';
 import {cssRadioCheckboxOptions, radioCheckboxOption} from 'app/client/ui2018/checkbox';
 import {colors, mediaSmall, theme} from 'app/client/ui2018/cssVars';
@@ -29,6 +29,7 @@ import {commonUrls, GristLoadConfig} from 'app/common/gristUrls';
 import {not, propertyCompare} from 'app/common/gutil';
 import {getCurrency, locales} from 'app/common/Locales';
 import {isOwner, isOwnerOrEditor} from 'app/common/roles';
+import {DOCTYPE_NORMAL, DOCTYPE_TEMPLATE, DOCTYPE_TUTORIAL, DocumentType, persistType} from 'app/common/UserAPI';
 import {
   Computed,
   Disposable,
@@ -41,7 +42,6 @@ import {
   styled
 } from 'grainjs';
 import * as moment from 'moment-timezone';
-import {DOCTYPE_NORMAL, DOCTYPE_TEMPLATE, DOCTYPE_TUTORIAL, DocumentType, persistType} from 'app/common/UserAPI';
 
 const t = makeT('DocumentSettings');
 const testId = makeTestId('test-settings-');
@@ -98,7 +98,11 @@ export class DocSettingsPage extends Disposable {
         }),
         dom.create(AdminSectionItem, {
           id: 'templateMode',
-          name: t('Template mode'),
+          name: withInfoTooltip(
+            t('Template mode'),
+            'documentType',
+            {variant: 'hover'}
+          ),
           description: t('Change document type'),
           value: cssDocTypeContainer(
             dom.create(
@@ -108,7 +112,7 @@ export class DocSettingsPage extends Disposable {
             cssSmallButton(t('Edit'),
               dom.on('click', this._buildDocumentTypeModal.bind(this, true)),
               testId('doctype-edit')
-            )
+            ),
           ),
           disabled: isDocOwner ? false : t('Only available to document owners'),
         }),
@@ -268,7 +272,6 @@ export class DocSettingsPage extends Disposable {
         cssRadioCheckboxOptions(
           dom.style('max-width', '400px'),
           radioCheckboxOption(selected, TimingModalOption.Adhoc, dom('div',
-            dom.style('margin-left', '8px'),
             dom('div',
               dom('strong', t('Start timing')),
             ),
@@ -279,7 +282,6 @@ export class DocSettingsPage extends Disposable {
             testId('timing-modal-option-adhoc'),
           )),
           radioCheckboxOption(selected, TimingModalOption.Reload, dom('div',
-            dom.style('margin-left', '8px'),
             dom('div',
               dom('strong', t('Time reload')),
             ),
@@ -366,7 +368,6 @@ export class DocSettingsPage extends Disposable {
           itemTestId: DomElementMethod | null
         }) => {
         return radioCheckboxOption(selected, type, dom('div',
-          dom.style('margin-left', '8px'),
           dom('div',
             dom('strong', label),
           ),

app/client/ui/GristTooltips.ts

@@ -46,7 +46,8 @@ export type Tooltip =
   | 'communityWidgets'
   | 'twoWayReferences'
   | 'twoWayReferencesDisabled'
-  | 'reasignTwoWayReference';
+  | 'reasignTwoWayReference'
+  | 'documentType';
 
 export type TooltipContentFunc = (...domArgs: DomElementArg[]) => DomContents;
 
@@ -187,6 +188,15 @@ see or edit which parts of your document.')
     ),
     ...args,
   ),
+  documentType: (...args: DomElementArg[]) => cssTooltipContent(
+    dom('div',
+      t('Change document type can be useful to transform it into a template or a tutorial')
+    ),
+    dom('div',
+      cssLink({href: commonUrls.helpDocumentType, target: '_blank'}, t('Learn more.')),
+    ),
+    ...args,
+  ),
 };
 
 export interface BehavioralPromptContent {

app/client/ui2018/checkbox.ts

@@ -106,6 +106,7 @@ export const cssCheckboxCircle = styled(cssCheckboxSquare, `
 `);
 
 export const cssLabelText = styled('span', `
+  margin-left: 8px;
   color: ${theme.text};
   font-weight: initial;   /* negate bootstrap */
   overflow: hidden;

app/client/ui2018/modals.ts

@@ -623,11 +623,10 @@ export const cssModalBody = styled('div', `
 
 export const cssModalButtons = styled('div', `
   margin: 40px 0 0 0;
-  text-align: right;
 
   & > button,
   & > .${cssButton.className} {
-    margin: 0 0 0 8px;
+    margin: 0 8px 0 0;
   }
 `);
 

app/common/gristUrls.ts

@@ -95,6 +95,7 @@ export const commonUrls = {
   helpFilteringReferenceChoices: "https://support.getgrist.com/col-refs/#filtering-reference-choices-in-dropdown",
   helpSandboxing: "https://support.getgrist.com/self-managed/#how-do-i-sandbox-documents",
   helpAPI: 'https://support.getgrist.com/api',
+  helpDocumentType: 'https://support.getgrist.com/creating-doc/',
   freeCoachingCall: getFreeCoachingCallUrl(),
   contactSupport: getContactSupportUrl(),
   termsOfService: getTermsOfServiceUrl(),

static/locales/en.client.json

@@ -358,7 +358,6 @@
         "Template mode": "Template mode",
         "Change document type": "Change document type",
         "Edit": "Edit",
-        "Once you start timing, Grist will measure the time it takes to evaluate each formula. This allows diagnosing which formulas are responsible for slow performance when a document is first opened, or when a document responds to changes.": "Once you start timing, Grist will measure the time it takes to evaluate each formula. This allows diagnosing which formulas are responsible for slow performance when a document is first opened, or when a document responds to changes.",
         "Change nature of document": "Change nature of document",
         "Regular document": "Regular document",
         "Normal document behavior. All users work on the same copy of the document.": "Normal document behavior. All users work on the same copy of the document.",
@@ -1238,7 +1237,8 @@
         "To allow multiple assignments, change the type of the Reference column to Reference List.": "To allow multiple assignments, change the type of the Reference column to Reference List.",
         "This limitation occurs when one column in a two-way reference has the Reference type.": "This limitation occurs when one column in a two-way reference has the Reference type.",
         "To allow multiple assignments, change the referenced column's type to Reference List.": "To allow multiple assignments, change the referenced column's type to Reference List.",
-        "Two-way references are not currently supported for Formula or Trigger Formula columns": "Two-way references are not currently supported for Formula or Trigger Formula columns"
+        "Two-way references are not currently supported for Formula or Trigger Formula columns": "Two-way references are not currently supported for Formula or Trigger Formula columns",
+        "Change document type can be useful to transform it into a template or a tutorial": "Change document type can be useful to transform it into a template or a tutorial",
     },
     "DescriptionConfig": {
         "DESCRIPTION": "DESCRIPTION"

test/nbrowser/DocTypeConversion.ts

@@ -7,7 +7,7 @@ import { Button, button, element, label, option} from "test/nbrowser/elementUtil
 type TypeLabels = "Regular" | "Template" | "Tutorial";
 
 
-describe("Document Type Conversion", function () {
+describe("DocTypeConversion", function () {
   this.timeout(20000);
   const cleanup = setupTestSuite();