Add "Me" label to Person component (#417)

* Say "Me" if it's me

* Add test helper

web/app/components/person/index.hbs

@@ -17,9 +17,9 @@
     <div
       data-test-person-email
       class="person-email hds-typography-body-200 hds-foreground-primary relative truncate"
-      title={{@email}}
+      title={{this.label}}
     >
-      {{or @email "Unknown"}}
+      {{this.label}}
     </div>
   </div>
 {{/unless}}

web/app/components/person/index.ts

@@ -1,4 +1,6 @@
+import { inject as service } from "@ember/service";
 import Component from "@glimmer/component";
+import AuthenticatedUserService from "hermes/services/authenticated-user";
 
 interface PersonComponentSignature {
   Element: HTMLDivElement;
@@ -11,9 +13,19 @@ interface PersonComponentSignature {
 }
 
 export default class PersonComponent extends Component<PersonComponentSignature> {
+  @service declare authenticatedUser: AuthenticatedUserService;
+
   get isHidden() {
     return this.args.ignoreUnknown && !this.args.email;
   }
+
+  protected get label() {
+    if (this.args.email === this.authenticatedUser.info.email) {
+      return "Me";
+    }
+
+    return this.args.email ?? "Unknown";
+  }
 }
 
 declare module "@glint/environment-ember-loose/registry" {

web/app/utils/mirage-utils.ts

@@ -0,0 +1,20 @@
+import { MirageTestContext } from "ember-cli-mirage/test-support";
+import AuthenticatedUserService from "hermes/services/authenticated-user";
+
+export const TEST_USER_NAME = "Test user";
+export const TEST_USER_EMAIL = "testuser@hashicorp.com";
+export const TEST_USER_GIVEN_NAME = "Test";
+
+export function authenticateTestUser(mirageContext: MirageTestContext) {
+  const authenticatedUserService = mirageContext.owner.lookup(
+    "service:authenticated-user",
+  ) as AuthenticatedUserService;
+
+  authenticatedUserService._info = {
+    name: TEST_USER_NAME,
+    email: TEST_USER_EMAIL,
+    given_name: TEST_USER_GIVEN_NAME,
+    picture: "",
+    subscriptions: [],
+  };
+}

web/tests/integration/components/custom-editable-field-test.ts

@@ -4,6 +4,7 @@ import { click, fillIn, find, findAll, render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
 import { HermesDocument, HermesUser } from "hermes/types/document";
+import { authenticateTestUser } from "hermes/utils/mirage-utils";
 
 interface CustomEditableFieldComponentTestContext extends MirageTestContext {
   attributes: any;
@@ -17,6 +18,7 @@ module("Integration | Component | custom-editable-field", function (hooks) {
   setupMirage(hooks);
 
   hooks.beforeEach(function (this: CustomEditableFieldComponentTestContext) {
+    authenticateTestUser(this);
     this.server.createList("person", 10);
     this.server.create("document");
 

web/tests/integration/components/editable-field-test.ts

@@ -2,6 +2,7 @@ import { click, fillIn, render, triggerKeyEvent } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
 import { MirageTestContext } from "ember-cli-mirage/test-support";
 import { setupRenderingTest } from "ember-qunit";
+import { authenticateTestUser } from "hermes/utils/mirage-utils";
 import { module, test } from "qunit";
 
 const EDITABLE_FIELD = ".editable-field";
@@ -31,6 +32,7 @@ module("Integration | Component | editable-field", function (hooks) {
   setupRenderingTest(hooks);
 
   hooks.beforeEach(function (this: EditableFieldComponentTestContext) {
+    authenticateTestUser(this);
     this.set("onCommit", () => {});
   });
 

web/tests/integration/components/editable-field/read-value-test.ts

@@ -1,17 +1,24 @@
-import { TestContext, render } from "@ember/test-helpers";
+import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
+import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
 import { setupRenderingTest } from "ember-qunit";
 import { HermesUser } from "hermes/types/document";
+import { authenticateTestUser } from "hermes/utils/mirage-utils";
 import { module, test } from "qunit";
 
-interface EditableFieldReadValueComponentTestContext extends TestContext {
+interface EditableFieldReadValueComponentTestContext extends MirageTestContext {
   tag?: "h1";
   value?: string | HermesUser[];
   placeholder?: string;
 }
 
 module("Integration | Component | editable-field/read-value", function (hooks) {
   setupRenderingTest(hooks);
+  setupMirage(hooks);
+
+  hooks.beforeEach(function (this: EditableFieldReadValueComponentTestContext) {
+    authenticateTestUser(this);
+  });
 
   test("it renders the correct tag", async function (this: EditableFieldReadValueComponentTestContext, assert) {
     this.set("tag", "h1");

web/tests/integration/components/header/search-test.ts

@@ -4,6 +4,7 @@ import { hbs } from "ember-cli-htmlbars";
 import { click, fillIn, render, triggerKeyEvent } from "@ember/test-helpers";
 import { setupMirage } from "ember-cli-mirage/test-support";
 import { MirageTestContext } from "ember-cli-mirage/test-support";
+import { authenticateTestUser } from "hermes/utils/mirage-utils";
 
 const KEYBOARD_SHORTCUT_SELECTOR = ".global-search-shortcut-affordance";
 const SEARCH_INPUT_SELECTOR = "[data-test-global-search-input]";
@@ -24,6 +25,7 @@ module("Integration | Component | header/search", function (hooks) {
   setupMirage(hooks);
 
   hooks.beforeEach(function (this: HeaderSearchTestContext) {
+    authenticateTestUser(this);
     this.server.createList("document", 10);
   });
 
@@ -49,7 +51,7 @@ module("Integration | Component | header/search", function (hooks) {
     assert
       .dom(KEYBOARD_SHORTCUT_SELECTOR)
       .doesNotExist(
-        "the keyboard shortcut icon is hidden when the user enters a query"
+        "the keyboard shortcut icon is hidden when the user enters a query",
       );
   });
 

web/tests/integration/components/inputs/people-select-test.ts

@@ -6,6 +6,7 @@ import { setupMirage } from "ember-cli-mirage/test-support";
 import { MirageTestContext } from "ember-cli-mirage/test-support";
 import { HermesUser } from "hermes/types/document";
 import FetchService from "hermes/services/fetch";
+import { authenticateTestUser } from "hermes/utils/mirage-utils";
 
 interface PeopleSelectContext extends MirageTestContext {
   people: HermesUser[];
@@ -17,6 +18,10 @@ module("Integration | Component | inputs/people-select", function (hooks) {
   setupRenderingTest(hooks);
   setupMirage(hooks);
 
+  hooks.beforeEach(function (this: PeopleSelectContext) {
+    authenticateTestUser(this);
+  });
+
   test("it functions as expected", async function (this: PeopleSelectContext, assert) {
     this.server.createList("person", 10);
 

web/tests/integration/components/person-test.js → web/tests/integration/components/person-test.ts

@@ -2,16 +2,33 @@ import { module, test } from "qunit";
 import { setupRenderingTest } from "ember-qunit";
 import { render } from "@ember/test-helpers";
 import { hbs } from "ember-cli-htmlbars";
+import { MirageTestContext, setupMirage } from "ember-cli-mirage/test-support";
+import {
+  TEST_USER_EMAIL,
+  authenticateTestUser,
+} from "hermes/utils/mirage-utils";
+
+interface PersonComponentTestContext extends MirageTestContext {
+  ignoreUnknown: boolean;
+  imgURL: string;
+  email: string;
+  badge: string | undefined;
+}
 
 module("Integration | Component | person", function (hooks) {
   setupRenderingTest(hooks);
+  setupMirage(hooks);
 
-  test("it renders correctly", async function (assert) {
+  hooks.beforeEach(function (this: PersonComponentTestContext) {
+    authenticateTestUser(this);
+  });
+
+  test("it renders correctly", async function (this: PersonComponentTestContext, assert) {
     this.set("ignoreUnknown", false);
     this.set("imgURL", "https://hashicorp-avatar-url.com");
     this.set("email", "engineering@hashicorp.com");
 
-    await render(hbs`
+    await render<PersonComponentTestContext>(hbs`
         <Person
           @ignoreUnknown={{this.ignoreUnknown}}
           @imgURL={{this.imgURL}}
@@ -48,13 +65,11 @@ module("Integration | Component | person", function (hooks) {
     assert.dom(".person").doesNotExist();
   });
 
-  test("it renders a contextual checkmark", async function (assert) {
-    this.set("badge", null);
+  test("it renders a contextual checkmark", async function (this: PersonComponentTestContext, assert) {
+    this.set("badge", undefined);
 
-    await render(hbs`
-      <Person
-        @badge={{this.badge}}
-      />
+    await render<PersonComponentTestContext>(hbs`
+      <Person @email="" @badge={{this.badge}} />
     `);
 
     assert.dom("[data-test-person-approved-badge]").doesNotExist();
@@ -69,4 +84,14 @@ module("Integration | Component | person", function (hooks) {
       .dom("[data-test-person-approved-badge]")
       .doesNotExist("only shows a badge if the correct value is passed in");
   });
+
+  test(`the person is labeled "Me" if it's them`, async function (this: PersonComponentTestContext, assert) {
+    this.set("email", TEST_USER_EMAIL);
+
+    await render<PersonComponentTestContext>(hbs`
+      <Person @email={{this.email}} />
+    `);
+
+    assert.dom(".person-email").hasText("Me");
+  });
 });