added preview and edit icon

packages/core/upload/admin/src/components/AssetTableList/PreviewCell.js

@@ -0,0 +1,53 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import styled from 'styled-components';
+import { prefixFileUrlWithBackendUrl, pxToRem } from '@strapi/helper-plugin';
+import { Avatar } from '@strapi/design-system/Avatar';
+import { Flex } from '@strapi/design-system/Flex';
+import { Typography } from '@strapi/design-system/Typography';
+
+const FileWrapper = styled(Flex)`
+  border-radius: 50%;
+
+  span {
+    line-height: 0.6rem;
+    font-size: 0.6rem;
+  }
+`;
+
+export const PreviewCell = ({ alternativeText, fileExtension, mime, name, thumbnailURL, url }) => {
+  const fileURL = prefixFileUrlWithBackendUrl(url);
+
+  if (mime.includes('image')) {
+    const mediaURL = prefixFileUrlWithBackendUrl(thumbnailURL) ?? fileURL;
+
+    return <Avatar src={mediaURL} alt={alternativeText || name} preview />;
+  }
+
+  return (
+    <FileWrapper
+      background="secondary100"
+      height={pxToRem(26)}
+      justifyContent="center"
+      width={pxToRem(26)}
+    >
+      <Typography variant="sigma" textColor="secondary600">
+        {fileExtension}
+      </Typography>
+    </FileWrapper>
+  );
+};
+
+PreviewCell.defaultProps = {
+  alternativeText: null,
+  thumbnailURL: null,
+};
+
+PreviewCell.propTypes = {
+  alternativeText: PropTypes.string,
+  fileExtension: PropTypes.string.isRequired,
+  mime: PropTypes.string.isRequired,
+  name: PropTypes.string.isRequired,
+  thumbnailURL: PropTypes.string,
+  url: PropTypes.string.isRequired,
+};

packages/core/upload/admin/src/components/AssetTableList/TableRows.js

@@ -4,29 +4,38 @@ import { useIntl } from 'react-intl';
 import { getFileExtension } from '@strapi/helper-plugin';
 import { Tbody, Td, Tr } from '@strapi/design-system/Table';
 import { Typography } from '@strapi/design-system/Typography';
+import { IconButton } from '@strapi/design-system/IconButton';
+import Pencil from '@strapi/icons/Pencil';
 
+import { PreviewCell } from './PreviewCell';
 import { AssetDefinition } from '../../constants';
-import formatBytes from '../../utils/formatBytes';
+import { formatBytes, getTrad } from '../../utils';
 
-export const TableRows = ({ assets }) => {
+export const TableRows = ({ assets, onEditAsset }) => {
-  const { formatDate } = useIntl();
+  const { formatDate, formatMessage } = useIntl();
 
   return (
     <Tbody>
       {assets.map((asset) => {
-        // console.log(asset);
+        const { alternativeText, id, name, ext, size, createdAt, url, mime, formats } = asset;
-        const { id, name, ext, size, createdAt } = asset;
 
         return (
           <Tr key={id}>
             <Td>
-              <Typography>TODO</Typography>
+              <PreviewCell
+                alternativeText={alternativeText}
+                fileExtension={getFileExtension(ext)}
+                mime={mime}
+                name={name}
+                thumbnailURL={formats?.thumbnail?.url}
+                url={url}
+              />
             </Td>
             <Td>
               <Typography>{name}</Typography>
             </Td>
             <Td>
-              <Typography>{getFileExtension(ext)}</Typography>
+              <Typography>{getFileExtension(ext).toUpperCase()}</Typography>
             </Td>
             <Td>
               <Typography>{formatBytes(size)}</Typography>
@@ -34,6 +43,18 @@ export const TableRows = ({ assets }) => {
             <Td>
               <Typography>{formatDate(new Date(createdAt))}</Typography>
             </Td>
+            {onEditAsset && (
+              <Td>
+                <IconButton
+                  label={formatMessage({
+                    id: getTrad('control-card.edit'),
+                    defaultMessage: 'Edit',
+                  })}
+                  icon={<Pencil />}
+                  onClick={() => onEditAsset(asset)}
+                />
+              </Td>
+            )}
           </Tr>
         );
       })}
@@ -41,6 +62,11 @@ export const TableRows = ({ assets }) => {
   );
 };
 
+TableRows.defaultProps = {
+  onEditAsset: null,
+};
+
 TableRows.propTypes = {
   assets: PropTypes.arrayOf(AssetDefinition).isRequired,
+  onEditAsset: PropTypes.func,
 };

packages/core/upload/admin/src/components/AssetTableList/index.js

@@ -7,7 +7,7 @@ import { AssetDefinition } from '../../constants';
 import { tableHeaders } from './utils/tableHeaders';
 import { TableRows } from './TableRows';
 
-export const AssetTableList = ({ assets }) => {
+export const AssetTableList = ({ assets, onEditAsset }) => {
   const { formatMessage } = useIntl();
 
   const headers = tableHeaders.map((header) => ({
@@ -19,12 +19,17 @@ export const AssetTableList = ({ assets }) => {
   }));
 
   return (
-    <DynamicTable contentType="assets" headers={headers} rows={assets}>
+    <DynamicTable withBulkActions contentType="assets" headers={headers} rows={assets}>
-      <TableRows assets={assets} />
+      <TableRows onEditAsset={onEditAsset} assets={assets} />
     </DynamicTable>
   );
 };
 
+AssetTableList.defaultProps = {
+  onEditAsset: null,
+};
+
 AssetTableList.propTypes = {
   assets: PropTypes.arrayOf(AssetDefinition).isRequired,
+  onEditAsset: PropTypes.func,
 };

packages/core/upload/admin/src/pages/App/MediaLibrary.js

@@ -355,7 +355,7 @@ export const MediaLibrary = () => {
                       }
                     />
                   ) : (
-                    <AssetTableList assets={assets} />
+                    <AssetTableList assets={assets} onEditAsset={setAssetToEdit} />
                   )}
 
                   {assetsData?.pagination && (