Merge pull request #1105 from jay-hodgson/SWC-7005

SWC-7005

packages/synapse-react-client/package.json

@@ -1,6 +1,6 @@
 {
   "name": "synapse-react-client",
-  "version": "3.3.4",
+  "version": "3.3.5",
   "private": false,
   "type": "module",
   "main": "./dist/index.cjs",

packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageSearch.tsx

@@ -39,6 +39,11 @@ const PopperAlwaysPlacedBelow = (props: PopperProps) => {
   )
 }
 
+/**
+ * Synapse Homepage Search component with a dropdown "autocomplete" menu of options.
+ * SWC-7005: Not used in the current implementation of the Home Page, but there are plans to utilize it later.
+ * @returns
+ */
 export const SynapseHomepageSearch: React.FunctionComponent<
   SynapseHomepageSearchProps
 > = ({ sourceTable, gotoPlace }) => {

packages/synapse-react-client/src/components/SynapseHomepageV2/SynapseHomepageV2.tsx

@@ -1,4 +1,4 @@
-import React from 'react'
+import React, { useState } from 'react'
 import {
   Box,
   Button,
@@ -8,6 +8,9 @@ import {
   useTheme,
   useMediaQuery,
   Link,
+  FormControl,
+  OutlinedInput,
+  InputAdornment,
 } from '@mui/material'
 import { TypeAnimation } from 'react-type-animation'
 import { ReactComponent as Image1 } from '../../assets/homepage/image1.svg'
@@ -21,12 +24,10 @@ import { SynapsePlans } from './SynapsePlans'
 import { useInView } from 'react-intersection-observer'
 import SageFullLogo from '../../assets/icons/SageFullLogo'
 import { SynapseFeaturedDatasets } from './SynapseFeaturedDatasets'
-import {
-  SynapseHomepageSearch,
-  SynapseHomepageSearchProps,
-} from './SynapseHomepageSearch'
 import { SynapseHomepageNavBar } from './SynapseHomepageNavBar'
 import BlinkingLiveIcon from '../../assets/homepage/BlinkingLiveIcon'
+import { Search } from '../../assets/themed_icons'
+import { ColorPartial } from '@mui/material/styles/createPalette'
 
 export const synapseInActionTable = 'syn61670075'
 export const past30DaysDownloadMetricsTable = 'syn61597084'
@@ -90,10 +91,10 @@ const sidePadding: SxProps = {
   },
 }
 
-export type SynapseHomepageV2Props = Pick<
-  SynapseHomepageSearchProps,
-  'gotoPlace'
->
+export type SynapseHomepageV2Props = {
+  gotoPlace: (href: string) => void
+}
+
 export const SynapseHomepageV2: React.FunctionComponent<
   SynapseHomepageV2Props
 > = ({ gotoPlace }) => {
@@ -102,6 +103,10 @@ export const SynapseHomepageV2: React.FunctionComponent<
   const isDesktopView = useMediaQuery(theme.breakpoints.up('lg'))
   //optimization - prioritize loading above-the-fold content (delay loading below the fold)
   const { ref, inView } = useInView({ triggerOnce: true })
+  const [searchValue, setSearchValue] = useState('')
+  const onSearch = (value: string) => {
+    gotoPlace(`/Search:${encodeURIComponent(value)}`)
+  }
   return (
     <Box sx={{ overflow: 'hidden' }}>
       <SynapseHomepageNavBar gotoPlace={gotoPlace} />
@@ -191,11 +196,31 @@ export const SynapseHomepageV2: React.FunctionComponent<
           maxWidth: '600px',
           m: 'auto',
         }}
+        component="form"
+        onSubmit={event => {
+          event.preventDefault()
+          onSearch(searchValue)
+        }}
       >
-        <SynapseHomepageSearch
+        {/* <SynapseHomepageSearch
           sourceTable={searchAutocompleteTable}
           gotoPlace={gotoPlace}
-        />
+        /> */}
+        <FormControl fullWidth sx={{ m: 1 }}>
+          <OutlinedInput
+            startAdornment={
+              <InputAdornment position="start" sx={{ ml: '7px', mr: '13px' }}>
+                <Search
+                  size={32}
+                  fill={(theme.palette.secondary as ColorPartial)[600]}
+                />
+              </InputAdornment>
+            }
+            placeholder="Search Synapse"
+            sx={{ fontSize: '24px', borderRadius: 96.6 }}
+            onChange={event => setSearchValue(event.target.value)}
+          />
+        </FormControl>
       </Box>
       <Box
         sx={{

packages/synapse-react-client/src/components/SynapseHomepageV2/__snapshots__/SynapseHomepageV2.test.tsx.snap

@@ -143,80 +143,61 @@ exports[`SynapseHomepageV2 Snapshot test Basic home page 1`] = `
         />
       </p>
     </div>
-    <div
+    <form
       class="MuiBox-root css-lcciv2"
     >
       <div
         class="MuiFormControl-root MuiFormControl-fullWidth css-1w4vsez-MuiFormControl-root"
       >
         <div
-          class="MuiAutocomplete-root css-1h51icj-MuiAutocomplete-root"
+          class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-formControl MuiInputBase-adornedStart css-1cpskr6-MuiInputBase-root-MuiOutlinedInput-root"
         >
           <div
-            class="MuiFormControl-root MuiFormControl-fullWidth MuiTextField-root css-1sskpx2-MuiFormControl-root-MuiTextField-root"
+            class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-bwd1ch-MuiInputAdornment-root"
           >
-            <div
-              class="MuiInputBase-root MuiOutlinedInput-root MuiInputBase-colorPrimary MuiInputBase-fullWidth MuiInputBase-formControl MuiInputBase-adornedStart MuiAutocomplete-inputRoot css-goq8cm-MuiInputBase-root-MuiOutlinedInput-root"
+            <span
+              class="notranslate"
             >
-              <div
-                class="MuiInputAdornment-root MuiInputAdornment-positionStart MuiInputAdornment-outlined MuiInputAdornment-sizeMedium css-ittuaa-MuiInputAdornment-root"
-              >
-                <span
-                  class="notranslate"
-                >
-                  ​
-                </span>
-                <div
-                  class="MuiBox-root css-is4m64"
-                >
-                  <svg
-                    data-icon="search"
-                    fill="none"
-                    height="32"
-                    viewBox="0 0 16 16"
-                    width="32"
-                    xmlns="http://www.w3.org/2000/svg"
-                  >
-                    <path
-                      d="M5.94286 0C7.519 0 9.03059 0.62612 10.1451 1.74062C11.2596 2.85512 11.8857 4.36671 11.8857 5.94286C11.8857 7.41486 11.3463 8.768 10.4594 9.81029L10.7063 10.0571H11.4286L16 14.6286L14.6286 16L10.0571 11.4286V10.7063L9.81029 10.4594C8.768 11.3463 7.41486 11.8857 5.94286 11.8857C4.36671 11.8857 2.85512 11.2596 1.74062 10.1451C0.62612 9.03059 0 7.519 0 5.94286C0 4.36671 0.62612 2.85512 1.74062 1.74062C2.85512 0.62612 4.36671 0 5.94286 0V0ZM5.94286 1.82857C3.65714 1.82857 1.82857 3.65714 1.82857 5.94286C1.82857 8.22857 3.65714 10.0571 5.94286 10.0571C8.22857 10.0571 10.0571 8.22857 10.0571 5.94286C10.0571 3.65714 8.22857 1.82857 5.94286 1.82857Z"
-                      fill="#38756a"
-                    />
-                  </svg>
-                </div>
-              </div>
-              <input
-                aria-autocomplete="list"
-                aria-expanded="false"
-                aria-invalid="false"
-                autocapitalize="none"
-                autocomplete="off"
-                class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart MuiAutocomplete-input MuiAutocomplete-inputFocused css-1ax511m-MuiInputBase-input-MuiOutlinedInput-input"
-                id=":r0:"
-                placeholder="Search Synapse"
-                role="combobox"
-                spellcheck="false"
-                type="text"
-                value=""
+              ​
+            </span>
+            <svg
+              data-icon="search"
+              fill="none"
+              height="32"
+              viewBox="0 0 16 16"
+              width="32"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M5.94286 0C7.519 0 9.03059 0.62612 10.1451 1.74062C11.2596 2.85512 11.8857 4.36671 11.8857 5.94286C11.8857 7.41486 11.3463 8.768 10.4594 9.81029L10.7063 10.0571H11.4286L16 14.6286L14.6286 16L10.0571 11.4286V10.7063L9.81029 10.4594C8.768 11.3463 7.41486 11.8857 5.94286 11.8857C4.36671 11.8857 2.85512 11.2596 1.74062 10.1451C0.62612 9.03059 0 7.519 0 5.94286C0 4.36671 0.62612 2.85512 1.74062 1.74062C2.85512 0.62612 4.36671 0 5.94286 0V0ZM5.94286 1.82857C3.65714 1.82857 1.82857 3.65714 1.82857 5.94286C1.82857 8.22857 3.65714 10.0571 5.94286 10.0571C8.22857 10.0571 10.0571 8.22857 10.0571 5.94286C10.0571 3.65714 8.22857 1.82857 5.94286 1.82857Z"
+                fill="#38756a"
               />
-              <fieldset
-                aria-hidden="true"
-                class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
-              >
-                <legend
-                  class="css-ihdtdm"
-                >
-                  <span
-                    class="notranslate"
-                  >
-                    ​
-                  </span>
-                </legend>
-              </fieldset>
-            </div>
+            </svg>
           </div>
+          <input
+            aria-invalid="false"
+            class="MuiInputBase-input MuiOutlinedInput-input MuiInputBase-inputAdornedStart css-1ax511m-MuiInputBase-input-MuiOutlinedInput-input"
+            placeholder="Search Synapse"
+            type="text"
+            value=""
+          />
+          <fieldset
+            aria-hidden="true"
+            class="MuiOutlinedInput-notchedOutline css-1d3z3hw-MuiOutlinedInput-notchedOutline"
+          >
+            <legend
+              class="css-ihdtdm"
+            >
+              <span
+                class="notranslate"
+              >
+                ​
+              </span>
+            </legend>
+          </fieldset>
         </div>
       </div>
-    </div>
+    </form>
     <div
       class="MuiBox-root css-17hmknl"
     >