Topics page refactoring (#251)

* Split thunks on files. Refactoring

* [CHORE] Refactor Topics section

kafka-ui-react-app/src/components/Cluster/Cluster.tsx

@@ -2,7 +2,7 @@ import React from 'react';
 import { useSelector } from 'react-redux';
 import { Switch, Route, Redirect, useParams } from 'react-router-dom';
 import BrokersContainer from 'components/Brokers/BrokersContainer';
-import TopicsContainer from 'components/Topics/TopicsContainer';
+import Topics from 'components/Topics/Topics';
 import ConsumersGroupsContainer from 'components/ConsumerGroups/ConsumersGroupsContainer';
 import Schemas from 'components/Schemas/Schemas';
 import { getClustersReadonlyStatus } from 'redux/reducers/clusters/selectors';
@@ -18,10 +18,7 @@ const Cluster: React.FC = () => {
           path="/ui/clusters/:clusterName/brokers"
           component={BrokersContainer}
         />
-        <Route
-          path="/ui/clusters/:clusterName/topics"
-          component={TopicsContainer}
-        />
+        <Route path="/ui/clusters/:clusterName/topics" component={Topics} />
         <Route
           path="/ui/clusters/:clusterName/consumer-groups"
           component={ConsumersGroupsContainer}

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

@@ -1,28 +1,46 @@
 import React from 'react';
 import { TopicWithDetailedInfo, ClusterName } from 'redux/interfaces';
 import Breadcrumb from 'components/common/Breadcrumb/Breadcrumb';
-import { NavLink } from 'react-router-dom';
+import { NavLink, useParams } from 'react-router-dom';
 import { clusterTopicNewPath } from 'lib/paths';
+import usePagination from 'lib/hooks/usePagination';
+import { FetchTopicsListParams } from 'redux/actions';
 import ClusterContext from 'components/contexts/ClusterContext';
+import PageLoader from 'components/common/PageLoader/PageLoader';
 import ListItem from './ListItem';
 
 interface Props {
-  clusterName: ClusterName;
+  areTopicsFetching: boolean;
   topics: TopicWithDetailedInfo[];
   externalTopics: TopicWithDetailedInfo[];
+  fetchTopicsList(props: FetchTopicsListParams): void;
 }
 
-const List: React.FC<Props> = ({ clusterName, topics, externalTopics }) => {
+const List: React.FC<Props> = ({
+  areTopicsFetching,
+  topics,
+  externalTopics,
+  fetchTopicsList,
+}) => {
+  const { isReadOnly } = React.useContext(ClusterContext);
+  const { clusterName } = useParams<{ clusterName: ClusterName }>();
+  const { page, perPage } = usePagination();
+
+  React.useEffect(() => {
+    fetchTopicsList({ clusterName, page, perPage });
+  }, [fetchTopicsList, clusterName, page, perPage]);
+
   const [showInternal, setShowInternal] = React.useState<boolean>(true);
 
-  const handleSwitch = () => setShowInternal(!showInternal);
-  const { isReadOnly } = React.useContext(ClusterContext);
+  const handleSwitch = React.useCallback(() => {
+    setShowInternal(!showInternal);
+  }, [showInternal]);
+
   const items = showInternal ? topics : externalTopics;
 
   return (
     <div className="section">
-      <Breadcrumb>All Topics</Breadcrumb>
-
+      <Breadcrumb>{showInternal ? `All Topics` : `External Topics`}</Breadcrumb>
       <div className="box">
         <div className="level">
           <div className="level-item level-left">
@@ -50,23 +68,33 @@ const List: React.FC<Props> = ({ clusterName, topics, externalTopics }) => {
           </div>
         </div>
       </div>
-      <div className="box">
-        <table className="table is-striped is-fullwidth">
-          <thead>
-            <tr>
-              <th>Topic Name</th>
-              <th>Total Partitions</th>
-              <th>Out of sync replicas</th>
-              <th>Type</th>
-            </tr>
-          </thead>
-          <tbody>
-            {items.map((topic) => (
-              <ListItem key={topic.id} topic={topic} />
-            ))}
-          </tbody>
-        </table>
-      </div>
+      {areTopicsFetching ? (
+        <PageLoader />
+      ) : (
+        <div className="box">
+          <table className="table is-striped is-fullwidth">
+            <thead>
+              <tr>
+                <th>Topic Name</th>
+                <th>Total Partitions</th>
+                <th>Out of sync replicas</th>
+                <th>Type</th>
+              </tr>
+            </thead>
+            <tbody>
+              {items.length > 0 ? (
+                items.map((topic) => (
+                  <ListItem key={topic.name} topic={topic} />
+                ))
+              ) : (
+                <tr>
+                  <td colSpan={10}>No topics found</td>
+                </tr>
+              )}
+            </tbody>
+          </table>
+        </div>
+      )}
     </div>
   );
 };

kafka-ui-react-app/src/components/Topics/List/ListContainer.ts

@@ -1,29 +1,21 @@
 import { connect } from 'react-redux';
-import { ClusterName, RootState } from 'redux/interfaces';
+import { RootState } from 'redux/interfaces';
+import { fetchTopicsList } from 'redux/actions';
 import {
   getTopicList,
   getExternalTopicList,
+  getAreTopicsFetching,
 } from 'redux/reducers/topics/selectors';
-import { withRouter, RouteComponentProps } from 'react-router-dom';
 import List from './List';
 
-interface RouteProps {
-  clusterName: ClusterName;
-}
-
-type OwnProps = RouteComponentProps<RouteProps>;
-
-const mapStateToProps = (
-  state: RootState,
-  {
-    match: {
-      params: { clusterName },
-    },
-  }: OwnProps
-) => ({
-  clusterName,
+const mapStateToProps = (state: RootState) => ({
+  areTopicsFetching: getAreTopicsFetching(state),
   topics: getTopicList(state),
   externalTopics: getExternalTopicList(state),
 });
 
-export default withRouter(connect(mapStateToProps)(List));
+const mapDispatchToProps = {
+  fetchTopicsList,
+};
+
+export default connect(mapStateToProps, mapDispatchToProps)(List);

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

@@ -1,22 +1,43 @@
 import { mount } from 'enzyme';
 import React from 'react';
+import { StaticRouter } from 'react-router-dom';
 import ClusterContext from 'components/contexts/ClusterContext';
 import List from '../List';
 
 describe('List', () => {
   describe('when it has readonly flag', () => {
     it('does not render the Add a Topic button', () => {
-      const props = {
-        clusterName: 'Cluster',
-        topics: [],
-        externalTopics: [],
-      };
       const component = mount(
-        <ClusterContext.Provider value={{ isReadOnly: true }}>
-          <List {...props} />
-        </ClusterContext.Provider>
+        <StaticRouter>
+          <ClusterContext.Provider value={{ isReadOnly: true }}>
+            <List
+              areTopicsFetching={false}
+              topics={[]}
+              externalTopics={[]}
+              fetchTopicsList={jest.fn()}
+            />
+          </ClusterContext.Provider>
+        </StaticRouter>
       );
       expect(component.exists('NavLink')).toBeFalsy();
     });
   });
+
+  describe('when it does not have readonly flag', () => {
+    it('renders the Add a Topic button', () => {
+      const component = mount(
+        <StaticRouter>
+          <ClusterContext.Provider value={{ isReadOnly: false }}>
+            <List
+              areTopicsFetching={false}
+              topics={[]}
+              externalTopics={[]}
+              fetchTopicsList={jest.fn()}
+            />
+          </ClusterContext.Provider>
+        </StaticRouter>
+      );
+      expect(component.exists('NavLink')).toBeTruthy();
+    });
+  });
 });