Adds ID's to toolbar(s) and action buttons within visualizer/output toolbars.

This commit is contained in:
mabashian
2020-02-06 10:40:24 -05:00
parent 50c74a2ec8
commit bc08c02b89
2 changed files with 11 additions and 6 deletions

View File

@@ -65,7 +65,7 @@ function WorkflowOutputToolbar({ i18n, job }) {
const totalNodes = nodes.reduce((n, node) => n + !node.isDeleted, 0) - 1; const totalNodes = nodes.reduce((n, node) => n + !node.isDeleted, 0) - 1;
return ( return (
<Toolbar> <Toolbar id="workflow-output-toolbar">
<ToolbarJob> <ToolbarJob>
<StatusIconWithMargin status={job.status} /> <StatusIconWithMargin status={job.status} />
<b>{job.name}</b> <b>{job.name}</b>
@@ -76,7 +76,7 @@ function WorkflowOutputToolbar({ i18n, job }) {
<VerticalSeparator /> <VerticalSeparator />
<Tooltip content={i18n._(t`Toggle Legend`)} position="bottom"> <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
<ActionButton <ActionButton
id="workflow-output-legend-button" id="workflow-output-toggle-legend"
isActive={showLegend} isActive={showLegend}
onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })} onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })}
variant="plain" variant="plain"
@@ -86,7 +86,7 @@ function WorkflowOutputToolbar({ i18n, job }) {
</Tooltip> </Tooltip>
<Tooltip content={i18n._(t`Toggle Tools`)} position="bottom"> <Tooltip content={i18n._(t`Toggle Tools`)} position="bottom">
<ActionButton <ActionButton
id="workflow-output-tools-button" id="workflow-output-toggle-tools"
isActive={showTools} isActive={showTools}
onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })} onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })}
variant="plain" variant="plain"

View File

@@ -48,7 +48,7 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
const totalNodes = nodes.reduce((n, node) => n + !node.isDeleted, 0) - 1; const totalNodes = nodes.reduce((n, node) => n + !node.isDeleted, 0) - 1;
return ( return (
<div> <div id="visualizer-toolbar">
<div css="align-items: center; border-bottom: 1px solid grey; display: flex; height: 56px; padding: 0px 20px;"> <div css="align-items: center; border-bottom: 1px solid grey; display: flex; height: 56px; padding: 0px 20px;">
<div css="display: flex;"> <div css="display: flex;">
<b>{i18n._(t`Workflow Visualizer`)}</b> <b>{i18n._(t`Workflow Visualizer`)}</b>
@@ -61,6 +61,7 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
<VerticalSeparator /> <VerticalSeparator />
<Tooltip content={i18n._(t`Toggle Legend`)} position="bottom"> <Tooltip content={i18n._(t`Toggle Legend`)} position="bottom">
<ActionButton <ActionButton
id="visualizer-toggle-legend"
isActive={showLegend} isActive={showLegend}
onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })} onClick={() => dispatch({ type: 'TOGGLE_LEGEND' })}
variant="plain" variant="plain"
@@ -70,6 +71,7 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
</Tooltip> </Tooltip>
<Tooltip content={i18n._(t`Toggle Tools`)} position="bottom"> <Tooltip content={i18n._(t`Toggle Tools`)} position="bottom">
<ActionButton <ActionButton
id="visualizer-toggle-tools"
isActive={showTools} isActive={showTools}
onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })} onClick={() => dispatch({ type: 'TOGGLE_TOOLS' })}
variant="plain" variant="plain"
@@ -77,14 +79,15 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
<WrenchIcon /> <WrenchIcon />
</ActionButton> </ActionButton>
</Tooltip> </Tooltip>
<ActionButton variant="plain" isDisabled> <ActionButton id="visualizer-documentation" variant="plain" isDisabled>
<BookIcon /> <BookIcon />
</ActionButton> </ActionButton>
<ActionButton variant="plain" isDisabled> <ActionButton id="visualizer-launch" variant="plain" isDisabled>
<RocketIcon /> <RocketIcon />
</ActionButton> </ActionButton>
<Tooltip content={i18n._(t`Delete All Nodes`)} position="bottom"> <Tooltip content={i18n._(t`Delete All Nodes`)} position="bottom">
<ActionButton <ActionButton
id="visualizer-delete-all"
aria-label={i18n._(t`Delete all nodes`)} aria-label={i18n._(t`Delete all nodes`)}
isDisabled={totalNodes === 0} isDisabled={totalNodes === 0}
onClick={() => onClick={() =>
@@ -100,6 +103,7 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
</Tooltip> </Tooltip>
<VerticalSeparator /> <VerticalSeparator />
<Button <Button
id="visualizer-save"
aria-label={i18n._(t`Save`)} aria-label={i18n._(t`Save`)}
variant="primary" variant="primary"
onClick={onSave} onClick={onSave}
@@ -108,6 +112,7 @@ function VisualizerToolbar({ i18n, onClose, onSave, template }) {
</Button> </Button>
<VerticalSeparator /> <VerticalSeparator />
<Button <Button
id="visualizer-close"
aria-label={i18n._(t`Close`)} aria-label={i18n._(t`Close`)}
onClick={onClose} onClick={onClose}
variant="plain" variant="plain"