Merge branch 'main' into rockdaboot/fix-samples-width

elastic · Oct 6, 2022 · e711410 · e711410
2 parents 4ec5dc2 + 4997fdf
commit e711410
Show file tree

Hide file tree

Showing 90 changed files with 2,834 additions and 1,050 deletions.
diff --git a/.buildkite/scripts/common/setup_bazel.sh b/.buildkite/scripts/common/setup_bazel.sh
@@ -11,7 +11,7 @@ cat <<EOF > $KIBANA_DIR/.bazelrc
   build --build_metadata=ROLE=CI
 EOF
 
-BAZEL_CACHE_MODE=${BAZEL_CACHE_MODE:-gcs}
+BAZEL_CACHE_MODE=none
 
 if [[ "$BAZEL_CACHE_MODE" == "gcs" ]]; then
   echo "[bazel] enabling caching with GCS buckets"

diff --git a/package.json b/package.json
@@ -445,6 +445,7 @@
     "axios": "^0.27.2",
     "base64-js": "^1.3.1",
     "bitmap-sdf": "^1.0.3",
+    "blurhash": "^2.0.1",
     "brace": "0.11.1",
     "byte-size": "^8.1.0",
     "canvg": "^3.0.9",

diff --git a/x-pack/examples/files_example/common/index.ts b/x-pack/examples/files_example/common/index.ts
@@ -5,7 +5,7 @@
  * 2.0.
  */
 
-import { FileKind } from '@kbn/files-plugin/common';
+import type { FileKind, FileImageMetadata } from '@kbn/files-plugin/common';
 
 export const PLUGIN_ID = 'filesExample';
 export const PLUGIN_NAME = 'filesExample';
@@ -27,3 +27,5 @@ export const exampleFileKind: FileKind = {
     update: httpTags,
   },
 };
+
+export type MyImageMetadata = FileImageMetadata;
diff --git a/x-pack/examples/files_example/public/components/app.tsx b/x-pack/examples/files_example/public/components/app.tsx
@@ -21,8 +21,9 @@ import {
 } from '@elastic/eui';
 
 import { CoreStart } from '@kbn/core/public';
-import { DetailsFlyout } from './details_flyout';
+import type { MyImageMetadata } from '../../common';
 import type { FileClients } from '../types';
+import { DetailsFlyout } from './details_flyout';
 import { ConfirmButtonIcon } from './confirm_button';
 import { Modal } from './modal';
 
@@ -31,15 +32,15 @@ interface FilesExampleAppDeps {
   notifications: CoreStart['notifications'];
 }
 
