[Files] Filepicker

x-pack/examples/files_example/common/index.ts

@@ -8,14 +8,14 @@
 import type { FileKind, FileImageMetadata } from '@kbn/files-plugin/common';
 
 export const PLUGIN_ID = 'filesExample';
-export const PLUGIN_NAME = 'filesExample';
+export const PLUGIN_NAME = 'Files example';
 
 const httpTags = {
   tags: [`access:${PLUGIN_ID}`],
 };
 
 export const exampleFileKind: FileKind = {
-  id: 'filesExample',
+  id: PLUGIN_ID,
   allowedMimeTypes: ['image/png'],
   http: {
     create: httpTags,

x-pack/examples/files_example/kibana.json

@@ -9,6 +9,6 @@
   "description": "Example plugin integrating with files plugin",
   "server": true,
   "ui": true,
-  "requiredPlugins": ["files"],
+  "requiredPlugins": ["files", "developerExamples"],
   "optionalPlugins": []
 }

x-pack/examples/files_example/public/application.tsx

@@ -22,7 +22,7 @@ export const renderApp = (
 ) => {
   ReactDOM.render(
     <QueryClientProvider client={queryClient}>
-      <FilesContext>
+      <FilesContext client={files.unscoped}>
         <FilesExampleApp files={files} notifications={notifications} />
       </FilesContext>
     </QueryClientProvider>,

x-pack/examples/files_example/public/components/app.tsx

@@ -21,6 +21,7 @@ import {
 } from '@elastic/eui';
 
 import { CoreStart } from '@kbn/core/public';
+import { MyFilePicker } from './file_picker';
 import type { MyImageMetadata } from '../../common';
 import type { FileClients } from '../types';
 import { DetailsFlyout } from './details_flyout';
@@ -39,11 +40,19 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
     files.example.list()
   );
   const [showUploadModal, setShowUploadModal] = useState(false);
+  const [showFilePickerModal, setShowFilePickerModal] = useState(false);
   const [isDeletingFile, setIsDeletingFile] = useState(false);
   const [selectedItem, setSelectedItem] = useState<undefined | FileJSON<MyImageMetadata>>();
 
   const renderToolsRight = () => {
     return [
+      <EuiButton
+        onClick={() => setShowFilePickerModal(true)}
+        isDisabled={isLoading || isDeletingFile}
+        iconType="eye"
+      >
+        Pick a file
+      </EuiButton>,
       <EuiButton
         onClick={() => setShowUploadModal(true)}
         isDisabled={isLoading || isDeletingFile}
@@ -155,6 +164,18 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
           }}
         />
       )}
+      {showFilePickerModal && (
+        <MyFilePicker
+          onClose={() => setShowFilePickerModal(false)}
+          onDone={(ids) => {
+            notifications.toasts.addSuccess({
+              title: 'Selected files!',
+              text: 'IDS:' + JSON.stringify(ids, null, 2),
+            });
+            setShowFilePickerModal(false);
+          }}
+        />
+      )}
     </>
   );
 };

x-pack/examples/files_example/public/components/file_picker.tsx

@@ -0,0 +1,22 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import type { FunctionComponent } from 'react';
+
+import { exampleFileKind } from '../../common';
+
+import { FilePicker } from '../imports';
+
+interface Props {
+  onClose: () => void;
+  onDone: (ids: string[]) => void;
+}
+
+export const MyFilePicker: FunctionComponent<Props> = ({ onClose, onDone }) => {
+  return <FilePicker kind={exampleFileKind.id} onClose={onClose} onDone={onDone} />;
+};

x-pack/examples/files_example/public/components/modal.tsx

