From a222b9d3e7819e9a7e525b6994248caa167c8ac1 Mon Sep 17 00:00:00 2001
From: pablodanswer <pablo@danswer.ai>
Date: Wed, 30 Oct 2024 13:16:17 -0700
Subject: [PATCH] list item + configuration updates

---
 web/src/app/admin/add-connector/page.tsx      |  2 +-
 .../app/admin/assistants/AssistantEditor.tsx  |  4 +-
 web/src/app/admin/bot/page.tsx                |  2 +-
 .../llm/ConfiguredLLMProviderDisplay.tsx      |  2 +-
 .../configuration/llm/LLMConfiguration.tsx    |  2 +-
 web/src/app/admin/token-rate-limits/page.tsx  |  2 +-
 .../admin/groups/[groupId]/GroupDisplay.tsx   | 18 +++++-
 .../query-history/QueryHistoryTable.tsx       | 40 +++++++++----
 web/src/app/ee/admin/standard-answer/page.tsx |  2 +-
 web/src/components/admin/connectors/Field.tsx |  2 +-
 .../admin/users/SignedUpUserTable.tsx         | 57 ++++++++++++-------
 web/src/components/ui/button.tsx              | 40 +++++++++++--
 web/src/components/ui/italic.tsx              | 11 ----
 13 files changed, 125 insertions(+), 59 deletions(-)
 delete mode 100644 web/src/components/ui/italic.tsx

