From 92c65af944b2c9f0c4fc1754a1ef8aa6cb71bd77 Mon Sep 17 00:00:00 2001
From: "use-tusk[bot]" <144006087+use-tusk[bot]@users.noreply.github.com>
Date: Mon, 7 Oct 2024 15:54:29 -0700
Subject: [PATCH] [ENG-1137] Fix cache tabs to maintain their selected state
 visually (#2712)

* fix(cache): ensure cache tabs hold selected state

* fix(11149993052): auto linting

---------

Co-authored-by: use-tusk[bot] <144006087+use-tusk[bot]@users.noreply.github.com>
Co-authored-by: Justin Torre <justintorre75@gmail.com>
---
 web/components/templates/cache/cachePage.tsx | 208 +++++++++----------
 web/pages/cache.tsx                          |   4 +-
 2 files changed, 103 insertions(+), 109 deletions(-)

diff --git a/web/components/templates/cache/cachePage.tsx b/web/components/templates/cache/cachePage.tsx
index 9508a5cc39..9cd78e327f 100644
--- a/web/components/templates/cache/cachePage.tsx
+++ b/web/components/templates/cache/cachePage.tsx
@@ -6,16 +6,7 @@ import {
   TableCellsIcon,
 } from "@heroicons/react/24/outline";
 import { ElementType, useMemo, useState } from "react";
-import {
-  BarChart,
-  Tab,
-  TabGroup,
-  TabList,
-  TabPanel,
-  TabPanels,
-  Divider,
-  Badge,
-} from "@tremor/react";
+import { BarChart, Divider, Badge } from "@tremor/react";
 import ThemedDrawer from "../../shared/themed/themedDrawer";
 import ThemedListItem from "../../shared/themed/themedListItem";
 import RequestsPageV2 from "../requestsV2/requestsPageV2";
@@ -32,6 +23,7 @@ import { formatNumber } from "../users/initialColumns";
 import { useOrg } from "@/components/layout/organizationContext";
 import { DiffHighlight } from "../welcome/diffHighlight";
 import { FeatureUpgradeCard } from "@/components/shared/helicone/FeatureUpgradeCard";
+import { Tabs, TabsList, TabsTrigger, TabsContent } from "@/components/ui/tabs";
 import { IslandContainer } from "@/components/ui/islandContainer";
 
 interface CachePageProps {
@@ -42,7 +34,7 @@ interface CachePageProps {
     sortDirection: SortDirection | null;
     isCustomProperty: boolean;
   };
-  defaultIndex?: number;
+  defaultIndex: string;
 }
 
 const tabs: {
@@ -63,7 +55,7 @@ const tabs: {
 ];
 
 const CachePage = (props: CachePageProps) => {
-  const { currentPage, pageSize, sort, defaultIndex = 0 } = props;
+  const { currentPage, pageSize, sort, defaultIndex = "0" } = props;
   const [timeFilter, _] = useState<TimeFilter>({
     start: new Date(new Date().getTime() - 1000 * 60 * 60 * 24 * 30),
     end: new Date(),
@@ -243,121 +235,123 @@ openai.chat.completions.create(
         </div>
       ) : (
         <div className="flex flex-col">
-          <TabGroup defaultIndex={defaultIndex}>
-            <TabList className="font-semibold" variant="line">
+          <Tabs defaultValue={defaultIndex} className="w-full">
+            <TabsList className="font-semibold">
               {tabs.map((tab) => (
-                <Tab
+                <TabsTrigger
                   key={tab.id}
-                  icon={tab.icon}
+                  value={tab.id.toString()}
                   onClick={() => {
                     router.push(
                       {
-                        query: { tab: tab.id },
+                        query: { ...router.query, tab: tab.id },
                       },
                       undefined,
                       { shallow: true }
                     );
                   }}
                 >
+                  <tab.icon className="h-5 w-5 mr-2" />
                   {tab.title}
-                </Tab>
+                </TabsTrigger>
               ))}
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <div className="flex flex-col xl:flex-row gap-4 w-full py-4">
-                  <div className="flex flex-col space-y-4 w-full xl:w-1/2">
-                    <ul className="flex flex-col sm:flex-row items-center gap-4 w-full">
-                      {metrics.map((metric, i) => (
-                        <li
-                          key={i}
-                          className="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-black p-4 flex flex-row rounded-lg items-center gap-4"
-                        >
-                          <metric.icon className="h-6 w-6 text-sky-500" />
-                          <div className="flex flex-col">
-                            <dt className="text-gray-500 text-sm">
-                              {metric.label}
-                            </dt>
-                            {metric.isLoading ? (
-                              <div className="animate-pulse h-7 w-24 bg-gray-200 dark:bg-gray-800 rounded-lg" />
-                            ) : (
-                              <dd className="text-gray-900 dark:text-gray-100 text-xl font-semibold">
-                                {metric.value}
-                              </dd>
-                            )}
-                          </div>
-                        </li>
-                      ))}
-                    </ul>
-                    <div className="flex flex-col space-y-4 py-6 bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg">
-                      <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 text-center">
-                        Caches last 30 days
-                      </h3>
-                      <div className="h-72 px-4 ">
-                        {isAnyLoading ? (
-                          <div className="h-full w-full flex-col flex p-8">
-                            <div className="h-full w-full rounded-lg bg-gray-300 dark:bg-gray-700 animate-pulse" />
-                          </div>
-                        ) : (
-                          <div className="h-full w-full">
-                            <BarChart
-                              data={chartData}
-                              categories={["count"]}
-                              index={"date"}
-                              className="h-full -ml-4 pt-4"
-                              colors={["blue"]}
-                              showLegend={false}
-                            />
-                          </div>
-                        )}
-                      </div>
-                    </div>
-                  </div>
-                  <div className="flex flex-col w-full xl:w-1/2 space-y-4 py-6 bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg h-[30rem]">
+            </TabsList>
+            <TabsContent value="0">
+              <div className="flex flex-col xl:flex-row gap-4 w-full py-4">
+                <div className="flex flex-col space-y-4 w-full xl:w-1/2">
+                  <ul className="flex flex-col sm:flex-row items-center gap-4 w-full">
+                    {metrics.map((metric, i) => (
+                      <li
+                        key={i}
+                        className="w-full border border-gray-300 dark:border-gray-700 bg-white dark:bg-black p-4 flex flex-row rounded-lg items-center gap-4"
+                      >
+                        <metric.icon className="h-6 w-6 text-sky-500" />
+                        <div className="flex flex-col">
+                          <dt className="text-gray-500 text-sm">
+                            {metric.label}
+                          </dt>
+                          {metric.isLoading ? (
+                            <div className="animate-pulse h-7 w-24 bg-gray-200 dark:bg-gray-800 rounded-lg" />
+                          ) : (
+                            <dd className="text-gray-900 dark:text-gray-100 text-xl font-semibold">
+                              {metric.value}
+                            </dd>
+                          )}
+                        </div>
+                      </li>
+                    ))}
+                  </ul>
+                  <div className="flex flex-col space-y-4 py-6 bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg">
                     <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 text-center">
-                      Top Requests
+                      Caches last 30 days
                     </h3>
-                    <ul className="h-auto px-4 overflow-auto divide-y divide-gray-300 dark:divide-gray-700">
-                      {chMetrics.topRequests.data?.data?.map(
-                        (request: any, i: any) => (
-                          <ThemedListItem
-                            key={i}
-                            onClickHandler={() => {
-                              setSelectedRequest(request);
-                              setOpen(true);
-                            }}
-                            title={request.prompt}
-                            subtitle={`Created: ${new Date(
-                              request.first_used
-                            ).toLocaleString()}`}
-                            icon={CircleStackIcon}
-                            value={request.count}
-                            pill={<ModelPill model={request.model} />}
-                            secondarySubtitle={`Recent: ${new Date(
-                              request.last_used
-                            ).toLocaleString()}`}
+                    <div className="h-72 px-4 ">
+                      {isAnyLoading ? (
+                        <div className="h-full w-full flex-col flex p-8">
+                          <div className="h-full w-full rounded-lg bg-gray-300 dark:bg-gray-700 animate-pulse" />
+                        </div>
+                      ) : (
+                        <div className="h-full w-full">
+                          <BarChart
+                            data={chartData}
+                            categories={["count"]}
+                            index={"date"}
+                            className="h-full -ml-4 pt-4"
+                            colors={["blue"]}
+                            showLegend={false}
                           />
-                        )
+                        </div>
                       )}
-                    </ul>
+                    </div>
                   </div>
                 </div>
-              </TabPanel>
-              <TabPanel>
-                <div className="py-4">
-                  <RequestsPageV2
-                    currentPage={currentPage}
-                    pageSize={pageSize}
-                    sort={sort}
-                    isCached={true}
-                    currentFilter={null}
-                    organizationLayout={null}
-                    organizationLayoutAvailable={false}
-                  />
+                <div
+                  className="flex flex-col w-full xl:w-1/2 
+space-y-4 py-6 bg-white dark:bg-black border border-gray-300 dark:border-gray-700 rounded-lg h-[30rem]"
+                >
+                  <h3 className="text-lg font-semibold text-gray-900 dark:text-gray-100 text-center">
+                    Top Requests
+                  </h3>
+                  <ul className="h-auto px-4 overflow-auto divide-y divide-gray-300 dark:divide-gray-700">
+                    {chMetrics.topRequests.data?.data?.map(
+                      (request: any, i: any) => (
+                        <ThemedListItem
+                          key={i}
+                          onClickHandler={() => {
+                            setSelectedRequest(request);
+                            setOpen(true);
+                          }}
+                          title={request.prompt}
+                          subtitle={`Created: ${new Date(
+                            request.first_used
+                          ).toLocaleString()}`}
+                          icon={CircleStackIcon}
+                          value={request.count}
+                          pill={<ModelPill model={request.model} />}
+                          secondarySubtitle={`Recent: ${new Date(
+                            request.last_used
+                          ).toLocaleString()}`}
+                        />
+                      )
+                    )}
+                  </ul>
                 </div>
-              </TabPanel>
-            </TabPanels>
-          </TabGroup>
+              </div>
+            </TabsContent>
+            <TabsContent value="1">
+              <div className="py-4">
+                <RequestsPageV2
+                  currentPage={currentPage}
+                  pageSize={pageSize}
+                  sort={sort}
+                  isCached={true}
+                  currentFilter={null}
+                  organizationLayout={null}
+                  organizationLayoutAvailable={false}
+                />
+              </div>
+            </TabsContent>
+          </Tabs>
         </div>
       )}
 
diff --git a/web/pages/cache.tsx b/web/pages/cache.tsx
index fc5dc00890..fce7ba0e83 100644
--- a/web/pages/cache.tsx
+++ b/web/pages/cache.tsx
@@ -15,7 +15,7 @@ interface CacheProps {
     sortDirection: SortDirection | null;
     isCustomProperty: boolean;
   };
-  defaultIndex: number;
+  defaultIndex: string;
 }
 
 const Cache = (props: CacheProps) => {
@@ -55,7 +55,7 @@ export const getServerSideProps = withAuthSSR(async (options) => {
         sortDirection: sortDirection ? (sortDirection as SortDirection) : null,
         isCustomProperty: isCustomProperty === "true",
       },
-      defaultIndex: tab ? parseInt(tab as string) : 0,
+      defaultIndex: tab ? tab.toString() : "0",
     },
   };
 });