Merge branch 'bump-node20' of github.com:mistic/kibana into bump-node20

elastic · Dec 21, 2023 · 9cb8fe2 · 9cb8fe2
2 parents 6273984 + 59aa4b7
commit 9cb8fe2
Show file tree

Hide file tree

Showing 41 changed files with 1,083 additions and 684 deletions.
diff --git a/.github/workflows/skip-failed-test.yml b/.github/workflows/skip-failed-test.yml
@@ -26,7 +26,7 @@ jobs:
         uses: ./actions/permission-check
         with:
           permission: admin
-          teams: appex-qa
+          teams: appex-qa, security-solution-test-skippers
           token: ${{secrets.KIBANAMACHINE_TOKEN}}
 
       - name: Checkout kibana-operations

diff --git a/src/plugins/controls/public/components/control_setting_tooltip_label.tsx b/src/plugins/controls/public/components/control_setting_tooltip_label.tsx
@@ -0,0 +1,32 @@
+/*
+ * 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 and the Server Side Public License, v 1; you may not use this file except
+ * in compliance with, at your election, the Elastic License 2.0 or the Server
+ * Side Public License, v 1.
+ */
+
+import React from 'react';
+
+import { EuiFlexGroup, EuiFlexItem, EuiIconTip } from '@elastic/eui';
+import { css } from '@emotion/react';
+
+export const ControlSettingTooltipLabel = ({
+  label,
+  tooltip,
+}: {
+  label: string;
+  tooltip: string;
+}) => (
+  <EuiFlexGroup alignItems="center" gutterSize="xs" responsive={false}>
+    <EuiFlexItem grow={false}>{label}</EuiFlexItem>
+    <EuiFlexItem
+      grow={false}
+      css={css`
+        margin-top: 0px !important;
+      `}
+    >
+      <EuiIconTip content={tooltip} position="right" />
+    </EuiFlexItem>
+  </EuiFlexGroup>
+);
diff --git a/src/plugins/controls/public/control_group/control_group_strings.ts b/src/plugins/controls/public/control_group/control_group_strings.ts
@@ -246,54 +246,46 @@ export const ControlGroupStrings = {
           defaultMessage: 'Cancel',
         }),
     },
