From 9736d89692e2efdad966e4cf94126f26072651e2 Mon Sep 17 00:00:00 2001 From: Polle Pas Date: Thu, 20 Jun 2024 15:39:30 +0200 Subject: [PATCH] #896 Fix double tap on ios + move new resource buttons --- browser/CHANGELOG.md | 1 + .../src/components/EditableTitle.tsx | 10 +- .../components/ResourceContextMenu/index.tsx | 141 +++++++++--------- .../ResourceUsage/ResourceUsage.tsx | 13 +- .../SideBar/ResourceSideBar/DropEdge.tsx | 3 +- .../ResourceSideBar/FloatingActions.tsx | 31 ++-- .../ResourceSideBar/ResourceSideBar.tsx | 37 +++-- .../src/components/SideBar/SideBarDrive.tsx | 61 +++++--- .../src/components/SideBar/SidebarCSSVars.ts | 1 + .../src/components/SideBar/index.tsx | 10 +- browser/data-browser/src/config.ts | 1 - browser/data-browser/src/helpers/addIf.ts | 10 ++ .../src/views/FolderPage/ListView.tsx | 2 +- .../Property/PropertyWriteDialog.tsx | 12 +- browser/e2e/tests/e2e.spec.ts | 3 +- browser/e2e/tests/filePicker.spec.ts | 4 +- browser/e2e/tests/search.spec.ts | 6 +- browser/e2e/tests/test-utils.ts | 4 +- 18 files changed, 188 insertions(+), 162 deletions(-) create mode 100644 browser/data-browser/src/components/SideBar/SidebarCSSVars.ts create mode 100644 browser/data-browser/src/helpers/addIf.ts diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md index 4ff93952b..db537672d 100644 --- a/browser/CHANGELOG.md +++ b/browser/CHANGELOG.md @@ -8,6 +8,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol - [#855](https://github.com/atomicdata-dev/atomic-server/issues/855) Add a dialog that shows how to fetch and use the current resource in your code. - [#825](https://github.com/atomicdata-dev/atomic-server/issues/825) Folder display styles are now saved locally instead of on the resource. The display style property will now act as the default view style. +- [#896](https://github.com/atomicdata-dev/atomic-server/issues/896) Fix issue where sidebar items require a double tap on ios. - Updated look of the default resource form. ### @tomic/react diff --git a/browser/data-browser/src/components/EditableTitle.tsx b/browser/data-browser/src/components/EditableTitle.tsx index 79e0d999e..cfb7b1529 100644 --- a/browser/data-browser/src/components/EditableTitle.tsx +++ b/browser/data-browser/src/components/EditableTitle.tsx @@ -1,7 +1,7 @@ import { Resource, useCanWrite, useTitle } from '@tomic/react'; import { useEffect, useRef, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; -import { FaEdit } from 'react-icons/fa'; +import { FaPencil } from 'react-icons/fa6'; import { styled, css } from 'styled-components'; import { transitionName } from '../helpers/transitionName'; import { ViewTransitionProps } from '../helpers/ViewTransitionProps'; @@ -107,8 +107,6 @@ const Title = styled.h1` display: flex; align-items: center; gap: ${p => p.theme.margin}rem; - justify-content: space-between; - cursor: pointer; cursor: ${props => (props.canEdit ? 'pointer' : 'initial')}; opacity: ${props => (props.subtle ? 0.5 : 1)}; @@ -138,14 +136,10 @@ const TitleInput = styled.input` } `; -const Icon = styled(FaEdit)` +const Icon = styled(FaPencil)` opacity: 0; font-size: 0.8em; ${Title}:hover & { opacity: 0.5; - - &:hover { - opacity: 1; - } } `; diff --git a/browser/data-browser/src/components/ResourceContextMenu/index.tsx b/browser/data-browser/src/components/ResourceContextMenu/index.tsx index 241c74272..43c72f58a 100644 --- a/browser/data-browser/src/components/ResourceContextMenu/index.tsx +++ b/browser/data-browser/src/components/ResourceContextMenu/index.tsx @@ -1,6 +1,6 @@ import { useCallback, useState } from 'react'; import { useLocation, useNavigate } from 'react-router-dom'; -import { Client, core, useResource, useStore } from '@tomic/react'; +import { Client, core, useCanWrite, useResource } from '@tomic/react'; import { editURL, dataURL, @@ -19,13 +19,13 @@ import { FaClock, FaCode, FaDownload, - FaEdit, - FaEllipsisV, - FaRedo, - FaSearch, - FaShareSquare, + FaPencil, + FaEllipsisVertical, + FaMagnifyingGlass, + FaShare, FaTrash, -} from 'react-icons/fa'; + FaPlus, +} from 'react-icons/fa6'; import { useQueryScopeHandler } from '../../hooks/useQueryScope'; import { ConfirmationDialog, @@ -35,18 +35,20 @@ import { ResourceInline } from '../../views/ResourceInline'; import { ResourceUsage } from '../ResourceUsage'; import { useCurrentSubject } from '../../helpers/useCurrentSubject'; import { ResourceCodeUsageDialog } from '../../views/CodeUsage/ResourceCodeUsageDialog'; +import { useNewRoute } from '../../helpers/useNewRoute'; +import { addIf } from '../../helpers/addIf'; export enum ContextMenuOptions { View = 'view', Data = 'data', Edit = 'edit', - Refresh = 'refresh', Scope = 'scope', Share = 'share', Delete = 'delete', History = 'history', Import = 'import', UseInCode = 'useInCode', + NewChild = 'newChild', } export interface ResourceContextMenuProps { @@ -74,15 +76,14 @@ function ResourceContextMenu({ bindActive, onAfterDelete, }: ResourceContextMenuProps) { - const store = useStore(); const navigate = useNavigate(); const location = useLocation(); const resource = useResource(subject); const [showDeleteDialog, setShowDeleteDialog] = useState(false); const [showCodeUsageDialog, setShowCodeUsageDialog] = useState(false); - + const handleAddClick = useNewRoute(subject); const [currentSubject] = useCurrentSubject(); - + const [canWrite] = useCanWrite(resource); const { enableScope } = useQueryScopeHandler(subject); // Try to not have a useResource hook in here, as that will lead to many costly fetches when the user enters a new subject @@ -111,43 +112,44 @@ function ResourceContextMenu({ } const items: DropdownItem[] = [ - ...(simple - ? [] - : [ - { - disabled: location.pathname.startsWith(paths.show), - id: ContextMenuOptions.View, - label: 'normal view', - helper: 'Open the regular, default View.', - onClick: () => navigate(constructOpenURL(subject)), - }, - { - disabled: location.pathname.startsWith(paths.data), - id: ContextMenuOptions.Data, - label: 'data view', - helper: 'View the resource and its properties in the Data View.', - shortcut: shortcuts.data, - onClick: () => navigate(dataURL(subject)), - }, - DIVIDER, - { - id: ContextMenuOptions.Refresh, - icon: , - label: 'refresh', - helper: - 'Fetch the resouce again from the server, possibly see new changes.', - onClick: () => store.fetchResourceFromServer(subject), - }, - ]), - { - // disabled: !canWrite || location.pathname.startsWith(paths.edit), - id: ContextMenuOptions.Edit, - label: 'edit', - helper: 'Open the edit form.', - icon: , - shortcut: simple ? '' : shortcuts.edit, - onClick: () => navigate(editURL(subject)), - }, + ...addIf( + !simple, + { + disabled: location.pathname.startsWith(paths.show), + id: ContextMenuOptions.View, + label: 'normal view', + helper: 'Open the regular, default View.', + onClick: () => navigate(constructOpenURL(subject)), + }, + { + disabled: location.pathname.startsWith(paths.data), + id: ContextMenuOptions.Data, + label: 'data view', + helper: 'View the resource and its properties in the Data View.', + shortcut: shortcuts.data, + onClick: () => navigate(dataURL(subject)), + }, + DIVIDER, + ), + ...addIf( + canWrite, + { + // disabled: !canWrite || location.pathname.startsWith(paths.edit), + id: ContextMenuOptions.Edit, + label: 'edit', + helper: 'Open the edit form.', + icon: , + shortcut: simple ? '' : shortcuts.edit, + onClick: () => navigate(editURL(subject)), + }, + { + id: ContextMenuOptions.NewChild, + label: 'add child', + helper: 'Create a new resource under this resource.', + icon: , + onClick: handleAddClick, + }, + ), { id: ContextMenuOptions.UseInCode, label: 'use in code', @@ -158,27 +160,19 @@ function ResourceContextMenu({ }, { id: ContextMenuOptions.Scope, - label: 'search in', + label: 'search children', helper: 'Scope search to resource', - icon: , + icon: , onClick: enableScope, }, { - // disabled: !canWrite || history.location.pathname.startsWith(paths.edit), id: ContextMenuOptions.Share, label: 'share', - icon: , + icon: , helper: 'Open the share menu', onClick: () => navigate(shareURL(subject)), }, - { - // disabled: !canWrite, - id: ContextMenuOptions.Delete, - icon: , - label: 'delete', - helper: 'Delete this resource.', - onClick: () => setShowDeleteDialog(true), - }, + { id: ContextMenuOptions.History, icon: , @@ -186,13 +180,24 @@ function ResourceContextMenu({ helper: 'Show the history of this resource', onClick: () => navigate(historyURL(subject)), }, - { - id: ContextMenuOptions.Import, - icon: , - label: 'import', - helper: 'Import Atomic Data to this resource', - onClick: () => navigate(importerURL(subject)), - }, + ...addIf( + canWrite, + { + id: ContextMenuOptions.Import, + icon: , + label: 'import', + helper: 'Import Atomic Data to this resource', + onClick: () => navigate(importerURL(subject)), + }, + { + disabled: !canWrite, + id: ContextMenuOptions.Delete, + icon: , + label: 'delete', + helper: 'Delete this resource.', + onClick: () => setShowDeleteDialog(true), + }, + ), ]; const filteredItems = showOnly @@ -205,7 +210,7 @@ function ResourceContextMenu({ const triggerComp = trigger ?? buildDefaultTrigger( - , + , title ?? `Open ${resource.title} menu`, ); diff --git a/browser/data-browser/src/components/ResourceUsage/ResourceUsage.tsx b/browser/data-browser/src/components/ResourceUsage/ResourceUsage.tsx index e02a1c992..8b910c60f 100644 --- a/browser/data-browser/src/components/ResourceUsage/ResourceUsage.tsx +++ b/browser/data-browser/src/components/ResourceUsage/ResourceUsage.tsx @@ -1,20 +1,21 @@ -import { Resource, classes, useCollection } from '@tomic/react'; +import { Resource, core, useCollection } from '@tomic/react'; import { PropertyUsage } from './PropertyUsage'; import { UsageCard } from './UsageCard'; import { ClassUsage } from './ClassUsage'; import { ChildrenUsage } from './ChildrenUsage'; +import { Column } from '../Row'; interface ResourceUsageProps { resource: Resource; } export function ResourceUsage({ resource }: ResourceUsageProps): JSX.Element { - if (resource.hasClasses(classes.property)) { + if (resource.hasClasses(core.classes.property)) { return ; } - if (resource.hasClasses(classes.class)) { + if (resource.hasClasses(core.classes.class)) { return ; } @@ -23,11 +24,11 @@ export function ResourceUsage({ resource }: ResourceUsageProps): JSX.Element { function BasicUsage({ resource }: ResourceUsageProps): JSX.Element { const { collection } = useCollection({ - value: resource.getSubject(), + value: resource.subject, }); return ( - <> + } /> - + ); } diff --git a/browser/data-browser/src/components/SideBar/ResourceSideBar/DropEdge.tsx b/browser/data-browser/src/components/SideBar/ResourceSideBar/DropEdge.tsx index 88714fa58..8c860198b 100644 --- a/browser/data-browser/src/components/SideBar/ResourceSideBar/DropEdge.tsx +++ b/browser/data-browser/src/components/SideBar/ResourceSideBar/DropEdge.tsx @@ -4,6 +4,7 @@ import { useState } from 'react'; import { transition } from '../../../helpers/transition'; import { SideBarDropData } from '../useSidebarDnd'; import { useCanWrite, useResource } from '@tomic/react'; +import { SIDEBAR_WIDTH_PROP } from '../SidebarCSSVars'; interface DropEdgeProps { parentHierarchy: string[]; @@ -62,7 +63,7 @@ const DropEdgeElement = styled.div<{ visible: boolean; active: boolean }>` background: ${p => p.theme.colors.main}; opacity: ${p => (p.active ? 1 : 0)}; z-index: 2; - width: calc(var(--width) - 2rem); + width: calc(var(${SIDEBAR_WIDTH_PROP}) - 2rem); ${transition('opacity', 'transform')} `; diff --git a/browser/data-browser/src/components/SideBar/ResourceSideBar/FloatingActions.tsx b/browser/data-browser/src/components/SideBar/ResourceSideBar/FloatingActions.tsx index 19d60a057..06b35ec3d 100644 --- a/browser/data-browser/src/components/SideBar/ResourceSideBar/FloatingActions.tsx +++ b/browser/data-browser/src/components/SideBar/ResourceSideBar/FloatingActions.tsx @@ -1,10 +1,7 @@ -import { useCanWrite, useResource, useTitle } from '@tomic/react'; import { useState } from 'react'; -import { FaEllipsisV, FaPlus } from 'react-icons/fa'; +import { FaEllipsisVertical } from 'react-icons/fa6'; import { styled, css } from 'styled-components'; -import { useNewRoute } from '../../../helpers/useNewRoute'; import { buildDefaultTrigger } from '../../Dropdown/DefaultTrigger'; -import { IconButton } from '../../IconButton/IconButton'; import ResourceContextMenu from '../../ResourceContextMenu'; export interface FloatingActionsProps { @@ -17,24 +14,10 @@ export function FloatingActions({ subject, className, }: FloatingActionsProps): JSX.Element { - const parentResource = useResource(subject); - const [parentName] = useTitle(parentResource); const [dropdownActive, setDropdownActive] = useState(false); - const [canWrite] = useCanWrite(parentResource); - - const handleAddClick = useNewRoute(subject); return ( - {canWrite && ( - - - - )} ` - visibility: ${p => (p.dropdownActive ? 'visible' : 'hidden')}; + visibility: hidden; font-size: 0.9rem; color: ${p => p.theme.colors.main}; + + @media (pointer: fine) { + visibility: ${p => (p.dropdownActive ? 'visible' : 'hidden')}; + } `; export const floatingHoverStyles = css` position: relative; &:hover ${Wrapper}, &:focus-within ${Wrapper} { - visibility: visible; + @media (pointer: fine) { + visibility: visible; + } } `; -const SideBarDropDownTrigger = buildDefaultTrigger(); +const SideBarDropDownTrigger = buildDefaultTrigger(); diff --git a/browser/data-browser/src/components/SideBar/ResourceSideBar/ResourceSideBar.tsx b/browser/data-browser/src/components/SideBar/ResourceSideBar/ResourceSideBar.tsx index 4409c95fd..1efeb8f28 100644 --- a/browser/data-browser/src/components/SideBar/ResourceSideBar/ResourceSideBar.tsx +++ b/browser/data-browser/src/components/SideBar/ResourceSideBar/ResourceSideBar.tsx @@ -55,7 +55,6 @@ export function ResourceSideBar({ resource, dataBrowser.properties.subResources, ); - const hasSubResources = subResources.length > 0; const dragData: SideBarDragData = { renderedUnder: renderedHierargy.at(-1)!, @@ -73,24 +72,6 @@ export function ResourceSideBar({ disabled: !canWrite, }); - const isDragging = draggingNode?.id === subject; - - useEffect(() => { - if (isDragging) { - setOpen(false); - } - }, [isDragging]); - - const isHoveringOver = over?.data.current?.parent === subject; - - useEffect(() => { - if (ancestry.includes(subject) && ancestry[0] !== subject) { - setOpen(true); - } - }, [ancestry]); - - const hierarchyWithItself = [...renderedHierargy, subject]; - const TitleComp = useMemo( () => ( 0; + const isDragging = draggingNode?.id === subject; + const isHoveringOver = over?.data.current?.parent === subject; + const hierarchyWithItself = [...renderedHierargy, subject]; + + useEffect(() => { + if (isDragging) { + setOpen(false); + } + }, [isDragging]); + + useEffect(() => { + if (ancestry.includes(subject) && ancestry[0] !== subject) { + setOpen(true); + } + }, [ancestry]); + if (resource.loading) { return ( unknown; + onItemClick: () => unknown; onIsRearangingChange: (isRearanging: boolean) => void; } /** Shows the current Drive, it's children and an option to change to a different Drive */ export function SideBarDrive({ - handleClickItem, + onItemClick, onIsRearangingChange, }: SideBarDriveProps): JSX.Element { const store = useStore(); @@ -52,7 +50,10 @@ export function SideBarDrive({ announcements, } = useSidebarDnd(onIsRearangingChange); const driveResource = useResource(drive); - const [subResources] = useArray(driveResource, urls.properties.subResources); + const [subResources] = useArray( + driveResource, + dataBrowser.properties.subResources, + ); const [title] = useTitle(driveResource); const navigate = useNavigate(); const [agentCanWrite] = useCanWrite(driveResource); @@ -74,7 +75,7 @@ export function SideBarDrive({ title={`Your current baseURL is ${drive}`} data-test='sidebar-drive-open' onClick={() => { - handleClickItem(); + onItemClick(); navigate(constructOpenURL(drive)); }} > @@ -83,15 +84,6 @@ export function SideBarDrive({ - {agentCanWrite && ( - navigate(paths.new)} - title={`Create a new resource in this drive (${shortcuts.new})`} - data-test='sidebar-new-resource' - > - - - )} @@ -117,7 +109,7 @@ export function SideBarDrive({ subject={child} renderedHierargy={[drive]} ancestry={ancestry} - onClick={handleClickItem} + onClick={onItemClick} /> @@ -133,6 +125,15 @@ export function SideBarDrive({ : driveResource.error.message)} )} + {agentCanWrite && ( + navigate(paths.new)} + > + + + )} {createPortal( @@ -182,3 +183,25 @@ const HeadingButtonWrapper = styled(Row)` const StyledScrollArea = styled(ScrollArea)` overflow: hidden; `; + +const AddButton = styled.button` + display: flex; + justify-content: center; + color: ${p => p.theme.colors.textLight}; + background: none; + appearance: none; + border: 1px dashed ${p => p.theme.colors.bg2}; + border-radius: ${p => p.theme.radius}; + width: calc(100% - 4rem); + padding-block: 0.3rem; + margin-inline-start: 1.5rem; + margin-block: 0.5rem; + cursor: pointer; + ${transition('color', 'border')} + + &:hover, + &:focus-visible { + color: ${p => p.theme.colors.main}; + border: 1px solid ${p => p.theme.colors.main}; + } +`; diff --git a/browser/data-browser/src/components/SideBar/SidebarCSSVars.ts b/browser/data-browser/src/components/SideBar/SidebarCSSVars.ts new file mode 100644 index 000000000..a5849cd63 --- /dev/null +++ b/browser/data-browser/src/components/SideBar/SidebarCSSVars.ts @@ -0,0 +1 @@ +export const SIDEBAR_WIDTH_PROP = '--sidebar-width'; diff --git a/browser/data-browser/src/components/SideBar/index.tsx b/browser/data-browser/src/components/SideBar/index.tsx index 5f46db09d..ec6778808 100644 --- a/browser/data-browser/src/components/SideBar/index.tsx +++ b/browser/data-browser/src/components/SideBar/index.tsx @@ -14,6 +14,7 @@ import { Column } from '../Row'; import { OntologiesPanel } from './OntologySideBar/OntologiesPanel'; import { SideBarPanel } from './SideBarPanel'; import { Panel, usePanelList } from './usePanelList'; +import { SIDEBAR_WIDTH_PROP } from './SidebarCSSVars'; /** Amount of pixels where the sidebar automatically shows */ export const SIDEBAR_TOGGLE_WIDTH = 600; @@ -69,7 +70,7 @@ export function SideBar(): JSX.Element { {/* The key is set to make sure the component is re-loaded when the baseURL changes */} @@ -119,7 +120,7 @@ interface SideBarOverlayProps { //@ts-ignore const SideBarStyled = styled.nav.attrs(p => ({ style: { - '--width': p.size, + [SIDEBAR_WIDTH_PROP]: p.size, }, }))` z-index: ${p => p.theme.zIndex.sidebar}; @@ -128,11 +129,12 @@ const SideBarStyled = styled.nav.attrs(p => ({ transition: opacity 0.3s, left 0.3s; - left: ${p => (p.exposed ? '0' : `calc(var(--width) * -1 + 0.5rem)`)}; + left: ${p => + p.exposed ? '0' : `calc(var(${SIDEBAR_WIDTH_PROP}) * -1 + 0.5rem)`}; /* When the user is hovering, show half opacity */ opacity: ${p => (p.exposed ? 1 : 0)}; height: 100vh; - width: var(--width); + width: var(${SIDEBAR_WIDTH_PROP}); position: ${p => (p.locked ? 'relative' : 'absolute')}; border-right: ${p => `1px solid ${p.theme.colors.bg2}`}; box-shadow: ${p => (p.locked ? 'none' : p.theme.boxShadowSoft)}; diff --git a/browser/data-browser/src/config.ts b/browser/data-browser/src/config.ts index d609ff0ee..659a4cc1b 100644 --- a/browser/data-browser/src/config.ts +++ b/browser/data-browser/src/config.ts @@ -1,5 +1,4 @@ /** Returns true if this is run in locally, in Development mode */ export function isDev(): boolean { - //@ts-ignore This key does exist return import.meta.env['MODE'] === 'development'; } diff --git a/browser/data-browser/src/helpers/addIf.ts b/browser/data-browser/src/helpers/addIf.ts new file mode 100644 index 000000000..1358251b1 --- /dev/null +++ b/browser/data-browser/src/helpers/addIf.ts @@ -0,0 +1,10 @@ +/** Simple helper function for adding items to an array only if the condition is true + * @example + * const someArray = [ + * 'pizza', + * ...addIf(likesCheese, 'cheese'), + * ]; + * + */ +export const addIf = (condition: boolean, ...items: T[]): T[] => + condition ? items : []; diff --git a/browser/data-browser/src/views/FolderPage/ListView.tsx b/browser/data-browser/src/views/FolderPage/ListView.tsx index 72e06ce46..1aec1fca0 100644 --- a/browser/data-browser/src/views/FolderPage/ListView.tsx +++ b/browser/data-browser/src/views/FolderPage/ListView.tsx @@ -50,7 +50,7 @@ export function ListView({ {showNewButton && ( - + New Resource diff --git a/browser/data-browser/src/views/OntologyPage/Property/PropertyWriteDialog.tsx b/browser/data-browser/src/views/OntologyPage/Property/PropertyWriteDialog.tsx index 4f386fe29..0d143c6cf 100644 --- a/browser/data-browser/src/views/OntologyPage/Property/PropertyWriteDialog.tsx +++ b/browser/data-browser/src/views/OntologyPage/Property/PropertyWriteDialog.tsx @@ -24,7 +24,7 @@ export function PropertyWriteDialog({ const shortnameProp = useProperty(urls.properties.shortname); return ( - + {dialogProps.show && ( <> @@ -35,19 +35,21 @@ export function PropertyWriteDialog({ property={shortnameProp} /> - + + {/* Spacer fixes an issue where the top border of the description field gets cut of by the container */} + - + )} ); } -const WiderDialogContent = styled(DialogContent)` - width: min(40rem, 90vw); +const Spacer = styled.div` + height: 2px; `; diff --git a/browser/e2e/tests/e2e.spec.ts b/browser/e2e/tests/e2e.spec.ts index ad5a13358..1e76381a1 100644 --- a/browser/e2e/tests/e2e.spec.ts +++ b/browser/e2e/tests/e2e.spec.ts @@ -403,8 +403,7 @@ test.describe('data-browser', async () => { await setTitle(page, d0); // Create a subresource, and later check it in the sidebar - await page.getByTestId('sidebar').getByText(d0).hover(); - await page.locator(`[title="Create new resource under ${d0}"]`).click(); + await page.getByTestId('new-resource-folder').click(); await page.click(`button:has-text("${klass}")`); const d1 = 'depth1'; diff --git a/browser/e2e/tests/filePicker.spec.ts b/browser/e2e/tests/filePicker.spec.ts index b606a0a65..328dc0762 100644 --- a/browser/e2e/tests/filePicker.spec.ts +++ b/browser/e2e/tests/filePicker.spec.ts @@ -8,7 +8,7 @@ import { fillSearchBox, newDrive, newResource, - sideBarNewResource, + sideBarNewResourceTestId, signIn, testFilePath, waitForCommit, @@ -17,7 +17,7 @@ import { const ONTOLOGY_NAME = 'filepicker-test'; const uploadFile = async (page: Page, fileName: string) => { - await page.locator(sideBarNewResource).click(); + await page.getByTestId(sideBarNewResourceTestId).click(); await expect(page).toHaveURL(`${FRONTEND_URL}/app/new`); const fileChooserPromise = page.waitForEvent('filechooser'); diff --git a/browser/e2e/tests/search.spec.ts b/browser/e2e/tests/search.spec.ts index eb5227219..b91eb6876 100644 --- a/browser/e2e/tests/search.spec.ts +++ b/browser/e2e/tests/search.spec.ts @@ -9,7 +9,7 @@ import { clickSidebarItem, editTitle, setTitle, - sideBarNewResource, + sideBarNewResourceTestId, } from './test-utils'; test.describe('search', async () => { test.beforeEach(before); @@ -26,7 +26,7 @@ test.describe('search', async () => { await newDrive(page); // Create folder called 1 - await page.locator(sideBarNewResource).click(); + await page.getByTestId(sideBarNewResourceTestId).click(); await page.locator('button:has-text("folder")').click(); await setTitle(page, 'Salad folder'); @@ -38,7 +38,7 @@ test.describe('search', async () => { await waitForCommit(page); await editTitle('Avocado Salad', page); - await page.locator(sideBarNewResource).click(); + await page.getByTestId(sideBarNewResourceTestId).click(); // Create folder called 'Cake folder' await page.locator('button:has-text("folder")').click(); diff --git a/browser/e2e/tests/test-utils.ts b/browser/e2e/tests/test-utils.ts index 2996e0a4d..ff0c43ff1 100644 --- a/browser/e2e/tests/test-utils.ts +++ b/browser/e2e/tests/test-utils.ts @@ -23,7 +23,7 @@ export const testFilePath = (filename: string) => { export const timestamp = () => new Date().toLocaleTimeString(); export const editableTitle = '[data-test="editable-title"]'; export const sideBarDriveSwitcher = '[title="Open Drive Settings"]'; -export const sideBarNewResource = '[data-test="sidebar-new-resource"]'; +export const sideBarNewResourceTestId = 'sidebar-new-resource'; export const currentDriveTitle = (page: Page) => page.getByTestId('current-drive-title'); export const publicReadRightLocator = (page: Page) => @@ -243,7 +243,7 @@ export async function fillSearchBox( /** Create a new Resource in the current Drive. * Class can be an Class URL or a shortname available in the new page. */ export async function newResource(klass: string, page: Page) { - await page.locator(sideBarNewResource).click(); + await page.getByTestId(sideBarNewResourceTestId).click(); await expect(page).toHaveURL(`${FRONTEND_URL}/app/new`); if (klass.startsWith('https://')) {