Change files count information in files table.

Change file name and mime type in files table.
elastic · Mar 24, 2023 · 95926fc · 95926fc
1 parent df1702c
commit 95926fc
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 20 deletions.
diff --git a/x-pack/plugins/cases/public/components/files/files_table.tsx b/x-pack/plugins/cases/public/components/files/files_table.tsx
@@ -4,7 +4,7 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import React, { useMemo, useState } from 'react';
+import React, { useState } from 'react';
 
 import type { Pagination, EuiBasicTableProps } from '@elastic/eui';
 import type { FileJSON } from '@kbn/shared-ux-file-types';
@@ -52,20 +52,6 @@ export const FilesTable = ({ caseId, items, pagination, onChange, isLoading }: F
     getDownloadHref: filesClient.getDownloadHref,
   });
 
-  const resultsCount = useMemo(
-    () => (
-      <>
-        <strong>
-          {pagination.pageSize * pagination.pageIndex + 1}
-          {'-'}
-          {pagination.pageSize * pagination.pageIndex + pagination.pageSize}
-        </strong>{' '}
-        {'of'} <strong>{pagination.totalItemCount}</strong>
-      </>
-    ),
-    [pagination.pageIndex, pagination.pageSize, pagination.totalItemCount]
-  );
-
   return isLoading ? (
     <>
       <EuiSpacer size="l" />
@@ -76,8 +62,8 @@ export const FilesTable = ({ caseId, items, pagination, onChange, isLoading }: F
       {pagination.totalItemCount > 0 && (
         <>
           <EuiSpacer size="xl" />
-          <EuiText size="xs" data-test-subj="cases-files-table-results-count">
-            {i18n.RESULTS_COUNT} {resultsCount}
+          <EuiText size="xs" color="subdued" data-test-subj="cases-files-table-results-count">
+            {i18n.SHOWING_FILES(pagination.totalItemCount)}
           </EuiText>
         </>
       )}

diff --git a/x-pack/plugins/cases/public/components/files/translations.tsx b/x-pack/plugins/cases/public/components/files/translations.tsx
@@ -68,3 +68,9 @@ export const SUCCESSFUL_UPLOAD_FILE_NAME = (fileName: string) =>
     defaultMessage: 'File {fileName} uploaded successfully',
     values: { fileName },
   });
+
+export const SHOWING_FILES = (totalFiles: number) =>
+  i18n.translate('xpack.cases.caseView.files.showingFilesTitle', {
+    values: { totalFiles },
+    defaultMessage: 'Showing {totalFiles} {totalFiles, plural, =1 {file} other {files}}',
+  });
diff --git a/x-pack/plugins/cases/public/components/files/use_files_table_columns.tsx b/x-pack/plugins/cases/public/components/files/use_files_table_columns.tsx
@@ -35,18 +35,21 @@ export const useFilesTableColumns = ({
       name: i18n.NAME,
       'data-test-subj': 'cases-files-table-filename',
       render: (attachment: FileJSON) => {
+        const fileName = `${attachment.name}.${attachment.extension}`;
         if (isImage(attachment)) {
-          return <EuiLink onClick={() => showPreview(attachment)}>{attachment.name}</EuiLink>;
+          return <EuiLink onClick={() => showPreview(attachment)}>{fileName}</EuiLink>;
         } else {
-          return <span title={i18n.NO_PREVIEW}>{attachment.name}</span>;
+          return <span title={i18n.NO_PREVIEW}>{fileName}</span>;
         }
       },
       width: '60%',
     },
     {
       name: i18n.TYPE,
-      field: 'mimeType',
       'data-test-subj': 'cases-files-table-filetype',
+      render: (attachment: FileJSON) => {
+        return <span>{`${attachment.mimeType?.split('/')[0]}` || ''}</span>;
+      },
     },
     {
       name: i18n.DATE_ADDED,