feat: Support File Manager for Prompts page (Issue #2191) (#563)

Co-authored-by: Palina_Kryvasheyeva <Palina_Kryvasheyeva@epam.com>

Author: Kamianchuk

src/components/FileManager/FileManager.tsx

@@ -236,6 +236,7 @@ export type ToolbarOptions = Omit<
     uploadFiles?: NewAction;
     newFolder?: NewAction;
     uploadArchive?: NewAction;
+    newItem?: NewAction;
   };
   showHiddenFilesToggle?: boolean;
 };
@@ -370,10 +371,17 @@ export interface DialFileManagerProps {
   onPreview?: (path?: string) => void;
   previewExtensions?: string[];
   isRenameFileAvailable?: boolean;
+  isDuplicateFolderAvailable?: boolean;
   customUploadFileAction?: (
     currentPath?: string,
     currentFolder?: DialFile,
   ) => void;
+  customCreateNewItemAction?: (
+    currentPath?: string,
+    currentFolder?: DialFile,
+  ) => void;
+  customDuplicateAction?: (items?: DialFile[]) => void;
+  nonClickableTableColumns?: FileManagerColumnKey[];
 }
 
 /**
@@ -618,10 +626,12 @@ export const DialFileManagerView: FC = () => {
     onPreview,
     previewExtensions,
     isRenameFileAvailable,
+    isDuplicateFolderAvailable,
     getDisabledTooltip,
     fileTooLargeTooltip,
     unsupportedFileTypeTooltip,
     gridClassName,
+    nonClickableTableColumns,
   } = useFileManagerContext();
 
   const {
@@ -1232,6 +1242,7 @@ export const DialFileManagerView: FC = () => {
     onPreview: (path) => onPreview?.(path),
     previewExtensions,
     isRenameFileAvailable,
+    isDuplicateFolderAvailable,
   });
 
   const getGridContextMenuItems = useCallback(
@@ -1282,15 +1293,19 @@ export const DialFileManagerView: FC = () => {
         event.colDef.colId === 'ag-Grid-SelectionColumn' ||
         event.colDef.colId === FileManagerColumnKey.Actions ||
         (renamedPath && event.data?.path === renamedPath) ||
-        event.data?.isTemporary
+        event.data?.isTemporary ||
+        (nonClickableTableColumns &&
+          nonClickableTableColumns.includes(
+            event.colDef.colId as FileManagerColumnKey,
+          ))
       ) {
         return;
       }
       if (event.data) {
         handleTableRowClick(event.data);
       }
     },
-    [renamedPath, handleTableRowClick],
+    [renamedPath, handleTableRowClick, nonClickableTableColumns],
   );
 
   const emptyStateRenderer = useCallback(

src/components/FileManager/FileManagerContext.tsx

@@ -22,7 +22,10 @@ import type {
 import type { FileUploadValidationMessages } from './hooks/use-file-upload';
 import type { DropdownItem } from '@/models/dropdown';
 import type { FileConflictDecision } from './components/ConflictResolutionPopup/ConflictResolutionPopup';
-import type { DestinationFolderMode } from '@/types/file-manager';
+import type {
+  DestinationFolderMode,
+  FileManagerColumnKey,
+} from '@/types/file-manager';
 import type {
   DialFileAcceptType,
   DialFileManagerActionsRef,
@@ -204,10 +207,17 @@ export interface FileManagerContextValue {
   onPreview?: (path?: string) => void;
   previewExtensions?: string[];
   isRenameFileAvailable?: boolean;
+  isDuplicateFolderAvailable?: boolean;
   customUploadFileAction?: (
     currentPath?: string,
     currentFolder?: DialFile,
   ) => void;
+  customCreateNewItemAction?: (
+    currentPath?: string,
+    currentFolder?: DialFile,
+  ) => void;
+  customDuplicateAction?: (items?: DialFile[]) => void;
+  nonClickableTableColumns?: FileManagerColumnKey[];
   getDisabledTooltip?: (row: FileManagerGridRow) => string | undefined;
   fileTooLargeTooltip?: string;
   unsupportedFileTypeTooltip?: string;

src/components/FileManager/FileManagerProvider.tsx

@@ -127,9 +127,13 @@ export const FileManagerProvider: FC<FileManagerProviderProps> = ({
   onPreview,
   previewExtensions,
   isRenameFileAvailable,
+  isDuplicateFolderAvailable,
   customUploadFileAction,
+  customCreateNewItemAction,
+  customDuplicateAction,
   customBreakpointRef,
   gridClassName,
+  nonClickableTableColumns,
 }) => {
   const {
     selectedPaths: effectiveSelectedPaths,
@@ -354,6 +358,17 @@ export const FileManagerProvider: FC<FileManagerProviderProps> = ({
     customUploadFileAction?.(currentPath, currentFolder);
   }, [customUploadFileAction, currentPath, currentFolder]);
 
+  const customCreateNewItem = useCallback(() => {
+    customCreateNewItemAction?.(currentPath, currentFolder);
+  }, [customCreateNewItemAction, currentPath, currentFolder]);
+
+  const customDuplicateHandle = useCallback(
+    (items: DialFile[]) => {
+      customDuplicateAction?.(items);
+    },
+    [customDuplicateAction],
+  );
+
   const {
     isCreatingFolder,
     newFolderTempId,
@@ -375,6 +390,7 @@ export const FileManagerProvider: FC<FileManagerProviderProps> = ({
       onUploadFiles: customUploadFileAction ? customUploadFile : openFileDialog,
       onUploadArchive: openArchiveUpload,
       onCreateFolder: startFolderCreation,
+      onCreateNewItem: customCreateNewItem,
       isNewButtonDisabled: toolbarOptions?.isNewButtonDisabled,
     },
   );
@@ -599,7 +615,9 @@ export const FileManagerProvider: FC<FileManagerProviderProps> = ({
 
     handleCopyTo,
     handleMoveTo,
-    handleDuplicate,
+    handleDuplicate: customDuplicateAction
+      ? customDuplicateHandle
+      : handleDuplicate,
     handleSetCopiedFiles,
     handleSetMovedFiles,
     openDestinationFolderPopup,
@@ -707,8 +725,10 @@ export const FileManagerProvider: FC<FileManagerProviderProps> = ({
     onPreview,
     previewExtensions,
     isRenameFileAvailable,
+    isDuplicateFolderAvailable,
     customUploadFileAction,
     customBreakpointRef,
+    nonClickableTableColumns,
     getDisabledTooltip,
     fileTooLargeTooltip,
     unsupportedFileTypeTooltip,

src/components/FileManager/hooks/use-grid-context-menu.tsx

@@ -55,6 +55,7 @@ export interface UseGridContextMenuProps {
   onPreview?: (path?: string) => void;
   previewExtensions?: string[];
   isRenameFileAvailable?: boolean;
+  isDuplicateFolderAvailable?: boolean;
 }
 
 export const useGridContextMenu = ({
@@ -76,6 +77,7 @@ export const useGridContextMenu = ({
   onPreview,
   previewExtensions,
   isRenameFileAvailable = true,
+  isDuplicateFolderAvailable = true,
 }: UseGridContextMenuProps) => {
   return useMemo(() => {
     return (file: DialFile): DropdownItem[] => {
@@ -129,7 +131,15 @@ export const useGridContextMenu = ({
         );
       }
 
-      if (actionLabels[DialFileManagerActions.Duplicate]) {
+      const isDuplicateAvailable =
+        file.nodeType === DialFileNodeType.ITEM ||
+        (file.nodeType === DialFileNodeType.FOLDER &&
+          isDuplicateFolderAvailable);
+
+      if (
+        actionLabels[DialFileManagerActions.Duplicate] &&
+        isDuplicateAvailable
+      ) {
         items.push({
           key: DialFileManagerActions.Duplicate,
           label: actionLabels[DialFileManagerActions.Duplicate],
@@ -311,5 +321,6 @@ export const useGridContextMenu = ({
     onPreview,
     previewExtensions,
     isRenameFileAvailable,
+    isDuplicateFolderAvailable,
   ]);
 };

src/components/FileManager/hooks/use-new-actions.tsx

@@ -1,5 +1,10 @@
 import { useMemo } from 'react';
-import { IconFile, IconFileZip, IconFolder } from '@tabler/icons-react';
+import {
+  IconFile,
+  IconFileZip,
+  IconFolder,
+  IconPlus,
+} from '@tabler/icons-react';
 import { BASE_ICON_PROPS } from '@/constants/icon';
 import type { DropdownItem } from '@/models/dropdown';
 import type { NewAction } from '../FileManager';
@@ -10,11 +15,13 @@ export interface UseNewActionsProps {
     uploadFiles?: NewAction;
     newFolder?: NewAction;
     uploadArchive?: NewAction;
+    newItem?: NewAction;
   };
   currentFolder?: DialFile;
   onUploadFiles?: () => void;
   onCreateFolder?: () => void;
   onUploadArchive?: () => void;
+  onCreateNewItem: () => void;
   isNewButtonDisabled?: boolean;
 }
 
@@ -30,6 +37,7 @@ export const useNewActions = ({
   onUploadFiles,
   onCreateFolder,
   onUploadArchive,
+  onCreateNewItem,
   isNewButtonDisabled: isNewButtonDisabledExternal,
 }: UseNewActionsProps): UseNewActionsResult => {
   const newActionItems = useMemo(() => {
@@ -57,6 +65,24 @@ export const useNewActions = ({
       });
     }
 
+    if (newActions.newItem) {
+      actions.push({
+        key: 'new-item',
+        label: newActions.newItem.label,
+        icon:
+          newActions?.newItem?.icon !== undefined ? (
+            newActions?.newItem?.icon
+          ) : (
+            <IconPlus {...BASE_ICON_PROPS} className="text-secondary" />
+          ),
+        onClick: () => {
+          if (onCreateNewItem) {
+            onCreateNewItem();
+          }
+        },
+      });
+    }
+
     if (newActions.uploadFiles) {
       actions.push({
         key: 'upload-file',
@@ -94,7 +120,13 @@ export const useNewActions = ({
     }
 
     return actions;
-  }, [newActions, onCreateFolder, onUploadFiles, onUploadArchive]);
+  }, [
+    newActions,
+    onCreateFolder,
+    onUploadFiles,
+    onUploadArchive,
+    onCreateNewItem,
+  ]);
 
   const isNewButtonVisible = useMemo(
     () => newActionItems?.length > 0,

src/types/file-manager.ts

@@ -51,4 +51,5 @@ export enum FileManagerColumnKey {
   Owner = 'owner',
   Path = 'path',
   Actions = '__actions',
+  Version = 'version',
 }