Skip to content

Commit

Permalink
Merge pull request #202 from atlassian/ARC-2599-part-2-connection-pan…
Browse files Browse the repository at this point in the history
…el-main-pending-and-duplicate

Arc-2599 part 2 connection panel main pending and duplicate
  • Loading branch information
rachellerathbone committed Nov 22, 2023
2 parents e8cb25b + c5e3ec5 commit 88b298f
Show file tree
Hide file tree
Showing 9 changed files with 206 additions and 14 deletions.
1 change: 1 addition & 0 deletions app/jenkins-for-jira-ui/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,6 +20,7 @@
"@atlaskit/page-header": "10.4.4",
"@atlaskit/progress-tracker": "8.5.2",
"@atlaskit/spinner": "15.5.3",
"@atlaskit/tabs": "^13.4.9",
"@atlaskit/textfield": "5.6.4",
"@atlaskit/theme": "12.5.5",
"@atlaskit/tokens": "^1.28.1",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,6 @@ export const connectionPanelContainer = css`
box-shadow: 0px 2px 4px 0px #091E4240;
display: flex;
flex-direction: column;
max-height: 164px;
padding: ${token('space.300')};
margin: ${token('space.400')} auto ${token('space.400')} ${token('space.025')};
`;
Expand All @@ -15,7 +14,7 @@ export const connectionPanelTopContainer = css`
border-bottom: 1px solid #f4f3f6;
display: flex;
justify-content: space-between;
padding-bottom: ${token('space.300')};
padding-bottom: ${token('space.200')};
`;

