remove icon in card view header (#8298)

frontend/src/metadata/components/cell-formatter/file-name-formatter/index.js

@@ -24,9 +24,11 @@ const FileNameFormatter = ({
       className={classnames('sf-metadata-ui cell-formatter-container file-name-formatter', className)}
       title={value}
     >
+      {icon &&
         <div className="sf-metadata-file-icon-container">
           <img className="sf-metadata-file-icon" src={icon} onError={onLoadError} alt='' />
         </div>
+      }
       <span className="sf-metadata-file-name" onClick={onClickName}>{value}</span>
     </div>
   );

frontend/src/metadata/components/cell-formatter/file-name.js

@@ -7,7 +7,7 @@ import { siteRoot, thumbnailDefaultSize } from '../../../utils/constants';
 import { getParentDirFromRecord, getFileMTimeFromRecord } from '../../utils/cell';
 import { checkIsDir } from '../../utils/row';
 
-const FileName = ({ record, className: propsClassName, value, showThumbnail = true, onFileNameClick, ...params }) => {
+const FileName = ({ record, className: propsClassName, value, hideIcon = false, onFileNameClick, ...params }) => {
   const parentDir = useMemo(() => getParentDirFromRecord(record), [record]);
   const isDir = useMemo(() => checkIsDir(record), [record]);
   const className = useMemo(() => {
@@ -16,19 +16,20 @@ const FileName = ({ record, className: propsClassName, value, showThumbnail = tr
   }, [propsClassName, value]);
 
   const iconUrl = useMemo(() => {
+    if (hideIcon) return {};
     if (isDir) {
       const icon = Utils.getFolderIconUrl();
       return { iconUrl: icon, defaultIconUrl: icon };
     }
     const defaultIconUrl = Utils.getFileIconUrl(value);
-    if (Utils.imageCheck(value) && showThumbnail) {
+    if (Utils.imageCheck(value)) {
       const path = Utils.encodePath(Utils.joinPath(parentDir, value));
       const repoID = window.sfMetadataStore.repoId;
       const thumbnail = `${siteRoot}thumbnail/${repoID}/${thumbnailDefaultSize}${path}?mtime=${getFileMTimeFromRecord(record)}`;
       return { iconUrl: thumbnail, defaultIconUrl };
     }
     return { iconUrl: defaultIconUrl, defaultIconUrl };
-  }, [isDir, value, parentDir, record, showThumbnail]);
+  }, [isDir, hideIcon, value, parentDir, record]);
 
   return (<FileNameFormatter { ...params } className={className} value={value} onClickName={onFileNameClick} { ...iconUrl } />);
 
@@ -36,6 +37,7 @@ const FileName = ({ record, className: propsClassName, value, showThumbnail = tr
 
 FileName.propTypes = {
   value: PropTypes.string,
+  hideIcon: PropTypes.bool,
   record: PropTypes.object.isRequired,
   className: PropTypes.string,
   onFileNameClick: PropTypes.func,

frontend/src/metadata/views/card/card-items/card-item/index.js

@@ -84,7 +84,14 @@ const CardItem = ({
         <img loading="lazy" className="sf-metadata-card-item-image" ref={imgRef} src={imageURLs.URL} onError={onLoadError} alt="" />
       </div>
       <div className="sf-metadata-card-item-text-container">
-        <Formatter value={fileNameValue} column={fileNameColumn} record={record} showThumbnail={false} onFileNameClick={handleFilenameClick} tagsData={tagsData} />
+        <Formatter
+          value={fileNameValue}
+          column={fileNameColumn}
+          record={record}
+          hideIcon={true}
+          onFileNameClick={handleFilenameClick}
+          tagsData={tagsData}
+        />
         <div className="sf-metadata-card-last-modified-info">
           <Formatter value={modifierValue} column={modifierColumn} record={record} tagsData={tagsData} />
           <Formatter value={mtimeValue} format="relativeTime" column={mtimeColumn} record={record} tagsData={tagsData} />