Skip to content

Commit

Permalink
The pipeline edit page was cleft in twain (metadata and structure).
Browse files Browse the repository at this point in the history
  • Loading branch information
krulis-martin committed Dec 30, 2021
1 parent ce36e76 commit 27d4f1d
Show file tree
Hide file tree
Showing 10 changed files with 178 additions and 64 deletions.
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@ const EditEnvironmentList = ({
{runtimeEnvironments
.sort((a, b) => a.longName.localeCompare(b.longName, locale))
.map(environment => (
<Col key={environment.id} xs={12} sm={6} md={fullWidth ? 4 : 6} lg={fullWidth ? 3 : 6}>
<Col key={environment.id} sm={12} md={fullWidth ? 6 : 12} lg={fullWidth ? 4 : 12} xl={fullWidth ? 3 : 6}>
<Field
name={`${namePrefix}${environment.id}`}
component={CheckboxField}
Expand Down
14 changes: 7 additions & 7 deletions src/components/forms/EditPipelineForm/EditPipelineForm.js
Original file line number Diff line number Diff line change
Expand Up @@ -90,7 +90,7 @@ class EditPipelineForm extends Component {
<hr className="mt-0" />

<Row>
<Col xl={4} lg={6} md={12}>
<Col xl={6} lg={12}>
<Field
name="parameters.isCompilationPipeline"
component={CheckboxField}
Expand All @@ -100,7 +100,7 @@ class EditPipelineForm extends Component {
}
/>
</Col>
<Col xl={4} lg={6} md={12}>
<Col xl={6} lg={12}>
<Field
name="parameters.isExecutionPipeline"
component={CheckboxField}
Expand All @@ -110,15 +110,15 @@ class EditPipelineForm extends Component {
}
/>
</Col>
<Col xl={4} lg={6} md={12}>
<Col xl={6} lg={12}>
<Field
name="parameters.judgeOnlyPipeline"
component={CheckboxField}
onOff
label={<FormattedMessage id="app.editPipelineForm.judgeOnlyPipeline" defaultMessage="Judge-Only" />}
/>
</Col>
<Col xl={4} lg={6} md={12}>
<Col xl={6} lg={12}>
<Field
name="parameters.producesStdout"
component={CheckboxField}
Expand All @@ -128,7 +128,7 @@ class EditPipelineForm extends Component {
}
/>
</Col>
<Col xl={4} lg={6} md={12}>
<Col xl={6} lg={12}>
<Field
name="parameters.producesFiles"
component={CheckboxField}
Expand All @@ -141,7 +141,7 @@ class EditPipelineForm extends Component {
}
/>
</Col>
<Col xl={4} lg={6} md={12}>
<Col xl={6} lg={12}>
<Field
name="parameters.hasEntryPoint"
component={CheckboxField}
Expand All @@ -151,7 +151,7 @@ class EditPipelineForm extends Component {
}
/>
</Col>
<Col xl={4} lg={6} md={12}>
<Col xl={6} lg={12}>
<Field
name="parameters.hasExtraFiles"
component={CheckboxField}
Expand Down
1 change: 1 addition & 0 deletions src/components/icons/index.js
Original file line number Diff line number Diff line change
Expand Up @@ -70,6 +70,7 @@ export const NoteIcon = props => <Icon {...props} icon={['far', 'sticky-note']}
export const ObserverIcon = props => <Icon {...props} icon="binoculars" />;
export const OutputIcon = props => <Icon {...props} icon="sign-out-alt" />;
export const PipelineIcon = props => <Icon {...props} icon="random" />;
export const PipelineStructureIcon = props => <Icon {...props} icon="sitemap" />;
export const PointsDecreasedIcon = props => <Icon icon="level-down-alt" className="text-muted" {...props} />;
export const PointsGraphIcon = props => <Icon icon={['far', 'chart-bar']} {...props} />;
export const PointsInterpolationIcon = props => (
Expand Down
9 changes: 7 additions & 2 deletions src/components/layout/Navigation/PipelineNavigation.js
Original file line number Diff line number Diff line change
Expand Up @@ -4,13 +4,13 @@ import { FormattedMessage } from 'react-intl';

import Navigation from './Navigation';
import withLinks from '../../../helpers/withLinks';
import { PipelineIcon, EditIcon } from '../../icons';
import { PipelineIcon, PipelineStructureIcon, EditIcon } from '../../icons';

const PipelineNavigation = ({
pipelineId,
canViewDetail = false,
canEdit = false,
links: { PIPELINE_URI_FACTORY, PIPELINE_EDIT_URI_FACTORY },
links: { PIPELINE_URI_FACTORY, PIPELINE_EDIT_URI_FACTORY, PIPELINE_EDIT_STRUCT_URI_FACTORY },
}) => (
<Navigation
pipelineId={pipelineId}
Expand All @@ -25,6 +25,11 @@ const PipelineNavigation = ({
link: PIPELINE_EDIT_URI_FACTORY(pipelineId),
icon: <EditIcon gapRight />,
},
canEdit && {
caption: <FormattedMessage id="app.navigation.pipelineStructure" defaultMessage="Structure" />,
link: PIPELINE_EDIT_STRUCT_URI_FACTORY(pipelineId),
icon: <PipelineStructureIcon gapRight />,
},
]}
/>
);
Expand Down
4 changes: 3 additions & 1 deletion src/locales/cs.json
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@
"app.editPipeline.deleteWarning": "Smazání pipeline rozbije všechny úlohy, které ji používají.",
"app.editPipeline.disclaimer": "Upozornění",
"app.editPipeline.disclaimerWarning": "Upravení pipeline může rozbít všechny úlohy, které pipeline používají!",
"app.editPipeline.title": "Změnit nastavení a obsah pipeline",
"app.editPipeline.title": "Změnit nastavení pipeline",
"app.editPipelineEnvironmentsForm.title": "Běhová prostředí pipeline",
"app.editPipelineForm.description": "Podrobnější popis (pro autory úloh):",
"app.editPipelineForm.global": "Globalní pipeline spojená s konkrétními běhovými prostředími",
Expand All @@ -495,6 +495,7 @@
"app.editPipelineForm.title": "Metadata pipeline",
"app.editPipelineForm.validation.description": "Prosíme vyplňte popis této pipeline.",
"app.editPipelineForm.validation.emptyName": "Prosíme vyplňte název této pipeline.",
"app.editPipelineStructure.title": "Upravit strukturu pipeline",
"app.editShadowAssignment.deleteAssignment": "Smazat stínovou úlohu",
"app.editShadowAssignment.deleteAssignmentWarning": "Smazání stínové úlohy rovněž odstraní body přidělené studentům.",
"app.editShadowAssignment.title": "Změnit nastavení stínové úlohy",
Expand Down Expand Up @@ -1074,6 +1075,7 @@
"app.navigation.groupAssignments": "Úlohy ve skupině",
"app.navigation.groupInfo": "Info skupiny",
"app.navigation.pipeline": "Pipeline",
"app.navigation.pipelineStructure": "Struktura",
"app.navigation.referenceSolution": "Referenční řešení",
"app.navigation.shadowAssignment": "Stínová úloha",
"app.navigation.solution": "Řešení",
Expand Down
4 changes: 3 additions & 1 deletion src/locales/en.json
Original file line number Diff line number Diff line change
Expand Up @@ -480,7 +480,7 @@
"app.editPipeline.deleteWarning": "Deleting an pipeline will break all exercises using the pipeline.",
"app.editPipeline.disclaimer": "Disclaimer",
"app.editPipeline.disclaimerWarning": "Modifying the pipeline might break all exercises using the pipeline!",
"app.editPipeline.title": "Change Pipeline Settings and Contents",
"app.editPipeline.title": "Update Pipeline Settings",
"app.editPipelineEnvironmentsForm.title": "Pipeline Runtime Environments",
"app.editPipelineForm.description": "Detailed description (for exercise authors):",
"app.editPipelineForm.global": "Global pipeline associated with particular runtime environments",
Expand All @@ -495,6 +495,7 @@
"app.editPipelineForm.title": "Pipeline Metadata",
"app.editPipelineForm.validation.description": "Please fill the description of the pipeline.",
"app.editPipelineForm.validation.emptyName": "Please fill the name of the pipeline.",
"app.editPipelineStructure.title": "Modify Pipeline Structure",
"app.editShadowAssignment.deleteAssignment": "Delete the shadow assignment",
"app.editShadowAssignment.deleteAssignmentWarning": "Deleting shadow assignment will remove all student points as well.",
"app.editShadowAssignment.title": "Change Shadow Assignment Settings",
Expand Down Expand Up @@ -1074,6 +1075,7 @@
"app.navigation.groupAssignments": "Group Assignments",
"app.navigation.groupInfo": "Group Info",
"app.navigation.pipeline": "Pipeline",
"app.navigation.pipelineStructure": "Structure",
"app.navigation.referenceSolution": "Reference Solution",
"app.navigation.shadowAssignment": "Shadow Assignment",
"app.navigation.solution": "Solution",
Expand Down
33 changes: 6 additions & 27 deletions src/pages/EditPipeline/EditPipeline.js
Original file line number Diff line number Diff line change
Expand Up @@ -14,9 +14,7 @@ import Callout from '../../components/widgets/Callout';
import EditPipelineForm from '../../components/forms/EditPipelineForm';
import EditPipelineEnvironmentsForm from '../../components/forms/EditPipelineEnvironmentsForm';
import { EditIcon } from '../../components/icons';
import PipelineFilesTableContainer from '../../containers/PipelineFilesTableContainer';
import DeletePipelineButtonContainer from '../../containers/DeletePipelineButtonContainer';
import PipelineEditContainer from '../../containers/PipelineEditContainer';
import ResourceRenderer from '../../components/helpers/ResourceRenderer';

import { fetchPipelineIfNeeded, editPipeline, setPipelineRuntimeEnvironments } from '../../redux/modules/pipelines';
Expand Down Expand Up @@ -113,7 +111,7 @@ class EditPipeline extends Component {
<Page
resource={pipeline}
icon={<EditIcon />}
title={<FormattedMessage id="app.editPipeline.title" defaultMessage="Change Pipeline Settings and Contents" />}>
title={<FormattedMessage id="app.editPipeline.title" defaultMessage="Update Pipeline Settings" />}>
{pipeline => (
<>
<PipelineNavigation
Expand All @@ -139,25 +137,12 @@ class EditPipeline extends Component {
</Row>

<Row>
<Col lg={12}>
<Row>
<Col lg={12}>
<EditPipelineForm
initialValues={perpareInitialPipelineData(pipeline)}
onSubmit={this.savePipeline}
isSuperadmin={isSuperadmin}
/>
</Col>
</Row>
</Col>
<Col lg={6}>
<div />
</Col>
</Row>

<Row>
<Col lg={6}>
<PipelineFilesTableContainer pipeline={pipeline} />
<EditPipelineForm
initialValues={perpareInitialPipelineData(pipeline)}
onSubmit={this.savePipeline}
isSuperadmin={isSuperadmin}
/>
</Col>
<Col lg={6}>
{isSuperadmin && (
Expand All @@ -174,12 +159,6 @@ class EditPipeline extends Component {
</Col>
</Row>

<Row>
<Col lg={12}>
<PipelineEditContainer pipeline={pipeline} />
</Col>
</Row>

<Row>
<Col lg={12}>
<Box
Expand Down
121 changes: 121 additions & 0 deletions src/pages/EditPipelineStructure/EditPipelineStructure.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,121 @@
import React, { Component } from 'react';
import PropTypes from 'prop-types';
import ImmutablePropTypes from 'react-immutable-proptypes';
import { FormattedMessage } from 'react-intl';
import { Row, Col } from 'react-bootstrap';
import { connect } from 'react-redux';

import Page from '../../components/layout/Page';
import { PipelineNavigation } from '../../components/layout/Navigation';
import Callout from '../../components/widgets/Callout';
import { PipelineStructureIcon } from '../../components/icons';
import PipelineFilesTableContainer from '../../containers/PipelineFilesTableContainer';
import PipelineEditContainer from '../../containers/PipelineEditContainer';

import { fetchPipelineIfNeeded } from '../../redux/modules/pipelines';
import { fetchBoxTypes } from '../../redux/modules/boxes';
import { fetchRuntimeEnvironments } from '../../redux/modules/runtimeEnvironments';
import { getPipeline } from '../../redux/selectors/pipelines';

import { hasPermissions } from '../../helpers/common';

class EditPipeline extends Component {
componentDidMount = () => this.props.loadAsync();

componentDidUpdate(prevProps) {
if (this.props.match.params.pipelineId !== prevProps.match.params.pipelineId) {
this.props.loadAsync();
}
}

static loadAsync = ({ pipelineId }, dispatch) =>
Promise.all([
dispatch(fetchPipelineIfNeeded(pipelineId)),
dispatch(fetchRuntimeEnvironments()),
dispatch(fetchBoxTypes()),
]);

render() {
const { pipeline } = this.props;

return (
<Page
resource={pipeline}
icon={<PipelineStructureIcon />}
title={<FormattedMessage id="app.editPipelineStructure.title" defaultMessage="Modify Pipeline Structure" />}>
{pipeline => (
<>
<PipelineNavigation
pipelineId={pipeline.id}
canViewDetail={hasPermissions(pipeline, 'viewDetail')}
canEdit={hasPermissions(pipeline, 'update')}
/>

<Row>
<Col lg={12}>
<Callout variant="warning">
<h4>
<FormattedMessage id="app.editPipeline.disclaimer" defaultMessage="Disclaimer" />
</h4>
<p>
<FormattedMessage
id="app.editPipeline.disclaimerWarning"
defaultMessage="Modifying the pipeline might break all exercises using the pipeline!"
/>
</p>
</Callout>
</Col>
</Row>

<Row>
<Col lg={12}>
<PipelineEditContainer pipeline={pipeline} />
</Col>
</Row>

<Row>
<Col xl={6}>
<PipelineFilesTableContainer pipeline={pipeline} />
</Col>
</Row>
</>
)}
</Page>
);
}
}

EditPipeline.propTypes = {
pipeline: ImmutablePropTypes.map,
loadAsync: PropTypes.func.isRequired,
match: PropTypes.shape({
params: PropTypes.shape({
pipelineId: PropTypes.string.isRequired,
}).isRequired,
}).isRequired,
};

export default connect(
(
state,
{
match: {
params: { pipelineId },
},
}
) => {
return {
pipeline: getPipeline(pipelineId)(state),
};
},
(
dispatch,
{
match: {
params: { pipelineId },
},
}
) => ({
loadAsync: () => EditPipeline.loadAsync({ pipelineId }, dispatch),
})
)(EditPipeline);
2 changes: 2 additions & 0 deletions src/pages/EditPipelineStructure/index.js
Original file line number Diff line number Diff line change
@@ -0,0 +1,2 @@
import EditPipelineStructure from './EditPipelineStructure';
export default EditPipelineStructure;
Loading

0 comments on commit 27d4f1d

Please sign in to comment.