Small UI improvements (#68)

* Add blurb about OPENAI_BASE_URL to creation modal * Dedent * Remove invalid inherit prop * Add menu to main icon with links to GitHub, Issues, Slack * Set default popover shadow * Empty state for tasks drawer * Rename test file to test_wrapper
kolenaIO · Sep 16, 2024 · 0d9ad19 · 0d9ad19
1 parent 2d57987
commit 0d9ad19
Show file tree

Hide file tree

Showing 7 changed files with 112 additions and 52 deletions.
diff --git a/tests/integration/judge/test_utils.py → tests/integration/judge/test_wrapper.py b/tests/integration/judge/test_utils.py → tests/integration/judge/test_wrapper.py
diff --git a/ui/src/App.tsx b/ui/src/App.tsx
@@ -3,7 +3,7 @@ import 'mantine-datatable/styles.layer.css';
 import '@mantine/notifications/styles.css';
 import '@mantine/charts/styles.css';
 import './global.css';
-import { createTheme, MantineProvider, Modal, Tooltip } from '@mantine/core';
+import { createTheme, MantineProvider, Modal, Popover, Tooltip } from '@mantine/core';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 import { Notifications } from '@mantine/notifications';
@@ -18,6 +18,7 @@ const theme = createTheme({
   components: {
     Modal: Modal.extend({ defaultProps: { transitionProps: { transition: 'fade', duration: 100 } } }),
     Tooltip: Tooltip.extend({ defaultProps: { openDelay: 200 } }),
+    Popover: Popover.extend({ defaultProps: { shadow: 'sm' } }),
   },
   colors: {
     kolena: [

diff --git a/ui/src/components/Judges/Judges.tsx b/ui/src/components/Judges/Judges.tsx
@@ -83,6 +83,17 @@ export function Judges() {
           onClose={closeOpenAI}
           judgeType="openai"
           modelOptions={['gpt-4o', 'gpt-4o-mini']}
+          extraCopy={
+            <Text inherit>
+              Note that a custom API URL can be used by setting{' '}
+              <Code>
+                <Anchor inherit href={ExternalUrls.OPENAI_BASE_URL_README} target="_blank">
+                  OPENAI_BASE_URL
+                </Anchor>
+              </Code>{' '}
+              in the environment running AutoArena.
+            </Text>
+          }
         />
         <CreateJudgeModal
           isOpen={isAnthropicOpen}

diff --git a/ui/src/components/MainMenu.tsx b/ui/src/components/MainMenu.tsx
@@ -0,0 +1,37 @@
+import { Anchor, Group, Menu, Text, Tooltip } from '@mantine/core';
+import { IconBeta, IconBrandGithub, IconBrandSlack, IconBug, IconHome, IconStack2Filled } from '@tabler/icons-react';
+import { ExternalUrls } from '../lib/routes.ts';
+
+export function MainMenu() {
+  const iconProps = { size: 20, color: 'var(--mantine-color-kolena-light-color)' };
+  return (
+    <Menu>
+      <Menu.Target>
+        <Group gap={4}>
+          <IconStack2Filled {...iconProps} />
+          <Text fw="bold" c="black">
+            AutoArena
+          </Text>
+          <Tooltip label="Beta Release" fz="xs">
+            <IconBeta size={14} color="var(--mantine-color-ice-8)" />
+          </Tooltip>
+        </Group>
+      </Menu.Target>
+
+      <Menu.Dropdown>
+        <Anchor href="/" underline="never">
+          <Menu.Item leftSection={<IconHome {...iconProps} />}>Home</Menu.Item>
+        </Anchor>
+        <Anchor href={ExternalUrls.AUTOARENA_GITHUB} underline="never" target="_blank">
+          <Menu.Item leftSection={<IconBrandGithub {...iconProps} />}>Repository</Menu.Item>
+        </Anchor>
+        <Anchor href={ExternalUrls.AUTOARENA_GITHUB_ISSUES} underline="never" target="_blank">
+          <Menu.Item leftSection={<IconBug {...iconProps} />}>Report a Bug</Menu.Item>
+        </Anchor>
+        <Anchor href={ExternalUrls.AUTOARENA_SLACK_COMMUNITY} underline="never" target="_blank">
+          <Menu.Item leftSection={<IconBrandSlack {...iconProps} />}>Slack Community</Menu.Item>
+        </Anchor>
+      </Menu.Dropdown>
+    </Menu>
+  );
+}
diff --git a/ui/src/components/Page.tsx b/ui/src/components/Page.tsx
@@ -1,5 +1,5 @@
-import { Anchor, Group, Stack, Tabs, Text, Tooltip } from '@mantine/core';
-import { IconBeta, IconCrown, IconGavel, IconStack2Filled, IconSwords } from '@tabler/icons-react';
+import { Group, Stack, Tabs } from '@mantine/core';
+import { IconCrown, IconGavel, IconSwords } from '@tabler/icons-react';
 import { useNavigate } from 'react-router-dom';
 import { useEffect } from 'react';
 import { notifications } from '@mantine/notifications';
@@ -11,6 +11,7 @@ import { Judges } from './Judges/Judges.tsx';
 import { ProjectSelect } from './ProjectSelect.tsx';
 import { TasksDrawer } from './TasksDrawer/TasksDrawer.tsx';
 import { OnboardingTimeline } from './OnboardingTimeline.tsx';
+import { MainMenu } from './MainMenu.tsx';
 
 export const TAB_LEADERBOARD = 'Leaderboard';
 export const TAB_COMPARISON = 'Head-to-Head';
@@ -54,22 +55,12 @@ export function Page({ tab }: Props) {
     }
   }
 
-  const iconProps = { width: 20, height: 20, color: 'var(--mantine-color-kolena-8)' };
+  const iconProps = { size: 20, color: 'var(--mantine-color-kolena-light-color)' };
   return (
     <Tabs value={tab} onChange={setTab} keepMounted={false}>
       <Tabs.List bg="gray.0" style={{ position: 'sticky', top: 0, zIndex: 10 }}>
         <Group align="center" p="xs" pl="lg" pr="xl" h={58}>
-          <Anchor underline="never" href="/">
-            <Group gap={4}>
-              <IconStack2Filled color="var(--mantine-color-kolena-6)" />
-              <Text fw="bold" c="black">
-                AutoArena
-              </Text>
-              <Tooltip label="Beta Release" fz="xs">
-                <IconBeta size={14} color="var(--mantine-color-ice-8)" />
-              </Tooltip>
-            </Group>
-          </Anchor>
+          <MainMenu />
         </Group>
         <Tabs.Tab
           ml="xl"

diff --git a/ui/src/components/TasksDrawer/TasksDrawer.tsx b/ui/src/components/TasksDrawer/TasksDrawer.tsx
@@ -1,5 +1,5 @@
 import { Accordion, Button, Collapse, Drawer, Loader, Stack, Text } from '@mantine/core';
-import { IconCpu } from '@tabler/icons-react';
+import { IconCactus, IconCpu } from '@tabler/icons-react';
 import { useDisclosure } from '@mantine/hooks';
 import moment from 'moment';
 import { useEffect, useMemo } from 'react';
@@ -13,6 +13,7 @@ import { taskIsDone } from '../../lib/tasks.ts';
 import { getProjectUrl } from '../../lib/routes.ts';
 import { getJudgesQueryKey } from '../../hooks/useJudges.ts';
 import { useHasActiveTasksStream } from '../../hooks/useHasActiveTasksStream.ts';
+import { NonIdealState } from '../NonIdealState.tsx';
 import { TaskAccordionItem } from './TaskAccordionItem.tsx';
 
 export function TasksDrawer() {
@@ -21,7 +22,7 @@ export function TasksDrawer() {
   const queryClient = useQueryClient();
   const [isCompletedTasksOpen, { toggle: toggleCompletedTasks, close: closeCompletedTasks }] = useDisclosure(false);
   const { data: hasActiveTasks = false } = useHasActiveTasksStream(projectSlug);
-  const { data: tasks } = useTasks({ projectSlug });
+  const { data: tasks, isLoading: isLoadingTasks } = useTasks({ projectSlug });
   const { mutate: clearCompletedTasks } = useClearCompletedTasks({ projectSlug });
 
   const tasksSorted = useMemo(() => (tasks ?? []).sort((a, b) => moment(b.created).diff(moment(a.created))), [tasks]);
@@ -54,7 +55,7 @@ export function TasksDrawer() {
       >
         Tasks
       </Button>
-      <Drawer
+      <Drawer.Root
         opened={isDrawerOpen}
         onClose={() => {
           closeDrawer();
@@ -63,41 +64,55 @@ export function TasksDrawer() {
         position="right"
         size="xl"
         transitionProps={{ duration: 200 }}
-        title={
-          <Text fs="italic" c="dimmed" size="sm">
-            {tasksInProgress.length > 0
-              ? `Showing ${pluralize(tasksInProgress.length, 'active task')}`
-              : 'No active tasks'}
-          </Text>
-        }
       >
-        <Stack>
-          <Accordion>
-            {tasksInProgress.map((task, i) => (
-              <TaskAccordionItem key={i} task={task} />
-            ))}
-          </Accordion>
-          {tasksCompleted.length > 0 && (
-            <>
-              <Button variant="light" color="gray" onClick={toggleCompletedTasks}>
-                {isCompletedTasksOpen ? 'Hide' : 'Show'} {pluralize(tasksCompleted.length, 'completed task')}
-              </Button>
-              <Collapse in={isCompletedTasksOpen}>
-                <Stack>
-                  <Accordion>
-                    {tasksCompleted.map((task, i) => (
-                      <TaskAccordionItem key={i} task={task} />
-                    ))}
-                  </Accordion>
-                  <Button variant="light" color="red" onClick={() => clearCompletedTasks()}>
-                    Clear Completed Tasks
-                  </Button>
-                </Stack>
-              </Collapse>
-            </>
-          )}
-        </Stack>
-      </Drawer>
+        <Drawer.Overlay />
+        <Drawer.Content>
+          <Drawer.Header>
+            <Drawer.Title>
+              <Text fs="italic" c="dimmed" size="sm">
+                {tasksInProgress.length > 0
+                  ? `Showing ${pluralize(tasksInProgress.length, 'active task')}`
+                  : 'No active tasks'}
+              </Text>
+            </Drawer.Title>
+            <Drawer.CloseButton />
+          </Drawer.Header>
+          <Drawer.Body flex={1} h="calc(100% - 60px)" /* full height minus header */>
+            {tasksSorted.length < 1 && !isLoadingTasks ? (
+              <Stack justify="center" h="100%">
+                <NonIdealState IconComponent={IconCactus} description="No tasks to show" />
+              </Stack>
+            ) : (
+              <Stack pb="md">
+                <Accordion>
+                  {tasksInProgress.map((task, i) => (
+                    <TaskAccordionItem key={i} task={task} />
+                  ))}
+                </Accordion>
+                {tasksCompleted.length > 0 && (
+                  <>
+                    <Button variant="light" color="gray" onClick={toggleCompletedTasks}>
+                      {isCompletedTasksOpen ? 'Hide' : 'Show'} {pluralize(tasksCompleted.length, 'completed task')}
+                    </Button>
+                    <Collapse in={isCompletedTasksOpen}>
+                      <Stack>
+                        <Accordion>
+                          {tasksCompleted.map((task, i) => (
+                            <TaskAccordionItem key={i} task={task} />
+                          ))}
+                        </Accordion>
+                        <Button variant="light" color="red" onClick={() => clearCompletedTasks()}>
+                          Clear Completed Tasks
+                        </Button>
+                      </Stack>
+                    </Collapse>
+                  </>
+                )}
+              </Stack>
+            )}
+          </Drawer.Body>
+        </Drawer.Content>
+      </Drawer.Root>
     </>
   );
 }
diff --git a/ui/src/lib/routes.ts b/ui/src/lib/routes.ts
@@ -6,7 +6,12 @@ export function getProjectUrl(projectSlug: string) {
 }
 
 export enum ExternalUrls {
+  AUTOARENA_GITHUB = 'https://github.com/kolenaIO/autoarena',
+  AUTOARENA_GITHUB_ISSUES = 'https://github.com/kolenaIO/autoarena/issues/new',
+  AUTOARENA_SLACK_COMMUNITY = 'https://kolena-autoarena.slack.com',
+
   TOGETHER_MODELS = 'https://docs.together.ai/docs/chat-models',
   OLLAMA_MODELS = 'https://ollama.com/library',
   BEDROCK_MODELS = 'https://docs.aws.amazon.com/bedrock/latest/userguide/conversation-inference.html',
+  OPENAI_BASE_URL_README = 'https://github.com/openai/openai-python#configuring-the-http-client',
 }