Skip to content

Commit

Permalink
fix(core/pipeline): standardize manual execution field layouts (#7413)
Browse files Browse the repository at this point in the history
  • Loading branch information
Erik Munson committed Sep 20, 2019
1 parent 9c0a994 commit bce3ac5
Show file tree
Hide file tree
Showing 6 changed files with 131 additions and 137 deletions.
18 changes: 8 additions & 10 deletions app/scripts/modules/core/src/pipeline/config/stages/bake/ManualExecutionBake.tsx
View file
@@ -1,6 +1,7 @@
import * as React from 'react';
import { get } from 'lodash';

import { FormField, CheckboxInput } from 'core/presentation';
import { HelpField } from 'core/help/HelpField';
import { ITriggerTemplateComponentProps } from 'core/pipeline/manualExecution/TriggerTemplate';

Expand All @@ -16,16 +17,13 @@ export class ManualExecutionBake extends React.Component<ITriggerTemplateCompone
const force = get(this.props.command, 'trigger.rebake', false);

return (
<div className="form-group">
<label className="col-md-4 sm-label-right">Rebake</label>
<div className="checkbox col-md-6">
<label>
<input type="checkbox" checked={force} onChange={this.handleChange} />
Force Rebake
</label>{' '}
<HelpField id="execution.forceRebake" />
</div>
</div>
<FormField
label="Rebake"
onChange={this.handleChange}
value={force}
help={<HelpField id="execution.forceRebake" />}
input={props => <CheckboxInput {...props} text="Force Rebake" />}
/>
);
}
}
22 changes: 9 additions & 13 deletions app/scripts/modules/core/src/pipeline/manualExecution/DryRun.tsx
View file
Expand Up @@ -2,16 +2,12 @@ import * as React from 'react';
import { CheckboxInput, FormikFormField } from 'core/presentation';
import { HelpField } from 'core/help';

