From 6e44c65a07f02c8fa851105849d74319b015d302 Mon Sep 17 00:00:00 2001
From: Julien Fontanet <julien.fontanet@isonoe.net>
Date: Mon, 8 Jan 2018 15:18:15 +0100
Subject: [PATCH] chore: fixes various warnings (#2554)

---
 src/common/editable/index.js         |   6 +-
 src/common/form/select.js            |   4 +-
 src/common/form/toggle.js            |   4 +-
 src/common/no-objects.js             |  28 ++++--
 src/common/xo-line-chart/index.js    |  10 +--
 src/xo-app/backup/overview/index.js  |  12 +--
 src/xo-app/dashboard/health/index.js | 126 +++++++++++++--------------
 src/xo-app/home/index.js             |   4 +-
 src/xo-app/host/tab-advanced.js      |  12 ++-
 src/xo-app/logs/index.js             |  14 +--
 src/xo-app/pool/tab-advanced.js      |   4 +-
 src/xo-app/self/index.js             |   7 +-
 src/xo-app/settings/logs/index.js    |  30 ++++---
 src/xo-app/settings/servers/index.js |   2 +-
 src/xo-app/tasks/index.js            |   2 +-
 src/xo-app/vm/tab-advanced.js        |  36 ++++----
 16 files changed, 164 insertions(+), 137 deletions(-)

diff --git a/src/common/editable/index.js b/src/common/editable/index.js
index 795cd9330..183e06128 100644
--- a/src/common/editable/index.js
+++ b/src/common/editable/index.js
@@ -160,9 +160,9 @@ class Editable extends Component {
           )}
         >
           <span
-            onClick={!useLongClick && this._openEdition}
-            onMouseDown={useLongClick && this.__startTimer}
-            onMouseUp={useLongClick && this.__stopTimer}
+            onClick={useLongClick ? undefined : this._openEdition}
+            onMouseDown={useLongClick ? this.__startTimer : undefined}
+            onMouseUp={useLongClick ? this.__stopTimer : undefined}
           >
             {this._renderDisplay()}
           </span>
