(WIP) Markdown/JSON-powered support screen

web/app/components/dashboard/new-features-banner.ts

@@ -2,9 +2,11 @@ import Component from "@glimmer/component";
 import { tracked } from "@glimmer/tracking";
 import window from "ember-window-mock";
 import { action } from "@ember/object";
+import Ember from "ember";
 
-export const NEW_FEATURES_BANNER_LOCAL_STORAGE_ITEM =
-  "july-20-2023-newFeatureBannerIsShown";
+export const NEW_FEATURES_BANNER_LOCAL_STORAGE_ITEM = Ember.testing
+  ? "test-newFeatureBannerIsShown"
+  : "july-20-2023-newFeatureBannerIsShown";
 
 interface DashboardNewFeaturesBannerSignature {
   Args: {};

web/app/components/footer.ts

@@ -13,3 +13,9 @@ export default class FooterComponent extends Component {
     return new Date().getFullYear();
   }
 }
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    Footer: typeof FooterComponent;
+  }
+}

web/app/components/header/nav.hbs

@@ -75,14 +75,16 @@
             class="text-body-200"
           />
           <dd.Separator class="mt-2" />
+          <dd.Interactive
+            data-test-user-menu-item="support"
+            @route="support"
+            @text="Support"
+            class={{if this.userMenuHighlightIsShown "highlighted-new"}}
+          />
           <dd.Interactive
             data-test-user-menu-item="email-notifications"
             @route="authenticated.settings"
             @text="Email notifications"
