0ct0pu5/kafka-ui
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Persist show internal topics switch state (#1832)

Browse source 
* persist show internal topics switch state

* minor improvements in topics list tests

* prevent duplication in topic list test file
This commit is contained in:
Arsen Simonyan 2022-05-02 13:28:23 +04:00 • committed by Arsen Simonyan
parent b296c1a803
commit 8413998974
2 changed files with 36 additions and 4 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
kafka-ui-react-app/src/components/Topics/List/List.tsx
View file

@ -82,7 +82,9 @@ const List: React.FC<TopicsListProps> = ({
React.useContext(ClusterContext);
const { clusterName } = useParams<{ clusterName: ClusterName }>();
const { page, perPage, pathname } = usePagination();
const [showInternal, setShowInternal] = React.useState<boolean>(true);
const [showInternal, setShowInternal] = React.useState<boolean>(
!localStorage.getItem('hideInternalTopics') && true
);
const [cachedPage, setCachedPage] = React.useState<number | null>(null);
const history = useHistory();
@ -141,6 +143,12 @@ const List: React.FC<TopicsListProps> = ({
};
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]);

30
kafka-ui-react-app/src/components/Topics/List/__tests__/List.spec.tsx
View file

@ -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');