feat(logs): add view button and wrap text in user request log

web/components/shared/themed/table/requestRowView.tsx

@@ -35,7 +35,9 @@ const RequestRowView = (props: RequestRowViewProps) => {
 
       {selectedRow ? (
         <div className="flex flex-col space-y-2 w-full h-full overflow-auto">
-          {selectedRow.render()}
+          <div className="whitespace-pre-wrap break-words">
+            {selectedRow.render()}
+          </div>
         </div>
       ) : (
         <div className="flex flex-col space-y-4 justify-center items-center h-full w-full bg-white border border-gray-300 dark:bg-black dark:border-gray-700 rounded-lg">

web/components/shared/themed/table/themedTableV5.tsx

@@ -22,10 +22,10 @@ import { UIFilterRow } from "../themedAdvancedFilters";
 import ThemedTableHeader from "./themedTableHeader";
 import DraggableColumnHeader from "./draggableColumnHeader";
 import { TimeFilter } from "../../../templates/dashboard/dashboardPage";
-import { useLocalStorage } from "../../../../services/hooks/localStorage";
 import RequestRowView from "./requestRowView";
 import { NormalizedRequest } from "../../../templates/requestsV2/builder/abstractRequestBuilder";
 import { OrganizationFilter } from "../../../../services/lib/organization_layout/organization_layout";
+import { RequestViews } from "./viewButton";
 
 interface ThemedTableV5Props<T> {
   defaultData: T[];
@@ -68,6 +68,7 @@ interface ThemedTableV5Props<T> {
     onSaveFilterCallback?: () => void;
     layoutPage: "dashboard" | "requests";
   };
+  view: RequestViews;
 }
 
 export type RequestViews = "table" | "card" | "row";
@@ -89,13 +90,13 @@ export default function ThemedTableV5<T>(props: ThemedTableV5Props<T>) {
     noDataCTA,
     onDataSet: onDataSet,
     savedFilters,
+    view,
   } = props;
 
   const [visibleColumns, setVisibleColumns] = useState<VisibilityState>({});
   const [columnOrder, setColumnOrder] = useState<ColumnOrderState>(
-    defaultColumns.map((column) => column.id as string) // must start out with populated columnOrder so we can splice
+    defaultColumns.map((column) => column.id as string)
   );
-  const [view, setView] = useLocalStorage<RequestViews>("view", "table");
 
   const onVisibilityHandler: OnChangeFn<VisibilityState> = (newState) => {
     setVisibleColumns(newState);
@@ -167,7 +168,7 @@ export default function ThemedTableV5<T>(props: ThemedTableV5Props<T>) {
           makeCard
             ? {
                 currentView: view,
-                onViewChange: setView,
+                onViewChange: () => {},
               }
             : undefined
         }

web/components/templates/requestsV2/requestsPageV2.tsx

@@ -39,6 +39,7 @@ import {
   getModelFromPath,
   mapGeminiProJawn,
 } from "./builder/mappers/geminiMapper";
+import { RequestViews } from "../../shared/themed/table/themedTableV5";
 
 interface RequestsPageV2Props {
   currentPage: number;
@@ -54,6 +55,7 @@ interface RequestsPageV2Props {
   currentFilter: OrganizationFilter | null;
   organizationLayout: OrganizationLayout | null;
   organizationLayoutAvailable: boolean;
+  view: RequestViews;
 }
 
 function getSortLeaf(
@@ -101,6 +103,7 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
     currentFilter,
     organizationLayout,
     organizationLayoutAvailable,
+    view,
   } = props;
   const [isLive, setIsLive] = useLocalStorage("isLive", false);
   const jawn = useJawnClient();
@@ -593,6 +596,7 @@ const RequestsPageV2 = (props: RequestsPageV2Props) => {
                   properties: properties,
                 }
           }
+          view={view}
         />
         <TableFooter
           currentPage={currentPage}

web/components/templates/users/id/userIdPage.tsx

@@ -18,6 +18,8 @@ import {
 } from "@heroicons/react/24/outline";
 import { useRouter } from "next/router";
 import HcBreadcrumb from "../../../ui/hcBreadcrumb";
+import { useState } from "react";
+import ViewButton from "../../../shared/themed/table/viewButton";
 
 interface UserIdPageProps {
   userId: string;
@@ -46,6 +48,7 @@ const UserIdPage = (props: UserIdPageProps) => {
 
   const { user, isLoading, costOverTime, requestOverTime } = useUserId(userId);
   const router = useRouter();
+  const [selectedView, setSelectedView] = useState<RequestViews>("row");
 
   return (
     <>
@@ -200,6 +203,14 @@ const UserIdPage = (props: UserIdPageProps) => {
                   </TabPanel>
                   <TabPanel>
                     <div className="py-2">
+                      <div className="flex justify-end mb-4">
+                        <ViewButton
+                          currentView={selectedView}
+                          onViewChange={(view) => {
+                            setSelectedView(view);
+                          }}
+                        />
+                      </div>
                       <RequestsPageV2
                         currentPage={1}
                         pageSize={25}