Skip to content

Commit c55964e

Browse files
authored
Merge pull request HumanBrainProject#6 from apdavison/warning-messages
Display warning message provided by API
2 parents 881852f + 2717cff commit c55964e

File tree

11 files changed

+177
-76
lines changed

11 files changed

+177
-76
lines changed

apps/model_catalog/src/App.css

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -43,6 +43,10 @@ input {
4343
overflow: hidden;
4444
}
4545

46+
.warning {
47+
background: linear-gradient(0.25turn, #ffbb00, #ffe100);
48+
}
49+
4650
.smallbox {
4751
/* background: #00C959; */
4852
background: linear-gradient(0.25turn, #00A595, #9CE142);

apps/model_catalog/src/ContextMain.js

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -9,6 +9,7 @@ const ContextMainProvider = (props) => {
99
const [validFilterValues, setValidFilterValues] = React.useState(null);
1010
const [compareModels, setCompareModels] = React.useState({});
1111
const [compareTests, setCompareTests] = React.useState({});
12+
const [status, setStatus] = React.useState("");
1213

1314
return (
1415
<ContextMain.Provider
@@ -18,6 +19,7 @@ const ContextMainProvider = (props) => {
1819
validFilterValues: [validFilterValues, setValidFilterValues],
1920
compareModels: [compareModels, setCompareModels],
2021
compareTests: [compareTests, setCompareTests],
22+
status: [status, setStatus]
2123
}}
2224
>
2325
{props.children}

apps/model_catalog/src/Introduction.js

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -197,12 +197,14 @@ function PlotGraph(props) {
197197
);
198198
}
199199

200+
200201
class Introduction extends React.Component {
202+
201203
constructor(props) {
202204
super(props);
203205

204206
this.state = {
205-
stats: null,
207+
stats: null
206208
};
207209
}
208210

@@ -238,6 +240,7 @@ class Introduction extends React.Component {
238240

239241
render() {
240242
const { classes } = this.props;
243+
241244
return (
242245
<React.Fragment>
243246

@@ -278,7 +281,6 @@ class Introduction extends React.Component {
278281
abcde
279282
</div> */}
280283

281-
282284
<Grid container spacing={3} className={classes.body}>
283285
<Grid item xs={6} style={{ paddingTop: 0 }}>
284286
<div

apps/model_catalog/src/MUIDataTableCustomToolbar.js

Lines changed: 23 additions & 22 deletions
Original file line numberDiff line numberDiff line change
@@ -4,13 +4,34 @@ import Tooltip from "@material-ui/core/Tooltip";
44
import FlipIcon from "@material-ui/icons/Flip";
55
import AddIcon from "@material-ui/icons/Add";
66
import { withStyles } from "@material-ui/core/styles";
7+
import ContextMain from "./ContextMain";
78

89
const defaultToolbarStyles = {
910
iconButton: {},
1011
};
1112

1213
class CustomToolbar extends React.Component {
14+
static contextType = ContextMain;
15+
1316
render() {
17+
const [status] = this.context.status;
18+
let addNewVersionButton = "";
19+
if (!status.includes("read-only")) {
20+
addNewVersionButton = (
21+
<Tooltip
22+
title={
23+
this.props.tableType === "models"
24+
? "Add New Model"
25+
: "Add New Test"
26+
}
27+
>
28+
<IconButton onClick={this.props.addNew}>
29+
<AddIcon />
30+
</IconButton>
31+
</Tooltip>
32+
);
33+
}
34+
1435
if (this.props.display === "Models and Tests") {
1536
return (
1637
<React.Fragment>
@@ -19,33 +40,13 @@ class CustomToolbar extends React.Component {
1940
<FlipIcon />
2041
</IconButton>
2142
</Tooltip>
22-
<Tooltip
23-
title={
24-
this.props.tableType === "models"
25-
? "Add New Model"
26-
: "Add New Test"
27-
}
28-
>
29-
<IconButton onClick={this.props.addNew}>
30-
<AddIcon />
31-
</IconButton>
32-
</Tooltip>
43+
{addNewVersionButton}
3344
</React.Fragment>
3445
);
3546
} else {
3647
return (
3748
<React.Fragment>
38-
<Tooltip
39-
title={
40-
this.props.tableType === "models"
41-
? "Add New Model"
42-
: "Add New Test"
43-
}
44-
>
45-
<IconButton onClick={this.props.addNew}>
46-
<AddIcon />
47-
</IconButton>
48-
</Tooltip>
49+
{addNewVersionButton}
4950
</React.Fragment>
5051
);
5152
}

apps/model_catalog/src/ModelDetail.js

Lines changed: 6 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -142,7 +142,7 @@ class ModelDetail extends React.Component {
142142
if (!DevMode) {
143143
this.getExtendedData();
144144
this.getModelResults();
145-
this.checkEditAccess();
145+
this.checkEditAccess(this.context.status);
146146
}
147147
}
148148

@@ -361,7 +361,11 @@ class ModelDetail extends React.Component {
361361
});
362362
}
363363

364-
checkEditAccess() {
364+
checkEditAccess(status) {
365+
const [statusMessage] = status;
366+
if (statusMessage.includes("read-only")) {
367+
return
368+
}
365369
let model = this.props.modelData;
366370
console.log("Checking edit access");
367371
datastore

apps/model_catalog/src/ModelDetailHeader.js

Lines changed: 29 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -14,6 +14,7 @@ import ContextMain from "./ContextMain";
1414
import ErrorDialog from "./ErrorDialog";
1515
import ModelEditForm from "./ModelEditForm";
1616
import ModelAddForm from "./ModelAddForm";
17+
import WarningBox from "./WarningBox";
1718
import Theme from "./theme";
1819
import {
1920
copyToClipboard,
@@ -109,6 +110,27 @@ function EditButton(props) {
109110
}
110111
}
111112

113+
function DuplicateButton(props) {
114+
if (props.canDuplicate) {
115+
return (
116+
<Tooltip placement="top" title="Duplicate Model">
117+
<IconButton
118+
aria-label="duplicate model"
119+
onClick={() => props.handleDuplicateClick()}
120+
style={{
121+
backgroundColor: Theme.buttonPrimary,
122+
marginLeft: 10,
123+
}}
124+
>
125+
<FileCopyIcon />
126+
</IconButton>
127+
</Tooltip>
128+
);
129+
} else {
130+
return "";
131+
}
132+
}
133+
112134
class ModelDetailHeader extends React.Component {
113135
static contextType = ContextMain;
114136

@@ -228,8 +250,11 @@ class ModelDetailHeader extends React.Component {
228250
);
229251
}
230252

253+
const [status] = this.context.status;
254+
231255
return (
232256
<React.Fragment>
257+
<WarningBox message={status} />
233258
<Grid item>
234259
<Typography variant="h4" gutterBottom>
235260
<AccessibilityIcon private={this.props.private} />
@@ -251,18 +276,10 @@ class ModelDetailHeader extends React.Component {
251276
canEdit={this.props.canEdit}
252277
handleEditClick={this.handleEditClick}
253278
/>
254-
<Tooltip placement="top" title="Duplicate Model">
255-
<IconButton
256-
aria-label="duplicate model"
257-
onClick={() => this.handleDuplicateClick()}
258-
style={{
259-
backgroundColor: Theme.buttonPrimary,
260-
marginLeft: 10,
261-
}}
262-
>
263-
<FileCopyIcon />
264-
</IconButton>
265-
</Tooltip>
279+
<DuplicateButton
280+
canDuplicate={status.includes("read-only") ? false : true}
281+
handleDuplicateClick={this.handleDuplicateClick}
282+
/>
266283
<CompareIcon
267284
compareFlag={this.props.compareFlag}
268285
addModelCompare={this.props.addModelCompare}

apps/model_catalog/src/TestDetail.js

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -359,6 +359,8 @@ class TestDetail extends React.Component {
359359

360360
render() {
361361
const { classes } = this.props;
362+
const [status] = this.context.status;
363+
362364
return (
363365
<Dialog
364366
fullScreen
@@ -445,6 +447,7 @@ class TestDetail extends React.Component {
445447
removeTestInstanceCompare={
446448
this.removeTestInstanceCompare
447449
}
450+
canEdit={status.includes("read-only") ? false : true}
448451
/>
449452
</Grid>
450453
<Grid item xs={3}>

apps/model_catalog/src/TestDetailContent.js

Lines changed: 15 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -242,6 +242,19 @@ class TestDetailContent extends React.Component {
242242
);
243243
}
244244

245+
let addNewVersionButton = "";
246+
if (this.props.canEdit) {
247+
addNewVersionButton = (
248+
<Button
249+
variant="contained"
250+
style={{ backgroundColor: Theme.buttonPrimary }}
251+
onClick={() => this.setState({ openAddInstanceForm: true })}
252+
>
253+
Add new version
254+
</Button>
255+
);
256+
}
257+
245258
return (
246259
<React.Fragment>
247260
{}
@@ -292,19 +305,7 @@ class TestDetailContent extends React.Component {
292305
</Typography>
293306
</Grid>
294307
<Grid container item justify="flex-end" xs={6}>
295-
<Button
296-
variant="contained"
297-
style={{
298-
backgroundColor: Theme.buttonPrimary,
299-
}}
300-
onClick={() =>
301-
this.setState({
302-
openAddInstanceForm: true,
303-
})
304-
}
305-
>
306-
Add new version
307-
</Button>
308+
{addNewVersionButton}
308309
</Grid>
309310
</Grid>
310311
{this.props.instances.length === 0
@@ -357,7 +358,7 @@ class TestDetailContent extends React.Component {
357358
</span>
358359
</p>
359360
{this.state
360-
.instancesWithResults && (
361+
.instancesWithResults && this.props.canEdit && (
361362
<Tooltip
362363
placement="top"
363364
title={

apps/model_catalog/src/TestDetailHeader.js

Lines changed: 57 additions & 24 deletions
Original file line numberDiff line numberDiff line change
@@ -13,12 +13,58 @@ import ErrorDialog from "./ErrorDialog";
1313
import TestEditForm from "./TestEditForm";
1414
import TestAddForm from "./TestAddForm";
1515
import Theme from "./theme";
16+
import WarningBox from "./WarningBox";
1617
import {
1718
copyToClipboard,
1819
formatTimeStampToLongString,
1920
showNotification,
2021
} from "./utils";
2122

23+
24+
function EditButton(props) {
25+
if (props.canEdit) {
26+
return (
27+
<Tooltip placement="top" title="Edit Test">
28+
<IconButton
29+
aria-label="edit test"
30+
onClick={() => props.handleEditClick()}
31+
style={{
32+
backgroundColor: Theme.buttonPrimary,
33+
marginLeft: 10,
34+
}}
35+
>
36+
<EditIcon />
37+
</IconButton>
38+
</Tooltip>
39+
);
40+
} else {
41+
return "";
42+
}
43+
}
44+
45+
46+
function DuplicateButton(props) {
47+
if (props.canDuplicate) {
48+
return (
49+
<Tooltip placement="top" title="Duplicate Test">
50+
<IconButton
51+
aria-label="duplicate test"
52+
onClick={() => props.handleDuplicateClick()}
53+
style={{
54+
backgroundColor: Theme.buttonPrimary,
55+
marginLeft: 10,
56+
}}
57+
>
58+
<FileCopyIcon />
59+
</IconButton>
60+
</Tooltip>
61+
);
62+
} else {
63+
return "";
64+
}
65+
}
66+
67+
2268
function CompareIcon(props) {
2369
if (props.compareFlag === null) {
2470
return (
@@ -189,8 +235,11 @@ class TestDetailHeader extends React.Component {
189235
);
190236
}
191237

238+
const [status] = this.context.status;
239+
192240
return (
193241
<React.Fragment>
242+
<WarningBox message={status} />
194243
<Grid item>
195244
<Typography variant="h4" gutterBottom>
196245
<span
@@ -207,30 +256,14 @@ class TestDetailHeader extends React.Component {
207256
{" "}
208257
{this.props.name}
209258
</span>
210-
<Tooltip placement="top" title="Edit Test">
211-
<IconButton
212-
aria-label="edit test"
213-
onClick={() => this.handleEditClick()}
214-
style={{
215-
backgroundColor: Theme.buttonPrimary,
216-
marginLeft: 10,
217-
}}
218-
>
219-
<EditIcon />
220-
</IconButton>
221-
</Tooltip>
222-
<Tooltip placement="top" title="Duplicate Test">
223-
<IconButton
224-
aria-label="duplicate test"
225-
onClick={() => this.handleDuplicateClick()}
226-
style={{
227-
backgroundColor: Theme.buttonPrimary,
228-
marginLeft: 10,
229-
}}
230-
>
231-
<FileCopyIcon />
232-
</IconButton>
233-
</Tooltip>
259+
<EditButton
260+
canEdit={status.includes("read-only") ? false : true}
261+
handleEditClick={this.handleEditClick}
262+
/>
263+
<DuplicateButton
264+
canDuplicate={status.includes("read-only") ? false : true}
265+
handleDuplicateClick={this.handleDuplicateClick}
266+
/>
234267
<CompareIcon
235268
compareFlag={this.props.compareFlag}
236269
addTestCompare={this.props.addTestCompare}

0 commit comments

Comments
 (0)