Skip to content

Commit 9b4c616

Browse files
rachellerathbonerachellerathbone
authored
Merge pull request #202 from atlassian/ARC-2599-part-2-connection-panel-main-pending-and-duplicate
Arc-2599 part 2 connection panel main pending and duplicate
2 parents e8cb25b + c5e3ec5 commit 9b4c616

7 files changed

Lines changed: 204 additions & 9 deletions

File tree

‎app/jenkins-for-jira-ui/package.json‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -20,6 +20,7 @@
2020
"@atlaskit/page-header": "10.4.4",
2121
"@atlaskit/progress-tracker": "8.5.2",
2222
"@atlaskit/spinner": "15.5.3",
23+
"@atlaskit/tabs": "^13.4.9",
2324
"@atlaskit/textfield": "5.6.4",
2425
"@atlaskit/theme": "12.5.5",
2526
"@atlaskit/tokens": "^1.28.1",

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

Lines changed: 61 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@ export const connectionPanelContainer = css`
66
box-shadow: 0px 2px 4px 0px #091E4240;
77
display: flex;
88
flex-direction: column;
9-
max-height: 164px;
109
padding: ${token('space.300')};
1110
margin: ${token('space.400')} auto ${token('space.400')} ${token('space.025')};
1211
`;
@@ -15,7 +14,7 @@ export const connectionPanelTopContainer = css`
1514
border-bottom: 1px solid #f4f3f6;
1615
display: flex;
1716
justify-content: space-between;
18-
padding-bottom: ${token('space.300')};
17+
padding-bottom: ${token('space.200')};
1918
`;
2019

