Add a warning callout when deleting managed assets

.github/CODEOWNERS

@@ -478,6 +478,7 @@ src/platform/packages/shared/kbn-lens-embeddable-utils @elastic/obs-ux-infra_ser
 src/platform/packages/shared/kbn-logging @elastic/kibana-core
 src/platform/packages/shared/kbn-logging-mocks @elastic/kibana-core
 src/platform/packages/shared/kbn-management/cards_navigation @elastic/kibana-management
+src/platform/packages/shared/kbn-management/delete_managed_assets_callout @elastic/kibana-management
 src/platform/packages/shared/kbn-management/settings/components/field_input @elastic/kibana-management
 src/platform/packages/shared/kbn-management/settings/components/field_row @elastic/kibana-management
 src/platform/packages/shared/kbn-management/settings/field_definition @elastic/kibana-management

package.json

@@ -447,6 +447,7 @@
     "@kbn/default-nav-devtools": "link:src/platform/packages/private/default-nav/devtools",
     "@kbn/default-nav-management": "link:src/platform/packages/private/default-nav/management",
     "@kbn/default-nav-ml": "link:src/platform/packages/private/default-nav/ml",
+    "@kbn/delete-managed-asset-callout": "link:src/platform/packages/shared/kbn-management/delete_managed_assets_callout",
     "@kbn/dev-tools-plugin": "link:src/platform/plugins/shared/dev_tools",
     "@kbn/developer-examples-plugin": "link:examples/developer_examples",
     "@kbn/discover-contextual-components": "link:src/platform/packages/shared/kbn-discover-contextual-components",

src/platform/packages/shared/kbn-management/delete_managed_assets_callout/README.mdx

@@ -0,0 +1,15 @@
+---
+id: kbn-management/components/DeleteManagedAssetsCallout
+slug: /kbn-management/components/delete_managed_assets_callout
+title: Delete Managed Assets Callout
+description: A callout component that displays a warning message for when a user is about to delete a managed asset.
+tags: ['management', 'component']
+date: 2025-01-20
+---
+
+This component is used to display a warning callout when a user is about to delete a managed asset.
+
+
+```typescript
+<DeleteManagedAssetsCallout assetName="ingest pipeline" />
+```

src/platform/packages/shared/kbn-management/delete_managed_assets_callout/index.ts

@@ -0,0 +1,11 @@
+/*
+ * 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 type { DeleteManagedAssetsCalloutProps } from './src/callout';
+export { DeleteManagedAssetsCallout } from './src/callout';

src/platform/packages/shared/kbn-management/delete_managed_assets_callout/kibana.jsonc

@@ -0,0 +1,7 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/delete-managed-asset-callout",
+  "owner": "@elastic/kibana-management",
+  "group": "platform",
+  "visibility": "shared"
+}

src/platform/packages/shared/kbn-management/delete_managed_assets_callout/package.json

@@ -0,0 +1,6 @@
+{
+  "name": "@kbn/delete-managed-asset-callout",
+  "private": true,
+  "version": "1.0.0",
+  "license": "Elastic License 2.0 OR AGPL-3.0-only OR SSPL-1.0"
+}

src/platform/packages/shared/kbn-management/delete_managed_assets_callout/src/callout.stories.tsx

@@ -0,0 +1,25 @@
+/*
+ * 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 React from 'react';
+
+import { DeleteManagedAssetsCallout as Component } from './callout';
+
+export default {
+  title: 'Developer/Delete Managed Assets Callout',
+  description: '',
+};
+
+export const DeleteManagedAssetsCallout = () => {
+  return <Component assetName="ingest pipeline" />;
+};
+
+export const ErrorDeleteManagedAssetsCallout = () => {
+  return <Component assetName="ingest pipeline" color="danger" iconType="trash" />;
+};

src/platform/packages/shared/kbn-management/delete_managed_assets_callout/src/callout.tsx

@@ -0,0 +1,43 @@
+/*
+ * 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 React from 'react';
+import { i18n } from '@kbn/i18n';
+import type { EuiCallOutProps } from '@elastic/eui';
+import { EuiCallOut } from '@elastic/eui';
+
+export interface DeleteManagedAssetsCalloutProps extends EuiCallOutProps {
+  assetName: string;
+  overrideTitle?: string;
+  overrideBody?: string;
+}
+
+export const DeleteManagedAssetsCallout = ({
+  assetName,
+  overrideTitle,
+  overrideBody,
+  ...overrideCalloutProps
+}: DeleteManagedAssetsCalloutProps) => {
+  return (
+    <EuiCallOut
+      color="warning"
+      iconType="warning"
+      data-test-subj="deleteManagedAssetsCallout"
+      {...overrideCalloutProps}
+    >
+      <p>
+        {overrideBody ??
+          i18n.translate('management.deleteManagedAssetsCallout.body', {
+            defaultMessage: `Elasticsearch automatically re-creates any missing managed {assetName}. If you delete a managed {assetName}, the deletion appears as successful but the {assetName} is immediately re-created and reappears.`,
+            values: { assetName },
+          })}
+      </p>
+    </EuiCallOut>
+  );
+};

src/platform/packages/shared/kbn-management/delete_managed_assets_callout/tsconfig.json

@@ -0,0 +1,21 @@
+{
+  "extends": "../../../../../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "target/types",
+    "types": [
+      "jest",
+      "node",
+      "react"
+    ]
+  },
+  "include": [
+    "**/*.ts",
+    "**/*.tsx"
+  ],
+  "exclude": [
+    "target/**/*"
+  ],
+  "kbn_references": [
+    "@kbn/i18n",
+  ]
+}

