feat(xo-web/VM): change the "share" button position (#2667)

Fixes #2663

packages/xo-server/src/api/resource-set.js

@@ -99,10 +99,13 @@ set.params = {
 // -------------------------------------------------------------------
 
 export function get ({ id }) {
-  return this.getResourceSet(id)
+  const { user } = this
+  if (!user) {
+    throw unauthorized()
   }
 
-get.permission = 'admin'
+  return this.getResourceSet(id)
+}
 
 get.params = {
   id: {

packages/xo-web/src/common/xo/index.js

@@ -1201,11 +1201,14 @@ export const createVgpu = (vm, { gpuGroup, vgpuType }) =>
 
 export const deleteVgpu = vgpu => _call('vm.deleteVgpu', resolveIds({ vgpu }))
 
-export const shareVm = (vm, resourceSet) =>
+export const shareVm = async (vm, resourceSet) =>
   confirm({
     title: _('shareVmInResourceSetModalTitle'),
     body: _('shareVmInResourceSetModalMessage', {
-      self: renderXoItem(resourceSet),
+      self: renderXoItem({
+        ...(await getResourceSet(resourceSet)),
+        type: 'resourceSet',
+      }),
     }),
   }).then(() => editVm(vm, { share: true }), noop)
 
@@ -1682,6 +1685,9 @@ export const deleteResourceSet = async id => {
 export const recomputeResourceSetsLimits = () =>
   _call('resourceSet.recomputeAllLimits')
 
+export const getResourceSet = id =>
+  _call('resourceSet.get', { id: resolveId(id) })
+
 // Remote ------------------------------------------------------------
 
 export const getRemote = remote =>

packages/xo-web/src/xo-app/vm/tab-advanced.js

@@ -42,16 +42,16 @@ import {
   XEN_DEFAULT_CPU_WEIGHT,
   XEN_VIDEORAM_VALUES,
 } from 'xo'
-import {
-  createGetObjectsOfType,
-  createSelector,
-  getCheckPermissions,
-  isAdmin,
-} from 'selectors'
+import { createGetObjectsOfType, createSelector, isAdmin } from 'selectors'
+
+// Button's height = react-select's height(36 px) + react-select's border-width(1 px) * 2
+// https://github.com/JedWatson/react-select/blob/916ab0e62fc7394be8e24f22251c399a68de8b1c/less/select.less#L21, L22
+const SHARE_BUTTON_STYLE = { height: '38px' }
 
 const forceReboot = vm => restartVm(vm, true)
 const forceShutdown = vm => stopVm(vm, true)
 const fullCopy = vm => cloneVm(vm, true)
+const shareVmProxy = vm => shareVm(vm, vm.resourceSet)
 
 @connectStore(() => {
   const getAffinityHost = createGetObjectsOfType('host').find((_, { vm }) => ({
@@ -128,31 +128,6 @@ class ResourceSetItem extends Component {
   }
 }
 
-@addSubscriptions({
-  resourceSets: subscribeResourceSets,
-})
-class ShareVmButton extends Component {
-  _shareVm = () => {
-    const { resourceSets, vm } = this.props
-
-    return shareVm(vm, {
-      ...find(resourceSets, { id: vm.resourceSet }),
-      type: 'resourceSet',
-    })
-  }
-
-  render () {
-    return (
-      <TabButton
-        btnStyle='primary'
-        handler={this._shareVm}
-        icon='vm-share'
-        labelId='vmShareButton'
-      />
-    )
-  }
-}
-
 class NewVgpu extends Component {
   get value () {
     return this.state
@@ -315,26 +290,16 @@ export default connectStore(() => {
     createSelector(getVgpus, vgpus => map(vgpus, 'gpuGroup'))
   )
 
-  const getCanAdministrate = createSelector(
-    getCheckPermissions,
-    (_, props) => props.vm.id,
-    (check, id) => check(id, 'administrate')
-  )
-
   return {
-    canAdministrate: getCanAdministrate,
     gpuGroup: getGpuGroup,
     isAdmin,
     vgpus: getVgpus,
     vgpuTypes: getVgpuTypes,
   }
-})(
-  ({ canAdministrate, container, gpuGroup, isAdmin, vgpus, vgpuTypes, vm }) => (
+})(({ container, gpuGroup, isAdmin, vgpus, vgpuTypes, vm }) => (
   <Container>
     <Row>
       <Col className='text-xs-right'>
-          {(isAdmin || canAdministrate) &&
-            vm.resourceSet != null && <ShareVmButton vm={vm} />}
         {vm.power_state === 'Running' && (
           <span>
             <TabButton
@@ -619,8 +584,7 @@ export default connectStore(() => {
             <tr>
               <th>{_('osKernel')}</th>
               <td>
-                  {(vm.os_version && vm.os_version.uname) ||
-                    _('unknownOsKernel')}
+                {(vm.os_version && vm.os_version.uname) || _('unknownOsKernel')}
               </td>
             </tr>
           </tbody>
@@ -641,6 +605,7 @@ export default connectStore(() => {
               <th>{_('resourceSet')}</th>
               <td>
                 {isAdmin ? (
+                  <div className='input-group'>
                     <SelectResourceSet
                       onChange={resourceSet =>
                         editVm(vm, {
@@ -650,8 +615,31 @@ export default connectStore(() => {
                       }
                       value={vm.resourceSet}
                     />
+                    {vm.resourceSet !== undefined && (
+                      <span className='input-group-btn'>
+                        <ActionButton
+                          btnStyle='primary'
+                          handler={shareVmProxy}
+                          handlerParam={vm}
+                          icon='vm-share'
+                          style={SHARE_BUTTON_STYLE}
+                          tooltip={_('vmShareButton')}
+                        />
+                      </span>
+                    )}
+                  </div>
                 ) : vm.resourceSet !== undefined ? (
-                    <ResourceSetItem id={vm.resourceSet} />
+                  <span>
+                    <ResourceSetItem id={vm.resourceSet} />{' '}
+                    <ActionButton
+                      btnStyle='primary'
+                      handler={shareVmProxy}
+                      handlerParam={vm}
+                      icon='vm-share'
+                      size='small'
+                      tooltip={_('vmShareButton')}
+                    />
+                  </span>
                 ) : (
                   _('resourceSetNone')
                 )}
@@ -662,5 +650,4 @@ export default connectStore(() => {
       </Col>
     </Row>
   </Container>
-  )
-)
+))