[Discover] Show "unsaved changes" label when in unsaved state of saved search

.github/CODEOWNERS

@@ -791,6 +791,7 @@ packages/kbn-unified-field-list @elastic/kibana-data-discovery
 examples/unified_field_list_examples @elastic/kibana-data-discovery
 src/plugins/unified_histogram @elastic/kibana-data-discovery
 src/plugins/unified_search @elastic/kibana-visualizations
+packages/kbn-unsaved-changes-badge @elastic/kibana-data-discovery
 x-pack/plugins/upgrade_assistant @elastic/platform-deployment-management
 x-pack/plugins/uptime @elastic/uptime
 x-pack/plugins/drilldowns/url_drilldown @elastic/appex-sharedux

.i18nrc.json

@@ -132,7 +132,8 @@
     "unifiedSearch": "src/plugins/unified_search",
     "unifiedFieldList": "packages/kbn-unified-field-list",
     "unifiedHistogram": "src/plugins/unified_histogram",
-    "unifiedDataTable": "packages/kbn-unified-data-table"
+    "unifiedDataTable": "packages/kbn-unified-data-table",
+    "unsavedChangesBadge": "packages/kbn-unsaved-changes-badge"
   },
   "translations": []
 }

examples/discover_customization_examples/public/plugin.tsx

@@ -163,6 +163,17 @@ export class DiscoverCustomizationExamplesPlugin implements Plugin {
               order: 300,
             },
           ],
