Dashboard search: Update input and closing button (#23573)

* Update Dashboard search page

* Update tests, remove unused icon types, adjust x icon position

* Update icon.ts

packages/grafana-ui/src/types/icon.ts

@@ -28,6 +28,7 @@ export type IconName =
   | 'folder-plus'
   | 'folder-plus'
   | 'folder-open'
   | 'folder-open'
   | 'file-copy-alt'
   | 'file-copy-alt'
+  | 'file-alt'
   | 'exchange-alt'
   | 'exchange-alt'
   | 'import'
   | 'import'
   | 'exclamation-triangle'
   | 'exclamation-triangle'
@@ -44,6 +45,7 @@ export type IconName =
   | 'add-panel'
   | 'add-panel'
   | 'copy'
   | 'copy'
   | 'lock'
   | 'lock'
+  | 'unlock'
   | 'panel-add'
   | 'panel-add'
   | 'arrow-random'
   | 'arrow-random'
   | 'arrow-down'
   | 'arrow-down'
@@ -140,6 +142,7 @@ export const getAvailableIcons = (): IconName[] => [
   'folder-plus',
   'folder-plus',
   'folder-open',
   'folder-open',
   'file-copy-alt',
   'file-copy-alt',
+  'file-alt',
   'exchange-alt',
   'exchange-alt',
   'import',
   'import',
   'exclamation-triangle',
   'exclamation-triangle',
@@ -156,6 +159,7 @@ export const getAvailableIcons = (): IconName[] => [
   'add-panel',
   'add-panel',
   'copy',
   'copy',
   'lock',
   'lock',
+  'unlock',
   'panel-add',
   'panel-add',
   'arrow-random',
   'arrow-random',
   'arrow-down',
   'arrow-down',

public/app/features/search/components/DashboardSearch.test.tsx

@@ -44,7 +44,10 @@ describe('DashboardSearch', () => {
     });
     });
 
 
     await act(() => {
     await act(() => {
-      wrapper.find({ placeholder: 'Search dashboards by name' }).prop('onChange')({ currentTarget: { value: 'Test' } });
+      wrapper
+        .find({ placeholder: 'Search dashboards by name' })
+        .hostNodes()
+        .prop('onChange')({ currentTarget: { value: 'Test' } });
       jest.runAllTimers();
       jest.runAllTimers();
     });
     });
 
 

public/app/features/search/components/DashboardSearch.tsx

 import React, { FC, useReducer, useState } from 'react';
 import React, { FC, useReducer, useState } from 'react';
 import { useDebounce } from 'react-use';
 import { useDebounce } from 'react-use';
 import { css } from 'emotion';
 import { css } from 'emotion';
-import { Icon, IconButton, useTheme, CustomScrollbar, stylesFactory } from '@grafana/ui';
+import { Icon, useTheme, CustomScrollbar, stylesFactory } from '@grafana/ui';
 import { getLocationSrv } from '@grafana/runtime';
 import { getLocationSrv } from '@grafana/runtime';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { SearchSrv } from 'app/core/services/search_srv';
 import { SearchSrv } from 'app/core/services/search_srv';
@@ -178,7 +178,9 @@ export const DashboardSearch: FC<Props> = ({ onCloseSearch, payload = {} }) => {
             </div>
             </div>
           )}
           )}
         </div>
         </div>
-        <IconButton onClick={onCloseSearch} className={styles.closeBtn} name="times" />
+        <div className={styles.closeBtn} onClick={onCloseSearch}>
+          Close search <Icon name="times" className={styles.close} />
+        </div>
       </div>
       </div>
     </div>
     </div>
   );
   );
