diff --git a/kafka-ui-react-app/src/components/Topics/List/List.tsx b/kafka-ui-react-app/src/components/Topics/List/List.tsx index dc22ac81042..394fa2cb3d3 100644 --- a/kafka-ui-react-app/src/components/Topics/List/List.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/List.tsx @@ -81,7 +81,9 @@ const List: React.FC = ({ React.useContext(ClusterContext); const { clusterName } = useParams<{ clusterName: ClusterName }>(); const { page, perPage, pathname } = usePagination(); - const [showInternal, setShowInternal] = React.useState(true); + const [showInternal, setShowInternal] = React.useState( + !localStorage.getItem('hideInternalTopics') && true + ); const [cachedPage, setCachedPage] = React.useState(null); const history = useHistory(); @@ -125,6 +127,12 @@ const List: React.FC = ({ ); const handleSwitch = React.useCallback(() => { + if (showInternal) { + localStorage.setItem('hideInternalTopics', 'true'); + } else { + localStorage.removeItem('hideInternalTopics'); + } + setShowInternal(!showInternal); history.push(`${pathname}?page=1&perPage=${perPage || PER_PAGE}`); }, [history, pathname, perPage, showInternal]); diff --git a/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx b/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx index 0bdf6e16cc2..039be9ad65f 100644 --- a/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx +++ b/kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx @@ -76,11 +76,13 @@ describe('List', () => { describe('when it does not have readonly flag', () => { let fetchTopicsList = jest.fn(); let component: ReactWrapper; + const internalTopicsSwitchName = 'input[name="ShowInternalTopics"]'; jest.useFakeTimers(); beforeEach(() => { fetchTopicsList = jest.fn(); + component = mountComponentWithProviders( { isReadOnly: false }, { fetchTopicsList } @@ -100,13 +102,35 @@ describe('List', () => { expect(setTopicsSearch).toHaveBeenCalledWith(query); }); + it('show internal toggle state should be true if user has not used it yet', () => { + const toggle = component.find(internalTopicsSwitchName); + const { checked } = toggle.props(); + + expect(checked).toEqual(true); + }); + + it('show internal toggle state should match user preference', () => { + localStorage.setItem('hideInternalTopics', 'true'); + component = mountComponentWithProviders( + { isReadOnly: false }, + { fetchTopicsList } + ); + + const toggle = component.find(internalTopicsSwitchName); + const { checked } = toggle.props(); + + expect(checked).toEqual(false); + }); + it('should refetch topics on show internal toggle change', () => { jest.clearAllMocks(); - const toggle = component.find('input[name="ShowInternalTopics"]'); + const toggle = component.find(internalTopicsSwitchName); + const { checked } = toggle.props(); toggle.simulate('change'); + expect(fetchTopicsList).toHaveBeenLastCalledWith({ search: '', - showInternal: false, + showInternal: !checked, sortOrder: SortOrder.ASC, }); }); @@ -120,7 +144,7 @@ describe('List', () => { mockedHistory ); - const toggle = component.find('input[name="ShowInternalTopics"]'); + const toggle = component.find(internalTopicsSwitchName); toggle.simulate('change'); expect(mockedHistory.push).toHaveBeenCalledWith('/?page=1&perPage=25');