[Files] Filepicker

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,6 @@ export {
   UploadFile,
   FilesContext,
   ScopedFilesClient,
+  FilePicker,
   Image,
 } from '@kbn/files-plugin/public';

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,35 @@
+/*
+ * 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 { debounceTime } from 'rxjs';
+import useObservable from 'react-use/lib/useObservable';
+import { EuiLink } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { useFilePickerContext } from '../context';
+
+interface Props {
+  onClick: () => void;
+}
+
+export const ClearFilterButton: FunctionComponent<Props> = ({ onClick }) => {
+  const { state } = useFilePickerContext();
+  const query = useObservable(state.query$.pipe(debounceTime(100)));
+  if (!query) {
+    return null;
+  }
+  return (
+    <div
+      css={css`
+        display: grid;
+        place-items: center;
+      `}
+    >
+      <EuiLink onClick={onClick}>Clear filter</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
+  }
+}

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

@@ -0,0 +1,113 @@
+/*
+ * 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 numeral from '@elastic/numeral';
+import useObservable from 'react-use/lib/useObservable';
+import { EuiCard, EuiText, EuiIcon, useEuiTheme } from '@elastic/eui';
+import { css } from '@emotion/react';
+import { FileImageMetadata, FileJSON } from '../../../../common';
+import { Image } from '../../image';
+import { isImage } from '../../util';
+import { useFilesContext } from '../../context';
+import { useFilePickerContext } from '../context';
+
+import './file_card.scss';
+
+interface Props {
+  file: FileJSON;
+}
+
+export const FileCard: FunctionComponent<Props> = ({ file }) => {
+  const { client } = useFilesContext();
+  const { kind, state } = useFilePickerContext();
+  const { euiTheme } = useEuiTheme();
+  const displayImage = isImage({ type: file.mimeType });
+
+  const isSelected = useObservable(state.watchFileSelected$(file.id), false);
+
+  const imageHeight = `calc(${euiTheme.size.xxxl} * 2)`;
+  return (
+    <EuiCard
+      title=""
+      css={css`
+        place-self: stretch;
+      `}
+      paddingSize="s"
+      selectable={{
+        isSelected,
+        onClick: () => (isSelected ? state.unselectFile(file.id) : state.selectFile(file.id)),
+      }}
+      image={
+        <div
+          css={css`
+            display: grid;
+            place-items: center;
+            height: ${imageHeight};
+            margin: ${euiTheme.size.m};
+          `}
+        >
+          {displayImage ? (
+            <Image
+              alt={file.alt ?? ''}
+              css={css`
+                max-height: ${imageHeight};
+              `}
+              meta={file.meta as FileImageMetadata}
+              src={client.getDownloadHref({ id: file.id, fileKind: kind })}
+              // There is an issue where the intersection observer does not fire reliably.
+              // I'm not sure if this is becuause of the image being in a modal
+              // The result is that the image does not always get loaded.
+              // TODO: Investigate this behaviour further
+              loadImageEagerly
+            />
+          ) : (
+            <div
+              css={css`
+                display: grid;
+                place-items: center;
+                height: ${imageHeight};
+              `}
+            >
+              <EuiIcon type="filebeatApp" size="xl" />
+            </div>
+          )}
+        </div>
+      }
+      description={
+        <>
+          <EuiText
+            size="s"
+            css={css`
+              overflow: hidden;
+              white-space: nowrap;
+              text-overflow: ellipsis;
+            `}
+          >
+            <strong>{file.name}</strong>
+          </EuiText>
+          <EuiText color="subdued" size="xs">
+            {numeral(file.size).format('0[.]0 b')}
+          </EuiText>
+          {file.extension ? (
+            <EuiText
+              css={css`
+                text-transform: uppercase;
+              `}
+              color="subdued"
+              size="xs"
+            >
+              {file.extension}
+            </EuiText>
+          ) : null}
+        </>
+      }
+      hasBorder
+    />
+  );
+};

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

@@ -0,0 +1,39 @@
+/*
+ * 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 { useEuiTheme, EuiEmptyPrompt } from '@elastic/eui';
+import { css } from '@emotion/react';
+import useObservable from 'react-use/lib/useObservable';
+
+import { i18nTexts } from '../i18n_texts';
+import { useFilePickerContext } from '../context';
+import { FileCard } from './file_card';
+
+export const FileGrid: FunctionComponent = () => {
+  const { state } = useFilePickerContext();
+  const { euiTheme } = useEuiTheme();
+  const files = useObservable(state.files$, []);
+  if (!files.length) {
+    return <EuiEmptyPrompt title={<h3>{i18nTexts.emptyFileGridPrompt}</h3>} titleSize="s" />;
+  }
+  return (
+    <div
+      data-test-subj="fileGrid"
+      css={css`
+        display: grid;
+        grid-template-columns: repeat(auto-fill, minmax(calc(${euiTheme.size.xxxxl} * 3), 1fr));
+        gap: ${euiTheme.size.m};
+      `}
+    >
+      {files.map((file, idx) => (
+        <FileCard key={idx} file={file} />
+      ))}
+    </div>
+  );
+};

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

@@ -0,0 +1,19 @@
+/*
+ * 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 { EuiPagination } from '@elastic/eui';
+import { useFilePickerContext } from '../context';
+import { useBehaviorSubject } from '../../use_behavior_subject';
+
+export const Pagination: FunctionComponent = () => {
+  const { state } = useFilePickerContext();
+  const page = useBehaviorSubject(state.currentPage$);
+  const pageCount = useBehaviorSubject(state.totalPages$);
+  return <EuiPagination onPageClick={state.setPage} pageCount={pageCount} activePage={page} />;
+};