[INNO] -Deleting the subscription when clicking on the Disconnect button.

spa/src/pages/Connections/GHCloudConnections/index.tsx

@@ -19,26 +19,30 @@ const containerStyles = xcss({
 
 type GitHubCloudConnectionsProps = {
 	ghCloudSubscriptions: GhCloudSubscriptions;
+	refetch: () => void;
 };
 
 const GitHubCloudConnections = ({
 	ghCloudSubscriptions,
+	refetch,
 }: GitHubCloudConnectionsProps) => {
 	const [isModalOpened, setIsModalOpened] = useState(false);
 	const [subscriptionForModal, setSubscriptionForModal] = useState<SuccessfulConnection | undefined>(undefined);
 	const [selectedModal, setSelectedModal] = useState<BackfillPageModalTypes>("BACKFILL");
 
-	const openedModal = () => {
+	const openedModal = (refetch: () => void) => {
 		switch (selectedModal) {
 			case "BACKFILL":
 				return (<RestartBackfillModal
 					subscription={subscriptionForModal as SuccessfulConnection}
 					setIsModalOpened={setIsModalOpened}
+					refetch={refetch}
 				/>);
 			case "DISCONNECT_SUBSCRIPTION":
 				return <DisconnectSubscriptionModal
 					subscription={subscriptionForModal as SuccessfulConnection}
 					setIsModalOpened={setIsModalOpened}
+					refetch={refetch}
 				/>;
 			// 	TODO: Create modals for GHE later
 			case "DISCONNECT_SERVER":
@@ -64,7 +68,7 @@ const GitHubCloudConnections = ({
 
 			<ModalTransition>
 				{
-					isModalOpened && subscriptionForModal && openedModal()
+					isModalOpened && subscriptionForModal && openedModal(refetch)
 				}
 			</ModalTransition>
 		</>

spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx

@@ -3,6 +3,9 @@ import { render, screen } from "@testing-library/react";
 import { BrowserRouter } from "react-router-dom";
 import userEvent from "@testing-library/user-event";
 import DisconnectSubscriptionModal from "./DisconnectSubscriptionModal";
+import SubscriptionManager from "../../../services/subscription-manager";
+
+jest.mock("../../../services/subscription-manager");
 
 const sampleSubscription = {
 	app_slug: "string",
@@ -29,11 +32,12 @@ const sampleSubscription = {
 	html_url: "html_url"
 };
 const isModalOpened = jest.fn();
+const refetch = jest.fn();
 
-test("Disconnect subscription Modal", async () => {
+test("Clicking cancel in disconnect subscription Modal", async () => {
 	render(
 		<BrowserRouter>
-			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} />
+			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} refetch={refetch} />
 		</BrowserRouter>
 	);
 
@@ -43,4 +47,27 @@ test("Disconnect subscription Modal", async () => {
 
 	await userEvent.click(screen.getByText("Cancel"));
 	expect(isModalOpened).toBeCalled();
+	expect(refetch).not.toBeCalled();
+});
+
+test("Clicking Disconnect in disconnect subscription Modal", async () => {
+	jest.mocked(SubscriptionManager).deleteSubscription = jest.fn().mockReturnValue(Promise.resolve(true));
+
+	render(
+		<BrowserRouter>
+			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} refetch={refetch} />
+		</BrowserRouter>
+	);
+
+	expect(screen.getByText("Disconnect sample?")).toBeInTheDocument();
+	const text = screen.getByTestId("disconnect-content");
+	expect(text.textContent).toBe("Are you sure you want to disconnect your organization sample? This means that you will have to redo the backfill of historical data if you ever want to reconnect");
+
+	await userEvent.click(screen.getByText("Disconnect"));
+	/**
+	 * Called twice, once when the loading is set to true,
+	 * and later after getting the response from the API request
+	 */
+	expect(isModalOpened).toBeCalledTimes(2);
+	expect(refetch).toBeCalled();
 });

spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx

@@ -1,18 +1,30 @@
+import { useState } from "react";
+import { AxiosError } from "axios";
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@atlaskit/modal-dialog";
-import Button from "@atlaskit/button";
+import Button, { LoadingButton } from "@atlaskit/button";
 import { SuccessfulConnection } from "../../../../../src/rest-interfaces";
+import SubscriptionManager from "../../../services/subscription-manager";
 
 /**
  * NOTE: While testing in dev mode, please disable the React.StrictMode first,
  * otherwise this modal won't show up.
  */
-const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: {
+const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened, refetch }: {
 	subscription: SuccessfulConnection,
-	setIsModalOpened: (x: boolean) => void
+	setIsModalOpened: (x: boolean) => void,
+	refetch: () => void
 }) => {
-	const disconnect = () => {
-		// TODO: API call to disconnect this subscription
-		console.log("Disconnect", subscription.account.login);
+	const [isLoading, setIsLoading] = useState<boolean>(false);
+
+	const disconnect = async () => {
+		setIsLoading(true);
+		const response: boolean | AxiosError = await SubscriptionManager.deleteSubscription(subscription.subscriptionId);
+		if (response instanceof AxiosError) {
+			// TODO: Handle the error once we have the designs
+			console.error("Error", response);
+		} else {
+			await refetch();
+		}
 		setIsModalOpened(false);
 	};
 
@@ -31,10 +43,20 @@ const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: {
 					</p>
 				</ModalBody>
 				<ModalFooter>
-					<Button appearance="subtle" onClick={() => setIsModalOpened(false)}>Cancel</Button>
-					<Button appearance="danger" onClick={disconnect}>
-						Disconnect
+					<Button
+						isDisabled={isLoading}
+						appearance="subtle"
+						onClick={() => setIsModalOpened(false)}
+					>
+						Cancel
 					</Button>
+					{
+						isLoading ? <LoadingButton style={{ width: 80 }} isLoading>
+							Loading button
+						</LoadingButton> : <Button appearance="danger" onClick={disconnect}>
+							Disconnect
+						</Button>
+					}
 				</ModalFooter>
 			</Modal>
 		</>

spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx

@@ -29,11 +29,12 @@ const sampleSubscription = {
 	html_url: "html_url"
 };
 const isModalOpened = jest.fn();
+const refetch = jest.fn();
 
 test("Restart backfill Modal", async () => {
 	render(
 		<BrowserRouter>
-			<RestartBackfillModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} />
+			<RestartBackfillModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} refetch={refetch} />
 		</BrowserRouter>
 	);
 

spa/src/pages/Connections/Modals/RestartBackfillModal.tsx

@@ -10,9 +10,10 @@ import { DatePicker } from "@atlaskit/datetime-picker";
  * NOTE: While testing in dev mode, please disable the React.StrictMode first,
  * otherwise this modal won't show up.
  */
-const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
+const RestartBackfillModal = ({ subscription, setIsModalOpened, refetch }: {
 	subscription: SuccessfulConnection,
-	setIsModalOpened: (x: boolean) => void
+	setIsModalOpened: (x: boolean) => void,
+	refetch: () => void,
 }) => {
 	const [restartFromDateCheck, setRestartFromDateCheck] = useState(false);
 	const [backfillDate, setBackfillDate] = useState("");
@@ -30,9 +31,10 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 		setTimeout(() => setIsDisabled(false), 10);
 	}, []);
 
-	const backfill = () => {
+	const backfill = async () => {
 		// TODO: API call to disconnect this subscription
 		console.log("Backfill for", subscription.account.login, restartFromDateCheck, backfillDate);
+		await refetch();
 		setIsModalOpened(false);
 	};
 

spa/src/pages/Connections/index.tsx

@@ -1,55 +1,54 @@
 import { useEffect, useState } from "react";
-import ApiRequest from "../../api";
 import SyncHeader from "../../components/SyncHeader";
 import Step from "../../components/Step";
 import { Wrapper } from "../../common/Wrapper";
 import GitHubCloudConnections from "./GHCloudConnections";
 import GitHubEnterpriseConnections from "./GHEnterpriseConnections";
 import { GHSubscriptions } from "../../rest-interfaces";
-import { reportError } from "../../utils";
 import SkeletonForLoading from "./SkeletonForLoading";
 import { useNavigate } from "react-router-dom";
+import SubscriptionManager from "../../services/subscription-manager";
+import { AxiosError } from "axios";
 
 const Connections = () => {
 	const navigate = useNavigate();
 	const [isLoading, setIsLoading] = useState<boolean>(false);
-	const [ghSubscriptions, setSubscriptions] = useState<GHSubscriptions | null>(null);
+	const [subscriptions, setSubscriptions] = useState<GHSubscriptions | null>(null);
 	const fetchGHSubscriptions = async () => {
-		try {
-			setIsLoading(true);
-			const { data } = await ApiRequest.subscriptions.getSubscriptions();
-			setSubscriptions(data);
-		} catch (e) {
-			reportError(e, { path: "Fetching subscriptions" });
-		} finally {
-			setIsLoading(false);
+		setIsLoading(true);
+		const response = await SubscriptionManager.getSubscriptions();
+		if (response instanceof AxiosError) {
+			// TODO: Handle the error once we have the designs
+			console.error("Error", response);
 		}
+		setSubscriptions(response as GHSubscriptions);
+		setIsLoading(false);
 	};
 	useEffect(() => {
 		fetchGHSubscriptions();
 	}, []);
 
 	// If there are no connections then go back to the start page
 	useEffect(() => {
-		if (!ghSubscriptions?.ghCloudSubscriptions && ghSubscriptions?.ghEnterpriseServers && ghSubscriptions.ghEnterpriseServers?.length === 0) {
+		if (!subscriptions?.ghCloudSubscriptions && subscriptions?.ghEnterpriseServers && subscriptions.ghEnterpriseServers?.length === 0) {
 			navigate("/spa");
 		}
-	}, [ghSubscriptions, navigate]);
+	}, [subscriptions, navigate]);
 
 	return (
 		<Wrapper>
 			<SyncHeader />
 			{
 				isLoading ? <SkeletonForLoading /> : <>
 					{
-						ghSubscriptions?.ghCloudSubscriptions && <Step title="GitHub Cloud">
-							<GitHubCloudConnections ghCloudSubscriptions={ghSubscriptions.ghCloudSubscriptions} />
+						subscriptions?.ghCloudSubscriptions && <Step title="GitHub Cloud">
+							<GitHubCloudConnections ghCloudSubscriptions={subscriptions.ghCloudSubscriptions} refetch={fetchGHSubscriptions} />
 						</Step>
 					}
 
 					{
-						ghSubscriptions?.ghEnterpriseServers && ghSubscriptions.ghEnterpriseServers?.length > 0 && <Step title="GitHub Enterprise Server">
-							<GitHubEnterpriseConnections ghEnterpriseServers={ghSubscriptions.ghEnterpriseServers} />
+						subscriptions?.ghEnterpriseServers && subscriptions.ghEnterpriseServers?.length > 0 && <Step title="GitHub Enterprise Server">
+							<GitHubEnterpriseConnections ghEnterpriseServers={subscriptions.ghEnterpriseServers} />
 						</Step>
 					}
 				</>

spa/src/services/subscription-manager/index.ts

@@ -0,0 +1,47 @@
+import Api from "../../api";
+import { AxiosError } from "axios";
+import { reportError } from "../../utils";
+import { GHSubscriptions } from "../../../../src/rest-interfaces";
+
+async function getSubscriptions(): Promise<GHSubscriptions | AxiosError> {
+	try {
+		const response= await Api.subscriptions.getSubscriptions();
+		const status = response.status === 200;
+		if(!status) {
+			reportError(
+				{ message: "Response status for getting subscriptions is not 204", status: response.status },
+				{ path: "getSubscriptions" }
+			);
+		}
+
+		return response.data;
+	} catch (e: unknown) {
+		reportError(new Error("Unable to delete subscription", { cause: e }), { path: "getSubscriptions" });
+		return e as AxiosError;
+	}
+}
+
+async function deleteSubscription(subscriptionId: number): Promise<boolean | AxiosError> {
+	try {
+		const response= await Api.subscriptions.deleteSubscription(subscriptionId);
+		const ret = response.status === 204;
+		if(!ret) {
+			reportError(
+				{ message: "Response status for deleting subscription is not 204", status: response.status },
+				{ path: "deleteSubscription" }
+			);
+		}
+
+		return ret;
+	} catch (e: unknown) {
+		reportError(new Error("Unable to delete subscription", { cause: e }), { path: "deleteSubscription" });
+		return e as AxiosError;
+	}
+}
+
+export default {
+	getSubscriptions,
+	deleteSubscription,
+};
+
+