Skip to content

Commit ccb8384

Browse files
lcaglarlcaglar
authored
Incs 5657 create generic react component for app configuration for starting screen (#52)
1 parent 9a9cd04 commit ccb8384

28 files changed

+12728
-57
lines changed

‎docker-compose.yml

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,4 +1,4 @@
1-
version: '3'
1+
version: "3"
22

33
services:
44
tunnel:

‎package.json

Lines changed: 16 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@
55
"license": "MIT",
66
"private": false,
77
"scripts": {
8+
"postinstall": "cd spa && yarn",
89
"prepare": "husky install",
910
"precommit": "run-p lint build",
1011
"clean": "rimraf src/**/*.js test/**/*.js build",
@@ -19,10 +20,17 @@
1920
"test:e2e:headed": "playwright test --headed"
2021
},
2122
"dependencies": {
23+
"@atlaskit/button": "^17.1.0",
24+
"@atlaskit/css-reset": "^6.6.2",
25+
"@atlaskit/heading": "^1.4.4",
26+
"@atlaskit/icon": "^22.0.0",
27+
"@atlaskit/tooltip": "^18.1.0",
2228
"@commonify/lowdb": "^3.0.0",
29+
"@emotion/styled": "^11.11.0",
2330
"@types/marked": "^4.0.8",
2431
"atlassian-jwt": "^2.0.2",
2532
"express": "^4.18.2",
33+
"http-proxy": "^1.18.1",
2634
"lodash": "^4.17.21",
2735
"marked": "^4.2.12",
2836
"squirrelly": "^8.0.8",
@@ -51,12 +59,12 @@
5159
"tslib": "^2.4.1",
5260
"typescript": "^4.9.5"
5361
},
54-
"engines": {
55-
"node": ">= 16",
56-
"yarn": "^1.22.0"
57-
},
58-
"volta": {
59-
"node": "18.15.0",
60-
"yarn": "1.22.18"
61-
}
62+
"engines": {
63+
"node": ">= 16",
64+
"yarn": "^1.22.0"
65+
},
66+
"volta": {
67+
"node": "18.15.0",
68+
"yarn": "1.22.18"
69+
}
6270
}

‎spa/.gitignore

Lines changed: 23 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,23 @@
1+
# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
2+
3+
# dependencies
4+
/node_modules
5+
/.pnp
6+
.pnp.js
7+
8+
# testing
9+
/coverage
10+
11+
# production
12+
/build
13+
14+
# misc
15+
.DS_Store
16+
.env.local
17+
.env.development.local
18+
.env.test.local
19+
.env.production.local
20+
21+
npm-debug.log*
22+
yarn-debug.log*
23+
yarn-error.log*

‎spa/README.md

Lines changed: 17 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,17 @@
1+
# Overview
2+
3+
This is the frontend of the Connect Node app in React. The React app renders the configuration flow of your Connect app. Reusable page components have been created with examples.
4+
5+
# For Development
6+
7+
For local instances, a proxy server has been set up to run this locally. Three procedures must be run in order to view the frontend on a Jira instance:
8+
9+
1. **Run the Node app:** This app serves as the backend of your Connect app and handles requests from Jira. Use the command "yarn start" to start the application.
10+
11+
2. **Run the React app:** This app is the frontend of your Connect app, providing the interface that users will interact with. Navigate to the SPA directory and then use the command "yarn start" to start the application.
12+
13+
3. **Run ngrok:** Ngrok provides a public URL that forwards incoming requests to your local server. In this case, the command "ngrok http --domain="your domain name" 3000" starts ngrok and points it to your local server running on port 3000. Be sure to replace "your domain name" with your actual domain name.
14+
15+
All three processes (Node app, React app, and ngrok) need to be running simultaneously for the local development environment to run correctly. Each process should run in its own terminal window or tab.
16+
17+
This setup allows you to work on your Connect app locally while still interacting with Jira.

‎spa/package.json

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,67 @@
1+
{
2+
"name": "connect-app",
3+
"version": "0.1.0",
4+
"private": true,
5+
"homepage": "/spa",
6+
"dependencies": {
7+
"@atlaskit/avatar": "^21.4.3",
8+
"@atlaskit/badge": "^15.2.1",
9+
"@atlaskit/dropdown-menu": "^12.1.10",
10+
"@atlaskit/icon": "^22.0.0",
11+
"@atlaskit/lozenge": "^11.5.0",
12+
"@atlaskit/tokens": "^1.33.0",
13+
"@sentry/react": "^7.93.0",
14+
"@testing-library/jest-dom": "^5.17.0",
15+
"@testing-library/react": "^13.4.0",
16+
"@testing-library/user-event": "^13.5.0",
17+
"react": "^18.2.0",
18+
"react-dom": "^18.2.0",
19+
"react-router-dom": "^6.21.3",
20+
"react-scripts": "5.0.1"
21+
},
22+
"scripts": {
23+
"start": "BROWSER=none WDS_SOCKET_HOST=localhost WDS_SOCKET_PORT=3010 PORT=3010 react-scripts start",
24+
"build": "react-scripts build",
25+
"test": "react-scripts test",
26+
"eject": "react-scripts eject"
27+
},
28+
"eslintConfig": {
29+
"extends": [
30+
"react-app",
31+
"react-app/jest"
32+
]
33+
},
34+
"browserslist": {
35+
"production": [
36+
">0.2%",
37+
"not dead",
38+
"not op_mini all"
39+
],
40+
"development": [
41+
"last 1 chrome version",
42+
"last 1 firefox version",
43+
"last 1 safari version"
44+
]
45+
},
46+
"devDependencies": {
47+
"@testing-library/jest-dom": "^6.1.4",
48+
"@testing-library/react": "^14.0.0",
49+
"@testing-library/user-event": "^14.4.3",
50+
"@types/jest": "^29.5.2",
51+
"@types/react": "^18.2.14",
52+
"@types/react-dom": "^18.2.6",
53+
"@types/react-router-dom": "^5.3.3",
54+
"@typescript-eslint/eslint-plugin": "^6.10.0",
55+
"@typescript-eslint/parser": "^6.10.0",
56+
"eslint": "^8.53.0",
57+
"eslint-plugin-react-hooks": "^4.6.0",
58+
"eslint-plugin-react-refresh": "^0.4.4",
59+
"jest": "^29.5.0",
60+
"jest-environment-jsdom": "^29.5.0",
61+
"nock": "^13.3.2",
62+
"react-app-rewired": "^2.2.1",
63+
"react-scripts": "^5.0.1",
64+
"ts-jest": "^29.1.1",
65+
"typescript": "^5.0.2"
66+
}
67+
}

