(core) Disable formula timing UI for non-owners

Summary:
For non-owners, the timing section of Document Settings is now disabled.
For non-editors, the "Reload" section is disabled.

Test Plan: Added a test case for timing being disabled.

Reviewers: jarek

Reviewed By: jarek

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

app/client/ui/AdminPanelCss.ts

@@ -1,3 +1,4 @@
+import {hoverTooltip} from 'app/client/ui/tooltips';
 import {transition} from 'app/client/ui/transitions';
 import {toggle} from 'app/client/ui2018/checkbox';
 import {mediaSmall, testId, theme, vars} from 'app/client/ui2018/cssVars';
@@ -21,6 +22,7 @@ export function AdminSectionItem(owner: IDisposableOwner, options: {
   description?: DomContents,
   value?: DomContents,
   expandedContent?: DomContents,
+  disabled?: false|string,
 }) {
   const itemContent = (...prefix: DomContents[]) => [
     cssItemName(
@@ -34,7 +36,7 @@ export function AdminSectionItem(owner: IDisposableOwner, options: {
       testId(`admin-panel-item-value-${options.id}`),
       dom.on('click', ev => ev.stopPropagation())),
   ];
-  if (options.expandedContent) {
+  if (options.expandedContent && !options.disabled) {
     const isCollapsed = Observable.create(owner, true);
     return cssItem(
       cssItemShort(
@@ -56,7 +58,13 @@ export function AdminSectionItem(owner: IDisposableOwner, options: {
     );
   } else {
     return cssItem(
-      cssItemShort(itemContent()),
+      cssItemShort(itemContent(),
+        cssItemShort.cls('-disabled', Boolean(options.disabled)),
+        options.disabled ? hoverTooltip(options.disabled, {
+          placement: 'bottom-end',
+          modifiers: {offset: {offset: '0, -10'}},
+        }) : null,
+      ),
       testId(`admin-panel-item-${options.id}`),
     );
   }
@@ -109,6 +117,9 @@ const cssItemShort = styled('div', `
   &-expandable:hover {
     background-color: ${theme.lightHover};
   }
+  &-disabled {
+    opacity: .5;
+  }
 
   @container line (max-width: 500px) {
     & {
@@ -157,6 +168,10 @@ const cssItemValue = styled('div', `
   margin: -16px;
   padding: 16px;
   cursor: auto;
+
+  .${cssItemShort.className}-disabled & {
+    pointer-events: none;
+  }
 `);
 
 const cssCollapseIcon = styled(icon, `

app/client/ui/DocumentSettings.ts

@@ -28,6 +28,7 @@ import {EngineCode} from 'app/common/DocumentSettings';
 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 {Computed, Disposable, dom, fromKo, IDisposableOwner, makeTestId, Observable, styled} from 'grainjs';
 import * as moment from 'moment-timezone';
 
@@ -58,6 +59,8 @@ export class DocSettingsPage extends Disposable {
     const canChangeEngine = getSupportedEngineChoices().length > 0;
     const docPageModel = this._gristDoc.docPageModel;
     const isTimingOn = this._gristDoc.isTimingOn;
+    const isDocOwner = isOwner(docPageModel.currentDoc.get());
+    const isDocEditor = isOwnerOrEditor(docPageModel.currentDoc.get());
 
     return cssContainer(
       dom.create(AdminSection, t('Document Settings'), [
@@ -115,6 +118,7 @@ export class DocSettingsPage extends Disposable {
             'This allows diagnosing which formulas are responsible for slow performance when a ' +
             'document is first opened, or when a document responds to changes.'
           )),
+          disabled: isDocOwner ? false : t('Only available to document owners'),
         }),
 
         dom.create(AdminSectionItem, {
@@ -122,6 +126,7 @@ export class DocSettingsPage extends Disposable {
           name: t('Reload'),
           description: t('Hard reset of data engine'),
           value: cssSmallButton(t('Reload data engine'), dom.on('click', this._reloadEngine.bind(this, true))),
+          disabled: isDocEditor ? false : t('Only available to document editors'),
         }),
 
         canChangeEngine ? dom.create(AdminSectionItem, {