Merge pull request #281 from atlassian/axu-connection-pending-button-…

…style-switch Connection pending button style switch
atlassian · Feb 27, 2024 · cf237a8 · cf237a8
2 parents b3d8ef8 + 8686160
commit cf237a8
Show file tree

Hide file tree

Showing 3 changed files with 59 additions and 67 deletions.
diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanelContent.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanelContent.tsx
@@ -10,21 +10,21 @@ import {
 import { ConnectionPendingIcon } from '../icons/ConnectionPendingIcon';
 import { NoDataIcon } from '../icons/NoDataIcon';
 import { DuplicateServerIcon } from '../icons/DuplicateServerIcon';
-import { InProductHelpAction, InProductHelpActionType } from '../InProductHelpDrawer/InProductHelpAction';
+import { InProductHelpAction, InProductHelpActionButtonAppearance, InProductHelpActionType } from '../InProductHelpDrawer/InProductHelpAction';
 import { InProductHelpIds } from '../InProductHelpDrawer/InProductHelpIds';
 
-type NotConnectedStateProps = {
+type ConnectionPanelContentProps = {
 	connectedState: ConnectedState;
 	contentHeader: string,
 	contentInstructionOne: string,
 	contentInstructionTwo?: string,
-	buttonAppearance: Appearance,
-	firstButtonLabel?: string,
-	secondButtonLabel?: string,
-	buttonOneOnClick(data?: any): void,
-	buttonTwoOnClick?(data: any): void,
-	testId?: string,
-	isIph?: boolean,
+	primaryButtonAppearance?: Appearance,
+	primaryButtonLabel?: string,
+	secondaryButtonLabel?: string,
+	primaryActionOnClick?(data?: any): void,
+	secondaryActionOnClick?(data: any): void,
+	primaryButtonTestId?: string,
+	isPrimaryButtonInProductHelp?: boolean,
 	jenkinsServerUuid?: string
 };
 
@@ -33,15 +33,15 @@ const ConnectionPanelContent = ({
 	contentHeader,
 	contentInstructionOne,
 	contentInstructionTwo,
-	buttonAppearance,
-	firstButtonLabel,
-	secondButtonLabel,
-	buttonOneOnClick,
-	buttonTwoOnClick,
-	testId,
-	isIph,
+	primaryButtonAppearance,
+	primaryButtonLabel,
+	secondaryButtonLabel,
+	primaryActionOnClick,
+	secondaryActionOnClick,
+	primaryButtonTestId,
+	isPrimaryButtonInProductHelp,
 	jenkinsServerUuid
-}: NotConnectedStateProps): JSX.Element => {
+}: ConnectionPanelContentProps): JSX.Element => {
 	let icon;
 
 	if (connectedState === ConnectedState.UPDATE_AVAILABLE) {
@@ -52,21 +52,6 @@ const ConnectionPanelContent = ({
 		icon = <DuplicateServerIcon />;
 	}
 
-	let secondaryButton;
-
-	if (isIph) {
-		secondaryButton =
-			<InProductHelpAction
-				label="Learn more"
-				type={InProductHelpActionType.HelpButton}
-				searchQuery={InProductHelpIds.PENDING_SERVER_LEARN_MORE}
-			/>;
-	} else {
-		secondaryButton =
-			buttonTwoOnClick &&
-			<Button onClick={() => buttonTwoOnClick?.(jenkinsServerUuid)}>{secondButtonLabel}</Button>;
-	}
-
 	return (
 		<div className={cx(connectionPanelContainerContainer)}>
 			{icon}
@@ -75,19 +60,25 @@ const ConnectionPanelContent = ({
 			<p className={cx(connectionPanelContainerParagraph)}>{contentInstructionTwo}</p>
 			<ButtonGroup>
 				{
-					firstButtonLabel &&
-					<Button
-						appearance={buttonAppearance}
-						onClick={buttonOneOnClick}
-						testId={testId}
-					>
-						{firstButtonLabel}
-					</Button>
+					isPrimaryButtonInProductHelp && primaryButtonLabel
+						? <InProductHelpAction
+							label={primaryButtonLabel}
+							appearance={InProductHelpActionButtonAppearance.Primary}
+							type={InProductHelpActionType.HelpButton}
+							searchQuery={InProductHelpIds.PENDING_SERVER_LEARN_MORE}/>
+						: <Button
+							appearance={primaryButtonAppearance}
+							onClick={primaryActionOnClick}
+							testId={primaryButtonTestId}>
+							{primaryButtonLabel}
+						</Button>
 				}
 				{
-					secondButtonLabel
-						? <>{secondaryButton}</>
-						: <></>
+					secondaryButtonLabel &&
+					<Button
+						onClick={() => secondaryActionOnClick?.(jenkinsServerUuid)}>
+						{secondaryButtonLabel}
+					</Button>
 				}
 			</ButtonGroup>
 		</div>

diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanelMain.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanelMain.tsx
@@ -180,11 +180,11 @@ const ConnectionPanelMain = ({
 				contentHeader="No data received"
 				contentInstructionOne="This server is connected but hasn't sent any data to Jira yet."
 				contentInstructionTwo="Use this server's set up guide to choose what data this server sends to Jira."
-				buttonAppearance="primary"
-				firstButtonLabel="Open set up guide"
-				secondButtonLabel="Refresh"
-				buttonOneOnClick={handleClickSetupGuide}
-				buttonTwoOnClick={handleRefreshToCheckServerPipelines}
+				primaryButtonAppearance="primary"
+				primaryButtonLabel="Open set up guide"
+				secondaryButtonLabel="Refresh"
+				primaryActionOnClick={handleClickSetupGuide}
+				secondaryActionOnClick={handleRefreshToCheckServerPipelines}
 				jenkinsServerUuid={jenkinsServer.uuid}
 			/>
 		);

diff --git a/app/jenkins-for-jira-ui/src/components/ConnectionPanel/NotConnectedState.tsx b/app/jenkins-for-jira-ui/src/components/ConnectionPanel/NotConnectedState.tsx
@@ -94,7 +94,7 @@ const NotConnectedState = ({
 	} else if (connectedState === ConnectedState.DUPLICATE && !userIsAdmin) {
 		firstButtonLabel = undefined;
 	} else {
-		firstButtonLabel = 'Refresh';
+		firstButtonLabel = 'Learn more';
 	}
 
 	const closeRetryServerDelete = async () => {
@@ -111,27 +111,28 @@ const NotConnectedState = ({
 							<Spinner size='large' />
 						</div>
 					) : (
-						<>
-							<ConnectionPanelContent
+						<> {isPending
+							? <ConnectionPanelContent
 								connectedState={connectedState}
-								contentHeader={isPending ? 'Connection pending' : 'Duplicate server'}
+								contentHeader= 'Connection pending'
 								contentInstructionOne=
-									{
-										isPending
-											? 'This connection is pending completion by a Jenkins admin.'
-											: `Use ${jenkinsServer.originalConnection} to manage this connection.`
-									}
-								buttonAppearance={isPending ? 'primary' : 'danger'}
-								firstButtonLabel={firstButtonLabel}
-								secondButtonLabel={isPending ? 'Learn more' : undefined}
-								buttonOneOnClick={
-									isPending
-										? () => refreshServersAfterUpdate(jenkinsServer.uuid) : deleteServerWrapper
-								}
-								testId={!isPending ? `delete-button-${jenkinsServer.name}` : undefined}
-								isIph={true}
+									'This connection is pending completion by a Jenkins admin.'
+								primaryButtonLabel={firstButtonLabel}
+								secondaryButtonLabel='Refresh'
+								secondaryActionOnClick={() => refreshServersAfterUpdate(jenkinsServer.uuid)}
+								isPrimaryButtonInProductHelp={true}
+								jenkinsServerUuid={serverToDeleteUuid}/>
+							: <ConnectionPanelContent
+								connectedState={connectedState}
+								contentHeader='Duplicate server'
+								contentInstructionOne={`Use ${jenkinsServer.originalConnection} ` +
+									'to manage this connection.'}
+								primaryButtonAppearance='danger'
+								primaryButtonLabel={firstButtonLabel}
+								primaryActionOnClick={deleteServerWrapper}
+								primaryButtonTestId={`delete-button-${jenkinsServer.name}`}
 								jenkinsServerUuid={serverToDeleteUuid}
-							/>
+							/>}
 						</>
 					)}