feat(user/ssh): use SortedTable (#2514)

See #2416

src/common/intl/messages.js

@@ -1440,6 +1440,7 @@ const messages = {
   sshKeys: 'SSH keys',
   newSshKey: 'New SSH key',
   deleteSshKey: 'Delete',
+  deleteSshKeys: 'Delete selected SSH keys',
   noSshKeys: 'No SSH keys',
   newSshKeyModalTitle: 'New SSH key',
   sshKeyErrorTitle: 'Invalid key',
@@ -1449,6 +1450,9 @@ const messages = {
   deleteSshKeyConfirm: 'Delete SSH key',
   deleteSshKeyConfirmMessage:
     'Are you sure you want to delete the SSH key {title}?',
+  deleteSshKeysConfirm: 'Delete SSH key{nKeys, plural, one {} other {s}}',
+  deleteSshKeysConfirmMessage:
+    'Are you sure you want to delete {nKeys, number} SSH key{nKeys, plural, one {} other {s}}?',
 
   // ----- Usage -----
   others: 'Others',

src/common/xo/index.js

@@ -9,6 +9,7 @@ import {
   assign,
   filter,
   forEach,
+  includes,
   isEmpty,
   isEqual,
   map,
@@ -1923,7 +1924,27 @@ export const deleteSshKey = key =>
   }).then(() => {
     const { preferences } = xo.user
     return _setUserPreferences({
-      sshKeys: filter(preferences && preferences.sshKeys, k => !isEqual(k, key)),
+      sshKeys: filter(
+        preferences && preferences.sshKeys,
+        k => k.key !== resolveId(key)
+      ),
+    })
+  }, noop)
+
+export const deleteSshKeys = keys =>
+  confirm({
+    title: _('deleteSshKeysConfirm', { nKeys: keys.length }),
+    body: _('deleteSshKeysConfirmMessage', {
+      nKeys: keys.length,
+    }),
+  }).then(() => {
+    const { preferences } = xo.user
+    const keyIds = resolveIds(keys)
+    return _setUserPreferences({
+      sshKeys: filter(
+        preferences && preferences.sshKeys,
+        sshKey => !includes(keyIds, sshKey.key)
+      ),
     })
   }, noop)
 

src/xo-app/user/index.js

@@ -4,14 +4,14 @@ import _, { messages } from 'intl'
 import ActionButton from 'action-button'
 import Component from 'base-component'
 import Icon from 'icon'
-import isEmpty from 'lodash/isEmpty'
-import map from 'lodash/map'
 import propTypes from 'prop-types-decorator'
 import React from 'react'
+import SortedTable from 'sorted-table'
 import { Text } from 'editable'
 import { alert } from 'modal'
 import { Container, Row, Col } from 'grid'
 import { getLang } from 'selectors'
+import { map } from 'lodash'
 import { injectIntl } from 'react-intl'
 import { Select } from 'form'
 import { Card, CardBlock, CardHeader } from 'card'
@@ -20,6 +20,7 @@ import {
   addSshKey,
   changePassword,
   deleteSshKey,
+  deleteSshKeys,
   editCustomFilter,
   removeCustomFilter,
   setDefaultHomeFilter,
@@ -226,12 +227,44 @@ class UserFilters extends Component {
 }
 
 // ===================================================================
+const COLUMNS = [
+  {
+    default: true,
+    itemRenderer: sshKey => sshKey.title,
+    name: _('title'),
+    sortCriteria: 'title',
+  },
+  {
+    itemRenderer: sshKey => <span style={SSH_KEY_STYLE}>{sshKey.key}</span>,
+    name: _('key'),
+  },
+]
+
+const INDIVIDUAL_ACTIONS = [
+  {
+    handler: deleteSshKey,
+    icon: 'delete',
+    label: _('deleteSshKey'),
+    level: 'danger',
+  },
+]
+
+const GROUPED_ACTIONS = [
+  {
+    handler: deleteSshKeys,
+    icon: 'delete',
+    label: _('deleteSshKeys'),
+    level: 'danger',
+  },
+]
 
 const SshKeys = addSubscriptions({
   user: subscribeCurrentUser,
 })(({ user }) => {
   const sshKeys = user && user.preferences && user.preferences.sshKeys
 
+  const sshKeysWithIds = map(sshKeys, sshKey => ({ ...sshKey, id: sshKey.key }))
+
   return (
     <div>
       <Card>
@@ -246,30 +279,13 @@ const SshKeys = addSubscriptions({
           </ActionButton>
         </CardHeader>
         <CardBlock>
-          {!isEmpty(sshKeys) ? (
+          <SortedTable
-            <Container>
+            collection={sshKeysWithIds}
-              {map(sshKeys, (sshKey, key) => (
+            columns={COLUMNS}
-                <Row key={key} className='pb-1'>
+            groupedActions={GROUPED_ACTIONS}
-                  <Col size={2}>
+            individualActions={INDIVIDUAL_ACTIONS}
-                    <strong>{sshKey.title}</strong>
+            stateUrlParam='s'
-                  </Col>
+          />
-                  <Col size={8} style={SSH_KEY_STYLE}>
-                    {sshKey.key}
-                  </Col>
-                  <Col size={2} className='text-xs-right'>
-                    <ActionButton
-                      icon='delete'
-                      handler={() => deleteSshKey(sshKey)}
-                    >
-                      {_('deleteSshKey')}
-                    </ActionButton>
-                  </Col>
-                </Row>
-              ))}
-            </Container>
-          ) : (
-            _('noSshKeys')
-          )}
         </CardBlock>
       </Card>
     </div>