[App Search] Success toast polish pass (#103410)

* Fix toasts rerendering/resetting between page navigations + z-index issues - note: I opted to delete the `<Callouts>` component in favor of just reverting it to the old `<FlashMessages>`, now that FlashMessages is no longer responsible for toasts * Update engine creation success messages - to use a toast instead of a callout - update copy to match EUI guidelines * Update engine deletion success message - to use a toast instead of a callout - update copy to match EUI guidelines * Update source engines add/delete success messages - to use a toast instead of a callout - update copy to match EUI guidelines * Update crawler domain delete message - to use a toast instead of a callout - update copy to match EUI guidelines * Update API key create/update/delete sucess messages - to use a toast instead of a callout - update copy to match EUI guidelines * Update curations delete success message - to use a toast instead of a callout - update copy to match EUI guidelines * Update results settings success message - to use a toast instead of a callout - update copy to match EUI guidelines * Update relevance tuning success/reset messages - to use a toast (+ toast message) instead of a callout - update copy to match EUI guidelines * Update document deletion success message - to use a toast instead of a callout (+ split additional text) - update copy to match EUI guidelines * Update role mappings create/update/delete success messages - to use a toast instead of a callout - update copy to match EUI guidelines * Run i18n_check --fix - per localization team guidelines - strings that have been changed should get deleted/scheduled to be re-translated Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>
elastic · Jun 28, 2021 · d339479 · d339479
1 parent 084336a
commit d339479
Show file tree

Hide file tree

Showing 37 changed files with 198 additions and 205 deletions.
diff --git a/...e_search/public/applications/app_search/components/crawler/crawler_overview_logic.test.ts b/...e_search/public/applications/app_search/components/crawler/crawler_overview_logic.test.ts
@@ -55,7 +55,7 @@ const MOCK_CLIENT_DATA = crawlerDataServerToClient(MOCK_SERVER_DATA);
 describe('CrawlerOverviewLogic', () => {
   const { mount } = new LogicMounter(CrawlerOverviewLogic);
   const { http } = mockHttpValues;
-  const { flashAPIErrors, setSuccessMessage } = mockFlashMessageHelpers;
+  const { flashAPIErrors, flashSuccessToast } = mockFlashMessageHelpers;
 
   beforeEach(() => {
     jest.clearAllMocks();
@@ -138,7 +138,7 @@ describe('CrawlerOverviewLogic', () => {
         expect(CrawlerOverviewLogic.actions.onReceiveCrawlerData).toHaveBeenCalledWith(
           MOCK_CLIENT_DATA
         );
-        expect(setSuccessMessage).toHaveBeenCalled();
+        expect(flashSuccessToast).toHaveBeenCalled();
       });
 
       it('calls flashApiErrors when there is an error', async () => {

diff --git a/...rprise_search/public/applications/app_search/components/crawler/crawler_overview_logic.ts b/...rprise_search/public/applications/app_search/components/crawler/crawler_overview_logic.ts
@@ -9,7 +9,7 @@ import { kea, MakeLogicType } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 
-import { flashAPIErrors, setSuccessMessage } from '../../../shared/flash_messages';
+import { flashAPIErrors, flashSuccessToast } from '../../../shared/flash_messages';
 
 import { HttpLogic } from '../../../shared/http';
 import { EngineLogic } from '../engine';
@@ -21,7 +21,7 @@ export const DELETE_DOMAIN_MESSAGE = (domainUrl: string) =>
   i18n.translate(
     'xpack.enterpriseSearch.appSearch.crawler.domainsTable.action.delete.successMessage',
     {
-      defaultMessage: 'Successfully deleted "{domainUrl}"',
+      defaultMessage: "Domain '{domainUrl}' was deleted",
       values: {
         domainUrl,
       },
@@ -90,7 +90,7 @@ export const CrawlerOverviewLogic = kea<
         );
         const crawlerData = crawlerDataServerToClient(response);
         actions.onReceiveCrawlerData(crawlerData);
-        setSuccessMessage(DELETE_DOMAIN_MESSAGE(domain.url));
+        flashSuccessToast(DELETE_DOMAIN_MESSAGE(domain.url));
       } catch (e) {
         flashAPIErrors(e);
       }

diff --git a/...gins/enterprise_search/public/applications/app_search/components/credentials/constants.ts b/...gins/enterprise_search/public/applications/app_search/components/credentials/constants.ts
@@ -20,15 +20,21 @@ export enum ApiTokenTypes {
   Search = 'search',
 }
 
-export const CREATE_MESSAGE = i18n.translate('xpack.enterpriseSearch.appSearch.tokens.created', {
-  defaultMessage: 'Successfully created key.',
-});
-export const UPDATE_MESSAGE = i18n.translate('xpack.enterpriseSearch.appSearch.tokens.update', {
-  defaultMessage: 'Successfully updated API Key.',
-});
-export const DELETE_MESSAGE = i18n.translate('xpack.enterpriseSearch.appSearch.tokens.deleted', {
-  defaultMessage: 'Successfully deleted key.',
-});
+export const CREATE_MESSAGE = (name: string) =>
+  i18n.translate('xpack.enterpriseSearch.appSearch.tokens.created', {
+    defaultMessage: "API key '{name}' was created",
+    values: { name },
+  });
+export const UPDATE_MESSAGE = (name: string) =>
+  i18n.translate('xpack.enterpriseSearch.appSearch.tokens.update', {
+    defaultMessage: "API key '{name}' was updated",
+    values: { name },
+  });
+export const DELETE_MESSAGE = (name: string) =>
+  i18n.translate('xpack.enterpriseSearch.appSearch.tokens.deleted', {
+    defaultMessage: "API key '{name}' was deleted",
+    values: { name },
+  });
 
 export const SEARCH_DISPLAY = i18n.translate(
   'xpack.enterpriseSearch.appSearch.tokens.permissions.display.search',

diff --git a/...se_search/public/applications/app_search/components/credentials/credentials_logic.test.ts b/...se_search/public/applications/app_search/components/credentials/credentials_logic.test.ts
@@ -31,7 +31,7 @@ import { CredentialsLogic } from './credentials_logic';
 describe('CredentialsLogic', () => {
   const { mount } = new LogicMounter(CredentialsLogic);
   const { http } = mockHttpValues;
-  const { clearFlashMessages, setSuccessMessage, flashAPIErrors } = mockFlashMessageHelpers;
+  const { clearFlashMessages, flashSuccessToast, flashAPIErrors } = mockFlashMessageHelpers;
 
   const DEFAULT_VALUES = {
     activeApiToken: {
@@ -1110,7 +1110,7 @@ describe('CredentialsLogic', () => {
         await nextTick();
 
         expect(CredentialsLogic.actions.fetchCredentials).toHaveBeenCalled();
-        expect(setSuccessMessage).toHaveBeenCalled();
+        expect(flashSuccessToast).toHaveBeenCalled();
       });
 
       it('handles errors', async () => {
@@ -1142,7 +1142,7 @@ describe('CredentialsLogic', () => {
         });
         await nextTick();
         expect(CredentialsLogic.actions.onApiTokenCreateSuccess).toHaveBeenCalledWith(createdToken);
-        expect(setSuccessMessage).toHaveBeenCalled();
+        expect(flashSuccessToast).toHaveBeenCalled();
       });
 
       it('calls a PUT endpoint that updates the active token if it already exists', async () => {
@@ -1169,7 +1169,7 @@ describe('CredentialsLogic', () => {
         });
         await nextTick();
         expect(CredentialsLogic.actions.onApiTokenUpdateSuccess).toHaveBeenCalledWith(updatedToken);
-        expect(setSuccessMessage).toHaveBeenCalled();
+        expect(flashSuccessToast).toHaveBeenCalled();
       });
 
       it('handles errors', async () => {

diff --git a/...erprise_search/public/applications/app_search/components/credentials/credentials_logic.ts b/...erprise_search/public/applications/app_search/components/credentials/credentials_logic.ts
@@ -11,7 +11,7 @@ import { Meta } from '../../../../../common/types';
 import { DEFAULT_META } from '../../../shared/constants';
 import {
   clearFlashMessages,
-  setSuccessMessage,
+  flashSuccessToast,
   flashAPIErrors,
 } from '../../../shared/flash_messages';
 import { HttpLogic } from '../../../shared/http';
@@ -261,7 +261,7 @@ export const CredentialsLogic = kea<CredentialsLogicType>({
         await http.delete(`/api/app_search/credentials/${tokenName}`);
 
         actions.fetchCredentials();
-        setSuccessMessage(DELETE_MESSAGE);
+        flashSuccessToast(DELETE_MESSAGE(tokenName));
       } catch (e) {
         flashAPIErrors(e);
       }
@@ -289,11 +289,11 @@ export const CredentialsLogic = kea<CredentialsLogicType>({
         if (id) {
           const response = await http.put(`/api/app_search/credentials/${name}`, { body });
           actions.onApiTokenUpdateSuccess(response);
-          setSuccessMessage(UPDATE_MESSAGE);
+          flashSuccessToast(UPDATE_MESSAGE(name));
         } else {
           const response = await http.post('/api/app_search/credentials', { body });
           actions.onApiTokenCreateSuccess(response);
-          setSuccessMessage(CREATE_MESSAGE);
+          flashSuccessToast(CREATE_MESSAGE(name));
         }
       } catch (e) {
         flashAPIErrors(e);

diff --git a/...lugins/enterprise_search/public/applications/app_search/components/curations/constants.ts b/...lugins/enterprise_search/public/applications/app_search/components/curations/constants.ts
@@ -40,7 +40,7 @@ export const DELETE_MESSAGE = i18n.translate(
 );
 export const SUCCESS_MESSAGE = i18n.translate(
   'xpack.enterpriseSearch.appSearch.engine.curations.deleteSuccessMessage',
-  { defaultMessage: 'Successfully removed curation.' }
+  { defaultMessage: 'Your curation was deleted' }
 );
 export const RESTORE_CONFIRMATION = i18n.translate(
   'xpack.enterpriseSearch.appSearch.engine.curations.restoreConfirmation',

diff --git a/...rprise_search/public/applications/app_search/components/curations/curations_logic.test.ts b/...rprise_search/public/applications/app_search/components/curations/curations_logic.test.ts
@@ -23,7 +23,7 @@ describe('CurationsLogic', () => {
   const { mount } = new LogicMounter(CurationsLogic);
   const { http } = mockHttpValues;
   const { navigateToUrl } = mockKibanaValues;
-  const { clearFlashMessages, setSuccessMessage, flashAPIErrors } = mockFlashMessageHelpers;
+  const { clearFlashMessages, flashSuccessToast, flashAPIErrors } = mockFlashMessageHelpers;
 
   const MOCK_CURATIONS_RESPONSE = {
     meta: {
@@ -154,7 +154,7 @@ describe('CurationsLogic', () => {
           '/api/app_search/engines/some-engine/curations/some-curation-id'
         );
         expect(CurationsLogic.actions.loadCurations).toHaveBeenCalled();
-        expect(setSuccessMessage).toHaveBeenCalledWith('Successfully removed curation.');
+        expect(flashSuccessToast).toHaveBeenCalledWith('Your curation was deleted');
       });
 
       it('handles errors', async () => {

diff --git a/.../enterprise_search/public/applications/app_search/components/curations/curations_logic.ts b/.../enterprise_search/public/applications/app_search/components/curations/curations_logic.ts
@@ -11,7 +11,7 @@ import { Meta } from '../../../../../common/types';
 import { DEFAULT_META } from '../../../shared/constants';
 import {
   clearFlashMessages,
-  setSuccessMessage,
+  flashSuccessToast,
   flashAPIErrors,
 } from '../../../shared/flash_messages';
 import { HttpLogic } from '../../../shared/http';
@@ -95,7 +95,7 @@ export const CurationsLogic = kea<MakeLogicType<CurationsValues, CurationsAction
         try {
           await http.delete(`/api/app_search/engines/${engineName}/curations/${id}`);
           actions.loadCurations();
-          setSuccessMessage(SUCCESS_MESSAGE);
+          flashSuccessToast(SUCCESS_MESSAGE);
         } catch (e) {
           flashAPIErrors(e);
         }

diff --git a/..._search/public/applications/app_search/components/documents/document_detail_logic.test.ts b/..._search/public/applications/app_search/components/documents/document_detail_logic.test.ts
@@ -23,7 +23,7 @@ describe('DocumentDetailLogic', () => {
   const { mount } = new LogicMounter(DocumentDetailLogic);
   const { http } = mockHttpValues;
   const { navigateToUrl } = mockKibanaValues;
-  const { setQueuedSuccessMessage, flashAPIErrors } = mockFlashMessageHelpers;
+  const { flashSuccessToast, flashAPIErrors } = mockFlashMessageHelpers;
 
   const DEFAULT_VALUES = {
     dataLoading: true,
@@ -101,9 +101,9 @@ describe('DocumentDetailLogic', () => {
 
         expect(http.delete).toHaveBeenCalledWith('/api/app_search/engines/engine1/documents/1');
         await nextTick();
-        expect(setQueuedSuccessMessage).toHaveBeenCalledWith(
-          'Successfully marked document for deletion. It will be deleted momentarily.'
-        );
+        expect(flashSuccessToast).toHaveBeenCalledWith('Your document was marked for deletion', {
+          text: 'It will be deleted momentarily.',
+        });
         expect(navigateToUrl).toHaveBeenCalledWith('/engines/engine1/documents');
       });
 

diff --git a/...prise_search/public/applications/app_search/components/documents/document_detail_logic.ts b/...prise_search/public/applications/app_search/components/documents/document_detail_logic.ts
@@ -9,7 +9,7 @@ import { kea, MakeLogicType } from 'kea';
 
 import { i18n } from '@kbn/i18n';
 
-import { flashAPIErrors, setQueuedSuccessMessage } from '../../../shared/flash_messages';
+import { flashAPIErrors, flashSuccessToast } from '../../../shared/flash_messages';
 import { HttpLogic } from '../../../shared/http';
 import { KibanaLogic } from '../../../shared/kibana';
 
@@ -79,19 +79,20 @@ export const DocumentDetailLogic = kea<DocumentDetailLogicType>({
         'xpack.enterpriseSearch.appSearch.documentDetail.confirmDelete',
         { defaultMessage: 'Are you sure you want to delete this document?' }
       );
-      const DELETE_SUCCESS = i18n.translate(
+      const DELETE_SUCCESS_TITLE = i18n.translate(
         'xpack.enterpriseSearch.appSearch.documentDetail.deleteSuccess',
-        {
-          defaultMessage:
-            'Successfully marked document for deletion. It will be deleted momentarily.',
-        }
+        { defaultMessage: 'Your document was marked for deletion' }
+      );
+      const DELETE_SUCCESS_TEXT = i18n.translate(
+        'xpack.enterpriseSearch.appSearch.documentDetail.deleteSuccessDescription',
+        { defaultMessage: 'It will be deleted momentarily.' }
       );
 
       if (window.confirm(CONFIRM_DELETE)) {
         try {
           const { http } = HttpLogic.values;
           await http.delete(`/api/app_search/engines/${engineName}/documents/${documentId}`);
-          setQueuedSuccessMessage(DELETE_SUCCESS);
+          flashSuccessToast(DELETE_SUCCESS_TITLE, { text: DELETE_SUCCESS_TEXT });
           navigateToUrl(generateEnginePath(ENGINE_DOCUMENTS_PATH));
         } catch (e) {
           flashAPIErrors(e);

diff --git a/.../enterprise_search/public/applications/app_search/components/engine_creation/constants.ts b/.../enterprise_search/public/applications/app_search/components/engine_creation/constants.ts
@@ -65,12 +65,11 @@ export const ENGINE_CREATION_FORM_SUBMIT_BUTTON_LABEL = i18n.translate(
   }
 );
 
-export const ENGINE_CREATION_SUCCESS_MESSAGE = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.engineCreation.successMessage',
-  {
-    defaultMessage: 'Successfully created engine.',
-  }
-);
+export const ENGINE_CREATION_SUCCESS_MESSAGE = (name: string) =>
+  i18n.translate('xpack.enterpriseSearch.appSearch.engineCreation.successMessage', {
+    defaultMessage: "Engine '{name}' was created",
+    values: { name },
+  });
 
 export const SUPPORTED_LANGUAGES = [
   {

diff --git a/...h/public/applications/app_search/components/engine_creation/engine_creation_logic.test.ts b/...h/public/applications/app_search/components/engine_creation/engine_creation_logic.test.ts
@@ -20,7 +20,7 @@ describe('EngineCreationLogic', () => {
   const { mount } = new LogicMounter(EngineCreationLogic);
   const { http } = mockHttpValues;
   const { navigateToUrl } = mockKibanaValues;
-  const { setQueuedSuccessMessage, flashAPIErrors } = mockFlashMessageHelpers;
+  const { flashSuccessToast, flashAPIErrors } = mockFlashMessageHelpers;
 
   const DEFAULT_VALUES = {
     isLoading: false,
@@ -99,8 +99,8 @@ describe('EngineCreationLogic', () => {
         jest.clearAllMocks();
       });
 
-      it('should set a success message', () => {
-        expect(setQueuedSuccessMessage).toHaveBeenCalledWith('Successfully created engine.');
+      it('should show a success message', () => {
+        expect(flashSuccessToast).toHaveBeenCalledWith("Engine 'test' was created");
       });
 
       it('should navigate the user to the engine page', () => {

diff --git a/...search/public/applications/app_search/components/engine_creation/engine_creation_logic.ts b/...search/public/applications/app_search/components/engine_creation/engine_creation_logic.ts
@@ -9,7 +9,7 @@ import { generatePath } from 'react-router-dom';
 
 import { kea, MakeLogicType } from 'kea';
 
-import { flashAPIErrors, setQueuedSuccessMessage } from '../../../shared/flash_messages';
+import { flashAPIErrors, flashSuccessToast } from '../../../shared/flash_messages';
 import { HttpLogic } from '../../../shared/http';
 import { KibanaLogic } from '../../../shared/kibana';
 import { ENGINE_PATH } from '../../routes';
@@ -85,7 +85,7 @@ export const EngineCreationLogic = kea<MakeLogicType<EngineCreationValues, Engin
       const { navigateToUrl } = KibanaLogic.values;
       const enginePath = generatePath(ENGINE_PATH, { engineName: name });
 
-      setQueuedSuccessMessage(ENGINE_CREATION_SUCCESS_MESSAGE);
+      flashSuccessToast(ENGINE_CREATION_SUCCESS_MESSAGE(name));
       navigateToUrl(enginePath);
     },
   }),

diff --git a/...plugins/enterprise_search/public/applications/app_search/components/engines/constants.tsx b/...plugins/enterprise_search/public/applications/app_search/components/engines/constants.tsx
@@ -71,7 +71,7 @@ export const DELETE_ENGINE_MESSAGE = (engineName: string) =>
   i18n.translate(
     'xpack.enterpriseSearch.appSearch.enginesOverview.table.action.delete.successMessage',
     {
-      defaultMessage: 'Successfully deleted "{engineName}"',
+      defaultMessage: "Engine '{engineName}' was deleted",
       values: {
         engineName,
       },

diff --git a/...enterprise_search/public/applications/app_search/components/engines/engines_logic.test.ts b/...enterprise_search/public/applications/app_search/components/engines/engines_logic.test.ts
@@ -22,7 +22,7 @@ import { EnginesLogic } from './';
 describe('EnginesLogic', () => {
   const { mount } = new LogicMounter(EnginesLogic);
   const { http } = mockHttpValues;
-  const { flashAPIErrors, setSuccessMessage } = mockFlashMessageHelpers;
+  const { flashAPIErrors, flashSuccessToast } = mockFlashMessageHelpers;
 
   const DEFAULT_VALUES = {
     dataLoading: true,
@@ -199,10 +199,10 @@ describe('EnginesLogic', () => {
         mount();
       });
 
-      it('should call setSuccessMessage', () => {
+      it('should call flashSuccessToast', () => {
         EnginesLogic.actions.onDeleteEngineSuccess(MOCK_ENGINE);
 
-        expect(setSuccessMessage).toHaveBeenCalled();
+        expect(flashSuccessToast).toHaveBeenCalled();
       });
 
       it('should call loadEngines if engine.type === default', () => {

diff --git a/...gins/enterprise_search/public/applications/app_search/components/engines/engines_logic.ts b/...gins/enterprise_search/public/applications/app_search/components/engines/engines_logic.ts
@@ -9,7 +9,7 @@ import { kea, MakeLogicType } from 'kea';
 
 import { Meta } from '../../../../../common/types';
 import { DEFAULT_META } from '../../../shared/constants';
-import { flashAPIErrors, setSuccessMessage } from '../../../shared/flash_messages';
+import { flashAPIErrors, flashSuccessToast } from '../../../shared/flash_messages';
 import { HttpLogic } from '../../../shared/http';
 import { updateMetaPageIndex } from '../../../shared/table_pagination';
 
@@ -141,7 +141,7 @@ export const EnginesLogic = kea<MakeLogicType<EnginesValues, EnginesActions>>({
       actions.onMetaEnginesLoad(response);
     },
     onDeleteEngineSuccess: async ({ engine }) => {
-      setSuccessMessage(DELETE_ENGINE_MESSAGE(engine.name));
+      flashSuccessToast(DELETE_ENGINE_MESSAGE(engine.name));
       if ([EngineTypes.default, EngineTypes.indexed].includes(engine.type)) {
         actions.loadEngines();
       } else if (engine.type === EngineTypes.meta) {

diff --git a/...prise_search/public/applications/app_search/components/meta_engine_creation/constants.tsx b/...prise_search/public/applications/app_search/components/meta_engine_creation/constants.tsx
@@ -111,9 +111,8 @@ export const META_ENGINE_CREATION_FORM_MAX_SOURCE_ENGINES_WARNING_TITLE = (
     }
   );
 
-export const META_ENGINE_CREATION_SUCCESS_MESSAGE = i18n.translate(
-  'xpack.enterpriseSearch.appSearch.metaEngineCreation.successMessage',
-  {
-    defaultMessage: 'Successfully created meta engine.',
-  }
-);
+export const META_ENGINE_CREATION_SUCCESS_MESSAGE = (name: string) =>
+  i18n.translate('xpack.enterpriseSearch.appSearch.metaEngineCreation.successMessage', {
+    defaultMessage: "Meta engine '{name}' was created",
+    values: { name },
+  });
diff --git a/...pplications/app_search/components/meta_engine_creation/meta_engine_creation_logic.test.ts b/...pplications/app_search/components/meta_engine_creation/meta_engine_creation_logic.test.ts
@@ -20,7 +20,7 @@ describe('MetaEngineCreationLogic', () => {
   const { mount } = new LogicMounter(MetaEngineCreationLogic);
   const { http } = mockHttpValues;
   const { navigateToUrl } = mockKibanaValues;
-  const { setQueuedSuccessMessage, flashAPIErrors } = mockFlashMessageHelpers;
+  const { flashSuccessToast, flashAPIErrors } = mockFlashMessageHelpers;
 
   const DEFAULT_VALUES = {
     isLoading: false,
@@ -152,8 +152,8 @@ describe('MetaEngineCreationLogic', () => {
         MetaEngineCreationLogic.actions.onEngineCreationSuccess();
       });
 
-      it('should set a success message', () => {
-        expect(setQueuedSuccessMessage).toHaveBeenCalledWith('Successfully created meta engine.');
+      it('should show a success message', () => {
+        expect(flashSuccessToast).toHaveBeenCalledWith("Meta engine 'test' was created");
       });
 
       it('should navigate the user to the engine page', () => {