[Semantic Text UI] Banner dismissal is not persisted after a page reload (#184052)

The banner is displayed even after a semantic field is added and the
dismissal is not persisted after a page reload.

### After Change


41c3b755-aeaa-45b5-88f0-c8286756d990

### How to enable semantic text locally for testing these changes
Set isSemanticTextEnabled = true in this
[location](3890189eee/x-pack/plugins/index_management/public/application/sections/home/index_list/details_page/details_page_mappings_content.tsx (L72))
This commit is contained in:
Saikat Sarkar 2024-05-23 08:55:40 -06:00 committed by GitHub
parent f5b93d500c
commit 2c7efb4464
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
2 changed files with 31 additions and 7 deletions

View file

@ -10,13 +10,31 @@ import { act } from 'react-dom/test-utils';
import { SemanticTextBanner } from '../../../public/application/sections/home/index_list/details_page/semantic_text_banner';
describe('When semantic_text is enabled', () => {
const setup = registerTestBed(SemanticTextBanner, {
defaultProps: { isSemanticTextEnabled: true },
memoryRouter: { wrapComponent: false },
let exists: any;
let find: any;
let wrapper: any;
let getItemSpy: jest.SpyInstance;
let setItemSpy: jest.SpyInstance;
beforeEach(() => {
getItemSpy = jest.spyOn(Storage.prototype, 'getItem');
setItemSpy = jest.spyOn(Storage.prototype, 'setItem');
const setup = registerTestBed(SemanticTextBanner, {
defaultProps: { isSemanticTextEnabled: true },
memoryRouter: { wrapComponent: false },
});
const testBed = setup();
({ exists, find } = testBed);
wrapper = testBed.component;
});
afterEach(() => {
getItemSpy.mockRestore();
setItemSpy.mockRestore();
});
const { exists, find } = setup();
it('should display the banner', () => {
expect(getItemSpy).toHaveBeenCalledWith('semantic-text-banner-display');
expect(exists('indexDetailsMappingsSemanticTextBanner')).toBe(true);
});
@ -30,7 +48,11 @@ describe('When semantic_text is enabled', () => {
await act(async () => {
find('SemanticTextBannerDismissButton').simulate('click');
});
expect(exists('indexDetailsMappingsSemanticTextBanner')).toBe(true);
wrapper.update();
expect(setItemSpy).toHaveBeenCalledWith('semantic-text-banner-display', 'false');
expect(exists('indexDetailsMappingsSemanticTextBanner')).toBe(false);
});
});

View file

@ -6,7 +6,8 @@
*/
import { EuiButtonEmpty, EuiFlexGroup, EuiFlexItem, EuiPanel, EuiText } from '@elastic/eui';
import { FormattedMessage } from '@kbn/i18n-react';
import React, { useState } from 'react';
import React from 'react';
import useLocalStorage from 'react-use/lib/useLocalStorage';
interface SemanticTextBannerProps {
isSemanticTextEnabled: boolean;
@ -14,7 +15,8 @@ interface SemanticTextBannerProps {
export function SemanticTextBanner({ isSemanticTextEnabled }: SemanticTextBannerProps) {
const [isSemanticTextBannerDisplayable, setIsSemanticTextBannerDisplayable] =
useState<boolean>(true);
useLocalStorage<boolean>('semantic-text-banner-display', true);
return isSemanticTextBannerDisplayable && isSemanticTextEnabled ? (
<>
<EuiPanel color="success" data-test-subj="indexDetailsMappingsSemanticTextBanner">