diff --git a/src/common/form/select.js b/src/common/form/select.js
index 0dc8292fc..f4f965f7b 100644
--- a/src/common/form/select.js
+++ b/src/common/form/select.js
@@ -114,8 +114,8 @@ export default class Select extends Component {
     return (
       <div
         className={className}
-        onClick={!disabled && (() => selectValue(option))}
-        onMouseOver={!disabled && (() => focusOption(option))}
+        onClick={disabled ? undefined : () => selectValue(option)}
+        onMouseOver={disabled ? undefined : () => focusOption(option)}
         style={style}
         key={key}
       >
diff --git a/src/common/form/toggle.js b/src/common/form/toggle.js
index 53b869ff7..f02331482 100644
--- a/src/common/form/toggle.js
+++ b/src/common/form/toggle.js
@@ -9,12 +9,12 @@ import propTypes from '../prop-types-decorator'
 @uncontrollableInput()
 @propTypes({
   className: propTypes.string,
-  onChange: propTypes.func,
+  onChange: propTypes.func.isRequired,
   icon: propTypes.string,
   iconOn: propTypes.string,
   iconOff: propTypes.string,
   iconSize: propTypes.number,
-  value: propTypes.bool,
+  value: propTypes.bool.isRequired,
 })
 export default class Toggle extends Component {
   static defaultProps = {
diff --git a/src/common/no-objects.js b/src/common/no-objects.js
index a202a638c..b3560c3ea 100644
--- a/src/common/no-objects.js
+++ b/src/common/no-objects.js
@@ -13,19 +13,29 @@ import propTypes from './prop-types-decorator'
 //    {children}
 // </NoObjects>
 // ````
-const NoObjects = ({ children, collection, emptyMessage }) =>
-  collection == null ? (
-    <img src='assets/loading.svg' alt='loading' />
-  ) : isEmpty(collection) ? (
-    <p>{emptyMessage}</p>
+const NoObjects = props => {
+  const { collection } = props
+
+  if (collection == null) {
+    return <img src='assets/loading.svg' alt='loading' />
+  }
+
+  if (isEmpty(collection)) {
+    return <p>{props.emptyMessage}</p>
+  }
+
+  const { children, component: Component, ...otherProps } = props
+  return children !== undefined ? (
+    children(otherProps)
   ) : (
-    <div>{children}</div>
+    <Component {...otherProps} />
   )
+}
 
 propTypes(NoObjects)({
-  children: propTypes.node.isRequired,
-  collection: propTypes.oneOfType([propTypes.array, propTypes.object])
-    .isRequired,
+  children: propTypes.func,
+  collection: propTypes.oneOfType([propTypes.array, propTypes.object]),
+  component: propTypes.func,
   emptyMessage: propTypes.node.isRequired,
 })
 export default NoObjects
diff --git a/src/common/xo-line-chart/index.js b/src/common/xo-line-chart/index.js
index 53b1acd8d..55de5fb07 100644
--- a/src/common/xo-line-chart/index.js
+++ b/src/common/xo-line-chart/index.js
@@ -173,7 +173,7 @@ export const CpuLineChart = injectIntl(
 export const PoolCpuLineChart = injectIntl(
   propTypes({
     addSumSeries: propTypes.bool,
-    data: propTypes.object.isRequired,
+    data: propTypes.array.isRequired,
     options: propTypes.object,
   })(({ addSumSeries, data, options = {}, intl }) => {
     const firstHostData = data[0]
@@ -261,7 +261,7 @@ export const MemoryLineChart = injectIntl(
 export const PoolMemoryLineChart = injectIntl(
   propTypes({
     addSumSeries: propTypes.bool,
-    data: propTypes.object.isRequired,
+    data: propTypes.array.isRequired,
     options: propTypes.object,
   })(({ addSumSeries, data, options = {}, intl }) => {
     const firstHostData = data[0]
@@ -384,7 +384,7 @@ export const VifLineChart = injectIntl(
 export const PifLineChart = injectIntl(
   propTypes({
     addSumSeries: propTypes.bool,
-    data: propTypes.object.isRequired,
+    data: propTypes.array.isRequired,
     options: propTypes.object,
   })(({ addSumSeries, data, options = {}, intl }) => {
     const stats = data.stats.pifs
@@ -419,7 +419,7 @@ const ios = ['rx', 'tx']
 export const PoolPifLineChart = injectIntl(
   propTypes({
     addSumSeries: propTypes.bool,
-    data: propTypes.object.isRequired,
+    data: propTypes.array.isRequired,
     options: propTypes.object,
   })(({ addSumSeries, data, options = {}, intl }) => {
     const firstHostData = data[0]
@@ -508,7 +508,7 @@ export const LoadLineChart = injectIntl(
 export const PoolLoadLineChart = injectIntl(
   propTypes({
     addSumSeries: propTypes.bool,
-    data: propTypes.object.isRequired,
+    data: propTypes.array.isRequired,
     options: propTypes.object,
   })(({ addSumSeries, data, options = {}, intl }) => {
     const firstHostData = data[0]
diff --git a/src/xo-app/backup/overview/index.js b/src/xo-app/backup/overview/index.js
index 66ff40888..542e030da 100644
--- a/src/xo-app/backup/overview/index.js
+++ b/src/xo-app/backup/overview/index.js
@@ -226,11 +226,13 @@ export default class Overview extends Component {
               collection={schedules}
               emptyMessage={_('noScheduledJobs')}
             >
-              <SortedTable
-                columns={JOB_COLUMNS}
-                collection={this._getScheduleCollection()}
-                userData={isScheduleUserMissing}
-              />
+              {() => (
+                <SortedTable
+                  columns={JOB_COLUMNS}
+                  collection={this._getScheduleCollection()}
+                  userData={isScheduleUserMissing}
+                />
+              )}
             </NoObjects>
           </CardBlock>
         </Card>
diff --git a/src/xo-app/dashboard/health/index.js b/src/xo-app/dashboard/health/index.js
index 720b56c51..4770672cc 100644
--- a/src/xo-app/dashboard/health/index.js
+++ b/src/xo-app/dashboard/health/index.js
@@ -461,16 +461,18 @@ export default class Health extends Component {
                   collection={props.areObjectsFetched ? props.userSrs : null}
                   emptyMessage={_('noSrs')}
                 >
-                  <Row>
-                    <Col>
-                      <SortedTable
-                        collection={props.userSrs}
-                        columns={SR_COLUMNS}
-                        rowLink={this._getSrUrl}
-                        shortcutsTarget='body'
-                      />
-                    </Col>
-                  </Row>
+                  {() => (
+                    <Row>
+                      <Col>
+                        <SortedTable
+                          collection={props.userSrs}
+                          columns={SR_COLUMNS}
+                          rowLink={this._getSrUrl}
+                          shortcutsTarget='body'
+                        />
+                      </Col>
+                    </Row>
+                  )}
                 </NoObjects>
               </CardBlock>
             </Card>
@@ -489,26 +491,28 @@ export default class Health extends Component {
                   }
                   emptyMessage={_('noOrphanedObject')}
                 >
-                  <div>
-                    <Row>
-                      <Col className='text-xs-right'>
-                        <TabButton
-                          btnStyle='danger'
-                          handler={this._deleteOrphanedVdis}
-                          icon='delete'
-                          labelId='removeAllOrphanedObject'
-                        />
-                      </Col>
-                    </Row>
-                    <Row>
-                      <Col>
-                        <SortedTable
-                          collection={this.props.vdiOrphaned}
-                          columns={ORPHANED_VDI_COLUMNS}
-                        />
-                      </Col>
-                    </Row>
-                  </div>
+                  {() => (
+                    <div>
+                      <Row>
+                        <Col className='text-xs-right'>
+                          <TabButton
+                            btnStyle='danger'
+                            handler={this._deleteOrphanedVdis}
+                            icon='delete'
+                            labelId='removeAllOrphanedObject'
+                          />
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col>
+                          <SortedTable
+                            collection={this.props.vdiOrphaned}
+                            columns={ORPHANED_VDI_COLUMNS}
+                          />
+                        </Col>
+                      </Row>
+                    </div>
+                  )}
                 </NoObjects>
               </CardBlock>
             </Card>
@@ -525,13 +529,10 @@ export default class Health extends Component {
                   collection={
                     props.areObjectsFetched ? props.controlDomainVdis : null
                   }
+                  columns={CONTROL_DOMAIN_VDI_COLUMNS}
+                  component={SortedTable}
                   emptyMessage={_('noControlDomainVdis')}
-                >
-                  <SortedTable
-                    collection={props.controlDomainVdis}
-                    columns={CONTROL_DOMAIN_VDI_COLUMNS}
-                  />
-                </NoObjects>
+                />
               </CardBlock>
             </Card>
           </Col>
@@ -545,14 +546,11 @@ export default class Health extends Component {
               <CardBlock>
                 <NoObjects
                   collection={props.areObjectsFetched ? props.vmOrphaned : null}
+                  columns={VM_COLUMNS}
+                  component={SortedTable}
                   emptyMessage={_('noOrphanedObject')}
-                >
-                  <SortedTable
-                    collection={props.vmOrphaned}
-                    columns={VM_COLUMNS}
-                    shortcutsTarget='.orphaned-vms'
-                  />
-                </NoObjects>
+                  shortcutsTarget='.orphaned-vms'
+                />
               </CardBlock>
             </Card>
           </Col>
@@ -570,26 +568,28 @@ export default class Health extends Component {
                   }
                   emptyMessage={_('noAlarms')}
                 >
-                  <div>
-                    <Row>
-                      <Col className='text-xs-right'>
-                        <TabButton
-                          btnStyle='danger'
-                          handler={this._deleteAllLogs}
-                          icon='delete'
-                          labelId='logRemoveAll'
-                        />
-                      </Col>
-                    </Row>
-                    <Row>
-                      <Col>
-                        <SortedTable
-                          collection={this.state.messages}
-                          columns={ALARM_COLUMNS}
-                        />
-                      </Col>
-                    </Row>
-                  </div>
+                  {() => (
+                    <div>
+                      <Row>
+                        <Col className='text-xs-right'>
+                          <TabButton
+                            btnStyle='danger'
+                            handler={this._deleteAllLogs}
+                            icon='delete'
+                            labelId='logRemoveAll'
+                          />
+                        </Col>
+                      </Row>
+                      <Row>
+                        <Col>
+                          <SortedTable
+                            collection={this.state.messages}
+                            columns={ALARM_COLUMNS}
+                          />
+                        </Col>
+                      </Row>
+                    </div>
+                  )}
                 </NoObjects>
               </CardBlock>
             </Card>
diff --git a/src/xo-app/home/index.js b/src/xo-app/home/index.js
index 429eb8449..f16cc905a 100644
--- a/src/xo-app/home/index.js
+++ b/src/xo-app/home/index.js
@@ -1083,7 +1083,9 @@ export default class Home extends Component {
               map(visibleItems, (item, index) => (
                 <div
                   key={item.id}
-                  className={highlighted === index && styles.highlight}
+                  className={
+                    highlighted === index ? styles.highlight : undefined
+                  }
                 >
                   <Item
                     expandAll={expandAll}
diff --git a/src/xo-app/host/tab-advanced.js b/src/xo-app/host/tab-advanced.js
index 1c44624e7..cf015f268 100644
--- a/src/xo-app/host/tab-advanced.js
+++ b/src/xo-app/host/tab-advanced.js
@@ -17,14 +17,14 @@ import {
 import { FormattedRelative, FormattedTime } from 'react-intl'
 import { Container, Row, Col } from 'grid'
 import { createGetObjectsOfType, createSelector } from 'selectors'
-import { map } from 'lodash'
+import { map, noop } from 'lodash'
 
 const ALLOW_INSTALL_SUPP_PACK = process.env.XOA_PLAN > 1
 
 const forceReboot = host => restartHost(host, true)
 
-const formatPack = ({ name, author, description, version }) => (
-  <tr>
+const formatPack = ({ name, author, description, version }, key) => (
+  <tr key={key}>
     <th>{_('supplementalPackTitle', { author, name })}</th>
     <td>{description}</td>
     <td>{version}</td>
@@ -116,7 +116,11 @@ export default connectStore(() => {
             <tr>
               <th>{_('hostPowerOnMode')}</th>
               <td>
-                <Toggle value={host.powerOnMode} disabled />
+                <Toggle
+                  disabled
+                  onChange={noop}
+                  value={Boolean(host.powerOnMode)}
+                />
               </td>
             </tr>
             <tr>
diff --git a/src/xo-app/logs/index.js b/src/xo-app/logs/index.js
index e9c44cb81..906809d78 100644
--- a/src/xo-app/logs/index.js
+++ b/src/xo-app/logs/index.js
@@ -413,13 +413,13 @@ export default class LogList extends Component {
           </span>
         </CardHeader>
         <CardBlock>
-          <NoObjects collection={logs} emptyMessage={_('noLogs')}>
-            <SortedTable
-              collection={logs}
-              columns={LOG_COLUMNS}
-              filters={this.filters}
-            />
-          </NoObjects>
+          <NoObjects
+            collection={logs}
+            columns={LOG_COLUMNS}
+            component={SortedTable}
+            emptyMessage={_('noLogs')}
+            filters={this.filters}
+          />
         </CardBlock>
       </Card>
     )
diff --git a/src/xo-app/pool/tab-advanced.js b/src/xo-app/pool/tab-advanced.js
index 3226cb77c..080891e59 100644
--- a/src/xo-app/pool/tab-advanced.js
+++ b/src/xo-app/pool/tab-advanced.js
@@ -76,7 +76,9 @@ export default connectStore({
         <Col size={9}>
           <ul className='list-group'>
             {map(gpuGroups, gpuGroup => (
-              <li className='list-group-item'>{renderXoItem(gpuGroup)}</li>
+              <li key={gpuGroup.id} className='list-group-item'>
+                {renderXoItem(gpuGroup)}
+              </li>
             ))}
           </ul>
         </Col>
diff --git a/src/xo-app/self/index.js b/src/xo-app/self/index.js
index 95639b0f8..c6fa7522e 100644
--- a/src/xo-app/self/index.js
+++ b/src/xo-app/self/index.js
@@ -834,8 +834,11 @@ export default class Self extends Component {
               </ActionButton>
             </div>
             {showNewResourceSetForm && [
-              <Edit onSave={this.toggleState('showNewResourceSetForm')} />,
-              <hr />,
+              <Edit
+                key={0}
+                onSave={this.toggleState('showNewResourceSetForm')}
+              />,
+              <hr key={1} />,
             ]}
             {resourceSets
               ? isEmpty(resourceSets)
diff --git a/src/xo-app/settings/logs/index.js b/src/xo-app/settings/logs/index.js
index 568fc97d7..ee3682ed5 100644
--- a/src/xo-app/settings/logs/index.js
+++ b/src/xo-app/settings/logs/index.js
@@ -161,21 +161,23 @@ export default class Logs extends BaseComponent {
         message={_('noLogs')}
         predicate={this._getPredicate}
       >
-        <div>
-          <span className='pull-right'>
-            <TabButton
-              btnStyle='danger'
-              handler={this._deleteAllLogs}
-              icon='delete'
-              labelId='logDeleteAll'
+        {() => (
+          <div>
+            <span className='pull-right'>
+              <TabButton
+                btnStyle='danger'
+                handler={this._deleteAllLogs}
+                icon='delete'
+                labelId='logDeleteAll'
+              />
+            </span>{' '}
+            <SortedTable
+              collection={logs}
+              columns={COLUMNS}
+              userData={this._getData()}
             />
-          </span>{' '}
-          <SortedTable
-            collection={logs}
-            columns={COLUMNS}
-            userData={this._getData()}
-          />
-        </div>
+          </div>
+        )}
       </NoObjects>
     )
   }
diff --git a/src/xo-app/settings/servers/index.js b/src/xo-app/settings/servers/index.js
index 113fc8193..838962012 100644
--- a/src/xo-app/settings/servers/index.js
+++ b/src/xo-app/settings/servers/index.js
@@ -137,7 +137,7 @@ const COLUMNS = [
   {
     itemRenderer: server => (
       <Toggle
-        value={server.allowUnauthorized}
+        value={Boolean(server.allowUnauthorized)}
         onChange={allowUnauthorized =>
           editServer(server, { allowUnauthorized })
         }
diff --git a/src/xo-app/tasks/index.js b/src/xo-app/tasks/index.js
index 3110f0234..8fc33f5b8 100644
--- a/src/xo-app/tasks/index.js
+++ b/src/xo-app/tasks/index.js
@@ -143,7 +143,7 @@ export default class Tasks extends Component {
             props.pools,
             pool =>
               this._showPoolTasks(pool) && (
-                <Row>
+                <Row key={pool.id}>
                   <Card>
                     <CardHeader key={pool.id}>
                       <Link to={`/pools/${pool.id}`}>{pool.name_label}</Link>
diff --git a/src/xo-app/vm/tab-advanced.js b/src/xo-app/vm/tab-advanced.js
index 9191b8406..8a9005c28 100644
--- a/src/xo-app/vm/tab-advanced.js
+++ b/src/xo-app/vm/tab-advanced.js
@@ -209,26 +209,28 @@ class CoresPerSocket extends Component {
           onChange={this._onChange}
           value={selectedCoresPerSocket || ''}
         >
-          {_('vmChooseCoresPerSocket', message => (
-            <option key='none' value=''>
-              {message}
-            </option>
+          {_({ key: 'none' }, 'vmChooseCoresPerSocket', message => (
+            <option value=''>{message}</option>
           ))}
           {this._selectedValueIsNotInOptions() &&
-            _('vmCoresPerSocketIncorrectValue', message => (
-              <option key='incorrect' value={selectedCoresPerSocket}>
-                {' '}
-                {message}
-              </option>
-            ))}
-          {map(options, coresPerSocket => (
-            <option key={coresPerSocket} value={coresPerSocket}>
-              {_('vmCoresPerSocket', {
+            _(
+              { key: 'incorrect' },
+              'vmCoresPerSocketIncorrectValue',
+              message => (
+                <option value={selectedCoresPerSocket}> {message}</option>
+              )
+            )}
+          {map(options, coresPerSocket =>
+            _(
+              { key: coresPerSocket },
+              'vmCoresPerSocket',
+              {
                 nSockets: vm.CPUs.number / coresPerSocket,
                 nCores: coresPerSocket,
-              })}
-            </option>
-          ))}
+              },
+              message => <option value={coresPerSocket}>{message}</option>
+            )
+          )}
         </select>{' '}
         {this._selectedValueIsNotInOptions() && (
           <Tooltip content={_('vmCoresPerSocketIncorrectValueSolution')}>
@@ -398,7 +400,7 @@ export default connectStore(() => {
               <th>{_('autoPowerOn')}</th>
               <td>
                 <Toggle
-                  value={vm.auto_poweron}
+                  value={Boolean(vm.auto_poweron)}
                   onChange={value => editVm(vm, { auto_poweron: value })}
                 />
               </td>