Skip to content

Commit 3bb9839

Browse files
kamaksheeAtlgxueatlassian
kamaksheeAtl
and
gxueatlassian
authored
Arc 2777 reactify GHE backfill pg (#2620)
* chore: make spa wrapper width variable * chore: rectify colum names * chore: work to delete ghe server * chore: update test cases * chore: add test cases * fix: build error * chore: add test cases * chore: add test cases * chore: add config option for GHR server app * chore: refactor code * chore: pr review comments * chore: update code as per PR comments * chore: update code as per PR comments * Enforce security check on GHES app (#2624) --------- Co-authored-by: Gary Xue <[email protected]>
1 parent 26ebf9c commit 3bb9839

24 files changed

+1262
-233
lines changed

‎spa/src/api/subscriptions/index.ts

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,10 @@ import { RestSyncReqBody } from "~/src/rest-interfaces";
33

44
export default {
55
getSubscriptions: () => axiosRest.get("/rest/subscriptions"),
6+
deleteGHEServer: (serverUrl: string) =>
7+
axiosRest.delete(`/rest/ghes-servers/${serverUrl}`),
8+
deleteGHEApp: (uuid: string) =>
9+
axiosRest.delete(`/rest/app/${uuid}`),
610
deleteSubscription: (subscriptionId: number) =>
711
axiosRest.delete(`/rest/app/cloud/subscriptions/${subscriptionId}`),
812
syncSubscriptions: (subscriptionId: number, reqBody: RestSyncReqBody) =>

‎spa/src/common/Wrapper.tsx

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -9,23 +9,24 @@ const navHeight = 56;
99
const wrapperStyle = css`
1010
padding: 20px 40px 0px 40px;
1111
`;
12-
const wrapperCenterStyle = css`
12+
const getWrapperCenterStyle = (width: string | undefined) => css`
1313
margin: 0 auto;
14-
max-width: 580px;
14+
max-width: ${width ? width: "580px"};
1515
height: calc(100vh - ${navHeight * 2}px);
1616
display: flex;
1717
flex-direction: column;
1818
justify-content: center;
1919
`;
2020

21-
export const Wrapper = (attr: { hideClosedBtn?: boolean, children?: ReactNode | undefined }) => {
21+
export const Wrapper = (attr: { hideClosedBtn?: boolean, children?: ReactNode | undefined, width?:string }) => {
2222
const navigateToHomePage = () => {
2323
analyticsClient.sendUIEvent({ actionSubject: "dropExperienceViaBackButton", action: "clicked" });
2424
AP.getLocation((location: string) => {
2525
const locationUrl = new URL(location);
2626
AP.navigator.go( "site", { absoluteUrl: `${locationUrl.origin}/jira/marketplace/discover/app/com.github.integration.production` });
2727
});
2828
};
29+
const wrapperCenterStyle = getWrapperCenterStyle(attr.width || undefined);
2930

3031
return (
3132
<div css={wrapperStyle}>
@@ -37,7 +38,6 @@ export const Wrapper = (attr: { hideClosedBtn?: boolean, children?: ReactNode |
3738
onClick={navigateToHomePage}
3839
/>
3940
}
40-
4141
<div css={wrapperCenterStyle}>{attr.children}</div>
4242
</div>
4343
);

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

Lines changed: 12 additions & 42 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,14 @@
11
/** @jsxImportSource @emotion/react */
2-
import { useState } from "react";
2+
import { Box, xcss } from "@atlaskit/primitives";
33
import { DynamicTableStateless } from "@atlaskit/dynamic-table";
44
import {
55
head,
66
getGHSubscriptionsRows,
77
} from "../../../utils/dynamicTableHelper";
8-
import { BackfillPageModalTypes, GhCloudSubscriptions } from "../../../rest-interfaces";
9-
import { Box, xcss } from "@atlaskit/primitives";
10-
import { SuccessfulConnection } from "rest-interfaces";
11-
import DisconnectSubscriptionModal from "../Modals/DisconnectSubscriptionModal";
12-
import RestartBackfillModal from "../Modals/RestartBackfillModal";
13-
import { ModalTransition } from "@atlaskit/modal-dialog";
8+
import {
9+
BackfillPageModalTypes,
10+
GhCloudSubscriptions, SuccessfulConnection,
11+
} from "../../../rest-interfaces";
1412

1513
const containerStyles = xcss({
1614
display: "flex",
@@ -19,58 +17,30 @@ const containerStyles = xcss({
1917

2018
type GitHubCloudConnectionsProps = {
2119
ghCloudSubscriptions: GhCloudSubscriptions;
22-
refetch: () => void;
20+
setDataForModal: (dataForModal: SuccessfulConnection | undefined) => void,
21+
setSelectedModal: (selectedModal:BackfillPageModalTypes) => void,
22+
setIsModalOpened: (isModalOpen: boolean) => void,
2323
};
2424

2525
const GitHubCloudConnections = ({
2626
ghCloudSubscriptions,
27-
refetch,
27+
setIsModalOpened,
28+
setDataForModal,
29+
setSelectedModal,
2830
}: GitHubCloudConnectionsProps) => {
29-
const [isModalOpened, setIsModalOpened] = useState(false);
30-
const [subscriptionForModal, setSubscriptionForModal] = useState<SuccessfulConnection | undefined>(undefined);
31-
const [selectedModal, setSelectedModal] = useState<BackfillPageModalTypes>("BACKFILL");
32-
33-
const openedModal = (refetch: () => void) => {
34-
switch (selectedModal) {
35-
case "BACKFILL":
36-
return (<RestartBackfillModal
37-
subscription={subscriptionForModal as SuccessfulConnection}
38-
setIsModalOpened={setIsModalOpened}
39-
refetch={refetch}
40-
/>);
41-
case "DISCONNECT_SUBSCRIPTION":
42-
return <DisconnectSubscriptionModal
43-
subscription={subscriptionForModal as SuccessfulConnection}
44-
setIsModalOpened={setIsModalOpened}
45-
refetch={refetch}
46-
/>;
47-
// TODO: Create modals for GHE later
48-
case "DISCONNECT_SERVER":
49-
case "DISCONNECT_SERVER_APP":
50-
default:
51-
return <></>;
52-
}
53-
};
54-
5531
return (
5632
<>
5733
<Box xcss={containerStyles}>
5834
<DynamicTableStateless
5935
head={head}
6036
rows={getGHSubscriptionsRows(
6137
ghCloudSubscriptions.successfulCloudConnections,
62-
{ setIsModalOpened, setSubscriptionForModal, setSelectedModal }
38+
{ setIsModalOpened, setDataForModal, setSelectedModal }
6339
)}
6440
rowsPerPage={5}
6541
page={1}
6642
/>
6743
</Box>
68-
69-
<ModalTransition>
70-
{
71-
isModalOpened && subscriptionForModal && openedModal(refetch)
72-
}
73-
</ModalTransition>
7444
</>
7545
);
7646
};

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

Lines changed: 101 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,101 @@
1+
/** @jsxImportSource @emotion/react */
2+
import DropdownMenu, {
3+
DropdownItem,
4+
DropdownItemGroup,
5+
} from "@atlaskit/dropdown-menu";
6+
import Button from "@atlaskit/button";
7+
import { Flex, xcss } from "@atlaskit/primitives";
8+
import MoreIcon from "@atlaskit/icon/glyph/more";
9+
import Heading from "@atlaskit/heading";
10+
import ChevronRightIcon from "@atlaskit/icon/glyph/chevron-right";
11+
import ChevronDownIcon from "@atlaskit/icon/glyph/chevron-down";
12+
import {
13+
BackfillPageModalTypes,
14+
GitHubEnterpriseApplication,
15+
SuccessfulConnection,
16+
} from "../../../rest-interfaces";
17+
import { css } from "@emotion/react";
18+
19+
const applicationHeaderStyle = css`
20+
cursor: pointer;
21+
display: flex;
22+
align-items: center;
23+
justify-content: flex-start;
24+
width: 100%;
25+
`;
26+
27+
const appHeaderContainerStyle = xcss({
28+
width: "100%",
29+
justifyContent: "space-between",
30+
marginBottom: "20px",
31+
});
32+
33+
type GitHubEnterpriseApplicationProps = {
34+
application: GitHubEnterpriseApplication;
35+
setDataForModal: (dataForModal: SuccessfulConnection | GitHubEnterpriseApplication) => void;
36+
setSelectedModal: (selectedModal: BackfillPageModalTypes) => void;
37+
setIsModalOpened: (isModalOpen: boolean) => void;
38+
showAppContent: boolean;
39+
toggleShowAppContent: () => void;
40+
};
41+
42+
const GHEnterpriseAppHeader = ({
43+
application,
44+
setIsModalOpened,
45+
setDataForModal,
46+
setSelectedModal,
47+
showAppContent,
48+
toggleShowAppContent
49+
}: GitHubEnterpriseApplicationProps) => {
50+
51+
const onEditGitHubApp = () =>{
52+
const uuid = application.uuid;
53+
AP.navigator.go(
54+
"addonmodule",
55+
{
56+
moduleKey: "github-edit-app-page",
57+
customData: { uuid }
58+
}
59+
);
60+
};
61+
return (
62+
<Flex xcss={appHeaderContainerStyle}>
63+
<div
64+
css={applicationHeaderStyle}
65+
onClick={() => {
66+
toggleShowAppContent();
67+
}}
68+
>
69+
{showAppContent ? (
70+
<ChevronDownIcon label="" />
71+
) : (
72+
<ChevronRightIcon label="" />
73+
)}
74+
<Heading level="h400">{application.gitHubAppName}</Heading>
75+
</div>
76+
<div>
77+
<DropdownMenu
78+
trigger={({ triggerRef, ...props }) => (
79+
<Button
80+
{...props}
81+
appearance="subtle"
82+
iconBefore={<MoreIcon label="more" size="small" />}
83+
ref={triggerRef}
84+
/>
85+
)}
86+
>
87+
<DropdownItemGroup>
88+
<DropdownItem onClick={onEditGitHubApp}>Edit</DropdownItem>
89+
<DropdownItem onClick={()=>{
90+
setIsModalOpened(true);
91+
setDataForModal(application);
92+
setSelectedModal("DISCONNECT_SERVER_APP");
93+
}}>Disconnect</DropdownItem>
94+
</DropdownItemGroup>
95+
</DropdownMenu>
96+
</div>
97+
</Flex>
98+
);
99+
};
100+
101+
export default GHEnterpriseAppHeader;

0 commit comments

Comments
 (0)