Skip to content

Commit

Permalink
clean up drawer
Browse files Browse the repository at this point in the history
  • Loading branch information
rachellerathbone committed Dec 11, 2023
1 parent 6854342 commit 7c2bf2f
Show file tree
Hide file tree
Showing 5 changed files with 33 additions and 51 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -16,7 +16,6 @@ import { NotConnectedState } from './NotConnectedState';
import { JenkinsServer } from '../../../../src/common/types';
import { ConnectedJenkinsServers } from './ConnectedJenkinsServers';
import { SetUpGuide, UpdateAvailable } from './SetUpGuide';
import { InProductHelpDrawer } from '../InProductHelpDrawer/InProductHelpDrawer';
import { ConnectionPanelContent } from './ConnectionPanelContent';
import { getJenkinsServerWithSecret } from '../../api/getJenkinsServerWithSecret';

Expand Down Expand Up @@ -58,15 +57,10 @@ const ConnectionPanelMain = ({
jenkinsServer,
refreshServers
}: ConnectionPanelMainProps): JSX.Element => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const [selectedTabIndex, setSelectedTabIndex] = useState(0);
const [isLoading, setIsLoading] = useState(false);
const [updatedServer, setUpdatedServer] = useState<JenkinsServer>();

const openDrawer = () => {
setIsDrawerOpen(true);
};

