feat: sticky tab and filter list

kernelci · Nov 22, 2024 · f6c0599 · f6c0599
1 parent dc85aac
commit f6c0599
Show file tree

Hide file tree

Showing 7 changed files with 38 additions and 19 deletions.
diff --git a/dashboard/src/components/Cards/HardwareUsed.tsx b/dashboard/src/components/Cards/HardwareUsed.tsx
@@ -24,6 +24,7 @@ const HardwareUsed = ({ hardwareUsed, title }: IHardwareUsed): JSX.Element => {
   return (
     <BaseCard
       title={title}
+      className="mb-0"
       content={
         <div className="flex flex-row flex-wrap gap-4 p-4">
           {hardwareSorted}

diff --git a/dashboard/src/components/Tabs/Tabs.tsx b/dashboard/src/components/Tabs/Tabs.tsx
@@ -39,7 +39,7 @@ const TabsComponent = ({
           key={tab.name}
           value={tab.name}
         >
-          <FormattedMessage id={tab.name} />{' '}
+          <FormattedMessage id={tab.name} />
           <div className="pl-2">{tab.rightElement}</div>
         </TabsTrigger>
       )),
@@ -63,10 +63,12 @@ const TabsComponent = ({
       defaultValue={defaultTab}
       className="w-full"
     >
-      <TabsList className="w-full justify-start bg-transparent">
-        {tabsTrigger}
-      </TabsList>
-      <div className="border-t border-darkGray py-6">{filterListElement}</div>
+      <div className="sticky top-16 z-[5] rounded-md bg-lightGray pb-6 pt-12">
+        <TabsList className="w-full justify-start rounded-none border-b border-darkGray bg-transparent">
+          {tabsTrigger}
+        </TabsList>
+        {filterListElement && <div className="pt-6">{filterListElement}</div>}
+      </div>
 
       {tabsContent}
     </Tabs>

diff --git a/dashboard/src/components/ui/tabs.tsx b/dashboard/src/components/ui/tabs.tsx
@@ -12,7 +12,7 @@ const TabsList = React.forwardRef<
   <TabsPrimitive.List
     ref={ref}
     className={cn(
-      'inline-flex h-10 items-center justify-center rounded-md bg-slate-100 p-1 text-slate-500 dark:bg-slate-800 dark:text-slate-400',
+      'inline-flex h-10 items-center justify-center rounded-md bg-slate-100 text-slate-500 dark:bg-slate-800 dark:text-slate-400',
       className,
     )}
     {...props}
@@ -42,7 +42,7 @@ const TabsContent = React.forwardRef<
   <TabsPrimitive.Content
     ref={ref}
     className={cn(
-      'mt-2 ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300',
+      'ring-offset-white focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-slate-950 focus-visible:ring-offset-2 dark:ring-offset-slate-950 dark:focus-visible:ring-slate-300',
       className,
     )}
     {...props}

diff --git a/dashboard/src/pages/TreeDetails/TreeDetails.tsx b/dashboard/src/pages/TreeDetails/TreeDetails.tsx
@@ -149,7 +149,10 @@ function TreeDetails(): JSX.Element {
   }, [isBuildTab, testsIsLoading, buildIsLoading]);
 
   const filterListElement = useMemo(
-    () => <TreeDetailsFilterList filter={diffFilter} />,
+    () =>
+      Object.keys(diffFilter).length !== 0 ? (
+        <TreeDetailsFilterList filter={diffFilter} />
+      ) : undefined,
     [diffFilter],
   );
 
@@ -267,9 +270,11 @@ function TreeDetails(): JSX.Element {
           />
         </div>
       </QuerySwitcher>
-      <div className="relative mt-10 flex flex-col pb-2">
-        <div className="absolute right-0 top-[-16px]">
-          <TreeDetailsFilter paramFilter={diffFilter} treeUrl={treeUrl} />
+      <div className="flex flex-col pb-2">
+        <div className="sticky top-[4.5rem] z-10">
+          <div className="absolute right-0 top-2 py-4">
+            <TreeDetailsFilter paramFilter={diffFilter} treeUrl={treeUrl} />
+          </div>
         </div>
         <TreeDetailsTab
           treeDetailsData={treeDetailsData}

diff --git a/dashboard/src/pages/TreeDetails/TreeDetailsFilterList.tsx b/dashboard/src/pages/TreeDetails/TreeDetailsFilterList.tsx
@@ -40,6 +40,9 @@ const TreeDetailsFilterList = ({
 
       if (typeof fieldSection === 'object') {
         delete fieldSection[value];
+        if (Object.keys(fieldSection).length === 0) {
+          delete newFilter[field];
+        }
       } else {
         delete newFilter[field];
       }

diff --git a/dashboard/src/pages/hardwareDetails/HardwareDetails.tsx b/dashboard/src/pages/hardwareDetails/HardwareDetails.tsx
@@ -75,7 +75,10 @@ function HardwareDetails(): JSX.Element {
   );
 
   const filterListElement = useMemo(
-    () => <HardwareDetailsFilterList filter={diffFilter} />,
+    () =>
+      Object.keys(diffFilter).length !== 0 ? (
+        <HardwareDetailsFilterList filter={diffFilter} />
+      ) : undefined,
     [diffFilter],
   );
 
@@ -160,13 +163,15 @@ function HardwareDetails(): JSX.Element {
           selectedIndexes={treeIndexes}
           updateTreeFilters={updateTreeFilters}
         />
-        <div className="relative pt-2">
-          <div className="absolute right-0 top-0">
-            <HardwareDetailsFilter
-              paramFilter={diffFilter}
-              hardwareName={hardwareId}
-              data={data}
-            />
+        <div className="flex flex-col pb-2">
+          <div className="sticky top-[4.5rem] z-10">
+            <div className="absolute right-0 top-2 py-4">
+              <HardwareDetailsFilter
+                paramFilter={diffFilter}
+                hardwareName={hardwareId}
+                data={data}
+              />
+            </div>
           </div>
           <HardwareDetailsTabs
             HardwareDetailsData={data}

diff --git a/dashboard/src/pages/hardwareDetails/HardwareDetailsFilterList.tsx b/dashboard/src/pages/hardwareDetails/HardwareDetailsFilterList.tsx
@@ -42,6 +42,9 @@ const HardwareDetailsFilterList = ({
 
       if (typeof fieldSection === 'object') {
         delete fieldSection[value];
+        if (Object.keys(fieldSection).length === 0) {
+          delete newFilter[field];
+        }
       } else {
         delete newFilter[field];
       }