Skip to content

Commit 9d14c4b

Browse files
eapearsoneapearson
authored
Merge pull request #236 from kbase/PTV-1884
PTV-1884
2 parents 2a162ad + e913502 commit 9d14c4b

8 files changed

Lines changed: 239 additions & 53 deletions

File tree

‎src/plugin/iframe_root/modules/reactComponents/Alert.css‎

Lines changed: 6 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -14,4 +14,10 @@
1414

1515
.Alert-title .fa {
1616
margin-right: 4px;
17+
}
18+
19+
.Alert-inline {
20+
display: inline;
21+
padding: 3px;
22+
margin: 0;
1723
}

‎src/plugin/iframe_root/modules/reactComponents/Alert.js‎

Lines changed: 29 additions & 19 deletions
Original file line numberDiff line numberDiff line change
@@ -14,19 +14,21 @@ define([
1414

1515
class Alert extends Component {
1616
renderIcon() {
17-
switch (this.props.type) {
18-
case 'error':
19-
return 'fa-exclamation-triangle';
20-
case 'warning':
21-
return 'fa-exclamation-triangle';
22-
case 'info':
23-
return 'fa-info';
24-
case 'success':
25-
return 'fa-check';
17+
if (this.props.showIcon) {
18+
switch (this.props.variant) {
19+
case 'error':
20+
return 'fa-exclamation-triangle';
21+
case 'warning':
22+
return 'fa-exclamation-triangle';
23+
case 'info':
24+
return 'fa-info';
25+
case 'success':
26+
return 'fa-check';
27+
}
2628
}
2729
}
2830
renderAlertTypeClass() {
29-
switch (this.props.type) {
31+
switch (this.props.variant) {
3032
case 'error':
3133
return 'danger';
3234
case 'warning':
@@ -37,8 +39,14 @@ define([
3739
return 'success';
3840
}
3941
}
40-
defaultTitle() {
42+
renderAlertCustomClass() {
4143
switch (this.props.type) {
44+
case 'inline':
45+
return 'Alert-inline';
46+
}
47+
}
48+
defaultTitle() {
49+
switch (this.props.variant) {
4250
case 'error':
4351
return 'Error!';
4452
case 'warning':
@@ -50,13 +58,15 @@ define([
5058
}
5159
}
5260
renderTitle() {
53-
const title = this.props.title || this.defaultTitle();
54-
return html`
55-
<div className="Alert-title">
56-
<span className=${`fa ${this.renderIcon()}`} />
57-
${title}
58-
</div>
59-
`;
61+
if (this.props.showTitle) {
62+
const title = this.props.title || this.defaultTitle();
63+
return html`
64+
<div className="Alert-title">
65+
<span className=${`fa ${this.renderIcon()}`} />
66+
${title}
67+
</div>
68+
`;
69+
}
6070
}
6171
render() {
6272
const content = (() => {
@@ -67,7 +77,7 @@ define([
6777
})();
6878
return html`
6979
<div
70-
className=${`alert alert-${this.renderAlertTypeClass()} Alert`}
80+
className=${`alert alert-${this.renderAlertTypeClass()} ${this.renderAlertCustomClass()} Alert`}
7181
style=${this.props.style}
7282
>
7383
${this.renderTitle()}

‎src/plugin/iframe_root/modules/reactComponents/LinkContinueController.js‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -250,7 +250,7 @@ define([
250250
}
251251
case 'HALTED':
252252
return html`
253-
<${Alert} type="warning" title=${this.state.title} message=${this.state.message} />
253+
<${Alert} variant="warning" title=${this.state.title} showIcon=${true} showTitle=${true} message=${this.state.message} />
254254
`;
255255
case 'ERROR':
256256
return html`

‎src/plugin/iframe_root/modules/reactComponents/SignInContinueView.js‎

Lines changed: 9 additions & 5 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ define([
55
'./CollapsiblePanel',
66
'./TextSpan',
77
'./ContinueHeader',
8+
'./Alert',
89
'../lib/provider',
910

1011
'bootstrap',
@@ -16,6 +17,7 @@ define([
1617
CollapsiblePanel,
1718
TextSpan,
1819
ContinueHeader,
20+
Alert,
1921
provider
2022
) => {
2123
const {h, Component, Fragment} = preact;
@@ -147,11 +149,13 @@ define([
147149
<p>There is no KBase account associated with it.</p>
148150
<p>
149151
If you wish to create a new KBase account, you may
150-
<${TextSpan}>
151-
<a href="/#signup">
152-
<${TextSpan}><span className="fa fa-user-plus" /></>
153-
Sign Up now using this <${TextSpan} bold=${true}>${this.props.choice.provider}</> account
154-
</a>.
152+
<${Alert} variant="info" type="inline" style=${{marginLeft: '0.5rem'}}>
153+
<${TextSpan}>
154+
<a href="/#signup">
155+
<${TextSpan}><span className="fa fa-user-plus" /></>
156+
Sign Up now using this <${TextSpan} bold=${true}>${this.props.choice.provider}</> account
157+
</a>.
158+
</>
155159
</>
156160
</p>
157161

‎src/plugin/iframe_root/modules/reactComponents/SignInOops.js‎

Lines changed: 11 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -3,6 +3,7 @@ define([
33
'htm',
44
'reactComponents/CollapsiblePanel',
55
'reactComponents/Well',
6+
'reactComponents/Alert',
67
'lib/provider',
78

89
'bootstrap'
@@ -11,6 +12,7 @@ define([
1112
htm,
1213
CollapsiblePanel,
1314
Well,
15+
Alert,
1416
provider,
1517
) => {
1618

@@ -78,7 +80,7 @@ define([
7880
<${Well} type="warning">
7981
${explanation}
8082
<div style=${{marginBottom: '5px'}}>
81-
83+
<${Alert} variant="info" type="inline">
8284
<a href=${provider.logoutUrl}
8385
target="_blank">
8486
<span className="fa fa-external-link"
@@ -90,13 +92,18 @@ define([
9092
${provider.label}
9193
</span>
9294
</a>
95+
</>
9396
</div>
9497
<p>
9598
After signing out from <span className="-textSpan">
9699
${provider.label}
97-
</span> you will need to <a href="/#login" target="_parent" className="-textSpan">
98-
<span className="fa fa-sign-in -textSpan" /> Sign in to KBase
99-
</a> again.
100+
</span> you will need to
101+
<${Alert} variant="info" type="inline" style=${{margin: '0 0.3rem'}}>
102+
<a href="/#login" target="_parent" className="-textSpan">
103+
<span className="fa fa-sign-in -textSpan" /> Sign in to KBase
104+
</a>
105+
</>
106+
again.
100107
</p>
101108
</div>
102109
</>

0 commit comments

Comments
 (0)