fix: Refactor to Topic panel

 - Addresses initial review comments.

Contributes to: #124

Signed-off-by: Andrew Borley <[email protected]>

Author: ajborley

client/Bootstrap/index.tsx

@@ -13,15 +13,17 @@ import {
   FeatureFlag,
   LoggingProvider,
 } from 'Contexts';
-import { Home } from 'Panels/Home';
+import { Home, Topics } from 'Panels';
 
 init(); //Bootstrap i18next support
 ReactDOM.render(
   <ApolloProvider client={apolloClient}>
     <ConfigFeatureFlagProvider>
       <LoggingProvider>
         <FeatureFlag flag={'client.Pages.PlaceholderHome'}>
-          <Home />
+          <Home>
+            <Topics />
+          </Home>
         </FeatureFlag>
       </LoggingProvider>
     </ConfigFeatureFlagProvider>

client/Contexts/README.md

@@ -6,7 +6,7 @@ It is expected that when used in production Context Provider(s) will be used by
 
 ## Test approach
 
-Elements should be tested in a functional manor. See [Test Driven Development](../../docs/Test.md#style-of-test).
+Elements should be tested in a functional manner. See [Test Driven Development](../../docs/Test.md#style-of-test).
 
 ## Expected files
 

client/Elements/README.md

@@ -4,7 +4,7 @@
 
 ## Test approach
 
-Bootstrap should be tested in a behavioural manor. See [Behavioural Driven Development](../../docs/Test.md#style-of-test).
+Bootstrap should be tested in a behavioural manner. See [Behavioural Driven Development](../../docs/Test.md#style-of-test).
 
 ## Expected files
 

client/Groups/README.md

@@ -4,7 +4,7 @@
 
 ## Test approach
 
-Bootstrap should be tested in a behavioural manor. See [Behavioural Driven Development](../../docs/Test.md#style-of-test).
+Bootstrap should be tested in a behavioural manner. See [Behavioural Driven Development](../../docs/Test.md#style-of-test).
 
 ## Expected files
 

client/Hooks/README.md

@@ -4,7 +4,7 @@ This directory contains all re-usable custom [React Hooks](https://reactjs.org/d
 
 ## Test approach
 
-Elements should be tested in a functional manor. See [Test Driven Development](../../docs/Test.md#style-of-test).
+Elements should be tested in a functional manner. See [Test Driven Development](../../docs/Test.md#style-of-test).
 
 ## Expected files
 

client/Models/README.md

@@ -5,12 +5,7 @@
 import { Given, When, Then, Fusion } from 'jest-cucumber-fusion';
 import { RenderResult } from '@testing-library/react';
 import merge from 'lodash.merge';
-import {
-  renderWithCustomConfigFeatureFlagContext,
-  withApolloProviderReturning,
-  apolloMockResponse,
-} from 'utils/test';
-import { mockGetTopicsRequests } from 'Models';
+import { renderWithCustomConfigFeatureFlagContext } from 'utils/test';
 import { Home } from '.';
 import React, { ReactElement } from 'react';
 
@@ -36,10 +31,7 @@ Given('a Home component', () => {
 When('it is rendered', () => {
   renderResult = renderWithCustomConfigFeatureFlagContext(
     coreConfigFromContext,
-    withApolloProviderReturning(
-      [mockGetTopicsRequests.successRequest],
-      component
-    )
+    component
   );
   showVersionSet = true;
 });
@@ -55,10 +47,7 @@ When('it is rendered with no version', () => {
         },
       },
     }),
-    withApolloProviderReturning(
-      [mockGetTopicsRequests.successRequest],
-      component
-    )
+    component
   );
   showVersionSet = false;
 });
@@ -70,13 +59,6 @@ Then('it should display the expected text', async () => {
   showVersionSet
     ? expect(getByText(versionString)).toBeInTheDocument()
     : expect(queryByText(versionString)).not.toBeInTheDocument();
-
-  const loadingTopicsString = 'Loading...';
-  expect(getByText(loadingTopicsString)).toBeInTheDocument();
-
-  await apolloMockResponse();
-  expect(queryByText(loadingTopicsString)).not.toBeInTheDocument();
-  expect(getByText('Number of topics: 3')).toBeInTheDocument();
 });
 
 Fusion('Home.feature');

client/Models/useTopics/Hook.ts

@@ -7,7 +7,6 @@ import get from 'lodash.get';
 import image from 'Images/logo.png';
 import './style.scss';
 import { useConfigFeatureFlag, useLogger } from 'Hooks';
-import { useTopics } from 'Models';
 
 const Home: FunctionComponent = ({ children }) => {
   const { client, featureFlags, isComplete } = useConfigFeatureFlag();
@@ -18,19 +17,11 @@ const Home: FunctionComponent = ({ children }) => {
   const { debug } = useLogger('Home');
   debug(`Client version to display: ${version}`);
 
-  const { useGetTopics } = useTopics();
-  const { data, loading } = useGetTopics();
-
   return (
     <div className='home'>
       <img src={image} alt='Strimzi logo' />
       <p>Welcome to the Strimzi UI</p>
       {showVersion && isComplete && <p>{`Version: ${version}`}</p>}
-      {loading || !data ? (
-        <p>Loading...</p>
-      ) : (
-        <p>{`Number of topics: ${data.topics.length}`}</p>
-      )}
       {children}
     </div>
   );

client/Models/useTopics/README.md

@@ -4,7 +4,7 @@ A `Panel` component represents a top level element of a UI - the primary/signifi
 
 ## Test approach
 
-Bootstrap should be tested in a behavioural manor. See [Behavioural Driven Development](../../docs/Test.md#style-of-test).
+Bootstrap should be tested in a behavioural manner. See [Behavioural Driven Development](../../docs/Test.md#style-of-test).
 
 ## Expected files
 

client/Models/useTopics/useTopics.spec.tsx

@@ -0,0 +1,41 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import { useState, useEffect } from 'react';
+import { GET_TOPICS } from 'Queries/Topics';
+import { useQuery } from '@apollo/client';
+import {
+  useTopicsModelType,
+  useGetTopicsResultType,
+} from './useTopicsModel.types';
+
+export const useTopicsModel = (): useTopicsModelType => {
+  const useGetTopics = (filter?: string): useGetTopicsResultType => {
+    // Use debounce to ensure char-by-char changes to the filter string do not cause floods of useQuery network calls
+    const debouncedFilter = useDebounce(filter, 500);
+    // Caching in useQuery means that new network calls are only made when the debouncedFilter value changes
+    return useQuery(GET_TOPICS, { variables: { filter: debouncedFilter } });
+  };
+
+  return {
+    useGetTopics,
+  };
+};
+
+// Adapted from https://usehooks.com/useDebounce/
+const useDebounce = <T>(value: T, delay: number): T => {
+  // State and setters for debounced value
+  const [debouncedValue, setDebouncedValue] = useState(value);
+  useEffect(
+    () => {
+      // Update debounced value after delay
+      const handler = setTimeout(() => setDebouncedValue(value), delay);
+
+      // Cancel the timeout if value changes (also on delay change or unmount)
+      return () => clearTimeout(handler);
+    },
+    [value, delay] // Only re-call effect if value or delay changes
+  );
+  return debouncedValue;
+};

client/Panels/Home/Home.steps.tsx

@@ -0,0 +1,3 @@
+# Topics
+
+The `Topics` panel retrieves and displays the list of Kafka topics for a cluster.

client/Panels/Home/Home.tsx

@@ -0,0 +1,15 @@
+
+# Copyright Strimzi authors.
+# License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+Feature: Topics panel
+
+  Scenario: Seeing all available topics:
+    Given a Topics panel component
+    When it is rendered
+    Then I see all topics
+
+  Scenario: Viewing a specific topic (when it exists in the cluster):
+    Given a Topics panel component
+    When it is rendered
+    And I filter for topic 'testtopic1'
+    Then I see topic 'testtopic1' in the topic list

client/Panels/README.md

@@ -0,0 +1,87 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import {
+  And,
+  Given,
+  When,
+  Then,
+  Fusion,
+  Before,
+  After,
+} from 'jest-cucumber-fusion';
+import {
+  fireEvent,
+  render,
+  RenderResult,
+  waitFor,
+} from '@testing-library/react';
+import { Topics } from '.';
+import React, { ReactElement } from 'react';
+import { withApolloProviderReturning } from 'utils/test';
+import {
+  mockGetTopicsRequests,
+  mockGetTopicsResponses,
+} from './useTopicsModel.assets';
+
+let renderResult: RenderResult;
+let component: ReactElement;
+
+Before(() => {
+  jest.useFakeTimers();
+});
+
+After(() => {
+  jest.useRealTimers();
+});
+
+Given('a Topics panel component', () => {
+  component = <Topics />;
+});
+
+When('it is rendered', () => {
+  renderResult = render(
+    withApolloProviderReturning(
+      [
+        mockGetTopicsRequests.successRequest,
+        mockGetTopicsRequests.successFilteredRequest,
+      ],
+      component
+    )
+  );
+  jest.runAllTimers();
+});
+
+And(/^I filter for topic '(.+)'$/, async (filter) => {
+  fireEvent.change(renderResult.getByPlaceholderText('filter'), {
+    target: { value: filter },
+  });
+  await waitFor(() => {
+    jest.runAllTimers();
+  });
+});
+
+Then('I see all topics', async () => {
+  const { findByText } = renderResult;
+  expect(
+    await findByText(JSON.stringify(mockGetTopicsResponses.successResponse), {
+      exact: false,
+    })
+  ).toBeInTheDocument();
+});
+
+Then(/^I see topic '(.+)' in the topic list$/, async (topicName) => {
+  const { findByText } = renderResult;
+  expect(
+    await findByText(
+      JSON.stringify(mockGetTopicsResponses.successFilteredResponse),
+      { exact: false }
+    )
+  ).toBeInTheDocument();
+  expect(
+    await findByText(topicName as string, { exact: false })
+  ).toBeInTheDocument();
+});
+
+Fusion('Topics.feature');