‎spa/public/index.html

Lines changed: 15 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,15 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" href="%PUBLIC_URL%/mark-gradient-blue-jira.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Connect App</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<!-- Per https://blog.developer.atlassian.com/announcement-reminder-about-deprecation-of-xdm_e-usage-and-needing-to-load-all-js-from-the-cdn/ we are required to load this from this specific CDN -->
12+
<!-- DO NOT TOUCH!!! THIS IS NEEDED FOR CONNECT OR ELSE IT WILL CAUSE AN ERROR -->
13+
<script src="https://connect-cdn.atl-paas.net/all.js"></script>
14+
</body>
15+
</html>

‎spa/public/mark-gradient-blue-jira.png

1.94 KB
Loading

‎spa/src/App.tsx

Lines changed: 27 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,27 @@
1+
import { setGlobalTheme } from "@atlaskit/tokens";
2+
import { BrowserRouter, Route, Routes } from "react-router-dom";
3+
import StartConnection from "./pages/StartConnection";
4+
import { startConnectionData } from "./pagesData/startConnectionData";
5+
6+
const App = () => {
7+
setGlobalTheme({
8+
light: "light",
9+
dark: "dark",
10+
colorMode: "auto",
11+
spacing: "spacing",
12+
typography: "typography-adg3",
13+
});
14+
15+
// The path "/spa" is mapped to the StartConnection component page.
16+
return (
17+
<BrowserRouter>
18+
<Routes>
19+
<Route path="/spa">
20+
<Route index element={<StartConnection {...startConnectionData} />} />
21+
</Route>
22+
</Routes>
23+
</BrowserRouter>
24+
);
25+
};
26+
27+
export default App;

‎spa/src/common/PageWrapper.tsx

Lines changed: 51 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,51 @@
1+
/** @jsxImportSource @emotion/react */
2+
import { ReactNode } from "react";
3+
import { css } from "@emotion/react";
4+
import Button from "@atlaskit/button";
5+
import CrossIcon from "@atlaskit/icon/glyph/cross";
6+
7+
const navHeight = 56;
8+
const wrapperStyle = css`
9+
padding: 20px 40px 0px 40px;
10+
`;
11+
const wrapperCenterStyle = css`
12+
margin: 0 auto;
13+
max-width: 580px;
14+
height: calc(100vh - ${navHeight * 2}px);
15+
display: flex;
16+
flex-direction: column;
17+
justify-content: center;
18+
`;
19+
20+
export const PageWrapper = ({
21+
AppMarketplaceUrl,
22+
hideClosedBtn,
23+
children,
24+
}: {
25+
AppMarketplaceUrl: string;
26+
hideClosedBtn?: boolean;
27+
children?: ReactNode | undefined;
28+
}) => {
29+
const navigateToHomePage = () => {
30+
AP.getLocation((location: string) => {
31+
const locationUrl = new URL(location);
32+
AP.navigator.go("site", {
33+
absoluteUrl: `${locationUrl.origin}/jira/marketplace/discover/app/${AppMarketplaceUrl}`,
34+
});
35+
});
36+
};
37+
return (
38+
<div css={wrapperStyle}>
39+
{!hideClosedBtn && (
40+
<Button
41+
style={{ float: "right" }}
42+
iconBefore={<CrossIcon label="Close" size="medium" />}
43+
appearance="subtle"
44+
onClick={navigateToHomePage}
45+
/>
46+
)}
47+
48+
<div css={wrapperCenterStyle}>{children}</div>
49+
</div>
50+
);
51+
};

‎spa/src/common/constants.ts

Lines changed: 10 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,10 @@
1+
/** @jsxImportSource @emotion/react */
2+
import React from "react";
3+
import { ReactNode } from "react";
4+
5+
type Icon = React.ComponentType<any>;
6+
7+
export type RequirementType = {
8+
description: ReactNode;
9+
Icon: Icon;
10+
};

0 commit comments

Comments
 (0)