Fix AddFile button in empty FilesTable.

Add spacer for loading FilesTable. Use file name as "alt" in FilePreview. Remove HiddenButtonGroup from utility bar. Improve query keys for caseFiles. Remove owner from useGetCaseFiles.
elastic · Mar 23, 2023 · af1f15f · af1f15f
1 parent 1c03756
commit af1f15f
Show file tree

Hide file tree

Showing 7 changed files with 20 additions and 55 deletions.
diff --git a/x-pack/plugins/cases/public/components/case_view/components/case_view_files.tsx b/x-pack/plugins/cases/public/components/case_view/components/case_view_files.tsx
@@ -80,6 +80,7 @@ export const CaseViewFiles = ({ caseData }: CaseViewFilesProps) => {
           <EuiFlexItem>
             <FilesUtilityBar caseId={caseData.id} onSearch={onSearchChange} />
             <FilesTable
+              caseId={caseData.id}
               isLoading={isLoading}
               items={caseFiles?.files ?? []}
               onChange={onTableChange}

diff --git a/x-pack/plugins/cases/public/components/files/file_preview.tsx b/x-pack/plugins/cases/public/components/files/file_preview.tsx
@@ -35,10 +35,10 @@ export const FilePreview = ({ closePreview, selectedFile, getDownloadHref }: Fil
     <StyledOverlayMask>
       <EuiFocusTrap onClickOutside={closePreview}>
         <EuiImage
-          alt=""
+          alt={selectedFile.name}
           size="original"
           src={getDownloadHref({
-            id: selectedFile?.id || '',
+            id: selectedFile.id || '',
             fileKind: CASES_FILE_KINDS[APP_ID].id,
           })}
         />

diff --git a/x-pack/plugins/cases/public/components/files/files_table.test.tsx b/x-pack/plugins/cases/public/components/files/files_table.test.tsx
@@ -14,6 +14,7 @@ import { createAppMockRenderer, TestProviders } from '../../common/mock';
 import { FilesTable } from './files_table';
 
 const defaultProps = {
+  caseId: 'foobar',
   items: [basicFileMock],
   pagination: { pageIndex: 0, pageSize: 10, totalItemCount: 1 },
   onChange: jest.fn(),

diff --git a/x-pack/plugins/cases/public/components/files/files_table.tsx b/x-pack/plugins/cases/public/components/files/files_table.tsx
@@ -9,43 +9,34 @@ import React, { useMemo, useState } from 'react';
 import type { Pagination, EuiBasicTableProps } from '@elastic/eui';
 import type { FileJSON } from '@kbn/shared-ux-file-types';
 
-import {
-  EuiBasicTable,
-  EuiLoadingContent,
-  EuiSpacer,
-  EuiText,
-  EuiEmptyPrompt,
-  EuiButton,
-} from '@elastic/eui';
+import { EuiBasicTable, EuiLoadingContent, EuiSpacer, EuiText, EuiEmptyPrompt } from '@elastic/eui';
 import { useFilesContext } from '@kbn/shared-ux-file-context';
 
 import * as i18n from './translations';
 import { useFilesTableColumns } from './use_files_table_columns';
 import { FilePreview } from './file_preview';
+import { AddFile } from './add_file';
 
-const EmptyFilesTable = () => (
+const EmptyFilesTable = ({ caseId }: { caseId: string }) => (
   <EuiEmptyPrompt
     title={<h3>{i18n.NO_FILES}</h3>}
     data-test-subj="cases-files-table-empty"
     titleSize="xs"
-    actions={
-      <EuiButton size="s" iconType="plusInCircle" data-test-subj="case-files-table-upload-file">
-        {i18n.ADD_FILE}
-      </EuiButton>
-    }
+    actions={<AddFile caseId={caseId} />}
   />
 );
 
 EmptyFilesTable.displayName = 'EmptyFilesTable';
 
 interface FilesTableProps {
+  caseId: string;
   isLoading: boolean;
   items: FileJSON[];
   onChange: EuiBasicTableProps<FileJSON>['onChange'];
   pagination: Pagination;
 }
 
-export const FilesTable = ({ items, pagination, onChange, isLoading }: FilesTableProps) => {
+export const FilesTable = ({ caseId, items, pagination, onChange, isLoading }: FilesTableProps) => {
   const { client: filesClient } = useFilesContext();
   const [isPreviewVisible, setIsPreviewVisible] = useState(false);
   const [selectedFile, setSelectedFile] = useState<FileJSON>();
@@ -76,7 +67,10 @@ export const FilesTable = ({ items, pagination, onChange, isLoading }: FilesTabl
   );
 
   return isLoading ? (
-    <EuiLoadingContent data-test-subj="cases-files-table-loading" lines={10} />
+    <>
+      <EuiSpacer size="l" />
+      <EuiLoadingContent data-test-subj="cases-files-table-loading" lines={10} />
+    </>
   ) : (
     <>
       {pagination.totalItemCount > 0 && (
@@ -95,7 +89,7 @@ export const FilesTable = ({ items, pagination, onChange, isLoading }: FilesTabl
         pagination={pagination}
         onChange={onChange}
         data-test-subj="cases-files-table"
-        noItemsMessage={<EmptyFilesTable />}
+        noItemsMessage={<EmptyFilesTable caseId={caseId} />}
       />
       {isPreviewVisible && selectedFile !== undefined && (
         <FilePreview

diff --git a/x-pack/plugins/cases/public/components/files/files_utility_bar.tsx b/x-pack/plugins/cases/public/components/files/files_utility_bar.tsx
@@ -5,9 +5,8 @@
  * 2.0.
  */
 import React from 'react';
-import styled from 'styled-components';
 
-import { EuiButtonGroup, EuiFlexGroup, EuiFlexItem, EuiFieldSearch } from '@elastic/eui';
+import { EuiFlexGroup, EuiFlexItem, EuiFieldSearch } from '@elastic/eui';
 import { AddFile } from './add_file';
 
 import * as i18n from './translations';
@@ -17,25 +16,6 @@ interface FilesUtilityBarProps {
   onSearch: (newSearch: string) => void;
 }
 
-const HiddenButtonGroup = styled(EuiButtonGroup)`
-  display: none;
-`;
-
-const tableViewSelectedId = 'tableViewSelectedId';
-const toggleButtonsIcons = [
-  {
-    id: 'thumbnailViewSelectedId',
-    label: 'Thumbnail view',
-    iconType: 'grid',
-    isDisabled: true,
-  },
-  {
-    id: tableViewSelectedId,
-    label: 'Table view',
-    iconType: 'editorUnorderedList',
-  },
-];
-
 export const FilesUtilityBar = ({ caseId, onSearch }: FilesUtilityBarProps) => {
   return (
     <EuiFlexGroup alignItems="center">
@@ -51,16 +31,6 @@ export const FilesUtilityBar = ({ caseId, onSearch }: FilesUtilityBarProps) => {
           data-test-subj="case-detail-search-file"
         />
       </EuiFlexItem>
-      <EuiFlexItem />
-      <EuiFlexItem grow={false}>
-        <HiddenButtonGroup
-          legend="Text align"
-          options={toggleButtonsIcons}
-          idSelected={tableViewSelectedId}
-          onChange={() => {}}
-          isIconOnly
-        />
-      </EuiFlexItem>
     </EuiFlexGroup>
   );
 };

diff --git a/x-pack/plugins/cases/public/containers/constants.ts b/x-pack/plugins/cases/public/containers/constants.ts
@@ -23,7 +23,8 @@ export const casesQueriesKeys = {
   cases: (params: unknown) => [...casesQueriesKeys.casesList(), 'all-cases', params] as const,
   caseView: () => [...casesQueriesKeys.all, 'case'] as const,
   case: (id: string) => [...casesQueriesKeys.caseView(), id] as const,
-  caseFiles: (params: unknown) => [...casesQueriesKeys.caseView(), 'attachments', params] as const,
+  caseFiles: (id: string, params: unknown) =>
+    [...casesQueriesKeys.case(id), 'attachments', params] as const,
   caseMetrics: (id: string, features: SingleCaseMetricsFeature[]) =>
     [...casesQueriesKeys.case(id), 'metrics', features] as const,
   caseConnectors: (id: string) => [...casesQueriesKeys.case(id), 'connectors'],

diff --git a/x-pack/plugins/cases/public/containers/use_get_case_files.tsx b/x-pack/plugins/cases/public/containers/use_get_case_files.tsx
@@ -15,7 +15,6 @@ import type { ServerError } from '../types';
 
 import { APP_ID } from '../../common';
 import { useCasesToast } from '../common/use_cases_toast';
-import { useCasesContext } from '../components/cases_context/use_cases_context';
 import { CASES_FILE_KINDS } from '../files';
 import { casesQueriesKeys } from './constants';
 import * as i18n from './translations';
@@ -36,19 +35,18 @@ export const useGetCaseFiles = ({
   perPage,
   searchTerm,
 }: GetCaseFilesParams): UseQueryResult<{ files: FileJSON[]; total: number }> => {
-  const { owner } = useCasesContext();
   const { showErrorToast } = useCasesToast();
   const { client: filesClient } = useFilesContext();
 
   return useQuery(
-    casesQueriesKeys.caseFiles({ caseId, page, perPage, searchTerm, owner: owner[0] }),
+    casesQueriesKeys.caseFiles(caseId, { page, perPage, searchTerm }),
     () => {
       return filesClient.list({
         kind: CASES_FILE_KINDS[APP_ID].id,
         page: page + 1,
         ...(searchTerm && { name: `*${searchTerm}*` }),
         perPage,
-        meta: { caseId, owner: owner[0] },
+        meta: { caseId },
       });
     },
     {