Merge pull request #198 from atlassian/ARC-2594-update-config-top-panel

Arc-2594 update config top panel

app/jenkins-for-jira-ui/src/App.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react';
+import React, { useState, useEffect, useCallback } from 'react';
 import {
 	Router,
 	Switch,
@@ -16,6 +16,9 @@ import { JenkinsSpinner } from './components/JenkinsSpinner/JenkinsSpinner';
 import { PendingDeploymentState } from './components/JenkinsServerList/PendingDeploymentState/PendingDeploymentState';
 import { CreateServer } from './components/ConnectJenkins/CreateServer/CreateServer';
 import envVars, { Environment } from './common/env';
+import { fetchFeatureFlagFromBackend } from './api/fetchFeatureFlagFromBackend';
+import { FeatureFlags } from './hooks/useFeatureFlag';
+import { MainPage } from './components/MainPage/MainPage';
 
 const {
 	LAUNCHDARKLY_TEST_CLIENT_ID,
@@ -49,17 +52,26 @@ export const environmentSettings = {
 
 const AppContainer = styled.div`
 	color: #172B4D;
-	margin: 24px 24px 24px 0;
+	margin: 24px 36px 24px 0;
 `;
 
 const App: React.FC = () => {
 	const [history, setHistory] = useState<any>(null);
+	const [renovateConfigFlag, setRenovateConfigFlag] = useState<boolean>(false);
+
+	const fetchFeatureFlag = useCallback(async () => {
+		const renovatedJenkinsFeatureFlag = await fetchFeatureFlagFromBackend(
+			FeatureFlags.RENOVATED_JENKINS_FOR_JIRA_CONFIG_FLOW
+		);
+		setRenovateConfigFlag(renovatedJenkinsFeatureFlag);
+	}, []);
 
 	useEffect(() => {
 		view.createHistory().then((historyUpdates) => {
 			setHistory(historyUpdates);
 		});
-	}, []);
+		fetchFeatureFlag();
+	}, [fetchFeatureFlag]);
 
 	if (!history) {
 		return <JenkinsSpinner secondaryClassName={spinnerHeight} />;
@@ -70,7 +82,10 @@ const App: React.FC = () => {
 			<Router history={history}>
 				<Switch>
 					<Route exact path="/">
-						<JenkinsServerList />
+						{renovateConfigFlag
+							? <MainPage />
+							: <JenkinsServerList />
+						}
 					</Route>
 					<Route path="/install">
 						<InstallJenkins />

app/jenkins-for-jira-ui/src/api/fetchFeatureFlagFromBackend.ts

@@ -1,5 +1,6 @@
 import { invoke } from '@forge/bridge';
 
 export const fetchFeatureFlagFromBackend = async (featureFlag: string): Promise<boolean> => {
-	return invoke('fetchFeatureFlagFromBackend', { featureFlag });
+	const featureFlagStatus: boolean = await invoke('fetchFeatureFlagFromBackend', { featureFlag });
+	return featureFlagStatus;
 };

app/jenkins-for-jira-ui/src/components/MainPage/MainPage.styles.tsx

@@ -0,0 +1,41 @@
+import { css } from '@emotion/css';
+
+export const mainPageContainer = css`
+	margin: 0 auto;
+	max-width: 936px;
+`;
+
+// Top panel
+export const topPanelContainer = css`
+	align-items: center;
+	border-radius: 8px;
+	box-shadow: 0px 2px 4px 0px #091E4240;
+	display: flex;
+	max-height: 164px;
+	padding: 1.5em;
+	margin: 2em auto 2em 0.1em;
+`;
+
+export const topPanelContentHeaderContainer = css`
+	flex-direction: column;
+`;
+
+export const topPanelContentHeader = css`
+	font-size: 20px;
+	line-height: 24px;
+`;
+
+export const topPanelContent = css`
+	font-size: 14px;
+	line-height: 20px;
+	margin: 1em auto 1em 0;
+`;
+
+export const topPanelImgContainer = css`
+	text-align: right;
+	width: 42%;
+`;
+
+export const topPanelImg = css`
+	width: 75%;
+`;

app/jenkins-for-jira-ui/src/components/MainPage/MainPage.tsx

@@ -0,0 +1,32 @@
+import React 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 { TopPanel } from './TopPanel/TopPanel';
+import { mainPageContainer } from './MainPage.styles';
+
+const MainPage = (): JSX.Element => {
+	const pageHeaderActions = (
+		<ButtonGroup>
+			{/* TODO - add onClick event */}
+			<Button appearance="primary">
+				Connect a new Jenkins server
+			</Button>
+			{/* TODO - add onClick event */}
+			<Button>Share page</Button>
+		</ButtonGroup>
+	);
+
+	return (
+		<div className={mainPageContainer}>
+			<div className={headerContainer}>
+				<PageHeader actions={pageHeaderActions}>Jenkins for Jira</PageHeader>
+			</div>
+
+			<TopPanel />
+		</div>
+	);
+};
+
+export { MainPage };

app/jenkins-for-jira-ui/src/components/MainPage/TopPanel/TopPanel.tsx

@@ -0,0 +1,29 @@
+import React from 'react';
+import { cx } from '@emotion/css';
+import {
+	topPanelContainer,
+	topPanelContent,
+	topPanelContentHeader,
+	topPanelContentHeaderContainer,
+	topPanelImgContainer,
+	topPanelImg
+} from '../MainPage.styles';
+import { PluginIcon } from '../../icons/PluginIcon';
+
+const TopPanel = (): JSX.Element => {
+	return (
+		<div className={cx(topPanelContainer)}>
+			<div className={cx(topPanelContentHeaderContainer)}>
+				<h2 className={cx(topPanelContentHeader)}>Server management</h2>
+				<p className={cx(topPanelContent)}>Jenkins for Jira lets your teams <u>keep track of code
+					they build and deploy</u> on Jenkins servers.</p>
+				{/* TODO - add link */}
+				<p className={cx(topPanelContent)}>Follow the <strong>set up guide</strong> for each server to
+					receive build and deployment data.</p>
+			</div>
+			<PluginIcon containerClassName={topPanelImgContainer} svgClassName={topPanelImg}/>
+		</div>
+	);
+};
+
+export { TopPanel };