Merge branch 'main' into fix-control-styling_2024-01-17

elastic · Jan 24, 2024 · 28489cf · 28489cf
2 parents fed1b70 + 2f8825d
commit 28489cf
Show file tree

Hide file tree

Showing 18 changed files with 127 additions and 91 deletions.
diff --git a/package.json b/package.json
@@ -102,7 +102,7 @@
     "@elastic/datemath": "5.0.3",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@8.9.1-canary.1",
     "@elastic/ems-client": "8.5.1",
-    "@elastic/eui": "92.0.0-backport.0",
+    "@elastic/eui": "92.1.1",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

diff --git a/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap b/packages/core/i18n/core-i18n-browser-internal/src/__snapshots__/i18n_service.test.tsx.snap
diff --git a/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx b/packages/core/i18n/core-i18n-browser-internal/src/i18n_eui_mapping.tsx
@@ -523,6 +523,14 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: '{columnId}, column {col}, row {row}',
         values: { columnId, row, col },
       }),
+    'euiDataGridCell.expansionEnterPrompt': i18n.translate(
+      'core.euiDataGridCell.expansionEnterPrompt',
+      { defaultMessage: 'Press the Enter key to expand this cell.' }
+    ),
+    'euiDataGridCell.focusTrapEnterPrompt': i18n.translate(
+      'core.euiDataGridCell.focusTrapEnterPrompt',
+      { defaultMessage: "Press the Enter key to interact with this cell's contents." }
+    ),
     'euiDataGridCellActions.expandButtonTitle': i18n.translate(
       'core.euiDataGridCellActions.expandButtonTitle',
       {

diff --git a/packages/kbn-resizable-layout/src/panels_resizable.tsx b/packages/kbn-resizable-layout/src/panels_resizable.tsx
@@ -6,12 +6,19 @@
  * Side Public License, v 1.
  */
 
-import { EuiResizableContainer, useGeneratedHtmlId, useResizeObserver } from '@elastic/eui';
+import {
+  EuiResizableContainer,
+  useGeneratedHtmlId,
+  useResizeObserver,
+  useEuiTheme,
+  mathWithUnits,
+} from '@elastic/eui';
 import type { ResizeTrigger } from '@elastic/eui/src/components/resizable_container/types';
 import { css } from '@emotion/react';
 import { isEqual, round } from 'lodash';
 import type { ReactElement } from 'react';
 import React, { useCallback, useEffect, useState } from 'react';
+import useLatest from 'react-use/lib/useLatest';
 import { ResizableLayoutDirection } from '../types';
 import { getContainerSize, percentToPixels, pixelsToPercent } from './utils';
 
@@ -47,41 +54,30 @@ export const PanelsResizable = ({
   onFixedPanelSizeChange?: (fixedPanelSize: number) => void;
   setPanelSizes: (panelSizes: { fixedPanelSizePct: number; flexPanelSizePct: number }) => void;
 }) => {
+  const { euiTheme } = useEuiTheme();
   const fixedPanelId = useGeneratedHtmlId({ prefix: 'fixedPanel' });
   const { height: containerHeight, width: containerWidth } = useResizeObserver(container);
   const containerSize = getContainerSize(direction, containerWidth, containerHeight);
 
-  // EuiResizableContainer doesn't work properly when used with react-reverse-portal and
-  // will cancel the resize. To work around this we keep track of when resizes start and
-  // end to toggle the rendering of a transparent overlay which prevents the cancellation.
-  // EUI issue: https://github.com/elastic/eui/issues/6199
-  const [resizeWithPortalsHackIsResizing, setResizeWithPortalsHackIsResizing] = useState(false);
-  const enableResizeWithPortalsHack = useCallback(
-    () => setResizeWithPortalsHackIsResizing(true),
-    []
-  );
-  const disableResizeWithPortalsHack = useCallback(
-    () => setResizeWithPortalsHackIsResizing(false),
-    []
-  );
-  const baseButtonCss = css`
-    background-color: transparent !important;
-    gap: 0 !important;
-
-    &:not(:hover):not(:focus) {
-      &:before,
-      &:after {
-        width: 0;
-      }
-    }
+  // The resize overlay makes it so that other mouse events (e.g. tooltip hovers, etc)
+  // don't occur when mouse dragging
+  const [isResizing, setIsResizing] = useState(false);
+
+  // Align the resizable button border to overlap exactly over existing panel/layout borders
+  const buttonBorderCss = css`
+    position: relative;
+    inset-${direction === 'horizontal' ? 'inline-start' : 'block-end'}: -${mathWithUnits(
+    euiTheme.border.width.thin,
+    (x) => x / 2
+  )};
   `;
   const defaultButtonCss = css`
     z-index: 3;
   `;
-  const resizeWithPortalsHackButtonCss = css`
+  const resizingButtonCss = css`
     z-index: 4;
   `;
-  const resizeWithPortalsHackOverlayCss = css`
+  const resizingOverlayCss = css`
     position: absolute;
     top: 0;
     left: 0;
@@ -158,34 +154,35 @@ export const PanelsResizable = ({
     setPanelSizes,
   ]);
 
-  const onResizeStart = useCallback(
-    (trigger: ResizeTrigger) => {
-      if (trigger !== 'pointer') {
-        return;
-      }
-
-      enableResizeWithPortalsHack();
-    },
-    [enableResizeWithPortalsHack]
-  );
-
-  const onResizeEnd = useCallback(() => {
-    if (!resizeWithPortalsHackIsResizing) {
+  const onResizeStart = useCallback((trigger: ResizeTrigger) => {
+    if (trigger !== 'pointer') {
       return;
     }
+    setIsResizing(true);
+  }, []);
+
+  // EUI will call an outdated version of this callback when the resize ends,
+  // so we need to make sure on our end that the latest version is called.
+  const onResizeEndStable = useLatest(() => {
+    setIsResizing((_isResizing) => {
+      // We don't want the resize button to retain focus after the resize is complete,
+      // but EuiResizableContainer will force focus it onClick. To work around this we
+      // use setTimeout to wait until after onClick has been called before blurring.
+      if (_isResizing) {
+        if (document.activeElement instanceof HTMLElement) {
+          const button = document.activeElement;
+          setTimeout(() => {
+            button.blur();
+          });
+        }
+      }
+      return false;
+    });
+  });
 
-    // We don't want the resize button to retain focus after the resize is complete,
-    // but EuiResizableContainer will force focus it onClick. To work around this we
-    // use setTimeout to wait until after onClick has been called before blurring.
-    if (document.activeElement instanceof HTMLElement) {
-      const button = document.activeElement;
-      setTimeout(() => {
-        button.blur();
-      });
-    }
-
-    disableResizeWithPortalsHack();
-  }, [disableResizeWithPortalsHack, resizeWithPortalsHackIsResizing]);
+  const onResizeEnd = useCallback(() => {
+    onResizeEndStable.current();
+  }, [onResizeEndStable]);
 
   // Don't render EuiResizableContainer until we have have valid
   // panel sizes or it can cause the resize functionality to break.
@@ -218,10 +215,8 @@ export const PanelsResizable = ({
           </EuiResizablePanel>
           <EuiResizableButton
             className={resizeButtonClassName}
-            css={[
-              baseButtonCss,
-              resizeWithPortalsHackIsResizing ? resizeWithPortalsHackButtonCss : defaultButtonCss,
-            ]}
+            indicator="border"
+            css={[buttonBorderCss, isResizing ? resizingButtonCss : defaultButtonCss]}
             data-test-subj={`${dataTestSubj}ResizableButton`}
           />
           <EuiResizablePanel
@@ -232,7 +227,7 @@ export const PanelsResizable = ({
           >
             {flexPanel}
           </EuiResizablePanel>
-          {resizeWithPortalsHackIsResizing ? <div css={resizeWithPortalsHackOverlayCss} /> : <></>}
+          {isResizing ? <div css={resizingOverlayCss} /> : <></>}
         </>
       )}
     </EuiResizableContainer>

diff --git a/src/dev/license_checker/config.ts b/src/dev/license_checker/config.ts
@@ -85,7 +85,7 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.5.1': ['Elastic License 2.0'],
-  '@elastic/eui@92.0.0-backport.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@92.1.1': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
   'buffers@0.1.1': ['MIT'], // license in importing module https://www.npmjs.com/package/binary
   '@bufbuild/protobuf@1.2.1': ['Apache-2.0'], // license (Apache-2.0 AND BSD-3-Clause)

diff --git a/src/plugins/vis_default_editor/public/_default.scss b/src/plugins/vis_default_editor/public/_default.scss
@@ -32,6 +32,10 @@
  * Resizer
  */
 
+.visEditor__resizer {
+  height: auto;
+}
+
 .visEditor__resizer-isHidden {
   display: none;
 }

diff --git a/src/plugins/vis_default_editor/public/default_editor.tsx b/src/plugins/vis_default_editor/public/default_editor.tsx
@@ -109,6 +109,7 @@ function DefaultEditor({
               </EuiResizablePanel>
 
               <EuiResizableButton
+                alignIndicator="start"
                 className={`visEditor__resizer ${isCollapsed ? 'visEditor__resizer-isHidden' : ''}`}
               />
 

diff --git a/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx b/...fleet/public/applications/fleet/sections/settings/components/edit_output_flyout/index.tsx
@@ -335,7 +335,21 @@ export const EditOutputFlyout: React.FunctionComponent<EditOutputFlyoutProps> =
               label={
                 <FormattedMessage
                   id="xpack.fleet.settings.editOutputFlyout.proxyIdLabel"
-                  defaultMessage="Proxy"
+                  defaultMessage="Proxy {badge}"
+                  values={{
+                    badge: (
+                      <EuiBetaBadge
+                        size="s"
+                        className="eui-alignTop"
+                        label={i18n.translate(
+                          'xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdBetaBadge',
+                          {
+                            defaultMessage: 'Beta',
+                          }
+                        )}
+                      />
+                    ),
+                  }}
                 />
               }
             >

diff --git a/...ublic/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx b/...ublic/applications/fleet/sections/settings/components/fleet_server_hosts_flyout/index.tsx
@@ -26,6 +26,7 @@ import {
   EuiSwitch,
   EuiComboBox,
   EuiCallOut,
+  EuiBetaBadge,
 } from '@elastic/eui';
 
 import { MultiRowInput } from '../multi_row_input';
@@ -158,7 +159,21 @@ export const FleetServerHostsFlyout: React.FunctionComponent<FleetServerHostsFly
             label={
               <FormattedMessage
                 id="xpack.fleet.settings.fleetServerHostsFlyout.proxyIdLabel"
-                defaultMessage="Proxy"
+                defaultMessage="Proxy {badge}"
+                values={{
+                  badge: (
+                    <EuiBetaBadge
+                      size="s"
+                      className="eui-alignTop"
+                      label={i18n.translate(
+                        'xpack.fleet.settings.editDownloadSourcesFlyout.proxyIdBetaBadge',
+                        {
+                          defaultMessage: 'Beta',
+                        }
+                      )}
+                    />
+                  ),
+                }}
               />
             }
           >

diff --git a/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx b/x-pack/plugins/lens/public/visualizations/datatable/components/table_basic.test.tsx
@@ -207,7 +207,7 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('mouseEnter');
 
     await waitForWrapperUpdate(wrapper);
 
@@ -248,7 +248,7 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('focus');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').at(1).simulate('mouseEnter');
 
     await waitForWrapperUpdate(wrapper);
 
@@ -324,7 +324,7 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('focus');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').at(0).simulate('mouseEnter');
 
     await waitForWrapperUpdate(wrapper);
 
@@ -365,7 +365,7 @@ describe('DatatableComponent', () => {
       />
     );
 
-    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('focus');
+    wrapper.find('[data-test-subj="dataGridRowCell"]').first().simulate('mouseEnter');
 
     await waitForWrapperUpdate(wrapper);
 

diff --git a/x-pack/plugins/osquery/cypress/e2e/all/live_query.cy.ts b/x-pack/plugins/osquery/cypress/e2e/all/live_query.cy.ts
@@ -58,10 +58,9 @@ describe('ALL - Live Query', { tags: ['@ess', '@serverless'] }, () => {
       expect(interception.response?.body.data.queries[0]).to.have.property('timeout', 890);
     });
     checkResults();
-    cy.get('[data-gridcell-column-index="0"][data-gridcell-row-index="0"]').should('exist');
-    cy.get(
-      '[data-gridcell-column-index="0"][data-gridcell-row-index="0"] [data-datagrid-interactable="true"]'
-    ).click();
+    const firstCell = '[data-gridcell-column-index="0"][data-gridcell-row-index="0"]';
+    cy.get(firstCell).should('exist');
+    cy.get(firstCell).find('[data-euigrid-tab-managed="true"]').click();
     cy.url().should('include', 'app/fleet/agents/');
   });
 

diff --git a/x-pack/plugins/osquery/cypress/tasks/saved_queries.ts b/x-pack/plugins/osquery/cypress/tasks/saved_queries.ts
@@ -52,15 +52,17 @@ export const getSavedQueriesComplexTest = () =>
 
         // hidden columns
         cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns35');
-        cy.getBySel('dataGridHeaderCell-osquery.cmdline').click();
-        cy.contains(/Hide column$/).click();
-        cy.getBySel('dataGridHeaderCell-osquery.cwd').click();
-
-        cy.contains(/Hide column$/).click();
-        cy.getBySel('dataGridHeaderCell-osquery.disk_bytes_written.number').click();
-
-        cy.contains(/Hide column$/).click();
+        cy.getBySel('dataGridColumnSelectorButton').click();
+        cy.get('[data-popover-open="true"]').should('be.visible');
+        cy.getBySel('dataGridColumnSelectorToggleColumnVisibility-osquery.cmdline').click();
+        cy.getBySel('dataGridColumnSelectorToggleColumnVisibility-osquery.cwd').click();
+        cy.getBySel(
+          'dataGridColumnSelectorToggleColumnVisibility-osquery.disk_bytes_written.number'
+        ).click();
+        cy.getBySel('dataGridColumnSelectorButton').click();
+        cy.get('[data-popover-open="true"]').should('not.exist');
         cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35');
+
         // change pagination
         cy.getBySel('pagination-button-next').click().wait(500).click();
         cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35');
@@ -72,8 +74,7 @@ export const getSavedQueriesComplexTest = () =>
         cy.getBySel(RESULTS_TABLE_BUTTON).click();
 
         // sorting
-        cy.getBySel('dataGridHeaderCell-osquery.egid').click();
-
+        cy.getBySel('dataGridHeaderCellActionButton-osquery.egid').click({ force: true });
         cy.contains(/Sort A-Z$/).click();
         cy.getBySel(RESULTS_TABLE_COLUMNS_BUTTON).should('have.text', 'Columns32/35');
         cy.getBySel(RESULTS_TABLE_BUTTON).trigger('mouseover');

diff --git a/x-pack/plugins/translations/translations/fr-FR.json b/x-pack/plugins/translations/translations/fr-FR.json
@@ -17730,7 +17730,6 @@
     "xpack.fleet.settings.editOutputFlyout.nameInputPlaceholder": "Indiquer le nom",
     "xpack.fleet.settings.editOutputFlyout.preconfiguredOutputCalloutDescription": "La plupart des actions liées à cette sortie sont indisponibles. Reportez-vous à votre configuration Kibana pour en savoir plus.",
     "xpack.fleet.settings.editOutputFlyout.preconfiguredOutputCalloutTitle": "Cette sortie est gérée en dehors de Fleet.",
-    "xpack.fleet.settings.editOutputFlyout.proxyIdLabel": "Proxy",
     "xpack.fleet.settings.editOutputFlyout.proxyIdPlaceholder": "Sélectionner un proxy",
     "xpack.fleet.settings.editOutputFlyout.queueFlushTimeoutDescription": "À l'expiration, la file d'attente de sortie est vidée, et les données sont écrites dans la sortie.",
     "xpack.fleet.settings.editOutputFlyout.queueFlushTimeoutLabel": "Délai de vidage",
@@ -17795,7 +17794,6 @@
     "xpack.fleet.settings.fleetServerHostsFlyout.hostUrlLabel": "URL",
     "xpack.fleet.settings.fleetServerHostsFlyout.nameInputLabel": "Nom",
     "xpack.fleet.settings.fleetServerHostsFlyout.nameInputPlaceholder": "Indiquer le nom",
-    "xpack.fleet.settings.fleetServerHostsFlyout.proxyIdLabel": "Proxy",
     "xpack.fleet.settings.fleetServerHostsFlyout.proxyIdPlaceholder": "Sélectionner un proxy",
     "xpack.fleet.settings.fleetServerHostsFlyout.saveButton": "Enregistrer et appliquer les paramètres",
     "xpack.fleet.settings.fleetServerHostsFlyout.successToastTitle": "Hôte du serveur Fleet enregistré",

diff --git a/x-pack/plugins/translations/translations/ja-JP.json b/x-pack/plugins/translations/translations/ja-JP.json
@@ -17743,7 +17743,6 @@
     "xpack.fleet.settings.editOutputFlyout.nameInputPlaceholder": "名前を指定",
     "xpack.fleet.settings.editOutputFlyout.preconfiguredOutputCalloutDescription": "この出力に関連するほとんどのアクションは使用できません。詳細については、Kibana構成を参照してください。",
     "xpack.fleet.settings.editOutputFlyout.preconfiguredOutputCalloutTitle": "この出力はFleet外で管理されます",
-    "xpack.fleet.settings.editOutputFlyout.proxyIdLabel": "プロキシ",
     "xpack.fleet.settings.editOutputFlyout.proxyIdPlaceholder": "プロキシを選択",
     "xpack.fleet.settings.editOutputFlyout.queueFlushTimeoutDescription": "有効期限切れになると、出力キューがフラッシュされ、データが出力に書き込まれます。",
     "xpack.fleet.settings.editOutputFlyout.queueFlushTimeoutLabel": "フラッシュタイムアウト",
@@ -17808,7 +17807,6 @@
     "xpack.fleet.settings.fleetServerHostsFlyout.hostUrlLabel": "URL",
     "xpack.fleet.settings.fleetServerHostsFlyout.nameInputLabel": "名前",
     "xpack.fleet.settings.fleetServerHostsFlyout.nameInputPlaceholder": "名前を指定",
-    "xpack.fleet.settings.fleetServerHostsFlyout.proxyIdLabel": "プロキシ",
     "xpack.fleet.settings.fleetServerHostsFlyout.proxyIdPlaceholder": "プロキシを選択",
     "xpack.fleet.settings.fleetServerHostsFlyout.saveButton": "設定を保存して適用",
     "xpack.fleet.settings.fleetServerHostsFlyout.successToastTitle": "Fleetサーバーホストが保存されました",