[9.1] [Controls] Fix disabled range slider tooltip, clean up delete control button (#227295)

src/platform/plugins/shared/controls/public/actions/delete_control_action.tsx

@@ -29,7 +29,7 @@ import { IncompatibleActionError, type Action } from '@kbn/ui-actions-plugin/pub
 import { PresentationContainer, apiIsPresentationContainer } from '@kbn/presentation-containers';
 import { CONTROL_GROUP_TYPE } from '../../common';
 import { ACTION_DELETE_CONTROL } from './constants';
-import { coreServices } from '../services/kibana_services';
+import { confirmDeleteControl } from '../common';
 
 type DeleteControlActionApi = HasType &
   HasUniqueId &
@@ -83,28 +83,10 @@ export class DeleteControlAction implements Action<EmbeddableApiContext> {
   public async execute({ embeddable }: EmbeddableApiContext) {
     if (!compatibilityCheck(embeddable)) throw new IncompatibleActionError();
 
-    coreServices.overlays
-      .openConfirm(
-        i18n.translate('controls.controlGroup.management.delete.sub', {
-          defaultMessage: 'Controls are not recoverable once removed.',
-        }),
-        {
-          confirmButtonText: i18n.translate('controls.controlGroup.management.delete.confirm', {
-            defaultMessage: 'Delete',
-          }),
-          cancelButtonText: i18n.translate('controls.controlGroup.management.delete.cancel', {
-            defaultMessage: 'Cancel',
-          }),
-          title: i18n.translate('controls.controlGroup.management.delete.deleteTitle', {
-            defaultMessage: 'Delete control?',
-          }),
-          buttonColor: 'danger',
-        }
-      )
-      .then((confirmed) => {
-        if (confirmed) {
-          embeddable.parentApi.removePanel(embeddable.uuid);
-        }
-      });
+    confirmDeleteControl().then((confirmed) => {
+      if (confirmed) {
+        embeddable.parentApi.removePanel(embeddable.uuid);
+      }
+    });
   }
 }

src/platform/plugins/shared/controls/public/common/confirm_delete_control.ts

@@ -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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+import { i18n } from '@kbn/i18n';
+import { coreServices } from '../services/kibana_services';
+
+const openConfirmDeleteModal = (all: boolean) =>
+  coreServices.overlays.openConfirm(
+    i18n.translate('controls.controlGroup.management.delete.sub', {
+      defaultMessage: 'Controls are not recoverable once removed.',
+    }),
+    {
+      confirmButtonText: i18n.translate('controls.controlGroup.management.delete.confirm', {
+        defaultMessage: 'Delete',
+      }),
+      cancelButtonText: i18n.translate('controls.controlGroup.management.delete.cancel', {
+        defaultMessage: 'Cancel',
+      }),
+      title: all
+        ? i18n.translate('controls.controlGroup.management.delete.deleteAllTitle', {
+            defaultMessage: 'Delete all controls?',
+          })
+        : i18n.translate('controls.controlGroup.management.delete.deleteTitle', {
+            defaultMessage: 'Delete control?',
+          }),
+      buttonColor: 'danger',
+    }
+  );
+
+export const confirmDeleteControl = () => openConfirmDeleteModal(false);
+export const confirmDeleteAllControls = () => openConfirmDeleteModal(true);

src/platform/plugins/shared/controls/public/common/index.ts

@@ -0,0 +1,10 @@
+/*
+ * 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", the "GNU Affero General Public License v3.0 only", 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", the "GNU Affero General Public
+ * License v3.0 only", or the "Server Side Public License, v 1".
+ */
+
+export { confirmDeleteControl } from './confirm_delete_control';

src/platform/plugins/shared/controls/public/control_group/open_edit_control_group_flyout.tsx

@@ -18,6 +18,7 @@ import { StateManager } from '@kbn/presentation-publishing/state_manager/types';
 import { ControlGroupEditor } from './components/control_group_editor';
 import { ControlGroupApi, ControlGroupEditorState } from './types';
 import { coreServices } from '../services/kibana_services';
+import { confirmDeleteAllControls } from '../common/confirm_delete_control';
 
 export const openEditControlGroupFlyout = (
   controlGroupApi: ControlGroupApi,
@@ -33,31 +34,13 @@ export const openEditControlGroupFlyout = (
   };
 
   const onDeleteAll = (ref: OverlayRef) => {
-    coreServices.overlays
-      .openConfirm(
-        i18n.translate('controls.controlGroup.management.delete.sub', {
-          defaultMessage: 'Controls are not recoverable once removed.',
-        }),
-        {
-          confirmButtonText: i18n.translate('controls.controlGroup.management.delete.confirm', {
-            defaultMessage: 'Delete',
-          }),
-          cancelButtonText: i18n.translate('controls.controlGroup.management.delete.cancel', {
-            defaultMessage: 'Cancel',
-          }),
-          title: i18n.translate('controls.controlGroup.management.delete.deleteAllTitle', {
-            defaultMessage: 'Delete all controls?',
-          }),
-          buttonColor: 'danger',
-        }
-      )
-      .then((confirmed) => {
-        if (confirmed)
-          Object.keys(controlGroupApi.children$.getValue()).forEach((childId) => {
-            controlGroupApi.removePanel(childId);
-          });
-        closeOverlay(ref);
-      });
+    confirmDeleteAllControls().then((confirmed) => {
+      if (confirmed)
+        Object.keys(controlGroupApi.children$.getValue()).forEach((childId) => {
+          controlGroupApi.removePanel(childId);
+        });
+      closeOverlay(ref);
+    });
   };
 
   const overlay = coreServices.overlays.openFlyout(

src/platform/plugins/shared/controls/public/controls/data_controls/data_control_editor.tsx

@@ -58,6 +58,7 @@ import {
   type DataControlFieldRegistry,
 } from './types';
 import { ControlFactory } from '../types';
+import { confirmDeleteControl } from '../../common';
 
 export interface ControlEditorProps<
   State extends DefaultDataControlState = DefaultDataControlState
@@ -156,7 +157,7 @@ const CompatibleControlTypesComponent = ({
               content={DataControlEditorStrings.manageControl.dataSource.getControlTypeErrorMessage(
                 {
                   fieldSelected: Boolean(selectedFieldName),
-                  controlType: factory.getDisplayName(),
+                  controlType: factory.type,
                 }
               )}
             >
@@ -414,23 +415,6 @@ export const DataControlEditor = <State extends DefaultDataControlState = Defaul
             </EuiFormRow>
           )}
           {!editorConfig?.hideAdditionalSettings && CustomSettingsComponent}
-          {controlId && (
-            <>
-              <EuiSpacer size="l" />
-              <EuiButtonEmpty
-                aria-label={`delete-${editorState.title ?? editorState.fieldName}`}
-                iconType="trash"
-                flush="left"
-                color="danger"
-                onClick={() => {
-                  onCancel(initialState); // don't want to show "lost changes" warning
-                  controlGroupApi.removePanel(controlId!);
-                }}
-              >
-                {DataControlEditorStrings.manageControl.getDeleteButtonTitle()}
-              </EuiButtonEmpty>
-            </>
-          )}
         </EuiForm>
       </EuiFlyoutBody>
       <EuiFlyoutFooter>
@@ -447,25 +431,44 @@ export const DataControlEditor = <State extends DefaultDataControlState = Defaul
             </EuiButtonEmpty>
           </EuiFlexItem>
           <EuiFlexItem grow={false}>
-            <EuiButton
-              aria-label={`save-${editorState.title ?? editorState.fieldName}`}
-              data-test-subj="control-editor-save"
-              fill
-              color="primary"
-              disabled={
-                !(
-                  controlOptionsValid &&
-                  Boolean(editorState.fieldName) &&
-                  Boolean(selectedDataView) &&
-                  Boolean(selectedControlType)
-                )
-              }
-              onClick={() => {
-                onSave(editorState, selectedControlType!);
-              }}
-            >
-              {DataControlEditorStrings.manageControl.getSaveChangesTitle()}
-            </EuiButton>
+            <EuiFlexGroup responsive={false} justifyContent="flexEnd" gutterSize="s">
+              {controlId && (
+                <EuiButton
+                  aria-label={`delete-${editorState.title ?? editorState.fieldName}`}
+                  iconType="trash"
+                  color="danger"
+                  onClick={() => {
+                    confirmDeleteControl().then((confirmed) => {
+                      if (confirmed) {
+                        onCancel(initialState); // don't want to show "lost changes" warning
+                        controlGroupApi.removePanel(controlId!);
+                      }
+                    });
+                  }}
+                >
+                  {DataControlEditorStrings.manageControl.getDeleteButtonTitle()}
+                </EuiButton>
+              )}
+              <EuiButton
+                aria-label={`save-${editorState.title ?? editorState.fieldName}`}
+                data-test-subj="control-editor-save"
+                fill
+                color="primary"
+                disabled={
+                  !(
+                    controlOptionsValid &&
+                    Boolean(editorState.fieldName) &&
+                    Boolean(selectedDataView) &&
+                    Boolean(selectedControlType)
+                  )
+                }
+                onClick={() => {
+                  onSave(editorState, selectedControlType!);
+                }}
+              >
+                {DataControlEditorStrings.manageControl.getSaveChangesTitle()}
+              </EuiButton>
+            </EuiFlexGroup>
           </EuiFlexItem>
         </EuiFlexGroup>
       </EuiFlyoutFooter>