Convert popup to React (#27)

* move popup code to its own folder

* add React

* convert signed out content to React

* convert signed in content to React

* convert Pemissions Request UI

* lock dependency versions

* unshadow variable names in Popup.tsx

Author: jdgarcia

.eslintrc.json

@@ -332,6 +332,7 @@
 		],
 		"@typescript-eslint/no-non-null-assertion": "off",
 		"@typescript-eslint/no-redundant-type-constituents": "off",
+		"@typescript-eslint/no-shadow": "warn",
 		"@typescript-eslint/no-unnecessary-condition": "off",
 		"@typescript-eslint/no-unnecessary-boolean-literal-compare": "off",
 		"@typescript-eslint/no-unsafe-argument": "off",

.nvmrc

@@ -0,0 +1 @@
+18

.vscode/settings.json

@@ -0,0 +1,3 @@
+{
+	"typescript.tsdk": "node_modules/typescript/lib"
+}

package.json

@@ -48,11 +48,14 @@
 		"watch:firefox": "yarn run set-manifest:firefox:force && yarn watch"
 	},
 	"dependencies": {
+		"react": "18.2.0",
+		"react-dom": "18.2.0",
 		"webextension-polyfill": "0.10.0"
 	},
 	"devDependencies": {
-		"@playwright/test": "^1.35.1",
-		"@types/chrome": "^0.0.246",
+		"@playwright/test": "1.35.1",
+		"@types/chrome": "0.0.246",
+		"@types/react-dom": "18.2.23",
 		"@types/webextension-polyfill": "0.10.1",
 		"@typescript-eslint/eslint-plugin": "6.0.0",
 		"@typescript-eslint/parser": "6.0.0",

scripts/makeManifest.js

@@ -46,9 +46,7 @@ const getMakeManifest =
 			},
 			// Delete this in favor of optional_host_permissions when https://bugzilla.mozilla.org/show_bug.cgi?id=1766026
 			// is resolved
