Don't rearrange dropdown dynamically.

In the dropdown of the "Add metric" button, keep the two checkboxes next to each other regardless of the width of the menu. Fixes #8745.
ICTU · May 27, 2024 · 7dcebd9 · 7dcebd9
1 parent 37e4a8a
commit 7dcebd9
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 15 deletions.
diff --git a/components/frontend/src/widgets/Button.js b/components/frontend/src/widgets/Button.js
@@ -36,6 +36,47 @@ FilterCheckbox.propTypes = {
     setFilter: func,
 }
 
+function FilterCheckboxes({
+    itemType,
+    allowHidingUnsupportedItems,
+    showUnsupportedItems,
+    setShowUnsupportedItems,
+    allowHidingUsedItems,
+    hideUsedItems,
+    setHideUsedItems,
+}) {
+    if (!allowHidingUnsupportedItems && !allowHidingUsedItems) {
+        return null
+    }
+    return (
+        <span style={{ paddingRight: "12px" }}>
+            {allowHidingUnsupportedItems && (
+                <FilterCheckbox
+                    label={`Select from all ${itemType} types`}
+                    filter={showUnsupportedItems}
+                    setFilter={setShowUnsupportedItems}
+                />
+            )}
+            {allowHidingUsedItems && (
+                <FilterCheckbox
+                    label={`Hide ${itemType} types already used`}
+                    filter={hideUsedItems}
+                    setFilter={setHideUsedItems}
+                />
+            )}
+        </span>
+    )
+}
+FilterCheckboxes.propTypes = {
+    itemType: string,
+    allowHidingUnsupportedItems: bool,
+    showUnsupportedItems: bool,
+    setShowUnsupportedItems: func,
+    allowHidingUsedItems: bool,
+    hideUsedItems: bool,
+    setHideUsedItems: func,
+}
+
 export function ActionButton(props) {
     const { action, disabled, icon, itemType, floated, fluid, popup, position, ...other } = props
     const label = `${action} ${itemType}`
@@ -86,7 +127,6 @@ export function AddDropdownButton({ itemSubtypes, itemType, onClick, allItemSubt
                     basic
                     className="button icon primary"
                     floating
-                    //onBlur={() => setQuery("")}
                     onClose={() => setMenuOpen(false)}
                     onKeyDown={(event) => {
                         if (!menuOpen) {
@@ -155,20 +195,15 @@ export function AddDropdownButton({ itemSubtypes, itemType, onClick, allItemSubt
                             placeholder={`Filter ${itemType} types`}
                             value={query}
                         />
-                        {allItemSubtypes?.length > 0 && (
-                            <FilterCheckbox
-                                label={`Select from all ${itemType} types`}
-                                filter={showUnsupportedItems}
-                                setFilter={setShowUnsupportedItems}
-                            />
-                        )}
-                        {usedItemSubtypeKeys?.length > 0 && (
-                            <FilterCheckbox
-                                label={`Hide ${itemType} types already used`}
-                                filter={hideUsedItems}
-                                setFilter={setHideUsedItems}
-                            />
-                        )}
+                        <FilterCheckboxes
+                            itemType={itemType}
+                            allowHidingUnsupportedItems={allItemSubtypes?.length > 0}
+                            showUnsupportedItems={showUnsupportedItems}
+                            setShowUnsupportedItems={setShowUnsupportedItems}
+                            allowHidingUsedItems={usedItemSubtypeKeys?.length > 0}
+                            hideUsedItems={hideUsedItems}
+                            setHideUsedItems={setHideUsedItems}
+                        />
                         <Dropdown.Menu scrolling>
                             {options.map((option, index) => (
                                 <Dropdown.Item

diff --git a/docs/src/changelog.md b/docs/src/changelog.md
@@ -8,6 +8,16 @@ The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/)
 
 <!-- The line "## <square-bracket>Unreleased</square-bracket>" is replaced by the release/release.py script with the new release version and release date. -->
 
+## [Unreleased]
+
+### Deployment notes
+
+If your currently installed *Quality-time* version is v4.10.0 or older, please read the v5.0.0 deployment notes first.
+
+### Fixed
+
+- In the dropdown of the "Add metric" button, keep the two checkboxes next to each other regardless of the width of the menu. Fixes [#8745](https://github.com/ICTU/quality-time/issues/8745).
+
 ## v5.13.0 - 2024-05-23
 
 ### Deployment notes