+          getBadges: () => {
+            return [
+              {
+                data: {
+                  badgeText: 'Example badge',
+                  color: 'warning',
+                },
+                order: 10,
+              },
+            ];
+          },
         });
 
         customizations.set({

package.json

@@ -782,6 +782,7 @@
     "@kbn/unified-field-list-examples-plugin": "link:examples/unified_field_list_examples",
     "@kbn/unified-histogram-plugin": "link:src/plugins/unified_histogram",
     "@kbn/unified-search-plugin": "link:src/plugins/unified_search",
+    "@kbn/unsaved-changes-badge": "link:packages/kbn-unsaved-changes-badge",
     "@kbn/upgrade-assistant-plugin": "link:x-pack/plugins/upgrade_assistant",
     "@kbn/uptime-plugin": "link:x-pack/plugins/uptime",
     "@kbn/url-drilldown-plugin": "link:x-pack/plugins/drilldowns/url_drilldown",

packages/kbn-unsaved-changes-badge/README.md

@@ -0,0 +1,8 @@
+# @kbn/unsaved-changes-badge
+
+A yellow "Unsaved changes" badge which can be found for example on Discover page.
+It supports callbacks to save or revert the changes.
+
+To integrate it into TopNav component, consider using `getTopNavUnsavedChangesBadge(...)` util and pass the result to `badges` prop of the top nav.
+
+There is also a standalone component `<UnsavedChangesBadge .../>`.

packages/kbn-unsaved-changes-badge/index.ts

@@ -0,0 +1,17 @@
+/*
+ * 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.
+ */
+
+export {
+  UnsavedChangesBadge,
+  type UnsavedChangesBadgeProps,
+} from './src/components/unsaved_changes_badge';
+
+export {
+  getTopNavUnsavedChangesBadge,
+  type TopNavUnsavedChangesBadgeParams,
+} from './src/utils/get_top_nav_unsaved_changes_badge';

packages/kbn-unsaved-changes-badge/jest.config.js

@@ -0,0 +1,13 @@
+/*
+ * 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.
+ */
+
+module.exports = {
+  preset: '@kbn/test',
+  rootDir: '../..',
+  roots: ['<rootDir>/packages/kbn-unsaved-changes-badge'],
+};

packages/kbn-unsaved-changes-badge/kibana.jsonc

@@ -0,0 +1,5 @@
+{
+  "type": "shared-common",
+  "id": "@kbn/unsaved-changes-badge",
+  "owner": "@elastic/kibana-data-discovery"
+}

packages/kbn-unsaved-changes-badge/package.json

@@ -0,0 +1,10 @@
+{
+  "name": "@kbn/unsaved-changes-badge",
+  "private": true,
+  "version": "1.0.0",
+  "license": "SSPL-1.0 OR Elastic License 2.0",
+  "sideEffects": [
+    "*.css",
+    "*.scss"
+  ]
+}

packages/kbn-unsaved-changes-badge/src/components/unsaved_changes_badge/index.ts

@@ -0,0 +1,9 @@
+/*
+ * 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.
+ */
+
+export { UnsavedChangesBadge, type UnsavedChangesBadgeProps } from './unsaved_changes_badge';

packages/kbn-unsaved-changes-badge/src/components/unsaved_changes_badge/unsaved_changes_badge.test.tsx

@@ -0,0 +1,90 @@
+/*
+ * 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 { screen, waitFor } from '@testing-library/dom';
+import { render, act } from '@testing-library/react';
+import { UnsavedChangesBadge } from './unsaved_changes_badge';
+
+describe('<UnsavedChangesBadge />', () => {
+  test('should render correctly', async () => {
+    const onRevert = jest.fn();
+    const { getByTestId, queryByTestId } = render(
+      <UnsavedChangesBadge badgeText="test" onRevert={onRevert} />
+    );
+    expect(getByTestId('unsavedChangesBadge')).toBeInTheDocument();
+
+    getByTestId('unsavedChangesBadge').click();
+    await waitFor(() => {
+      return Boolean(queryByTestId('unsavedChangesBadgeMenuPanel'));
+    });
+    expect(queryByTestId('revertUnsavedChangesButton')).toBeInTheDocument();
+    expect(queryByTestId('saveUnsavedChangesButton')).not.toBeInTheDocument();
+    expect(queryByTestId('saveUnsavedChangesAsButton')).not.toBeInTheDocument();
+
+    expect(onRevert).not.toHaveBeenCalled();
+
+    act(() => {
+      getByTestId('revertUnsavedChangesButton').click();
+    });
+    expect(onRevert).toHaveBeenCalled();
+  });
+
+  test('should show all menu items', async () => {
+    const onRevert = jest.fn().mockResolvedValue(true);
+    const onSave = jest.fn().mockResolvedValue(true);
+    const onSaveAs = jest.fn().mockResolvedValue(true);
+    const { getByTestId, queryByTestId, container } = render(
+      <UnsavedChangesBadge
+        badgeText="test"
+        onRevert={onRevert}
+        onSave={onSave}
+        onSaveAs={onSaveAs}
+      />
+    );
+
+    expect(container).toMatchSnapshot();
+
+    getByTestId('unsavedChangesBadge').click();
+    await waitFor(() => {
+      return Boolean(queryByTestId('unsavedChangesBadgeMenuPanel'));
+    });
+    expect(queryByTestId('revertUnsavedChangesButton')).toBeInTheDocument();
+    expect(queryByTestId('saveUnsavedChangesButton')).toBeInTheDocument();
+    expect(queryByTestId('saveUnsavedChangesAsButton')).toBeInTheDocument();
+
+    expect(screen.getByTestId('unsavedChangesBadgeMenuPanel')).toMatchSnapshot();
+  });
+
+  test('should call callbacks', async () => {
+    const onRevert = jest.fn().mockResolvedValue(true);
+    const onSave = jest.fn().mockResolvedValue(true);
+    const onSaveAs = jest.fn().mockResolvedValue(true);
+    const { getByTestId, queryByTestId } = render(
+      <UnsavedChangesBadge
+        badgeText="test"
+        onRevert={onRevert}
+        onSave={onSave}
+        onSaveAs={onSaveAs}
+      />
+    );
+    act(() => {
+      getByTestId('unsavedChangesBadge').click();
+    });
+    await waitFor(() => {
+      return Boolean(queryByTestId('unsavedChangesBadgeMenuPanel'));
+    });
+
+    expect(onSave).not.toHaveBeenCalled();
+
+    act(() => {
+      getByTestId('saveUnsavedChangesButton').click();
+    });
+    expect(onSave).toHaveBeenCalled();
+  });
+});