diff --git a/app/components/sidebar/Menu.client.tsx b/app/components/sidebar/Menu.client.tsx index 5cf9ca20..d2eff5d6 100644 --- a/app/components/sidebar/Menu.client.tsx +++ b/app/components/sidebar/Menu.client.tsx @@ -1,7 +1,6 @@ import { motion, type Variants } from 'framer-motion'; import { useCallback, useEffect, useRef, useState } from 'react'; import { toast } from 'react-toastify'; -import { useStore } from '@nanostores/react'; import { Dialog, DialogButton, DialogDescription, DialogRoot, DialogTitle } from '~/components/ui/Dialog'; import { ThemeSwitch } from '~/components/ui/ThemeSwitch'; import { SettingsWindow } from '~/components/settings/SettingsWindow'; @@ -14,7 +13,7 @@ import { binDates } from './date-binning'; import { useSearchFilter } from '~/lib/hooks/useSearchFilter'; import { SaveProblem } from './SaveProblem'; import { SaveReproductionModal } from './SaveReproduction'; -import { isAdminStore } from '~/lib/stores/user'; +import { useAdminStatus } from '~/lib/stores/user'; const menuVariants = { closed: { @@ -47,7 +46,7 @@ export const Menu = () => { const [open, setOpen] = useState(false); const [dialogContent, setDialogContent] = useState(null); const [isSettingsOpen, setIsSettingsOpen] = useState(false); - const isAdmin = useStore(isAdminStore); + const { isAdmin } = useAdminStatus(); const { filteredItems: filteredList, handleSearchChange } = useSearchFilter({ items: list, diff --git a/app/components/sidebar/SaveReproduction.tsx b/app/components/sidebar/SaveReproduction.tsx index b7acaed5..6f806068 100644 --- a/app/components/sidebar/SaveReproduction.tsx +++ b/app/components/sidebar/SaveReproduction.tsx @@ -22,7 +22,9 @@ export function SaveReproductionModal() { const [savedReproduction, setSavedReproduction] = useState(false); const [problem, setProblem] = useState(null); - const handleSaveReproduction = async () => { + const handleSaveReproduction = async (e: React.MouseEvent) => { + e.preventDefault(); + const loadId = toast.loading('Loading problem...'); try { diff --git a/tests/e2e/problem.spec.ts b/tests/e2e/problem.spec.ts index 83ea23cd..d04cca25 100644 --- a/tests/e2e/problem.spec.ts +++ b/tests/e2e/problem.spec.ts @@ -1,5 +1,5 @@ import { test, expect } from '@playwright/test'; -import { isSupabaseEnabled, login, setLoginKey } from './setup/test-utils'; +import { isSupabaseEnabled, login, setLoginKey, openSidebar } from './setup/test-utils'; test('Should be able to load a problem', async ({ page }) => { await page.goto('/problems'); @@ -29,7 +29,7 @@ test('Should be able to save a problem ', async ({ page }) => { const useSupabase = await isSupabaseEnabled(page); if (useSupabase) { - await page.locator('[data-testid="sidebar-icon"]').click(); + await openSidebar(page); await page.getByRole('button', { name: 'Save Problem' }).click(); await page.getByRole('button', { name: 'Log In' }).click(); await page.getByRole('textbox', { name: 'Email' }).click(); @@ -134,3 +134,16 @@ test('Should be able to add a comment to a problem', async ({ page }) => { await page.reload(); await expect(page.locator('[data-testid="problem-comment"]').filter({ hasText: comment })).toBeVisible(); }); + +test('Confirm that admins see the "Save Reproduction" button', async ({ page }) => { + await page.goto('/problems?showAll=true'); + + if (await isSupabaseEnabled(page)) { + await login(page); + } else { + await setLoginKey(page); + } + + await openSidebar(page); + await expect(page.getByRole('link', { name: 'Save Reproduction' })).toBeVisible(); +}); diff --git a/tests/e2e/setup/test-utils.ts b/tests/e2e/setup/test-utils.ts index 57e8f226..63c66622 100644 --- a/tests/e2e/setup/test-utils.ts +++ b/tests/e2e/setup/test-utils.ts @@ -54,6 +54,10 @@ export async function getElementText(page: Page, selector: string): Promise; } +export async function openSidebar(page: Page): Promise { + await page.locator('[data-testid="sidebar-icon"]').click(); +} + export async function login(page: Page): Promise { await page.getByRole('button', { name: 'Sign In' }).click(); await page.getByRole('textbox', { name: 'Email' }).click(); @@ -64,7 +68,7 @@ export async function login(page: Page): Promise { } export async function setLoginKey(page: Page): Promise { - await page.locator('[data-testid="sidebar-icon"]').click(); + await openSidebar(page); await page.getByRole('button', { name: 'Settings' }).click(); await page.getByRole('button', { name: 'User Info' }).click(); await page.getByRole('textbox').nth(1).click();