fix: hide caret for loaded empty destination folders (Issue #7772) (#22)

Author: valerydluski

src/components/FileManager/FileManager.destination-folder-popup.spec.tsx

@@ -0,0 +1,66 @@
+import { render } from '@testing-library/react';
+import { describe, expect, test, vi } from 'vitest';
+import { DialFileManager } from './FileManager';
+
+const destinationPopupRender = vi.hoisted(() => vi.fn());
+
+vi.mock('@epam/ai-dial-ui-kit', async (importOriginal) => {
+  const actual = await importOriginal<typeof import('@epam/ai-dial-ui-kit')>();
+
+  return {
+    ...actual,
+    DialGrid: () => <div role="grid" aria-label="File Manager Grid View" />,
+  };
+});
+
+vi.mock('./components/DestinationFolderPopup/DestinationFolderPopup', () => ({
+  DialDestinationFolderPopup: (props: unknown) => {
+    destinationPopupRender(props);
+    return null;
+  },
+}));
+
+vi.mock('./components/ConflictResolutionPopup/ConflictResolutionPopup', () => ({
+  ConflictResolutionPopup: () => null,
+}));
+
+vi.mock(
+  './components/FileManagerDeleteConfirmationPopup/FileManagerDeleteConfirmationPopup',
+  () => ({ FileManagerDeleteConfirmationPopup: () => null }),
+);
+
+vi.mock('./components/FileMetadataPopup/FileMetadataPopup', () => ({
+  FileMetadataPopup: () => null,
+}));
+
+describe('Dial UI Kit :: FileManager destination folder popup', () => {
+  test('forwards folder loading state without forwarding outer expansion state', () => {
+    const loadedPaths = new Set(['All files/Loaded empty folder']);
+    const loadingPaths = new Set(['All files/Loading folder']);
+
+    render(
+      <div style={{ height: 640, width: 1100 }}>
+        <DialFileManager
+          items={[]}
+          showNavigationPanel={false}
+          treeOptions={{
+            header: 'Folder tree',
+            expandedPaths: new Set(['All files']),
+            loadedPaths,
+            loadingPaths,
+          }}
+        />
+      </div>,
+    );
+
+    expect(destinationPopupRender).toHaveBeenLastCalledWith(
+      expect.objectContaining({
+        treeOptions: {
+          header: 'Folder tree',
+          loadedPaths,
+          loadingPaths,
+        },
+      }),
+    );
+  });
+});

src/components/FileManager/FileManager.stories.tsx

@@ -27,6 +27,7 @@ import {
   PrimaryButton,
 } from '@epam/ai-dial-ui-kit';
 import type { Meta, StoryObj } from '@storybook/react-vite';
+import { userEvent, within } from 'storybook/test';
 import {
   IconBuildingCommunity,
   IconFileDescription,
@@ -274,6 +275,109 @@ export const HandleTableFileClick: Story = {
   },
 };
 
+const destinationPopupCaretItems: DialFile[] = [
+  {
+    id: 'destination-root',
+    name: 'All files',
+    path: 'All files',
+    parentPath: '',
+    nodeType: DialFileNodeType.FOLDER,
+    folderId: 'destination-root',
+    items: [
+      {
+        id: 'source-file',
+        name: 'source.txt',
+        path: 'All files/source.txt',
+        parentPath: 'All files',
+        nodeType: DialFileNodeType.ITEM,
+        resourceType: DialFileResourceType.FILE,
+        folderId: 'destination-root',
+      },
+      {
+        id: 'loaded-empty-folder',
+        name: 'Loaded empty folder',
+        path: 'All files/Loaded empty folder',
+        parentPath: 'All files',
+        nodeType: DialFileNodeType.FOLDER,
+        folderId: 'destination-root',
+        items: [],
+      },
+      {
+        id: 'not-loaded-folder',
+        name: 'Not loaded folder',
+        path: 'All files/Not loaded folder',
+        parentPath: 'All files',
+        nodeType: DialFileNodeType.FOLDER,
+        folderId: 'destination-root',
+        items: [],
+      },
+    ],
+  },
+];
+
+const destinationPopupCaretRootItem: DialRootFolder = {
+  ...destinationPopupCaretItems[0],
+  label: 'All files',
+};
+
+const DestinationPopupLoadedEmptyFolderComponent = (
+  args: DialFileManagerProps,
+) => {
+  const [destinationPath, setDestinationPath] = useState('All files');
+
+  return (
+    <div className="h-[720px] min-h-[480px]">
+      <DialFileManager
+        {...args}
+        items={destinationPopupCaretItems}
+        rootItem={destinationPopupCaretRootItem}
+        defaultPath="All files"
+        defaultSelectedPaths={new Set(['All files/source.txt'])}
+        gridOptions={{
+          ...args.gridOptions,
+          selectionMode: GridSelectionMode.MULTIPLE,
+        }}
+        treeOptions={{
+          ...args.treeOptions,
+          expandedPaths: new Set(['All files']),
+          loadedPaths: new Set(['All files', 'All files/Loaded empty folder']),
+          header: 'Folder tree',
+        }}
+        bulkActionsToolbarOptions={{
+          getSelectionLabel: (selectedCount) =>
+            `${selectedCount} item(s) selected`,
+          actionLabels: {
+            [DialFileManagerActions.Copy]: 'Copy to',
+          },
+        }}
+        destinationFolderPopupOptions={{
+          destinationFolderPath: destinationPath,
+          setDestinationFolderPath: setDestinationPath,
+          getCopyHeader: () => 'Copy source.txt',
+        }}
+        onCopyFiles={() => undefined}
+      />
+    </div>
+  );
+};
+
+export const DestinationPopupLoadedEmptyFolder: Story = {
+  render: DestinationPopupLoadedEmptyFolderComponent,
+  play: async ({ canvasElement }) => {
+    await userEvent.click(
+      await within(canvasElement).findByRole('button', { name: 'Copy to' }),
+    );
+  },
+  parameters: {
+    docs: {
+      description: {
+        story:
+          'Click "Copy to" to open the destination popup. "Loaded empty folder" must not show a caret, while "Not loaded folder" keeps its caret until its contents are loaded. Resize the canvas to verify the same state in the mobile layout.',
+      },
+    },
+  },
+};
+
 const PopupComponent = (args: DialFileManagerProps) => {
   const [isOpen, setIsOpen] = useState(false);
   const { activeTab, handleTabChange, tabs } = useDialFileManagerTabs({

src/components/FileManager/FileManager.tsx

@@ -1576,7 +1576,11 @@ export const DialFileManagerView: FC = () => {
           sourceFolder={
             destinationFolderPopupOptions?.sourceFolder ?? currentPath
           }
-          treeOptions={{ header: treeOptions?.header }}
+          treeOptions={{
+            header: treeOptions?.header,
+            loadedPaths: treeOptions?.loadedPaths,
+            loadingPaths: treeOptions?.loadingPaths,
+          }}
           onFolderPopupPathChange={onFolderPopupPathChange}
           showHiddenFileSwitcher={showHiddenFileSwitcherInDestinationPopup}
           showCreateFolderButton={showCreateFolderButtonInDestinationPopup}