Arc 2749 kamakshee

spa/src/api/subscriptions/index.ts

@@ -3,6 +3,8 @@ import { RestSyncReqBody } from "~/src/rest-interfaces";
 
 export default {
 	getSubscriptions: () => axiosRest.get("/rest/subscriptions"),
+	deleteGHEServer: (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/GHEnterpriseApplication.tsx

@@ -4,16 +4,39 @@ import { useState } from "react";
 import Heading from "@atlaskit/heading";
 import ChevronRightIcon from "@atlaskit/icon/glyph/chevron-right";
 import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down";
-import { head, getGHSubscriptionsRows } from "../../../utils/dynamicTableHelper";
-import { GitHubEnterpriseApplication } from "../../../rest-interfaces";
+import {
+	head,
+	getGHSubscriptionsRows,
+} from "../../../utils/dynamicTableHelper";
+import {
+	BackfillPageModalTypes,
+	GitHubEnterpriseApplication,
+	SuccessfulConnection,
+} from "../../../rest-interfaces";
 import { css } from "@emotion/react";
 
+const connectNewAppLinkStyle = css`
+	text-decoration: none;
+`;
+
 const wrapperStyle = css`
 	display: flex;
-	align-items: center;
+	align-items: baseline;
 	flex-direction: column;
 `;
 
+const noConnectionsHeaderStyle = css`
+	padding-left: 25px;
+	padding-bottom: 10px;
+	padding-top: 10px;
+`;
+
+const noConnectionsBodyStyle = css`
+	padding-left: 25px;
+	padding-bottom: 10px;
+	padding-top: 10px;
+`;
+
 const applicationHeaderStyle = css`
 	cursor: pointer;
 	display: flex;
@@ -29,12 +52,42 @@ const applicationContentStyle = css`
 
 type GitHubEnterpriseApplicationProps = {
 	application: GitHubEnterpriseApplication;
+	setDataForModal: (
+		dataForModal: SuccessfulConnection | undefined
+	) => void;
+	setSelectedModal: (selectedModal: BackfillPageModalTypes) => void;
+	setIsModalOpened: (isModalOpen: boolean) => void;
 };
 
+function openChildWindow(url: string) {
+	const child: Window | null = window.open(url);
+	const interval = setInterval(function () {
+		if (child?.closed) {
+			clearInterval(interval);
+			AP.navigator.reload();
+		}
+	}, 100);
+	return child;
+}
+
 const GitHubEnterpriseApp = ({
 	application,
+	setIsModalOpened,
+	setDataForModal,
+	setSelectedModal,
 }: GitHubEnterpriseApplicationProps) => {
 	const [showAppContent, setShowAppContent] = useState<boolean>(true);
+	const onConnectNewApp = () => {
+		return AP.context.getToken((token: string) => {
+			const child: Window | null = openChildWindow(
+				`/session/github/${application.uuid}/configuration?ghRedirect=to`
+			);
+			if (child) {
+				/* eslint-disable @typescript-eslint/no-explicit-any*/
+				(child as any).window.jwt = token;
+			}
+		});
+	};
 	return (
 		<div css={wrapperStyle}>
 			<div
@@ -48,17 +101,46 @@ const GitHubEnterpriseApp = ({
 				) : (
 					<ChevronRightIcon label="" />
 				)}
+
 				<Heading level="h400">{application.gitHubAppName}</Heading>
 			</div>
 			{showAppContent && (
-				<div css={applicationContentStyle}>
-					<DynamicTableStateless
-						head={head}
-						rows={getGHSubscriptionsRows(application.successfulConnections)}
-						rowsPerPage={5}
-						page={1}
-					/>
-				</div>
+				<>
+					{application.successfulConnections.length > 0 ? (
+						<div css={applicationContentStyle}>
+							<DynamicTableStateless
+								head={head}
+								rows={getGHSubscriptionsRows(
+									application.successfulConnections,
+									{
+										setIsModalOpened,
+										setDataForModal,
+										setSelectedModal,
+									}
+								)}
+								rowsPerPage={5}
+								page={1}
+							/>
+						</div>
+					) : (
+						<>
+							<div css={noConnectionsHeaderStyle}>
+								<Heading level="h200">Connected organizations</Heading>
+							</div>
+							<div css={noConnectionsBodyStyle}>
+								No connected organizations.
+								<a
+									href="#"
+									css={connectNewAppLinkStyle}
+									onClick={onConnectNewApp}
+								>
+									{" "}
+									Connect a GitHub organization.
+								</a>
+							</div>
+						</>
+					)}
+				</>
 			)}
 		</div>
 	);

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

@@ -1,10 +1,17 @@
 /** @jsxImportSource @emotion/react */
 import { token } from "@atlaskit/tokens";
-import { Box, xcss } from "@atlaskit/primitives";
+import { first } from "lodash";
+import { Box, xcss, Flex } from "@atlaskit/primitives";
 import Heading from "@atlaskit/heading";
-import { GhEnterpriseServer } from "../../../rest-interfaces";
-import GitHubEnterpriseApplication from "./GHEnterpriseApplication";
+import Button from "@atlaskit/button";
 import { css } from "@emotion/react";
+import {
+	BackfillPageModalTypes,
+	GhEnterpriseServer,
+	SuccessfulConnection,
+	GitHubEnterpriseApplication
+} from "../../../rest-interfaces";
+import GHEApplication from "./GHEnterpriseApplication";
 
 const enterpriserServerHeaderStyle = css`
 	display: flex;
@@ -14,6 +21,11 @@ const enterpriserServerHeaderStyle = css`
 	justify-content: space-between;
 `;
 
+const enterpriserAppsHeaderStyle = css`
+	padding-left: 25px;
+	padding-bottom: 30px;
+`;
+
 const containerStyles = xcss({
 	display: "flex",
 	flexDirection: "column",
@@ -26,6 +38,11 @@ const containerStyles = xcss({
 	boxShadow: "elevation.shadow.raised",
 });
 
+const containerHeaderStyle = xcss({
+	width: "100%",
+	justifyContent: "space-between",
+});
+
 const whiteBoxStyle = xcss({
 	display: "flex",
 	flexDirection: "column",
@@ -36,30 +53,63 @@ const whiteBoxStyle = xcss({
 	marginBottom: `${token("space.200")}`,
 	boxShadow: "elevation.shadow.raised",
 	backgroundColor: "elevation.surface.raised",
-	width: "100%"
+	width: "100%",
 });
 type GitHubEnterpriseConnectionsProps = {
 	ghEnterpriseServers: GhEnterpriseServer[];
+	setDataForModal: (
+		dataForModal: SuccessfulConnection | GitHubEnterpriseApplication | undefined
+	) => void;
+	setSelectedModal: (selectedModal: BackfillPageModalTypes) => void;
+	setIsModalOpened: (isModalOpen: boolean) => void;
 };
 const GitHubEnterpriseConnections = ({
 	ghEnterpriseServers,
+	setIsModalOpened,
+	setDataForModal,
+	setSelectedModal,
 }: GitHubEnterpriseConnectionsProps) => {
-	return <>
-		{
-			ghEnterpriseServers.map((connection) => {
+	console.log(":::::::::",JSON.stringify(ghEnterpriseServers));
+	return (
+		<>
+			{ghEnterpriseServers.map((connection) => {
 				return (
-					<Box xcss={containerStyles}>
-						<div css={enterpriserServerHeaderStyle}>
-							<Heading level="h400">{connection.gitHubBaseUrl}</Heading>
-						</div>
-						<Box xcss={whiteBoxStyle}>
-							{connection.applications.map((application) => (<GitHubEnterpriseApplication application={application}/>))}
+					<>
+						<Box xcss={containerStyles}>
+							<Flex xcss={containerHeaderStyle}>
+								<div css={enterpriserServerHeaderStyle}>
+									<Heading level="h400">{connection.gitHubBaseUrl}</Heading>
+								</div>
+								<Button
+									onClick={() => {
+										setIsModalOpened(true);
+										setDataForModal(first(connection.applications));
+										setSelectedModal("DISCONNECT_SERVER");
+									}}
+								>
+									Disconnect server
+								</Button>
+							</Flex>
+
+							<Box xcss={whiteBoxStyle}>
+								<div css={enterpriserAppsHeaderStyle}>
+									<Heading level="h100">APPLICATIONS</Heading>
+								</div>
+								{connection.applications.map((application) => (
+									<GHEApplication
+										application={application}
+										setIsModalOpened={setIsModalOpened}
+										setDataForModal={setDataForModal}
+										setSelectedModal={setSelectedModal}
+									/>
+								))}
+							</Box>
 						</Box>
-					</Box>
+					</>
 				);
-			})
-		}
-	</>;
+			})}
+		</>
+	);
 };
 
 export default GitHubEnterpriseConnections;