"view as" banner: add a tooltip so that users understand better what …

…the screen does (#1418)

Fixes #1328.

app/client/aclui/ACLUsers.ts

@@ -18,6 +18,7 @@ import {waitGrainObs} from 'app/common/gutil';
 import noop from 'lodash/noop';
 
 const t = makeT("ViewAsDropdown");
+const userT = makeT('UserManagerModel');
 
 function isSpecialEmail(email: string) {
   return email === ANONYMOUS_USER_EMAIL || email === EVERYONE_EMAIL;
@@ -127,7 +128,7 @@ export class ACLUsersPopup extends Disposable {
       ),
       cssMemberText(
         cssMemberPrimary(user.name || dom('span', user.email),
-          cssRole('(', getUserRoleText(user), ')', testId('acl-user-access')),
+          cssRole('(', userT(getUserRoleText(user)), ')', testId('acl-user-access')),
         ),
         user.name ? cssMemberSecondary(user.email) : null
       ),

app/client/components/Banner.ts

@@ -121,7 +121,8 @@ const cssBanner = styled('div', `
   color: white;
 
   &-info {
-    color: black;
+    color: ${colors.dark};
+    --icon-color: ${colors.dark};
     background: #FFFACD;
   }
 

app/client/components/ViewAsBanner.ts

@@ -15,8 +15,10 @@ import { cssSelectBtn } from 'app/client/ui2018/select';
 import { ACLUsersPopup } from 'app/client/aclui/ACLUsers';
 import { UserOverride } from 'app/common/DocListAPI';
 import { makeT } from 'app/client/lib/localization';
+import { cssInfoTooltipButton, withInfoTooltip } from 'app/client/ui/tooltips';
 
-const t = makeT('components.ViewAsBanner');
+const t = makeT('ViewAsBanner');
+const userT = makeT('UserManagerModel');
 
 export class ViewAsBanner extends Disposable {
 
@@ -45,14 +47,14 @@ export class ViewAsBanner extends Disposable {
     return cssContent(
       cssMessageText(
         cssMessageIcon('EyeShow'),
-        'You are viewing this document as',
+        t('You are viewing this document as'),
       ),
       cssSelectBtn(
         {tabIndex: '0'},
         cssBtnText(
           user ? cssMember(
             user.name || user.email,
-            cssRole('(', getUserRoleText({...user, access}), ')', dom.show(Boolean(access))),
+            cssRole('(', userT(getUserRoleText({...user, access})), ')', dom.show(Boolean(access))),
           ) : t('UnknownUser'),
         ),
         dom(
@@ -62,10 +64,19 @@ export class ViewAsBanner extends Disposable {
         elem => this._usersPopup.attachPopup(elem, {}),
         testId('select-open'),
       ),
-      cssPrimaryButtonLink(
-        'View as Yourself', cssIcon('Convert'),
-        urlState().setHref(userOverrideParams(null)),
-        testId('revert'),
+      withInfoTooltip(
+        cssPrimaryButtonLink(
+          t('View as Yourself'), cssIcon('Convert'),
+          urlState().setHref(userOverrideParams(null)),
+          testId('revert'),
+        ),
+        'viewAsBanner',
+        {
+          iconDomArgs: [
+            cssInfoTooltipButton.cls('-in-banner'),
+            testId('view-as-help-tooltip'),
+          ],
+        },
       ),
       testId('view-as-banner'),
     );

app/client/ui/GristTooltips.ts

@@ -46,7 +46,8 @@ export type Tooltip =
   | 'communityWidgets'
   | 'twoWayReferences'
   | 'twoWayReferencesDisabled'
-  | 'reasignTwoWayReference';
+  | 'reasignTwoWayReference'
+  | 'viewAsBanner';
 
 export type TooltipContentFunc = (...domArgs: DomElementArg[]) => DomContents;
 
@@ -187,6 +188,10 @@ see or edit which parts of your document.')
     ),
     ...args,
   ),
+  viewAsBanner: (...args: DomElementArg[]) => cssTooltipContent(
+    dom('div', t('The preview below this header shows how the selected user will see this document')),
+    ...args,
+  ),
 };
 
 export interface BehavioralPromptContent {

app/client/ui/tooltips.ts

@@ -8,7 +8,7 @@
 import {logTelemetryEvent} from 'app/client/lib/telemetry';
 import {GristTooltips, Tooltip} from 'app/client/ui/GristTooltips';
 import {prepareForTransition} from 'app/client/ui/transitions';
-import {testId, theme, vars} from 'app/client/ui2018/cssVars';
+import {colors, testId, theme, vars} from 'app/client/ui2018/cssVars';
 import {icon} from 'app/client/ui2018/icons';
 import {makeLinks} from 'app/client/ui2018/links';
 import {menuCssClass} from 'app/client/ui2018/menus';
@@ -401,7 +401,7 @@ function buildHoverableInfoTooltip(
   tooltip: BindableValue<Tooltip>,
   ...domArgs: DomElementArg[]
 ) {
-  return cssInfoTooltipIcon('?',
+  return cssInfoTooltipButton('?',
     hoverTooltip(() => cssInfoTooltipTransientPopup(
       dom.domComputed(tooltip, (tip) => GristTooltips[tip]()),
       cssTooltipCorner(testId('tooltip-origin')),
@@ -587,13 +587,23 @@ const cssInfoTooltipIcon = styled('div', `
   }
 `);
 
-const cssInfoTooltipButton = styled(cssInfoTooltipIcon, `
+export const cssInfoTooltipButton = styled(cssInfoTooltipIcon, `
   cursor: pointer;
 
   &:hover {
     border: 1px solid ${theme.controlSecondaryHoverFg};
     color: ${theme.controlSecondaryHoverFg};
   }
+
+  &-in-banner {
+    color: ${colors.dark};
+    border-color: ${colors.dark};
+  }
+
+  &-in-banner:hover {
+    border-color: ${colors.lightGreen};
+    color: ${colors.lightGreen};
+  }
 `);
 
 const cssInfoTooltipPopup = styled('div', `

static/locales/en.client.json

@@ -850,7 +850,9 @@
         "Update formula (Shift+Enter)": "Update formula (Shift+Enter)"
     },
     "ViewAsBanner": {
-        "UnknownUser": "Unknown User"
+        "UnknownUser": "Unknown User",
+        "View as Yourself": "View as Yourself",
+        "You are viewing this document as": "You are viewing this document as"
     },
     "ViewConfigTab": {
         "Advanced settings": "Advanced settings",
@@ -1237,7 +1239,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",
+        "The preview below this header shows how the selected user will see this document": "The preview below this header shows how the selected user will see this document"
     },
     "DescriptionConfig": {
         "DESCRIPTION": "DESCRIPTION"

static/locales/fr.client.json

@@ -1009,7 +1009,9 @@
         "Users from table": "Utilisateurs de la table"
     },
     "ViewAsBanner": {
-        "UnknownUser": "Utilisateur inconnu"
+        "UnknownUser": "Utilisateur inconnu",
+        "View as Yourself": "Voir en tant que vous-même",
+        "You are viewing this document as": "Vous voyez ce document en tant que"
     },
     "CellStyle": {
         "Open row styles": "Ouvrir les styles de ligne",
@@ -1220,7 +1222,8 @@
         "To allow multiple assignments, change the referenced column's type to Reference List.": "Pour permettre plusieurs assignations, modifiez le type de la colonne référencée en Référence Multiple.",
         "To allow multiple assignments, change the type of the Reference column to Reference List.": "Pour permettre des assignations multiples, modifiez le type de la colonne Référence en Référence Multiple.",
         "This limitation occurs when one end of a two-way reference is configured as a single Reference.": "Cette limitation se produit lorsque l'une des extrémités d'une référence bidirectionnelle est configurée comme une référence unique.",
-        "Two-way references are not currently supported for Formula or Trigger Formula columns": "Les références bidirectionnelles ne peuvent pas contenir des formules ou des formules d'initialisation"
+        "Two-way references are not currently supported for Formula or Trigger Formula columns": "Les références bidirectionnelles ne peuvent pas contenir des formules ou des formules d'initialisation",
+        "The preview below this header shows how the selected user will see this document": "L'aperçu sous cette entête montre ce que l'utilisateur sélectionné peut voir"
     },
     "ColumnTitle": {
         "Add description": "Ajouter une description",

test/nbrowser/AccessRules2.ts

@@ -109,6 +109,7 @@ describe("AccessRules2", function() {
     assert.equal(await driver.findWait('.test-view-as-banner', 2000).isPresent(), true);
     assert.match(await driver.find('.test-view-as-banner .test-select-open').getText(),
                  new RegExp(gu.translateUser('user3').name, 'i'));
+    assert.equal(await driver.find('.test-info-tooltip.test-view-as-help-tooltip').isDisplayed(), true);
 
     // check the aclAsUser parameter on the url persists after navigating to another page
     await gu.getPageItem('FinancialsTable').click();