[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

@@ -23,6 +23,7 @@ const AllCasesSelectorModalLazy: React.FC<AllCasesSelectorModalProps> = lazy(
 export const getAllCasesSelectorModalLazy = ({
   externalReferenceAttachmentTypeRegistry,
   persistableStateAttachmentTypeRegistry,
+  getFilesClient,
   owner,
   permissions,
   hiddenStatuses,
@@ -33,6 +34,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,27 @@
 
 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 { 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 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,12 +42,15 @@ 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();
 
+const mockGetFilesClient = jest.fn();
+
 /** A utility for wrapping children in the providers required to run most tests */
 const TestProvidersComponent: React.FC<TestProviderProps> = ({
   children,
@@ -52,6 +60,7 @@ const TestProvidersComponent: React.FC<TestProviderProps> = ({
   releasePhase = 'ga',
   externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry(),
   persistableStateAttachmentTypeRegistry = new PersistableStateAttachmentTypeRegistry(),
+  getFilesClient = mockGetFilesClient,
   license,
 }) => {
   const queryClient = new QueryClient({
@@ -82,6 +91,7 @@ const TestProvidersComponent: React.FC<TestProviderProps> = ({
                   features,
                   owner,
                   permissions,
+                  getFilesClient,
                 }}
               >
                 {children}
@@ -130,6 +140,7 @@ export const createAppMockRenderer = ({
   releasePhase = 'ga',
   externalReferenceAttachmentTypeRegistry = new ExternalReferenceAttachmentTypeRegistry(),
   persistableStateAttachmentTypeRegistry = new PersistableStateAttachmentTypeRegistry(),
+  getFilesClient = mockGetFilesClient,
   license,
 }: Omit<TestProviderProps, 'children'> = {}): AppMockRenderer => {
   const services = createStartServicesMock({ license });
@@ -161,6 +172,7 @@ export const createAppMockRenderer = ({
                   owner,
                   permissions,
                   releasePhase,
+                  getFilesClient,
                 }}
               >
                 {children}