fix(xo-web/Ellipsis): handle patchedRender wrapping (#2881)

Also use Ellipsis on resource set name in home/VM view

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

@@ -18,7 +18,13 @@ export const EllipsisContainer = ({ children }) => (
     {React.Children.map(
       children,
       child =>
-        child == null || child.type === Ellipsis ? child : <span>{child}</span>
+        child == null ||
+        child.type === Ellipsis ||
+        (child.type != null && child.type.originalRender === Ellipsis) ? (
+          child
+        ) : (
+          <span>{child}</span>
+        )
     )}
   </div>
 )

packages/xo-web/src/patch-react.js

@@ -17,7 +17,7 @@ React.createElement = (createElement => {
     </p>
   )
 
-  const wrapRender = render =>
+  const wrapRender = render => {
     function patchedRender () {
       try {
         return render.apply(this, arguments)
@@ -27,6 +27,9 @@ React.createElement = (createElement => {
         return errorComponent
       }
     }
+    patchedRender.originalRender = render
+    return patchedRender
+  }
 
   return function (Component) {
     if (isFunction(Component)) {

packages/xo-web/src/xo-app/home/vm-item.js

@@ -219,17 +219,21 @@ export default class VmItem extends Component {
               </span>
             </Col>
             <Col mediumSize={2} className='hidden-sm-down'>
-              {resourceSet && (
-                <span>
-                  {_('homeResourceSet', {
-                    resourceSet: (
-                      <Link to={`self?resourceSet=${resourceSet.id}`}>
-                        {resourceSet.name}
-                      </Link>
-                    ),
-                  })}
-                </span>
-              )}
+              <EllipsisContainer>
+                <Ellipsis>
+                  {resourceSet && (
+                    <span>
+                      {_('homeResourceSet', {
+                        resourceSet: (
+                          <Link to={`self?resourceSet=${resourceSet.id}`}>
+                            {resourceSet.name}
+                          </Link>
+                        ),
+                      })}
+                    </span>
+                  )}
+                </Ellipsis>
+              </EllipsisContainer>
             </Col>
             <Col mediumSize={6} className={styles.itemExpanded}>
               {map(vm.addresses, address => (