Update function/callback props passed into workflow components to start with "on"

This commit is contained in:
mabashian 2020-01-22 11:16:42 -05:00
parent 01cc0ac8f1
commit 3d5c32c354
12 changed files with 99 additions and 94 deletions

View File

@ -6,7 +6,7 @@ const TooltipContents = styled.div`
display: flex;
`;
const TooltipArrows = styled.div`
const TooltipArrow = styled.div`
width: 10px;
`;
@ -50,10 +50,10 @@ function WorkflowActionTooltip({ actions, pointX, pointY }) {
height={tipHeight}
>
<TooltipContents>
<TooltipArrows>
<TooltipArrow>
<TooltipArrowOuter />
<TooltipArrowInner />
</TooltipArrows>
</TooltipArrow>
<TooltipActions>{actions}</TooltipActions>
</TooltipContents>
</foreignObject>

View File

@ -131,7 +131,7 @@ function NodeModal({
name: i18n._(t`Run Type`),
key: 'run_type',
component: (
<RunStep linkType={linkType} updateLinkType={setLinkType} />
<RunStep linkType={linkType} onUpdateLinkType={setLinkType} />
),
enableNext: linkType !== null,
},
@ -149,12 +149,12 @@ function NodeModal({
name={approvalName}
nodeResource={nodeResource}
nodeType={nodeType}
onUpdateDescription={setApprovalDescription}
onUpdateName={setApprovalName}
onUpdateNodeResource={setNodeResource}
onUpdateNodeType={handleNodeTypeChange}
onUpdateTimeout={setApprovalTimeout}
timeout={approvalTimeout}
updateDescription={setApprovalDescription}
updateName={setApprovalName}
updateNodeResource={setNodeResource}
updateNodeType={handleNodeTypeChange}
updateTimeout={setApprovalTimeout}
/>
),
},

View File

@ -19,7 +19,7 @@ function InventorySourcesList({
history,
i18n,
nodeResource,
updateNodeResource,
onUpdateNodeResource,
}) {
const [count, setCount] = useState(0);
const [error, setError] = useState(null);
@ -50,7 +50,7 @@ function InventorySourcesList({
hasContentLoading={isLoading}
itemCount={count}
items={inventorySources}
onRowClick={row => updateNodeResource(row)}
onRowClick={row => onUpdateNodeResource(row)}
qsConfig={QS_CONFIG}
showPageSizeOptions={false}
renderItem={item => (
@ -60,8 +60,8 @@ function InventorySourcesList({
key={item.id}
name={item.name}
label={item.name}
onSelect={() => updateNodeResource(item)}
onDeselect={() => updateNodeResource(null)}
onSelect={() => onUpdateNodeResource(item)}
onDeselect={() => onUpdateNodeResource(null)}
isRadio
/>
)}
@ -80,7 +80,7 @@ function InventorySourcesList({
InventorySourcesList.propTypes = {
nodeResource: shape(),
updateNodeResource: func.isRequired,
onUpdateNodeResource: func.isRequired,
};
InventorySourcesList.defaultProps = {

View File

@ -15,7 +15,12 @@ const QS_CONFIG = getQSConfig('job_templates', {
order_by: 'name',
});
function JobTemplatesList({ i18n, history, nodeResource, updateNodeResource }) {
function JobTemplatesList({
i18n,
history,
nodeResource,
onUpdateNodeResource,
}) {
const [count, setCount] = useState(0);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
@ -47,7 +52,7 @@ function JobTemplatesList({ i18n, history, nodeResource, updateNodeResource }) {
hasContentLoading={isLoading}
itemCount={count}
items={jobTemplates}
onRowClick={row => updateNodeResource(row)}
onRowClick={row => onUpdateNodeResource(row)}
qsConfig={QS_CONFIG}
renderItem={item => (
<CheckboxListItem
@ -56,8 +61,8 @@ function JobTemplatesList({ i18n, history, nodeResource, updateNodeResource }) {
key={item.id}
name={item.name}
label={item.name}
onSelect={() => updateNodeResource(item)}
onDeselect={() => updateNodeResource(null)}
onSelect={() => onUpdateNodeResource(item)}
onDeselect={() => onUpdateNodeResource(null)}
isRadio
/>
)}
@ -77,7 +82,7 @@ function JobTemplatesList({ i18n, history, nodeResource, updateNodeResource }) {
JobTemplatesList.propTypes = {
nodeResource: shape(),
updateNodeResource: func.isRequired,
onUpdateNodeResource: func.isRequired,
};
JobTemplatesList.defaultProps = {

View File

@ -38,11 +38,11 @@ function NodeTypeStep({
nodeResource,
nodeType,
timeout,
updateDescription,
updateName,
updateNodeResource,
updateNodeType,
updateTimeout,
onUpdateDescription,
onUpdateName,
onUpdateNodeResource,
onUpdateNodeType,
onUpdateTimeout,
}) {
return (
<>
@ -87,7 +87,7 @@ function NodeTypeStep({
]}
value={nodeType}
onChange={(e, val) => {
updateNodeType(val);
onUpdateNodeType(val);
}}
/>
</div>
@ -96,25 +96,25 @@ function NodeTypeStep({
{nodeType === 'job_template' && (
<JobTemplatesList
nodeResource={nodeResource}
updateNodeResource={updateNodeResource}
onUpdateNodeResource={onUpdateNodeResource}
/>
)}
{nodeType === 'project_sync' && (
<ProjectsList
nodeResource={nodeResource}
updateNodeResource={updateNodeResource}
onUpdateNodeResource={onUpdateNodeResource}
/>
)}
{nodeType === 'inventory_source_sync' && (
<InventorySourcesList
nodeResource={nodeResource}
updateNodeResource={updateNodeResource}
onUpdateNodeResource={onUpdateNodeResource}
/>
)}
{nodeType === 'workflow_job_template' && (
<WorkflowJobTemplatesList
nodeResource={nodeResource}
updateNodeResource={updateNodeResource}
onUpdateNodeResource={onUpdateNodeResource}
/>
)}
{nodeType === 'approval' && (
@ -150,7 +150,7 @@ function NodeTypeStep({
type="text"
{...field}
onChange={(value, evt) => {
updateName(value);
onUpdateName(value);
field.onChange(evt);
}}
/>
@ -172,7 +172,7 @@ function NodeTypeStep({
type="text"
{...field}
onChange={(value, evt) => {
updateDescription(value);
onUpdateDescription(value);
field.onChange(evt);
}}
/>
@ -200,7 +200,7 @@ function NodeTypeStep({
if (!value || value === '') {
value = 0;
}
updateTimeout(
onUpdateTimeout(
Number(value) * 60 +
Number(form.values.timeoutSeconds)
);
@ -225,7 +225,7 @@ function NodeTypeStep({
if (!value || value === '') {
value = 0;
}
updateTimeout(
onUpdateTimeout(
Number(value) +
Number(form.values.timeoutMinutes) * 60
);
@ -253,11 +253,11 @@ NodeTypeStep.propTypes = {
nodeResource: shape(),
nodeType: string,
timeout: number,
updateDescription: func.isRequired,
updateName: func.isRequired,
updateNodeResource: func.isRequired,
updateNodeType: func.isRequired,
updateTimeout: func.isRequired,
onUpdateDescription: func.isRequired,
onUpdateName: func.isRequired,
onUpdateNodeResource: func.isRequired,
onUpdateNodeType: func.isRequired,
onUpdateTimeout: func.isRequired,
};
NodeTypeStep.defaultProps = {

View File

@ -15,7 +15,7 @@ const QS_CONFIG = getQSConfig('projects', {
order_by: 'name',
});
function ProjectsList({ history, i18n, nodeResource, updateNodeResource }) {
function ProjectsList({ history, i18n, nodeResource, onUpdateNodeResource }) {
const [count, setCount] = useState(0);
const [error, setError] = useState(null);
const [isLoading, setIsLoading] = useState(true);
@ -45,7 +45,7 @@ function ProjectsList({ history, i18n, nodeResource, updateNodeResource }) {
hasContentLoading={isLoading}
itemCount={count}
items={projects}
onRowClick={row => updateNodeResource(row)}
onRowClick={row => onUpdateNodeResource(row)}
qsConfig={QS_CONFIG}
renderItem={item => (
<CheckboxListItem
@ -54,8 +54,8 @@ function ProjectsList({ history, i18n, nodeResource, updateNodeResource }) {
key={item.id}
name={item.name}
label={item.name}
onSelect={() => updateNodeResource(item)}
onDeselect={() => updateNodeResource(null)}
onSelect={() => onUpdateNodeResource(item)}
onDeselect={() => onUpdateNodeResource(null)}
isRadio
/>
)}
@ -75,7 +75,7 @@ function ProjectsList({ history, i18n, nodeResource, updateNodeResource }) {
ProjectsList.propTypes = {
nodeResource: shape(),
updateNodeResource: func.isRequired,
onUpdateNodeResource: func.isRequired,
};
ProjectsList.defaultProps = {

View File

@ -19,7 +19,7 @@ function WorkflowJobTemplatesList({
history,
i18n,
nodeResource,
updateNodeResource,
onUpdateNodeResource,
}) {
const [count, setCount] = useState(0);
const [error, setError] = useState(null);
@ -52,7 +52,7 @@ function WorkflowJobTemplatesList({
hasContentLoading={isLoading}
itemCount={count}
items={workflowJobTemplates}
onRowClick={row => updateNodeResource(row)}
onRowClick={row => onUpdateNodeResource(row)}
qsConfig={QS_CONFIG}
renderItem={item => (
<CheckboxListItem
@ -61,8 +61,8 @@ function WorkflowJobTemplatesList({
key={item.id}
name={item.name}
label={item.name}
onSelect={() => updateNodeResource(item)}
onDeselect={() => updateNodeResource(null)}
onSelect={() => onUpdateNodeResource(item)}
onDeselect={() => onUpdateNodeResource(null)}
isRadio
/>
)}
@ -82,7 +82,7 @@ function WorkflowJobTemplatesList({
WorkflowJobTemplatesList.propTypes = {
nodeResource: shape(),
updateNodeResource: func.isRequired,
onUpdateNodeResource: func.isRequired,
};
WorkflowJobTemplatesList.defaultProps = {

View File

@ -16,7 +16,7 @@ const Grid = styled.div`
width: 100%;
`;
function RunStep({ i18n, linkType, updateLinkType }) {
function RunStep({ i18n, linkType, onUpdateLinkType }) {
return (
<>
<Title headingLevel="h1" size="xl">
@ -34,7 +34,7 @@ function RunStep({ i18n, linkType, updateLinkType }) {
description={i18n._(
t`Execute when the parent node results in a successful state.`
)}
onClick={() => updateLinkType('success')}
onClick={() => onUpdateLinkType('success')}
/>
<SelectableCard
isSelected={linkType === 'failure'}
@ -42,7 +42,7 @@ function RunStep({ i18n, linkType, updateLinkType }) {
description={i18n._(
t`Execute when the parent node results in a failure state.`
)}
onClick={() => updateLinkType('failure')}
onClick={() => onUpdateLinkType('failure')}
/>
<SelectableCard
isSelected={linkType === 'always'}
@ -50,7 +50,7 @@ function RunStep({ i18n, linkType, updateLinkType }) {
description={i18n._(
t`Execute regardless of the parent node's final state.`
)}
onClick={() => updateLinkType('always')}
onClick={() => onUpdateLinkType('always')}
/>
</Grid>
</>
@ -59,7 +59,7 @@ function RunStep({ i18n, linkType, updateLinkType }) {
RunStep.propTypes = {
linkType: string.isRequired,
updateLinkType: func.isRequired,
onUpdateLinkType: func.isRequired,
};
export default withI18n()(RunStep);

View File

@ -262,7 +262,7 @@ function VisualizerGraph({
nodePositions={nodePositions}
onAddNodeClick={onAddNodeClick}
readOnly={readOnly}
updateHelpText={setHelpText}
onUpdateHelpText={setHelpText}
/>,
links.map(link => {
if (
@ -279,8 +279,8 @@ function VisualizerGraph({
onDeleteLinkClick={onDeleteLinkClick}
onLinkEditClick={onLinkEditClick}
readOnly={readOnly}
updateHelpText={setHelpText}
updateLinkHelp={setLinkHelp}
onUpdateHelpText={setHelpText}
onUpdateLinkHelp={setLinkHelp}
/>
);
}
@ -304,7 +304,7 @@ function VisualizerGraph({
onStartAddLinkClick={onStartAddLinkClick}
onViewNodeClick={onViewNodeClick}
readOnly={readOnly}
updateHelpText={setHelpText}
onUpdateHelpText={setHelpText}
updateNodeHelp={setNodeHelp}
{...(addingLink && {
onMouseOver: () => drawPotentialLinkToNode(node),

View File

@ -26,9 +26,9 @@ function VisualizerLink({
onAddNodeClick,
onDeleteLinkClick,
onLinkEditClick,
onUpdateHelpText,
onUpdateLinkHelp,
readOnly,
updateHelpText,
updateLinkHelp,
}) {
const [hovering, setHovering] = useState(false);
const [pathD, setPathD] = useState();
@ -41,14 +41,14 @@ function VisualizerLink({
id="link-add-node"
key="add"
onClick={() => {
updateHelpText(null);
onUpdateHelpText(null);
setHovering(false);
onAddNodeClick(link.source.id, link.target.id);
}}
onMouseEnter={() =>
updateHelpText(i18n._(t`Add a new node between these two nodes`))
onUpdateHelpText(i18n._(t`Add a new node between these two nodes`))
}
onMouseLeave={() => updateHelpText(null)}
onMouseLeave={() => onUpdateHelpText(null)}
>
<PlusIcon />
</WorkflowActionTooltipItem>
@ -63,8 +63,8 @@ function VisualizerLink({
id="link-edit"
key="edit"
onClick={() => onLinkEditClick(link)}
onMouseEnter={() => updateHelpText(i18n._(t`Edit this link`))}
onMouseLeave={() => updateHelpText(null)}
onMouseEnter={() => onUpdateHelpText(i18n._(t`Edit this link`))}
onMouseLeave={() => onUpdateHelpText(null)}
>
<PencilAltIcon />
</WorkflowActionTooltipItem>,
@ -72,8 +72,8 @@ function VisualizerLink({
id="link-delete"
key="delete"
onClick={() => onDeleteLinkClick(link)}
onMouseEnter={() => updateHelpText(i18n._(t`Delete this link`))}
onMouseLeave={() => updateHelpText(null)}
onMouseEnter={() => onUpdateHelpText(i18n._(t`Delete this link`))}
onMouseLeave={() => onUpdateHelpText(null)}
>
<TrashAltIcon />
</WorkflowActionTooltipItem>,
@ -135,8 +135,8 @@ function VisualizerLink({
strokeWidth="2px"
/>
<polygon
onMouseEnter={() => updateLinkHelp(link)}
onMouseLeave={() => updateLinkHelp(null)}
onMouseEnter={() => onUpdateLinkHelp(link)}
onMouseLeave={() => onUpdateLinkHelp(null)}
opacity="0"
points={getLinkOverlayPoints(link, nodePositions)}
/>
@ -159,8 +159,8 @@ VisualizerLink.propTypes = {
onDeleteLinkClick: func.isRequired,
onLinkEditClick: func.isRequired,
readOnly: bool.isRequired,
updateHelpText: func.isRequired,
updateLinkHelp: func.isRequired,
onUpdateHelpText: func.isRequired,
onUpdateLinkHelp: func.isRequired,
};
export default withI18n()(VisualizerLink);

View File

@ -51,7 +51,7 @@ function VisualizerNode({
onStartAddLinkClick,
onViewNodeClick,
readOnly,
updateHelpText,
onUpdateHelpText,
updateNodeHelp,
}) {
const [hovering, setHovering] = useState(false);
@ -61,7 +61,7 @@ function VisualizerNode({
nodeEl.parentNode.appendChild(nodeEl);
setHovering(true);
if (addingLink) {
updateHelpText(
onUpdateHelpText(
node.isInvalidLinkTarget
? i18n._(
t`Invalid link target. Unable to link to children or ancestor nodes. Graph cycles are not supported.`
@ -75,7 +75,7 @@ function VisualizerNode({
const handleNodeMouseLeave = () => {
setHovering(false);
if (addingLink) {
updateHelpText(null);
onUpdateHelpText(null);
}
};
@ -90,12 +90,12 @@ function VisualizerNode({
id="node-details"
key="details"
onClick={() => {
updateHelpText(null);
onUpdateHelpText(null);
setHovering(false);
onViewNodeClick(node);
}}
onMouseEnter={() => updateHelpText(i18n._(t`View node details`))}
onMouseLeave={() => updateHelpText(null)}
onMouseEnter={() => onUpdateHelpText(i18n._(t`View node details`))}
onMouseLeave={() => onUpdateHelpText(null)}
>
<InfoIcon />
</WorkflowActionTooltipItem>
@ -108,12 +108,12 @@ function VisualizerNode({
id="node-add"
key="add"
onClick={() => {
updateHelpText(null);
onUpdateHelpText(null);
setHovering(false);
onAddNodeClick(node.id);
}}
onMouseEnter={() => updateHelpText(i18n._(t`Add a new node`))}
onMouseLeave={() => updateHelpText(null)}
onMouseEnter={() => onUpdateHelpText(i18n._(t`Add a new node`))}
onMouseLeave={() => onUpdateHelpText(null)}
>
<PlusIcon />
</WorkflowActionTooltipItem>,
@ -122,12 +122,12 @@ function VisualizerNode({
id="node-edit"
key="edit"
onClick={() => {
updateHelpText(null);
onUpdateHelpText(null);
setHovering(false);
onEditNodeClick(node);
}}
onMouseEnter={() => updateHelpText(i18n._(t`Edit this node`))}
onMouseLeave={() => updateHelpText(null)}
onMouseEnter={() => onUpdateHelpText(i18n._(t`Edit this node`))}
onMouseLeave={() => onUpdateHelpText(null)}
>
<PencilAltIcon />
</WorkflowActionTooltipItem>,
@ -135,14 +135,14 @@ function VisualizerNode({
id="node-link"
key="link"
onClick={() => {
updateHelpText(null);
onUpdateHelpText(null);
setHovering(false);
onStartAddLinkClick(node);
}}
onMouseEnter={() =>
updateHelpText(i18n._(t`Link to an available node`))
onUpdateHelpText(i18n._(t`Link to an available node`))
}
onMouseLeave={() => updateHelpText(null)}
onMouseLeave={() => onUpdateHelpText(null)}
>
<LinkIcon />
</WorkflowActionTooltipItem>,
@ -150,12 +150,12 @@ function VisualizerNode({
id="node-delete"
key="delete"
onClick={() => {
updateHelpText(null);
onUpdateHelpText(null);
setHovering(false);
onDeleteNodeClick(node);
}}
onMouseEnter={() => updateHelpText(i18n._(t`Delete this node`))}
onMouseLeave={() => updateHelpText(null)}
onMouseEnter={() => onUpdateHelpText(i18n._(t`Delete this node`))}
onMouseLeave={() => onUpdateHelpText(null)}
>
<TrashAltIcon />
</WorkflowActionTooltipItem>,
@ -225,7 +225,7 @@ VisualizerNode.propTypes = {
onStartAddLinkClick: func.isRequired,
onViewNodeClick: func.isRequired,
readOnly: bool.isRequired,
updateHelpText: func.isRequired,
onUpdateHelpText: func.isRequired,
updateNodeHelp: func.isRequired,
};

View File

@ -19,8 +19,8 @@ function VisualizerStartNode({
i18n,
nodePositions,
onAddNodeClick,
onUpdateHelpText,
readOnly,
updateHelpText,
}) {
const [hovering, setHovering] = useState(false);
@ -56,10 +56,10 @@ function VisualizerStartNode({
<WorkflowActionTooltipItem
id="node-add"
key="add"
onMouseEnter={() => updateHelpText(i18n._(t`Add a new node`))}
onMouseLeave={() => updateHelpText(null)}
onMouseEnter={() => onUpdateHelpText(i18n._(t`Add a new node`))}
onMouseLeave={() => onUpdateHelpText(null)}
onClick={() => {
updateHelpText(null);
onUpdateHelpText(null);
setHovering(false);
onAddNodeClick(1);
}}
@ -80,7 +80,7 @@ VisualizerStartNode.propTypes = {
nodePositions: shape().isRequired,
onAddNodeClick: func.isRequired,
readOnly: bool.isRequired,
updateHelpText: func.isRequired,
onUpdateHelpText: func.isRequired,
};
export default withI18n()(VisualizerStartNode);