[Cases] Detail View Attachments Table

packages/shared-ux/file/file_upload/impl/src/file_upload.tsx

@@ -19,7 +19,7 @@ import { context } from './context';
 /**
  * An object representing an uploaded file
  */
-interface UploadedFile<Meta = unknown> {
+export interface UploadedFile<Meta = unknown> {
   /**
    * The ID that was generated for the uploaded file
    */

x-pack/plugins/cases/common/types.ts

@@ -24,4 +24,5 @@ export type SnakeToCamelCase<T> = T extends Record<string, unknown>
 export enum CASE_VIEW_PAGE_TABS {
   ALERTS = 'alerts',
   ACTIVITY = 'activity',
+  FILES = 'files',
 }

x-pack/plugins/cases/public/application.tsx

@@ -9,19 +9,21 @@ import React from 'react';
 import ReactDOM from 'react-dom';
 import { Router } from 'react-router-dom';
 
-import { I18nProvider } from '@kbn/i18n-react';
 import { EuiErrorBoundary } from '@elastic/eui';
-
+import { I18nProvider } from '@kbn/i18n-react';
+import { EuiThemeProvider as StyledComponentsThemeProvider } from '@kbn/kibana-react-plugin/common';
 import {
   KibanaContextProvider,
   KibanaThemeProvider,
   useUiSetting$,
 } from '@kbn/kibana-react-plugin/public';
-import { EuiThemeProvider as StyledComponentsThemeProvider } from '@kbn/kibana-react-plugin/common';
-import type { RenderAppProps } from './types';
-import { CasesApp } from './components/app';
+
+import type { ScopedFilesClient } from '@kbn/files-plugin/public';
 import type { ExternalReferenceAttachmentTypeRegistry } from './client/attachment_framework/external_reference_registry';
 import type { PersistableStateAttachmentTypeRegistry } from './client/attachment_framework/persistable_state_registry';
+import type { RenderAppProps } from './types';
+
+import { CasesApp } from './components/app';
 
 export const renderApp = (deps: RenderAppProps) => {
   const { mountParams } = deps;
@@ -37,17 +39,23 @@ export const renderApp = (deps: RenderAppProps) => {
 interface CasesAppWithContextProps {
   externalReferenceAttachmentTypeRegistry: ExternalReferenceAttachmentTypeRegistry;
   persistableStateAttachmentTypeRegistry: PersistableStateAttachmentTypeRegistry;
+  getFilesClient: (scope: string) => ScopedFilesClient;
 }
 
 const CasesAppWithContext: React.FC<CasesAppWithContextProps> = React.memo(
-  ({ externalReferenceAttachmentTypeRegistry, persistableStateAttachmentTypeRegistry }) => {
+  ({
+    externalReferenceAttachmentTypeRegistry,
+    persistableStateAttachmentTypeRegistry,
+    getFilesClient,
+  }) => {
     const [darkMode] = useUiSetting$<boolean>('theme:darkMode');
 
     return (
       <StyledComponentsThemeProvider darkMode={darkMode}>
         <CasesApp
           externalReferenceAttachmentTypeRegistry={externalReferenceAttachmentTypeRegistry}
           persistableStateAttachmentTypeRegistry={persistableStateAttachmentTypeRegistry}
+          getFilesClient={getFilesClient}
         />
       </StyledComponentsThemeProvider>
     );
@@ -78,6 +86,7 @@ export const App: React.FC<{ deps: RenderAppProps }> = ({ deps }) => {
                   deps.externalReferenceAttachmentTypeRegistry
                 }
                 persistableStateAttachmentTypeRegistry={deps.persistableStateAttachmentTypeRegistry}
+                getFilesClient={pluginsStart.files.filesClientFactory.asScoped}
               />
             </Router>
           </KibanaContextProvider>

x-pack/plugins/cases/public/client/ui/get_all_cases_selector_modal.tsx

@@ -14,7 +14,9 @@ import { CasesProvider } from '../../components/cases_context';
 type GetAllCasesSelectorModalPropsInternal = AllCasesSelectorModalProps & CasesContextProps;
 export type GetAllCasesSelectorModalProps = Omit<
   GetAllCasesSelectorModalPropsInternal,
-  'externalReferenceAttachmentTypeRegistry' | 'persistableStateAttachmentTypeRegistry'
+  | 'externalReferenceAttachmentTypeRegistry'
+  | 'persistableStateAttachmentTypeRegistry'
+  | 'getFilesClient'
 >;
 
 const AllCasesSelectorModalLazy: React.FC<AllCasesSelectorModalProps> = lazy(
@@ -23,6 +25,7 @@ const AllCasesSelectorModalLazy: React.FC<AllCasesSelectorModalProps> = lazy(
 export const getAllCasesSelectorModalLazy = ({
   externalReferenceAttachmentTypeRegistry,
   persistableStateAttachmentTypeRegistry,
+  getFilesClient,
   owner,
   permissions,
   hiddenStatuses,
@@ -33,6 +36,7 @@ export const getAllCasesSelectorModalLazy = ({
     value={{
       externalReferenceAttachmentTypeRegistry,
       persistableStateAttachmentTypeRegistry,
+      getFilesClient,
       owner,
       permissions,
     }}

x-pack/plugins/cases/public/client/ui/get_cases.tsx

@@ -14,14 +14,17 @@ import { CasesProvider } from '../../components/cases_context';
 type GetCasesPropsInternal = CasesProps & CasesContextProps;
 export type GetCasesProps = Omit<
   GetCasesPropsInternal,
-  'externalReferenceAttachmentTypeRegistry' | 'persistableStateAttachmentTypeRegistry'
+  | 'externalReferenceAttachmentTypeRegistry'
+  | 'persistableStateAttachmentTypeRegistry'
+  | 'getFilesClient'
 >;
 
 const CasesRoutesLazy: React.FC<CasesProps> = lazy(() => import('../../components/app/routes'));
 
 export const getCasesLazy = ({
   externalReferenceAttachmentTypeRegistry,
   persistableStateAttachmentTypeRegistry,
+  getFilesClient,
   owner,
   permissions,
   basePath,
@@ -39,6 +42,7 @@ export const getCasesLazy = ({
     value={{
       externalReferenceAttachmentTypeRegistry,
       persistableStateAttachmentTypeRegistry,
+      getFilesClient,
       owner,
       permissions,
       basePath,

x-pack/plugins/cases/public/client/ui/get_cases_context.tsx

@@ -13,7 +13,9 @@ import type { CasesContextProps } from '../../components/cases_context';
 export type GetCasesContextPropsInternal = CasesContextProps;
 export type GetCasesContextProps = Omit<
   CasesContextProps,
-  'externalReferenceAttachmentTypeRegistry' | 'persistableStateAttachmentTypeRegistry'
+  | 'externalReferenceAttachmentTypeRegistry'
+  | 'persistableStateAttachmentTypeRegistry'
+  | 'getFilesClient'
 >;
 
 const CasesProviderLazy: React.FC<{ value: GetCasesContextPropsInternal }> = lazy(
@@ -28,6 +30,7 @@ const CasesProviderLazyWrapper = ({
   features,
   children,
   releasePhase,
+  getFilesClient,
 }: GetCasesContextPropsInternal & { children: ReactNode }) => {
   return (
     <Suspense fallback={<EuiLoadingSpinner />}>
@@ -39,6 +42,7 @@ const CasesProviderLazyWrapper = ({
           permissions,
           features,
           releasePhase,
+          getFilesClient,
         }}
       >
         {children}
@@ -52,9 +56,12 @@ CasesProviderLazyWrapper.displayName = 'CasesProviderLazyWrapper';
 export const getCasesContextLazy = ({
   externalReferenceAttachmentTypeRegistry,
   persistableStateAttachmentTypeRegistry,
+  getFilesClient,
 }: Pick<
   GetCasesContextPropsInternal,
-  'externalReferenceAttachmentTypeRegistry' | 'persistableStateAttachmentTypeRegistry'
+  | 'externalReferenceAttachmentTypeRegistry'
+  | 'persistableStateAttachmentTypeRegistry'
+  | 'getFilesClient'
 >): (() => React.FC<GetCasesContextProps>) => {
   const CasesProviderLazyWrapperWithRegistry: React.FC<GetCasesContextProps> = ({
     children,
@@ -64,6 +71,7 @@ export const getCasesContextLazy = ({
       {...props}
       externalReferenceAttachmentTypeRegistry={externalReferenceAttachmentTypeRegistry}
       persistableStateAttachmentTypeRegistry={persistableStateAttachmentTypeRegistry}
+      getFilesClient={getFilesClient}
     >
       {children}
     </CasesProviderLazyWrapper>

x-pack/plugins/cases/public/client/ui/get_create_case_flyout.tsx

@@ -14,7 +14,9 @@ import { CasesProvider } from '../../components/cases_context';
 type GetCreateCaseFlyoutPropsInternal = CreateCaseFlyoutProps & CasesContextProps;
 export type GetCreateCaseFlyoutProps = Omit<
   GetCreateCaseFlyoutPropsInternal,
-  'externalReferenceAttachmentTypeRegistry' | 'persistableStateAttachmentTypeRegistry'
+  | 'externalReferenceAttachmentTypeRegistry'
+  | 'persistableStateAttachmentTypeRegistry'
+  | 'getFilesClient'
 >;
 
 export const CreateCaseFlyoutLazy: React.FC<CreateCaseFlyoutProps> = lazy(
@@ -23,6 +25,7 @@ export const CreateCaseFlyoutLazy: React.FC<CreateCaseFlyoutProps> = lazy(
 export const getCreateCaseFlyoutLazy = ({
   externalReferenceAttachmentTypeRegistry,
   persistableStateAttachmentTypeRegistry,
+  getFilesClient,
   owner,
   permissions,
   features,
@@ -35,6 +38,7 @@ export const getCreateCaseFlyoutLazy = ({
     value={{
       externalReferenceAttachmentTypeRegistry,
       persistableStateAttachmentTypeRegistry,
+      getFilesClient,
       owner,
       permissions,
       features,

x-pack/plugins/cases/public/client/ui/get_recent_cases.tsx

@@ -14,7 +14,9 @@ import type { RecentCasesProps } from '../../components/recent_cases';
 type GetRecentCasesPropsInternal = RecentCasesProps & CasesContextProps;
 export type GetRecentCasesProps = Omit<
   GetRecentCasesPropsInternal,
-  'externalReferenceAttachmentTypeRegistry' | 'persistableStateAttachmentTypeRegistry'
+  | 'externalReferenceAttachmentTypeRegistry'
+  | 'persistableStateAttachmentTypeRegistry'
+  | 'getFilesClient'
 >;
 
 const RecentCasesLazy: React.FC<RecentCasesProps> = lazy(
@@ -23,6 +25,7 @@ const RecentCasesLazy: React.FC<RecentCasesProps> = lazy(
 export const getRecentCasesLazy = ({
   externalReferenceAttachmentTypeRegistry,
   persistableStateAttachmentTypeRegistry,
+  getFilesClient,
   owner,
   permissions,
   maxCasesToShow,
@@ -31,6 +34,7 @@ export const getRecentCasesLazy = ({
     value={{
       externalReferenceAttachmentTypeRegistry,
       persistableStateAttachmentTypeRegistry,
+      getFilesClient,
       owner,
       permissions,
     }}

x-pack/plugins/cases/public/common/mock/test_providers.tsx

@@ -9,22 +9,29 @@
 
 import React from 'react';
 import { MemoryRouter } from 'react-router-dom';
+import { ThemeProvider } from 'styled-components';
+
+import type { RenderOptions, RenderResult } from '@testing-library/react';
+import type { ILicense } from '@kbn/licensing-plugin/public';
+import type { FieldHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
+import type { ScopedFilesClient } from '@kbn/files-plugin/public';
+
 import { euiDarkVars } from '@kbn/ui-theme';
 import { I18nProvider } from '@kbn/i18n-react';
-import { ThemeProvider } from 'styled-components';
+import { createMockFilesClient } from '@kbn/shared-ux-file-mocks';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 
-import type { RenderOptions, RenderResult } from '@testing-library/react';
 import { render as reactRender } from '@testing-library/react';
 import { KibanaContextProvider } from '@kbn/kibana-react-plugin/public';
-import type { ILicense } from '@kbn/licensing-plugin/public';
-import type { FieldHook } from '@kbn/es-ui-shared-plugin/static/forms/hook_form_lib';
-import { SECURITY_SOLUTION_OWNER } from '../../../common/constants';
+import { FilesContext } from '@kbn/shared-ux-file-context';
+
 import type { CasesFeatures, CasesPermissions } from '../../../common/ui/types';
-import { CasesProvider } from '../../components/cases_context';
-import { createStartServicesMock } from '../lib/kibana/kibana_react.mock';
 import type { StartServices } from '../../types';
 import type { ReleasePhase } from '../../components/types';
+
+import { SECURITY_SOLUTION_OWNER } from '../../../common/constants';
+import { CasesProvider } from '../../components/cases_context';
+import { createStartServicesMock } from '../lib/kibana/kibana_react.mock';
 import { ExternalReferenceAttachmentTypeRegistry } from '../../client/attachment_framework/external_reference_registry';
 import { PersistableStateAttachmentTypeRegistry } from '../../client/attachment_framework/persistable_state_registry';
 import { allCasesPermissions } from './permissions';
@@ -37,21 +44,36 @@ interface TestProviderProps {
   releasePhase?: ReleasePhase;
   externalReferenceAttachmentTypeRegistry?: ExternalReferenceAttachmentTypeRegistry;
   persistableStateAttachmentTypeRegistry?: PersistableStateAttachmentTypeRegistry;
+  getFilesClient?: (scope: string) => ScopedFilesClient;
   license?: ILicense;
 }
 type UiRender = (ui: React.ReactElement, options?: RenderOptions) => RenderResult;
 
 window.scrollTo = jest.fn();
 
+export const mockedFilesClient = createMockFilesClient() as unknown as ScopedFilesClient<unknown>;
+
+// @ts-ignore
+mockedFilesClient.getFileKind.mockImplementation(() => ({
+  id: 'test',
+  maxSizeBytes: 10000,
+  http: {},
+}));
+
+const mockGetFilesClient = () => mockedFilesClient;
+
+export const mockedTestProvidersOwner = [SECURITY_SOLUTION_OWNER];
+
 /** A utility for wrapping children in the providers required to run most tests */
 const TestProvidersComponent: React.FC<TestProviderProps> = ({
   children,
   features,
-  owner = [SECURITY_SOLUTION_OWNER],
+  owner = mockedTestProvidersOwner,
   permissions = allCasesPermissions(),
   releasePhase = 'ga',
   externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry(),
   persistableStateAttachmentTypeRegistry = new PersistableStateAttachmentTypeRegistry(),
+  getFilesClient = mockGetFilesClient,
   license,
 }) => {
   const queryClient = new QueryClient({
@@ -82,9 +104,10 @@ const TestProvidersComponent: React.FC<TestProviderProps> = ({
                   features,
                   owner,
                   permissions,
+                  getFilesClient,
                 }}
               >
-                {children}
+                <FilesContext client={createMockFilesClient()}>{children}</FilesContext>
               </CasesProvider>
             </MemoryRouter>
           </QueryClientProvider>
@@ -125,11 +148,12 @@ export const testQueryClient = new QueryClient({
 
 export const createAppMockRenderer = ({
   features,
-  owner = [SECURITY_SOLUTION_OWNER],
+  owner = mockedTestProvidersOwner,
   permissions = allCasesPermissions(),
   releasePhase = 'ga',
   externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry(),
   persistableStateAttachmentTypeRegistry = new PersistableStateAttachmentTypeRegistry(),
+  getFilesClient = mockGetFilesClient,
   license,
 }: Omit<TestProviderProps, 'children'> = {}): AppMockRenderer => {
   const services = createStartServicesMock({ license });
@@ -161,6 +185,7 @@ export const createAppMockRenderer = ({
                   owner,
                   permissions,
                   releasePhase,
+                  getFilesClient,
                 }}
               >
                 {children}

x-pack/plugins/cases/public/common/use_cases_toast.test.tsx

@@ -25,6 +25,7 @@ const useKibanaMock = useKibana as jest.Mocked<typeof useKibana>;
 describe('Use cases toast hook', () => {
   const successMock = jest.fn();
   const errorMock = jest.fn();
+  const dangerMock = jest.fn();
   const getUrlForApp = jest.fn().mockReturnValue(`/app/cases/${mockCase.id}`);
   const navigateToUrl = jest.fn();
 
@@ -54,6 +55,7 @@ describe('Use cases toast hook', () => {
     return {
       addSuccess: successMock,
       addError: errorMock,
+      addDanger: dangerMock,
     };
   });
 
@@ -352,4 +354,21 @@ describe('Use cases toast hook', () => {
       });
     });
   });
+
+  describe('showDangerToast', () => {
+    it('should show a danger toast', () => {
+      const { result } = renderHook(
+        () => {
+          return useCasesToast();
+        },
+        { wrapper: TestProviders }
+      );
+
+      result.current.showDangerToast('my danger toast');
+
+      expect(dangerMock).toHaveBeenCalledWith({
+        title: 'my danger toast',
+      });
+    });
+  });
 });

x-pack/plugins/cases/public/common/use_cases_toast.tsx

@@ -169,6 +169,9 @@ export const useCasesToast = () => {
     showSuccessToast: (title: string) => {
       toasts.addSuccess({ title, className: 'eui-textBreakWord' });
     },
+    showDangerToast: (title: string) => {
+      toasts.addDanger({ title });
+    },
   };
 };