diff --git a/web/src/app/admin/add-connector/page.tsx b/web/src/app/admin/add-connector/page.tsx
index fe9123b038c..171e2946809 100644
--- a/web/src/app/admin/add-connector/page.tsx
+++ b/web/src/app/admin/add-connector/page.tsx
@@ -100,7 +100,7 @@ export default function Page() {
         title="Add Connector"
         farRightElement={
           <Link href="/admin/indexing/status">
-            <Button variant="next">See Connectors</Button>
+            <Button variant="navigate">See Connectors</Button>
           </Link>
         }
       />
diff --git a/web/src/app/admin/assistants/AssistantEditor.tsx b/web/src/app/admin/assistants/AssistantEditor.tsx
index b1916452cc1..b8ac215b672 100644
--- a/web/src/app/admin/assistants/AssistantEditor.tsx
+++ b/web/src/app/admin/assistants/AssistantEditor.tsx
@@ -874,7 +874,7 @@ export function AssistantEditor({
                                     )}
                                   />
                                 ) : (
-                                  <Italic className="text-sm">
+                                  <p className="text-sm italic">
                                     No Document Sets available.{" "}
                                     {user?.role !== "admin" && (
                                       <>
@@ -883,7 +883,7 @@ export function AssistantEditor({
                                         Danswer for assistance.
                                       </>
                                     )}
-                                  </Italic>
+                                  </p>
                                 )}
 
                                 <div className="mt-4  flex flex-col gap-y-4">
diff --git a/web/src/app/admin/bot/page.tsx b/web/src/app/admin/bot/page.tsx
index c440c729aac..af1f12d56bc 100644
--- a/web/src/app/admin/bot/page.tsx
+++ b/web/src/app/admin/bot/page.tsx
@@ -235,7 +235,7 @@ const Main = () => {
             onClick={() => {
               setSlackBotTokensModalIsOpen(!slackBotTokensModalIsOpen);
             }}
-            variant="edit"
+            variant="outline"
             className="mt-2"
             icon={slackBotTokensModalIsOpen ? FiChevronUp : FiChevronDown}
           >
diff --git a/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx b/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx
index 9868bf1016c..ea6149e08ad 100644
--- a/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx
+++ b/web/src/app/admin/configuration/llm/ConfiguredLLMProviderDisplay.tsx
@@ -122,7 +122,7 @@ function LLMProviderDisplay({
 
         <div className="ml-auto">
           <Button
-            variant={existingLlmProvider ? "edit" : "next"}
+            variant={existingLlmProvider ? "outline" : "next"}
             onClick={() => setFormIsVisible(true)}
           >
             {existingLlmProvider ? "Edit" : "Set up"}
diff --git a/web/src/app/admin/configuration/llm/LLMConfiguration.tsx b/web/src/app/admin/configuration/llm/LLMConfiguration.tsx
index 2ec9b53f3ce..018b13f00e5 100644
--- a/web/src/app/admin/configuration/llm/LLMConfiguration.tsx
+++ b/web/src/app/admin/configuration/llm/LLMConfiguration.tsx
@@ -79,7 +79,7 @@ function DefaultLLMProviderDisplay({
         </div>
 
         <div className="ml-auto">
-          <Button variant="next" onClick={() => setFormIsVisible(true)}>
+          <Button variant="navigate" onClick={() => setFormIsVisible(true)}>
             Set up
           </Button>
         </div>
diff --git a/web/src/app/admin/token-rate-limits/page.tsx b/web/src/app/admin/token-rate-limits/page.tsx
index 0a2bac72bfc..31544b403d9 100644
--- a/web/src/app/admin/token-rate-limits/page.tsx
+++ b/web/src/app/admin/token-rate-limits/page.tsx
@@ -141,7 +141,7 @@ function Main() {
       <Button
         variant="submit"
         size="sm"
-        className="mt-3"
+        className="my-3"
         onClick={() => setModalIsOpen(true)}
       >
         Create a Token Rate Limit
diff --git a/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx b/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx
index 1e23c63a911..29b325a42e2 100644
--- a/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx
+++ b/web/src/app/ee/admin/groups/[groupId]/GroupDisplay.tsx
@@ -15,7 +15,13 @@ import {
 } from "@/lib/types";
 import { AddConnectorForm } from "./AddConnectorForm";
 import { Separator } from "@/components/ui/separator";
-import { Select, SelectItem } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import Text from "@/components/ui/text";
 import {
   Table,
@@ -95,13 +101,19 @@ const UserRoleDropdown = ({
   if (isEditable) {
     return (
       <div className="w-40">
+        Select group
         <Select
           value={localRole}
           onValueChange={handleChange}
           disabled={isSettingRole}
         >
-          <SelectItem value={UserRole.BASIC}>Basic</SelectItem>
-          <SelectItem value={UserRole.CURATOR}>Curator</SelectItem>
+          <SelectTrigger>
+            <SelectValue placeholder="Select role" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value={UserRole.BASIC}>Basic</SelectItem>
+            <SelectItem value={UserRole.CURATOR}>Curator</SelectItem>
+          </SelectContent>
         </Select>
       </div>
     );
diff --git a/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx b/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
index 57008a294f5..b46d77c27d5 100644
--- a/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
+++ b/web/src/app/ee/admin/performance/query-history/QueryHistoryTable.tsx
@@ -10,7 +10,13 @@ import {
 } from "@/components/ui/table";
 import Text from "@/components/ui/text";
 
-import { Select, SelectItem } from "@/components/ui/select";
+import {
+  Select,
+  SelectItem,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+} from "@/components/ui/select";
 import { ThreeDotsLoader } from "@/components/Loading";
 import { ChatSessionMinimal } from "../usage/types";
 import { timestampToReadableDate } from "@/lib/dateUtils";
@@ -80,15 +86,29 @@ function SelectFeedbackType({
           value={value}
           onValueChange={onValueChange as (value: string) => void}
         >
-          <SelectItem value="all" icon={FiMinus}>
-            Any
-          </SelectItem>
-          <SelectItem value="like" icon={FiSmile}>
-            Like
-          </SelectItem>
-          <SelectItem value="dislike" icon={FiFrown}>
-            Dislike
-          </SelectItem>
+          <SelectTrigger>
+            <SelectValue placeholder="Select feedback type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectItem value="all">
+              <div className="flex items-center gap-2">
+                <FiMinus className="h-4 w-4" />
+                <span>Any</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="like">
+              <div className="flex items-center gap-2">
+                <FiSmile className="h-4 w-4" />
+                <span>Like</span>
+              </div>
+            </SelectItem>
+            <SelectItem value="dislike">
+              <div className="flex items-center gap-2">
+                <FiFrown className="h-4 w-4" />
+                <span>Dislike</span>
+              </div>
+            </SelectItem>
+          </SelectContent>
         </Select>
       </div>
     </div>
diff --git a/web/src/app/ee/admin/standard-answer/page.tsx b/web/src/app/ee/admin/standard-answer/page.tsx
index 009d50b807f..6bc921fdefa 100644
--- a/web/src/app/ee/admin/standard-answer/page.tsx
+++ b/web/src/app/ee/admin/standard-answer/page.tsx
@@ -291,7 +291,7 @@ const StandardAnswersTable = ({
         </div>
       </div>
       <div className="mx-auto">
-        <Table>
+        <Table className="w-full flex items-stretch">
           <TableHeader>
             <TableRow>
               {columns.map((column) => (
diff --git a/web/src/components/admin/connectors/Field.tsx b/web/src/components/admin/connectors/Field.tsx
index 4f4fa90dcb3..ff7a92845a6 100644
--- a/web/src/components/admin/connectors/Field.tsx
+++ b/web/src/components/admin/connectors/Field.tsx
@@ -538,7 +538,7 @@ export function TextArrayField<T extends Yup.AnyObject>({
                 arrayHelpers.push("");
               }}
               className="mt-3"
-              variant="success"
+              variant="update"
               size="sm"
               type="button"
               icon={FiPlus}
diff --git a/web/src/components/admin/users/SignedUpUserTable.tsx b/web/src/components/admin/users/SignedUpUserTable.tsx
index c4b84f12956..dc7da5113b3 100644
--- a/web/src/components/admin/users/SignedUpUserTable.tsx
+++ b/web/src/components/admin/users/SignedUpUserTable.tsx
@@ -13,7 +13,13 @@ import {
   TableCell,
 } from "@/components/ui/table";
 
-import { Select, SelectItem } from "@/components/ui/select";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@/components/ui/select";
 import { Button } from "@/components/ui/button";
 import { GenericConfirmModal } from "@/components/modals/GenericConfirmModal";
 import { useState } from "react";
@@ -77,26 +83,33 @@ const UserRoleDropdown = ({
         onValueChange={handleChange}
         disabled={isSettingRole}
       >
-        {Object.entries(USER_ROLE_LABELS).map(([role, label]) =>
-          !isPaidEnterpriseFeaturesEnabled &&
-          (role === UserRole.CURATOR ||
-            role === UserRole.GLOBAL_CURATOR) ? null : (
-            <SelectItem
-              key={role}
-              value={role}
-              className={
-                role === UserRole.CURATOR ? "opacity-30 cursor-not-allowed" : ""
-              }
-              title={
-                role === UserRole.CURATOR
-                  ? "Curator role must be assigned in the Groups tab"
-                  : ""
-              }
-            >
-              {label}
-            </SelectItem>
-          )
-        )}
+        <SelectTrigger>
+          <SelectValue />
+        </SelectTrigger>
+        <SelectContent>
+          {Object.entries(USER_ROLE_LABELS).map(([role, label]) =>
+            !isPaidEnterpriseFeaturesEnabled &&
+            (role === UserRole.CURATOR ||
+              role === UserRole.GLOBAL_CURATOR) ? null : (
+              <SelectItem
+                key={role}
+                value={role}
+                className={
+                  role === UserRole.CURATOR
+                    ? "opacity-30 cursor-not-allowed"
+                    : ""
+                }
+                title={
+                  role === UserRole.CURATOR
+                    ? "Curator role must be assigned in the Groups tab"
+                    : ""
+                }
+              >
+                {label}
+              </SelectItem>
+            )
+          )}
+        </SelectContent>
       </Select>
       {showConfirmModal && (
         <GenericConfirmModal
@@ -258,7 +271,7 @@ const SignedUpUserTable = ({
             {users.map((user) => (
               <TableRow key={user.id}>
                 <TableCell>{user.email}</TableCell>
-                <TableCell>
+                <TableCell className="w-40 ">
                   <UserRoleDropdown
                     user={user}
                     onSuccess={onRoleChangeSuccess}
diff --git a/web/src/components/ui/button.tsx b/web/src/components/ui/button.tsx
index f81432e81a2..f532505cad6 100644
--- a/web/src/components/ui/button.tsx
+++ b/web/src/components/ui/button.tsx
@@ -11,25 +11,46 @@ const buttonVariants = cva(
       variant: {
         success:
           "bg-green-100 text-green-600 hover:bg-green-500/90 dark:bg-blue-500 dark:text-neutral-50 dark:hover:bg-green-900/90",
+        "success-reverse":
+          "bg-green-600 text-green-100 hover:bg-green-600/90 dark:bg-neutral-50 dark:text-blue-500 dark:hover:bg-green-100/90",
         default:
           "bg-neutral-900 border-border text-neutral-50 hover:bg-neutral-900/90 dark:bg-neutral-50 dark:text-neutral-900 dark:hover:bg-neutral-50/90",
+        "default-reverse":
+          "bg-neutral-50 border-border text-neutral-900 hover:bg-neutral-50/90 dark:bg-neutral-900 dark:text-neutral-50 dark:hover:bg-neutral-900/90",
         destructive:
           "bg-red-500 text-neutral-50 hover:bg-red-500/90 dark:bg-red-900 dark:text-neutral-50 dark:hover:bg-red-900/90",
+        "destructive-reverse":
+          "bg-neutral-50 text-red-500 hover:bg-neutral-50/90 dark:bg-neutral-50 dark:text-red-900 dark:hover:bg-neutral-50/90",
         outline:
-          "border border-neutral-200 bg-white hover:bg-neutral-100 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+          "border border-neutral-300 bg-white hover:bg-neutral-50 hover:text-neutral-900 dark:border-neutral-800 dark:bg-neutral-950 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+        "outline-reverse":
+          "border border-neutral-300 bg-neutral-900 hover:bg-neutral-800 hover:text-neutral-50 dark:border-neutral-800 dark:bg-white dark:hover:bg-neutral-50 dark:hover:text-neutral-900",
         secondary:
           "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+        "secondary-reverse":
+          "bg-neutral-900 text-neutral-100 hover:bg-neutral-900/80 dark:bg-neutral-50 dark:text-neutral-800 dark:hover:bg-neutral-50/80",
         ghost:
           "hover:bg-neutral-100 hover:text-neutral-900 dark:hover:bg-neutral-800 dark:hover:text-neutral-50",
+        "ghost-reverse":
+          "hover:bg-neutral-800 hover:text-neutral-50 dark:hover:bg-neutral-100 dark:hover:text-neutral-900",
         link: "text-neutral-900 underline-offset-4 hover:underline dark:text-neutral-50",
+        "link-reverse":
+          "text-neutral-50 underline-offset-4 hover:underline dark:text-neutral-900",
         submit:
           "bg-blue-600 text-neutral-50 hover:bg-blue-600/80 dark:bg-blue-600 dark:text-neutral-50 dark:hover:bg-blue-600/90",
+        "submit-reverse":
+          "bg-neutral-50 text-blue-600 hover:bg-neutral-50/80 dark:bg-neutral-50 dark:text-blue-600 dark:hover:bg-neutral-50/90",
         navigate:
-          "bg-blue-50 text-blue-700 hover:bg-blue-100 border border-blue-200 dark:bg-blue-900 dark:text-blue-100 dark:hover:bg-blue-800 dark:border-blue-700",
-        edit: "border border-neutral-200 bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+          "bg-blue-500 text-white hover:bg-blue-600 dark:bg-blue-600 dark:hover:bg-blue-700",
+        "navigate-reverse":
+          "bg-white text-blue-500 hover:bg-blue-50 dark:bg-blue-100 dark:hover:bg-blue-200",
         update:
           "bg-neutral-100 text-neutral-900 hover:bg-neutral-100/80 dark:bg-neutral-800 dark:text-neutral-50 dark:hover:bg-neutral-800/80",
+        "update-reverse":
+          "bg-neutral-900 text-neutral-100 hover:bg-neutral-900/80 dark:bg-neutral-50 dark:text-neutral-800 dark:hover:bg-neutral-50/80",
         next: "bg-neutral-700 text-neutral-50 hover:bg-neutral-700/90 dark:bg-neutral-600 dark:text-neutral-50 dark:hover:bg-neutral-600/90",
+        "next-reverse":
+          "bg-neutral-50 text-neutral-700 hover:bg-neutral-50/90 dark:bg-neutral-50 dark:text-neutral-600 dark:hover:bg-neutral-50/90",
       },
       size: {
         default: "h-10 px-4 py-2",
@@ -37,6 +58,10 @@ const buttonVariants = cva(
         lg: "h-11 rounded-md px-8",
         icon: "h-10 w-10",
       },
+      reverse: {
+        true: "",
+        false: "",
+      },
     },
     defaultVariants: {
       variant: "default",
@@ -51,6 +76,7 @@ export interface ButtonProps
   asChild?: boolean;
   icon?: React.ElementType;
   tooltip?: string;
+  reverse?: boolean;
 }
 
 const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
@@ -69,7 +95,13 @@ const Button = React.forwardRef<HTMLButtonElement, ButtonProps>(
     const Comp = asChild ? Slot : "button";
     const button = (
       <Comp
-        className={cn(buttonVariants({ variant, size, className }))}
+        className={cn(
+          buttonVariants({
+            variant,
+            size,
+            className,
+          })
+        )}
         ref={ref}
         {...props}
       >
diff --git a/web/src/components/ui/italic.tsx b/web/src/components/ui/italic.tsx
deleted file mode 100644
index 9fb72f3b0ec..00000000000
--- a/web/src/components/ui/italic.tsx
+++ /dev/null
@@ -1,11 +0,0 @@
-import { cn } from "@/lib/utils";
-
-export default function Italic({
-  children,
-  className,
-}: {
-  children: React.ReactNode;
-  className?: string;
-}) {
-  return <p className={cn("italic", className)}>{children}</p>;
-}