From be99c17ab48079f7a808c6337c495e5a4960a55a Mon Sep 17 00:00:00 2001
From: Kayub Maharjan <kmaharjan4@atlassian.com>
Date: Tue, 5 Dec 2023 16:26:31 +1100
Subject: [PATCH 01/15] - Modal added for backfilling and disconnecting
 subscription

---
 .../Connections/GHCloudConnections/index.tsx  | 59 ++++++++++++++++---
 .../Modals/DisconnectSubscriptionModal.tsx    | 44 ++++++++++++++
 .../Modals/RestartBackfillModal.tsx           | 42 +++++++++++++
 spa/src/utils/dynamicTableHelper.tsx          | 42 +++++++++++--
 src/rest-interfaces/index.ts                  |  2 +
 5 files changed, 176 insertions(+), 13 deletions(-)
 create mode 100644 spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
 create mode 100644 spa/src/pages/Connections/Modals/RestartBackfillModal.tsx

diff --git a/spa/src/pages/Connections/GHCloudConnections/index.tsx b/spa/src/pages/Connections/GHCloudConnections/index.tsx
index 9492ca30d9..1983b34420 100644
--- a/spa/src/pages/Connections/GHCloudConnections/index.tsx
+++ b/spa/src/pages/Connections/GHCloudConnections/index.tsx
@@ -1,11 +1,16 @@
 /** @jsxImportSource @emotion/react */
+import { useState } from "react";
 import { DynamicTableStateless } from "@atlaskit/dynamic-table";
 import {
 	head,
 	getGHSubscriptionsRows,
 } from "../../../utils/dynamicTableHelper";
-import { GhCloudSubscriptions } from "../../../rest-interfaces";
+import { BackfillPageModalTypes, GhCloudSubscriptions } from "../../../rest-interfaces";
 import { Box, xcss } from "@atlaskit/primitives";