-type ListResponse = FilesClientResponses['list'];
+type ListResponse = FilesClientResponses<MyImageMetadata>['list'];
 
 export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) => {
   const { data, isLoading, error, refetch } = useQuery<ListResponse>(['files'], () =>
     files.example.list()
   );
   const [showUploadModal, setShowUploadModal] = useState(false);
   const [isDeletingFile, setIsDeletingFile] = useState(false);
-  const [selectedItem, setSelectedItem] = useState<undefined | FileJSON>();
+  const [selectedItem, setSelectedItem] = useState<undefined | FileJSON<MyImageMetadata>>();
 
   const renderToolsRight = () => {
     return [
@@ -55,7 +56,7 @@ export const FilesExampleApp = ({ files, notifications }: FilesExampleAppDeps) =
 
   const items = [...(data?.files ?? [])].reverse();
 
-  const columns: EuiInMemoryTableProps<FileJSON>['columns'] = [
+  const columns: EuiInMemoryTableProps<FileJSON<MyImageMetadata>>['columns'] = [
     {
       field: 'name',
       name: 'Name',

diff --git a/x-pack/examples/files_example/public/components/details_flyout.tsx b/x-pack/examples/files_example/public/components/details_flyout.tsx
@@ -7,7 +7,6 @@
 import moment from 'moment';
 import type { FunctionComponent } from 'react';
 import React from 'react';
-import { css } from '@emotion/react';
 import {
   EuiFlyout,
   EuiFlyoutHeader,
@@ -22,11 +21,13 @@ import {
   EuiSpacer,
 } from '@elastic/eui';
 import type { FileJSON } from '@kbn/files-plugin/common';
+import { css } from '@emotion/react';
+import type { MyImageMetadata } from '../../common';
 import { FileClients } from '../types';
 import { Image } from '../imports';
 
 interface Props {
-  file: FileJSON;
+  file: FileJSON<MyImageMetadata>;
   files: FileClients;
   onDismiss: () => void;
 }
@@ -40,8 +41,24 @@ export const DetailsFlyout: FunctionComponent<Props> = ({ files, file, onDismiss
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody>
+        <div
+          css={css`
+            display: grid;
+            place-items: center;
+          `}
+        >
+          <Image
+            size="l"
+            alt={file.alt ?? 'unknown'}
+            src={files.example.getDownloadHref(file)}
+            meta={file.meta}
+          />
+        </div>
+        <EuiSpacer size="xl" />
         <EuiDescriptionList
           type="column"
+          align="center"
+          textStyle="reverse"
           listItems={[
             {
               title: 'Name',
@@ -75,14 +92,6 @@ export const DetailsFlyout: FunctionComponent<Props> = ({ files, file, onDismiss
             },
           ]}
         />
-        <EuiSpacer size="xl" />
-        <Image
-          css={css`
-            height: 400px;
-          `}
-          alt={file.alt ?? 'unknown'}
-          src={files.example.getDownloadHref(file)}
-        />
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
         <EuiFlexGroup justifyContent="flexEnd" alignItems="center">

diff --git a/x-pack/examples/files_example/public/components/modal.tsx b/x-pack/examples/files_example/public/components/modal.tsx
@@ -8,11 +8,11 @@
 import type { FunctionComponent } from 'react';
 import React from 'react';
 import { EuiModal, EuiModalHeader, EuiModalBody, EuiText } from '@elastic/eui';
-import { exampleFileKind } from '../../common';
+import { exampleFileKind, MyImageMetadata } from '../../common';
 import { FilesClient, UploadFile } from '../imports';
 
 interface Props {
-  client: FilesClient;
+  client: FilesClient<MyImageMetadata>;
   onDismiss: () => void;
   onUploaded: () => void;
 }

diff --git a/x-pack/examples/files_example/public/plugin.ts b/x-pack/examples/files_example/public/plugin.ts
@@ -6,7 +6,7 @@
  */
 
 import { AppMountParameters, CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
-import { PLUGIN_ID, PLUGIN_NAME, exampleFileKind } from '../common';
+import { PLUGIN_ID, PLUGIN_NAME, exampleFileKind, MyImageMetadata } from '../common';
 import { FilesExamplePluginsStart, FilesExamplePluginsSetup } from './types';
 
 export class FilesExamplePlugin
@@ -28,8 +28,8 @@ export class FilesExamplePlugin
           coreStart,
           {
             files: {
-              unscoped: deps.files.filesClientFactory.asUnscoped(),
-              example: deps.files.filesClientFactory.asScoped(exampleFileKind.id),
+              unscoped: deps.files.filesClientFactory.asUnscoped<MyImageMetadata>(),
+              example: deps.files.filesClientFactory.asScoped<MyImageMetadata>(exampleFileKind.id),
             },
           },
           params

diff --git a/x-pack/examples/files_example/public/types.ts b/x-pack/examples/files_example/public/types.ts
@@ -5,6 +5,7 @@
  * 2.0.
  */
 
+import { MyImageMetadata } from '../common';
 import type { FilesSetup, FilesStart, ScopedFilesClient, FilesClient } from './imports';
 
 export interface FilesExamplePluginsSetup {
@@ -16,9 +17,9 @@ export interface FilesExamplePluginsStart {
 }
 
 export interface FileClients {
-  unscoped: FilesClient;
+  unscoped: FilesClient<MyImageMetadata>;
   // Example file kind
-  example: ScopedFilesClient;
+  example: ScopedFilesClient<MyImageMetadata>;
 }
 
 export interface AppPluginStartDependencies {

diff --git a/x-pack/plugins/cases/public/components/all_cases/table.tsx b/x-pack/plugins/cases/public/components/all_cases/table.tsx
@@ -82,7 +82,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
       <EuiLoadingContent data-test-subj="initialLoadingPanelAllCases" lines={10} />
     </Div>
   ) : (
-    <Div data-test-subj={isCasesLoading ? 'cases-table-loading' : null}>
+    <>
       <CasesTableUtilityBar
         isSelectorView={isSelectorView}
         totalCases={data.total ?? 0}
@@ -127,7 +127,7 @@ export const CasesTable: FunctionComponent<CasesTableProps> = ({
         sorting={sorting}
         hasActions={false}
       />
-    </Div>
+    </>
   );
 };
 CasesTable.displayName = 'CasesTable';
diff --git a/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx b/x-pack/plugins/cases/public/components/all_cases/utility_bar.tsx
@@ -6,18 +6,18 @@
  */
 
 import React, { FunctionComponent, useCallback, useState } from 'react';
-import { EuiContextMenu } from '@elastic/eui';
 import {
-  UtilityBar,
-  UtilityBarAction,
-  UtilityBarGroup,
-  UtilityBarSection,
-  UtilityBarText,
-} from '../utility_bar';
+  EuiButtonEmpty,
+  EuiContextMenu,
+  EuiFlexGroup,
+  EuiFlexItem,
+  EuiPopover,
+  EuiText,
+  useEuiTheme,
+} from '@elastic/eui';
 import * as i18n from './translations';
 import { Case } from '../../../common/ui/types';
 import { useRefreshCases } from './use_on_refresh_cases';
-import { UtilityBarBulkActions } from '../utility_bar/utility_bar_bulk_actions';
 import { useBulkActions } from './use_bulk_actions';
 import { useCasesContext } from '../cases_context/use_cases_context';
 
@@ -30,6 +30,7 @@ interface Props {
 
 export const CasesTableUtilityBar: FunctionComponent<Props> = React.memo(
   ({ isSelectorView, totalCases, selectedCases, deselectCases }) => {
+    const { euiTheme } = useEuiTheme();
     const [isPopoverOpen, setIsPopoverOpen] = useState(false);
     const togglePopover = useCallback(() => setIsPopoverOpen(!isPopoverOpen), [isPopoverOpen]);
     const closePopover = useCallback(() => setIsPopoverOpen(false), []);
@@ -56,47 +57,82 @@ export const CasesTableUtilityBar: FunctionComponent<Props> = React.memo(
 
     return (
       <>
-        <UtilityBar border>
-          <UtilityBarSection>
-            <UtilityBarGroup>
-              <UtilityBarText data-test-subj="case-table-case-count">
-                {i18n.SHOWING_CASES(totalCases)}
-              </UtilityBarText>
-            </UtilityBarGroup>
-            <UtilityBarGroup data-test-subj="case-table-utility-bar-actions">
+        <EuiFlexGroup
+          alignItems="center"
+          justifyContent="flexStart"
+          gutterSize="s"
+          css={{
+            borderBottom: euiTheme.border.thin,
+            marginTop: 0,
+            marginBottom: 0,
+            paddingTop: euiTheme.size.s,
+            paddingBottom: euiTheme.size.s,
+          }}
+        >
+          <EuiFlexItem
+            data-test-subj="case-table-case-count"
+            grow={false}
+            css={{
+              borderRight: euiTheme.border.thin,
+              paddingRight: euiTheme.size.s,
+            }}
+          >
+            <EuiText size="xs" color="subdued">
+              {i18n.SHOWING_CASES(totalCases)}
+            </EuiText>
+          </EuiFlexItem>
+          <EuiFlexItem data-test-subj="case-table-utility-bar-actions" grow={false}>
+            <EuiFlexGroup alignItems="center" justifyContent="flexStart" gutterSize="s">
               {!isSelectorView && showBulkActions && (
                 <>
-                  <UtilityBarText data-test-subj="case-table-selected-case-count">
-                    {i18n.SHOWING_SELECTED_CASES(selectedCases.length)}
-                  </UtilityBarText>
-                  <UtilityBarBulkActions
-                    dataTestSubj="case-table-bulk-actions"
-                    iconSide="right"
-                    iconType="arrowDown"
-                    buttonTitle={i18n.BULK_ACTIONS}
-                    isPopoverOpen={isPopoverOpen}
-                    closePopover={closePopover}
-                    onButtonClick={togglePopover}
-                  >
-                    <EuiContextMenu
-                      panels={panels}
-                      initialPanelId={0}
-                      data-test-subj="case-table-bulk-actions-context-menu"
-                    />
-                  </UtilityBarBulkActions>
+                  <EuiFlexItem data-test-subj="case-table-selected-case-count" grow={false}>
+                    <EuiText size="xs" color="subdued">
+                      {i18n.SHOWING_SELECTED_CASES(selectedCases.length)}
+                    </EuiText>
+                  </EuiFlexItem>
+                  <EuiFlexItem grow={false}>
+                    <EuiPopover
+                      isOpen={isPopoverOpen}
+                      closePopover={closePopover}
+                      panelPaddingSize="none"
+                      data-test-subj="case-table-bulk-actions-popover"
+                      button={
+                        <EuiButtonEmpty
+                          onClick={togglePopover}
+                          size="xs"
+                          iconSide="right"
+                          iconType="arrowDown"
+                          flush="left"
+                          data-test-subj="case-table-bulk-actions-link-icon"
+                        >
+                          {i18n.BULK_ACTIONS}
+                        </EuiButtonEmpty>
+                      }
+                    >
+                      <EuiContextMenu
+                        panels={panels}
+                        initialPanelId={0}
+                        data-test-subj="case-table-bulk-actions-context-menu"
+                      />
+                    </EuiPopover>
+                  </EuiFlexItem>
                 </>
               )}
-              <UtilityBarAction
-                iconSide="left"
-                iconType="refresh"
-                onClick={onRefresh}
-                dataTestSubj="all-cases-refresh"
-              >
-                {i18n.REFRESH}
-              </UtilityBarAction>
-            </UtilityBarGroup>
-          </UtilityBarSection>
-        </UtilityBar>
+              <EuiFlexItem grow={false}>
+                <EuiButtonEmpty
+                  onClick={onRefresh}
+                  size="xs"
+                  iconSide="left"
+                  iconType="refresh"
+                  flush="left"
+                  data-test-subj="all-cases-refresh-link-icon"
+                >
+                  {i18n.REFRESH}
+                </EuiButtonEmpty>
+              </EuiFlexItem>
+            </EuiFlexGroup>
+          </EuiFlexItem>
+        </EuiFlexGroup>
         {modals}
       </>
     );

diff --git a/x-pack/plugins/cases/public/components/utility_bar/__snapshots__/utility_bar.test.tsx.snap b/x-pack/plugins/cases/public/components/utility_bar/__snapshots__/utility_bar.test.tsx.snap
diff --git a/...plugins/cases/public/components/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap b/...plugins/cases/public/components/utility_bar/__snapshots__/utility_bar_group.test.tsx.snap