From 9e3e4322a3bfa4288a48a0858e8e8efb46cb723b Mon Sep 17 00:00:00 2001
From: sergeyteleshev <iamsergeyteleshev@gmail.com>
Date: Tue, 9 Apr 2024 15:35:13 +0200
Subject: [PATCH] Cb 4178 te cloud storage improvements (#2532)

* CB-4178 chore: makes tree nodes names visible in react dev tools

* CB-4178 adds validation for loading files in cloud storage

* CB-4178 pr fixes

* CB-4178 pr fixes

* CB-4178 code cleanup

* CB-4178 selectFiles can return empty array

---------

Co-authored-by: Evgenia Bezborodova <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 .../core-blocks/src/Tree/TreeNode/TreeNode.tsx  |  2 ++
 .../src/Tree/TreeNode/TreeNodeControl.tsx       |  2 ++
 webapp/packages/core-browser/src/selectFiles.ts | 17 ++++++++++-------
 .../core-connections/src/DBDriverResource.ts    |  2 +-
 .../core-sdk/src/CustomGraphQLClient.ts         |  6 +++---
 .../Extensions/uploadDriverLibraryExtension.ts  |  4 ++--
 .../DataGridContextMenuSaveContentService.ts    | 15 ++++++---------
 .../ImageValue/ImageValuePresentation.tsx       |  2 +-
 .../NavigationNodeProjectControl.tsx            |  6 ++++--
 .../ConnectionNavNodeControl.tsx                |  2 ++
 .../NavigationNode/NavigationNodeControl.tsx    |  2 ++
 .../NavigationNode/NavigationNodeNested.tsx     |  2 ++
 .../NavigationNodeControlRenderer.tsx           |  2 ++
 .../NavigationNodeProjectControl.tsx            |  2 ++
 14 files changed, 41 insertions(+), 25 deletions(-)

diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx
index 5a69dd416f..cf92053d16 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNode.tsx
@@ -121,3 +121,5 @@ export const TreeNode = observer<Props, HTMLDivElement | null>(
     );
   }),
 );
+
+TreeNode.displayName = 'TreeNode';
diff --git a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
index d39c455cab..fded3084ed 100644
--- a/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
+++ b/webapp/packages/core-blocks/src/Tree/TreeNode/TreeNodeControl.tsx
@@ -127,3 +127,5 @@ export const TreeNodeControl = observer<Props & React.HTMLAttributes<HTMLDivElem
     );
   }),
 );