+import { SuccessfulConnection } from "rest-interfaces";
+import DisconnectSubscriptionModal from "../Modals/DisconnectSubscriptionModal";
+import RestartBackfillModal from "../Modals/RestartBackfillModal";
+import { ModalTransition } from "@atlaskit/modal-dialog";
 
 const containerStyles = xcss({
 	display: "flex",
@@ -15,18 +20,54 @@ const containerStyles = xcss({
 type GitHubCloudConnectionsProps = {
 	ghCloudSubscriptions: GhCloudSubscriptions;
 };
+
 const GitHubCloudConnections = ({
 	ghCloudSubscriptions,
 }: GitHubCloudConnectionsProps) => {
+	const [isModalOpened, setIsModalOpened] = useState(false);
+	const [subscriptionForModal, setSubscriptionForModal] = useState<SuccessfulConnection | undefined>(undefined);
+	const [selectedModal, setSelectedModal] = useState<BackfillPageModalTypes>("BACKFILL");
+
+	const openedModal = () => {
+		switch (selectedModal) {
+			case "BACKFILL":
+				return (<RestartBackfillModal
+					subscription={subscriptionForModal as SuccessfulConnection}
+					setIsModalOpened={setIsModalOpened}
+				/>);
+			case "DISCONNECT_SUBSCRIPTION":
+				return <DisconnectSubscriptionModal
+					subscription={subscriptionForModal as SuccessfulConnection}
+					setIsModalOpened={setIsModalOpened}
+				/>;
+			// 	TODO: Create modals for GHE later
+			case "DISCONNECT_SERVER":
+			case "DISCONNECT_SERVER_APP":
+			default:
+				return <></>;
+		}
+	};
+
 	return (
-		<Box xcss={containerStyles}>
-			<DynamicTableStateless
-				head={head}
-				rows={getGHSubscriptionsRows(ghCloudSubscriptions.successfulCloudConnections)}
-				rowsPerPage={5}
-				page={1}
-			/>
-		</Box>
+		<>
+			<Box xcss={containerStyles}>
+				<DynamicTableStateless
+					head={head}
+					rows={getGHSubscriptionsRows(
+						ghCloudSubscriptions.successfulCloudConnections,
+						{ setIsModalOpened, setSubscriptionForModal, setSelectedModal }
+					)}
+					rowsPerPage={5}
+					page={1}
+				/>
+			</Box>
+
+			<ModalTransition>
+				{
+					isModalOpened && subscriptionForModal && openedModal()
+				}
+			</ModalTransition>
+		</>
 	);
 };
 
diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
new file mode 100644
index 0000000000..a5ddf794f8
--- /dev/null
+++ b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
@@ -0,0 +1,44 @@
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@atlaskit/modal-dialog";
+import Button from "@atlaskit/button";
+import { SuccessfulConnection } from "../../../../../src/rest-interfaces";
+
+/**
+ * NOTE: While testing in dev mode, please disable the React.StrictMode first,
+ * otherwise this modal won't show up.
+ */
+const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: {
+	subscription: SuccessfulConnection,
+	setIsModalOpened: (x: boolean) => void
+}) => {
+	const disconnect = () => {
+		// TODO: API call to disconnect this subscription
+		console.log("Disconnect", subscription.account.login);
+		setIsModalOpened(false);
+	};
+
+	return (
+		<>
+			<Modal onClose={() => setIsModalOpened(false)}>
+				<ModalHeader>
+					<ModalTitle appearance="warning">
+						<>Disconnect {subscription.account.login}?</>
+					</ModalTitle>
+				</ModalHeader>
+				<ModalBody>
+					<p>
+						Are you sure you want to disconnect your organization <b>{subscription.account.login}</b>?
+						This means that you will have to redo the backfill of historical data if you ever want to reconnect
+					</p>
+				</ModalBody>
+				<ModalFooter>
+					<Button appearance="subtle" onClick={() => setIsModalOpened(false)}>Cancel</Button>
+					<Button appearance="danger" onClick={disconnect}>
+						Disconnect
+					</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	);
+};
+
+export default  DisconnectSubscriptionModal;
diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
new file mode 100644
index 0000000000..302b05ed45
--- /dev/null
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
@@ -0,0 +1,42 @@
+import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@atlaskit/modal-dialog";
+import Button from "@atlaskit/button";
+import { SuccessfulConnection } from "../../../../../src/rest-interfaces";
+
+/**
+ * NOTE: While testing in dev mode, please disable the React.StrictMode first,
+ * otherwise this modal won't show up.
+ */
+const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
+	subscription: SuccessfulConnection,
+	setIsModalOpened: (x: boolean) => void
+}) => {
+	const backfill = () => {
+		// TODO: API call to disconnect this subscription
+		console.log("Backfill for", subscription.account.login);
+		setIsModalOpened(false);
+	};
+
+	return (
+		<>
+			<Modal onClose={() => setIsModalOpened(false)}>
+				<ModalHeader>
+					<ModalTitle appearance="warning">Backfill your data</ModalTitle>
+				</ModalHeader>
+				<ModalBody>
+					<p>
+						Backfilling data can take a long time, so we’ll only backfill your data from the last 6 months.
+						If you want to backfill more data, choose a date below. Branches will be backfilled regardless of their age.
+					</p>
+				</ModalBody>
+				<ModalFooter>
+					<Button appearance="subtle" onClick={() => setIsModalOpened(false)}>Cancel</Button>
+					<Button appearance="danger" onClick={backfill}>
+						Backfill data
+					</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	);
+};
+
+export default  RestartBackfillModal;
diff --git a/spa/src/utils/dynamicTableHelper.tsx b/spa/src/utils/dynamicTableHelper.tsx
index 1a62a23094..96dac29f03 100644
--- a/spa/src/utils/dynamicTableHelper.tsx
+++ b/spa/src/utils/dynamicTableHelper.tsx
@@ -3,7 +3,7 @@ import Avatar from "@atlaskit/avatar";
 import Badge from "@atlaskit/badge";
 import { token } from "@atlaskit/tokens";
 import Lozenge from "@atlaskit/lozenge";
-import { SuccessfulConnection } from "../rest-interfaces";
+import { BackfillPageModalTypes, SuccessfulConnection } from "../rest-interfaces";
 import { ThemeAppearance } from "@atlaskit/lozenge/dist/types/Lozenge";
 import { css } from "@emotion/react";
 
@@ -13,6 +13,12 @@ type Row = {
 	cells: { key: string | number; content: React.JSX.Element | string | number }[];
 };
 
+type ConnectionsActionsCallback = {
+	setIsModalOpened: (x: boolean) => void;
+	setSubscriptionForModal: (sub: SuccessfulConnection) => void;
+	setSelectedModal: (x: BackfillPageModalTypes) => void;
+};
+
 const rowWrapperStyle = css`
 	display: flex;
 	align-items: center;
@@ -57,14 +63,19 @@ const createHead = (withWidth: boolean) => {
 				width: withWidth ? 30 : undefined,
 			},
 			{
-				key: "party",
+				key: "repos",
 				content: "Repos",
 				width: withWidth ? 30 : undefined,
 			},
 			{
-				key: "term",
+				key: "status",
 				content: "Status",
 				width: withWidth ? 30 : undefined,
+			},
+			{
+				key: "options",
+				content: "Settings",
+				width: withWidth ? 10: undefined,
 			}
 		],
 	};
@@ -73,7 +84,8 @@ const createHead = (withWidth: boolean) => {
 export const head = createHead(true);
 
 export const getGHSubscriptionsRows = (
-	SuccessfulConnections: SuccessfulConnection[]
+	SuccessfulConnections: SuccessfulConnection[],
+	callbacks?: ConnectionsActionsCallback
 ): Row[] => {
 	if (!SuccessfulConnections) {
 		return [];
@@ -147,6 +159,28 @@ export const getGHSubscriptionsRows = (
 							</div>
 						</div>
 					),
+				},
+				{
+					key: cloudConnection.id,
+					content: (
+						<>
+							{/* TODO: Convert this into a dropdown */}
+							<div onClick={() => {
+								callbacks?.setIsModalOpened(true);
+								callbacks?.setSubscriptionForModal(cloudConnection);
+								callbacks?.setSelectedModal("DISCONNECT_SUBSCRIPTION");
+							}}>
+								Disconnect
+							</div>
+							<div onClick={() => {
+								callbacks?.setIsModalOpened(true);
+								callbacks?.setSubscriptionForModal(cloudConnection);
+								callbacks?.setSelectedModal("BACKFILL");
+							}}>
+								Backfill
+							</div>
+						</>
+					)
 				}
 			],
 		})
diff --git a/src/rest-interfaces/index.ts b/src/rest-interfaces/index.ts
index 4e6da157d7..2e6881d41f 100644
--- a/src/rest-interfaces/index.ts
+++ b/src/rest-interfaces/index.ts
@@ -178,3 +178,5 @@ export type GHSubscriptions = {
 	ghCloudSubscriptions: GhCloudSubscriptions;
 	ghEnterpriseServers: GhEnterpriseServer[];
 };
+
+export type BackfillPageModalTypes = "BACKFILL" | "DISCONNECT_SUBSCRIPTION" | "DISCONNECT_SERVER_APP" | "DISCONNECT_SERVER";

From 150023edab63082a14a4aa6347809410d3232372 Mon Sep 17 00:00:00 2001
From: Kayub Maharjan <kmaharjan4@atlassian.com>
Date: Tue, 5 Dec 2023 17:24:43 +1100
Subject: [PATCH 02/15] - Fixing eslint in a test case

---
 spa/src/services/oauth-manager/test.ts | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/spa/src/services/oauth-manager/test.ts b/spa/src/services/oauth-manager/test.ts
index 70c5240210..c7f067ec75 100644
--- a/spa/src/services/oauth-manager/test.ts
+++ b/spa/src/services/oauth-manager/test.ts
@@ -17,13 +17,13 @@ describe("AuthManager", () => {
 		const mockRedirectUrlOnce = (state: string) => {
 			when(Api.auth.generateOAuthUrl)
 				.calledWith()
-				.mockResolvedValueOnce({ data: { redirectUrl: REDIRECT_URL, state: state } } as any);
-		}
+				.mockResolvedValueOnce({ data: { redirectUrl: REDIRECT_URL, state: state } } as never);
+		};
 
 		const mockExchangeTokenOnce= (code: string, state: string, accessToken: string) => {
 			when(Api.auth.exchangeToken)
 				.calledWith(code, state)
-				.mockResolvedValueOnce({ data: { accessToken } } as any);
+				.mockResolvedValueOnce({ data: { accessToken } } as never);
 		};
 
 		const onWinCloseAndBlock = { onWinClosed: () => {}, onPopupBlocked: () => {} };

From 4dd1eed2252d20255ba9b53840429b26e278f1bc Mon Sep 17 00:00:00 2001
From: Kayub Maharjan <kmaharjan4@atlassian.com>
Date: Tue, 5 Dec 2023 17:25:25 +1100
Subject: [PATCH 03/15] - WIP - backfill modal

---
 spa/package.json                              |   1 +
 .../Modals/RestartBackfillModal.tsx           |  13 +-
 spa/yarn.lock                                 | 126 +++++++++++++++++-
 3 files changed, 138 insertions(+), 2 deletions(-)

diff --git a/spa/package.json b/spa/package.json
index 46bce986a2..0f16327116 100644
--- a/spa/package.json
+++ b/spa/package.json
@@ -25,6 +25,7 @@
     "@atlaskit/avatar": "^21.3.9",
     "@atlaskit/badge": "^15.1.14",
     "@atlaskit/button": "^16.8.0",
+    "@atlaskit/checkbox": "^13.0.1",
     "@atlaskit/css-reset": "^6.5.2",
     "@atlaskit/dynamic-table": "^14.11.5",
     "@atlaskit/form": "^8.11.8",
diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
index 302b05ed45..b35085a8e2 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
@@ -1,6 +1,8 @@
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@atlaskit/modal-dialog";
 import Button from "@atlaskit/button";
 import { SuccessfulConnection } from "../../../../../src/rest-interfaces";
+import { Checkbox } from "@atlaskit/checkbox";
+import { useState } from "react";
 
 /**
  * NOTE: While testing in dev mode, please disable the React.StrictMode first,
@@ -10,9 +12,11 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 	subscription: SuccessfulConnection,
 	setIsModalOpened: (x: boolean) => void
 }) => {
+	const [restartFromDateCheck, setRestartFromDateCheck] = useState(false);
+
 	const backfill = () => {
 		// TODO: API call to disconnect this subscription
-		console.log("Backfill for", subscription.account.login);
+		console.log("Backfill for", subscription.account.login, restartFromDateCheck);
 		setIsModalOpened(false);
 	};
 
@@ -27,6 +31,13 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 						Backfilling data can take a long time, so we’ll only backfill your data from the last 6 months.
 						If you want to backfill more data, choose a date below. Branches will be backfilled regardless of their age.
 					</p>
+					<p>
+						<Checkbox
+							onChange={() => setRestartFromDateCheck(!restartFromDateCheck)}
+							label={`Restart the backfill from today to this date`}
+							name="restart-from-selected-date"
+						/>
+					</p>
 				</ModalBody>
 				<ModalFooter>
 					<Button appearance="subtle" onClick={() => setIsModalOpened(false)}>Cancel</Button>
diff --git a/spa/yarn.lock b/spa/yarn.lock
index 09b7ab384a..530e6f8687 100644
--- a/spa/yarn.lock
+++ b/spa/yarn.lock
@@ -120,6 +120,20 @@
     "@babel/runtime" "^7.0.0"
     "@emotion/react" "^11.7.1"
 
+"@atlaskit/checkbox@^13.0.1":
+  version "13.0.1"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/checkbox/-/checkbox-13.0.1.tgz#316ed8382a6fcee66f60a676c96f24bbc6af67af"
+  integrity sha512-/KkaC02GnG4XoQ93Zvy5TbfDGFN2VyD00VuHg8s/y9hPuzEbFxdh6GVB/6IYMXqQ5xRkJb22X7W5cw7miCkTuA==
+  dependencies:
+    "@atlaskit/analytics-next" "^9.1.0"
+    "@atlaskit/ds-lib" "^2.2.0"
+    "@atlaskit/icon" "^22.0.0"
+    "@atlaskit/platform-feature-flags" "^0.2.0"
+    "@atlaskit/theme" "^12.6.0"
+    "@atlaskit/tokens" "^1.28.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+
 "@atlaskit/codemod-utils@^4.2.0":
   version "4.2.3"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/codemod-utils/-/codemod-utils-4.2.3.tgz#3f217fb7e6ad9f638ab03bdaa10d2704d2a26952"
@@ -224,6 +238,15 @@
     "@babel/runtime" "^7.0.0"
     "@emotion/react" "^11.7.1"
 
+"@atlaskit/icon@^22.0.0":
+  version "22.0.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/icon/-/icon-22.0.0.tgz#f267fe623827eb4ddf3b1632756049d04d19a8b7"
+  integrity sha512-90sfTQ7O6vehzNY8Qm2SCufwmQQ3A5Pw40yHBEHD5XeiJ0BaGY8fmzxx16JcqLxiUfyDlxml3rsKD++XzksOHg==
+  dependencies:
+    "@atlaskit/tokens" "^1.28.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+
 "@atlaskit/in-product-testing@^0.2.0":
   version "0.2.3"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/in-product-testing/-/in-product-testing-0.2.3.tgz#b56c583951b2c6f5eeb1dced8ff8eefa1cd9cb08"
@@ -501,6 +524,18 @@
     "@babel/types" "^7.20.0"
     bind-event-listener "^2.1.1"
 
+"@atlaskit/tokens@^1.28.0":
+  version "1.29.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tokens/-/tokens-1.29.0.tgz#812ddab4d1baacec80f57934b92823bb9fcfd6ba"
+  integrity sha512-VDSl6+HKwInNt9mHXO2M2wKlWDo9rCOFhcAbXD+V3z5AsM7ccjX7Dl9Z2H9lciV6o+pkS0FkdE83DfJVgCBiRg==
+  dependencies:
+    "@atlaskit/ds-lib" "^2.2.0"
+    "@atlaskit/platform-feature-flags" "^0.2.0"
+    "@babel/runtime" "^7.0.0"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.20.0"
+    bind-event-listener "^2.1.1"
+
 "@atlaskit/tokens@^1.4.0", "@atlaskit/tokens@^1.8.0":
   version "1.10.1"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tokens/-/tokens-1.10.1.tgz#28e32d1205bf7f771e0f523dea17fbecac297bdb"
@@ -565,6 +600,14 @@
   dependencies:
     "@babel/highlight" "^7.22.5"
 
+"@babel/code-frame@^7.22.13", "@babel/code-frame@^7.23.5":
+  version "7.23.5"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/code-frame/-/code-frame-7.23.5.tgz#9009b69a8c602293476ad598ff53e4562e15c244"
+  integrity sha512-CgH3s1a96LipHCmSUmYFPwY7MNx8C3avkq7i4Wl3cfa662ldtUe4VM1TPXX70pfmrlWTb6jLqTYrZyT2ZTJBgA==
+  dependencies:
+    "@babel/highlight" "^7.23.4"
+    chalk "^2.4.2"
+
 "@babel/compat-data@^7.22.5":
   version "7.22.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/compat-data/-/compat-data-7.22.5.tgz#b1f6c86a02d85d2dd3368a2b67c09add8cd0c255"
@@ -646,6 +689,16 @@
     "@jridgewell/trace-mapping" "^0.3.17"
     jsesc "^2.5.1"
 
+"@babel/generator@^7.23.5":
+  version "7.23.5"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/generator/-/generator-7.23.5.tgz#17d0a1ea6b62f351d281350a5f80b87a810c4755"
+  integrity sha512-BPssCHrBD+0YrxviOa3QzpqwhNIXKEtOa2jQrm4FlmkC2apYgRnQcmPWiGZDlGxiNtltnUFolMe8497Esry+jA==
+  dependencies:
+    "@babel/types" "^7.23.5"
+    "@jridgewell/gen-mapping" "^0.3.2"
+    "@jridgewell/trace-mapping" "^0.3.17"
+    jsesc "^2.5.1"
+
 "@babel/helper-annotate-as-pure@^7.22.5":
   version "7.22.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-annotate-as-pure/-/helper-annotate-as-pure-7.22.5.tgz#e7f06737b197d580a01edf75d97e2c8be99d3882"
@@ -717,6 +770,11 @@
     lodash.debounce "^4.0.8"
     resolve "^1.14.2"
 
+"@babel/helper-environment-visitor@^7.22.20":
+  version "7.22.20"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.20.tgz#96159db61d34a29dba454c959f5ae4a649ba9167"
+  integrity sha512-zfedSIzFhat/gFhWfHtgWvlec0nqB9YEIVrpuwjruLlXfUSnA8cJB0miHKwqDnQ7d32aKo2xt88/xZptwxbfhA==
+
 "@babel/helper-environment-visitor@^7.22.5":
   version "7.22.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-environment-visitor/-/helper-environment-visitor-7.22.5.tgz#f06dd41b7c1f44e1f8da6c4055b41ab3a09a7e98"
@@ -730,6 +788,14 @@
     "@babel/template" "^7.22.5"
     "@babel/types" "^7.22.5"
 
+"@babel/helper-function-name@^7.23.0":
+  version "7.23.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-function-name/-/helper-function-name-7.23.0.tgz#1f9a3cdbd5b2698a670c30d2735f9af95ed52759"
+  integrity sha512-OErEqsrxjZTJciZ4Oo+eoZqeW9UIiOcuYKRJA4ZAgV9myA+pOXhhmpfNCKjEH/auVfEYVFJ6y1Tc4r0eIApqiw==
+  dependencies:
+    "@babel/template" "^7.22.15"
+    "@babel/types" "^7.23.0"
+
 "@babel/helper-hoist-variables@^7.22.5":
   version "7.22.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-hoist-variables/-/helper-hoist-variables-7.22.5.tgz#c01a007dac05c085914e8fb652b339db50d823bb"
@@ -839,6 +905,16 @@
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-string-parser/-/helper-string-parser-7.22.5.tgz#533f36457a25814cf1df6488523ad547d784a99f"
   integrity sha512-mM4COjgZox8U+JcXQwPijIZLElkgEpO5rsERVDJTc2qfCDfERyob6k5WegS14SX18IIjv+XD+GrqNumY5JRCDw==
 
+"@babel/helper-string-parser@^7.23.4":
+  version "7.23.4"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-string-parser/-/helper-string-parser-7.23.4.tgz#9478c707febcbbe1ddb38a3d91a2e054ae622d83"
+  integrity sha512-803gmbQdqwdf4olxrX4AJyFBV/RTr3rSmOj0rKwesmzlfhYNDEs+/iOcznzpNWlJlIlTJC2QfPFcHB6DlzdVLQ==
+
+"@babel/helper-validator-identifier@^7.22.20":
+  version "7.22.20"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.20.tgz#c4ae002c61d2879e724581d96665583dbc1dc0e0"
+  integrity sha512-Y4OZ+ytlatR8AI+8KZfKuL5urKp7qey08ha31L8b3BwewJAoJamTzyvxPR/5D+KkdJCGPq/+8TukHBlY10FX9A==
+
 "@babel/helper-validator-identifier@^7.22.5":
   version "7.22.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/helper-validator-identifier/-/helper-validator-identifier-7.22.5.tgz#9544ef6a33999343c8740fa51350f30eeaaaf193"
@@ -885,11 +961,25 @@
     chalk "^2.0.0"
     js-tokens "^4.0.0"
 
+"@babel/highlight@^7.23.4":
+  version "7.23.4"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/highlight/-/highlight-7.23.4.tgz#edaadf4d8232e1a961432db785091207ead0621b"
+  integrity sha512-acGdbYSfp2WheJoJm/EBBBLh/ID8KDc64ISZ9DYtBmC8/Q204PZJLHyzeB5qMzJ5trcOkybd78M4x2KWsUq++A==
+  dependencies:
+    "@babel/helper-validator-identifier" "^7.22.20"
+    chalk "^2.4.2"
+    js-tokens "^4.0.0"
+
 "@babel/parser@^7.1.0", "@babel/parser@^7.14.7", "@babel/parser@^7.20.7", "@babel/parser@^7.22.5":
   version "7.22.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/parser/-/parser-7.22.5.tgz#721fd042f3ce1896238cf1b341c77eb7dee7dbea"
   integrity sha512-DFZMC9LJUG9PLOclRC32G63UXwzqS2koQC8dkx+PLdmt1xSePYpbT/NbsrJy8Q/muXz7o/h/d4A7Fuyixm559Q==
 
+"@babel/parser@^7.22.15", "@babel/parser@^7.23.5":
+  version "7.23.5"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/parser/-/parser-7.23.5.tgz#37dee97c4752af148e1d38c34b856b2507660563"
+  integrity sha512-hOOqoiNXrmGdFbhgCzu6GiURxUgM27Xwd/aPuu8RfHEZPBzL1Z54okAHAQjXfcQNwvrlkAmAp4SlRTZ45vlthQ==
+
 "@babel/parser@^7.22.7":
   version "7.22.7"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/parser/-/parser-7.22.7.tgz#df8cf085ce92ddbdbf668a7f186ce848c9036cae"
@@ -1750,6 +1840,15 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/template@^7.22.15":
+  version "7.22.15"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
+  integrity sha512-QPErUVm4uyJa60rkI73qneDacvdvzxshT3kksGqlGWYdOTIUOwJ7RDUL8sGqslY1uXWSL6xMFKEXDS3ox2uF0w==
+  dependencies:
+    "@babel/code-frame" "^7.22.13"
+    "@babel/parser" "^7.22.15"
+    "@babel/types" "^7.22.15"
+
 "@babel/template@^7.22.5", "@babel/template@^7.3.3":
   version "7.22.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/template/-/template-7.22.5.tgz#0c8c4d944509875849bd0344ff0050756eefc6ec"
@@ -1791,6 +1890,22 @@
     debug "^4.1.0"
     globals "^11.1.0"
 
+"@babel/traverse@^7.23.2":
+  version "7.23.5"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/traverse/-/traverse-7.23.5.tgz#f546bf9aba9ef2b042c0e00d245990c15508e7ec"
+  integrity sha512-czx7Xy5a6sapWWRx61m1Ke1Ra4vczu1mCTtJam5zRTBOonfdJ+S/B6HYmGYu3fJtr8GGET3si6IhgWVBhJ/m8w==
+  dependencies:
+    "@babel/code-frame" "^7.23.5"
+    "@babel/generator" "^7.23.5"
+    "@babel/helper-environment-visitor" "^7.22.20"
+    "@babel/helper-function-name" "^7.23.0"
+    "@babel/helper-hoist-variables" "^7.22.5"
+    "@babel/helper-split-export-declaration" "^7.22.6"
+    "@babel/parser" "^7.23.5"
+    "@babel/types" "^7.23.5"
+    debug "^4.1.0"
+    globals "^11.1.0"
+
 "@babel/types@^7.0.0", "@babel/types@^7.12.6", "@babel/types@^7.20.0", "@babel/types@^7.20.7", "@babel/types@^7.22.5", "@babel/types@^7.3.3", "@babel/types@^7.4.4":
   version "7.22.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/types/-/types-7.22.5.tgz#cd93eeaab025880a3a47ec881f4b096a5b786fbe"
@@ -1800,6 +1915,15 @@
     "@babel/helper-validator-identifier" "^7.22.5"
     to-fast-properties "^2.0.0"
 
+"@babel/types@^7.22.15", "@babel/types@^7.23.0", "@babel/types@^7.23.5":
+  version "7.23.5"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/types/-/types-7.23.5.tgz#48d730a00c95109fa4393352705954d74fb5b602"
+  integrity sha512-ON5kSOJwVO6xXVRTvOI0eOnWe7VdUcIpsovGo9U/Br4Ie4UVFQTboO2cYnDhAGU6Fp+UxSiT+pMft0SMHfuq6w==
+  dependencies:
+    "@babel/helper-string-parser" "^7.23.4"
+    "@babel/helper-validator-identifier" "^7.22.20"
+    to-fast-properties "^2.0.0"
+
 "@bcoe/v8-coverage@^0.2.3":
   version "0.2.3"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@bcoe/v8-coverage/-/v8-coverage-0.2.3.tgz#75a2e8b51cb758a7553d6804a5932d7aace75c39"
@@ -4416,7 +4540,7 @@ case-sensitive-paths-webpack-plugin@^2.4.0:
   resolved "https://packages.atlassian.com/api/npm/npm-remote/case-sensitive-paths-webpack-plugin/-/case-sensitive-paths-webpack-plugin-2.4.0.tgz#db64066c6422eed2e08cc14b986ca43796dbc6d4"
   integrity sha512-roIFONhcxog0JSSWbvVAh3OocukmSgpqOH6YpMkCvav/ySIV3JKg4Dc8vYtQjYi/UxpNE36r/9v+VqTQqgkYmw==
 
-chalk@^2.0.0, chalk@^2.4.1:
+chalk@^2.0.0, chalk@^2.4.1, chalk@^2.4.2:
   version "2.4.2"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/chalk/-/chalk-2.4.2.tgz#cd42541677a54333cf541a49108c1432b44c9424"
   integrity sha512-Mti+f9lpJNcwF4tWV8/OrTTtF1gZi+f8FqlyAdouralcFWFQWF2+NgCHShjkCb+IFBLq9buZwE1xckQU4peSuQ==

From 7377807860db49c6fe80b60f887c72407f391776 Mon Sep 17 00:00:00 2001
From: Kayub Maharjan <kmaharjan4@atlassian.com>
Date: Tue, 5 Dec 2023 22:56:50 +1100
Subject: [PATCH 04/15] - WIP - backfill modal

---
 spa/package.json                              |   1 +
 .../Modals/RestartBackfillModal.tsx           |  15 +-
 spa/yarn.lock                                 | 167 +++++++++++++++++-
 3 files changed, 180 insertions(+), 3 deletions(-)

diff --git a/spa/package.json b/spa/package.json
index 0f16327116..45f2ba921a 100644
--- a/spa/package.json
+++ b/spa/package.json
@@ -27,6 +27,7 @@
     "@atlaskit/button": "^16.8.0",
     "@atlaskit/checkbox": "^13.0.1",
     "@atlaskit/css-reset": "^6.5.2",
+    "@atlaskit/datetime-picker": "^13.0.2",
     "@atlaskit/dynamic-table": "^14.11.5",
     "@atlaskit/form": "^8.11.8",
     "@atlaskit/heading": "^1.3.7",
diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
index b35085a8e2..3710816636 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
@@ -1,8 +1,10 @@
+import { useState } from "react";
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@atlaskit/modal-dialog";
 import Button from "@atlaskit/button";
 import { SuccessfulConnection } from "../../../../../src/rest-interfaces";
 import { Checkbox } from "@atlaskit/checkbox";
-import { useState } from "react";
+import { Label } from "@atlaskit/form";
+// import { DatePicker } from "@atlaskit/datetime-picker";
 
 /**
  * NOTE: While testing in dev mode, please disable the React.StrictMode first,
@@ -24,13 +26,22 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 		<>
 			<Modal onClose={() => setIsModalOpened(false)}>
 				<ModalHeader>
-					<ModalTitle appearance="warning">Backfill your data</ModalTitle>
+					<ModalTitle>Backfill your data</ModalTitle>
 				</ModalHeader>
 				<ModalBody>
 					<p>
 						Backfilling data can take a long time, so we’ll only backfill your data from the last 6 months.
 						If you want to backfill more data, choose a date below. Branches will be backfilled regardless of their age.
 					</p>
+					<p>
+						<Label htmlFor="backfill-date-picker">Choose date</Label>
+						{/* TODO: This datepicker is throwing a dependency issue saying module not found, add it later when fixed*/}
+						{/*<DatePicker*/}
+						{/*	selectProps={{*/}
+						{/*		inputId: "default-date-picker-example",*/}
+						{/*	}}*/}
+						{/*/>*/}
+					</p>
 					<p>
 						<Checkbox
 							onChange={() => setRestartFromDateCheck(!restartFromDateCheck)}
diff --git a/spa/yarn.lock b/spa/yarn.lock
index 530e6f8687..46fe9c2888 100644
--- a/spa/yarn.lock
+++ b/spa/yarn.lock
@@ -51,6 +51,15 @@
     prop-types "^15.5.10"
     use-memo-one "^1.1.1"
 
+"@atlaskit/app-provider@^0.4.0":
+  version "0.4.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/app-provider/-/app-provider-0.4.0.tgz#33d9706bd81a8799b041ab36ecb2537f1b57b09c"
+  integrity sha512-ZvDVRSHD19rxKvx+YomWvekvtPzNbZEwYdHGXWG3QjdnP+1oBEeaVgkI9LnpWAoreunoQ8xUgmJ6g2qAYBjnoA==
+  dependencies:
+    "@atlaskit/tokens" "^1.28.0"
+    "@babel/runtime" "^7.0.0"
+    bind-event-listener "^2.1.1"
+
 "@atlaskit/avatar@^21.3.9":
   version "21.3.9"
   resolved "https://registry.yarnpkg.com/@atlaskit/avatar/-/avatar-21.3.9.tgz#01049b9730d0374a4352728bc08aba638e0011e6"
@@ -87,6 +96,25 @@
     "@babel/runtime" "^7.0.0"
     "@emotion/react" "^11.7.1"
 
+"@atlaskit/button@^16.17.0":
+  version "16.17.10"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/button/-/button-16.17.10.tgz#8e305dc7ff926f44ee1acd51f29fdd270cb5fd05"
+  integrity sha512-C7UIVAKKrHOtwHiLT94XfyqQ/EAvWq4C7BxaxY0iTJZCvBTgZcefuHLsol9j612IaT7B8NJ/+vnwkKFpGjvFkQ==
+  dependencies:
+    "@atlaskit/analytics-next" "^9.1.0"
+    "@atlaskit/ds-lib" "^2.2.0"
+    "@atlaskit/focus-ring" "^1.3.0"
+    "@atlaskit/icon" "^22.0.0"
+    "@atlaskit/interaction-context" "^2.1.0"
+    "@atlaskit/platform-feature-flags" "^0.2.0"
+    "@atlaskit/primitives" "^1.13.0"
+    "@atlaskit/spinner" "^16.0.0"
+    "@atlaskit/theme" "^12.6.0"
+    "@atlaskit/tokens" "^1.29.0"
+    "@atlaskit/visually-hidden" "^1.2.4"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+
 "@atlaskit/button@^16.8.0":
   version "16.8.0"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/button/-/button-16.8.0.tgz#85afd61b219f4a6b25524e61f9ca3da769a438b7"
@@ -120,6 +148,26 @@
     "@babel/runtime" "^7.0.0"
     "@emotion/react" "^11.7.1"
 
+"@atlaskit/calendar@^14.0.0":
+  version "14.0.2"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/calendar/-/calendar-14.0.2.tgz#df392186a2d64cbc6edab77affead0436c2fb4ad"
+  integrity sha512-v81dRWJ0EVGV2H+VVE3IPLaOehJxVcK/xIk9He1WgjN0fN/1Ejmmt96+9oxo6FbR8prSg4IDGMpUyJrBzgOg0g==
+  dependencies:
+    "@atlaskit/analytics-next" "^9.1.0"
+    "@atlaskit/button" "^16.17.0"
+    "@atlaskit/ds-explorations" "^3.0.0"
+    "@atlaskit/ds-lib" "^2.2.0"
+    "@atlaskit/heading" "^1.4.0"
+    "@atlaskit/icon" "^22.0.0"
+    "@atlaskit/locale" "^2.6.0"
+    "@atlaskit/primitives" "^1.13.0"
+    "@atlaskit/theme" "^12.6.0"
+    "@atlaskit/tokens" "^1.29.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+    date-fns "^2.17.0"
+    react-uid "^2.2.0"
+
 "@atlaskit/checkbox@^13.0.1":
   version "13.0.1"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/checkbox/-/checkbox-13.0.1.tgz#316ed8382a6fcee66f60a676c96f24bbc6af67af"
@@ -151,6 +199,28 @@
     "@babel/runtime" "^7.0.0"
     fbjs "^3.0.0"
 
+"@atlaskit/datetime-picker@^13.0.2":
+  version "13.0.2"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/datetime-picker/-/datetime-picker-13.0.2.tgz#6ce8899117134801dd7ef89730b6c4b77307ec48"
+  integrity sha512-kz/h+/dTT8QyajUm4nWt7BTfQo1D5efpqennHQNfjck70Y0TApNVZSnesFaVn3hNn1EaLwJ5KsubtQqdSUjiiA==
+  dependencies:
+    "@atlaskit/analytics-next" "^9.1.0"
+    "@atlaskit/calendar" "^14.0.0"
+    "@atlaskit/ds-lib" "^2.2.0"
+    "@atlaskit/icon" "^22.0.0"
+    "@atlaskit/layering" "^0.2.0"
+    "@atlaskit/locale" "^2.6.0"
+    "@atlaskit/platform-feature-flags" "^0.2.0"
+    "@atlaskit/popper" "^5.5.0"
+    "@atlaskit/select" "^17.0.0"
+    "@atlaskit/theme" "^12.6.0"
+    "@atlaskit/tokens" "^1.29.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+    date-fns "^2.17.0"
+    lodash "^4.17.21"
+    react-scrolllock "^5.0.1"
+
 "@atlaskit/ds-explorations@^2.2.0":
   version "2.2.12"
   resolved "https://registry.yarnpkg.com/@atlaskit/ds-explorations/-/ds-explorations-2.2.12.tgz#6f6060b34b4f9843f2bf01d25e99dce12fc4839e"
@@ -161,6 +231,16 @@
     "@emotion/react" "^11.7.1"
     tiny-invariant "^1.2.0"
 
+"@atlaskit/ds-explorations@^3.0.0":
+  version "3.0.6"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/ds-explorations/-/ds-explorations-3.0.6.tgz#ebe7097bc491bdd080133175efc8b99a3d8b70e0"
+  integrity sha512-JIZtkGvUlfVZENDTqhKuI/SXOntD4Cy+V12jUqYZQPNtyv8WlfOUErj+1y0lxKQKYI4wOhflKwK2rTtWmJOQsQ==
+  dependencies:
+    "@atlaskit/tokens" "^1.29.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+    tiny-invariant "^1.2.0"
+
 "@atlaskit/ds-lib@^2.2.0":
   version "2.2.3"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/ds-lib/-/ds-lib-2.2.3.tgz#fc65a829b45ee0a26c9c6c97072e2d570214aec7"
@@ -218,6 +298,15 @@
     "@babel/runtime" "^7.0.0"
     "@emotion/react" "^11.7.1"
 
+"@atlaskit/heading@^1.4.0":
+  version "1.4.3"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/heading/-/heading-1.4.3.tgz#dccf63117fe0600c1994010eb4a5a97214f3ca41"
+  integrity sha512-29VbpehvlUmAel4SqS+KFcGj2/y5M7ZMfW2VWHlOfU0JDEL0GCd+RBwqg23iVsSf2k9N77yE6CJ7HSRmWS1aSQ==
+  dependencies:
+    "@atlaskit/tokens" "^1.25.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+
 "@atlaskit/icon@^21.12.0":
   version "21.12.5"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/icon/-/icon-21.12.5.tgz#834c967b0e62ceb6bb4951a36a50fda773a5f9ce"
@@ -270,6 +359,14 @@
     "@babel/runtime" "^7.0.0"
     bind-event-listener "^2.1.1"
 
+"@atlaskit/locale@^2.6.0":
+  version "2.6.2"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/locale/-/locale-2.6.2.tgz#14c7ed315306963b5e1e421bbe62f74a30d3f219"
+  integrity sha512-MFjig0nQMRB/baMF+8LPJOXmWE1DJqYFPO1bfr0t2giQRhDKZxyvyTLKuij+T/PTK70iSyFzn7bLTNwvPXqhMA==
+  dependencies:
+    "@atlaskit/select" "^17.0.0"
+    "@babel/runtime" "^7.0.0"
+
 "@atlaskit/lozenge@^11.4.3":
   version "11.4.3"
   resolved "https://registry.yarnpkg.com/@atlaskit/lozenge/-/lozenge-11.4.3.tgz#bf9ea032bbdc94bd9b24167fa88e150b86426f6a"
@@ -388,6 +485,19 @@
     "@emotion/serialize" "^1.1.0"
     bind-event-listener "^2.1.1"
 
+"@atlaskit/primitives@^1.13.0":
+  version "1.13.1"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/primitives/-/primitives-1.13.1.tgz#c6da57952e06b56439ec0a27f55d722314c1c564"
+  integrity sha512-mjtL6tma8/PdsWG+F6qCgYLSziZcKo4r/VtdMmCNpVgAU+YJda3HczFey+roLNrtzVMZMKg4msm4SO8UqHi05A==
+  dependencies:
+    "@atlaskit/app-provider" "^0.4.0"
+    "@atlaskit/tokens" "^1.29.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+    "@emotion/serialize" "^1.1.0"
+    bind-event-listener "^2.1.1"
+    tiny-invariant "^1.2.0"
+
 "@atlaskit/primitives@^1.6.0":
   version "1.6.7"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/primitives/-/primitives-1.6.7.tgz#03217a8497341c6fefc673638a4a58f2a1f1b5c9"
@@ -425,6 +535,31 @@
     react-uid "^2.2.0"
     shallow-equal "^1.0.0"
 
+"@atlaskit/select@^17.0.0":
+  version "17.0.1"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/select/-/select-17.0.1.tgz#04de803672673ada760101f149d622a04275cb91"
+  integrity sha512-vh4UALGNoislGUSVt4VZXSrgYpGWnQn5jTQwlSkrX3hutkM3z/0P8YvoEdFPIAJHdu2ryg2nq3P1w7mwLwjWTQ==
+  dependencies:
+    "@atlaskit/analytics-next" "^9.1.0"
+    "@atlaskit/icon" "^22.0.0"
+    "@atlaskit/platform-feature-flags" "^0.2.0"
+    "@atlaskit/spinner" "^16.0.0"
+    "@atlaskit/theme" "^12.6.0"
+    "@atlaskit/tokens" "^1.28.0"
+    "@atlaskit/visually-hidden" "^1.2.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+    "@popperjs/core" "^2.9.1"
+    bind-event-listener "^2.1.1"
+    memoize-one "^6.0.0"
+    react-fast-compare "^3.2.0"
+    react-focus-lock "^2.9.5"
+    react-node-resolver "^1.0.1"
+    react-popper "^2.2.3"
+    react-select "^5.4.0"
+    react-uid "^2.2.0"
+    shallow-equal "^3.1.0"
+
 "@atlaskit/skeleton@^0.2.3":
   version "0.2.3"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/skeleton/-/skeleton-0.2.3.tgz#e56db536f01adaeb0dfc9eb39478337c09315e96"
@@ -456,6 +591,17 @@
     "@babel/runtime" "^7.0.0"
     "@emotion/react" "^11.7.1"
 
+"@atlaskit/spinner@^16.0.0":
+  version "16.0.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/spinner/-/spinner-16.0.0.tgz#e59f2bea3aaafaf5b0e23999d96cb1c5fc777a90"
+  integrity sha512-KZq+YiwO9lb9VFHBZisVq5/ToyhkhxgLSmPIIm8K+mHoTt7CGk9+Iz04Oui5OYg6Sq5XN1SVklWCuDEhiJcmlQ==
+  dependencies:
+    "@atlaskit/interaction-context" "^2.1.0"
+    "@atlaskit/theme" "^12.6.0"
+    "@atlaskit/tokens" "^1.28.0"
+    "@babel/runtime" "^7.0.0"
+    "@emotion/react" "^11.7.1"
+
 "@atlaskit/textarea@^4.7.7":
   version "4.7.7"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/textarea/-/textarea-4.7.7.tgz#eafa1096f8cdbe65bff26e9b82ac241236bf7d80"
@@ -524,7 +670,7 @@
     "@babel/types" "^7.20.0"
     bind-event-listener "^2.1.1"
 
-"@atlaskit/tokens@^1.28.0":
+"@atlaskit/tokens@^1.28.0", "@atlaskit/tokens@^1.29.0":
   version "1.29.0"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tokens/-/tokens-1.29.0.tgz#812ddab4d1baacec80f57934b92823bb9fcfd6ba"
   integrity sha512-VDSl6+HKwInNt9mHXO2M2wKlWDo9rCOFhcAbXD+V3z5AsM7ccjX7Dl9Z2H9lciV6o+pkS0FkdE83DfJVgCBiRg==
@@ -1840,6 +1986,13 @@
   dependencies:
     regenerator-runtime "^0.14.0"
 
+"@babel/runtime@^7.21.0":
+  version "7.23.5"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/runtime/-/runtime-7.23.5.tgz#11edb98f8aeec529b82b211028177679144242db"
+  integrity sha512-NdUTHcPe4C99WxPub+K9l9tK5/lV4UXIoaHSYgzco9BCyjKAAwzdBI+wWtYqHt7LJdbo74ZjRPJgzVweq1sz0w==
+  dependencies:
+    regenerator-runtime "^0.14.0"
+
 "@babel/template@^7.22.15":
   version "7.22.15"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@babel/template/-/template-7.22.15.tgz#09576efc3830f0430f4548ef971dde1350ef2f38"
@@ -5097,6 +5250,13 @@ data-urls@^3.0.2:
     whatwg-mimetype "^3.0.0"
     whatwg-url "^11.0.0"
 
+date-fns@^2.17.0:
+  version "2.30.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/date-fns/-/date-fns-2.30.0.tgz#f367e644839ff57894ec6ac480de40cae4b0f4d0"
+  integrity sha512-fnULvOpxnC5/Vg3NCiWelDsLiUc9bRwAPs/+LfTLNvetFCtCTN+yQz15C/fs4AwX1R9K5GLtLfn8QW+dWisaAw==
+  dependencies:
+    "@babel/runtime" "^7.21.0"
+
 debug@2.6.9, debug@^2.6.0:
   version "2.6.9"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/debug/-/debug-2.6.9.tgz#5d128515df134ff327e90a4c93f4e077a536341f"
@@ -10398,6 +10558,11 @@ shallow-equal@^1.0.0:
   resolved "https://packages.atlassian.com/api/npm/npm-remote/shallow-equal/-/shallow-equal-1.2.1.tgz#4c16abfa56043aa20d050324efa68940b0da79da"
   integrity sha512-S4vJDjHHMBaiZuT9NPb616CSmLf618jawtv3sufLl6ivK8WocjAo58cXwbRV1cgqxH0Qbv+iUt6m05eqEa2IRA==
 
+shallow-equal@^3.1.0:
+  version "3.1.0"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/shallow-equal/-/shallow-equal-3.1.0.tgz#e7a54bac629c7f248eff6c2f5b63122ba4320bec"
+  integrity sha512-pfVOw8QZIXpMbhBWvzBISicvToTiM5WBF1EeAUZDDSb5Dt29yl4AYbyywbJFSEsRUMr7gJaxqCdr4L3tQf9wVg==
+
 shebang-command@^2.0.0:
   version "2.0.0"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/shebang-command/-/shebang-command-2.0.0.tgz#ccd0af4f8835fbdc265b82461aaf0c36663f34ea"

From 54747ffcb0885c680815595d02acbc672a695c2d Mon Sep 17 00:00:00 2001
From: Kayub Maharjan <kmaharjan4@atlassian.com>
Date: Wed, 6 Dec 2023 10:46:54 +1100
Subject: [PATCH 05/15] - WIP - backfill modal

---
 spa/src/pages/Connections/Modals/RestartBackfillModal.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
index 3710816636..15d5eaeb3a 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
@@ -38,7 +38,7 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 						{/* TODO: This datepicker is throwing a dependency issue saying module not found, add it later when fixed*/}
 						{/*<DatePicker*/}
 						{/*	selectProps={{*/}
-						{/*		inputId: "default-date-picker-example",*/}
+						{/*		inputId: "backfill-date-picker",*/}
 						{/*	}}*/}
 						{/*/>*/}
 					</p>

From 0b4d49f7a5a547f77ac07e3c31db5f5eaa762635 Mon Sep 17 00:00:00 2001
From: Kayub Maharjan <kmaharjan4@atlassian.com>
Date: Thu, 7 Dec 2023 12:30:26 +1100
Subject: [PATCH 06/15] - Using the corrected datepicker

---
 spa/package.json                              |  2 +-
 .../Modals/RestartBackfillModal.tsx           | 19 +++++----
 spa/yarn.lock                                 | 42 ++++++++++++-------
 3 files changed, 39 insertions(+), 24 deletions(-)

diff --git a/spa/package.json b/spa/package.json
index 45f2ba921a..18c3da0b0e 100644
--- a/spa/package.json
+++ b/spa/package.json
@@ -27,7 +27,7 @@
     "@atlaskit/button": "^16.8.0",
     "@atlaskit/checkbox": "^13.0.1",
     "@atlaskit/css-reset": "^6.5.2",
-    "@atlaskit/datetime-picker": "^13.0.2",
+    "@atlaskit/datetime-picker": "^13.0.3",
     "@atlaskit/dynamic-table": "^14.11.5",
     "@atlaskit/form": "^8.11.8",
     "@atlaskit/heading": "^1.3.7",
diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
index 15d5eaeb3a..888f5ab68d 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
@@ -4,7 +4,7 @@ import Button from "@atlaskit/button";
 import { SuccessfulConnection } from "../../../../../src/rest-interfaces";
 import { Checkbox } from "@atlaskit/checkbox";
 import { Label } from "@atlaskit/form";
-// import { DatePicker } from "@atlaskit/datetime-picker";
+import { DatePicker } from "@atlaskit/datetime-picker";
 
 /**
  * NOTE: While testing in dev mode, please disable the React.StrictMode first,
@@ -15,10 +15,11 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 	setIsModalOpened: (x: boolean) => void
 }) => {
 	const [restartFromDateCheck, setRestartFromDateCheck] = useState(false);
+	const [backfillDate, setBackfillDate] = useState("");
 
 	const backfill = () => {
 		// TODO: API call to disconnect this subscription
-		console.log("Backfill for", subscription.account.login, restartFromDateCheck);
+		console.log("Backfill for", subscription.account.login, restartFromDateCheck, backfillDate);
 		setIsModalOpened(false);
 	};
 
@@ -35,12 +36,14 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 					</p>
 					<p>
 						<Label htmlFor="backfill-date-picker">Choose date</Label>
-						{/* TODO: This datepicker is throwing a dependency issue saying module not found, add it later when fixed*/}
-						{/*<DatePicker*/}
-						{/*	selectProps={{*/}
-						{/*		inputId: "backfill-date-picker",*/}
-						{/*	}}*/}
-						{/*/>*/}
+						<DatePicker
+							selectProps={{
+								inputId: "backfill-date-picker",
+							}}
+							placeholder="Select date"
+							autoFocus={false}
+							onChange={setBackfillDate}
+						/>
 					</p>
 					<p>
 						<Checkbox
diff --git a/spa/yarn.lock b/spa/yarn.lock
index 46fe9c2888..26f4f36526 100644
--- a/spa/yarn.lock
+++ b/spa/yarn.lock
@@ -97,9 +97,9 @@
     "@emotion/react" "^11.7.1"
 
 "@atlaskit/button@^16.17.0":
-  version "16.17.10"
-  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/button/-/button-16.17.10.tgz#8e305dc7ff926f44ee1acd51f29fdd270cb5fd05"
-  integrity sha512-C7UIVAKKrHOtwHiLT94XfyqQ/EAvWq4C7BxaxY0iTJZCvBTgZcefuHLsol9j612IaT7B8NJ/+vnwkKFpGjvFkQ==
+  version "16.17.11"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/button/-/button-16.17.11.tgz#2b4410b28ea7a627f529e37a50e9fb13aebddbb7"
+  integrity sha512-1zwdb6saW8XTf//8CQ24sEACgQqzG++bJvz1mqQo2t+embRo+OWgOgTYf4MGzkztGw9vIOMdreiiLAv9NNCpvA==
   dependencies:
     "@atlaskit/analytics-next" "^9.1.0"
     "@atlaskit/ds-lib" "^2.2.0"
@@ -149,9 +149,9 @@
     "@emotion/react" "^11.7.1"
 
 "@atlaskit/calendar@^14.0.0":
-  version "14.0.2"
-  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/calendar/-/calendar-14.0.2.tgz#df392186a2d64cbc6edab77affead0436c2fb4ad"
-  integrity sha512-v81dRWJ0EVGV2H+VVE3IPLaOehJxVcK/xIk9He1WgjN0fN/1Ejmmt96+9oxo6FbR8prSg4IDGMpUyJrBzgOg0g==
+  version "14.0.3"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/calendar/-/calendar-14.0.3.tgz#4e27ed33457958eec024af98512c957b77f50348"
+  integrity sha512-+mSUBALjCd3Qk4VwHmPvO6Y0KdblzvQSF5TAaRPRjMwoDw3V/i3USOWcTQ1obFSXm327ZulW+uLqTM3YsklvDA==
   dependencies:
     "@atlaskit/analytics-next" "^9.1.0"
     "@atlaskit/button" "^16.17.0"
@@ -199,10 +199,10 @@
     "@babel/runtime" "^7.0.0"
     fbjs "^3.0.0"
 
-"@atlaskit/datetime-picker@^13.0.2":
-  version "13.0.2"
-  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/datetime-picker/-/datetime-picker-13.0.2.tgz#6ce8899117134801dd7ef89730b6c4b77307ec48"
-  integrity sha512-kz/h+/dTT8QyajUm4nWt7BTfQo1D5efpqennHQNfjck70Y0TApNVZSnesFaVn3hNn1EaLwJ5KsubtQqdSUjiiA==
+"@atlaskit/datetime-picker@^13.0.3":
+  version "13.0.3"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/datetime-picker/-/datetime-picker-13.0.3.tgz#36ed3ac39e2baac5e69580ee197be70c9e26fc49"
+  integrity sha512-xWo7faLWzOnNbpk1HcpkD0XyryPhmIWwA+ee4xSjIBnHhxTJAbUTH0CdpeYJ6sZqnm2HjmVdKDmMl6cDo61xpg==
   dependencies:
     "@atlaskit/analytics-next" "^9.1.0"
     "@atlaskit/calendar" "^14.0.0"
@@ -536,16 +536,16 @@
     shallow-equal "^1.0.0"
 
 "@atlaskit/select@^17.0.0":
-  version "17.0.1"
-  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/select/-/select-17.0.1.tgz#04de803672673ada760101f149d622a04275cb91"
-  integrity sha512-vh4UALGNoislGUSVt4VZXSrgYpGWnQn5jTQwlSkrX3hutkM3z/0P8YvoEdFPIAJHdu2ryg2nq3P1w7mwLwjWTQ==
+  version "17.0.3"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/select/-/select-17.0.3.tgz#03fbee4d6caa74c7ee4660107f3aaa42be9efd42"
+  integrity sha512-YEr7plvrlqw4z/dGc6srKZI8QsyBkMf63p7PAS7mLIYuAnPG1eONwcRoVLqBVeAJeWcK5is1GUdQM5Z6kdJ5xw==
   dependencies:
     "@atlaskit/analytics-next" "^9.1.0"
     "@atlaskit/icon" "^22.0.0"
     "@atlaskit/platform-feature-flags" "^0.2.0"
     "@atlaskit/spinner" "^16.0.0"
     "@atlaskit/theme" "^12.6.0"
-    "@atlaskit/tokens" "^1.28.0"
+    "@atlaskit/tokens" "^1.29.0"
     "@atlaskit/visually-hidden" "^1.2.0"
     "@babel/runtime" "^7.0.0"
     "@emotion/react" "^11.7.1"
@@ -670,7 +670,7 @@
     "@babel/types" "^7.20.0"
     bind-event-listener "^2.1.1"
 
-"@atlaskit/tokens@^1.28.0", "@atlaskit/tokens@^1.29.0":
+"@atlaskit/tokens@^1.28.0":
   version "1.29.0"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tokens/-/tokens-1.29.0.tgz#812ddab4d1baacec80f57934b92823bb9fcfd6ba"
   integrity sha512-VDSl6+HKwInNt9mHXO2M2wKlWDo9rCOFhcAbXD+V3z5AsM7ccjX7Dl9Z2H9lciV6o+pkS0FkdE83DfJVgCBiRg==
@@ -682,6 +682,18 @@
     "@babel/types" "^7.20.0"
     bind-event-listener "^2.1.1"
 
+"@atlaskit/tokens@^1.29.0":
+  version "1.29.2"
+  resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tokens/-/tokens-1.29.2.tgz#0f909d5315c002bcda6349039d11c544c0c23351"
+  integrity sha512-gxJSfvpDPmVDPt76swB1GFPhrAlKcKnmKtyP/I18amBbvvW3dmcPWJn94f1e78Aax363ozfcmGbsYj/NK3bZ6A==
+  dependencies:
+    "@atlaskit/ds-lib" "^2.2.0"
+    "@atlaskit/platform-feature-flags" "^0.2.0"
+    "@babel/runtime" "^7.0.0"
+    "@babel/traverse" "^7.23.2"
+    "@babel/types" "^7.20.0"
+    bind-event-listener "^2.1.1"
+
 "@atlaskit/tokens@^1.4.0", "@atlaskit/tokens@^1.8.0":
   version "1.10.1"
   resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tokens/-/tokens-1.10.1.tgz#28e32d1205bf7f771e0f523dea17fbecac297bdb"

From a3b96bfdcc4dbc039b59b4585539d4c6192868c7 Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Thu, 7 Dec 2023 14:53:55 +1100
Subject: [PATCH 07/15] - Fixing the delete subscription endpoint

---
 .../Connections/Modals/RestartBackfillModal.tsx | 17 +++++++++++++++--
 1 file changed, 15 insertions(+), 2 deletions(-)

diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
index 888f5ab68d..2b4a01d3c7 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useEffect, useState } from "react";
 import Modal, { ModalBody, ModalFooter, ModalHeader, ModalTitle } from "@atlaskit/modal-dialog";
 import Button from "@atlaskit/button";
 import { SuccessfulConnection } from "../../../../../src/rest-interfaces";
@@ -17,6 +17,19 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 	const [restartFromDateCheck, setRestartFromDateCheck] = useState(false);
 	const [backfillDate, setBackfillDate] = useState("");
 
+	/**
+	 * TODO: Remove this later once the issue within datepicker is identified and fixed
+	 * Thread: https://atlassian.slack.com/archives/CFJ9DU39U/p1701912243843529
+	 *
+	 * The datepicker jumps around when rendered inside a modal,
+	 * Until that is fixed, adding a short disable for the datepicker,
+	 * which is then enabled to avoid having the jumpy effect.
+	 */
+	const [isDisabled, setIsDisabled] = useState(true);
+	useEffect(() => {
+		setTimeout(() => setIsDisabled(false), 10);
+	}, []);
+
 	const backfill = () => {
 		// TODO: API call to disconnect this subscription
 		console.log("Backfill for", subscription.account.login, restartFromDateCheck, backfillDate);
@@ -41,7 +54,7 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 								inputId: "backfill-date-picker",
 							}}
 							placeholder="Select date"
-							autoFocus={false}
+							isDisabled={isDisabled} // TODO: remove this later
 							onChange={setBackfillDate}
 						/>
 					</p>

From f455983556b74ad72c22ec7e0d526d3ef9e3c88f Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Thu, 7 Dec 2023 17:15:39 +1100
Subject: [PATCH 08/15] - Test cases added - TODO updated

---
 .../DisconnectSubscriptionModal.test.tsx      | 45 +++++++++++++++++++
 .../Modals/DisconnectSubscriptionModal.tsx    |  2 +-
 .../Modals/RestartBackfillModal.test.tsx      | 45 +++++++++++++++++++
 spa/src/utils/dynamicTableHelper.tsx          |  2 +-
 4 files changed, 92 insertions(+), 2 deletions(-)
 create mode 100644 spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
 create mode 100644 spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx

diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
new file mode 100644
index 0000000000..9e509bb323
--- /dev/null
+++ b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
@@ -0,0 +1,45 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+import DisconnectSubscriptionModal from "./DisconnectSubscriptionModal";
+
+const sampleSubscription = {
+	app_slug: "string",
+	syncWarning: "warning",
+	id: 1,
+	account:  {
+		login: "sample",
+		id: 1,
+		avatar_url: "string",
+	},
+	repository_selection: "string",
+	app_id: 1,
+	target_id: 1,
+	target_type: "string",
+	created_at: "string",
+	updated_at: "string",
+	syncStatus: "string",
+	totalNumberOfRepos: 2,
+	numberOfSyncedRepos: 2,
+	jiraHost: "https://test-jira.atlassian.net",
+	isGlobalInstall: true,
+	backfillSince: null,
+	subscriptionId: 1
+};
+const isModalOpened = jest.fn();
+
+test("Disconnect subscription Modal", async () => {
+	render(
+		<BrowserRouter>
+			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} />
+		</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("Cancel"));
+	expect(isModalOpened).toBeCalled();
+});
diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
index a5ddf794f8..c0c3f88e4f 100644
--- a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
+++ b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
@@ -25,7 +25,7 @@ const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: {
 					</ModalTitle>
 				</ModalHeader>
 				<ModalBody>
-					<p>
+					<p data-testid="disconnect-content">
 						Are you sure you want to disconnect your organization <b>{subscription.account.login}</b>?
 						This means that you will have to redo the backfill of historical data if you ever want to reconnect
 					</p>
diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
new file mode 100644
index 0000000000..d0fefdffa5
--- /dev/null
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
@@ -0,0 +1,45 @@
+import "@testing-library/jest-dom";
+import { render, screen } from "@testing-library/react";
+import { BrowserRouter } from "react-router-dom";
+import userEvent from "@testing-library/user-event";
+import RestartBackfillModal from "./RestartBackfillModal";
+
+const sampleSubscription = {
+	app_slug: "string",
+	syncWarning: "warning",
+	id: 1,
+	account:  {
+		login: "sample",
+		id: 1,
+		avatar_url: "string",
+	},
+	repository_selection: "string",
+	app_id: 1,
+	target_id: 1,
+	target_type: "string",
+	created_at: "string",
+	updated_at: "string",
+	syncStatus: "string",
+	totalNumberOfRepos: 2,
+	numberOfSyncedRepos: 2,
+	jiraHost: "https://test-jira.atlassian.net",
+	isGlobalInstall: true,
+	backfillSince: null,
+	subscriptionId: 1
+};
+const isModalOpened = jest.fn();
+
+test("Restart backfill Modal", async () => {
+	const { container } = render(
+		<BrowserRouter>
+			<RestartBackfillModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} />
+		</BrowserRouter>
+	);
+
+	expect(screen.getByText("Backfill your data")).toBeInTheDocument();
+	expect(container.querySelector("input#backfill-date-picker")).toBeInTheDocument();
+	expect(container.querySelector("input[type='checkbox']")).toBeInTheDocument();
+
+	await userEvent.click(screen.getByText("Cancel"));
+	expect(isModalOpened).toBeCalled();
+});
diff --git a/spa/src/utils/dynamicTableHelper.tsx b/spa/src/utils/dynamicTableHelper.tsx
index 96dac29f03..9374dc9923 100644
--- a/spa/src/utils/dynamicTableHelper.tsx
+++ b/spa/src/utils/dynamicTableHelper.tsx
@@ -164,7 +164,7 @@ export const getGHSubscriptionsRows = (
 					key: cloudConnection.id,
 					content: (
 						<>
-							{/* TODO: Convert this into a dropdown */}
+							{/* TODO: Add this in the dropdown list once merged with ARC-2720 */}
 							<div onClick={() => {
 								callbacks?.setIsModalOpened(true);
 								callbacks?.setSubscriptionForModal(cloudConnection);

From d3934ee85978d213d15e41b51007f37e97a52e32 Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Thu, 7 Dec 2023 17:51:39 +1100
Subject: [PATCH 09/15] - Fixing test cases

---
 .../pages/Connections/Modals/RestartBackfillModal.test.tsx  | 6 +++---
 spa/src/pages/Connections/Modals/RestartBackfillModal.tsx   | 1 +
 2 files changed, 4 insertions(+), 3 deletions(-)

diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
index d0fefdffa5..6303293df2 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
@@ -30,15 +30,15 @@ const sampleSubscription = {
 const isModalOpened = jest.fn();
 
 test("Restart backfill Modal", async () => {
-	const { container } = render(
+	render(
 		<BrowserRouter>
 			<RestartBackfillModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} />
 		</BrowserRouter>
 	);
 
 	expect(screen.getByText("Backfill your data")).toBeInTheDocument();
-	expect(container.querySelector("input#backfill-date-picker")).toBeInTheDocument();
-	expect(container.querySelector("input[type='checkbox']")).toBeInTheDocument();
+	// expect(screen.queryByTestId("backfill-datepicker")).toBeInTheDocument();
+	expect(screen.getByRole("checkbox", {name: "Restart the backfill from today to this date"})).toBeInTheDocument();
 
 	await userEvent.click(screen.getByText("Cancel"));
 	expect(isModalOpened).toBeCalled();
diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
index 2b4a01d3c7..f8f4e36e1e 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
@@ -50,6 +50,7 @@ const RestartBackfillModal = ({ subscription, setIsModalOpened }: {
 					<p>
 						<Label htmlFor="backfill-date-picker">Choose date</Label>
 						<DatePicker
+							testId="backfill-datepicker"
 							selectProps={{
 								inputId: "backfill-date-picker",
 							}}

From 18c04ecd87a2d288292cda0ce152cef4649bcb03 Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Fri, 8 Dec 2023 10:25:26 +1100
Subject: [PATCH 10/15] - Added delete subscription function on modal button
 click - Updated the fetchSubscription to use the SubscriptionManager.

---
 .../Modals/DisconnectSubscriptionModal.tsx    | 32 ++++++++++---
 spa/src/pages/Connections/index.tsx           | 35 +++++++-------
 .../services/subscription-manager/index.ts    | 47 +++++++++++++++++++
 src/rest-interfaces/index.ts                  |  5 ++
 4 files changed, 94 insertions(+), 25 deletions(-)
 create mode 100644 spa/src/services/subscription-manager/index.ts

diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
index c0c3f88e4f..b3c7eedd3b 100644
--- a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
+++ b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
@@ -1,6 +1,9 @@
+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,
@@ -10,9 +13,15 @@ const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: {
 	subscription: SuccessfulConnection,
 	setIsModalOpened: (x: boolean) => 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.id);
+		if (response instanceof AxiosError) {
+			// TODO: Handle the error once we have the designs
+			console.error("Error", response);
+		}
 		setIsModalOpened(false);
 	};
 
@@ -31,10 +40,19 @@ const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: {
 					</p>
 				</ModalBody>
 				<ModalFooter>
-					<Button appearance="subtle" onClick={() => setIsModalOpened(false)}>Cancel</Button>
-					<Button appearance="danger" onClick={disconnect}>
-						Disconnect
+					<Button
+						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>
 		</>
diff --git a/spa/src/pages/Connections/index.tsx b/spa/src/pages/Connections/index.tsx
index 905091c9b3..4f4567d52b 100644
--- a/spa/src/pages/Connections/index.tsx
+++ b/spa/src/pages/Connections/index.tsx
@@ -1,29 +1,28 @@
 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 { SubscriptionsInBackfill } from "../../rest-interfaces";
 import SkeletonForLoading from "./SkeletonForLoading";
 import { useNavigate } from "react-router-dom";
+import SubscriptionManager from "~/src/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<SubscriptionsInBackfill | 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);
+		setIsLoading(false);
 	};
 	useEffect(() => {
 		fetchGHSubscriptions();
@@ -31,10 +30,10 @@ const Connections = () => {
 
 	// 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>
@@ -42,14 +41,14 @@ const Connections = () => {
 			{
 				isLoading ? <SkeletonForLoading /> : <>
 					{
-						ghSubscriptions?.ghCloudSubscriptions && <Step title="GitHub Cloud">
-							<GitHubCloudConnections ghCloudSubscriptions={ghSubscriptions.ghCloudSubscriptions} />
+						subscriptions?.ghCloudSubscriptions && <Step title="GitHub Cloud">
+							<GitHubCloudConnections ghCloudSubscriptions={subscriptions.ghCloudSubscriptions} />
 						</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>
 					}
 				</>
diff --git a/spa/src/services/subscription-manager/index.ts b/spa/src/services/subscription-manager/index.ts
new file mode 100644
index 0000000000..f56188bcaa
--- /dev/null
+++ b/spa/src/services/subscription-manager/index.ts
@@ -0,0 +1,47 @@
+import Api from "../../api";
+import { AxiosError } from "axios";
+import { reportError } from "../../utils";
+import { SubscriptionsInBackfill } from "../../../../src/rest-interfaces";
+
+async function getSubscriptions(): Promise<SubscriptionsInBackfill | 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,
+};
+
+
diff --git a/src/rest-interfaces/index.ts b/src/rest-interfaces/index.ts
index 9ec5151707..a26a9ea4c7 100644
--- a/src/rest-interfaces/index.ts
+++ b/src/rest-interfaces/index.ts
@@ -185,4 +185,9 @@ export type GHSubscriptions = {
 	ghEnterpriseServers: GhEnterpriseServer[];
 };
 
+export type SubscriptionsInBackfill = {
+	ghSubscriptions: GHSubscriptions;
+	ghEnterpriseServers: GhEnterpriseServer;
+}
+
 export type BackfillPageModalTypes = "BACKFILL" | "DISCONNECT_SUBSCRIPTION" | "DISCONNECT_SERVER_APP" | "DISCONNECT_SERVER";

From ba947ab1ca25e47901c69529a2aba799aee49637 Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Fri, 8 Dec 2023 10:34:41 +1100
Subject: [PATCH 11/15] - Fixing types

---
 spa/src/pages/Connections/index.tsx            | 8 ++++----
 spa/src/services/subscription-manager/index.ts | 4 ++--
 src/rest-interfaces/index.ts                   | 4 ----
 3 files changed, 6 insertions(+), 10 deletions(-)

diff --git a/spa/src/pages/Connections/index.tsx b/spa/src/pages/Connections/index.tsx
index 4f4567d52b..bd17c01ad9 100644
--- a/spa/src/pages/Connections/index.tsx
+++ b/spa/src/pages/Connections/index.tsx
@@ -4,16 +4,16 @@ import Step from "../../components/Step";
 import { Wrapper } from "../../common/Wrapper";
 import GitHubCloudConnections from "./GHCloudConnections";
 import GitHubEnterpriseConnections from "./GHEnterpriseConnections";
-import { SubscriptionsInBackfill } from "../../rest-interfaces";
+import { GHSubscriptions } from "../../rest-interfaces";
 import SkeletonForLoading from "./SkeletonForLoading";
 import { useNavigate } from "react-router-dom";
-import SubscriptionManager from "~/src/services/subscription-manager";
+import SubscriptionManager from "../../services/subscription-manager";
 import { AxiosError } from "axios";
 
 const Connections = () => {
 	const navigate = useNavigate();
 	const [isLoading, setIsLoading] = useState<boolean>(false);
-	const [subscriptions, setSubscriptions] = useState<SubscriptionsInBackfill | null>(null);
+	const [subscriptions, setSubscriptions] = useState<GHSubscriptions | null>(null);
 	const fetchGHSubscriptions = async () => {
 		setIsLoading(true);
 		const response = await SubscriptionManager.getSubscriptions();
@@ -21,7 +21,7 @@ const Connections = () => {
 			// TODO: Handle the error once we have the designs
 			console.error("Error", response);
 		}
-		setSubscriptions(response);
+		setSubscriptions(response as GHSubscriptions);
 		setIsLoading(false);
 	};
 	useEffect(() => {
diff --git a/spa/src/services/subscription-manager/index.ts b/spa/src/services/subscription-manager/index.ts
index f56188bcaa..4c2dcd62c8 100644
--- a/spa/src/services/subscription-manager/index.ts
+++ b/spa/src/services/subscription-manager/index.ts
@@ -1,9 +1,9 @@
 import Api from "../../api";
 import { AxiosError } from "axios";
 import { reportError } from "../../utils";
-import { SubscriptionsInBackfill } from "../../../../src/rest-interfaces";
+import { GHSubscriptions } from "../../../../src/rest-interfaces";
 
-async function getSubscriptions(): Promise<SubscriptionsInBackfill | AxiosError> {
+async function getSubscriptions(): Promise<GHSubscriptions | AxiosError> {
 	try {
 		const response= await Api.subscriptions.getSubscriptions();
 		const status = response.status === 200;
diff --git a/src/rest-interfaces/index.ts b/src/rest-interfaces/index.ts
index a26a9ea4c7..10186ddb7e 100644
--- a/src/rest-interfaces/index.ts
+++ b/src/rest-interfaces/index.ts
@@ -185,9 +185,5 @@ export type GHSubscriptions = {
 	ghEnterpriseServers: GhEnterpriseServer[];
 };
 
-export type SubscriptionsInBackfill = {
-	ghSubscriptions: GHSubscriptions;
-	ghEnterpriseServers: GhEnterpriseServer;
-}
 
 export type BackfillPageModalTypes = "BACKFILL" | "DISCONNECT_SUBSCRIPTION" | "DISCONNECT_SERVER_APP" | "DISCONNECT_SERVER";

From 4e5a822b75b7c2b67a130d8513426eae2d725300 Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Fri, 8 Dec 2023 10:38:13 +1100
Subject: [PATCH 12/15] - Minor fixing

---
 .../pages/Connections/Modals/DisconnectSubscriptionModal.tsx    | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
index b3c7eedd3b..116f01ab67 100644
--- a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
+++ b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
@@ -17,7 +17,7 @@ const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: {
 
 	const disconnect = async () => {
 		setIsLoading(true);
-		const response: boolean | AxiosError = await SubscriptionManager.deleteSubscription(subscription.id);
+		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);

From 1de5bb606b077f87270df9fdcc700d1bb8bd1d3e Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Fri, 8 Dec 2023 10:46:39 +1100
Subject: [PATCH 13/15] - Adding test case

---
 .../DisconnectSubscriptionModal.test.tsx      | 26 ++++++++++++++++++-
 1 file changed, 25 insertions(+), 1 deletion(-)

diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
index 9e509bb323..381d78b294 100644
--- a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
+++ b/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,7 +32,7 @@ const sampleSubscription = {
 };
 const isModalOpened = jest.fn();
 
-test("Disconnect subscription Modal", async () => {
+test("Clicking cancel in disconnect subscription Modal", async () => {
 	render(
 		<BrowserRouter>
 			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} />
@@ -43,3 +46,24 @@ test("Disconnect subscription Modal", async () => {
 	await userEvent.click(screen.getByText("Cancel"));
 	expect(isModalOpened).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} />
+		</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);
+});

From 5cf2caa4c6de436b631ecc18a7d85abbaa30baf3 Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Fri, 8 Dec 2023 10:57:53 +1100
Subject: [PATCH 14/15] - Refetching added

---
 spa/src/pages/Connections/GHCloudConnections/index.tsx    | 8 ++++++--
 .../Modals/DisconnectSubscriptionModal.test.tsx           | 7 +++++--
 .../Connections/Modals/DisconnectSubscriptionModal.tsx    | 6 ++++--
 .../Connections/Modals/RestartBackfillModal.test.tsx      | 3 ++-
 spa/src/pages/Connections/Modals/RestartBackfillModal.tsx | 8 +++++---
 spa/src/pages/Connections/index.tsx                       | 2 +-
 6 files changed, 23 insertions(+), 11 deletions(-)

diff --git a/spa/src/pages/Connections/GHCloudConnections/index.tsx b/spa/src/pages/Connections/GHCloudConnections/index.tsx
index 1983b34420..ceef92608b 100644
--- a/spa/src/pages/Connections/GHCloudConnections/index.tsx
+++ b/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>
 		</>
diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
index 381d78b294..24c2a849d6 100644
--- a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
+++ b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.test.tsx
@@ -31,11 +31,12 @@ const sampleSubscription = {
 	subscriptionId: 1
 };
 const isModalOpened = jest.fn();
+const refetch = jest.fn();
 
 test("Clicking cancel in disconnect subscription Modal", async () => {
 	render(
 		<BrowserRouter>
-			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} />
+			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} refetch={refetch} />
 		</BrowserRouter>
 	);
 
@@ -45,6 +46,7 @@ test("Clicking cancel in 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 () => {
@@ -52,7 +54,7 @@ test("Clicking Disconnect in disconnect subscription Modal", async () => {
 
 	render(
 		<BrowserRouter>
-			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} />
+			<DisconnectSubscriptionModal subscription={sampleSubscription} setIsModalOpened={isModalOpened} refetch={refetch} />
 		</BrowserRouter>
 	);
 
@@ -66,4 +68,5 @@ test("Clicking Disconnect in disconnect subscription Modal", async () => {
 	 * and later after getting the response from the API request
 	 */
 	expect(isModalOpened).toBeCalledTimes(2);
+	expect(refetch).toBeCalled();
 });
diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
index 116f01ab67..2867cda2f7 100644
--- a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
+++ b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
@@ -9,9 +9,10 @@ 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 [isLoading, setIsLoading] = useState<boolean>(false);
 
@@ -22,6 +23,7 @@ const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened }: {
 			// TODO: Handle the error once we have the designs
 			console.error("Error", response);
 		}
+		await refetch();
 		setIsModalOpened(false);
 	};
 
diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
index 6303293df2..2bae575e61 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
+++ b/spa/src/pages/Connections/Modals/RestartBackfillModal.test.tsx
@@ -28,11 +28,12 @@ const sampleSubscription = {
 	subscriptionId: 1
 };
 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>
 	);
 
diff --git a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx b/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
index f8f4e36e1e..959005315c 100644
--- a/spa/src/pages/Connections/Modals/RestartBackfillModal.tsx
+++ b/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);
 	};
 
diff --git a/spa/src/pages/Connections/index.tsx b/spa/src/pages/Connections/index.tsx
index bd17c01ad9..6b02c82bde 100644
--- a/spa/src/pages/Connections/index.tsx
+++ b/spa/src/pages/Connections/index.tsx
@@ -42,7 +42,7 @@ const Connections = () => {
 				isLoading ? <SkeletonForLoading /> : <>
 					{
 						subscriptions?.ghCloudSubscriptions && <Step title="GitHub Cloud">
-							<GitHubCloudConnections ghCloudSubscriptions={subscriptions.ghCloudSubscriptions} />
+							<GitHubCloudConnections ghCloudSubscriptions={subscriptions.ghCloudSubscriptions} refetch={fetchGHSubscriptions} />
 						</Step>
 					}
 

From ec6ef6b444a7c4d87c002a94be7550570407f89f Mon Sep 17 00:00:00 2001
From: kAy <kay.krazzie@gmail.com>
Date: Fri, 8 Dec 2023 11:05:19 +1100
Subject: [PATCH 15/15] - Cleanup

---
 .../pages/Connections/Modals/DisconnectSubscriptionModal.tsx  | 4 +++-
 1 file changed, 3 insertions(+), 1 deletion(-)

diff --git a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
index 2867cda2f7..05c12cbc6f 100644
--- a/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
+++ b/spa/src/pages/Connections/Modals/DisconnectSubscriptionModal.tsx
@@ -22,8 +22,9 @@ const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened, refetch }
 		if (response instanceof AxiosError) {
 			// TODO: Handle the error once we have the designs
 			console.error("Error", response);
+		} else {
+			await refetch();
 		}
-		await refetch();
 		setIsModalOpened(false);
 	};
 
@@ -43,6 +44,7 @@ const DisconnectSubscriptionModal = ({ subscription, setIsModalOpened, refetch }
 				</ModalBody>
 				<ModalFooter>
 					<Button
+						isDisabled={isLoading}
 						appearance="subtle"
 						onClick={() => setIsModalOpened(false)}
 					>