F OpenNebula/one#5422: Show splitpane with select rows only

src/fireedge/src/client/components/Cards/SelectCard/SelectCard.js

@@ -8,7 +8,7 @@ import {
 import { Skeleton } from '@material-ui/lab'
 
 import useNearScreen from 'client/hooks/useNearScreen'
-import ConditionalWrap from 'client/components/HOC/ConditionalWrap'
+import { ConditionalWrap } from 'client/components/HOC'
 
 import { Action } from 'client/components/Cards/SelectCard'
 import selectCardStyles from 'client/components/Cards/SelectCard/styles'

src/fireedge/src/client/components/HOC/index.js

@@ -13,5 +13,6 @@
 /* limitations under the License.                                             */
 /* -------------------------------------------------------------------------- */
 
+export { default as ConditionalWrap } from 'client/components/HOC/ConditionalWrap'
 export { default as InternalLayout } from 'client/components/HOC/InternalLayout'
 export * from 'client/components/HOC/Translate'

src/fireedge/src/client/components/Tables/Enhanced/index.js

@@ -19,7 +19,7 @@ import Filters from 'client/components/Tables/Enhanced/filters'
 import DefaultFilter from 'client/components/Table/Filters/DefaultFilter'
 import EnhancedTableStyles from 'client/components/Tables/Enhanced/styles'
 
-import { Tr } from 'client/components/HOC'
+import { Tr, ConditionalWrap } from 'client/components/HOC'
 import { T } from 'client/constants'
 
 const EnhancedTable = ({
@@ -103,7 +103,10 @@ const EnhancedTable = ({
   }
 
   return (
-    <SplitPane>
+    <ConditionalWrap
+      condition={selectedRows?.length > 0}
+      wrap={children => <SplitPane>{children}</SplitPane>}
+    >
       <Box {...getTableProps()} className={classes.root}>
         <div className={classes.toolbar}>
           {!isFetching && <Toolbar useTableProps={useTableProps} />}
@@ -158,19 +161,21 @@ const EnhancedTable = ({
         </div>
       </Box>
 
-      <div style={{ display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
-        {selectedRows?.length === 1 && renderDetail
-          ? renderDetail?.(selectedRows[0]?.values)
-          : renderAllSelected && (
-            <pre>
-              <code>
-                {JSON.stringify(Object.keys(selectedRowIds)?.join(', '), null, 2)}
-              </code>
-            </pre>
-          )
-        }
-      </div>
-    </SplitPane>
+      {selectedRows?.length > 0 && (
+        <div style={{ display: 'flex', flexDirection: 'column', overflow: 'auto' }}>
+          {selectedRows?.length === 1 && renderDetail
+            ? renderDetail?.(selectedRows[0]?.values)
+            : renderAllSelected && (
+              <pre>
+                <code>
+                  {JSON.stringify(Object.keys(selectedRowIds)?.join(', '), null, 2)}
+                </code>
+              </pre>
+            )
+          }
+        </div>
+      )}
+    </ConditionalWrap>
   )
 }
 

src/fireedge/src/client/containers/Newstone/index.js

@@ -43,7 +43,11 @@ const Newstone = () => {
   ), [resource])
 
   return (
-    <Container maxWidth='xl'>
+    <Container maxWidth='xl' style={{
+      display: 'flex',
+      flexDirection: 'column',
+      height: '100%'
+    }}>
       {Object.values(TABS).includes(history.location.pathname) && renderTabs}
 
       <Box py={2} overflow='auto'>