+
+TreeNodeControl.displayName = 'TreeNodeControl';
diff --git a/webapp/packages/core-browser/src/selectFiles.ts b/webapp/packages/core-browser/src/selectFiles.ts
index ecfa572a91..4dfeb5f9da 100644
--- a/webapp/packages/core-browser/src/selectFiles.ts
+++ b/webapp/packages/core-browser/src/selectFiles.ts
@@ -6,7 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
-export function selectFiles(callback: (files: FileList | null) => any, multiple?: boolean): void {
+export function selectFiles(callback: (files: File[]) => any, multiple?: boolean): void {
   let removed = false;
   const input = document.createElement('input');
   input.type = 'file';
@@ -16,7 +16,7 @@ export function selectFiles(callback: (files: FileList | null) => any, multiple?
   }
 
   input.onchange = () => {
-    callback(input.files);
+    callback(input.files?.length ? Array.from(input.files) : []);
     removed = true;
     input.remove();
   };
@@ -30,9 +30,12 @@ export function selectFiles(callback: (files: FileList | null) => any, multiple?
 
   input.click();
 
-  setTimeout(() => {
-    if (!removed) {
-      input.remove();
-    }
-  }, 30 * 60 * 1000);
+  setTimeout(
+    () => {
+      if (!removed) {
+        input.remove();
+      }
+    },
+    30 * 60 * 1000,
+  );
 }
diff --git a/webapp/packages/core-connections/src/DBDriverResource.ts b/webapp/packages/core-connections/src/DBDriverResource.ts
index bd710cc82d..afe61974ed 100644
--- a/webapp/packages/core-connections/src/DBDriverResource.ts
+++ b/webapp/packages/core-connections/src/DBDriverResource.ts
@@ -85,7 +85,7 @@ export class DBDriverResource extends CachedMapResource<string, DBDriver, DBDriv
     return this.data;
   }
 
-  async addDriverLibraries(driverId: string, files: FileList) {
+  async addDriverLibraries(driverId: string, files: File[]) {
     await this.graphQLService.sdk.uploadDriverLibrary(driverId, files);
     await this.refresh(driverId);
   }
diff --git a/webapp/packages/core-sdk/src/CustomGraphQLClient.ts b/webapp/packages/core-sdk/src/CustomGraphQLClient.ts
index cc8930476d..e4ff2a8a6f 100644
--- a/webapp/packages/core-sdk/src/CustomGraphQLClient.ts
+++ b/webapp/packages/core-sdk/src/CustomGraphQLClient.ts
@@ -45,7 +45,7 @@ export class CustomGraphQLClient extends GraphQLClient {
 
   async uploadFiles<T = any, V extends Variables = Variables>(
     url: string,
-    files: FileList,
+    files: File[],
     query?: string,
     variables?: V,
     onUploadProgress?: (event: UploadProgressEvent) => void,
@@ -122,7 +122,7 @@ export class CustomGraphQLClient extends GraphQLClient {
 
   private async overrideFilesUpload<T, V extends Variables = Variables>(
     url: string,
-    files: FileList | Blob,
+    files: File[] | Blob,
     query?: string,
     variables?: V,
     onUploadProgress?: (event: UploadProgressEvent) => void,
@@ -139,7 +139,7 @@ export class CustomGraphQLClient extends GraphQLClient {
         fileData: undefined as any,
       };
 
-      if (files instanceof FileList) {
+      if (files instanceof Array) {
         data['files[]'] = files;
       } else {
         data.fileData = files;
diff --git a/webapp/packages/core-sdk/src/Extensions/uploadDriverLibraryExtension.ts b/webapp/packages/core-sdk/src/Extensions/uploadDriverLibraryExtension.ts
index bff0f7acdd..02b48f08fb 100644
--- a/webapp/packages/core-sdk/src/Extensions/uploadDriverLibraryExtension.ts
+++ b/webapp/packages/core-sdk/src/Extensions/uploadDriverLibraryExtension.ts
@@ -10,12 +10,12 @@ import { GlobalConstants } from '@cloudbeaver/core-utils';
 import type { CustomGraphQLClient, UploadProgressEvent } from '../CustomGraphQLClient';
 
 export interface IUploadDriverLibraryExtension {
-  uploadDriverLibrary: (driverId: string, files: FileList, onUploadProgress?: (event: UploadProgressEvent) => void) => Promise<void>;
+  uploadDriverLibrary: (driverId: string, files: File[], onUploadProgress?: (event: UploadProgressEvent) => void) => Promise<void>;
 }
 
 export function uploadDriverLibraryExtension(client: CustomGraphQLClient): IUploadDriverLibraryExtension {
   return {
-    uploadDriverLibrary(driverId: string, files: FileList, onUploadProgress?: (event: UploadProgressEvent) => void): Promise<void> {
+    uploadDriverLibrary(driverId: string, files: File[], onUploadProgress?: (event: UploadProgressEvent) => void): Promise<void> {
       return client.uploadFiles(GlobalConstants.absoluteServiceUrl('drivers', 'library'), files, undefined, { driverId }, onUploadProgress);
     },
   };
diff --git a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuSaveContentService.ts b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuSaveContentService.ts
index 80969a5147..1e6756cc44 100644
--- a/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuSaveContentService.ts
+++ b/webapp/packages/plugin-data-spreadsheet-new/src/DataGrid/DataGridContextMenu/DataGridContextMenuSaveContentService.ts
@@ -8,19 +8,16 @@
 import { selectFiles } from '@cloudbeaver/core-browser';
 import { injectable } from '@cloudbeaver/core-di';
 import { NotificationService } from '@cloudbeaver/core-events';
-import {
-  createResultSetBlobValue,
-  ResultSetDataContentAction,
-  ResultSetDataKeysUtils,
-  ResultSetEditAction,
-  ResultSetFormatAction,
-} from '@cloudbeaver/plugin-data-viewer';
+import { createResultSetBlobValue, ResultSetDataContentAction, ResultSetEditAction, ResultSetFormatAction } from '@cloudbeaver/plugin-data-viewer';
 
 import { DataGridContextMenuService } from './DataGridContextMenuService';
 
 @injectable()
 export class DataGridContextMenuSaveContentService {
-  constructor(private readonly dataGridContextMenuService: DataGridContextMenuService, private readonly notificationService: NotificationService) {}
+  constructor(
+    private readonly dataGridContextMenuService: DataGridContextMenuService,
+    private readonly notificationService: NotificationService,
+  ) {}
 
   register(): void {
     this.dataGridContextMenuService.add(this.dataGridContextMenuService.getMenuToken(), {
@@ -60,7 +57,7 @@ export class DataGridContextMenuSaveContentService {
       onClick: async context => {
         selectFiles(files => {
           const edit = context.data.model.source.getAction(context.data.resultIndex, ResultSetEditAction);
-          const file = files?.item(0) ?? undefined;
+          const file = files?.[0] ?? undefined;
           if (file) {
             edit.set(context.data.key, createResultSetBlobValue(file));
           }
diff --git a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
index 2a849e020d..8e53032140 100644
--- a/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
+++ b/webapp/packages/plugin-data-viewer/src/ValuePanelPresentation/ImageValue/ImageValuePresentation.tsx
@@ -156,7 +156,7 @@ export const ImageValuePresentation: TabContainerPanelComponent<IDataValuePanelP
         },
         async upload() {
           selectFiles(files => {
-            const file = files?.item(0) ?? undefined;
+            const file = files?.[0] ?? undefined;
             if (file && this.selectedCell) {
               this.editAction.set(this.selectedCell, createResultSetBlobValue(file));
             }
diff --git a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx
index 57347ebd9d..9d6b0d65c7 100644
--- a/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx
+++ b/webapp/packages/plugin-navigation-tree-rm/src/Tree/ProjectsRenderer/NavigationNodeProjectControl.tsx
@@ -96,15 +96,15 @@ export const NavigationNodeProjectControl: NavTreeControlComponent = observer<Na
     return (
       <TreeNodeControl
         ref={ref}
+        className={s(styles, { treeNodeControl: true, outdated  }, className)}
         onClick={handleClick}
         onContextMenu={handleContextMenuOpen}
-        className={s(styles, { treeNodeControl: true, outdated,  }, className)}
       >
         <TreeNodeName title={name} className={s(styles, { treeNodeName: true })}>
           <div className={s(styles, { nameBox: true })}>{name}</div>
         </TreeNodeName>
         {!dndPlaceholder && (
-          <div onClick={handlePortalClick} className={s(styles, { portal: true })}>
+          <div className={s(styles, { portal: true })} onClick={handlePortalClick}>
             <TreeNodeMenuLoader mouseContextMenu={mouseContextMenu} node={node} selected={selected} />
           </div>
         )}
@@ -112,3 +112,5 @@ export const NavigationNodeProjectControl: NavTreeControlComponent = observer<Na
     );
   }),
 );
+
+NavigationNodeProjectControl.displayName = 'NavigationNodeProjectControl';
\ No newline at end of file
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/ConnectionNavNodeControl.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/ConnectionNavNodeControl.tsx
index d372baac81..07c34dec3b 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/ConnectionNavNodeControl.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ConnectionsRenderer/ConnectionNavNodeControl.tsx
@@ -84,3 +84,5 @@ export const ConnectionNavNodeControl: NavTreeControlComponent = observer<NavTre
     );
   }),
 );
+
+ConnectionNavNodeControl.displayName = 'ConnectionNavNodeControl';
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx
index 5b62117cd9..63802256a7 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeControl.tsx
@@ -158,3 +158,5 @@ export const NavigationNodeControl: NavTreeControlComponent = observer(
     );
   }),
 );
+
+NavigationNodeControl.displayName = 'NavigationNodeControl';
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
index 167e79bcbc..75c4ca6eba 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNode/NavigationNodeNested.tsx
@@ -72,3 +72,5 @@ export const NavigationNodeNested = observer(
     );
   }),
 );
+
+NavigationNodeNested.displayName = 'NavigationNodeNested';
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
index a7f88f94b1..97658785d4 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/NavigationTreeNode/NavigationNodeControlRenderer.tsx
@@ -108,3 +108,5 @@ export const NavigationNodeControlRenderer = observer<Props, HTMLDivElement>(
     );
   }),
 );
+
+NavigationNodeControlRenderer.displayName = 'NavigationNodeControlRenderer';
diff --git a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx
index a78547a320..ad82f8ee08 100644
--- a/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx
+++ b/webapp/packages/plugin-navigation-tree/src/NavigationTree/ProjectsRenderer/NavigationNodeProjectControl.tsx
@@ -79,3 +79,5 @@ export const NavigationNodeProjectControl: NavTreeControlComponent = observer<Na
     );
   }),
 );
+
+NavigationNodeProjectControl.displayName = 'NavigationNodeProjectControl';