+
+
+ {autoDeleteStatusInfo.text}
+
+
- {dateService.formatDefaultDate(item.updatedAt, t)}
+ {dateService.formatDefaultDate(item.updatedAt, translate)}
{/* SIZE */}
diff --git a/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/getListHeaders.test.ts b/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/getListHeaders.test.ts
new file mode 100644
index 0000000000..dfd6e7311b
--- /dev/null
+++ b/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/getListHeaders.test.ts
@@ -0,0 +1,36 @@
+import { describe, expect, test, vi } from 'vitest';
+import { getListHeaders } from './getListHeaders';
+
+describe('List column headers', () => {
+ const mockTranslate = vi.fn((key: string) => key);
+
+ test('when viewing the regular drive, then it returns name, modified date, and size columns', () => {
+ const headers = getListHeaders(mockTranslate, false, false);
+
+ expect(headers).toHaveLength(3);
+ expect(headers[0].name).toBe('name');
+ expect(headers[1].name).toBe('updatedAt');
+ expect(headers[2].name).toBe('size');
+ });
+
+ test('when viewing the trash, then it includes a sortable auto-delete column and disables size sorting', () => {
+ const headers = getListHeaders(mockTranslate, false, true);
+
+ expect(headers).toHaveLength(4);
+
+ const caducityHeader = headers.find((h) => h.name === 'caducityDate');
+ expect(caducityHeader?.label).toBe('drive.list.columns.autoDelete');
+ expect(caducityHeader?.orderable).toBe(true);
+
+ const sizeHeader = headers.find((h) => h.name === 'size');
+ expect(sizeHeader?.orderable).toBe(false);
+ });
+
+ test('when viewing recent files, then all columns cannot be sorted', () => {
+ const headers = getListHeaders(mockTranslate, true, false);
+
+ headers.forEach((header) => {
+ expect(header.orderable).toBe(false);
+ });
+ });
+});
diff --git a/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/getListHeaders.ts b/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/getListHeaders.ts
new file mode 100644
index 0000000000..00a60f2997
--- /dev/null
+++ b/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/getListHeaders.ts
@@ -0,0 +1,56 @@
+interface ListHeaderItem {
+ label: string;
+ width: string;
+ name: 'type' | 'name' | 'updatedAt' | 'size' | 'caducityDate';
+ orderable: boolean;
+ defaultDirection: 'ASC' | 'DESC';
+ buttonDataCy?: string;
+ textDataCy?: string;
+}
+
+export const getListHeaders = (
+ translate: (key: string) => string,
+ isRecents: boolean,
+ isTrash: boolean,
+): ListHeaderItem[] => {
+ const headers: ListHeaderItem[] = [
+ {
+ label: translate('drive.list.columns.name'),
+ width: 'flex grow items-center min-w-driveNameHeader',
+ name: 'name',
+ orderable: !isRecents,
+ defaultDirection: 'ASC',
+ buttonDataCy: 'driveListHeaderNameButton',
+ textDataCy: 'driveListHeaderNameButtonText',
+ },
+ ];
+
+ if (isTrash) {
+ headers.push({
+ label: translate('drive.list.columns.autoDelete'),
+ width: 'w-date',
+ name: 'caducityDate',
+ orderable: true,
+ defaultDirection: 'ASC',
+ });
+ }
+
+ headers.push(
+ {
+ label: translate('drive.list.columns.modified'),
+ width: 'w-date',
+ name: 'updatedAt',
+ orderable: !isRecents,
+ defaultDirection: 'ASC',
+ },
+ {
+ label: translate('drive.list.columns.size'),
+ orderable: !isRecents && !isTrash,
+ defaultDirection: 'ASC',
+ width: 'w-size',
+ name: 'size',
+ },
+ );
+
+ return headers;
+};
diff --git a/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/index.ts b/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/index.ts
new file mode 100644
index 0000000000..048c45e3b8
--- /dev/null
+++ b/src/views/Drive/components/DriveExplorer/components/DriveExplorerList/index.ts
@@ -0,0 +1 @@
+export { default } from './DriveExplorerList';