Skip to content

Commit a52940f

Browse files
alexjenningsalexjennings
committed
Tabs for shape-tags
1 parent e7eff17 commit a52940f

22 files changed

+814
-175
lines changed

‎src/components/shapetag/ShapeTagCard.jsx‎

Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -7,7 +7,6 @@ import {
77
ShapeTagThumbnailDisplay,
88
ShapeTagAdvancedDisplay,
99
ShapeTagOverlayDisplay,
10-
ShapeTagScriptDisplay,
1110
} from './ShapeTagDisplay';
1211
import ShapeTagEditor from './ShapeTagEditor';
1312
import {
@@ -17,7 +16,6 @@ import {
1716
ShapeTagThumbnailForm,
1817
ShapeTagAdvancedForm,
1918
ShapeTagOverlayForm,
20-
ShapeTagScriptForm,
2119
} from './ShapeTagForm';
2220

2321
export default function ShapeTagCard(props) {
@@ -71,14 +69,6 @@ export default function ShapeTagCard(props) {
7169
{...props}
7270
/>
7371
</SquareCard>
74-
<SquareCard>
75-
<ShapeTagEditor
76-
title="Script"
77-
formComponent={ShapeTagScriptForm}
78-
displayComponent={ShapeTagScriptDisplay}
79-
{...props}
80-
/>
81-
</SquareCard>
8272
</>
8373
);
8474
}

‎src/components/shapetag/ShapeTagRemove.jsx‎

Lines changed: 15 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -2,29 +2,32 @@ import Button from '@material-ui/core/Button';
22
import Dialog from '@material-ui/core/Dialog';
33
import DialogActions from '@material-ui/core/DialogActions';
44
import DialogTitle from '@material-ui/core/DialogTitle';
5+
import { compose } from 'redux';
56

6-
import { shapetag as api } from '@vidispine/vdt-api';
7+
import { shapetag as ShapeTagApi } from '@vidispine/vdt-api';
78

8-
export default function ShapeTagRemove({ closeModal, isOpen, tagName, history, openSnackBar }) {
9+
import withUI from '../../hoc/withUI';
10+
11+
function ShapeTagRemove({ tagName, open, onClose, onSuccess, onFail, openSnackBar }) {
912
const onRemove = () => {
10-
api
11-
.removeShapeTag({ tagName })
12-
.then(() => {
13+
ShapeTagApi.removeShapeTag({ tagName })
14+
.then((response) => {
1315
const messageContent = `Shape Tag ${tagName} Removed`;
1416
openSnackBar({ messageContent });
15-
history.push('/shape-tag/');
16-
closeModal();
17+
if (onSuccess) onSuccess(response);
18+
onClose();
1719
})
18-
.catch(() => {
20+
.catch((error) => {
1921
const messageContent = 'Error Removing Shape Tag';
2022
openSnackBar({ messageContent, messageColor: 'secondary' });
23+
if (onFail) onFail(error);
2124
});
2225
};
2326
return (
24-
<Dialog open={isOpen} onClose={closeModal} fullWidth maxWidth={false}>
27+
<Dialog open={open} onClose={onClose} fullWidth maxWidth={false}>
2528
<DialogTitle>{`Remove Shape Tag "${tagName}"?`}</DialogTitle>
2629
<DialogActions>
27-
<Button onClick={closeModal} color="primary">
30+
<Button onClick={onClose} color="primary">
2831
Cancel
2932
</Button>
3033
<Button variant="text" onClick={onRemove} color="secondary" autoFocus>
@@ -34,3 +37,5 @@ export default function ShapeTagRemove({ closeModal, isOpen, tagName, history, o
3437
</Dialog>
3538
);
3639
}
40+
41+
export default compose(withUI)(ShapeTagRemove);

‎src/components/shapetag/ShapeTagScriptCard.jsx‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
import SquareCard from '../ui/SquareCard';
2+
3+
import ShapeTagScriptEditor from './ShapeTagScriptEditor';
4+
5+
export default function MetadataDatasetCard(props) {
6+
return (
7+
<SquareCard>
8+
<ShapeTagScriptEditor {...props} />
9+
</SquareCard>
10+
);
11+
}

‎src/components/shapetag/ShapeTagScriptDisplay.jsx‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,7 @@
1+
import TextGrid from '../ui/TextGrid';
2+
3+
function ShapeTagScriptDisplay({ value }) {
4+
return <TextGrid value={value} variant="application/javascript" />;
5+
}
6+
7+
export default ShapeTagScriptDisplay;

‎src/components/shapetag/ShapeTagScriptEditor.jsx‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import * as formActions from '../../formactions/shapetag';
2+
import withUI from '../../hoc/withUI';
3+
import Editor from '../ui/Editor';
4+
5+
import ShapeTagScriptDisplay from './ShapeTagScriptDisplay';
6+
import ShapeTagScriptForm from './ShapeTagScriptForm';
7+
8+
const EDIT_SHAPETAG_SCRIPT_FORM = 'EDIT_SHAPETAG_SCRIPT_FORM';
9+
10+
function ShapeTagScriptEditor({ tagName, shapeTagScript, openSnackBar, onRefresh, onSuccess }) {
11+
const onSubmitSuccess = (response, dispatch, props) => {
12+
const messageContent = 'Shape Tag Script Updated';
13+
openSnackBar({ messageContent });
14+
if (onRefresh) onRefresh();
15+
if (onSuccess) onSuccess(response, dispatch, props);
16+
};
17+
const onSubmitFail = () => {
18+
const messageContent = 'Error Updating Shape Tag Script';
19+
openSnackBar({ messageContent, messageColor: 'secondary' });
20+
};
21+
const formProps = { tagName };
22+
const displayProps = { value: shapeTagScript };
23+
const initialValues = { tagName, shapeTagScript };
24+
return (
25+
<Editor
26+
formComponent={ShapeTagScriptForm}
27+
displayComponent={ShapeTagScriptDisplay}
28+
formName={EDIT_SHAPETAG_SCRIPT_FORM}
29+
onSubmitSuccess={onSubmitSuccess}
30+
onSubmitFail={onSubmitFail}
31+
onSubmit={formActions.onUpdateScript}
32+
formProps={formProps}
33+
displayProps={displayProps}
34+
initialValues={initialValues}
35+
tagName={tagName}
36+
/>
37+
);
38+
}
39+
40+
export default withUI(ShapeTagScriptEditor);

‎src/components/shapetag/ShapeTagScriptForm.jsx‎

Lines changed: 31 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,31 @@
1+
import Typography from '@material-ui/core/Typography';
2+
import { reduxForm } from 'redux-form';
3+
4+
import CodeField from '../ui/CodeField';
5+
import Field from '../ui/Field';
6+
import InitialDisabledTextField from '../ui/InitialDisabledTextField';
7+
8+
function ShapeTagScriptForm({ error, handleSubmit, tagName }) {
9+
return (
10+
<form onSubmit={handleSubmit}>
11+
{error && <Typography color="error">{error}</Typography>}
12+
{tagName === undefined ? (
13+
<Field name="tagName" label="Tag Name" component={InitialDisabledTextField} fullWidth />
14+
) : null}
15+
<Field
16+
name="shapeTagScript"
17+
component={CodeField}
18+
nameAsTitle={false}
19+
options={{
20+
theme: 'material',
21+
mode: 'application/javascript',
22+
lineWrapping: true,
23+
lineNumbers: true,
24+
}}
25+
/>
26+
<button type="submit" hidden />
27+
</form>
28+
);
29+
}
30+
31+
export default reduxForm()(ShapeTagScriptForm);

‎src/components/shapetag/ShapeTagScriptTestCard.jsx‎

Lines changed: 47 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,47 @@
1+
import Splitter, { SplitDirection, GutterTheme } from '@devbookhq/splitter';
2+
import Card from '@material-ui/core/Card';
3+
import CardContent from '@material-ui/core/CardContent';
4+
import { useTheme, withStyles } from '@material-ui/core/styles';
5+
6+
import TextGrid from '../ui/TextGrid';
7+
8+
import ShapeTagScriptEditor from './ShapeTagScriptEditor';
9+
10+
const styles = () => ({
11+
SplitterContainer: {
12+
height: '100%',
13+
},
14+
});
15+
16+
function ShapeTagScriptTestCard({
17+
classes,
18+
tagName,
19+
shapeTagScript,
20+
transcodePresetDocument,
21+
onSuccess,
22+
}) {
23+
const theme = useTheme();
24+
const gutterTheme = theme?.palette?.type === 'light' ? GutterTheme.Light : GutterTheme.Dark;
25+
return (
26+
<div className={classes.SplitterContainer}>
27+
<Splitter direction={SplitDirection.Horizontal} gutterTheme={gutterTheme}>
28+
<Card>
29+
<CardContent>
30+
<ShapeTagScriptEditor
31+
tagName={tagName}
32+
shapeTagScript={shapeTagScript}
33+
onSuccess={onSuccess}
34+
/>
35+
</CardContent>
36+
</Card>
37+
<Card>
38+
<CardContent>
39+
<TextGrid value={transcodePresetDocument} variant="json" />
40+
</CardContent>
41+
</Card>
42+
</Splitter>
43+
</div>
44+
);
45+
}
46+
47+
export default withStyles(styles)(ShapeTagScriptTestCard);

‎src/components/shapetag/ShapeTagScriptTestParams.jsx‎

Lines changed: 73 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,73 @@
1+
import Accordion from '@material-ui/core/Accordion';
2+
import AccordionActions from '@material-ui/core/AccordionActions';
3+
import AccordionDetails from '@material-ui/core/AccordionDetails';
4+
import AccordionSummary from '@material-ui/core/AccordionSummary';
5+
import Button from '@material-ui/core/Button';
6+
import Divider from '@material-ui/core/Divider';
7+
import Typography from '@material-ui/core/Typography';
8+
import { compose } from 'redux';
9+
10+
import * as formActions from '../../formactions/shapetag';
11+
import withFormActions from '../../hoc/withFormActions';
12+
import withUI from '../../hoc/withUI';
13+
14+
import ShapeTagScriptTestParamsForm from './ShapeTagScriptTestParamsForm';
15+
16+
export const SHAPETAG_SCRIPT_TEST_PARAMS_FORM = 'SHAPETAG_SCRIPT_TEST_PARAMS_FORM';
17+
18+
function ShapeTagScriptTestParams({
19+
tagName,
20+
itemId,
21+
shapeId,
22+
onClose,
23+
onSuccess,
24+
openSnackBar,
25+
submitForm,
26+
resetForm,
27+
form = 'SHAPETAG_SCRIPT_TEST_PARAMS_FORM',
28+
initialValues = {},
29+
}) {
30+
const onSubmitSuccess = (response, dispatch, props) => {
31+
if (onSuccess) {
32+
onSuccess(response, dispatch, props);
33+
}
34+
};
35+
const onSubmitFail = () => {
36+
const messageContent = 'Error Testing Shape Tag';
37+
openSnackBar({ messageContent, messageColor: 'secondary' });
38+
};
39+
return (
40+
<Accordion defaultExpanded>
41+
<AccordionSummary>
42+
<Typography variant="subtitle2" color="textSecondary">
43+
Shape Tag Script Test
44+
</Typography>
45+
</AccordionSummary>
46+
<AccordionDetails>
47+
<ShapeTagScriptTestParamsForm
48+
form={form}
49+
onSubmit={formActions.onTestShapeTagScript}
50+
onSubmitSuccess={onSubmitSuccess}
51+
onSubmitFail={onSubmitFail}
52+
onCancel={onClose}
53+
destroyOnUnmount={false}
54+
initialValues={initialValues}
55+
tagName={tagName}
56+
itemId={itemId}
57+
shapeId={shapeId}
58+
/>
59+
</AccordionDetails>
60+
<Divider />
61+
<AccordionActions>
62+
<Button size="small" onClick={() => resetForm(form)}>
63+
Reset
64+
</Button>
65+
<Button size="small" color="primary" onClick={() => submitForm(form)}>
66+
Test
67+
</Button>
68+
</AccordionActions>
69+
</Accordion>
70+
);
71+
}
72+
73+
export default compose(withUI, withFormActions)(ShapeTagScriptTestParams);

‎src/components/shapetag/ShapeTagScriptTestParamsForm.jsx‎

Lines changed: 59 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,59 @@
1+
import Typography from '@material-ui/core/Typography';
2+
import { reduxForm } from 'redux-form';
3+
4+
import { required } from '../../utils/FieldValidation';
5+
import { TextField } from '../form';
6+
import Field from '../ui/Field';
7+
import FormSection from '../ui/FormSection';
8+
9+
const queryParams = () => (
10+
<Field
11+
name="job"
12+
component={TextField}
13+
fullWidth
14+
label="Job"
15+
helperText="The id of a job to retrieve job metadata from."
16+
/>
17+
);
18+
19+
function ShapeTagScriptTestParamsForm({ error, handleSubmit, tagName, itemId, shapeId }) {
20+
return (
21+
<form onSubmit={handleSubmit}>
22+
{error && <Typography color="error">{error}</Typography>}
23+
{tagName === undefined ? (
24+
<Field
25+
name="tagName"
26+
label="Tag Name"
27+
component={TextField}
28+
fullWidth
29+
required
30+
validate={[required]}
31+
/>
32+
) : null}
33+
{itemId === undefined ? (
34+
<Field
35+
name="itemId"
36+
label="Item ID"
37+
component={TextField}
38+
fullWidth
39+
required
40+
validate={[required]}
41+
/>
42+
) : null}
43+
{shapeId === undefined ? (
44+
<Field
45+
name="shapeId"
46+
label="Shape ID"
47+
component={TextField}
48+
fullWidth
49+
required
50+
validate={[required]}
51+
/>
52+
) : null}
53+
<FormSection name="queryParams" component={queryParams} />
54+
<button type="submit" hidden />
55+
</form>
56+
);
57+
}
58+
59+
export default reduxForm()(ShapeTagScriptTestParamsForm);

‎src/components/shapetag/ShapeTagTitle.jsx‎

Lines changed: 2 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,22 +1,13 @@
1-
import IconButton from '@material-ui/core/IconButton';
2-
import DeleteForever from '@material-ui/icons/DeleteForever';
3-
41
import TitleHeader from '../ui/TitleHeader';
52

6-
export default function ShapeTagTitle({ openCode, onRefresh, tagName, openRemove }) {
3+
export default function ShapeTagTitle({ tagName, ...props }) {
74
return (
85
<TitleHeader
96
title={tagName}
107
parentTitle="Shape Tag"
118
parentTo="/shape-tag/"
12-
openCode={openCode}
13-
onRefresh={onRefresh}
149
helpTo="/ref/shape-tag.html"
15-
actionComponent={
16-
<IconButton onClick={openRemove}>
17-
<DeleteForever />
18-
</IconButton>
19-
}
10+
{...props}
2011
/>
2112
);
2213
}

0 commit comments

Comments
 (0)