const handleClickSetupGuide = () => {
setSelectedTabIndex(1);
};
Expand Down Expand Up @@ -100,7 +94,7 @@ const ConnectionPanelMain = ({
} else if (jenkinsServer.pluginConfig || updatedServer?.pluginConfig) {
setUpGuideUpdateAvailableContent = (
<Panel data-testid="setUpGuidePanel">
<SetUpGuide pluginConfig={jenkinsServer.pluginConfig} openDrawer={openDrawer} />
<SetUpGuide pluginConfig={jenkinsServer.pluginConfig} />
</Panel>
);
} else {
Expand All @@ -110,7 +104,6 @@ const ConnectionPanelMain = ({
<UpdateAvailable
handleRefreshPanel={handleRefreshPanel}
jenkinsServer={jenkinsServer}
openDrawer={openDrawer}
/>
</div>
</Panel>
Expand All @@ -119,7 +112,6 @@ const ConnectionPanelMain = ({

return (
<div className={cx(connectionPanelMainContainer)}>
<InProductHelpDrawer isDrawerOpen={isDrawerOpen} setIsDrawerOpen={setIsDrawerOpen} />
{
connectedState === ConnectedState.DUPLICATE
? <NotConnectedState
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -3,12 +3,9 @@ import { render } from '@testing-library/react';
import { PipelineEventType, SetUpGuideInstructions } from './SetUpGuide';

describe('SetUpGuideInstructions', () => {
const onClickMock = jest.fn();

test('renders SetUpGuideInstructions with BUILD eventType, globalSettings, and regex', () => {
const { getByText } = render(
<SetUpGuideInstructions
onClick={onClickMock}
eventType={PipelineEventType?.BUILD}
globalSettings
regex="^build$"
Expand All @@ -23,7 +20,6 @@ describe('SetUpGuideInstructions', () => {
test('renders SetUpGuideInstructions with BUILD eventType, globalSettings, and no regex', () => {
const { getByText } = render(
<SetUpGuideInstructions
onClick={onClickMock}
eventType={PipelineEventType?.BUILD}
globalSettings
/>
Expand All @@ -35,7 +31,6 @@ describe('SetUpGuideInstructions', () => {
test('renders SetUpGuideInstructions with DEPLOYMENT eventType, globalSettings, and regex', () => {
const { getByText } = render(
<SetUpGuideInstructions
onClick={onClickMock}
eventType={PipelineEventType?.DEPLOYMENT}
globalSettings
regex="^deploy to (?<envName>.*)$"
Expand All @@ -50,7 +45,6 @@ describe('SetUpGuideInstructions', () => {
test('renders SetUpGuideInstructions with DEPLOYMENT eventType, globalSettings set to false', () => {
const { getByText, queryByText } = render(
<SetUpGuideInstructions
onClick={onClickMock}
eventType={PipelineEventType?.DEPLOYMENT}
globalSettings={false}
/>
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -21,14 +21,12 @@ import { InProductHelpAction, InProductHelpActionType } from '../InProductHelpDr

type UpdateAvailableProps = {
handleRefreshPanel(serverToRemove: JenkinsServer): void,
jenkinsServer: JenkinsServer,
openDrawer(): void
jenkinsServer: JenkinsServer
};

export const UpdateAvailable = ({
handleRefreshPanel,
jenkinsServer,
openDrawer
jenkinsServer
}: UpdateAvailableProps): JSX.Element => {
return (
<>
Expand All @@ -39,7 +37,7 @@ export const UpdateAvailable = ({
<p className={cx(setUpGuideUpdateAvailableContent)}>To access features like this set up guide,
a Jenkins admin must log into this server and update the plugin.</p>
<div className={cx(setUpGuideUpdateAvailableButtonContainer)}>
<InProductHelpAction onClick={openDrawer} label="Learn more" type={InProductHelpActionType.HelpButton} appearance="primary" />
<InProductHelpAction label="Learn more" type={InProductHelpActionType.HelpButton} appearance="primary" />

<Button onClick={() => handleRefreshPanel(jenkinsServer)}>Refresh</Button>
</div>
Expand All @@ -49,19 +47,16 @@ export const UpdateAvailable = ({

type SetUpGuidePipelineStepInstructionProps = {
eventType: string,
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
pipelineStepLabel: string
};

const SetUpGuidePipelineStepInstruction = ({
eventType,
onClick,
pipelineStepLabel
}: SetUpGuidePipelineStepInstructionProps): JSX.Element => {
return (
<p>Add a &nbsp;
<InProductHelpAction
onClick={onClick}
label={pipelineStepLabel}
type={InProductHelpActionType.HelpLink}
appearance="link"
Expand All @@ -77,14 +72,12 @@ export enum PipelineEventType {
}

type SetUpGuideInstructionsProps = {
onClick: (event: React.MouseEvent<HTMLButtonElement, MouseEvent>) => void,
eventType: PipelineEventType,
globalSettings?: boolean,
regex?: string
};

export const SetUpGuideInstructions = ({
onClick,
eventType,
globalSettings,
regex
Expand All @@ -105,7 +98,6 @@ export const SetUpGuideInstructions = ({
<>
<SetUpGuidePipelineStepInstruction
eventType={eventType}
onClick={onClick}
pipelineStepLabel={pipelineStepLabel}
/>
<p>
Expand All @@ -114,7 +106,6 @@ export const SetUpGuideInstructions = ({
<p>
Use &nbsp;
<InProductHelpAction
onClick={onClick}
label={regex || '<regex>'}
type={InProductHelpActionType.HelpLink}
appearance="link"
Expand All @@ -126,13 +117,12 @@ export const SetUpGuideInstructions = ({
} else if (eventType === PipelineEventType.BUILD && globalSettings && !regex?.length) {
contentToRender =
<p>
<InProductHelpAction onClick={onClick} label="No setup required" type={InProductHelpActionType.HelpLink} appearance="link" />
<InProductHelpAction label="No setup required" type={InProductHelpActionType.HelpLink} appearance="link" />
</p>;
} else {
contentToRender = (
<SetUpGuidePipelineStepInstruction
eventType={eventType}
onClick={onClick}
pipelineStepLabel={pipelineStepLabel}
/>
);
Expand All @@ -147,13 +137,11 @@ export const SetUpGuideInstructions = ({
};

type SetUpGuideProps = {
pluginConfig?: JenkinsPluginConfig,
openDrawer(): void
pluginConfig?: JenkinsPluginConfig
};

const SetUpGuide = ({
pluginConfig,
openDrawer
pluginConfig
}: SetUpGuideProps): JSX.Element => {
return (
<>
Expand All @@ -165,21 +153,19 @@ const SetUpGuide = ({
Developers in your project teams
</strong>
<p id="setup-step-one-instruction">Must enter their Jira issue keys
(e.g. <InProductHelpAction onClick={openDrawer} label="JIRA-1234" type={InProductHelpActionType.HelpLink} appearance="link" />)
(e.g. <InProductHelpAction label="JIRA-1234" type={InProductHelpActionType.HelpLink} appearance="link" />)
into their branch names and commit message.
</p>
</li>

<li className={cx(setUpGuideOrderedListItem)}><strong>The person setting up your Jenkinsfile</strong>
<ol className={cx(setUpGuideNestedOrderedList)} type="A" id="nested-list">
<SetUpGuideInstructions
onClick={openDrawer}
eventType={PipelineEventType.BUILD}
globalSettings={pluginConfig?.autoBuildEnabled}
regex={pluginConfig?.autoBuildRegex}
/>
<SetUpGuideInstructions
onClick={openDrawer}
eventType={PipelineEventType.DEPLOYMENT}
globalSettings={pluginConfig?.autoDeploymentsEnabled}
regex={pluginConfig?.autoDeploymentsRegex}
Expand All @@ -192,7 +178,7 @@ const SetUpGuide = ({
<PeopleGroup label="people-group" />
<p>
Not sure who should use this guide? It depends how your teams use Jenkins.&nbsp;
<InProductHelpAction onClick={openDrawer} label="Here’s what you need to know." type={InProductHelpActionType.HelpLink} appearance="link" />
<InProductHelpAction label="Here’s what you need to know." type={InProductHelpActionType.HelpLink} appearance="link" />
</p>
</div>
</>
Expand Down
Original file line number Diff line number Diff line change
@@ -1,37 +1,49 @@
import React from 'react';
import React, { useState } from 'react';
import { cx } from '@emotion/css';
import Button, { Appearance } from '@atlaskit/button';
import { KeyboardOrMouseEvent } from '@atlaskit/modal-dialog';
import { inProductHelpActionLink } from './InProductHelp.styles';
import { InProductHelpDrawer } from './InProductHelpDrawer';

export enum InProductHelpActionType {
HelpLink = 'link',
HelpButton = 'button'
}

type InProductHelpActionProps = {
onClick(e: KeyboardOrMouseEvent): void,
label: string,
type: InProductHelpActionType,
appearance: Appearance
};

export const InProductHelpAction = ({
onClick,
label,
type,
appearance
}: InProductHelpActionProps): JSX.Element => {
const [isDrawerOpen, setIsDrawerOpen] = useState(false);
const inProductHelpTypeClassName =
type === InProductHelpActionType.HelpLink ? inProductHelpActionLink : '';

const openDrawer = () => {
setIsDrawerOpen(true);
};

return (
<Button
className={cx(inProductHelpTypeClassName)}
onClick={onClick}
appearance={appearance}
>
{label}
</Button>
<>
<Button
className={cx(inProductHelpTypeClassName)}
onClick={(e) => {
e.preventDefault();
openDrawer();
}}
appearance={appearance}
>
{label}
</Button>
<InProductHelpDrawer
isDrawerOpen={isDrawerOpen}
setIsDrawerOpen={setIsDrawerOpen}
/>
</>
);
};
Original file line number Diff line number Diff line change
Expand Up @@ -3,11 +3,9 @@ import { render } from '@testing-library/react';
import { InProductHelpAction, InProductHelpActionType } from './InProductHelpAction';

describe('InProductHelpAction', () => {
const onClickMock = jest.fn();

test('renders InProductHelpAction with label', () => {
const { getByText } = render(
<InProductHelpAction onClick={onClickMock} label="build" type={InProductHelpActionType.HelpButton} appearance="primary" />
<InProductHelpAction label="build" type={InProductHelpActionType.HelpButton} appearance="primary" />
);

expect(getByText('build')).toBeInTheDocument();
Expand Down

0 comments on commit 7c2bf2f

Please sign in to comment.