Merge pull request #3835 from specify/issue-3540

Add search box to splash screen
specify · Sep 26, 2023 · 4bc3c61 · 4bc3c61
2 parents 69fc738 + 57de74c
commit 4bc3c61
Show file tree

Hide file tree

Showing 4 changed files with 62 additions and 21 deletions.
diff --git a/specifyweb/frontend/js_src/lib/components/Header/ExpressSearchTask.tsx b/specifyweb/frontend/js_src/lib/components/Header/ExpressSearchTask.tsx
@@ -39,35 +39,45 @@ import { useMenuItem } from './useMenuItem';
 
 export function ExpressSearchOverlay(): JSX.Element {
   useMenuItem('search');
-  const [query = ''] = useSearchParameter('q');
-  const value = React.useState(query);
-  const [pendingQuery] = value;
-  const navigate = useNavigate();
   const formId = useId('express-search')('form');
   const handleClose = React.useContext(OverlayContext);
   return (
     <Dialog
       buttons={
         <>
           <Button.DialogClose>{commonText.cancel()}</Button.DialogClose>
-          <Submit.Blue form={formId}>{commonText.search()}</Submit.Blue>
+          <Submit.Save form={formId}>{commonText.search()}</Submit.Save>
         </>
       }
       header={headerText.simpleSearch()}
       onClose={handleClose}
     >
-      <Form
-        id={formId}
-        onSubmit={(): void =>
-          navigate(formatUrl('/specify/express-search/', { q: pendingQuery }))
-        }
-      >
-        <SearchField value={value} />
-      </Form>
+      <SearchForm formId={formId} />
     </Dialog>
   );
 }
 
+export function SearchForm({
+  formId,
+}: {
+  readonly formId: string;
+}): JSX.Element {
+  const navigate = useNavigate();
+  const [query = ''] = useSearchParameter('q');
+  const value = React.useState(query);
+  const [pendingQuery] = value;
+  return (
+    <Form
+      id={formId}
+      onSubmit={(): void =>
+        navigate(formatUrl('/specify/express-search/', { q: pendingQuery }))
+      }
+    >
+      <SearchField value={value} />
+    </Form>
+  );
+}
+
 function SearchField({
   value: [value, setValue],
 }: {
@@ -77,7 +87,7 @@ function SearchField({
     <Input.Generic
       aria-label={commonText.search()}
       autoComplete="on"
-      className="flex-1"
+      className="flex-1 bg-[color:var(--field-background)]"
       // Name is for autocomplete purposes only
       name="searchQuery"
       placeholder={commonText.search()}

diff --git a/specifyweb/frontend/js_src/lib/components/HomePage/index.tsx b/specifyweb/frontend/js_src/lib/components/HomePage/index.tsx
@@ -6,6 +6,10 @@ import { f } from '../../utils/functools';
 import { defaultWelcomePageImage } from '../Preferences/Renderers';
 import { userPreferences } from '../Preferences/userPreferences';
 import { Async } from '../Router/RouterUtils';
+import { SearchForm } from '../Header/ExpressSearchTask';
+import { useId } from '../../hooks/useId';
+import { Submit } from '../Atoms/Submit';
+import { commonText } from '../../localization/common';
 
 const taxonTiles = f.store(() => (
   <Async
@@ -20,20 +24,37 @@ const taxonTiles = f.store(() => (
 
 export function WelcomeView(): JSX.Element {
   const [mode] = userPreferences.use('welcomePage', 'general', 'mode');
+  const formId = useId('express-search')('form');
+
+  const [displaySearchBar] = userPreferences.use(
+    'welcomePage',
+    'general',
+    'addSearchBar'
+  );
 
   return (
-    <div
-      className={`
-        mx-auto flex h-full w-full max-w-[1000px] flex-col justify-center gap-4 p-4
-      `}
-    >
+    <div className="flex h-full flex-col">
+      {displaySearchBar && (
+        <div className="flex justify-end gap-2 pt-4 pr-4">
+          <SearchForm formId={formId} />
+          <Submit.Gray form={formId}>{commonText.search()}</Submit.Gray>
+        </div>
+      )}
       <div
         className={`
+        mx-auto flex w-full max-w-[1000px] flex-1 flex-col justify-center gap-4 p-4
+      `}
+      >
+        <span className="-ml-2 flex-1" />
+        <div
+          className={`
           flex min-h-0 items-center justify-center
           ${mode === 'embeddedWebpage' ? 'h-5/6' : ''}
         `}
-      >
-        {mode === 'taxonTiles' ? taxonTiles() : <WelcomeScreenContent />}
+        >
+          {mode === 'taxonTiles' ? taxonTiles() : <WelcomeScreenContent />}
+        </div>
+        <span className="-ml-2 flex-1" />
       </div>
     </div>
   );

diff --git a/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx b/specifyweb/frontend/js_src/lib/components/Preferences/UserDefinitions.tsx
@@ -500,6 +500,13 @@ export const userPreferenceDefinitions = {
       general: {
         title: preferencesText.general(),
         items: {
+          addSearchBar: defineItem<boolean>({
+            title: preferencesText.addSearchBarHomePage(),
+            requiresReload: false,
+            visible: true,
+            defaultValue: true,
+            type: 'java.lang.Boolean',
+          }),
           mode: defineItem<WelcomePageMode>({
             title: preferencesText.content(),
             description: (

diff --git a/specifyweb/frontend/js_src/lib/localization/preferences.ts b/specifyweb/frontend/js_src/lib/localization/preferences.ts
@@ -1905,4 +1905,7 @@ export const preferencesText = createDictionary({
     'ru-ru': 'Миниатюра',
     'uk-ua': 'Мініатюра',
   },
+  addSearchBarHomePage: {
+    'en-us': 'Add Search Bar on home page',
+  },
 } as const);