Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

UI UX improvements - reset and controls #1016

Merged
merged 7 commits into from
Nov 14, 2023
Merged

UI UX improvements - reset and controls #1016

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
390f4b7
Made reset button titles more precise to explain full functionality a…
M6AI Nov 5, 2023
4ad7d06
Add power off in place of times icon for aborting the plan.
M6AI Nov 5, 2023
cebca21
Merge branch 'main' into feature/ui_ux_improvements
M6AI Nov 6, 2023
98c18f4
Reducing buttons to original size except for the environment toggle a…
M6AI Nov 8, 2023
a79f282
Added newsfragments and a minor change to the plan level reset tooltip.
M6AI Nov 8, 2023
9332010
Addressed naming comment.
M6AI Nov 8, 2023
7e42f2a
Merge branch 'main' into feature/ui_ux_improvements
M6AI Nov 14, 2023
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
1 change: 1 addition & 0 deletions doc/newsfragments/2778_changed.environment_control_ux_improvements.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Enlarged the environment control button on Testplan interactive UI navigation to be in line with the run and reset buttons. Environment start and stop now temporarily changes color to orange to provide additional feedback about in progress state.
1 change: 1 addition & 0 deletions doc/newsfragments/2779_changed.improve_reset_state_tooltips.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Made reset state button tooltips more explicit on both the UI navigation bar and the toolbar.
1 change: 1 addition & 0 deletions doc/newsfragments/2797_changed.abort_button.rst
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1 @@
Replaced the "times" icon with a "power off" icon for a more intuitive abort control on the interactive UI toolbar.
29 changes: 21 additions & 8 deletions testplan/web_ui/testing/src/Nav/InteractiveNavEntry.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,13 @@ function StartingStoppingIcon(starting) {

return (
<FontAwesomeIcon
className={css(styles.inactiveEntryButton)}
className={
css(
styles.inactiveEntryButton,
styles.environmentToggle,
styles.busyEnvironmentToggle,
)
}
icon={starting ? faToggleOn : faToggleOff}
title={starting ? "Environment starting..." : "Environment stopping..."}
onClick={ignoreClickEvent}
Expand All @@ -239,7 +245,9 @@ const getEnvStatusIcon = (entryStatus, envStatus, envCtrlCallback) => {
return (
<FontAwesomeIcon
className={
disabled ? css(styles.inactiveEntryButton) : css(styles.entryButton)
disabled ?
css(styles.inactiveEntryButton, styles.environmentToggle) :
css(styles.entryButton, styles.environmentToggle)
}
icon={faToggleOff}
title="Start environment"
Expand All @@ -256,7 +264,9 @@ const getEnvStatusIcon = (entryStatus, envStatus, envCtrlCallback) => {
return (
<FontAwesomeIcon
className={
disabled ? css(styles.inactiveEntryButton) : css(styles.entryButton)
disabled ?
css(styles.inactiveEntryButton, styles.environmentToggle) :
css(styles.entryButton, styles.environmentToggle)
}
icon={faToggleOn}
title="Stop environment"
Expand Down Expand Up @@ -288,7 +298,7 @@ const getResetReportIcon = (entryStatus, envStatus, handleClick, entryType) => {
disabled ? css(styles.inactiveEntryButton) : css(styles.entryButton)
}
icon={faFastBackward}
title="Reset report"
title="Reset MultiTest environment and report"
onClick={
disabled ? ignoreClickEvent : (e) => handleClick(e, "resetting")
}
Expand Down Expand Up @@ -378,7 +388,7 @@ const styles = StyleSheet.create({
"align-items": "center",
},
entryIcon: {
fontSize: "x-small",
fontSize: "small",
margin: "0em 0.5em 0em 0.5em",
},
entryButton: {
Expand All @@ -391,9 +401,6 @@ const styles = StyleSheet.create({
color: "black",
padding: "0.7em 0em 0.7em 0em",
transition: "all 0.3s ease-out 0s",
":hover": {
color: LIGHT_GREY,
},
},
inactiveEntryButton: {
textDecoration: "none",
Expand All @@ -406,6 +413,12 @@ const styles = StyleSheet.create({
padding: "0.7em 0em 0.7em 0em",
transition: "all 0.3s ease-out 0s !important",
},
environmentToggle: {
padding: "0.65em 0em 0.65em 0em",
},
busyEnvironmentToggle: {
color: "orange",
},
badge: {
opacity: 0.5,
},
Expand Down
Loading