feat(settings): show account hostname

src/__mocks__/mock-state.ts

@@ -17,4 +17,5 @@ export const mockSettings: SettingsState = {
   theme: Theme.SYSTEM,
   colors: false,
   markAsDoneOnOpen: false,
+  showAccountHostname: false,
 };

src/context/App.test.tsx

@@ -300,6 +300,7 @@ describe('context/App.tsx', () => {
         theme: 'SYSTEM',
         colors: null,
         markAsDoneOnOpen: false,
+        showAccountHostname: false,
       },
     );
   });
@@ -340,6 +341,7 @@ describe('context/App.tsx', () => {
         theme: 'SYSTEM',
         colors: null,
         markAsDoneOnOpen: false,
+        showAccountHostname: false,
       },
     );
   });

src/context/App.tsx

@@ -41,6 +41,7 @@ export const defaultSettings: SettingsState = {
   theme: Theme.SYSTEM,
   colors: null,
   markAsDoneOnOpen: false,
+  showAccountHostname: false,
 };
 
 interface AppContextState {

src/routes/Notifications.test.tsx

@@ -4,6 +4,7 @@ import TestRenderer from 'react-test-renderer';
 import { AppContext } from '../context/App';
 import { mockedAccountNotifications } from '../__mocks__/mockedData';
 import { NotificationsRoute } from './Notifications';
+import { mockSettings } from '../__mocks__/mock-state';
 
 jest.mock('../components/AccountNotifications', () => ({
   AccountNotifications: 'AccountNotifications',
@@ -39,6 +40,20 @@ describe('routes/Notifications.tsx', () => {
     expect(tree).toMatchSnapshot();
   });
 
+  it('should render itself & its children (show account hostname)', () => {
+    const tree = TestRenderer.create(
+      <AppContext.Provider
+        value={{
+          notifications: [mockedAccountNotifications[0]],
+          settings: { ...mockSettings, showAccountHostname: true },
+        }}
+      >
+        <NotificationsRoute />
+      </AppContext.Provider>,
+    );
+    expect(tree).toMatchSnapshot();
+  });
+
   it('should render itself & its children (error page - oops)', () => {
     const tree = TestRenderer.create(
       <AppContext.Provider value={{ notifications: [], requestFailed: true }}>

src/routes/Notifications.tsx

@@ -7,7 +7,7 @@ import { Oops } from '../components/Oops';
 import { getNotificationCount } from '../utils/notifications';
 
 export const NotificationsRoute: React.FC = (props) => {
-  const { notifications, requestFailed } = useContext(AppContext);
+  const { notifications, requestFailed, settings } = useContext(AppContext);
 
   const hasMultipleAccounts = useMemo(
     () => notifications.length > 1,
@@ -37,7 +37,9 @@ export const NotificationsRoute: React.FC = (props) => {
           key={account.hostname}
           hostname={account.hostname}
           notifications={account.notifications}
-          showAccountHostname={hasMultipleAccounts}
+          showAccountHostname={
+            hasMultipleAccounts || settings.showAccountHostname
+          }
         />
       ))}
     </div>

src/routes/Settings.test.tsx

@@ -156,6 +156,34 @@ describe('routes/Settings.tsx', () => {
     expect(updateSetting).toHaveBeenCalledWith('showBots', false);
   });
 
+  it('should toggle the showAccountHostname checkbox', async () => {
+    let getByLabelText;
+
+    await act(async () => {
+      const { getByLabelText: getByLabelTextLocal } = render(
+        <AppContext.Provider
+          value={{
+            settings: mockSettings,
+            accounts: mockAccounts,
+            updateSetting,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+      getByLabelText = getByLabelTextLocal;
+    });
+
+    fireEvent.click(getByLabelText('Show account hostname'), {
+      target: { checked: true },
+    });
+
+    expect(updateSetting).toHaveBeenCalledTimes(1);
+    expect(updateSetting).toHaveBeenCalledWith('showAccountHostname', false);
+  });
+
   it('should toggle the showNotificationsCountInTray checkbox', async () => {
     let getByLabelText;
 

src/routes/Settings.tsx

@@ -139,6 +139,14 @@ export const SettingsRoute: React.FC = () => {
             }
             disabled={!colorScope}
           />
+          <FieldCheckbox
+            name="showAccountHostname"
+            label="Show account hostname"
+            checked={settings.showAccountHostname}
+            onChange={(evt) =>
+              updateSetting('showAccountHostname', evt.target.checked)
+            }
+          />
         </fieldset>
 
         <fieldset className="mb-3">

src/routes/__snapshots__/Notifications.test.tsx.snap

@@ -4,6 +4,148 @@ exports[`routes/Notifications.tsx should render itself & its children (all read
 
 exports[`routes/Notifications.tsx should render itself & its children (error page - oops) 1`] = `<Oops />`;
 
+exports[`routes/Notifications.tsx should render itself & its children (show account hostname) 1`] = `
+<div
+  className="flex flex-col flex-1 bg-white dark:bg-gray-dark"
+>
+  <AccountNotifications
+    hostname="github.com"
+    notifications={
+      [
+        {
+          "hostname": "github.com",
+          "id": "138661096",
+          "last_read_at": "2017-05-20T17:06:51Z",
+          "reason": "subscribed",
+          "repository": {
+            "archive_url": "https://api.github.com/repos/manosim/notifications-test/{archive_format}{/ref}",
+            "assignees_url": "https://api.github.com/repos/manosim/notifications-test/assignees{/user}",
+            "blobs_url": "https://api.github.com/repos/manosim/notifications-test/git/blobs{/sha}",
+            "branches_url": "https://api.github.com/repos/manosim/notifications-test/branches{/branch}",
+            "collaborators_url": "https://api.github.com/repos/manosim/notifications-test/collaborators{/collaborator}",
+            "comments_url": "https://api.github.com/repos/manosim/notifications-test/comments{/number}",
+            "commits_url": "https://api.github.com/repos/manosim/notifications-test/commits{/sha}",
+            "compare_url": "https://api.github.com/repos/manosim/notifications-test/compare/{base}...{head}",
+            "contents_url": "https://api.github.com/repos/manosim/notifications-test/contents/{+path}",
+            "contributors_url": "https://api.github.com/repos/manosim/notifications-test/contributors",
+            "deployments_url": "https://api.github.com/repos/manosim/notifications-test/deployments",
+            "description": "Test Repository",
+            "downloads_url": "https://api.github.com/repos/manosim/notifications-test/downloads",
+            "events_url": "https://api.github.com/repos/manosim/notifications-test/events",
+            "fork": false,
+            "forks_url": "https://api.github.com/repos/manosim/notifications-test/forks",
+            "full_name": "manosim/notifications-test",
+            "git_commits_url": "https://api.github.com/repos/manosim/notifications-test/git/commits{/sha}",
+            "git_refs_url": "https://api.github.com/repos/manosim/notifications-test/git/refs{/sha}",
+            "git_tags_url": "https://api.github.com/repos/manosim/notifications-test/git/tags{/sha}",
+            "hooks_url": "https://api.github.com/repos/manosim/notifications-test/hooks",
+            "html_url": "https://github.com/manosim/notifications-test",
+            "id": 57216596,
+            "issue_comment_url": "https://api.github.com/repos/manosim/notifications-test/issues/comments{/number}",
+            "issue_events_url": "https://api.github.com/repos/manosim/notifications-test/issues/events{/number}",
+            "issues_url": "https://api.github.com/repos/manosim/notifications-test/issues{/number}",
+            "keys_url": "https://api.github.com/repos/manosim/notifications-test/keys{/key_id}",
+            "labels_url": "https://api.github.com/repos/manosim/notifications-test/labels{/name}",
+            "languages_url": "https://api.github.com/repos/manosim/notifications-test/languages",
+            "merges_url": "https://api.github.com/repos/manosim/notifications-test/merges",
+            "milestones_url": "https://api.github.com/repos/manosim/notifications-test/milestones{/number}",
+            "name": "notifications-test",
+            "node_id": "MDEwOlJlcG9zaXRvcnkzNjAyOTcwNg==",
+            "notifications_url": "https://api.github.com/repos/manosim/notifications-test/notifications{?since,all,participating}",
+            "owner": {
+              "avatar_url": "https://avatars0.githubusercontent.com/u/6333409?v=3",
+              "events_url": "https://api.github.com/users/manosim/events{/privacy}",
+              "followers_url": "https://api.github.com/users/manosim/followers",
+              "following_url": "https://api.github.com/users/manosim/following{/other_user}",
+              "gists_url": "https://api.github.com/users/manosim/gists{/gist_id}",
+              "gravatar_id": "",
+              "html_url": "https://github.com/manosim",
+              "id": 6333409,
+              "login": "manosim",
+              "node_id": "MDQ6VXNlcjYzMzM0MDk=",
+              "organizations_url": "https://api.github.com/users/manosim/orgs",
+              "received_events_url": "https://api.github.com/users/manosim/received_events",
+              "repos_url": "https://api.github.com/users/manosim/repos",
+              "site_admin": false,
+              "starred_url": "https://api.github.com/users/manosim/starred{/owner}{/repo}",
+              "subscriptions_url": "https://api.github.com/users/manosim/subscriptions",
+              "type": "User",
+              "url": "https://api.github.com/users/manosim",
+            },
+            "private": true,
+            "pulls_url": "https://api.github.com/repos/manosim/notifications-test/pulls{/number}",
+            "releases_url": "https://api.github.com/repos/manosim/notifications-test/releases{/id}",
+            "stargazers_url": "https://api.github.com/repos/manosim/notifications-test/stargazers",
+            "statuses_url": "https://api.github.com/repos/manosim/notifications-test/statuses/{sha}",
+            "subscribers_url": "https://api.github.com/repos/manosim/notifications-test/subscribers",
+            "subscription_url": "https://api.github.com/repos/manosim/notifications-test/subscription",
+            "tags_url": "https://api.github.com/repos/manosim/notifications-test/tags",
+            "teams_url": "https://api.github.com/repos/manosim/notifications-test/teams",
+            "trees_url": "https://api.github.com/repos/manosim/notifications-test/git/trees{/sha}",
+            "url": "https://api.github.com/manosim/notifications-test",
+          },
+          "subject": {
+            "latest_comment_url": "https://api.github.com/repos/manosim/notifications-test/issues/comments/302888448",
+            "state": "open",
+            "title": "I am a robot and this is a test!",
+            "type": "Issue",
+            "url": "https://api.github.com/repos/manosim/notifications-test/issues/1",
+          },
+          "subscription_url": "https://api.github.com/notifications/threads/138661096/subscription",
+          "unread": true,
+          "updated_at": "2017-05-20T17:51:57Z",
+          "url": "https://api.github.com/notifications/threads/138661096",
+        },
+        {
+          "id": "148827438",
+          "last_read_at": "2017-05-20T16:59:03Z",
+          "reason": "author",
+          "repository": {
+            "description": null,
+            "fork": false,
+            "full_name": "manosim/notifications-test",
+            "html_url": "https://github.com/manosim/notifications-test",
+            "id": 57216596,
+            "name": "notifications-test",
+            "owner": {
+              "avatar_url": "https://avatars0.githubusercontent.com/u/6333409?v=3",
+              "events_url": "https://api.github.com/users/manosim/events{/privacy}",
+              "followers_url": "https://api.github.com/users/manosim/followers",
+              "following_url": "https://api.github.com/users/manosim/following{/other_user}",
+              "gists_url": "https://api.github.com/users/manosim/gists{/gist_id}",
+              "gravatar_id": "",
+              "html_url": "https://github.com/manosim",
+              "id": 6333409,
+              "login": "manosim",
+              "organizations_url": "https://api.github.com/users/manosim/orgs",
+              "received_events_url": "https://api.github.com/users/manosim/received_events",
+              "repos_url": "https://api.github.com/users/manosim/repos",
+              "site_admin": false,
+              "starred_url": "https://api.github.com/users/manosim/starred{/owner}{/repo}",
+              "subscriptions_url": "https://api.github.com/users/manosim/subscriptions",
+              "type": "User",
+              "url": "https://api.github.com/users/manosim",
+            },
+            "private": true,
+          },
+          "subject": {
+            "latest_comment_url": "https://api.github.com/repos/manosim/notifications-test/issues/comments/302885965",
+            "title": "Improve the UI",
+            "type": "Issue",
+            "url": "https://api.github.com/repos/manosim/notifications-test/issues/4",
+          },
+          "subscription_url": "https://api.github.com/notifications/threads/148827438/subscription",
+          "unread": true,
+          "updated_at": "2017-05-20T17:06:34Z",
+          "url": "https://api.github.com/notifications/threads/148827438",
+        },
+      ]
+    }
+    showAccountHostname={true}
+  />
+</div>
+`;
+
 exports[`routes/Notifications.tsx should render itself & its children (with notifications) 1`] = `
 <div
   className="flex flex-col flex-1 bg-white dark:bg-gray-dark"

src/routes/__snapshots__/Settings.test.tsx.snap

@@ -170,6 +170,29 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           </label>
         </div>
       </div>
+      <div
+        class="flex items-start mt-1 mb-3"
+      >
+        <div
+          class="flex items-center h-5"
+        >
+          <input
+            class="focus:ring-indigo-500 h-4 w-4 text-indigo-600 border-gray-300 rounded"
+            id="showAccountHostname"
+            type="checkbox"
+          />
+        </div>
+        <div
+          class="ml-3 text-sm"
+        >
+          <label
+            class="font-medium text-gray-700 dark:text-gray-200"
+            for="showAccountHostname"
+          >
+            Show account hostname
+          </label>
+        </div>
+      </div>
     </fieldset>
     <fieldset
       class="mb-3"

src/types.ts

@@ -13,6 +13,7 @@ export type SettingsState = AppearanceSettingsState &
 interface AppearanceSettingsState {
   theme: Theme;
   colors: boolean | null;
+  showAccountHostname: boolean;
 }
 
 interface NotificationSettingsState {