[INNO] ARC-2714 - Adding modals for backfill page

spa/package.json

@@ -25,7 +25,9 @@
     "@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/datetime-picker": "^13.0.3",
     "@atlaskit/dynamic-table": "^14.11.5",
     "@atlaskit/form": "^8.11.8",
     "@atlaskit/heading": "^1.3.7",

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>
+		</>
 	);
 };
 

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;

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

@@ -0,0 +1,80 @@
+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";
+import { Checkbox } from "@atlaskit/checkbox";
+import { Label } from "@atlaskit/form";
+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 }: {
+	subscription: SuccessfulConnection,
+	setIsModalOpened: (x: boolean) => void
+}) => {
+	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);
+		setIsModalOpened(false);
+	};
+
+	return (
+		<>
+			<Modal onClose={() => setIsModalOpened(false)}>
+				<ModalHeader>
+					<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>
+						<DatePicker
+							selectProps={{
+								inputId: "backfill-date-picker",
+							}}
+							placeholder="Select date"
+							isDisabled={isDisabled} // TODO: remove this later
+							onChange={setBackfillDate}
+						/>
+					</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>
+					<Button appearance="danger" onClick={backfill}>
+						Backfill data
+					</Button>
+				</ModalFooter>
+			</Modal>
+		</>
+	);
+};
+
+export default  RestartBackfillModal;

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>
+						</>
+					)
 				}
 			],
 		})