Source table improvements

src/components/SourcesTableModal/SourcesView/Sources/Search/index.tsx

@@ -0,0 +1,72 @@
+import { Divider } from '@mui/material'
+import IconButton from '@mui/material/IconButton'
+import InputBase from '@mui/material/InputBase'
+import Paper from '@mui/material/Paper'
+import { ChangeEvent, useState } from 'react'
+import styled from 'styled-components'
+import ClearIcon from '~/components/Icons/ClearIcon'
+import SearchIcon from '~/components/Icons/SearchIcon'
+
+type Props = {
+  onSearch: (v: string) => void
+}
+
+export const Search = ({ onSearch }: Props) => {
+  const [inputValue, setInputValue] = useState('')
+
+  const handleSearch = (e: { preventDefault: () => void }) => {
+    e.preventDefault()
+    onSearch(inputValue)
+  }
+
+  const resetSearch = () => {
+    setInputValue('')
+    onSearch('')
+  }
+
+  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
+    !e.target.value && resetSearch()
+    setInputValue(e.target.value)
+  }
+
+  return (
+    <Wrapper onSubmit={handleSearch}>
+      <InputBase
+        autoComplete="off"
+        autoCorrect="off"
+        inputProps={{ 'aria-label': 'search sources' }}
+        onChange={handleChange}
+        placeholder="Search"
+        size="small"
+        spellCheck="false"
+        sx={{ ml: 1, flex: 1, fontSize: 14, alignSelf: 'center' }}
+        value={inputValue}
+      />
+      {inputValue && (
+        <>
+          <StyledButton aria-label="search" onClick={resetSearch} type="button">
+            <ClearIcon />
+          </StyledButton>
+          <Divider orientation="vertical" sx={{ height: 28, m: 0.5 }} />
+        </>
+      )}
+      <StyledButton aria-label="search" onClick={handleSearch} type="button">
+        <SearchIcon />
+      </StyledButton>
+    </Wrapper>
+  )
+}
+
+const StyledButton = styled(IconButton)`
+  font-size: 24px;
+`
+
+const Wrapper = styled(Paper)`
+  && {
+    padding: 2px 4px;
+    display: flex;
+    align-items: center;
+    width: 300px;
+    margin: 0 36px 16px 36px;
+  }
+`

src/components/SourcesTableModal/SourcesView/Sources/index.tsx

@@ -1,6 +1,6 @@
 import { Button } from '@mui/material'
 import clsx from 'clsx'
-import { useEffect, useState } from 'react'
+import { useEffect, useMemo, useState } from 'react'
 import { MdRestartAlt } from 'react-icons/md'
 import { ClipLoader } from 'react-spinners'
 import { toast } from 'react-toastify'
@@ -18,6 +18,7 @@ import { colors } from '~/utils/colors'
 import { executeIfProd } from '~/utils/tests'
 import { Heading, StyledPill } from '../common'
 import { sourcesMapper } from '../constants'
+import { Search } from './Search'
 import Table from './Table'
 
 const admins = [
@@ -33,6 +34,7 @@ export const Sources = () => {
   const [typeFilter, setTypeFilter] = useState('')
   const [sources, setSources] = useDataStore((s) => [s.sources, s.setSources])
   const [setIsAdmin, isAdmin, setPubKey, pubKey] = useUserStore((s) => [s.setIsAdmin, s.isAdmin, s.setPubKey, s.pubKey])
+  const [search, setSearch] = useState('')
 
   useEffect(() => {
     const init = async () => {
@@ -116,6 +118,7 @@ export const Sources = () => {
           onClick={authorize}
           size="medium"
           startIcon={<ShieldPersonIcon />}
+          sx={{ alignSelf: 'flex-end', m: '0 36px 16px 0' }}
           variant="contained"
         >
           Admin
@@ -134,14 +137,26 @@ export const Sources = () => {
     return <Text>You are not admin</Text>
   }
 
-  const tableValues = sources?.filter((val: TSources) => !typeFilter || val.source_type === typeFilter)
+  const tableValues = useMemo(
+    () =>
+      sources
+        ?.filter(
+          (val: TSources) =>
+            (!typeFilter || val.source_type === typeFilter) &&
+            (val.source.toLowerCase().startsWith(search.toLowerCase()) ||
+              val.source.toLowerCase().includes(search.toLowerCase())),
+        )
+        .reverse(),
+    [search, typeFilter, sources],
+  )
 
   return (
     <Wrapper align="stretch" direction="column" justify="flex-end">
       <Heading align="center" direction="row" justify="space-between">
         <Text className="title">Sources for this Graph</Text>
         {resolveAdminActions()}
       </Heading>
+      <Search onSearch={setSearch} />
       <Flex className="filters" direction="row" pb={16} px={36}>
         <StyledPill className={clsx({ selected: !typeFilter })} onClick={() => onFilterChange('')} size="small">
           All
@@ -167,7 +182,6 @@ export const Sources = () => {
 const Wrapper = styled(Flex)`
   flex: 1;
   .title {
-    margin-bottom: 16px;
     font-size: 20px;
     color: ${colors.white};
     font-family: Barlow;