From f2ba24794fd6dc2233bb119c89f3ef350b405eae Mon Sep 17 00:00:00 2001 From: Polle Pas Date: Mon, 19 Aug 2024 15:48:08 +0200 Subject: [PATCH] Redesign search bar to make it clear that it is a search bar. #936 --- browser/CHANGELOG.md | 1 + .../src/components/Navigation.tsx | 7 ++++ .../data-browser/src/components/Parent.tsx | 1 + .../components/ResourceContextMenu/index.tsx | 4 +- .../data-browser/src/components/Searchbar.tsx | 37 +++++++++++++++---- browser/data-browser/src/helpers/useFocus.tsx | 2 +- .../src/routes/Share/ShareRoute.tsx | 16 ++++++-- browser/e2e/tests/test-utils.ts | 2 +- 8 files changed, 55 insertions(+), 15 deletions(-) diff --git a/browser/CHANGELOG.md b/browser/CHANGELOG.md index 9d6304e81..f26f7ee41 100644 --- a/browser/CHANGELOG.md +++ b/browser/CHANGELOG.md @@ -22,6 +22,7 @@ This changelog covers all five packages, as they are (for now) updated as a whol - [#906](https://github.com/atomicdata-dev/atomic-server/issues/906) Reset changes after clicking the cancel button in a form or navigating away. - [#914](https://github.com/atomicdata-dev/atomic-server/issues/914) Fix an issue where changing the subject in a new resource form could update the parent of existing resources if their subject matched the new subject. - [#919](https://github.com/atomicdata-dev/atomic-server/issues/919) Automatically sort classes and properties in the ontology editor. +- [#936](https://github.com/atomicdata-dev/atomic-server/issues/936) Updated the address bar to make it clearer it's also search bar. ### @tomic/lib diff --git a/browser/data-browser/src/components/Navigation.tsx b/browser/data-browser/src/components/Navigation.tsx index d08cd256d..1f3830a8a 100644 --- a/browser/data-browser/src/components/Navigation.tsx +++ b/browser/data-browser/src/components/Navigation.tsx @@ -128,6 +128,7 @@ function NavBar(): JSX.Element { )} )} + props.theme.colors.bg2}; + height: 100%; + margin-left: ${p => p.theme.size(2)}; +`; const SideBarWrapper = styled('div')` display: flex; height: 100vh; diff --git a/browser/data-browser/src/components/Parent.tsx b/browser/data-browser/src/components/Parent.tsx index a025e469d..f30310742 100644 --- a/browser/data-browser/src/components/Parent.tsx +++ b/browser/data-browser/src/components/Parent.tsx @@ -167,6 +167,7 @@ const Spacer = styled.span` const ButtonArea = styled.div` justify-self: flex-end; + color: ${p => p.theme.colors.textLight}; `; export default Parent; diff --git a/browser/data-browser/src/components/ResourceContextMenu/index.tsx b/browser/data-browser/src/components/ResourceContextMenu/index.tsx index 43c72f58a..43a0327c5 100644 --- a/browser/data-browser/src/components/ResourceContextMenu/index.tsx +++ b/browser/data-browser/src/components/ResourceContextMenu/index.tsx @@ -167,9 +167,9 @@ function ResourceContextMenu({ }, { id: ContextMenuOptions.Share, - label: 'share', + label: 'Permissions & Invites', icon: , - helper: 'Open the share menu', + helper: 'Edit permissions and create invites.', onClick: () => navigate(shareURL(subject)), }, diff --git a/browser/data-browser/src/components/Searchbar.tsx b/browser/data-browser/src/components/Searchbar.tsx index 0b6417e65..61da85233 100644 --- a/browser/data-browser/src/components/Searchbar.tsx +++ b/browser/data-browser/src/components/Searchbar.tsx @@ -1,6 +1,6 @@ import { Client, useResource, useTitle } from '@tomic/react'; import { transparentize } from 'polished'; -import { useEffect, useState } from 'react'; +import React, { useEffect, useRef, useState } from 'react'; import { useHotkeys } from 'react-hotkeys-hook'; import { FaTimes } from 'react-icons/fa'; import { useNavigate } from 'react-router'; @@ -14,6 +14,8 @@ import { useFocus } from '../helpers/useFocus'; import { useQueryScopeHandler } from '../hooks/useQueryScope'; import { shortcuts } from './HotKeyWrapper'; import { IconButton, IconButtonVariant } from './IconButton/IconButton'; +import { FaMagnifyingGlass } from 'react-icons/fa6'; +import { isURL } from '../helpers/isURL'; export interface SearchbarProps { onFocus?: React.FocusEventHandler; @@ -29,13 +31,16 @@ export function Searchbar({ const [input, setInput] = useState(''); const [query] = useSearchQuery(); const { scope, clearScope } = useQueryScopeHandler(); - + const searchBarRef = useRef(null); const [inputRef, setInputFocus] = useFocus(); const navigate = useNavigate(); - function handleSelect(e) { - e.target.select(); - } + const handleSelect: React.MouseEventHandler = e => { + if (isURL(input ?? '')) { + // @ts-ignore + e.target.select(); + } + }; function handleChange(e) { setInput(e.target.value); @@ -62,6 +67,11 @@ export function Searchbar({ navigate(constructOpenURL(subject)); }; + const onSearchButtonClick = () => { + navigate(searchURL('', scope), { replace: true }); + setInputFocus(); + }; + useHotkeys(shortcuts.search, e => { e.preventDefault(); //@ts-ignore this does seem callable @@ -104,7 +114,15 @@ export function Searchbar({ }, [query, scope, subject]); return ( -
+ + + + {scope && } props.theme.colors.text}; width: 100%; flex: 1; min-width: 1rem; + height: 100%; background-color: ${props => props.theme.colors.bg}; // Outline is handled by the Navbar. outline: none; @@ -167,9 +187,10 @@ const Input = styled.input` const Form = styled.form` flex: 1; height: 100%; + gap: 0.5rem; display: flex; align-items: center; - padding-inline: 1rem; + padding-inline: ${p => p.theme.size(3)}; border-radius: 999px; :hover { diff --git a/browser/data-browser/src/helpers/useFocus.tsx b/browser/data-browser/src/helpers/useFocus.tsx index 3847670bb..8d5b31d4b 100644 --- a/browser/data-browser/src/helpers/useFocus.tsx +++ b/browser/data-browser/src/helpers/useFocus.tsx @@ -5,7 +5,7 @@ export const useFocus = (): [React.RefObject, () => void] => { const htmlElRef = useRef(null); const setFocus = () => { - htmlElRef.current && htmlElRef.current.focus(); + htmlElRef.current?.focus(); }; return [htmlElRef, setFocus]; diff --git a/browser/data-browser/src/routes/Share/ShareRoute.tsx b/browser/data-browser/src/routes/Share/ShareRoute.tsx index 92a1f90b2..765b5a466 100644 --- a/browser/data-browser/src/routes/Share/ShareRoute.tsx +++ b/browser/data-browser/src/routes/Share/ShareRoute.tsx @@ -49,7 +49,7 @@ export function ShareRoute(): JSX.Element {
- + <Title resource={resource} prefix='Permissions for' link /> {canWrite && !showInviteForm && ( <span> <Button onClick={() => setShowInviteForm(true)}> @@ -61,7 +61,7 @@ export function ShareRoute(): JSX.Element { {showInviteForm && <InviteForm target={resource} />} <Card> <Column> - <RightsHeader>Rights set here:</RightsHeader> + <RightsHeader>Permissions set here:</RightsHeader> <CardInsideFull> {/* This key might be a bit too much, but the component wasn't properly re-rendering before */} {resourceRights.map(right => ( @@ -93,7 +93,7 @@ export function ShareRoute(): JSX.Element { {inheritedRights.length > 0 && ( <Card> <Column> - <RightsHeader>Inherited rights:</RightsHeader> + <RightsHeader>Inherited permissions:</RightsHeader> <CardInsideFull> {inheritedRights.map(right => ( <AgentRights @@ -108,6 +108,16 @@ export function ShareRoute(): JSX.Element { </Column> </Card> )} + <p> + Read more about permissions in the{' '} + <a + target='_blank' + href='https://docs.atomicdata.dev/hierarchy' + rel='noreferrer' + > + Atomic Data Docs + </a> + </p> </Column> </ContainerNarrow> </Main> diff --git a/browser/e2e/tests/test-utils.ts b/browser/e2e/tests/test-utils.ts index ff0c43ff1..293173191 100644 --- a/browser/e2e/tests/test-utils.ts +++ b/browser/e2e/tests/test-utils.ts @@ -121,7 +121,7 @@ export async function newDrive(page: Page) { export async function makeDrivePublic(page: Page) { await currentDriveTitle(page).click(); await page.click(contextMenu); - await page.click('button:has-text("share")'); + await page.getByRole('menuitem', { name: 'Permissions & Invites' }).click(); await expect( publicReadRightLocator(page), 'The drive was public from the start',