X-Git-Url: https://git.arvados.org/arvados.git/blobdiff_plain/bfa2055c4184c1fe7d56936cf5af4d57cc6fcb22..fc1d5c838c0f764ddfa891c0cef6d55c77abbe79:/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx

diff --git a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
index de1acf1eea..32f977e1a4 100644
--- a/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
+++ b/services/workbench2/src/components/multiselect-toolbar/ms-toolbar-overflow-wrapper.tsx
@@ -24,31 +24,36 @@ const styles: StyleRulesCallback<CssRules> = (theme: ArvadosTheme) => ({
     toolbarWrapper: {
         display: 'flex',
         overflow: 'hidden',
-        padding: '0 20px',
+        padding: '0 0px 0 20px',
         width: '100%',
     },
     overflowStyle: {
         order: 99,
         position: 'sticky',
         right: '-2rem',
-        backgroundColor: 'white',
+        width: 0,
     },
 });
 
 type WrapperProps = {
     children: OverflowChild[];
+    menuLength: number;
 };
 
 export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperProps & WithStyles<CssRules>) => {
-    const { classes, children } = props;
-
+    const { classes, children, menuLength } = props;
+    const lastEntryId = (children[menuLength - 1] as any).props['data-targetid'];
     const navRef = useRef<any>(null);
-    const [visibilityMap, setVisibilityMap] = useState({});
+    const [visibilityMap, setVisibilityMap] = useState<Record<string, boolean>>({});
+    const [numHidden, setNumHidden] = useState(() => findNumHidden(visibilityMap));
+
+    const prevNumHidden = useRef(numHidden);
 
     const handleIntersection = (entries) => {
-        const updatedEntries = {};
+        const updatedEntries: Record<string, boolean> = {};
         entries.forEach((entry) => {
-            const targetid = entry.target.dataset.targetid;
+            const targetid = entry.target.dataset.targetid as string;
+            //if true, the element is visible
             if (entry.isIntersecting) {
                 updatedEntries[targetid] = true;
             } else {
@@ -59,12 +64,30 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
         setVisibilityMap((prev) => ({
             ...prev,
             ...updatedEntries,
+            [lastEntryId]: Object.keys(updatedEntries)[0] === lastEntryId,
         }));
     };
+
+    //ensures that the last element is always visible if the second to last is visible
+    useEffect(() => {
+        if ((prevNumHidden.current > 1 || prevNumHidden.current === 0) && numHidden === 1) {
+            setVisibilityMap((prev) => ({
+                ...prev,
+                [lastEntryId]: true,
+            }));
+        }
+        prevNumHidden.current = numHidden;
+    }, [numHidden, lastEntryId]);
+
+    useEffect(() => {
+        setNumHidden(findNumHidden(visibilityMap));
+    }, [visibilityMap]);
+
     useEffect((): any => {
+        setVisibilityMap({});
         const observer = new IntersectionObserver(handleIntersection, {
             root: navRef.current,
-            rootMargin: '0px -20px 0px 0px',
+            rootMargin: '0px -30px 0px 0px',
             threshold: 1,
         });
         // We are adding observers to child elements of the container div
@@ -79,7 +102,12 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
         return () => {
             observer.disconnect();
         };
-    }, []);
+        // eslint-disable-next-line
+    }, [menuLength]);
+
+    function findNumHidden(visMap: {}) {
+        return Object.values(visMap).filter((x) => x === false).length;
+    }
 
     return (
         <div
@@ -94,12 +122,14 @@ export const IntersectionObserverWrapper = withStyles(styles)((props: WrapperPro
                     }),
                 });
             })}
-            <OverflowMenu
-                visibilityMap={visibilityMap}
-                className={classes.overflowStyle}
-            >
-                {children}
-            </OverflowMenu>
+            {numHidden >= 2 && (
+                <OverflowMenu
+                    visibilityMap={visibilityMap}
+                    className={classes.overflowStyle}
+                >
+                    {children}
+                </OverflowMenu>
+            )}
         </div>
     );
 });
