Refactor rest api and manager services in spa (#2268)

* Refactor rest api and manager services in spa

* fix test

* clear token

Author: gxueatlassian

spa/src/api/apps/index.ts

@@ -1,9 +1,7 @@
 import { GetGitHubAppsUrlResponse } from "../../rest-interfaces/oauth-types";
-import { AxiosInstanceWithJWT } from "../axiosInstance";
-import { AxiosResponse } from "axios";
+import { axiosRest } from "../axiosInstance";
 
-const GitHubApps = {
-	getAppNewInstallationUrl: (): Promise<AxiosResponse<GetGitHubAppsUrlResponse>> => AxiosInstanceWithJWT.get("/rest/app/cloud/installation/new"),
+export default {
+	getAppNewInstallationUrl: () => axiosRest.get<GetGitHubAppsUrlResponse>("/rest/app/cloud/installation/new"),
 };
 
-export default GitHubApps;

spa/src/api/auth/index.ts

@@ -1,11 +1,7 @@
 import { GetRedirectUrlResponse, ExchangeTokenResponse } from "../../rest-interfaces/oauth-types";
-import { AxiosInstanceWithJWT } from "../axiosInstance";
-import { AxiosResponse } from "axios";
+import { axiosRest } from "../axiosInstance";
 
-const GitHubAuth = {
-	generateOAuthUrl: (): Promise<AxiosResponse<GetRedirectUrlResponse>> => AxiosInstanceWithJWT.get("/rest/app/cloud/oauth/redirectUrl"),
-	exchangeToken: (code: string, state: string): Promise<AxiosResponse<ExchangeTokenResponse>> =>
-		AxiosInstanceWithJWT.post<ExchangeTokenResponse>("/rest/app/cloud/oauth/exchangeToken", { code, state })
+export default {
+	generateOAuthUrl: () => axiosRest.get<GetRedirectUrlResponse>("/rest/app/cloud/oauth/redirectUrl"),
+	exchangeToken: (code: string, state: string) => axiosRest.post<ExchangeTokenResponse>("/rest/app/cloud/oauth/exchangeToken", { code, state }),
 };
-
-export default GitHubAuth;

spa/src/api/axiosInstance.ts

@@ -6,25 +6,60 @@ const getHeaders = (): Promise<string> => new Promise(resolve => {
 	});
 });
 
-const AxiosInstanceWithJWT = axios.create({
+const axiosRest = axios.create({
 	timeout: 3000
 });
-
 // Adding the token in the headers through interceptors because it is an async value
-AxiosInstanceWithJWT.interceptors.request.use(async (config) => {
+axiosRest.interceptors.request.use(async (config) => {
 	config.headers.Authorization = await getHeaders();
 	return config;
 });
 
-const AxiosInstanceWithGHToken = async (gitHubToken: string) => axios.create({
-	timeout: 3000,
-	headers: {
-		"github-auth": gitHubToken,
-		Authorization: await getHeaders()
+/*
+ * IMPORTANT
+ * This is a secret store of the github access token
+ * DO NOT export/exposed this store
+ * Only write operation is allowed
+ */
+let gitHubToken: string | undefined = undefined;
+
+const clearGitHubToken = () => {
+	gitHubToken = undefined;
+}
+
+const setGitHubToken = (newToken: string) => {
+	gitHubToken = newToken;
+}
+
+const hasGitHubToken = () => {
+	if (!!gitHubToken) {
+		return true;
 	}
+	return false;
+}
+
+const axiosGitHub = axios.create({
+	timeout: 3000
+});
+axiosGitHub.interceptors.request.use(async (config) => {
+	config.headers["Authorization"] = `Bearer ${gitHubToken}`;
+	return config;
+});
+
+const axiosRestWithGitHubToken = axios.create({
+	timeout: 3000
+});
+axiosRestWithGitHubToken.interceptors.request.use(async (config) => {
+	config.headers.Authorization = await getHeaders();
+	config.headers["github-auth"] = gitHubToken;
+	return config;
 });
 
 export {
-	AxiosInstanceWithJWT,
-	AxiosInstanceWithGHToken
+	axiosGitHub,
+	axiosRest,
+	axiosRestWithGitHubToken,
+	clearGitHubToken,
+	setGitHubToken,
+	hasGitHubToken,
 };

spa/src/api/github/index.ts

@@ -0,0 +1,6 @@
+import { UsersGetAuthenticatedResponse } from "../../rest-interfaces/oauth-types";
+import { axiosGitHub } from "../axiosInstance";
+
+export default {
+	getUserDetails: () => axiosGitHub.get<UsersGetAuthenticatedResponse>("https://api.github.com/user"),
+};

spa/src/api/index.ts

@@ -1,11 +1,15 @@
 import Token from "./token";
-import GitHubAuth from "./auth";
-import GitHubApps from "./apps";
+import Auth from "./auth";
+import App from "./apps";
+import Orgs from "./orgs";
+import GitHub from "./github";
 
 const ApiRequest = {
 	token: Token,
-	githubAuth: GitHubAuth,
-	gitHubApp: GitHubApps,
+	auth: Auth,
+	gitHub: GitHub,
+	app: App,
+	orgs: Orgs
 };
 
 export default ApiRequest;

spa/src/api/orgs/index.ts

@@ -0,0 +1,7 @@
+import { OrganizationsResponse } from "../../rest-interfaces/oauth-types";
+import { axiosRestWithGitHubToken } from "../axiosInstance";
+
+export default {
+	getOrganizations: async () => axiosRestWithGitHubToken.get<OrganizationsResponse>("/rest/app/cloud/org"),
+	connectOrganization: async (orgId: number) => axiosRestWithGitHubToken.post<OrganizationsResponse>("/rest/app/cloud/org", { installationId: orgId }),
+};

spa/src/api/token/index.ts

@@ -1,19 +1,7 @@
-import axios, { AxiosResponse } from "axios";
-import { OrganizationsResponse, UsersGetAuthenticatedResponse } from "../../rest-interfaces/oauth-types";
-import { AxiosInstanceWithGHToken } from "../axiosInstance";
+import { clearGitHubToken, setGitHubToken, hasGitHubToken } from "../axiosInstance";
 
-const Token = {
-	getUserDetails: (token: string): Promise<AxiosResponse<UsersGetAuthenticatedResponse>> => axios.get("https://api.github.com/user", {
-		headers: { Authorization: `Bearer ${token}`}
-	}),
-	getOrganizations: async (token: string): Promise<AxiosResponse<OrganizationsResponse>> => {
-		const instance = await AxiosInstanceWithGHToken(token);
-		return instance.get("/rest/app/cloud/org");
-	},
-	connectOrganization: async (token: string, orgId: number): Promise<AxiosResponse<OrganizationsResponse>> => {
-		const instance = await AxiosInstanceWithGHToken(token);
-		return instance.post("/rest/app/cloud/org", { installationId: orgId });
-	},
+export default {
+	hasGitHubToken,
+	clearGitHubToken,
+	setGitHubToken,
 };
-
-export default Token;

spa/src/global.d.ts

@@ -1,7 +1,6 @@
 import { OrganizationsResponse } from "./rest-interfaces/oauth-types.ts";
 
 declare global {
-	let OAuthManagerInstance: OAuthManagerType;
 	const AP: AtlassianPlugin;
 }
 
@@ -16,13 +15,3 @@ interface AtlassianPlugin {
 	}
 }
 
-export interface OAuthManagerType {
-	checkValidity: () => Promise<boolean | undefined>;
-	fetchOrgs: () => Promise<OrganizationsResponse | undefined>;
-	connectOrg: (orgId: number) => Promise<boolean | undefined>;
-	authenticateInGitHub: () => Promise<void>;
-	finishOAuthFlow: (code: string, state: string) => Promise<boolean>;
-	getUserDetails: () => { username: string | undefined, email: string | undefined };
-	clear: () => void;
-	installNewApp: (onFinish: () => void) => Promise<void>;
-}

spa/src/index.tsx

@@ -7,19 +7,12 @@ import {
 	Route,
 	Routes,
 } from "react-router-dom";
-import OauthManager from "./oauth-manager";
 import StartConnection from "./pages/StartConnection";
 import ConfigSteps from "./pages/ConfigSteps";
 import Connected from "./pages/Connected";
 
-/**
- * This is the global variable for handling Auth related methods
- */
-// eslint-disable-next-line @typescript-eslint/ban-ts-comment
-// @ts-ignore
-globalThis.OAuthManagerInstance = OauthManager();
-
 const App = () => {
+
 	setGlobalTheme({
 		light: "light",
 		dark: "dark",