@@ -27,8 +27,8 @@ export const Modal: FunctionComponent<Props> = ({ onDismiss, onUploaded, client
       </EuiModalHeader>
       <EuiModalBody>
         <UploadFile
+          multiple
           kind={exampleFileKind.id}
-          client={client}
           onDone={onUploaded}
           meta={{ custom: 'meta' }}
         />

x-pack/examples/files_example/public/imports.ts

@@ -12,5 +12,8 @@ export {
   UploadFile,
   FilesContext,
   ScopedFilesClient,
+  FilePicker,
   Image,
 } from '@kbn/files-plugin/public';
+
+export type { DeveloperExamplesSetup } from '@kbn/developer-examples-plugin/public';

x-pack/examples/files_example/public/plugin.ts

@@ -5,19 +5,30 @@
  * 2.0.
  */
 
+import { AppNavLinkStatus } from '@kbn/core-application-browser';
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
 import { PLUGIN_ID, PLUGIN_NAME, exampleFileKind, MyImageMetadata } from '../common';
 import { FilesExamplePluginsStart, FilesExamplePluginsSetup } from './types';
 
 export class FilesExamplePlugin
   implements Plugin<unknown, unknown, FilesExamplePluginsSetup, FilesExamplePluginsStart>
 {
-  public setup(core: CoreSetup<FilesExamplePluginsStart>, { files }: FilesExamplePluginsSetup) {
+  public setup(
+    core: CoreSetup<FilesExamplePluginsStart>,
+    { files, developerExamples }: FilesExamplePluginsSetup
+  ) {
     files.registerFileKind(exampleFileKind);
 
+    developerExamples.register({
+      appId: PLUGIN_ID,
+      title: PLUGIN_NAME,
+      description: 'Example plugin for the files plugin',
+    });
+
     core.application.register({
       id: PLUGIN_ID,
       title: PLUGIN_NAME,
+      navLinkStatus: AppNavLinkStatus.hidden,
       async mount(params: AppMountParameters) {
         // Load application bundle
         const { renderApp } = await import('./application');

x-pack/examples/files_example/public/types.ts

@@ -6,10 +6,17 @@
  */
 
 import { MyImageMetadata } from '../common';
-import type { FilesSetup, FilesStart, ScopedFilesClient, FilesClient } from './imports';
+import type {
+  FilesSetup,
+  FilesStart,
+  ScopedFilesClient,
+  FilesClient,
+  DeveloperExamplesSetup,
+} from './imports';
 
 export interface FilesExamplePluginsSetup {
   files: FilesSetup;
+  developerExamples: DeveloperExamplesSetup;
 }
 
 export interface FilesExamplePluginsStart {

x-pack/examples/files_example/tsconfig.json

@@ -15,11 +15,8 @@
   ],
   "exclude": [],
   "references": [
-    {
-      "path": "../../../src/core/tsconfig.json"
-    },
-    {
-      "path": "../../plugins/files/tsconfig.json"
-    }
+    { "path": "../../../src/core/tsconfig.json" },
+    { "path": "../../plugins/files/tsconfig.json" },
+    { "path": "../../../examples/developer_examples/tsconfig.json" }
   ]
 }

x-pack/plugins/files/public/components/context.tsx

@@ -7,9 +7,14 @@
 
 import React, { createContext, useContext, type FunctionComponent } from 'react';
 import { FileKindsRegistry, getFileKindsRegistry } from '../../common/file_kinds_registry';
+import type { FilesClient } from '../types';
 
 export interface FilesContextValue {
   registry: FileKindsRegistry;
+  /**
+   * A files client that will be used process uploads.
+   */
+  client: FilesClient<any>;
 }
 
 const FilesContextObject = createContext<FilesContextValue>(null as unknown as FilesContextValue);
@@ -21,10 +26,18 @@ export const useFilesContext = () => {
   }
   return ctx;
 };
-export const FilesContext: FunctionComponent = ({ children }) => {
+
+interface ContextProps {
+  /**
+   * A files client that will be used process uploads.
+   */
+  client: FilesClient<any>;
+}
+export const FilesContext: FunctionComponent<ContextProps> = ({ client, children }) => {
   return (
     <FilesContextObject.Provider
       value={{
+        client,
         registry: getFileKindsRegistry(),
       }}
     >

x-pack/plugins/files/public/components/file_picker/components/clear_filter_button.tsx

@@ -0,0 +1,36 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+import React from 'react';
+import type { FunctionComponent } from 'react';
+import useObservable from 'react-use/lib/useObservable';
+import { EuiLink } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useFilePickerContext } from '../context';
+
+import { i18nTexts } from '../i18n_texts';
+
+interface Props {
+  onClick: () => void;
+}
+
+export const ClearFilterButton: FunctionComponent<Props> = ({ onClick }) => {
+  const { state } = useFilePickerContext();
+  const query = useObservable(state.queryDebounced$);
+  if (!query) {
+    return null;
+  }
+  return (
+    <div
+      css={css`
+        display: grid;
+        place-items: center;
+      `}
+    >
+      <EuiLink onClick={onClick}>{i18nTexts.clearFilterButton}</EuiLink>
+    </div>
+  );
+};

x-pack/plugins/files/public/components/file_picker/components/error_content.tsx

@@ -0,0 +1,37 @@
+/*
+ * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
+ * or more contributor license agreements. Licensed under the Elastic License
+ * 2.0; you may not use this file except in compliance with the Elastic License
+ * 2.0.
+ */
+
+import React from 'react';
+import type { FunctionComponent } from 'react';
+import { EuiButton, EuiEmptyPrompt } from '@elastic/eui';
+import { i18nTexts } from '../i18n_texts';
+import { useFilePickerContext } from '../context';
+import { useBehaviorSubject } from '../../use_behavior_subject';
+
+interface Props {
+  error: Error;
+}
+
+export const ErrorContent: FunctionComponent<Props> = ({ error }) => {
+  const { state } = useFilePickerContext();
+  const isLoading = useBehaviorSubject(state.isLoading$);
+  return (
+    <EuiEmptyPrompt
+      data-test-subj="errorPrompt"
+      iconType="alert"
+      iconColor="danger"
+      titleSize="xs"
+      title={<h3>{i18nTexts.loadingFilesErrorTitle}</h3>}
+      body={error.message}
+      actions={
+        <EuiButton disabled={isLoading} onClick={state.retry}>
+          {i18nTexts.retryButtonLabel}
+        </EuiButton>
+      }
+    />
+  );
+};

x-pack/plugins/files/public/components/file_picker/components/file_card.scss

@@ -0,0 +1,5 @@
+.filesFilePicker {
+  .euiCard__content, .euiCard__description {
+    margin :0; // make the cards a little bit more compact
+  }
+}