From 63af2afb8db7ce7afdb278542475ca64fb821234 Mon Sep 17 00:00:00 2001
From: Markus Fichtner <markus.fichtner@vivid-planet.com>
Date: Wed, 6 Mar 2024 12:49:33 +0100
Subject: [PATCH] Update Column Names according to new Design

---
 .../src/dam/DataGrid/FolderDataGrid.gql.ts    |  2 +
 .../src/dam/DataGrid/FolderDataGrid.tsx       | 57 ++++++++++++++++---
 2 files changed, 52 insertions(+), 7 deletions(-)

diff --git a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts
index b8bf3b00f14..20e89e30151 100644
--- a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts
+++ b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.gql.ts
@@ -31,6 +31,7 @@ export const damFileTableFragment = gql`
             ...DamFileThumbnail
         }
         updatedAt
+        createdAt
         importSourceType
     }
     ${damFileThumbnailFragment}
@@ -49,6 +50,7 @@ export const damFolderTableFragment = gql`
         numberOfChildFolders
         isInboxFromOtherScope
         updatedAt
+        createdAt
     }
 `;
 
diff --git a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx
index 818217212ae..5564b8e5446 100644
--- a/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx
+++ b/packages/admin/cms-admin/src/dam/DataGrid/FolderDataGrid.tsx
@@ -393,10 +393,33 @@ const FolderDataGrid = ({
             disableColumnMenu: true,
         },
         {
-            field: "size",
+            field: "type",
             headerName: intl.formatMessage({
-                id: "comet.dam.file.size",
-                defaultMessage: "Size",
+                id: "comet.dam.file.format",
+                defaultMessage: "Type/Format",
+            }),
+            headerAlign: "left",
+            align: "left",
+            minWidth: 140,
+            renderCell: ({ row }) => {
+                if (isFile(row) && row.mimetype) {
+                    return row.mimetype;
+                } else if (isFolder(row)) {
+                    return intl.formatMessage({
+                        id: "comet.dam.file.format.folder",
+                        defaultMessage: "Folder",
+                    });
+                }
+            },
+            sortable: false,
+            hideSortIcons: true,
+            disableColumnMenu: true,
+        },
+        {
+            field: "info",
+            headerName: intl.formatMessage({
+                id: "comet.dam.file.info",
+                defaultMessage: "Info",
             }),
             headerAlign: "right",
             align: "right",
@@ -408,7 +431,7 @@ const FolderDataGrid = ({
                     return (
                         <FormattedMessage
                             id="comet.dam.folderSize"
-                            defaultMessage="{number} {number, plural, one {item} other {items}}"
+                            defaultMessage="{number} {number, plural, one {file} other {files}}"
                             values={{
                                 number: row.numberOfFiles + row.numberOfChildFolders,
                             }}
@@ -420,14 +443,34 @@ const FolderDataGrid = ({
             hideSortIcons: true,
             disableColumnMenu: true,
         },
+        {
+            field: "createdAt",
+            headerName: intl.formatMessage({
+                id: "comet.dam.file.creationDate",
+                defaultMessage: "Creation",
+            }),
+            headerAlign: "left",
+            align: "left",
+            minWidth: 180,
+            renderCell: ({ row }) => (
+                <div>
+                    <FormattedDate value={row.createdAt} day="2-digit" month="2-digit" year="numeric" />
+                    {", "}
+                    <FormattedTime value={row.createdAt} />
+                </div>
+            ),
+            sortable: false,
+            hideSortIcons: true,
+            disableColumnMenu: true,
+        },
         {
             field: "updatedAt",
             headerName: intl.formatMessage({
                 id: "comet.dam.file.changeDate",
-                defaultMessage: "Change date",
+                defaultMessage: "Latest change",
             }),
-            headerAlign: "right",
-            align: "right",
+            headerAlign: "left",
+            align: "left",
             minWidth: 180,
             renderCell: ({ row }) => (
                 <div>