-    validateSelections: {
-      getValidateSelectionsTitle: () =>
-        i18n.translate('controls.controlGroup.management.validate.title', {
-          defaultMessage: 'Validate user selections',
-        }),
-      getValidateSelectionsSubTitle: () =>
-        i18n.translate('controls.controlGroup.management.validate.subtitle', {
-          defaultMessage:
-            'Automatically ignore any control selection that would result in no data.',
-        }),
-    },
-    controlChaining: {
-      getHierarchyTitle: () =>
-        i18n.translate('controls.controlGroup.management.hierarchy.title', {
-          defaultMessage: 'Chain controls',
-        }),
-      getHierarchySubTitle: () =>
-        i18n.translate('controls.controlGroup.management.hierarchy.subtitle', {
-          defaultMessage:
-            'Selections in one control narrow down available options in the next. Controls are chained from left to right.',
-        }),
+    selectionSettings: {
+      getSelectionSettingsTitle: () =>
+        i18n.translate('controls.controlGroup.management.selectionSettings', {
+          defaultMessage: 'Selections',
+        }),
+      validateSelections: {
+        getValidateSelectionsTitle: () =>
+          i18n.translate('controls.controlGroup.management.validate.title', {
+            defaultMessage: 'Validate user selections',
+          }),
+        getValidateSelectionsSubTitle: () =>
+          i18n.translate('controls.controlGroup.management.validate.subtitle', {
+            defaultMessage:
+              'Automatically ignore any control selection that would result in no data.',
+          }),
+      },
+      controlChaining: {
+        getHierarchyTitle: () =>
+          i18n.translate('controls.controlGroup.management.hierarchy.title', {
+            defaultMessage: 'Chain controls',
+          }),
+        getHierarchySubTitle: () =>
+          i18n.translate('controls.controlGroup.management.hierarchy.subtitle', {
+            defaultMessage:
+              'Selections in one control narrow down available options in the next. Controls are chained from left to right.',
+          }),
+      },
     },
-    /** TODO: These translations aren't used but they will be once https://github.com/elastic/kibana/issues/162985 is resolved */
-    querySync: {
-      getQuerySettingsTitle: () =>
-        i18n.translate('controls.controlGroup.management.query.searchSettingsTitle', {
-          defaultMessage: 'Sync with query bar',
-        }),
-      getQuerySettingsSubtitle: () =>
-        i18n.translate('controls.controlGroup.management.query.useAllSearchSettingsTitle', {
-          defaultMessage:
-            'Keeps the control group in sync with the query bar by applying time range, filter pills, and queries from the query bar',
-        }),
-      getAdvancedSettingsTitle: () =>
-        i18n.translate('controls.controlGroup.management.query.advancedSettings', {
-          defaultMessage: 'Advanced',
-        }),
-      getIgnoreTimerangeTitle: () =>
-        i18n.translate('controls.controlGroup.management.query.ignoreTimerange', {
-          defaultMessage: 'Ignore timerange',
-        }),
-      getIgnoreQueryTitle: () =>
-        i18n.translate('controls.controlGroup.management.query.ignoreQuery', {
-          defaultMessage: 'Ignore query bar',
-        }),
-      getIgnoreFilterPillsTitle: () =>
-        i18n.translate('controls.controlGroup.management.query.ignoreFilterPills', {
-          defaultMessage: 'Ignore filter pills',
+    filteringSettings: {
+      getFilteringSettingsTitle: () =>
+        i18n.translate('controls.controlGroup.management.filteringSettings', {
+          defaultMessage: 'Filtering',
+        }),
+      getUseGlobalFiltersTitle: () =>
+        i18n.translate('controls.controlGroup.management.filtering.useGlobalFilters', {
+          defaultMessage: 'Apply global filters to controls',
+        }),
+      getUseGlobalTimeRangeTitle: () =>
+        i18n.translate('controls.controlGroup.management.filtering.useGlobalTimeRange', {
+          defaultMessage: 'Apply global time range to controls',
         }),
     },
   },

diff --git a/src/plugins/controls/public/control_group/editor/control_group_editor.tsx b/src/plugins/controls/public/control_group/editor/control_group_editor.tsx
@@ -16,30 +16,31 @@
 
 import fastIsEqual from 'fast-deep-equal';
 import React, { useCallback, useState } from 'react';
+
 import {
-  EuiFlyoutHeader,
+  EuiButton,
+  EuiButtonEmpty,
   EuiButtonGroup,
-  EuiFlyoutBody,
   EuiFlexGroup,
   EuiFlexItem,
-  EuiTitle,
+  EuiFlyoutBody,
   EuiFlyoutFooter,
-  EuiButton,
+  EuiFlyoutHeader,
+  EuiForm,
   EuiFormRow,
-  EuiButtonEmpty,
+  EuiHorizontalRule,
   EuiSpacer,
-  EuiForm,
   EuiSwitch,
-  EuiText,
-  EuiHorizontalRule,
+  EuiTitle,
 } from '@elastic/eui';
 
-import { CONTROL_LAYOUT_OPTIONS } from './editor_constants';
-import { ControlGroupStrings } from '../control_group_strings';
-import { ControlStyle } from '../../types';
-import { ParentIgnoreSettings } from '../..';
 import { ControlGroupInput } from '..';
+import { ParentIgnoreSettings } from '../..';
 import { getDefaultControlGroupInput } from '../../../common';
+import { ControlSettingTooltipLabel } from '../../components/control_setting_tooltip_label';
+import { ControlStyle } from '../../types';
+import { ControlGroupStrings } from '../control_group_strings';
+import { CONTROL_LAYOUT_OPTIONS } from './editor_constants';
 
 interface EditControlGroupProps {
   initialInput: ControlGroupInput;
@@ -102,7 +103,7 @@ export const ControlGroupEditor = ({
         </EuiTitle>
       </EuiFlyoutHeader>
       <EuiFlyoutBody data-test-subj="control-group-settings-flyout">
-        <EuiForm>
+        <EuiForm component="form" fullWidth>
           <EuiFormRow label={ControlGroupStrings.management.labelPosition.getLabelPositionTitle()}>
             <EuiButtonGroup
               color="primary"
@@ -112,75 +113,95 @@ export const ControlGroupEditor = ({
               legend={ControlGroupStrings.management.labelPosition.getLabelPositionLegend()}
               onChange={(newControlStyle: string) => {
                 // The UI copy calls this setting labelPosition, but to avoid an unnecessary migration it will be left as controlStyle in the state.
-                updateControlGroupEditorSetting({ controlStyle: newControlStyle as ControlStyle });
+                updateControlGroupEditorSetting({
+                  controlStyle: newControlStyle as ControlStyle,
+                });
               }}
             />
           </EuiFormRow>
-          <EuiHorizontalRule margin="m" />
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiSpacer size="xs" />
+
+          <EuiFormRow
+            label={ControlGroupStrings.management.filteringSettings.getFilteringSettingsTitle()}
+          >
+            <div>
               <EuiSwitch
+                compressed
+                data-test-subj="control-group-filter-sync"
+                label={ControlGroupStrings.management.filteringSettings.getUseGlobalFiltersTitle()}
+                onChange={(e) =>
+                  updateIgnoreSetting({
+                    ignoreFilters: !e.target.checked,
+                    ignoreQuery: !e.target.checked,
+                  })
+                }
+                checked={
+                  !Boolean(controlGroupEditorState.ignoreParentSettings?.ignoreFilters) ||
+                  !Boolean(controlGroupEditorState.ignoreParentSettings?.ignoreQuery)
+                }
+              />
+              <EuiSpacer size="s" />
+              <EuiSwitch
+                compressed
+                data-test-subj="control-group-query-sync-time-range"
+                label={ControlGroupStrings.management.filteringSettings.getUseGlobalTimeRangeTitle()}
+                onChange={(e) => updateIgnoreSetting({ ignoreTimerange: !e.target.checked })}
+                checked={!Boolean(controlGroupEditorState.ignoreParentSettings?.ignoreTimerange)}
+              />
+            </div>
+          </EuiFormRow>
+
+          <EuiFormRow
+            label={ControlGroupStrings.management.selectionSettings.getSelectionSettingsTitle()}
+          >
+            <div>
+              <EuiSwitch
+                compressed
                 data-test-subj="control-group-validate-selections"
-                label={ControlGroupStrings.management.validateSelections.getValidateSelectionsTitle()}
-                showLabel={false}
+                label={
+                  <ControlSettingTooltipLabel
+                    label={ControlGroupStrings.management.selectionSettings.validateSelections.getValidateSelectionsTitle()}
+                    tooltip={ControlGroupStrings.management.selectionSettings.validateSelections.getValidateSelectionsSubTitle()}
+                  />
+                }
                 checked={!Boolean(controlGroupEditorState.ignoreParentSettings?.ignoreValidations)}
                 onChange={(e) => updateIgnoreSetting({ ignoreValidations: !e.target.checked })}
               />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiTitle size="xxs">
-                <h3>
-                  {ControlGroupStrings.management.validateSelections.getValidateSelectionsTitle()}
-                </h3>
-              </EuiTitle>
-              <EuiText size="s">
-                <p>
-                  {ControlGroupStrings.management.validateSelections.getValidateSelectionsSubTitle()}
-                </p>
-              </EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-          <EuiHorizontalRule margin="m" />
-          <EuiFlexGroup>
-            <EuiFlexItem grow={false}>
-              <EuiSpacer size="xs" />
+              <EuiSpacer size="s" />
               <EuiSwitch
+                compressed
                 data-test-subj="control-group-chaining"
-                label={ControlGroupStrings.management.controlChaining.getHierarchyTitle()}
-                showLabel={false}
+                label={
+                  <ControlSettingTooltipLabel
+                    label={ControlGroupStrings.management.selectionSettings.controlChaining.getHierarchyTitle()}
+                    tooltip={ControlGroupStrings.management.selectionSettings.controlChaining.getHierarchySubTitle()}
+                  />
+                }
                 checked={controlGroupEditorState.chainingSystem === 'HIERARCHICAL'}
                 onChange={(e) =>
                   updateControlGroupEditorSetting({
                     chainingSystem: e.target.checked ? 'HIERARCHICAL' : 'NONE',
                   })
                 }
               />
-            </EuiFlexItem>
-            <EuiFlexItem>
-              <EuiTitle size="xxs">
-                <h3>{ControlGroupStrings.management.controlChaining.getHierarchyTitle()}</h3>
-              </EuiTitle>
-              <EuiText size="s">
-                <p>{ControlGroupStrings.management.controlChaining.getHierarchySubTitle()}</p>
-              </EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
+            </div>
+          </EuiFormRow>
+
           {controlCount > 0 && (
             <>
               <EuiHorizontalRule margin="m" />
-              <EuiSpacer size="m" />
-              <EuiButtonEmpty
-                onClick={onDeleteAll}
-                data-test-subj="delete-all-controls-button"
-                aria-label={'delete-all'}
-                iconType="trash"
-                color="danger"
-                flush="left"
-                size="s"
-              >
-                {ControlGroupStrings.management.getDeleteAllButtonTitle()}
-              </EuiButtonEmpty>
+              <EuiFormRow>
+                <EuiButtonEmpty
+                  onClick={onDeleteAll}
+                  data-test-subj="delete-all-controls-button"
+                  aria-label={'delete-all'}
+                  iconType="trash"
+                  color="danger"
+                  flush="left"
+                  size="s"
+                >
+                  {ControlGroupStrings.management.getDeleteAllButtonTitle()}
+                </EuiButtonEmpty>
+              </EuiFormRow>
             </>
           )}
         </EuiForm>