9355992897

Committed 03 Jun 2024 07:17PM UTC coverage: 95.518% (-1.4%) from 96.898%

Build # 9355992897

Build Type

Pull #1172

github

Committed by

web-flow

Commit Message

Merge eda535f08 into 1ca2243f5

Pull Request Pull Request #1172: feat: new account management view

Run Details

417 of 432 branches covered (96.53%)

Branch coverage included in aggregate %.

39 of 59 new or added lines in 5 files covered. (66.1%)

5 existing lines in 2 files now uncovered.

1096 of 1152 relevant lines covered (95.14%)

19.15 hits per line

Source File
Press 'n' to go to next uncovered line, 'b' for previous

65.91

/src/routes/Accounts.tsx

import {
  AppsIcon,
  ArrowLeftIcon,
  KeyIcon,
  MarkGithubIcon,
  PersonIcon,
  PlusIcon,
  ServerIcon,
  SignOutIcon,
} from '@primer/octicons-react';

import { type FC, useCallback, useContext } from 'react';
import { useNavigate } from 'react-router-dom';

import { AppContext } from '../context/App';

import type { Account } from '../types';
import { getAccountUUID, getDeveloperSettingsURL } from '../utils/auth/utils';
import {
  openExternalLink,
  updateTrayIcon,
  updateTrayTitle,
} from '../utils/comms';
import {
  isOAuthAppLoggedIn,
  isPersonalAccessTokenLoggedIn,
} from '../utils/helpers';

export const AccountsRoute: FC = () => {
  const { auth, logoutFromAccount } = useContext(AppContext);
  const navigate = useNavigate();

  const logoutAccount = useCallback((account: Account) => {
    logoutFromAccount(account);
    navigate(-1);
    updateTrayIcon();
    updateTrayTitle();
  }, []);

  const openHost = (hostname: string) => {
    openExternalLink(`https://${hostname}`);
  };

  const openDeveloperSettings = (account: Account) => {
    const url = getDeveloperSettingsURL(account);
    openExternalLink(url);
  };

  const loginWithPersonalAccessToken = useCallback(() => {
    return navigate('/login-personal-access-token', { replace: true });
  }, []);

  const loginWithOAuthApp = useCallback(() => {
    return navigate('/login-oauth-app', { replace: true });
  }, []);

  const buttonClass =
    'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';

  return (
    <div className="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white">
      <div className="flex justify-between items-center mt-2 py-2 mx-8">
        <button
          type="button"
          className="focus:outline-none"
          title="Go Back"
          onClick={() => navigate(-1)}
        >
          <ArrowLeftIcon
            size={20}
            className="hover:text-gray-400"
            aria-label="Go Back"
          />
        </button>

        <h3 className="text-lg font-semibold">Accounts</h3>
      </div>

      <div className="flex-grow overflow-x-auto px-8">
        <div className="flex flex-col mt-4 text-sm">
          {auth.accounts.map((account) => (
            <div
              key={getAccountUUID(account)}
              className="flex justify-between items-center bg-gray-100 dark:bg-gray-900 rounded-md p-1 mb-4"
            >
              <div className="ml-2 text-xs">
                <div
                  className="font-semibold mb-1 text-sm"
                  title="Open Profile"
                >
                  @{account.user.login}
                  <span
                    hidden={!account.user?.name}
                    className="pl-1 font-medium text-xs italic"
                  >
                    - {account.user?.name}
                  </span>
                </div>

                <div
                  className="cursor-pointer mb-1 ml-1 align-middle"
                  title="Open Host"
                  onClick={() => openHost(account.hostname)}
                  onKeyDown={() => openHost(account.hostname)}
                >
                  {account.platform === 'GitHub Cloud' ? (
                    <MarkGithubIcon
                      size={12}
                      aria-label="GitHub Cloud"
                      className="mr-1"
                    />
                  ) : null}
                  {account.platform === 'GitHub Enterprise Server' ? (
                    <ServerIcon
                      size={12}
                      aria-label="GitHub Enterprise Server"
                      className="mr-1"
                    />
                  ) : null}
                  {account.platform} - {account.hostname}
                </div>
                <div
                  className="cursor-pointer ml-1 align-middle"
                  title="Open Developer Settings"
                  onClick={() => openDeveloperSettings(account)}
                  onKeyDown={() => openDeveloperSettings(account)}
                >
                  {account.method === 'GitHub App' ? (
                    <AppsIcon
                      size={12}
                      aria-label="GitHub App"
                      className="mr-1"
                    />
                  ) : null}
                  {account.method === 'Personal Access Token' ? (
                    <KeyIcon
                      size={12}
                      aria-label="Personal Access Token"
                      className="mr-1"
                    />
                  ) : null}
                  {account.method === 'OAuth App' ? (
                    <PersonIcon
                      size={12}
                      aria-label="OAuth App"
                      className="mr-1"
                    />
                  ) : null}
                  {account.method}
                </div>
              </div>
              <div>
                <button
                  type="button"
                  className={buttonClass}
                  title={`Logout ${account.user.login}`}
                  onClick={() => logoutAccount(account)}
                  onKeyDown={() => logoutAccount(account)}
                >
                  <SignOutIcon
                    size={20}
                    aria-label={`Logout ${account.user.login}`}
                  />
                </button>
              </div>
            </div>
          ))}
        </div>
      </div>

      <div className="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-1 px-8 text-sm">
        <div className="font-semibold italic">Add new account</div>
        <div>
          <button
            type="button"
            className={buttonClass}
            title="Login with Personal Access Token"
            onClick={loginWithPersonalAccessToken}
            hidden={isPersonalAccessTokenLoggedIn(auth)}
          >
            <KeyIcon size={18} aria-label="Login with Personal Access Token" />
            <PlusIcon size={10} className="ml-1 mb-2" />
          </button>
          <button
            type="button"
            className={buttonClass}
            title="Login with OAuth App"
            onClick={loginWithOAuthApp}
            hidden={isOAuthAppLoggedIn(auth)}
          >
            <PersonIcon size={20} aria-label="Login with OAuth App" />
            <PlusIcon size={10} className="mb-2" />
          </button>
        </div>
      </div>
    </div>
  );
};

