SET_CURRENT_STEP: ofType<number>(),
SET_WORKFLOWS: ofType<WorkflowResource[]>(),
SET_SELECTED_WORKFLOW: ofType<WorkflowResource>(),
+ SEARCH_WORKFLOWS: ofType<string>()
});
export interface RunProcessSecondStepDataFormProps {
dispatch(runProcessPanelActions.SET_SELECTED_WORKFLOW(workflow));
};
-export const goToStep = (step: number) => runProcessPanelActions.SET_CURRENT_STEP(step);
\ No newline at end of file
+export const goToStep = (step: number) => runProcessPanelActions.SET_CURRENT_STEP(step);
+
+export const searchWorkflows = (term: string) => runProcessPanelActions.SEARCH_WORKFLOWS(term);
\ No newline at end of file
interface RunProcessPanel {
currentStep: number;
workflows: WorkflowResource[];
+ searchWorkflows: WorkflowResource[];
selectedWorkflow: WorkflowResource | undefined;
}
const initialState: RunProcessPanel = {
currentStep: 0,
workflows: [],
+ searchWorkflows: [],
selectedWorkflow: undefined
};
export const runProcessPanelReducer = (state = initialState, action: RunProcessPanelAction): RunProcessPanel =>
runProcessPanelActions.match(action, {
SET_CURRENT_STEP: currentStep => ({ ...state, currentStep }),
- SET_WORKFLOWS: workflows => ({ ...state, workflows }),
+ SET_WORKFLOWS: workflows => ({ ...state, workflows, searchWorkflows: workflows }),
SET_SELECTED_WORKFLOW: selectedWorkflow => ({ ...state, selectedWorkflow }),
+ SEARCH_WORKFLOWS: term => ({ ...state, searchWorkflows: state.workflows.filter(workflow => workflow.name.includes(term)) }),
default: () => state
});
\ No newline at end of file
import { WorkflowResource } from '~/models/workflow';
import { WorkflowIcon } from '~/components/icon/icon';
import { WorkflowDetailsCard } from '../workflow-panel/workflow-description-card';
+import { SearchInput } from '~/components/search-input/search-input';
-type CssRules = 'rightGrid' | 'list' | 'listItem' | 'itemSelected' | 'listItemText' | 'listItemIcon';
+type CssRules = 'root' | 'searchGrid' | 'workflowDetailsGrid' | 'list' | 'listItem' | 'itemSelected' | 'listItemText' | 'listItemIcon';
const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
- rightGrid: {
+ root: {
+ alignSelf: 'flex-start'
+ },
+ searchGrid: {
+ marginBottom: theme.spacing.unit * 2
+ },
+ workflowDetailsGrid: {
borderLeft: `1px solid ${theme.palette.grey["300"]}`
},
list: {
}
export interface RunProcessFirstStepActionProps {
+ onSearch: (term: string) => void;
onSetStep: (step: number) => void;
onSetWorkflow: (workflow: WorkflowResource) => void;
}
type RunProcessFirstStepProps = RunProcessFirstStepDataProps & RunProcessFirstStepActionProps & WithStyles<CssRules>;
export const RunProcessFirstStep = withStyles(styles)(
- ({ onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: RunProcessFirstStepProps) =>
+ ({ onSearch, onSetStep, onSetWorkflow, workflows, selectedWorkflow, classes }: RunProcessFirstStepProps) =>
<Grid container spacing={16}>
- <Grid container item xs={6}>
- <Grid item xs={12}>
- {/* TODO: add filters */}
+ <Grid container item xs={6} className={classes.root}>
+ <Grid item xs={12} className={classes.searchGrid}>
+ <SearchInput value='' onSearch={onSearch} />
</Grid>
<Grid item xs={12}>
<List className={classes.list}>
</List>
</Grid>
</Grid>
- <Grid item xs={6} className={classes.rightGrid}>
+ <Grid item xs={6} className={classes.workflowDetailsGrid}>
<WorkflowDetailsCard workflow={selectedWorkflow}/>
</Grid>
<Grid item xs={12}>
type RunProcessPanelRootProps = RunProcessPanelRootDataProps & RunProcessPanelRootActionProps;
-export const RunProcessPanelRoot = ({ currentStep, onSetStep, onRunProcess, onSetWorkflow, workflows, selectedWorkflow }: RunProcessPanelRootProps) =>
+export const RunProcessPanelRoot = ({ currentStep, onSearch, onSetStep, onRunProcess, onSetWorkflow, workflows, selectedWorkflow }: RunProcessPanelRootProps) =>
<Stepper activeStep={currentStep} orientation="vertical" elevation={2}>
<Step>
<StepLabel>Choose a workflow</StepLabel>
<RunProcessFirstStep
workflows={workflows}
selectedWorkflow={selectedWorkflow}
+ onSearch={onSearch}
onSetStep={onSetStep}
onSetWorkflow={onSetWorkflow} />
</StepContent>
import { connect } from 'react-redux';
import { RootState } from '~/store/store';
import { RunProcessPanelRootDataProps, RunProcessPanelRootActionProps, RunProcessPanelRoot } from '~/views/run-process-panel/run-process-panel-root';
-import { goToStep, setWorkflow } from '~/store/run-process-panel/run-process-panel-actions';
+import { goToStep, setWorkflow, searchWorkflows } from '~/store/run-process-panel/run-process-panel-actions';
import { WorkflowResource } from '~/models/workflow';
const mapStateToProps = ({ runProcessPanel }: RootState): RunProcessPanelRootDataProps => {
return {
- workflows: runProcessPanel.workflows,
+ workflows: runProcessPanel.searchWorkflows,
currentStep: runProcessPanel.currentStep,
selectedWorkflow: runProcessPanel.selectedWorkflow
};
},
onRunProcess: () => {
+ },
+ onSearch: (term: string) => {
+ dispatch<any>(searchWorkflows(term));
}
});