fix: minor tweaks to module type filter (#2879)

![Screenshot 2024-09-27 at 12 55 50 PM](https://github.com/user-attachments/assets/6e621a1e-371e-40cc-85a0-f58e42d0b173) ![Screenshot 2024-09-27 at 12 55 59 PM](https://github.com/user-attachments/assets/2f04d56e-9a39-4ffe-948b-be58d3e1f719)
block · Sep 27, 2024 · 9948608 · 9948608
1 parent 94c0737
commit 9948608
Show file tree

Hide file tree

Showing 4 changed files with 64 additions and 32 deletions.
diff --git a/frontend/console/src/components/Divider.tsx b/frontend/console/src/components/Divider.tsx
@@ -0,0 +1,10 @@
+interface DividerProps {
+  vertical?: boolean
+  className?: string
+}
+
+export const Divider: React.FC<DividerProps> = ({ vertical = false, className }) => {
+  const baseClass = vertical ? 'border-l' : 'border-t'
+
+  return <div className={`${baseClass} border-gray-100 dark:border-gray-700/50 ${className}`} />
+}
diff --git a/frontend/console/src/components/Multiselect.tsx b/frontend/console/src/components/Multiselect.tsx
@@ -1,5 +1,6 @@
-import { Listbox } from '@headlessui/react'
-import { ArrowDown01Icon, Tick01Icon } from 'hugeicons-react'
+import { Listbox, ListboxButton, ListboxOption, ListboxOptions } from '@headlessui/react'
+import { ArrowDown01Icon, CheckmarkSquare02Icon, SquareIcon } from 'hugeicons-react'
+import { Divider } from './Divider'
 
 export interface MultiselectOpt {
   key: string
@@ -10,6 +11,16 @@ export function sortMultiselectOpts(o: MultiselectOpt[]) {
   return o.sort((a: MultiselectOpt, b: MultiselectOpt) => (a.key < b.key ? -1 : 1))
 }
 
+const getSelectionText = (selectedOpts: MultiselectOpt[], allOpts: MultiselectOpt[]): string => {
+  if (selectedOpts.length === 0) {
+    return 'Select types...'
+  }
+  if (selectedOpts.length === allOpts.length) {
+    return 'Filter types...'
+  }
+  return selectedOpts.map((o) => o.displayName).join(', ')
+}
+
 export const Multiselect = ({
   allOpts,
   selectedOpts,
@@ -19,43 +30,53 @@ export const Multiselect = ({
   return (
     <div className='w-full'>
       <Listbox multiple value={selectedOpts} onChange={onChange}>
-        <div className='relative w-[calc(100%-0.75rem)] items-center'>
-          <Listbox.Button className='w-full m-1.5 py-1 px-2 text-sm border-gray-200 dark:border-white/5 rounded-md text-sm text-gray-500 hover:text-gray-900 hover:dark:text-gray-200 bg-gray-300 dark:bg-gray-800'>
-            <span className='block truncate w-[calc(100%-30px)] h-5'>{selectedOpts.map((o) => o.displayName).join(', ')}</span>
+        <div className='relative w-[calc(100%-0.75rem)]'>
+          <ListboxButton className='w-full m-1.5 py-1 px-2 border border-gray-300 dark:border-gray-600 rounded-md text-sm text-gray-600 dark:text-gray-300 bg-white dark:bg-gray-900 hover:text-gray-800 dark:hover:text-gray-100 hover:bg-gray-100 dark:hover:bg-gray-700'>
+            <span className='block truncate w-[calc(100%-30px)] h-5 text-left'>{getSelectionText(selectedOpts, allOpts)}</span>
             <span className='pointer-events-none absolute inset-y-0 right-0 flex items-center pr-1'>
-              <ArrowDown01Icon className='w-5' />
+              <ArrowDown01Icon className='w-5 text-gray-400 dark:text-gray-500' />
             </span>
-          </Listbox.Button>
+          </ListboxButton>
         </div>
-        <Listbox.Options
+        <ListboxOptions
           anchor='bottom'
           transition
-          className='w-[var(--button-width)] min-w-48 mt-1 rounded-xl border dark:border-white/5 bg-white/90 dark:bg-gray-700 transition duration-100 ease-in truncate drop-shadow-lg z-20'
+          className='w-[var(--button-width)] min-w-48 mt-1 pt-1 rounded-md border dark:border-white/5 bg-white dark:bg-gray-800 transition duration-100 ease-in truncate drop-shadow-lg z-20'
         >
           {allOpts.map((o) => (
-            <Listbox.Option
-              className='cursor-pointer py-1.5 px-2 group flex items-center gap-2 select-none text-sm dark:text-white hover:bg-gray-200 hover:dark:bg-gray-800'
+            <ListboxOption
+              className='cursor-pointer py-1 px-2 group flex items-center gap-2 select-none text-sm text-gray-800 dark:text-gray-200 hover:bg-gray-200 hover:dark:bg-gray-700'
               key={o.key}
               value={o}
             >
-              <div className='w-4'>
-                <Tick01Icon className='size-4 invisible group-data-[selected]:visible' />
-              </div>
-              {o.displayName}
-            </Listbox.Option>
+              {({ selected }) => (
+                <div className='flex items-center gap-2'>
+                  {selected ? <CheckmarkSquare02Icon className='size-5' /> : <SquareIcon className='size-5' />}
+                  {o.displayName}
+                </div>
+              )}
+            </ListboxOption>
           ))}
-          <div className='w-full mt-2 text-center text-sm dark:text-white border-t dark:border-white/5 bg-white dark:bg-gray-700'>
-            <div
-              className='w-1/2 p-2 inline-block hover:bg-gray-200 hover:dark:bg-white/10 cursor-pointer text-clip border-r dark:border-white/5'
-              onClick={() => onChange(allOpts)}
-            >
-              Select All
-            </div>
-            <div className='w-1/2 p-2 inline-block hover:bg-gray-200 hover:dark:bg-white/10 cursor-pointer text-clip' onClick={() => onChange([])}>
-              Deselect All
+
+          <div className='w-full text-center text-xs mt-2'>
+            <Divider />
+            <div className='flex'>
+              <div
+                className='flex-1 p-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-indigo-600 dark:text-indigo-400 cursor-pointer text-center'
+                onClick={() => onChange(allOpts)}
+              >
+                Select all
+              </div>
+              <Divider vertical />
+              <div
+                className='flex-1 p-2 hover:bg-gray-200 dark:hover:bg-gray-700 text-indigo-600 dark:text-indigo-400 cursor-pointer text-center'
+                onClick={() => onChange([])}
+              >
+                Deselect all
+              </div>
             </div>
           </div>
-        </Listbox.Options>
+        </ListboxOptions>
       </Listbox>
     </div>
   )

diff --git a/frontend/console/src/features/modules/ModulesTree.tsx b/frontend/console/src/features/modules/ModulesTree.tsx
@@ -1,4 +1,4 @@
-import { ArrowRight01Icon, CircleArrowRight02Icon, CodeIcon, FileExportIcon, PackageIcon, SquareArrowShrink02Icon } from 'hugeicons-react'
+import { ArrowRight01Icon, ArrowShrink02Icon, CircleArrowRight02Icon, CodeIcon, FileExportIcon, PackageIcon } from 'hugeicons-react'
 import { useEffect, useMemo, useRef, useState } from 'react'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { Multiselect, sortMultiselectOpts } from '../../components/Multiselect'
@@ -93,7 +93,7 @@ const ModuleSection = ({
   )
 
   return (
-    <li key={module.name} id={`module-tree-module-${module.name}`} className='my-2'>
+    <li key={module.name} id={`module-tree-module-${module.name}`} className='mb-2'>
       <div
         ref={moduleRef}
         className={classNames(
@@ -175,14 +175,14 @@ export const ModulesTree = ({ modules }: { modules: ModuleTreeItem[] }) => {
     <div className='flex grow flex-col h-full gap-y-5 overflow-y-auto bg-gray-100 dark:bg-gray-900'>
       <nav>
         <div className='sticky top-0 border-b border-gray-300 bg-gray-100 dark:border-gray-800 dark:bg-gray-900 z-10'>
-          <span className='block w-[calc(100%-30px)]'>
+          <span className='block w-[calc(100%-32px)]'>
             <Multiselect allOpts={declTypeMultiselectOpts} selectedOpts={selectedDeclTypes} onChange={msOnChange} />
           </span>
           <span
-            className='absolute inset-y-0 right-0 flex items-center h-7 px-1 mx-1 my-1.5 rounded-md cursor-pointer bg-gray-300 hover:bg-gray-400 dark:bg-gray-800 hover:dark:bg-gray-700'
+            className='absolute inset-y-0 right-0 flex items-center px-1 mx-1 my-1.5 rounded-md cursor-pointer bg-white dark:bg-gray-900 border border-gray-300 dark:border-gray-600 hover:bg-gray-100 dark:hover:bg-gray-700 hover:text-gray-800 dark:hover:text-gray-100'
             onClick={collapseAll}
           >
-            <SquareArrowShrink02Icon className='w-5 dark:text-gray-300' />
+            <ArrowShrink02Icon className='size-5 text-gray-500 dark:text-gray-300' />
           </span>
         </div>
         <ul>

diff --git a/frontend/console/src/features/traces/TracesPage.tsx b/frontend/console/src/features/traces/TracesPage.tsx
@@ -1,6 +1,7 @@
 import { ArrowLeft02Icon } from 'hugeicons-react'
 import { useNavigate, useParams, useSearchParams } from 'react-router-dom'
 import { useRequestTraceEvents } from '../../api/timeline/use-request-trace-events'
+import { Divider } from '../../components/Divider'
 import { Loader } from '../../components/Loader'
 import { TraceDetails } from './TraceDetails'
 import { TraceDetailsCall } from './details/TraceDetailsCall'
@@ -67,7 +68,7 @@ export const TracesPage = () => {
         <TraceDetails requestKey={requestKey} events={events} selectedEventId={selectedEventId} />
       </div>
 
-      <div className='my-4 border-l border-gray-100 dark:border-gray-700' />
+      <Divider vertical />
 
       <div className='w-1/2 p-4 mt-1 h-full overflow-y-auto'>{eventDetailsComponent}</div>
     </div>