Persist show internal topics switch state (#1832)

* persist show internal topics switch state

* minor improvements in topics list tests

* prevent duplication in topic list test file

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

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

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