adding connection wizard

atlassian · Dec 11, 2023 · 8c31a81 · 8c31a81
1 parent 6523db2
commit 8c31a81
Show file tree

Hide file tree

Showing 5 changed files with 144 additions and 30 deletions.
diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.test.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.test.tsx
@@ -112,7 +112,7 @@ describe('Connection Panel Suite', () => {
 	test('fetches and displays servers on mount', async () => {
 		jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce(servers);
 
-		render(<ConnectionPanel />);
+		render(<ConnectionPanel jenkinsServers={servers} setJenkinsServers={jest.fn()} />);
 
 		await waitFor(() => {
 			expect(screen.getByText(servers[0].name)).toBeInTheDocument();
@@ -302,7 +302,7 @@ describe('Connection Panel Suite', () => {
 			test('should handle server disconnection and refreshing correctly', async () => {
 				jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce(servers);
 
-				render(<ConnectionPanel />);
+				render(<ConnectionPanel jenkinsServers={servers} setJenkinsServers={jest.fn()}/>);
 
 				await waitFor(() => {
 					expect(screen.getByText(servers[0].name)).toBeInTheDocument();
@@ -323,10 +323,12 @@ describe('Connection Panel Suite', () => {
 	});
 
 	describe('Connection Panel Main', () => {
+		const setJenkinsServers = jest.fn();
+
 		test('should handle server deletion correctly for DUPLICATE SERVERS', async () => {
 			jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce(servers);
 
-			render(<ConnectionPanel />);
+			render(<ConnectionPanel jenkinsServers={servers} setJenkinsServers={setJenkinsServers} />);
 
 			await waitFor(() => {
 				// Both have IP address 10.10.10.10
@@ -367,7 +369,7 @@ describe('Connection Panel Suite', () => {
 
 				jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([server]);
 
-				render(<ConnectionPanel />);
+				render(<ConnectionPanel jenkinsServers={servers} setJenkinsServers={setJenkinsServers} />);
 
 				await waitFor(() => {
 					expect(screen.getByText(server.name)).toBeInTheDocument();
@@ -399,7 +401,7 @@ describe('Connection Panel Suite', () => {
 
 				jest.spyOn(getAllJenkinsServersModule, 'getAllJenkinsServers').mockResolvedValueOnce([server]);
 
-				render(<ConnectionPanel />);
+				render(<ConnectionPanel jenkinsServers={servers} setJenkinsServers={setJenkinsServers} />);
 
 				await waitFor(() => {
 					expect(screen.getByText(server.name)).toBeInTheDocument();

diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.tsx
@@ -1,11 +1,10 @@
-import React, { useEffect, useState } from 'react';
+import React from 'react';
 import { cx } from '@emotion/css';
 import { ConnectionPanelMain } from './ConnectionPanelMain';
 import { ConnectionPanelTop } from './ConnectionPanelTop';
 import { ConnectedState } from '../StatusLabel/StatusLabel';
 import { connectionPanelContainer } from './ConnectionPanel.styles';
 import { JenkinsServer } from '../../../../src/common/types';
-import { getAllJenkinsServers } from '../../api/getAllJenkinsServers';
 
 export const addConnectedState = (servers: JenkinsServer[]): JenkinsServer[] => {
 	const ipAddressSet = new Set<string>();
@@ -31,19 +30,12 @@ export const addConnectedState = (servers: JenkinsServer[]): JenkinsServer[] =>
 		});
 };
 
-const ConnectionPanel = (): JSX.Element => {
-	const [jenkinsServers, setJenkinsServers] = useState<JenkinsServer[]>([]);
-
-	const fetchAllJenkinsServers = async () => {
-		const servers = await getAllJenkinsServers() || [];
-		const serversWithConnectedState = addConnectedState(servers);
-		setJenkinsServers(serversWithConnectedState);
-	};
-
-	useEffect(() => {
-		fetchAllJenkinsServers();
-	}, []);
+type ConnectionPanelProps = {
+	jenkinsServers: JenkinsServer[],
+	setJenkinsServers(updatedServers: JenkinsServer[]): void
+};
 
+const ConnectionPanel = ({ jenkinsServers, setJenkinsServers }: ConnectionPanelProps): JSX.Element => {
 	const handleServerRefresh = (serverToRemove: JenkinsServer) => {
 		const updatedServers = jenkinsServers.filter(
 			(server) => server.uuid !== serverToRemove.uuid

diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionWizard/ConnectionWizard.styles.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionWizard/ConnectionWizard.styles.tsx
@@ -0,0 +1,27 @@
+import { css } from '@emotion/css';
+import { token } from '@atlaskit/tokens';
+// import { token } from '@atlaskit/tokens';
+
+export const connectionWizardContainer = css`
+	align-items: center;
+	display: flex;
+	flex-direction: column;
+	height: 100vh;
+	justify-content: center;
+	width: 496px;
+`;
+
+export const connectionWizardInfoBox = css`
+	background-color: #F7F8F9;
+	display: flex;
+	margin-left: ${token('space.100')};
+	padding: ${token('space.250')};
+
+	[role=img] {
+		margin-right: ${token('space.100')};
+	}
+
+	p {
+		margin-top: ${token('space.0')};
+	}
+`;
diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionWizard/ConnectionWizard.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionWizard/ConnectionWizard.tsx
@@ -0,0 +1,28 @@
+import React from 'react';
+import { cx } from '@emotion/css';
+import PeopleGroup from '@atlaskit/icon/glyph/people-group';
+import { connectionWizardContainer, connectionWizardInfoBox } from './ConnectionWizard.styles';
+
+const ConnectionWizard = (): JSX.Element => {
+	return (
+		<div className={cx(connectionWizardContainer)}>
+			<h3>Connect Jenkins to Jira</h3>
+			<p>To complete this connection you'll need:</p>
+
+			<ol>
+				<li>An active Jenkins server</li>
+				<li>Team knowledge</li>
+				<li>The help of your Jenkins admin</li>
+			</ol>
+
+			<div className={cx(connectionWizardInfoBox)}>
+				<PeopleGroup label="people-group" />
+				<p>
+					Not sure who should use this guide? It depends how your teams use Jenkins.&nbsp;
+				</p>
+			</div>
+		</div>
+	);
+};
+
+export { ConnectionWizard };
diff --git a/app/jenkins-for-jira-ui/src/components/ServerManagement/ServerManagement.tsx b/app/jenkins-for-jira-ui/src/components/ServerManagement/ServerManagement.tsx
@@ -1,13 +1,54 @@
-import React from 'react';
+import React, { useCallback, useEffect, useState } from 'react';
 import PageHeader from '@atlaskit/page-header';
 import { ButtonGroup } from '@atlaskit/button';
 import Button from '@atlaskit/button/standard-button';
 import { headerContainer } from '../JenkinsServerList/JenkinsServerList.styles';
 import { mainPageContainer } from './ServerManagement.styles';
-import { ConnectionPanel } from '../ConnectionPanel/ConnectionPanel';
+import { addConnectedState, ConnectionPanel } from '../ConnectionPanel/ConnectionPanel';
 import { TopPanel } from './TopPanel/TopPanel';
+import { JenkinsServer } from '../../../../src/common/types';
+import { getAllJenkinsServers } from '../../api/getAllJenkinsServers';
+import { JenkinsSpinner } from '../JenkinsSpinner/JenkinsSpinner';
+import { spinnerHeight } from '../../common/styles/spinner.styles';
+import { redirectFromGetStarted } from '../../api/redirectFromGetStarted';
+import { ConnectionWizard } from '../ConnectionWizard/ConnectionWizard';
 
 const ServerManagement = (): JSX.Element => {
+	const [jenkinsServers, setJenkinsServers] = useState<JenkinsServer[]>([]);
+	const [moduleKey, setModuleKey] = useState<string>();
+	const isMountedRef = React.useRef<boolean>(true);
+
+	const fetchAllJenkinsServers = async () => {
+		const servers = await getAllJenkinsServers() || [];
+		const serversWithConnectedState = addConnectedState(servers);
+		setJenkinsServers(serversWithConnectedState);
+	};
+
+	const redirectToAdminPage = useCallback(async () => {
+		try {
+			if (isMountedRef.current) {
+				const currentModuleKey = await redirectFromGetStarted();
+				setModuleKey(currentModuleKey);
+			}
+		} catch (error) {
+			console.error('Error redirecting to admin page:', error);
+		}
+	}, []);
+
+	useEffect(() => {
+		fetchAllJenkinsServers();
+		redirectToAdminPage();
+
+		return () => {
+			// Cleanup function to set isMountedRef to false when the component is unmounted
+			isMountedRef.current = false;
+		};
+	}, [redirectToAdminPage]);
+
+	if (!jenkinsServers || !moduleKey || moduleKey === 'get-started-page') {
+		return <JenkinsSpinner secondaryClassName={spinnerHeight} />;
+	}
+
 	const pageHeaderActions = (
 		<ButtonGroup>
 			{/* TODO - add onClick event (will be done when I build the new server name form */}
@@ -19,17 +60,41 @@ const ServerManagement = (): JSX.Element => {
 		</ButtonGroup>
 	);
 
-	// TODO - render connection wizard (will be done when design for this is complete)
-	return (
-		<div className={mainPageContainer}>
-			<div className={headerContainer}>
-				<PageHeader actions={pageHeaderActions}>Jenkins for Jira</PageHeader>
-			</div>
+	let contentToRender;
+
+	if (jenkinsServers?.length && moduleKey === 'jenkins-for-jira-ui-admin-page') {
+		contentToRender = (
+			<>
+				<div className={mainPageContainer}>
+					<div className={headerContainer}>
+						<PageHeader actions={pageHeaderActions}>Jenkins for Jira</PageHeader>
+					</div>
 
-			<TopPanel />
+					<TopPanel />
 
-			<ConnectionPanel />
-		</div>
+					<ConnectionPanel jenkinsServers={jenkinsServers} setJenkinsServers={setJenkinsServers} />
+				</div>
+			</>
+		);
+	} else if (moduleKey === 'get-started-page') {
+		contentToRender = (
+			<>
+				<div className={headerContainer}>
+					<PageHeader>Jenkins configuration</PageHeader>
+				</div>
+				<JenkinsSpinner />
+			</>
+		);
+	} else {
+		contentToRender = (
+			<div className={mainPageContainer}>
+				<ConnectionWizard />
+			</div>
+		);
+	}
+
+	return (
+		<>{contentToRender}</>
 	);
 };