2120
export const connectionPanelHeaderContainer = css`
@@ -41,5 +40,64 @@ export const ipAddressStyle = css`
4140
`;
4241

4342
export const connectionPanelMainContainer = css`
44-
margin-top: ${token('space.200', '16px')};
43+
margin-top: ${token('space.200')};
44+
45+
#connection-panel-tabs-0 {
46+
padding-left: ${token('space.0')};
47+
48+
::after {
49+
margin-left: ${token('space.negative.400')};
50+
}
51+
}
52+
53+
[role=tablist] {
54+
&:first-of-type {
55+
::before {
56+
margin-left: ${token('space.negative.100')};
57+
}
58+
}
59+
}
60+
`;
61+
62+
export const connectionPanelMainTabs = css`
63+
align-items: center;
64+
border-radius: 3px;
65+
display: flex;
66+
flex-direction: column;
67+
justify-content: center;
68+
margin: ${token('space.200')} auto ${token('space.100')};
69+
padding: ${token('space.400')};
70+
width: 100%;
71+
`;
72+
73+
export const notConnectedStateContainer = css`
74+
margin: 0 auto;
75+
max-width: 420px;
76+
text-align: center;
77+
`;
78+
79+
// TODO - delete this temp class
80+
export const notConnectedTempImgPlaceholder = css`
81+
background-color: lightgrey;
82+
border: 1px solid lightgrey;
83+
border-radius: 3px;
84+
height: 160px;
85+
margin: auto;
86+
width: 160px;
87+
`;
88+
89+
export const notConnectedStateHeader = css`
90+
font-size: 20px;
91+
font-weight: 500;
92+
margin: ${token('space.200')} auto;
93+
`;
94+
95+
export const notConnectedStateParagraph = css`
96+
font-size: 14px;
97+
line-height: 20px;
98+
margin-bottom: ${token('space.400')};
99+
100+
div {
101+
margin-bottom: ${token('space.300')}
102+
}
45103
`;

‎app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanel.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const ConnectionPanel = (): JSX.Element => {
1717
return (
1818
<div className={cx(connectionPanelContainer)}>
1919
<ConnectionPanelTop connectedState={connectedState} ipAddress="10.10.0.10"/>
20-
<ConnectionPanelMain />
20+
<ConnectionPanelMain connectedState={connectedState} />
2121
</div>
2222
);
2323
};

‎app/jenkins-for-jira-ui/src/components/ConnectionPanel/ConnectionPanelMain.tsx‎

Lines changed: 45 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +1,51 @@
1-
import React from 'react';
1+
import React, { ReactNode } from 'react';
22
import { cx } from '@emotion/css';
3-
import { connectionPanelMainContainer } from './ConnectionPanel.styles';
3+
import Tabs, { Tab, TabList, TabPanel } from '@atlaskit/tabs';
4+
import { connectionPanelMainContainer, connectionPanelMainTabs } from './ConnectionPanel.styles';
5+
import { ConnectedState } from '../StatusLabel/StatusLabel';
6+
import { NotConnectedState } from './NotConnectedState';
47

5-
const ConnectionPanelMain = (): JSX.Element => {
8+
export const Panel = ({
9+
children,
10+
testId
11+
}: {
12+
children: ReactNode;
13+
testId?: string;
14+
}) => (
15+
<div className={cx(connectionPanelMainTabs)} data-testid={testId}>
16+
{children}
17+
</div>
18+
);
19+
20+
type ConnectionPanelMainProps = {
21+
connectedState: ConnectedState
22+
};
23+
24+
const ConnectionPanelMain = ({ connectedState }: ConnectionPanelMainProps): JSX.Element => {
625
return (
7-
<div className={cx(connectionPanelMainContainer)}>Connection panel main coming soon...</div>
26+
<div className={cx(connectionPanelMainContainer)}>
27+
{
28+
connectedState === ConnectedState.DUPLICATE
29+
? <NotConnectedState connectedState={connectedState} />
30+
: <Tabs id="connection-panel-tabs">
31+
<TabList>
32+
{/* TODO - update (0) for connected state */}
33+
<Tab>Recent events (0)</Tab>
34+
<Tab>Set up guide</Tab>
35+
</TabList>
36+
<TabPanel>
37+
{
38+
connectedState === ConnectedState.CONNECTED
39+
? <Panel>List of servers goes here</Panel>
40+
: <Panel><NotConnectedState connectedState={connectedState} /></Panel>
41+
}
42+
</TabPanel>
43+
<TabPanel>
44+
<Panel>Set up guide info to go here</Panel>
45+
</TabPanel>
46+
</Tabs>
47+
}
48+
</div>
849
);
950
};
1051

‎app/jenkins-for-jira-ui/src/components/ConnectionPanel/NotConnectedState.test.tsx‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
import React from 'react';
2+
import { render, screen } from '@testing-library/react';
3+
import '@testing-library/jest-dom/extend-expect';
4+
import { NotConnectedState } from './NotConnectedState';
5+
import { ConnectedState } from '../StatusLabel/StatusLabel';
6+
7+
describe('NotConnectedState', () => {
8+
test('renders with connected state DUPLICATE', () => {
9+
render(<NotConnectedState connectedState={ConnectedState.DUPLICATE} />);
10+
expect(screen.getByText('Duplicate server')).toBeInTheDocument();
11+
expect(screen.getByText('Delete')).toBeInTheDocument();
12+
});
13+
14+
test('renders with connected state PENDING', () => {
15+
render(<NotConnectedState connectedState={ConnectedState.PENDING} />);
16+
expect(screen.getByText('Connection pending')).toBeInTheDocument();
17+
expect(screen.getByText('Connection settings')).toBeInTheDocument();
18+
});
19+
});

‎app/jenkins-for-jira-ui/src/components/ConnectionPanel/NotConnectedState.tsx‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
import React from 'react';
2+
import { cx } from '@emotion/css';
3+
import Button from '@atlaskit/button';
4+
import { ConnectedState } from '../StatusLabel/StatusLabel';
5+
import {
6+
notConnectedStateContainer,
7+
notConnectedStateHeader,
8+
notConnectedStateParagraph,
9+
notConnectedTempImgPlaceholder
10+
} from './ConnectionPanel.styles';
11+
12+
type NotConnectedStateProps = {
13+
connectedState: ConnectedState
14+
};
15+
16+
const NotConnectedState = ({ connectedState }: NotConnectedStateProps): JSX.Element => {
17+
const notConnectedHeader =
18+
connectedState === ConnectedState.PENDING ? 'Connection pending' : 'Duplicate server';
19+
const notConnectedContent =
20+
connectedState === ConnectedState.PENDING
21+
? (
22+
<>
23+
This connection is pending completion by a Jenkins admin.
24+
Its set up guide will be available when the connection is complete.
25+
<div />
26+
Open connection settings if your Jenkins admin needs to revisit the items they need.
27+
</>
28+
)
29+
: (
30+
<>
31+
This connection is a duplicate of SERVER NAME.
32+
<div />
33+
Use SERVER NAME to manage this server.
34+
</>
35+
);
36+
37+
return (
38+
<div className={cx(notConnectedStateContainer)}>
39+
<div className={cx(notConnectedTempImgPlaceholder)}></div>
40+
<h3 className={cx(notConnectedStateHeader)}>{notConnectedHeader}</h3>
41+
<p className={cx(notConnectedStateParagraph)}>{notConnectedContent}</p>
42+
{/* TODO - add onClick handler */}
43+
{
44+
connectedState === ConnectedState.PENDING
45+
? <Button>Connection settings</Button>
46+
: <Button appearance="danger">Delete</Button>
47+
}
48+
</div>
49+
);
50+
};
51+
52+
export { NotConnectedState };

‎app/jenkins-for-jira-ui/yarn.lock‎

Lines changed: 25 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -168,6 +168,16 @@
168168
"@emotion/react" "^11.7.1"
169169
tiny-invariant "^1.2.0"
170170

171+
"@atlaskit/ds-explorations@^3.0.0":
172+
version "3.0.5"
173+
resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/ds-explorations/-/ds-explorations-3.0.5.tgz#e1e18da56198ee06878c89dfdbf42f7ca5be5240"
174+
integrity sha512-7iGD7lWeDrGG6skZTCeBXGi3lWZE9RO1Ckozg569Iao0r9mjBNDDTG+1xa3Ve5Os+TIYqfNQ763AEBCkMI3ByQ==
175+
dependencies:
176+
"@atlaskit/tokens" "^1.28.0"
177+
"@babel/runtime" "^7.0.0"
178+
"@emotion/react" "^11.7.1"
179+
tiny-invariant "^1.2.0"
180+
171181
"@atlaskit/ds-lib@^2.1.0", "@atlaskit/ds-lib@^2.2.0":
172182
version "2.2.3"
173183
resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/ds-lib/-/ds-lib-2.2.3.tgz#fc65a829b45ee0a26c9c6c97072e2d570214aec7"
@@ -468,6 +478,20 @@
468478
"@babel/runtime" "^7.0.0"
469479
"@emotion/react" "^11.7.1"
470480

481+
"@atlaskit/tabs@^13.4.9":
482+
version "13.4.9"
483+
resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tabs/-/tabs-13.4.9.tgz#0cf7df8dfdd690a1f720470b4d76219f76ac88fb"
484+
integrity sha512-8Fu7HQWbdkfMRnQ1ICFw6zvgiaR2rtrUNwYmnyHcqZg7fLyqv6jeclVLqtsq50fodJnFTWX8FvljmbDoiYUqDA==
485+
dependencies:
486+
"@atlaskit/analytics-next" "^9.1.0"
487+
"@atlaskit/codemod-utils" "^4.2.0"
488+
"@atlaskit/ds-explorations" "^3.0.0"
489+
"@atlaskit/primitives" "^1.6.0"
490+
"@atlaskit/theme" "^12.6.0"
491+
"@atlaskit/tokens" "^1.26.0"
492+
"@babel/runtime" "^7.0.0"
493+
"@emotion/react" "^11.7.1"
494+
471495
"@atlaskit/textfield@5.6.4":
472496
version "5.6.4"
473497
resolved "https://registry.yarnpkg.com/@atlaskit/textfield/-/textfield-5.6.4.tgz#6d874895f0a1e4a636c0ca78778927f8f0106bd1"
@@ -558,7 +582,7 @@
558582
"@babel/types" "^7.20.0"
559583
bind-event-listener "^2.1.1"
560584

561-
"@atlaskit/tokens@^1.28.1":
585+
"@atlaskit/tokens@^1.28.0", "@atlaskit/tokens@^1.28.1":
562586
version "1.28.1"
563587
resolved "https://packages.atlassian.com/api/npm/npm-remote/@atlaskit/tokens/-/tokens-1.28.1.tgz#f7cd63b9046f9b287710b8701357eecf011536a8"
564588
integrity sha512-0rkCRLQ+zsynpVx34F5OIy8YBI+OZ/Ejcf9shnCVvvTQyInFj+SF153lwRBr9HzV/561jD/YsUt7rFNS5MSqIw==

0 commit comments

Comments
 (0)