(core) Update HelpScout beacon to work with embedded documentation articles.

Summary:
- Fix base href in HelpScout beacon when showing articles (in particular for Firefox)
- Show the 'Answers' tab normally except when reporting an error.
- Combine the "Give Feedback" and "Help Center" buttons into one that normally
  opens the beacon (with a link to Help Center and to Community Forum), and a
  smaller one that opens the Help Center site in a new tab.
- Update HELP_SCOUT_* env vars to use _V2 suffix, to allow them to coexist with
  code using the previous beacon.

Test Plan: Updated the browser test to check the new behavior.

Reviewers: georgegevoian

Reviewed By: georgegevoian

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

app/client/ui/LeftPanelCommon.ts

@@ -25,23 +25,22 @@ import {dom, DomContents, Observable, styled} from 'grainjs';
  * HelpCenter in a new tab.
  */
 export function createHelpTools(appModel: AppModel, spacer = true): DomContents {
-  const isEfcr = (appModel.topAppModel.productFlavor === 'efcr');
   return [
     spacer ? cssSpacer() : null,
-    cssPageEntry(
-      cssPageLink(cssPageIcon('Feedback'),
-        cssLinkText('Give Feedback'),
-        dom.on('click', () => beaconOpenMessage({appModel})),
+    cssSplitPageEntry(
+      cssPageEntryMain(
+        cssPageLink(cssPageIcon('Help'),
+          cssLinkText('Help Center'),
+          dom.cls('tour-help-center'),
+          dom.on('click', (ev) => beaconOpenMessage({appModel})),
+          testId('left-feedback'),
+        ),
       ),
-      dom.hide(isEfcr),
-      testId('left-feedback'),
-    ),
-    cssPageEntry(
-      cssPageLink(cssPageIcon('Help'), {href: commonUrls.help, target: '_blank'},
-        cssLinkText('Help Center'),
-        dom.cls('tour-help-center')
-      ),
-      dom.hide(isEfcr),
+      cssPageEntrySmall(
+        cssPageLink(cssPageIcon('FieldLink'),
+          {href: commonUrls.help, target: '_blank'},
+        ),
+      )
     ),
   ];
 }
@@ -156,3 +155,28 @@ export const cssPageIcon = styled(icon, `
 export const cssSpacer = styled('div', `
   height: 18px;
 `);
+
+const cssSplitPageEntry = styled('div', `
+  display: flex;
+  align-items: center;
+`);
+
+const cssPageEntryMain = styled(cssPageEntry, `
+  flex: auto;
+  margin: 0;
+`);
+
+const cssPageEntrySmall = styled(cssPageEntry, `
+  flex: none;
+  border-radius: 3px;
+  --icon-color: ${colors.lightGreen};
+  & > .${cssPageLink.className} {
+    padding: 0 8px 0 16px;
+  }
+  &:hover {
+    --icon-color: ${colors.darkGreen};
+  }
+  .${cssTools.className}-collapsed & {
+    display: none;
+  }
+`);

app/client/ui/NotifyUI.ts

@@ -145,7 +145,7 @@ function buildNotifyDropdown(ctl: IOpenController, notifier: Notifier, appModel:
         cssDropdownFeedbackLink(
           cssDropdownFeedbackIcon('Feedback'),
           'Give feedback',
-          dom.on('click', () => beaconOpenMessage({appModel, onOpen: () => ctl.close()})),
+          dom.on('click', () => beaconOpenMessage({appModel, onOpen: () => ctl.close(), route: '/ask/message/'})),
           testId('feedback'),
         )
       ),