diff --git a/app/jenkins-for-jira-ui/src/App.tsx b/app/jenkins-for-jira-ui/src/App.tsx index d4c0e88a..242063df 100644 --- a/app/jenkins-for-jira-ui/src/App.tsx +++ b/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(null); + const [renovateConfigFlag, setRenovateConfigFlag] = useState(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 ; @@ -70,7 +82,10 @@ const App: React.FC = () => { - + {renovateConfigFlag + ? + : + } diff --git a/app/jenkins-for-jira-ui/src/api/fetchFeatureFlagFromBackend.ts b/app/jenkins-for-jira-ui/src/api/fetchFeatureFlagFromBackend.ts index 831ddd9c..022538bf 100644 --- a/app/jenkins-for-jira-ui/src/api/fetchFeatureFlagFromBackend.ts +++ b/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 => { - return invoke('fetchFeatureFlagFromBackend', { featureFlag }); + const featureFlagStatus: boolean = await invoke('fetchFeatureFlagFromBackend', { featureFlag }); + return featureFlagStatus; }; diff --git a/app/jenkins-for-jira-ui/src/components/MainPage/MainPage.styles.tsx b/app/jenkins-for-jira-ui/src/components/MainPage/MainPage.styles.tsx new file mode 100644 index 00000000..c5ec01bd --- /dev/null +++ b/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%; +`; diff --git a/app/jenkins-for-jira-ui/src/components/MainPage/MainPage.tsx b/app/jenkins-for-jira-ui/src/components/MainPage/MainPage.tsx new file mode 100644 index 00000000..3eb2141d --- /dev/null +++ b/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 = ( + + {/* TODO - add onClick event */} + + {/* TODO - add onClick event */} + + + ); + + return ( +
+
+ Jenkins for Jira +
+ + +
+ ); +}; + +export { MainPage }; diff --git a/app/jenkins-for-jira-ui/src/components/MainPage/TopPanel/TopPanel.tsx b/app/jenkins-for-jira-ui/src/components/MainPage/TopPanel/TopPanel.tsx new file mode 100644 index 00000000..6b5b5147 --- /dev/null +++ b/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 ( +
+
+

Server management

+

Jenkins for Jira lets your teams keep track of code + they build and deploy on Jenkins servers.

+ {/* TODO - add link */} +

Follow the set up guide for each server to + receive build and deployment data.

+
+ +
+ ); +}; + +export { TopPanel }; diff --git a/app/jenkins-for-jira-ui/src/components/icons/PluginIcon.tsx b/app/jenkins-for-jira-ui/src/components/icons/PluginIcon.tsx new file mode 100644 index 00000000..7b891ea1 --- /dev/null +++ b/app/jenkins-for-jira-ui/src/components/icons/PluginIcon.tsx @@ -0,0 +1,154 @@ +import React from 'react'; +import { cx } from '@emotion/css'; + +type PluginIconProps = { + containerClassName: string, + svgClassName: string +}; + +export function PluginIcon({ containerClassName, svgClassName }: PluginIconProps): JSX.Element { + return ( +
+ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
+ ); +} diff --git a/app/jenkins-for-jira-ui/src/hooks/useFeatureFlag.tsx b/app/jenkins-for-jira-ui/src/hooks/useFeatureFlag.tsx index 7c593e42..4051462d 100644 --- a/app/jenkins-for-jira-ui/src/hooks/useFeatureFlag.tsx +++ b/app/jenkins-for-jira-ui/src/hooks/useFeatureFlag.tsx @@ -3,7 +3,7 @@ import { useFlags } from 'launchdarkly-react-client-sdk'; export type FeatureFlagValue = string | boolean | number; export enum FeatureFlags { - SERVER_SECRET_GENERATION = 'server-secret-generation' + RENOVATED_JENKINS_FOR_JIRA_CONFIG_FLOW = 'renovated_jenkins_for_jira_config_flow' } export const useFeatureFlag = ( @@ -13,7 +13,7 @@ export const useFeatureFlag = ( const flags = useFlags(); const defaultValues = { - [FeatureFlags.SERVER_SECRET_GENERATION]: defaultValue !== undefined ? defaultValue : false + [FeatureFlags.RENOVATED_JENKINS_FOR_JIRA_CONFIG_FLOW]: defaultValue !== undefined ? defaultValue : false // Add more flags here } as Record;