feat(SortedTable): add link to filter syntax doc (#2364)

Fixes #2305

src/common/intl/messages.js

@@ -30,6 +30,8 @@ var messages = {
   filterOnlyRegular: 'Normal disks',
   filterOnlySnapshots: 'Snapshot disks',
   filterOnlyUnmanaged: 'Unmanaged disks',
+  filterSaveAs: 'Save…',
+  filterSyntaxLinkTooltip: 'Explore the search syntax in the documentation',
 
   // ----- Copiable component -----
   copyToClipboard: 'Copy to clipboard',

src/common/sorted-table/index.js

@@ -28,6 +28,7 @@ import defined from '../xo-defined'
 import Icon from '../icon'
 import propTypes from '../prop-types-decorator'
 import SingleLineRow from '../single-line-row'
+import Tooltip from '../tooltip'
 import { BlockLink } from '../link'
 import { Container, Col } from '../grid'
 import { create as createMatcher } from '../complex-matcher'
@@ -72,7 +73,7 @@ class TableFilter extends Component {
         <span className='input-group-addon'>{props.nFilteredItems} / {props.nItems}</span>
         {isEmpty(props.filters)
           ? <span className='input-group-addon'><Icon icon='search' /></span>
-          : <div className='input-group-btn'>
+          : <span className='input-group-btn'>
             <Dropdown id='filter'>
               <DropdownToggle bsStyle='info'>
                 <Icon icon='search' />
@@ -85,18 +86,27 @@ class TableFilter extends Component {
                 )}
               </DropdownMenu>
             </Dropdown>
-          </div>}
+          </span>}
         <input
           className='form-control'
           defaultValue={props.defaultFilter}
           onChange={this._onChange}
           ref='filter'
         />
-        <div className='input-group-btn'>
+        <Tooltip content={_('filterSyntaxLinkTooltip')}>
+          <a
+            className='input-group-addon'
+            href='https://xen-orchestra.com/docs/search.html#filter-syntax'
+            target='_blank'
+          >
+            <Icon icon='info' />
+          </a>
+        </Tooltip>
+        <span className='input-group-btn'>
           <Button onClick={this._cleanFilter}>
             <Icon icon='clear-search' />
           </Button>
-        </div>
+        </span>
       </div>
     )
   }

src/xo-app/home/index.js

@@ -663,25 +663,27 @@ export default class Home extends Component {
         </Col>
         <Col mediumSize={6}>
           <div className='input-group'>
-            {!isEmpty(filters) && (
-              <div className='input-group-btn'>
-                <DropdownButton id='filter' bsStyle='info' title={_('homeFilters')}>
-                  {!isEmpty(customFilters) && [
-                    map(customFilters, (filter, name) =>
-                      <MenuItem key={`custom-${name}`} onClick={() => this._setFilter(filter)}>
-                        {name}
-                      </MenuItem>
-                    ),
-                    <MenuItem key='divider' divider />
-                  ]}
-                  {map(filters, (filter, label) =>
-                    <MenuItem key={label} onClick={() => this._setFilter(filter)}>
-                      {_(label)}
+            <span className='input-group-btn'>
+              <DropdownButton id='filter' bsStyle='info' title={_('homeFilters')}>
+                <MenuItem onClick={this._addCustomFilter}>
+                  {_('filterSaveAs')}
+                </MenuItem>
+                <MenuItem divider />
+                {!isEmpty(customFilters) && [
+                  map(customFilters, (filter, name) =>
+                    <MenuItem key={`custom-${name}`} onClick={() => this._setFilter(filter)}>
+                      {name}
                     </MenuItem>
-                  )}
-                </DropdownButton>
-              </div>
-            )}
+                  ),
+                  <MenuItem key='divider' divider />
+                ]}
+                {map(filters, (filter, label) =>
+                  <MenuItem key={label} onClick={() => this._setFilter(filter)}>
+                    {_(label)}
+                  </MenuItem>
+                )}
+              </DropdownButton>
+            </span>
             <input
               className='form-control'
               defaultValue={this._getFilter()}
@@ -689,18 +691,20 @@ export default class Home extends Component {
               ref='filterInput'
               type='text'
             />
-            <div className='input-group-btn'>
+            <Tooltip content={_('filterSyntaxLinkTooltip')}>
+              <a
+                className='input-group-addon'
+                href='https://xen-orchestra.com/docs/search.html#filter-syntax'
+                target='_blank'
+              >
+                <Icon icon='info' />
+              </a>
+            </Tooltip>
+            <span className='input-group-btn'>
               <Button onClick={this._clearFilter}>
                 <Icon icon='clear-search' />
               </Button>
-            </div>
-            <div className='input-group-btn'>
-              <ActionButton
-                btnStyle='primary'
-                handler={this._addCustomFilter}
-                icon='save'
-              />
-            </div>
+            </span>
           </div>
         </Col>
         {(isAdmin || !noResourceSets) && <Col mediumSize={3} className='text-xs-right'>