tsconfig.base.json

@@ -754,6 +754,8 @@
       "@kbn/default-nav-management/*": ["src/platform/packages/private/default-nav/management/*"],
       "@kbn/default-nav-ml": ["src/platform/packages/private/default-nav/ml"],
       "@kbn/default-nav-ml/*": ["src/platform/packages/private/default-nav/ml/*"],
+      "@kbn/delete-managed-asset-callout": ["src/platform/packages/shared/kbn-management/delete_managed_assets_callout"],
+      "@kbn/delete-managed-asset-callout/*": ["src/platform/packages/shared/kbn-management/delete_managed_assets_callout/*"],
       "@kbn/dependency-ownership": ["packages/kbn-dependency-ownership"],
       "@kbn/dependency-ownership/*": ["packages/kbn-dependency-ownership/*"],
       "@kbn/dependency-usage": ["packages/kbn-dependency-usage"],

x-pack/platform/plugins/shared/index_management/__jest__/client_integration/home/index_templates_tab.test.ts

@@ -455,7 +455,7 @@ describe('Index Templates tab', () => {
           `${API_BASE_PATH}/delete_index_templates`,
           expect.objectContaining({
             body: JSON.stringify({
-              templates: [{ name: templates[0].name, isLegacy }],
+              templates: [{ name: templates[0].name, isLegacy, type: 'default' }],
             }),
           })
         );
@@ -518,7 +518,7 @@ describe('Index Templates tab', () => {
           `${API_BASE_PATH}/delete_index_templates`,
           expect.objectContaining({
             body: JSON.stringify({
-              templates: [{ name: templates[0].name, isLegacy: false }],
+              templates: [{ name: templates[0].name, isLegacy: false, type: 'default' }],
             }),
           })
         );

x-pack/platform/plugins/shared/index_management/public/application/components/template_delete_modal.tsx

@@ -6,25 +6,29 @@
  */
 
 import React, { Fragment, useState } from 'react';
-import { EuiConfirmModal, EuiCallOut, EuiCheckbox, EuiBadge } from '@elastic/eui';
+import { EuiConfirmModal, EuiCallOut, EuiCheckbox, EuiBadge, EuiSpacer } from '@elastic/eui';
 import { i18n } from '@kbn/i18n';
 import { FormattedMessage } from '@kbn/i18n-react';
 
+import { DeleteManagedAssetsCallout } from '@kbn/delete-managed-asset-callout';
 import { deleteTemplates } from '../services/api';
 import { notificationService } from '../services/notification';
 
 export const TemplateDeleteModal = ({
   templatesToDelete,
   callback,
 }: {
-  templatesToDelete: Array<{ name: string; isLegacy?: boolean }>;
+  templatesToDelete: Array<{ name: string; isLegacy?: boolean; type?: string }>;
   callback: (data?: { hasDeletedTemplates: boolean }) => void;
 }) => {
   const [isDeleteConfirmed, setIsDeleteConfirmed] = useState<boolean>(false);
 
   const numTemplatesToDelete = templatesToDelete.length;
 
   const hasSystemTemplate = Boolean(templatesToDelete.find(({ name }) => name.startsWith('.')));
+  const managedTemplatesToDelete = templatesToDelete.filter(
+    ({ type }) => type === 'managed'
+  ).length;
 
   const handleDeleteTemplates = () => {
     deleteTemplates(templatesToDelete).then(({ data: { templatesDeleted, errors }, error }) => {
@@ -109,6 +113,17 @@ export const TemplateDeleteModal = ({
       confirmButtonDisabled={hasSystemTemplate ? !isDeleteConfirmed : false}
     >
       <Fragment>
+        {managedTemplatesToDelete > 0 && (
+          <>
+            <DeleteManagedAssetsCallout
+              assetName={i18n.translate('xpack.idxMgmt.deleteTemplatesModal.assetName', {
+                defaultMessage: 'Index Template',
+              })}
+            />
+
+            <EuiSpacer size="m" />
+          </>
+        )}
         <p>
           <FormattedMessage
             id="xpack.idxMgmt.deleteTemplatesModal.deleteDescription"
@@ -118,9 +133,20 @@ export const TemplateDeleteModal = ({
         </p>
 
         <ul>
-          {templatesToDelete.map(({ name }) => (
+          {templatesToDelete.map(({ name, type }) => (
             <li key={name}>
               {name}
+              {type === 'managed' && (
+                <>
+                  {' '}
+                  <EuiBadge color="hollow">
+                    <FormattedMessage
+                      id="xpack.idxMgmt.deleteTemplatesModal.managedTemplateLabel"
+                      defaultMessage="Managed"
+                    />
+                  </EuiBadge>
+                </>
+              )}
               {name.startsWith('.') ? (
                 <Fragment>
                   {' '}

x-pack/platform/plugins/shared/index_management/public/application/sections/home/template_list/template_details/template_details_content.tsx

@@ -89,7 +89,7 @@ const tabToUiMetricMap: { [key: string]: string } = {
 };
 
 export interface Props {
-  template: { name: string; isLegacy?: boolean };
+  template: { name: string; isLegacy?: boolean; type?: string };
   onClose: () => void;
   editTemplate: (name: string, isLegacy?: boolean) => void;
   cloneTemplate: (name: string, isLegacy?: boolean) => void;
@@ -106,8 +106,9 @@ export const TemplateDetailsContent = ({
   const { uiMetricService } = useServices();
   const { error, data: templateDetails, isLoading } = useLoadIndexTemplate(templateName, isLegacy);
   const isCloudManaged = templateDetails?._kbnMeta.type === 'cloudManaged';
+  const templateType = templateDetails?._kbnMeta.type;
   const [templateToDelete, setTemplateToDelete] = useState<
-    Array<{ name: string; isLegacy?: boolean }>
+    Array<{ name: string; isLegacy?: boolean; type?: string }>
   >([]);
   const [activeTab, setActiveTab] = useState<string>(SUMMARY_TAB_ID);
   const [isPopoverOpen, setIsPopOverOpen] = useState<boolean>(false);
@@ -306,7 +307,11 @@ export const TemplateDetailsContent = ({
                             defaultMessage: 'Delete',
                           }),
                           icon: 'trash',
-                          onClick: () => setTemplateToDelete([{ name: templateName, isLegacy }]),
+                          onClick: () =>
+                            setTemplateToDelete([
+                              { name: templateName, isLegacy, type: templateType },
+                            ]),
+                          'data-test-subj': 'deleteIndexTemplateButton',
                           disabled: isCloudManaged,
                         },
                       ],

x-pack/platform/plugins/shared/index_management/public/application/sections/home/template_list/template_table/template_table.tsx

@@ -42,7 +42,7 @@ export const TemplateTable: React.FunctionComponent<Props> = ({
   const { uiMetricService } = useServices();
   const [selection, setSelection] = useState<TemplateListItem[]>([]);
   const [templatesToDelete, setTemplatesToDelete] = useState<
-    Array<{ name: string; isLegacy?: boolean }>
+    Array<{ name: string; isLegacy?: boolean; type?: string }>
   >([]);
 
   const columns: Array<EuiBasicTableColumn<TemplateListItem>> = [
@@ -182,8 +182,8 @@ export const TemplateTable: React.FunctionComponent<Props> = ({
           icon: 'trash',
           color: 'danger',
           type: 'icon',
-          onClick: ({ name, _kbnMeta: { isLegacy } }: TemplateListItem) => {
-            setTemplatesToDelete([{ name, isLegacy }]);
+          onClick: ({ name, _kbnMeta: { isLegacy, type } }: TemplateListItem) => {
+            setTemplatesToDelete([{ name, isLegacy, type }]);
           },
           isPrimary: true,
           enabled: ({ _kbnMeta: { type } }: TemplateListItem) => type !== 'cloudManaged',
@@ -233,9 +233,10 @@ export const TemplateTable: React.FunctionComponent<Props> = ({
           data-test-subj="deleteTemplatesButton"
           onClick={() =>
             setTemplatesToDelete(
-              selection.map(({ name, _kbnMeta: { isLegacy } }: TemplateListItem) => ({
+              selection.map(({ name, _kbnMeta: { isLegacy, type } }: TemplateListItem) => ({
                 name,
                 isLegacy,
+                type,
               }))
             )
           }

x-pack/platform/plugins/shared/index_management/tsconfig.json

@@ -55,6 +55,7 @@
     "@kbn/unsaved-changes-prompt",
     "@kbn/shared-ux-table-persist",
     "@kbn/core-application-browser",
+    "@kbn/delete-managed-asset-callout",
   ],
   "exclude": ["target/**/*"]
 }