Redesign search bar to make it clear that it is a search bar. #936

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
 

browser/data-browser/src/components/Navigation.tsx

@@ -128,6 +128,7 @@ function NavBar(): JSX.Element {
           )}
         </>
       )}
+      <VerticalDivider />
       <Searchbar
         subject={subject}
         onFocus={maybeHideButtons}
@@ -199,6 +200,12 @@ const NavBarFixed = styled(NavBarBase)`
   }
 `;
 
+const VerticalDivider = styled.div`
+  width: 1px;
+  background-color: ${props => props.theme.colors.bg2};
+  height: 100%;
+  margin-left: ${p => p.theme.size(2)};
+`;
 const SideBarWrapper = styled('div')`
   display: flex;
   height: 100vh;

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;

browser/data-browser/src/components/ResourceContextMenu/index.tsx

@@ -167,9 +167,9 @@ function ResourceContextMenu({
     },
     {
       id: ContextMenuOptions.Share,
-      label: 'share',
+      label: 'Permissions & Invites',
       icon: <FaShare />,
-      helper: 'Open the share menu',
+      helper: 'Edit permissions and create invites.',
       onClick: () => navigate(shareURL(subject)),
     },
 

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<HTMLInputElement>;
@@ -29,13 +31,16 @@ export function Searchbar({
   const [input, setInput] = useState<string | undefined>('');
   const [query] = useSearchQuery();
   const { scope, clearScope } = useQueryScopeHandler();
-
+  const searchBarRef = useRef<HTMLFormElement>(null);
   const [inputRef, setInputFocus] = useFocus();
   const navigate = useNavigate();
 
-  function handleSelect(e) {
-    e.target.select();
-  }
+  const handleSelect: React.MouseEventHandler<HTMLInputElement> = 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 (
-    <Form onSubmit={handleSubmit} autoComplete='off'>
+    <Form onSubmit={handleSubmit} autoComplete='off' ref={searchBarRef}>
+      <IconButton
+        color='textLight'
+        title='Start searching'
+        type='button'
+        onClick={onSearchButtonClick}
+      >
+        <FaMagnifyingGlass />
+      </IconButton>
       {scope && <ParentTag subject={scope} onClick={clearScope} />}
       <Input
         autoComplete='false'
@@ -153,11 +171,13 @@ function ParentTag({ subject, onClick }: ParentTagProps): JSX.Element {
 const Input = styled.input`
   border: none;
   font-size: 0.9rem;
-  padding: 0.4rem 1.2rem;
+  padding-block: 0.4rem;
+  padding-inline-start: 0rem;
   color: ${props => 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 {

browser/data-browser/src/helpers/useFocus.tsx

@@ -5,7 +5,7 @@ export const useFocus = (): [React.RefObject<unknown>, () => void] => {
   const htmlElRef = useRef<HTMLElement>(null);
 
   const setFocus = () => {
-    htmlElRef.current && htmlElRef.current.focus();
+    htmlElRef.current?.focus();
   };
 
   return [htmlElRef, setFocus];

browser/data-browser/src/routes/Share/ShareRoute.tsx

@@ -49,7 +49,7 @@ export function ShareRoute(): JSX.Element {
     <Main subject={subject}>
       <ContainerNarrow>
         <Column>
-          <Title resource={resource} prefix='Share settings' link />
+          <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>

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',