feat(xo-web/proxies): move proxy actions to dropdown (#5688)

CHANGELOG.unreleased.md

@@ -27,3 +27,4 @@
 - @xen-orchestra/xapi minor
 - @xen-orchestra/backups minor
 - xo-server patch
+- xo-web minor

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

@@ -186,13 +186,14 @@ const CollapsedActions = decorate([
     computed: {
       dropdownId: generateId,
       actions: (_, { actions, items, userData }) =>
-        actions.map(({ disabled, grouped, handler, icon, label, redirectOnSuccess }) => {
+        actions.map(({ disabled, grouped, handler, icon, label, level, redirectOnSuccess }) => {
           const actionItems = Array.isArray(items) || !grouped ? items : [items]
           return {
             disabled: handleFnProps(disabled, actionItems, userData),
             handler: () => handler(actionItems, userData),
             icon: handleFnProps(icon, actionItems, userData),
             label: handleFnProps(label, actionItems, userData),
+            level: handleFnProps(level, actionItems, userData),
             redirectOnSuccess: handleFnProps(redirectOnSuccess, actionItems, userData),
           }
         }),
@@ -204,7 +205,12 @@ const CollapsedActions = decorate([
       <DropdownToggle bsSize='small' bsStyle='secondary' />
       <DropdownMenu className='dropdown-menu-right'>
         {state.actions.map((action, key) => (
-          <MenuItem disabled={action.disabled} key={key} onClick={() => effects.execute(action)}>
+          <MenuItem
+            className={action.level !== undefined ? `text-${action.level}` : ''}
+            disabled={action.disabled}
+            key={key}
+            onClick={() => effects.execute(action)}
+          >
             <Icon icon={action.icon} /> {action.label}
           </MenuItem>
         ))}

packages/xo-web/src/xo-app/proxies/index.js

@@ -38,12 +38,14 @@ const HEADER = (
 
 const ACTIONS = [
   {
+    collapsed: true,
     handler: forgetProxyAppliances,
     icon: 'forget',
     label: _('forgetProxies'),
     level: 'danger',
   },
   {
+    collapsed: true,
     handler: destroyProxyAppliances,
     icon: 'destroy',
     label: _('destroyProxies'),
@@ -53,6 +55,7 @@ const ACTIONS = [
 
 const INDIVIDUAL_ACTIONS = [
   {
+    collapsed: true,
     handler: (proxy, { deployProxy }) =>
       deployProxy({
         proxy,