-			optional_permissions: [
-				'*://*/*'
-			]
+			optional_permissions: ['*://*/*'],
 		};
 
 		const chromiumKeys = {
@@ -57,8 +55,8 @@ const getMakeManifest =
 			},
 			optional_host_permissions: [
 				// TODO: Move this to `manifestBase` when Firefox supports optional_host_permissions
-				'*://*/*'
-			]
+				'*://*/*',
+			],
 		};
 
 		const manifest = {

src/background.ts

@@ -1,5 +1,5 @@
 import type { WebNavigation } from 'webextension-polyfill';
-import { runtime, scripting , tabs, webNavigation } from 'webextension-polyfill';
+import { runtime, scripting, tabs, webNavigation } from 'webextension-polyfill';
 import { fetchUser } from './gkApi';
 import { injectionScope as inject_azureDevops } from './hosts/azureDevops';
 import { injectionScope as inject_bitbucket } from './hosts/bitbucket';
@@ -21,7 +21,7 @@ const DefaultInjectionDomains: InjectionDomains = {
 	github: ['github.com'],
 	gitlab: ['gitlab.com'],
 	bitbucket: ['bitbucket.org'],
-	azureDevops: ['dev.azure.com']
+	azureDevops: ['dev.azure.com'],
 };
 
 webNavigation.onHistoryStateUpdated.addListener(details => {
@@ -35,7 +35,7 @@ webNavigation.onHistoryStateUpdated.addListener(details => {
 	}
 });
 
-runtime.onMessage.addListener(async (msg) => {
+runtime.onMessage.addListener(async msg => {
 	if (msg === PopupInitMessage) {
 		const context: CacheContext = {};
 		return refreshPermissions(context);
@@ -79,12 +79,12 @@ async function addInjectionListener(context: CacheContext) {
 	};
 
 	webNavigation.onDOMContentLoaded.addListener(injectScript, {
-		url: allDomains.map((domain) => ({ hostContains: domain })),
+		url: allDomains.map(domain => ({ hostContains: domain })),
 	});
 }
 
 function urlHostHasDomain(url: URL, domains: string[]): boolean {
-	return domains.some((domain) => url.hostname.endsWith(domain));
+	return domains.some(domain => url.hostname.endsWith(domain));
 }
 
 function getInjectionFn(rawUrl: string, injectionDomains: InjectionDomains): (url: string) => void {
@@ -119,6 +119,6 @@ async function main() {
 	// NOTE: This may request hosts that we may not have permissions for, which will log errors for the extension
 	// This does not cause any issues, and eliminating the errors requires more logic
 	await addInjectionListener(context);
-};
+}
 
 void main();

src/domUtils.ts

@@ -11,7 +11,7 @@ const accessTokenCookieName = MODE === 'production' ? 'accessToken' : 'devAccess
 
 const getAccessToken = async () => {
 	// Check if the user has granted permission to GitKraken.dev
-	if (!await checkOrigins(['gitkraken.dev'])) {
+	if (!(await checkOrigins(['gitkraken.dev']))) {
 		// If not, just assume we're logged out
 		return undefined;
 	}

src/gkApi.ts

@@ -24,7 +24,7 @@ export function injectionScope(url: string) {
 			this.insertHTML(insertions);
 		}
 
-	  /*
+		/*
 			** PLEASE READ BEFORE TOUCHING ANY INJECTIONS **
 
 			GitLab supports up to two major versions behind the current version. See:
@@ -141,10 +141,8 @@ export function injectionScope(url: string) {
 						);
 
 						// v16.8
-						insertions.set(
-							'.git-clone-holder .dropdown-menu .gl-dropdown-item:last-child',
-							{
-								html: /*html*/ `<li data-gk class="divider mt-2" role="presentation"></li>
+						insertions.set('.git-clone-holder .dropdown-menu .gl-dropdown-item:last-child', {
+							html: /*html*/ `<li data-gk class="divider mt-2" role="presentation"></li>
 <li data-gk class="gl-dropdown-item pt-2" role="menuitem">
 	<label class="label-bold gl-px-4">GitKraken</label>
 	<a class="dropdown-item open-with-link" href="${url}" style="align-items: center !important;" target="_blank">
@@ -154,9 +152,8 @@ export function injectionScope(url: string) {
 		</div>
 	</a>
 </li>`,
-								position: 'afterend',
-							},
-						);
+							position: 'afterend',
+						});
 
 						// Drop this injection when support for <= v16.7 is dropped
 						insertions.set(

src/hosts/gitlab.ts

@@ -9,7 +9,7 @@ function domainToMatchPattern(domain: string): string {
 
 const RequiredOriginPatterns = [
 	// Without this permission, the extension cannot login
-	'gitkraken.dev'
+	'gitkraken.dev',
 ].map(domainToMatchPattern);
 const CloudProviderOriginPatterns = CloudProviders.map(domainToMatchPattern);
 
@@ -18,7 +18,7 @@ async function computeEnterpriseOriginPatterns(context: CacheContext): Promise<s
 	if (!enterpriseConnections) {
 		return;
 	}
-	return enterpriseConnections.map((x) => domainToMatchPattern(x.domain));
+	return enterpriseConnections.map(x => domainToMatchPattern(x.domain));
 }
 
 export type OriginTypes = 'required' | 'cloud' | 'enterprise';
@@ -38,11 +38,15 @@ export async function refreshPermissions(context: CacheContext): Promise<Permiss
 	const newEnterpriseOrigins = arrayDifference(enterpriseOrigins, exitingPermissions.origins);
 	const newCloudOrigins = arrayDifference(CloudProviderOriginPatterns, exitingPermissions.origins);
 	const newOrigins = [...newRequiredOrigins, ...newEnterpriseOrigins, ...newCloudOrigins];
-	const unusedOrigins = arrayDifference(exitingPermissions.origins, [...RequiredOriginPatterns, ...CloudProviderOriginPatterns, ...(enterpriseOrigins ?? [])]);
+	const unusedOrigins = arrayDifference(exitingPermissions.origins, [
+		...RequiredOriginPatterns,
+		...CloudProviderOriginPatterns,
+		...(enterpriseOrigins ?? []),
+	]);
 
 	if (!unusedOrigins.length) {
 		const unusedPermissions: Permissions.Permissions = {
-			origins: unusedOrigins
+			origins: unusedOrigins,
 		};
 		const result = await permissions.remove(unusedPermissions);
 		if (!result) {
@@ -51,18 +55,18 @@ export async function refreshPermissions(context: CacheContext): Promise<Permiss
 	}
 	return newOrigins.length
 		? {
-			request: {
-				origins: newOrigins,
-			},
-			hasRequired: Boolean(newRequiredOrigins.length),
-			hasCloud: Boolean(newCloudOrigins.length),
-			hasEnterprise: Boolean(newEnterpriseOrigins.length)
-		}
+				request: {
+					origins: newOrigins,
+				},
+				hasRequired: Boolean(newRequiredOrigins.length),
+				hasCloud: Boolean(newCloudOrigins.length),
+				hasEnterprise: Boolean(newEnterpriseOrigins.length),
+		  }
 		: undefined;
 }
 
 export async function checkOrigins(origins: string[]): Promise<boolean> {
 	return permissions.contains({
-		origins: origins.map(domainToMatchPattern)
+		origins: origins.map(domainToMatchPattern),
 	});
 }