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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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