fix: Add filter icon to help users find filters (#10809)

* fix: add clear indicator that filters are now in sidebar Signed-off-by: Remington Breeze <remington@breeze.software> * address code review Signed-off-by: Remington Breeze <remington@breeze.software> Signed-off-by: Remington Breeze <remington@breeze.software>
argoproj · Oct 5, 2022 · 2077641 · 2077641
1 parent 2bf51f4
commit 2077641
Show file tree

Hide file tree

Showing 3 changed files with 29 additions and 13 deletions.
diff --git a/ui/src/app/shared/services/view-preferences-service.ts b/ui/src/app/shared/services/view-preferences-service.ts
@@ -137,7 +137,7 @@ const DEFAULT_PREFERENCES: ViewPreferences = {
     },
     pageSizes: {},
     hideBannerContent: '',
-    hideSidebar: true,
+    hideSidebar: false,
     position: '',
     theme: 'light'
 };

diff --git a/ui/src/app/sidebar/sidebar.scss b/ui/src/app/sidebar/sidebar.scss
@@ -52,8 +52,10 @@
             width: 35px;
         }
 
-        i.fa-sign-in-alt {
+        i.fa {
             font-size: 22px;
+            margin-left: 3px;
+            margin-top: 12px;
         }
 
         &--active {
@@ -83,5 +85,9 @@
             margin-right: 0;
             margin-left: 10px;
         }
+
+        .sidebar__nav-item i.fa {
+            margin-left: 13px;
+        }
     }
 }
diff --git a/ui/src/app/sidebar/sidebar.tsx b/ui/src/app/sidebar/sidebar.tsx
@@ -33,6 +33,17 @@ export const Sidebar = (props: SidebarProps) => {
     const [version, loading, error] = useData(() => services.version.version());
     const locationPath = context.history.location.pathname;
 
+    const tooltipProps = {
+        placement: 'right',
+        popperOptions: {
+            modifiers: {
+                preventOverflow: {
+                    boundariesElement: 'window'
+                }
+            }
+        }
+    };
+
     return (
         <div className={`sidebar ${props.pref.hideSidebar ? 'sidebar--collapsed' : ''}`}>
             <div className='sidebar__logo'>
@@ -42,17 +53,7 @@ export const Sidebar = (props: SidebarProps) => {
                 {loading ? 'Loading...' : error?.state ? 'Unknown' : version?.Version || 'Unknown'}
             </div>
             {(props.navItems || []).map(item => (
-                <Tooltip
-                    key={item.path}
-                    content={item?.tooltip || item.title}
-                    placement='right'
-                    popperOptions={{
-                        modifiers: {
-                            preventOverflow: {
-                                boundariesElement: 'window'
-                            }
-                        }
-                    }}>
+                <Tooltip key={item.path} content={item?.tooltip || item.title} {...tooltipProps}>
                     <div
                         key={item.title}
                         className={`sidebar__nav-item ${locationPath === item.path || locationPath.startsWith(`${item.path}/`) ? 'sidebar__nav-item--active' : ''}`}
@@ -69,6 +70,15 @@ export const Sidebar = (props: SidebarProps) => {
             <div onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})} className='sidebar__collapse-button'>
                 <i className={`fas fa-arrow-${props.pref.hideSidebar ? 'right' : 'left'}`} />
             </div>
+            {props.pref.hideSidebar && (
+                <div onClick={() => services.viewPreferences.updatePreferences({...props.pref, hideSidebar: !props.pref.hideSidebar})} className='sidebar__collapse-button'>
+                    <Tooltip content='Show Filters' {...tooltipProps}>
+                        <div className='sidebar__nav-item'>
+                            <i className={`fas fa-filter`} style={{fontSize: '14px', margin: '0 auto'}} />
+                        </div>
+                    </Tooltip>
+                </div>
+            )}
             <div id={SIDEBAR_TOOLS_ID} />
         </div>
     );