export const connectionPanelHeaderContainer = css`
Expand All @@ -41,5 +40,64 @@ export const ipAddressStyle = css`
`;

export const connectionPanelMainContainer = css`
margin-top: ${token('space.200', '16px')};
margin-top: ${token('space.200')};
#connection-panel-tabs-0 {
padding-left: ${token('space.0')};
::after {
margin-left: ${token('space.negative.400')};
}
}
[role=tablist] {
&:first-of-type {
::before {
margin-left: ${token('space.negative.100')};
}
}
}
`;

export const connectionPanelMainTabs = css`
align-items: center;
border-radius: 3px;
display: flex;
flex-direction: column;
justify-content: center;
margin: ${token('space.200')} auto ${token('space.100')};
padding: ${token('space.400')};
width: 100%;
`;

export const notConnectedStateContainer = css`
margin: 0 auto;
max-width: 420px;
text-align: center;
`;

// TODO - delete this temp class
export const notConnectedTempImgPlaceholder = css`
background-color: lightgrey;
border: 1px solid lightgrey;
border-radius: 3px;
height: 160px;
margin: auto;
width: 160px;
`;

export const notConnectedStateHeader = css`
font-size: 20px;
font-weight: 500;
margin: ${token('space.200')} auto;
`;

export const notConnectedStateParagraph = css`
font-size: 14px;
line-height: 20px;
margin-bottom: ${token('space.400')};
div {
margin-bottom: ${token('space.300')}
}
`;
Original file line number Diff line number Diff line change
Expand Up @@ -17,7 +17,7 @@ const ConnectionPanel = (): JSX.Element => {
return (
<div className={cx(connectionPanelContainer)}>
<ConnectionPanelTop connectedState={connectedState} ipAddress="10.10.0.10"/>
<ConnectionPanelMain />
<ConnectionPanelMain connectedState={connectedState} />
</div>
);
};
Expand Down
Original file line number Diff line number Diff line change
@@ -1,10 +1,51 @@
import React from 'react';
import React, { ReactNode } from 'react';
import { cx } from '@emotion/css';
import { connectionPanelMainContainer } from './ConnectionPanel.styles';
import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
import { connectionPanelMainContainer, connectionPanelMainTabs } from './ConnectionPanel.styles';
import { ConnectedState } from '../StatusLabel/StatusLabel';
import { NotConnectedState } from './NotConnectedState';

const ConnectionPanelMain = (): JSX.Element => {
export const Panel = ({
children,
testId
}: {
children: ReactNode;
testId?: string;
}) => (
<div className={cx(connectionPanelMainTabs)} data-testid={testId}>
{children}
</div>
);

type ConnectionPanelMainProps = {
connectedState: ConnectedState
};

const ConnectionPanelMain = ({ connectedState }: ConnectionPanelMainProps): JSX.Element => {
return (
<div className={cx(connectionPanelMainContainer)}>Connection panel main coming soon...</div>
<div className={cx(connectionPanelMainContainer)}>
{
connectedState === ConnectedState.DUPLICATE
? <NotConnectedState connectedState={connectedState} />
: <Tabs id="connection-panel-tabs">
<TabList>
{/* TODO - update (0) for connected state */}
<Tab>Recent events (0)</Tab>
<Tab>Set up guide</Tab>
</TabList>
<TabPanel>
{
connectedState === ConnectedState.CONNECTED
? <Panel>List of servers goes here</Panel>
: <Panel><NotConnectedState connectedState={connectedState} /></Panel>
}
</TabPanel>
<TabPanel>
<Panel>Set up guide info to go here</Panel>
</TabPanel>
</Tabs>
}
</div>
);
};

Expand Down
Original file line number Diff line number Diff line change
@@ -0,0 +1,19 @@
import React from 'react';
import { render, screen } from '@testing-library/react';
import '@testing-library/jest-dom/extend-expect';
import { NotConnectedState } from './NotConnectedState';
import { ConnectedState } from '../StatusLabel/StatusLabel';

describe('NotConnectedState', () => {
test('renders with connected state DUPLICATE', () => {
render(<NotConnectedState connectedState={ConnectedState.DUPLICATE} />);
expect(screen.getByText('Duplicate server')).toBeInTheDocument();
expect(screen.getByText('Delete')).toBeInTheDocument();
});

test('renders with connected state PENDING', () => {
render(<NotConnectedState connectedState={ConnectedState.PENDING} />);
expect(screen.getByText('Connection pending')).toBeInTheDocument();
expect(screen.getByText('Connection settings')).toBeInTheDocument();
});
});
Original file line number Diff line number Diff line change
@@ -0,0 +1,52 @@
import React from 'react';
import { cx } from '@emotion/css';
import Button from '@atlaskit/button';
import { ConnectedState } from '../StatusLabel/StatusLabel';
import {
notConnectedStateContainer,
notConnectedStateHeader,
notConnectedStateParagraph,
notConnectedTempImgPlaceholder
} from './ConnectionPanel.styles';

type NotConnectedStateProps = {
connectedState: ConnectedState
};

const NotConnectedState = ({ connectedState }: NotConnectedStateProps): JSX.Element => {
const notConnectedHeader =
connectedState === ConnectedState.PENDING ? 'Connection pending' : 'Duplicate server';
const notConnectedContent =
connectedState === ConnectedState.PENDING
? (
<>
This connection is pending completion by a Jenkins admin.
Its set up guide will be available when the connection is complete.
<div />
Open connection settings if your Jenkins admin needs to revisit the items they need.
</>
)
: (
<>
This connection is a duplicate of SERVER NAME.
<div />
Use SERVER NAME to manage this server.
</>
);

return (
<div className={cx(notConnectedStateContainer)}>
<div className={cx(notConnectedTempImgPlaceholder)}></div>
<h3 className={cx(notConnectedStateHeader)}>{notConnectedHeader}</h3>
<p className={cx(notConnectedStateParagraph)}>{notConnectedContent}</p>
{/* TODO - add onClick handler */}
{
connectedState === ConnectedState.PENDING
? <Button>Connection settings</Button>
: <Button appearance="danger">Delete</Button>
}
</div>
);
};

export { NotConnectedState };
26 changes: 25 additions & 1 deletion app/jenkins-for-jira-ui/yarn.lock
Original file line number Diff line number Diff line change
Expand Up @@ -168,6 +168,16 @@
"@emotion/react" "^11.7.1"
tiny-invariant "^1.2.0"

"@atlaskit/ds-explorations@^3.0.0":
version "3.0.5"
resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/ds-explorations/-/ds-explorations-3.0.5.tgz#e1e18da56198ee06878c89dfdbf42f7ca5be5240"
integrity sha512-7iGD7lWeDrGG6skZTCeBXGi3lWZE9RO1Ckozg569Iao0r9mjBNDDTG+1xa3Ve5Os+TIYqfNQ763AEBCkMI3ByQ==
dependencies:
"@atlaskit/tokens" "^1.28.0"
"@babel/runtime" "^7.0.0"
"@emotion/react" "^11.7.1"
tiny-invariant "^1.2.0"

"@atlaskit/ds-lib@^2.1.0", "@atlaskit/ds-lib@^2.2.0":
version "2.2.3"
resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/ds-lib/-/ds-lib-2.2.3.tgz#fc65a829b45ee0a26c9c6c97072e2d570214aec7"
Expand Down Expand Up @@ -468,6 +478,20 @@
"@babel/runtime" "^7.0.0"
"@emotion/react" "^11.7.1"

"@atlaskit/tabs@^13.4.9":
version "13.4.9"
resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tabs/-/tabs-13.4.9.tgz#0cf7df8dfdd690a1f720470b4d76219f76ac88fb"
integrity sha512-8Fu7HQWbdkfMRnQ1ICFw6zvgiaR2rtrUNwYmnyHcqZg7fLyqv6jeclVLqtsq50fodJnFTWX8FvljmbDoiYUqDA==
dependencies:
"@atlaskit/analytics-next" "^9.1.0"
"@atlaskit/codemod-utils" "^4.2.0"
"@atlaskit/ds-explorations" "^3.0.0"
"@atlaskit/primitives" "^1.6.0"
"@atlaskit/theme" "^12.6.0"
"@atlaskit/tokens" "^1.26.0"
"@babel/runtime" "^7.0.0"
"@emotion/react" "^11.7.1"

"@atlaskit/[email protected]":
version "5.6.4"
resolved "https://registry.yarnpkg.com/@atlaskit/textfield/-/textfield-5.6.4.tgz#6d874895f0a1e4a636c0ca78778927f8f0106bd1"
Expand Down Expand Up @@ -558,7 +582,7 @@
"@babel/types" "^7.20.0"
bind-event-listener "^2.1.1"

"@atlaskit/tokens@^1.28.1":
"@atlaskit/tokens@^1.28.0", "@atlaskit/tokens@^1.28.1":
version "1.28.1"
resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tokens/-/tokens-1.28.1.tgz#f7cd63b9046f9b287710b8701357eecf011536a8"
integrity sha512-0rkCRLQ+zsynpVx34F5OIy8YBI+OZ/Ejcf9shnCVvvTQyInFj+SF153lwRBr9HzV/561jD/YsUt7rFNS5MSqIw==
Expand Down
4 changes: 1 addition & 3 deletions app/manifest.yml
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ modules:
- key: get-started-page
resource: main
resolver:
function: redirectFromGetStarted
function: resolver
title: Jenkins for Jira
layout: basic
icon: https://marketplace-cdn.atlassian.com/files/0c45cd96-ccf1-4490-9df4-307dded2f6e0?fileType=image&mode=full-fit
Expand Down Expand Up @@ -40,8 +40,6 @@ modules:
function:
- key: resolver
handler: index.resolver
- key: redirectFromGetStarted
handler: index.redirectFromGetStarted
- key: handle-jenkins-request
handler: index.handleJenkinsRequest
- key: reset-jenkins-request
Expand Down
3 changes: 1 addition & 2 deletions app/src/index.ts
Original file line number Diff line number Diff line change
@@ -1,10 +1,9 @@
import resolver from './resolvers';
import { redirectFromGetStarted } from './utils/redirect-from-get-started';
import handleJenkinsRequest from './webtrigger/handle-jenkins-request';
import { handleResetJenkinsRequest } from './webtrigger/handle-reset-jenkins-request';

// webtriggers
export { handleJenkinsRequest, handleResetJenkinsRequest };

// resolvers
export { resolver, redirectFromGetStarted };
export { resolver };

0 comments on commit 88b298f

Please sign in to comment.