feat(www): change which issue types are shown in new contact view bas…

…ed on the variant (#1736)

* Change which issue types are shown based on the variant.

* Remove debug logs.

* Add test cases for the issue type list.

* Refactor tests to separate different behaviors.

* Remove unused message from original messages file.

resources/original_messages.json

@@ -119,10 +119,6 @@
     "description": "Item in a dropdown menu on our contact page to select the issue the user is trying to contact support about.",
     "message": "General feedback & suggestions"
   },
-  "contact_view_issue_installation": {
-    "description": "Item in a dropdown menu on our contact page to select the issue the user is trying to contact support about.",
-    "message": "I am having trouble installing Outline"
-  },
   "contact_view_issue_managing": {
     "description": "Item in a dropdown menu on our contact page to select the issue the user is trying to contact support about.",
     "message": "I need assistance managing my Outline VPN server or helping others connect to it"

src/www/messages/en.json

@@ -18,7 +18,6 @@
   "contact-view-issue-cannot-add-server": "I am having trouble adding a server using my access key",
   "contact-view-issue-connection": "I am having trouble connecting to my Outline VPN server",
   "contact-view-issue-general": "General feedback & suggestions",
-  "contact-view-issue-installation": "I am having trouble installing Outline",
   "contact-view-issue-managing": "I need assistance managing my Outline VPN server or helping others connect to it",
   "contact-view-issue-no-server": "I need an access key",
   "contact-view-issue-performance": "My internet access is slow while connected to my Outline VPN server",

src/www/views/contact_view/index.spec.ts

@@ -20,8 +20,10 @@ import {fixture, html, nextFrame, oneEvent} from '@open-wc/testing';
 import {SupportForm} from './support_form';
 import {OutlineErrorReporter, SentryErrorReporter} from '../../shared/error_reporter';
 import {localize} from '../../testing/localize';
+import {ListItemBase} from '@material/mwc-list/mwc-list-item-base';
+import {Select} from '@material/mwc-select';
 
-describe('ContactView', () => {
+describe('ContactView client variant', () => {
   let el: ContactView;
   let mockErrorReporter: jasmine.SpyObj<OutlineErrorReporter>;
 
@@ -30,7 +32,9 @@ describe('ContactView', () => {
       'SentryErrorReporter',
       Object.getOwnPropertyNames(SentryErrorReporter.prototype)
     );
-    el = await fixture(html` <contact-view .localize=${localize} .errorReporter=${mockErrorReporter}></contact-view> `);
+    el = await fixture(
+      html` <contact-view .localize=${localize} variant="client" .errorReporter=${mockErrorReporter}></contact-view> `
+    );
   });
 
   it('is defined', async () => {
@@ -56,17 +60,30 @@ describe('ContactView', () => {
     expect(exitCard.textContent).toContain('experiencing high support volume');
   });
 
-  it('shows issue selector if the user selects that they have no open tickets', async () => {
-    const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
-    radioButton.click();
-    await nextFrame();
+  describe('when the user selects that they have no open tickets', () => {
+    let issueSelector: Select;
+
+    beforeEach(async () => {
+      const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
+      radioButton.click();
+      await nextFrame();
 
-    const issueSelector = el.shadowRoot!.querySelector('mwc-select');
-    expect(issueSelector?.hasAttribute('hidden')).toBeFalse();
+      issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
+    });
+
+    it('shows the issue selector', () => {
+      expect(issueSelector.hasAttribute('hidden')).toBeFalse();
+    });
+
+    it('shows the correct items in the selector', () => {
+      const issueItemEls = issueSelector.querySelectorAll('mwc-list-item');
+      const issueTypes = Array.from(issueItemEls).map((el: ListItemBase) => el.value);
+      expect(issueTypes).toEqual(['no-server', 'cannot-add-server', 'connection', 'performance', 'general']);
+    });
   });
 
   describe('when the user selects issue', () => {
-    let issueSelector: HTMLElement;
+    let issueSelector: Select;
 
     beforeEach(async () => {
       issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
@@ -150,3 +167,39 @@ describe('ContactView', () => {
     });
   });
 });
+
+describe('ContactView manager variant', () => {
+  let el: ContactView;
+
+  describe('when the user selects that they have no open tickets', () => {
+    let issueSelector: Select;
+
+    beforeEach(async () => {
+      const mockErrorReporter: jasmine.SpyObj<OutlineErrorReporter> = jasmine.createSpyObj(
+        'SentryErrorReporter',
+        Object.getOwnPropertyNames(SentryErrorReporter.prototype)
+      );
+      el = await fixture(
+        html`
+          <contact-view .localize=${localize} variant="manager" .errorReporter=${mockErrorReporter}></contact-view>
+        `
+      );
+
+      const radioButton = el.shadowRoot!.querySelectorAll('mwc-formfield mwc-radio')[1] as HTMLElement;
+      radioButton.click();
+      await nextFrame();
+
+      issueSelector = el.shadowRoot!.querySelector('mwc-select')!;
+    });
+
+    it('shows the issue selector', () => {
+      expect(issueSelector.hasAttribute('hidden')).toBeFalse();
+    });
+
+    it('shows the correct items in the selector', () => {
+      const issueItemEls = issueSelector.querySelectorAll('mwc-list-item');
+      const issueTypes = Array.from(issueItemEls).map((el: ListItemBase) => el.value);
+      expect(issueTypes).toEqual(['cannot-add-server', 'connection', 'managing', 'general']);
+    });
+  });
+});

src/www/views/contact_view/index.ts

@@ -90,7 +90,16 @@ export class ContactView extends LitElement {
     `,
   ];
 
-  private static readonly ISSUES = Object.values(IssueType);
+  private static readonly ISSUES: {[key in AppType]: IssueType[]} = {
+    [AppType.CLIENT]: [
+      IssueType.NO_SERVER,
+      IssueType.CANNOT_ADD_SERVER,
+      IssueType.CONNECTION,
+      IssueType.PERFORMANCE,
+      IssueType.GENERAL,
+    ],
+    [AppType.MANAGER]: [IssueType.CANNOT_ADD_SERVER, IssueType.CONNECTION, IssueType.MANAGING, IssueType.GENERAL],
+  };
 
   @property({type: Function}) localize: Localizer = msg => msg;
   @property({type: String}) variant: AppType = AppType.CLIENT;
@@ -137,7 +146,7 @@ export class ContactView extends LitElement {
   }
 
   private selectIssue(e: SingleSelectedEvent) {
-    this.selectedIssueType = ContactView.ISSUES[e.detail.index];
+    this.selectedIssueType = ContactView.ISSUES[this.variant][e.detail.index];
 
     if (UNSUPPORTED_ISSUE_TYPE_HELPPAGES.has(this.selectedIssueType)) {
       // TODO: Send users to localized support pages based on chosen language.
@@ -252,7 +261,7 @@ export class ContactView extends LitElement {
             ?hidden=${!this.showIssueSelector}
             @selected="${this.selectIssue}"
           >
-            ${ContactView.ISSUES.map(value => {
+            ${ContactView.ISSUES[this.variant].map(value => {
               return html`
                 <mwc-list-item value="${value}">
                   <span>${this.localize(`contact-view-issue-${value}`)}</span>

src/www/views/contact_view/issue_type.ts

@@ -16,7 +16,6 @@
 
 /** Supported issue types in the feedback flow. */
 export enum IssueType {
-  INSTALLATION = 'installation',
   NO_SERVER = 'no-server',
   CANNOT_ADD_SERVER = 'cannot-add-server',
   CONNECTION = 'connection',