Arc 2777 reactify GHE backfill pg

spa/src/api/subscriptions/index.ts

@@ -3,6 +3,10 @@ import { RestSyncReqBody } from "~/src/rest-interfaces";
 
 export default {
 	getSubscriptions: () => axiosRest.get("/rest/subscriptions"),
+	deleteGHEServer: (serverUrl: string) =>
+		axiosRest.delete(`/rest/ghes-servers/${serverUrl}`),
+	deleteGHEApp: (uuid: string) =>
+		axiosRest.delete(`/rest/app/${uuid}`),
 	deleteSubscription: (subscriptionId: number) =>
 		axiosRest.delete(`/rest/app/cloud/subscriptions/${subscriptionId}`),
 	syncSubscriptions: (subscriptionId: number, reqBody: RestSyncReqBody) =>

spa/src/common/Wrapper.tsx

@@ -9,23 +9,24 @@ const navHeight = 56;
 const wrapperStyle = css`
 	padding: 20px 40px 0px 40px;
 `;
-const wrapperCenterStyle = css`
+const getWrapperCenterStyle = (width: string | undefined) => css`
 	margin: 0 auto;
-	max-width: 580px;
+	max-width: ${width ? width: "580px"};
 	height: calc(100vh - ${navHeight * 2}px);
 	display: flex;
 	flex-direction: column;
 	justify-content: center;
 `;
 
-export const Wrapper = (attr: { hideClosedBtn?: boolean, children?: ReactNode | undefined }) => {
+export const Wrapper = (attr: { hideClosedBtn?: boolean, children?: ReactNode | undefined, width?:string }) => {
 	const navigateToHomePage = () => {
 		analyticsClient.sendUIEvent({ actionSubject: "dropExperienceViaBackButton", action: "clicked" });
 		AP.getLocation((location: string) => {
 			const locationUrl = new URL(location);
 			AP.navigator.go( "site", { absoluteUrl: `${locationUrl.origin}/jira/marketplace/discover/app/com.github.integration.production` });
 		});
 	};
+	const wrapperCenterStyle = getWrapperCenterStyle(attr.width || undefined);
 
 	return (
 		<div css={wrapperStyle}>
@@ -37,7 +38,6 @@ export const Wrapper = (attr: { hideClosedBtn?: boolean, children?: ReactNode |
 					onClick={navigateToHomePage}
 				/>
 			}
-
 			<div css={wrapperCenterStyle}>{attr.children}</div>
 		</div>
 	);

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

@@ -1,16 +1,14 @@
 /** @jsxImportSource @emotion/react */
-import { useState } from "react";
+import { Box, xcss } from "@atlaskit/primitives";
 import { DynamicTableStateless } from "@atlaskit/dynamic-table";
 import {
 	head,
 	getGHSubscriptionsRows,
 } from "../../../utils/dynamicTableHelper";
-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";
+import {
+	BackfillPageModalTypes,
+	GhCloudSubscriptions, SuccessfulConnection,
+} from "../../../rest-interfaces";
 
 const containerStyles = xcss({
 	display: "flex",
@@ -19,58 +17,30 @@ const containerStyles = xcss({
 
 type GitHubCloudConnectionsProps = {
 	ghCloudSubscriptions: GhCloudSubscriptions;
-	refetch: () => void;
+	setDataForModal: (dataForModal: SuccessfulConnection | undefined) => void,
+	setSelectedModal: (selectedModal:BackfillPageModalTypes) => void,
+	setIsModalOpened: (isModalOpen: boolean) => void,
 };
 
 const GitHubCloudConnections = ({
 	ghCloudSubscriptions,
-	refetch,
+	setIsModalOpened,
+	setDataForModal,
+	setSelectedModal,
 }: GitHubCloudConnectionsProps) => {
-	const [isModalOpened, setIsModalOpened] = useState(false);
-	const [subscriptionForModal, setSubscriptionForModal] = useState<SuccessfulConnection | undefined>(undefined);
-	const [selectedModal, setSelectedModal] = useState<BackfillPageModalTypes>("BACKFILL");
-
-	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":
-			case "DISCONNECT_SERVER_APP":
-			default:
-				return <></>;
-		}
-	};
-
 	return (
 		<>
 			<Box xcss={containerStyles}>
 				<DynamicTableStateless
 					head={head}
 					rows={getGHSubscriptionsRows(
 						ghCloudSubscriptions.successfulCloudConnections,
-						{ setIsModalOpened, setSubscriptionForModal, setSelectedModal }
+						{ setIsModalOpened, setDataForModal, setSelectedModal }
 					)}
 					rowsPerPage={5}
 					page={1}
 				/>
 			</Box>
-
-			<ModalTransition>
-				{
-					isModalOpened && subscriptionForModal && openedModal(refetch)
-				}
-			</ModalTransition>
 		</>
 	);
 };

spa/src/pages/Connections/GHEnterpriseConnections/GHEnterpriseAppHeader.tsx

@@ -0,0 +1,101 @@
+/** @jsxImportSource @emotion/react */
+import DropdownMenu, {
+	DropdownItem,
+	DropdownItemGroup,
+} from "@atlaskit/dropdown-menu";
+import Button from "@atlaskit/button";
+import { Flex, xcss } from "@atlaskit/primitives";
+import MoreIcon from "@atlaskit/icon/glyph/more";
+import Heading from "@atlaskit/heading";
+import ChevronRightIcon from "@atlaskit/icon/glyph/chevron-right";
+import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down";
+import {
+	BackfillPageModalTypes,
+	GitHubEnterpriseApplication,
+	SuccessfulConnection,
+} from "../../../rest-interfaces";
+import { css } from "@emotion/react";
+
+const applicationHeaderStyle = css`
+	cursor: pointer;
+	display: flex;
+	align-items: center;
+	justify-content: flex-start;
+	width: 100%;
+`;
+
+const appHeaderContainerStyle = xcss({
+	width: "100%",
+	justifyContent: "space-between",
+	marginBottom: "20px",
+});
+
+type GitHubEnterpriseApplicationProps = {
+	application: GitHubEnterpriseApplication;
+	setDataForModal: (dataForModal: SuccessfulConnection | GitHubEnterpriseApplication) => void;
+	setSelectedModal: (selectedModal: BackfillPageModalTypes) => void;
+	setIsModalOpened: (isModalOpen: boolean) => void;
+	showAppContent: boolean;
+	toggleShowAppContent: () => void;
+};
+
+const GHEnterpriseAppHeader = ({
+	application,
+	setIsModalOpened,
+	setDataForModal,
+	setSelectedModal,
+	showAppContent,
+	toggleShowAppContent
+}: GitHubEnterpriseApplicationProps) => {
+
+	const onEditGitHubApp = () =>{
+		const uuid = application.uuid;
+		AP.navigator.go(
+			"addonmodule",
+			{
+				moduleKey: "github-edit-app-page",
+				customData: { uuid }
+			}
+		);
+	};
+	return (
+			<Flex xcss={appHeaderContainerStyle}>
+				<div
+					css={applicationHeaderStyle}
+					onClick={() => {
+						toggleShowAppContent();
+					}}
+				>
+					{showAppContent ? (
+						<ChevronDownIcon label="" />
+					) : (
+						<ChevronRightIcon label="" />
+					)}
+					<Heading level="h400">{application.gitHubAppName}</Heading>
+				</div>
+				<div>
+					<DropdownMenu
+						trigger={({ triggerRef, ...props }) => (
+							<Button
+								{...props}
+								appearance="subtle"
+								iconBefore={<MoreIcon label="more" size="small" />}
+								ref={triggerRef}
+							/>
+						)}
+					>
+						<DropdownItemGroup>
+							<DropdownItem onClick={onEditGitHubApp}>Edit</DropdownItem>
+							<DropdownItem onClick={()=>{
+								setIsModalOpened(true);
+								setDataForModal(application);
+								setSelectedModal("DISCONNECT_SERVER_APP");
+							}}>Disconnect</DropdownItem>
+						</DropdownItemGroup>
+					</DropdownMenu>
+				</div>
+			</Flex>
+	);
+};
+
+export default GHEnterpriseAppHeader;