-            class={{if
-              this.emailNotificationsHighlightIsShown
-              "highlighted-new"
-            }}
           />
           {{#if this.showSignOut}}
             <dd.Interactive

web/app/components/header/nav.ts

@@ -9,11 +9,16 @@ import AuthenticatedUserService, {
 } from "hermes/services/authenticated-user";
 import window from "ember-window-mock";
 import { tracked } from "@glimmer/tracking";
+import Ember from "ember";
 
 interface HeaderNavComponentSignature {
   Args: {};
 }
 
+export const NEW_NAV_ITEM_LOCAL_STORAGE_KEY = Ember.testing
+  ? "test-supportHighlightIsShown"
+  : "july-26-2023-supportHighlightIsShown";
+
 export default class HeaderNavComponent extends Component<HeaderNavComponentSignature> {
   @service("config") declare configSvc: ConfigService;
   @service declare session: SessionService;
@@ -49,35 +54,32 @@ export default class HeaderNavComponent extends Component<HeaderNavComponentSign
    * Whether to the "new" badge should appear on the email notifications menuitem.
    * Will be false if the user has previously closed the dropdown.
    */
-  @tracked protected emailNotificationsHighlightIsShown =
-    window.localStorage.getItem("emailNotificationsHighlightIsShown") !==
-    "false";
+  @tracked protected localStorageItemIsFalse =
+    window.localStorage.getItem(NEW_NAV_ITEM_LOCAL_STORAGE_KEY) === "false";
 
   /**
    * Whether a highlight icon should appear over the user avatar.
    * True when the user hasn't seen the menu's active highlights,
    * (i.e., when we've just announced a feature), as determined by localStorage.
    * Set false when the user menu is opened.
    */
-  @tracked protected userMenuHighlightIsShown =
-    this.emailNotificationsHighlightIsShown;
+  @tracked protected userMenuHighlightIsShown = !this.localStorageItemIsFalse;
 
   /**
    * The actions to take when the dropdown menu is opened.
    * Force-hides the highlight icon if it's open.
    * (We assume the user to have seen the highlight when they open the menu.)
    */
   @action protected onDropdownOpen(): void {
-    this.userMenuHighlightIsShown = false;
-    window.localStorage.setItem("emailNotificationsHighlightIsShown", "false");
+    window.localStorage.setItem(NEW_NAV_ITEM_LOCAL_STORAGE_KEY, "false");
   }
 
   /**
    * The actions to take when the dropdown menu is closed.
    * Force-hides the emailNotificationsHighlight if it's visible.
    */
   @action protected onDropdownClose(): void {
-    this.emailNotificationsHighlightIsShown = false;
+    this.userMenuHighlightIsShown = false;
   }
 
   @action protected invalidateSession(): void {
@@ -87,7 +89,6 @@ export default class HeaderNavComponent extends Component<HeaderNavComponentSign
 
 declare module "@glint/environment-ember-loose/registry" {
   export default interface Registry {
-    'Header::Nav': typeof HeaderNavComponent;
+    "Header::Nav": typeof HeaderNavComponent;
   }
 }
-

web/app/components/hermes-logo.ts

@@ -6,3 +6,9 @@ interface HermesLogoComponentSignature {
 }
 
 export default class HermesLogoComponent extends Component<HermesLogoComponentSignature> {}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    HermesLogo: typeof HermesLogoComponent;
+  }
+}

web/app/components/support/index.hbs

@@ -0,0 +1,62 @@
+<div class="w-full max-w-3xl mx-auto">
+  <div class="grid place-items-center h-16">
+    <LinkTo @route="authenticated.dashboard" class="header-link">
+      <FlightIcon @name="arrow-left" />
+      <span>Back to the Dashboard</span>
+    </LinkTo>
+  </div>
+
+  <Hds::Card::Container
+    @level="high"
+    @hasBorder={{true}}
+    @overflow="visible"
+    class="page-card"
+  >
+    <div class="hermes-support-header">
+      <LinkTo @route="authenticated.dashboard">
+        <HermesLogo />
+      </LinkTo>
+      <Hds::Badge @text="Support" @color="success" @type="inverted" />
+    </div>
+
+    <ul class="content-sections">
+      {{#each @docs.sections as |section|}}
+        <li class="content-section">
+          <h2 class="hermes-h4">
+            {{#if section.titleIcon}}
+              <FlightIcon @name={{section.titleIcon}} />
+            {{/if}}
+            <span>
+              {{section.title}}
+            </span>
+          </h2>
+          <ul class="content-section-items">
+            {{#each section.items as |item|}}
+              <li>
+                <h4>{{item.title}}</h4>
+                <div>
+                  {{markdown-to-html item.content}}
+                </div>
+                {{#if item.links}}
+                  <ul class="links">
+                    {{#each item.links as |link|}}
+                      <li>
+                        <ExternalLink href={{link.url}}>
+                          {{#if link.icon}}
+                            <FlightIcon @name={{link.icon}} />
+                          {{/if}}
+                          <span>{{link.title}}</span>
+                        </ExternalLink>
+                      </li>
+                    {{/each}}
+                  </ul>
+                {{/if}}
+              </li>
+            {{/each}}
+          </ul>
+        </li>
+      {{/each}}
+    </ul>
+  </Hds::Card::Container>
+  <Footer />
+</div>

web/app/components/support/index.ts

@@ -0,0 +1,15 @@
+import Component from "@glimmer/component";
+
+interface SupportComponentSignature {
+  Args: {
+    docs: any;
+  };
+}
+
+export default class SupportComponent extends Component<SupportComponentSignature> {}
+
+declare module "@glint/environment-ember-loose/registry" {
+  export default interface Registry {
+    Support: typeof SupportComponent;
+  }
+}

web/app/router.js

@@ -20,5 +20,6 @@ Router.map(function () {
     });
   });
   this.route("authenticate");
-  this.route('404', { path: '/*path' })
+  this.route("404", { path: "/*path" });
+  this.route("support");
 });

web/app/routes/support.ts

@@ -0,0 +1,120 @@
+import Route from "@ember/routing/route";
+
+const insertIcon = (icon: string, optionalClassName?: string) => {
+  return `
+    <span class="inline-icon ${optionalClassName}">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        class="flight-icon icon-${icon}"
+        aria-label="${icon}"
+        fill="currentColor"
+        width="16"
+        height="16"
+        viewBox="0 0 16 16"
+      >
+        <use href="#flight-${icon}-16"></use>
+      </svg>
+    </span>
+  `;
+};
+
+export default class SupportRoute extends Route {
+  model() {
+    return {
+      sections: [
+        {
+          title: "Known limitations",
+          titleIcon: "alert-diamond",
+          items: [
+            {
+              title: "Doc suggestions must be accepted off-site",
+              content: `Unfortunately, Google disables this function for embedded documents like you see in Hermes. To accept suggestions, you'll need to open your document directly in Google. Look for the ${insertIcon(
+                "external-link"
+              )} button in the Hermes document sidebar.\nnd ain't that the truth pal.`,
+            },
+            {
+              title: "Suggestions in the header will lock your document.",
+              content:
+                "If this happens, remove the suggestions from your document header, wait a few minutes (for Hermes to notice the change), then refresh. If your document is still locked after 10 minutes, please get in touch.",
+            },
+            {
+              title: 'You must manually enable "all notifications."',
+              content: `By default, you'll get emailed about @-mentions and threads involving you. To receive all comments, you'll need to open your doc in Google (${insertIcon(
+                "external-link",
+                "with-parentheses"
+              )}), then [follow these instructions](https://support.google.com/docs/answer/91588).`,
+            },
+          ],
+        },
+        {
+          title: "Frequency asked questions",
+          titleIcon: "discussion-square",
+          items: [
+            {
+              title: "Why am I getting 400 errors from Google?",
+              content:
+                "This is usually caused by content blockers or browser security settings. Safe-listing the Hermes domain will typically resolve the issue.",
+            },
+            {
+              title: "Why did Hermes assign the wrong document number?",
+              content:
+                "Generally this happens when a document created outside of Hermes is moved into the Hermes folder. We don't have an automated fix for this yet.",
+            },
+            {
+              title: "How do I add teams as contributors/approvers?",
+              content:
+                "We don't yet support team and group email addresses, so you'll need to invite them off-site. If you want to share a draft, be sure to make it \"Shareable\" first.",
+            },
+            {
+              title: "How do I delete a document?",
+              content: `Published docs can't be deleted, only archived (${insertIcon(
+                "archive",
+                "with-parentheses"
+              )}). Drafts, on the other hand, can be deleted using the ${insertIcon(
+                "trash",
+                "critical"
+              )} button the document sidebar.`,
+            },
+            {
+              title: "Can I transfer or share document ownership?",
+              content: "Our current implementation doesn't yet support this.",
+            },
+            {
+              title: "Why aren't drafts showing up in the shared Drive folder?",
+              content:
+                "Drafts are kept out of the shared folder until they're published. If you need to find the file on Drive, you'll have to search it by name.",
+            },
+          ],
+        },
+        {
+          title: "Additional help",
+          titleIcon: "support",
+          items: [
+            {
+              title: "Still have a question, bug, or request?",
+              content:
+                "HashiCorp employees are encouraged to contact us on Slack. Open-source users should reach out on GitHub Issues.",
+              links: [
+                {
+                  title: "TODO:slackName",
+                  icon: "slack",
+                  url: "TODO:slackURL",
+                },
+                {
+                  title: "TODO:emailName",
+                  icon: "mail",
+                  url: "mailto:TODO:EMAIL",
+                },
+                {
+                  title: "GitHub Issues",
+                  icon: "github",
+                  url: "https://github.com/hashicorp-forge/hermes/issues",
+                },
+              ],
+            },
+          ],
+        },
+      ],
+    };
+  }
+}

web/app/styles/app.scss

@@ -3,7 +3,7 @@
 @use "./animations";
 @use "./typography";
 
-
+@use "routes/support";
 @use "components/action";
 @use "components/toolbar";
 @use "components/tooltip";