1	import {	2✔
2	AppsIcon,
3	ArrowLeftIcon,
4	KeyIcon,
5	MarkGithubIcon,
6	PersonIcon,
7	PlusIcon,
8	ServerIcon,
9	SignOutIcon,
10	} from '@primer/octicons-react';
11
12	import { type FC, useCallback, useContext } from 'react';	2✔
13	import { useNavigate } from 'react-router-dom';	2✔
14
15	import { AppContext } from '../context/App';	2✔
16
17	import type { Account } from '../types';
18	import { getAccountUUID, getDeveloperSettingsURL } from '../utils/auth/utils';	2✔
19	import {	2✔
20	openExternalLink,
21	updateTrayIcon,
22	updateTrayTitle,
23	} from '../utils/comms';
24	import {	2✔
25	isOAuthAppLoggedIn,
26	isPersonalAccessTokenLoggedIn,
27	} from '../utils/helpers';
28
29	export const AccountsRoute: FC = () => {	2✔
30	const { auth, logoutFromAccount } = useContext(AppContext);	4✔
31	const navigate = useNavigate();	4✔
32
33	const logoutAccount = useCallback((account: Account) => {	4✔
NEW 34	logoutFromAccount(account);	×
NEW 35	navigate(-1);	×
NEW 36	updateTrayIcon();	×
NEW 37	updateTrayTitle();	×
38	}, []);
39
40	const openHost = (hostname: string) => {	4✔
NEW 41	openExternalLink(`https://${hostname}`);	×
42	};
43
44	const openDeveloperSettings = (account: Account) => {	4✔
NEW 45	const url = getDeveloperSettingsURL(account);	×
NEW 46	openExternalLink(url);	×
47	};
48
49	const loginWithPersonalAccessToken = useCallback(() => {	4✔
50	return navigate('/login-personal-access-token', { replace: true });	2✔
51	}, []);
52
53	const loginWithOAuthApp = useCallback(() => {	4✔
54	return navigate('/login-oauth-app', { replace: true });	2✔
55	}, []);
56
57	const buttonClass =
58	'hover:text-gray-500 py-1 px-2 my-1 mx-2 focus:outline-none';	4✔
59
60	return (	4✔
61	<div className="flex flex-1 flex-col h-screen dark:bg-gray-dark dark:text-white">
62	<div className="flex justify-between items-center mt-2 py-2 mx-8">
63	<button
64	type="button"
65	className="focus:outline-none"
66	title="Go Back"
NEW 67	onClick={() => navigate(-1)}	×
68	>
69	<ArrowLeftIcon
70	size={20}
71	className="hover:text-gray-400"
72	aria-label="Go Back"
73	/>
74	</button>
75
76	<h3 className="text-lg font-semibold">Accounts</h3>
77	</div>
78
79	<div className="flex-grow overflow-x-auto px-8">
80	<div className="flex flex-col mt-4 text-sm">
81	{auth.accounts.map((account) => (
82	<div	4✔
83	key={getAccountUUID(account)}
84	className="flex justify-between items-center bg-gray-100 dark:bg-gray-900 rounded-md p-1 mb-4"
85	>
86	<div className="ml-2 text-xs">
87	<div
88	className="font-semibold mb-1 text-sm"
89	title="Open Profile"
90	>
91	@{account.user.login}
92	<span
93	hidden={!account.user?.name}
94	className="pl-1 font-medium text-xs italic"
95	>
96	- {account.user?.name}
97	</span>
98	</div>
99
100	<div
101	className="cursor-pointer mb-1 ml-1 align-middle"
102	title="Open Host"
NEW 103	onClick={() => openHost(account.hostname)}	×
NEW 104	onKeyDown={() => openHost(account.hostname)}	×
105	>
106	{account.platform === 'GitHub Cloud' ? (	2✔
107	<MarkGithubIcon
108	size={12}
109	aria-label="GitHub Cloud"
110	className="mr-1"
111	/>
112	) : null}
113	{account.platform === 'GitHub Enterprise Server' ? (	2✔
114	<ServerIcon
115	size={12}
116	aria-label="GitHub Enterprise Server"
117	className="mr-1"
118	/>
119	) : null}
120	{account.platform} - {account.hostname}
121	</div>
122	<div
123	className="cursor-pointer ml-1 align-middle"
124	title="Open Developer Settings"
NEW 125	onClick={() => openDeveloperSettings(account)}	×
NEW 126	onKeyDown={() => openDeveloperSettings(account)}	×
127	>
128	{account.method === 'GitHub App' ? (	2!
129	<AppsIcon
130	size={12}
131	aria-label="GitHub App"
132	className="mr-1"
133	/>
134	) : null}
135	{account.method === 'Personal Access Token' ? (	2✔
136	<KeyIcon
137	size={12}
138	aria-label="Personal Access Token"
139	className="mr-1"
140	/>
141	) : null}
142	{account.method === 'OAuth App' ? (	2✔
143	<PersonIcon
144	size={12}
145	aria-label="OAuth App"
146	className="mr-1"
147	/>
148	) : null}
149	{account.method}
150	</div>
151	</div>
152	<div>
153	<button
154	type="button"
155	className={buttonClass}
156	title={`Logout ${account.user.login}`}
NEW 157	onClick={() => logoutAccount(account)}	×
NEW 158	onKeyDown={() => logoutAccount(account)}	×
159	>
160	<SignOutIcon
161	size={20}
162	aria-label={`Logout ${account.user.login}`}
163	/>
164	</button>
165	</div>
166	</div>
167	))}
168	</div>
169	</div>
170
171	<div className="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-1 px-8 text-sm">
172	<div className="font-semibold italic">Add new account</div>
173	<div>
174	<button
175	type="button"
176	className={buttonClass}
177	title="Login with Personal Access Token"
178	onClick={loginWithPersonalAccessToken}
179	hidden={isPersonalAccessTokenLoggedIn(auth)}
180	>
181	<KeyIcon size={18} aria-label="Login with Personal Access Token" />
182	<PlusIcon size={10} className="ml-1 mb-2" />
183	</button>
184	<button
185	type="button"
186	className={buttonClass}
187	title="Login with OAuth App"
188	onClick={loginWithOAuthApp}
189	hidden={isOAuthAppLoggedIn(auth)}
190	>
191	<PersonIcon size={20} aria-label="Login with OAuth App" />
192	<PlusIcon size={10} className="mb-2" />
193	</button>
194	</div>
195	</div>
196	</div>
197	);
198	};

gitify-app / gitify / 9355992897

Source File Press 'n' to go to next uncovered line, 'b' for previous

Source File
Press 'n' to go to next uncovered line, 'b' for previous