Custom labels: update search and DataView

package.json

@@ -25,7 +25,7 @@
   },
   "dependencies": {
     "@aragon/templates-tokens": "^1.2.1",
-    "@aragon/ui": "^1.0.0-alpha.27",
+    "@aragon/ui": "^1.0.0-alpha.30",
     "@aragon/wrapper": "^5.0.0-rc.17",
     "@babel/polyfill": "^7.0.0",
     "@sentry/browser": "^5.5.0",

src/components/GlobalPreferences/CustomLabels/CustomLabels.js

@@ -46,10 +46,9 @@ function CustomLabels({ wrapper, dao, locator }) {
     wrapper,
   })
   const { handleShowLocalIdentityModal } = useLocalIdentityModal()
-  const handleClearSearchTerm = useCallback(
-    () => handleSearchTermChange({ currentTarget: { value: '' } }),
-    [handleSearchTermChange]
-  )
+  const handleClearSearchTerm = useCallback(() => handleSearchTermChange(''), [
+    handleSearchTermChange,
+  ])
   const { sortedIdentities, sort, handleToggleSort } = useSort(
     filteredIdentities
   )

src/components/GlobalPreferences/CustomLabels/LocalIdentities.js

@@ -2,7 +2,6 @@ import React, { useCallback } from 'react'
 import PropTypes from 'prop-types'
 import styled from 'styled-components'
 import {
-  Box,
   Button,
   ButtonBase,
   DataView,
@@ -13,18 +12,15 @@ import {
   IconDownload,
   IconExternal,
   IconGrid,
-  IconSearch,
   IconShare,
   IconTrash,
   Info,
-  TextInput,
-  SearchInput,
   useTheme,
   useLayout,
   useToast,
   textStyle,
 } from '@aragon/ui'
-import EmptyFilteredIdentities from './EmptyFilteredIdentities'
+import Search from './Search'
 import Import from './Import'
 import LocalIdentityBadge from '../../IdentityBadge/LocalIdentityBadge'
 import { ASC, DESC } from './useSort'
@@ -53,14 +49,6 @@ const LocalIdentities = React.memo(function LocalIdentities({
   const compact = layoutName === 'small'
   const theme = useTheme()
 
-  if (!identities.length) {
-    return (
-      <Box>
-        <EmptyFilteredIdentities onClear={onClear} />
-      </Box>
-    )
-  }
-
   return (
     <React.Fragment>
       <Info
@@ -75,6 +63,8 @@ const LocalIdentities = React.memo(function LocalIdentities({
       </Info>
       <DataView
         mode="table"
+        status={identities.length > 0 ? 'default' : 'empty-search'}
+        onStatusEmptyClear={onClear}
         heading={
           <Filters
             searchTerm={searchTerm}
@@ -208,11 +198,6 @@ const Filters = React.memo(function Filters({
 }) {
   const { layoutName } = useLayout()
   const compact = layoutName === 'small'
-  const theme = useTheme()
-  const searchStyles = `
-    ${textStyle('body2')};
-    color: ${searchTerm.trim() ? theme.surfaceContent : theme.hint};
-  `
 
   return (
     <div
@@ -225,71 +210,16 @@ const Filters = React.memo(function Filters({
         margin-bottom: ${2 * GU}px;
       `}
     >
-      <div
-        css={`
-          position: relative;
-        `}
-      >
-        {compact ? (
-          <TextInput
-            adornment={
-              <IconSearch
-                css={`
-                  color: ${theme.surfaceOpened};
-                `}
-              />
-            }
-            adornmentPosition="end"
-            placeholder="Search"
-            onChange={onSearchChange}
-            value={searchTerm}
-            css={`
-              width: ${25 * GU}px;
-              ${searchStyles};
-            `}
-          />
-        ) : (
-          <SearchInput
-            onChange={onSearchTerm}
-            value={searchTerm}
-            placeholder="Search"
-            css={`
-              width: ${30 * GU}px;
-              ${searchStyles};
-            `}
-          />
-        )}
-      </div>
+      <Search onChange={onSearchChange} value={searchTerm} />
       {!iOS && (
         <Import
           onImport={onImport}
           button={
             <Button
-              css={`
-                ${compact &&
-                  `
-                      width: ${5 * GU}px;
-                      min-width: unset;
-                      padding: 0;
-                    `}
-              `}
-            >
-              <IconDownload
-                css={`
-                  color: ${theme.surfaceOpened};
-                `}
-              />
-              {!compact && (
-                <span
-                  css={`
-                    display: inline-block;
-                    padding-left: ${1.5 * GU}px;
-                  `}
-                >
-                  Import
-                </span>
-              )}
-            </Button>
+              icon={<IconDownload />}
+              label="Import"
+              display={compact ? 'icon' : 'auto'}
+            />
           }
         />
       )}
@@ -385,9 +315,9 @@ const Actions = React.memo(function Actions({
           </ActionSpan>,
         ]}
         placeholder={
-          <span
+          <div
             css={`
-              height: 24px;
+              height: ${3 * GU}px;
               $textStyle('body2');
               color: ${
                 disabled ? theme.contentSecondary : theme.surfaceContent
@@ -412,7 +342,7 @@ const Actions = React.memo(function Actions({
               `}
             />
             {!compact && <span css="text-align: left;">Actions</span>}
-          </span>
+          </div>
         }
         onChange={handleChange}
       />
@@ -438,5 +368,4 @@ const ActionSpan = styled.span`
     text-align: left;
   }
 `
-
-export default React.memo(LocalIdentities)
+export default LocalIdentities

src/components/GlobalPreferences/CustomLabels/Search.js

@@ -0,0 +1,111 @@
+import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react'
+import PropTypes from 'prop-types'
+import {
+  Button,
+  GU,
+  IconCross,
+  IconSearch,
+  SearchInput,
+  useTheme,
+  useLayout,
+  textStyle,
+} from '@aragon/ui'
+
+const SEARCH_CLOSED = Symbol('closed')
+const SEARCH_OPEN = Symbol('open')
+const EMPTY = ''
+
+function getDefaultSearchState(compact) {
+  return compact ? SEARCH_CLOSED : SEARCH_OPEN
+}
+
+const Search = React.memo(function Search({ onChange, value }) {
+  const { layoutName } = useLayout()
+  const compact = layoutName === 'small'
+  const theme = useTheme()
+
+  const [mode, setMode] = useState(getDefaultSearchState(compact))
+  const open = useCallback(() => setMode(SEARCH_OPEN), [setMode])
+
+  const searchInputRef = useRef()
+
+  const clear = useCallback(() => {
+    setMode(getDefaultSearchState(compact))
+    onChange(EMPTY)
+  }, [onChange, compact])
+
+  useEffect(() => {
+    setMode(getDefaultSearchState(compact))
+  }, [compact])
+
+  useEffect(() => {
+    if (mode === SEARCH_OPEN && searchInputRef.current) {
+      searchInputRef.current.focus()
+    }
+  }, [mode])
+
+  if (mode === SEARCH_CLOSED) {
+    return (
+      <Button
+        display="icon"
+        icon={<IconSearch />}
+        label="Search"
+        onClick={open}
+      />
+    )
+  }
+
+  const searchInputExtraProps = compact
+    ? {
+        adornment: (
+          <Button
+            display="icon"
+            icon={<IconCross />}
+            label="Clear search input"
+            onClick={clear}
+          />
+        ),
+        wide: true,
+      }
+    : {}
+
+  return (
+    <div
+      css={`
+        position: relative;
+
+        ${compact
+          ? `
+            position: absolute;
+            top: 0;
+            left: 0;
+            padding: ${2 * GU}px;
+            right: 0;
+            background: ${theme.surface};
+            z-index: 1;
+          `
+          : ''}
+      `}
+    >
+      <SearchInput
+        ref={searchInputRef}
+        onChange={onChange}
+        placeholder="Search"
+        value={value}
+        {...searchInputExtraProps}
+        css={`
+          ${compact ? '' : `width: ${30 * GU}px`};
+          ${textStyle('body2')};
+          color: ${value ? theme.surfaceContent : theme.hint};
+        `}
+      />
+    </div>
+  )
+})
+
+Search.propTypes = {
+  onChange: PropTypes.func.isRequired,
+  value: PropTypes.string.isRequired,
+}
+
+export default Search

src/components/GlobalPreferences/CustomLabels/useFilterIdentities.js

@@ -17,8 +17,7 @@ function useFilterIdentities(identities) {
 
   return {
     filteredIdentities,
-    handleSearchTermChange: ({ currentTarget: { value } }) =>
-      setSearchTerm(value),
+    handleSearchTermChange: setSearchTerm,
     searchTerm,
     onSearchTerm: setSearchTerm,
   }