Fix secure component having multiple childs (#1455)

Signed-off-by: Daniel Valdivia <18384552+dvaldivia@users.noreply.github.com>

portal-ui/src/screens/Console/Buckets/ListBuckets/Objects/ListObjects/ListObjects.tsx

@@ -1158,35 +1158,37 @@ const ListObjects = ({
                   scopes={[IAM_SCOPES.S3_PUT_OBJECT]}
                   errorProps={{ disabled: true }}
                 >
-                  <UploadFilesButton
-                    uploadFileFunction={(closeMenu) => {
-                      if (fileUpload && fileUpload.current) {
-                        fileUpload.current.click();
-                      }
-                      closeMenu();
-                    }}
-                    uploadFolderFunction={(closeMenu) => {
-                      if (folderUpload && folderUpload.current) {
-                        folderUpload.current.click();
-                      }
-                      closeMenu();
-                    }}
-                  />
+                  <Fragment>
+                    <UploadFilesButton
+                      uploadFileFunction={(closeMenu) => {
+                        if (fileUpload && fileUpload.current) {
+                          fileUpload.current.click();
+                        }
+                        closeMenu();
+                      }}
+                      uploadFolderFunction={(closeMenu) => {
+                        if (folderUpload && folderUpload.current) {
+                          folderUpload.current.click();
+                        }
+                        closeMenu();
+                      }}
+                    />
 
-                  <input
-                    type="file"
-                    multiple
-                    onChange={handleUploadButton}
-                    style={{ display: "none" }}
-                    ref={fileUpload}
-                  />
-                  <input
-                    type="file"
-                    multiple
-                    onChange={handleUploadButton}
-                    style={{ display: "none" }}
-                    ref={folderUpload}
-                  />
+                    <input
+                      type="file"
+                      multiple
+                      onChange={handleUploadButton}
+                      style={{ display: "none" }}
+                      ref={fileUpload}
+                    />
+                    <input
+                      type="file"
+                      multiple
+                      onChange={handleUploadButton}
+                      style={{ display: "none" }}
+                      ref={folderUpload}
+                    />
+                  </Fragment>
                 </SecureComponent>
               </Fragment>
             }

portal-ui/src/screens/Console/Buckets/ListBuckets/UploadFilesButton.tsx

@@ -36,7 +36,7 @@ const styles = (theme: Theme) =>
     listUploadIcons: {
       "& .min-icon": {
         width: 18,
-        fill: "rgba(0,0,0,0.87)"
+        fill: "rgba(0,0,0,0.87)",
       },
     },
   });

portal-ui/tests/permissions/bucketRead.ts

@@ -85,12 +85,12 @@ test
       .setFilesToUpload(elements.uploadInput, "../uploads/test.txt")
       .click(logoutItem);
   })("Object list table is enabled", async (t) => {
-    const bucketsTableExists = elements.table.exists;
-    const testBucketBrowseButton = testBucketBrowseButtonFor("bucketread3");
+    await new Promise((resolve) => setTimeout(resolve, 2000));
     await t
       .useRole(roles.bucketRead)
-      .click(testBucketBrowseButton)
-      .expect(bucketsTableExists)
+      .navigateTo("http://localhost:9090/buckets")
+      .click(testBucketBrowseButtonFor("bucketread3"))
+      .expect(elements.table.exists)
       .ok();
   })
   .after(async (t) => {