export class DryRun extends React.Component {
public render() {
return (
<FormikFormField
name="dryRun"
label={'Dry run'}
fastField={false}
help={<HelpField id={'execution.dryRun'} />}
input={props => <CheckboxInput {...props} text={'Run a test execution'} />}
/>
);
}
}
export const DryRun = () => (
<FormikFormField
name="dryRun"
label="Dry run"
fastField={false}
help={<HelpField id="execution.dryRun" />}
input={props => <CheckboxInput {...props} text="Run a test execution" />}
/>
);
142 changes: 76 additions & 66 deletions app/scripts/modules/core/src/pipeline/manualExecution/ManualPipelineExecutionModal.tsx
View file
Expand Up @@ -8,7 +8,14 @@ import { assign, clone, compact, extend, get, head, uniq, isArray, pickBy } from
import { SubmitButton, ModalClose } from 'core/modal';
import { Application } from 'core/application';
import { AuthenticationService } from 'core/authentication';
import { buildValidators, IModalComponentProps, ReactModal, SpinFormik, Markdown } from 'core/presentation';
import {
buildValidators,
IModalComponentProps,
ReactModal,
SpinFormik,
Markdown,
LayoutProvider,
} from 'core/presentation';
import {
IExecution,
IExecutionTrigger,
Expand All @@ -25,6 +32,7 @@ import { Registry } from 'core/registry';
import { SETTINGS } from 'core/config/settings';
import { UrlParser } from 'core/navigation/urlParser';

import { ManualExecutionFieldLayout } from './layout/ManualExecutionFieldLayout';
import { PipelineOptions } from './PipelineOptions';
import { CurrentlyRunningExecutions } from './CurrentlyRunningExecutions';
import { StageManualComponents } from './StageManualComponents';
Expand Down Expand Up @@ -340,74 +348,76 @@ export class ManualExecutionModal extends React.Component<IManualExecutionModalP
<Modal.Title>{modalHeader}</Modal.Title>
</Modal.Header>
<Modal.Body>
<div className="container-fluid modal-body-content">
{pipelineOptions.length > 0 && (
<PipelineOptions
formik={formik}
formatPipeline={this.formatPipeline}
formatTriggers={this.formatTriggers}
formatParameterConfig={this.formatParameterConfig}
pipelineOptions={pipelineOptions}
pipelineChanged={this.pipelineChanged}
triggerChanged={this.triggerChanged}
updateTriggerOptions={this.updateTriggerOptions}
/>
)}
{formik.values.pipeline && (
<div className="form-group">
<div className="col-md-10">
<p>
This will start a new run of <strong>{formik.values.pipeline.name}</strong>.
</p>
<LayoutProvider value={ManualExecutionFieldLayout}>
<div className="container-fluid modal-body-content">
{pipelineOptions.length > 0 && (
<PipelineOptions
formik={formik}
formatPipeline={this.formatPipeline}
formatTriggers={this.formatTriggers}
formatParameterConfig={this.formatParameterConfig}
pipelineOptions={pipelineOptions}
pipelineChanged={this.pipelineChanged}
triggerChanged={this.triggerChanged}
updateTriggerOptions={this.updateTriggerOptions}
/>
)}
{formik.values.pipeline && (
<div className="form-group">
<div className="col-md-6 col-md-offset-4">
<p>
This will start a new run of <strong>{formik.values.pipeline.name}</strong>.
</p>
</div>
</div>
</div>
)}
{currentPipelineExecutions.length > 0 && (
<CurrentlyRunningExecutions currentlyRunningExecutions={currentPipelineExecutions} />
)}
{pipeline && pipeline.manualStartAlert && (
<Markdown
className={`alert alert-${
['danger', 'warning', 'info'].includes(pipeline.manualStartAlert.type)
? pipeline.manualStartAlert.type
: 'warning'
}`}
message={pipeline.manualStartAlert.message}
/>
)}
{triggers && triggers.length > 0 && (
<Triggers
formik={formik}
triggers={triggers}
triggerChanged={this.triggerChanged}
triggerComponent={triggerComponent}
/>
)}
{formik.values.pipeline &&
formik.values.pipeline.parameterConfig &&
formik.values.pipeline.parameterConfig.length > 0 && (
<Parameters formik={formik} parameters={formik.values.pipeline.parameterConfig} />
)}
{stageComponents.length > 0 && (
<StageManualComponents
command={formik.values}
components={stageComponents}
updateCommand={(path: string, value: any) => {
formik.setFieldValue(path, value);
}}
/>
)}
{formik.values.trigger && formik.values.trigger.artifacts && (
<div className="form-group">
<label className="col-md-4 sm-label-right">Artifacts</label>
<div className="col-md-8">
<ArtifactList artifacts={formik.values.trigger.artifacts} />
{currentPipelineExecutions.length > 0 && (
<CurrentlyRunningExecutions currentlyRunningExecutions={currentPipelineExecutions} />
)}
{pipeline && pipeline.manualStartAlert && (
<Markdown
className={`alert alert-${
['danger', 'warning', 'info'].includes(pipeline.manualStartAlert.type)
? pipeline.manualStartAlert.type
: 'warning'
}`}
message={pipeline.manualStartAlert.message}
/>
)}
{triggers && triggers.length > 0 && (
<Triggers
formik={formik}
triggers={triggers}
triggerChanged={this.triggerChanged}
triggerComponent={triggerComponent}
/>
)}
{formik.values.pipeline &&
formik.values.pipeline.parameterConfig &&
formik.values.pipeline.parameterConfig.length > 0 && (
<Parameters formik={formik} parameters={formik.values.pipeline.parameterConfig} />
)}
{stageComponents.length > 0 && (
<StageManualComponents
command={formik.values}
components={stageComponents}
updateCommand={(path: string, value: any) => {
formik.setFieldValue(path, value);
}}
/>
)}
{formik.values.trigger && formik.values.trigger.artifacts && (
<div className="form-group">
<label className="col-md-4 sm-label-right">Artifacts</label>
<div className="col-md-8">
<ArtifactList artifacts={formik.values.trigger.artifacts} />
</div>
</div>
</div>
)}
{dryRunEnabled && <DryRun />}
<NotificationDetails formik={formik} notifications={notifications} />
</div>
)}
{dryRunEnabled && <DryRun />}
<NotificationDetails formik={formik} notifications={notifications} />
</div>
</LayoutProvider>
</Modal.Body>
<Modal.Footer>
<button className="btn btn-default" onClick={dismissModal} type="button">
Expand Down
32 changes: 12 additions & 20 deletions app/scripts/modules/core/src/pipeline/manualExecution/NotificationDetails.tsx
View file
Expand Up @@ -3,12 +3,10 @@ import { FormikProps } from 'formik';
import { Option } from 'react-select';

import { INotification, INotificationTypeConfig, IPipelineCommand } from 'core/domain';
import { CheckboxInput, FormikFormField, HoverablePopover, LayoutProvider } from 'core/presentation';
import { CheckboxInput, FormikFormField, HoverablePopover } from 'core/presentation';
import { Registry } from 'core/registry';
import { NotificationSelector, NotificationTransformer } from 'core/notification';

import { ManualExecutionFieldLayout } from './layout/ManualExecutionFieldLayout';

export interface INotificationDetailsProps {
formik: FormikProps<IPipelineCommand>;
notifications: INotification[];
Expand Down Expand Up @@ -65,16 +63,12 @@ export class NotificationDetails extends React.Component<INotificationDetailsPro
const { values } = formik;
return (
<>
<div className={'form-group'}>
<label className={'col-md-4 sm-label-right'}>Notifications</label>
<div className="col-md-6">
<FormikFormField
name="notificationEnabled"
fastField={false}
input={props => <CheckboxInput {...props} text={'Notify me when the pipeline completes'} />}
/>
</div>
</div>
<FormikFormField
name="notificationEnabled"
label="Notifications"
fastField={false}
input={props => <CheckboxInput {...props} text={'Notify me when the pipeline completes'} />}
/>
<div className="form-group">
{notifications.length === 1 && (
<div className="col-md-offset-4 col-md-6">
Expand All @@ -96,13 +90,11 @@ export class NotificationDetails extends React.Component<INotificationDetailsPro
)}
</div>
{values.notificationEnabled && (
<LayoutProvider value={ManualExecutionFieldLayout}>
<NotificationSelector
onNotificationTypeChange={onNotificationTypeChange}
fieldName={'notification'}
type={values.notification.type}
/>
</LayoutProvider>
<NotificationSelector
onNotificationTypeChange={onNotificationTypeChange}
fieldName={'notification'}
type={values.notification.type}
/>
)}
</>
);
Expand Down
10 changes: 5 additions & 5 deletions app/scripts/modules/core/src/pipeline/manualExecution/PipelineOptions.tsx
View file
@@ -1,12 +1,12 @@
import * as React from 'react';
import { Observable, Subject } from 'rxjs';
import Select, { Option } from 'react-select';
import { Option } from 'react-select';
import { FormikProps } from 'formik';
import { head } from 'lodash';

import { IParameter, IPipeline, IPipelineCommand, ITrigger } from 'core/domain';
import { IPipelineTemplateConfig, PipelineTemplateReader, PipelineTemplateV2Service } from 'core/pipeline';
import { FormField } from 'core/presentation';
import { FormField, TetheredSelect } from 'core/presentation';

export interface IPipelineOptionsProps {
formatParameterConfig: (p: IParameter[]) => { [key: string]: any };
Expand Down Expand Up @@ -106,14 +106,14 @@ export class PipelineOptions extends React.Component<IPipelineOptionsProps, IPip
return (
<div className="form-group row">
<FormField
label={'Pipeline'}
label="Pipeline"
onChange={this.pipelineSelected}
value={formik.values.pipeline ? formik.values.pipeline.id : ''}
input={props => (
<Select
<TetheredSelect
{...props}
clearable={false}
className={'pipeline-select'}
className="pipeline-select"
options={pipelineOptions.map(p => ({
label: p.name,
value: p.id,
Expand Down
44 changes: 21 additions & 23 deletions app/scripts/modules/core/src/pipeline/manualExecution/Triggers.tsx
View file
Expand Up @@ -63,29 +63,27 @@ export class Triggers extends React.Component<ITriggersProps> {
const { formik, triggerComponent, triggers } = this.props;
return (
<div className="form-group row">
<div className={'form-group'}>
<label className={'col-md-4 sm-label-right'}>Trigger</label>
<div className="col-md-6">
{triggers.length > 1 && (
<FormField
onChange={this.triggerSelected}
value={formik.values.trigger ? formik.values.trigger.description : ''}
input={props => (
<Select
{...props}
className={'trigger-select'}
clearable={false}
options={triggers.map(t => ({
label: t.description,
value: t.description,
}))}
/>
)}
/>
)}
{triggers.length === 1 && <p className="form-control-static">{head(triggers).description}</p>}
</div>
</div>
<FormField
label="Trigger"
onChange={this.triggerSelected}
value={formik.values.trigger ? formik.values.trigger.description : ''}
input={props => (
<>
{triggers.length > 1 && (
<Select
{...props}
className="trigger-select"
clearable={false}
options={triggers.map(t => ({
label: t.description,
value: t.description,
}))}
/>
)}
{triggers.length === 1 && <p className="form-control-static">{head(triggers).description}</p>}
</>
)}
/>

{triggerComponent && (
<div className={'trigger-template'}>
Expand Down

0 comments on commit bce3ac5

Please sign in to comment.