@@ -187,14 +189,16 @@ export const DashboardSearch: FC<Props> = ({ onCloseSearch, payload = {} }) => {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
 const getStyles = stylesFactory((theme: GrafanaTheme) => {
   return {
   return {
     closeBtn: css`
     closeBtn: css`
-      top: 21px;
+      top: 20px;
       right: 8px;
       right: 8px;
       position: absolute;
       position: absolute;
-
-      @media only screen and (max-width: ${theme.breakpoints.md}) {
-        position: absolute;
-        right: 15px;
-        top: 60px;
+      font-size: ${theme.typography.size.xs};
+      color: ${theme.colors.link};
+      display: flex;
+      align-items: center;
+      cursor: pointer;
+      &:hover {
+        color: ${theme.colors.linkHover};
       }
       }
     `,
     `,
     icon: css`
     icon: css`
@@ -204,5 +208,9 @@ const getStyles = stylesFactory((theme: GrafanaTheme) => {
     filter: css`
     filter: css`
       margin-right: ${theme.spacing.xs};
       margin-right: ${theme.spacing.xs};
     `,
     `,
+    close: css`
+      margin-left: ${theme.spacing.xs};
+      margin-bottom: 1px;
+    `,
   };
   };
 });
 });

public/app/features/search/components/SearchField.tsx

 import React, { useContext } from 'react';
 import React, { useContext } from 'react';
 import { css, cx } from 'emotion';
 import { css, cx } from 'emotion';
-import { ThemeContext, Icon } from '@grafana/ui';
+import { ThemeContext, Icon, Input } from '@grafana/ui';
 import { GrafanaTheme } from '@grafana/data';
 import { GrafanaTheme } from '@grafana/data';
 import { SearchQuery } from 'app/core/components/search/search';
 import { SearchQuery } from 'app/core/components/search/search';
 
 
@@ -23,9 +23,9 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
     align-items: center;
     align-items: center;
   `,
   `,
   input: css`
   input: css`
-    max-width: 653px;
-    padding: 0 ${theme.spacing.md};
-    height: 51px;
+    max-width: 683px;
+    padding-left: ${theme.spacing.md};
+    margin-right: 90px;
     box-sizing: border-box;
     box-sizing: border-box;
     outline: none;
     outline: none;
     background-color: ${theme.colors.panelBg};
     background-color: ${theme.colors.panelBg};
@@ -41,9 +41,14 @@ const getSearchFieldStyles = (theme: GrafanaTheme) => ({
       padding: 0 ${theme.spacing.md};
       padding: 0 ${theme.spacing.md};
     `
     `
   ),
   ),
+  clearButton: css`
+    font-size: ${theme.typography.size.sm};
+    color: ${theme.colors.textWeak};
+    text-decoration: underline;
+  `,
 });
 });
 
 
-export const SearchField: React.FunctionComponent<SearchFieldProps> = ({ query, onChange, ...inputProps }) => {
+export const SearchField: React.FunctionComponent<SearchFieldProps> = ({ query, onChange, size, ...inputProps }) => {
   const theme = useContext(ThemeContext);
   const theme = useContext(ThemeContext);
   const styles = getSearchFieldStyles(theme);
   const styles = getSearchFieldStyles(theme);
 
 
@@ -52,11 +57,7 @@ export const SearchField: React.FunctionComponent<SearchFieldProps> = ({ query,
       {/* search-field-wrapper class name left on purpose until we migrate entire search to React */}
       {/* search-field-wrapper class name left on purpose until we migrate entire search to React */}
       {/* based on it GrafanaCtrl (L256) decides whether or not hide search */}
       {/* based on it GrafanaCtrl (L256) decides whether or not hide search */}
       <div className={`${styles.wrapper} search-field-wrapper`}>
       <div className={`${styles.wrapper} search-field-wrapper`}>
-        <div className={styles.icon}>
-          <Icon name="search" size="lg" />
-        </div>
-
-        <input
+        <Input
           type="text"
           type="text"
           placeholder="Search dashboards by name"
           placeholder="Search dashboards by name"
           value={query.query}
           value={query.query}
@@ -65,8 +66,14 @@ export const SearchField: React.FunctionComponent<SearchFieldProps> = ({ query,
           }}
           }}
           tabIndex={1}
           tabIndex={1}
           spellCheck={false}
           spellCheck={false}
-          {...inputProps}
           className={styles.input}
           className={styles.input}
+          prefix={<Icon name="search" />}
+          suffix={
+            <a className={styles.clearButton} onClick={() => onChange('')}>
+              Clear
+            </a>
+          }
+          {...inputProps}
         />
         />
 
 
         <div className={styles.spacer} />
         <div className={styles.spacer} />