feat: Add useTopics model hook and query for topics listing

client/Bootstrap/index.tsx

@@ -8,17 +8,22 @@ import { init } from 'i18n';
 import { ApolloProvider } from '@apollo/client';
 
 import { apolloClient } from 'Bootstrap/GraphQLClient';
-import { ConfigFeatureFlagProvider, FeatureFlag } from 'Contexts';
-import { Home } from 'Panels/Home';
-import { LoggingProvider } from 'Contexts';
+import {
+  ConfigFeatureFlagProvider,
+  FeatureFlag,
+  LoggingProvider,
+} from 'Contexts';
+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/Panels/Home/Home.steps.tsx

@@ -52,7 +52,7 @@ When('it is rendered with no version', () => {
   showVersionSet = false;
 });
 
-Then('it should display the expected text', () => {
+Then('it should display the expected text', async () => {
   const { getByText, queryByText } = renderResult;
   expect(getByText('Welcome to the Strimzi UI')).toBeInTheDocument();
   const versionString = `Version: ${coreConfigFromContext.client.about.version}`;

client/Panels/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/Panels/Topics/Model.ts

@@ -0,0 +1,38 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import { ChangeEvent, useState, useCallback } from 'react';
+import { GET_TOPICS } from 'Queries/Topics';
+import { useQuery } from '@apollo/client';
+import { useTopicsModelType, topicsType } from './useTopicsModel.types';
+import debounce from 'lodash.debounce';
+
+const onChangeEvent = (
+  evt: ChangeEvent<HTMLInputElement>,
+  callWithValue: (value: string) => void
+) => callWithValue(evt.target.value);
+
+export const useTopicsModel = (): useTopicsModelType => {
+  const [filter, setTopicsFilter] = useState();
+  const debouncedUpdateTopicsFilter = useCallback(
+    debounce(setTopicsFilter, 500),
+    []
+  );
+  const { data, loading, error } = useQuery<topicsType>(GET_TOPICS, {
+    variables: { filter },
+  });
+
+  const model = {
+    filter,
+    topics: data ? data.topics : [],
+    error,
+    loading,
+  };
+
+  return {
+    model,
+    updateTopicsFilter: (evt) =>
+      onChangeEvent(evt, debouncedUpdateTopicsFilter),
+  };
+};

client/Panels/Topics/README.md

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

client/Panels/Topics/Topics.feature

@@ -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/Topics/Topics.steps.tsx

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

client/Panels/Topics/View.carbon.tsx

@@ -0,0 +1,30 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import React, { FunctionComponent } from 'react';
+import { useTopicsModel } from './Model';
+
+/**
+ * Placeholder Topics panel FC.
+ */
+const Topics: FunctionComponent = ({ children }) => {
+  const { model, updateTopicsFilter } = useTopicsModel();
+
+  let topics: JSX.Element;
+  if (model.loading) {
+    topics = <p>Loading...</p>;
+  } else {
+    topics = <p>{`Topics retrieved: ${JSON.stringify(model.topics)}`}</p>;
+  }
+
+  return (
+    <div className='topics'>
+      <input placeholder='filter' onChange={updateTopicsFilter} />
+      {topics}
+      {children}
+    </div>
+  );
+};
+
+export { Topics };

client/Panels/Topics/index.ts

@@ -0,0 +1,5 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+export * from './View.carbon';

client/Panels/Topics/useTopicsModel.assets.ts

@@ -0,0 +1,39 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import { generateMockDataResponseForGQLRequest } from 'utils/test/withApollo/withApollo.util';
+import { topicType } from './useTopicsModel.types';
+import { GET_TOPICS } from 'Queries/Topics';
+
+const successResponse: topicType[] = [
+  { name: 'testtopic1', partitions: 1, replicas: 1 },
+  { name: 'testtopic2', partitions: 2, replicas: 2 },
+  { name: 'testtopic3', partitions: 3, replicas: 3 },
+];
+
+const successFilteredResponse: topicType[] = [
+  { name: 'testtopic1', partitions: 1, replicas: 1 },
+];
+
+export const mockGetTopicsResponses = {
+  successResponse,
+  successFilteredResponse,
+};
+
+const successRequest = generateMockDataResponseForGQLRequest(
+  GET_TOPICS,
+  { topics: successResponse },
+  { variables: { filter: undefined } }
+);
+
+const successFilteredRequest = generateMockDataResponseForGQLRequest(
+  GET_TOPICS,
+  { topics: successFilteredResponse },
+  { variables: { filter: 'testtopic1' } }
+);
+
+export const mockGetTopicsRequests = {
+  successRequest,
+  successFilteredRequest,
+};

client/Panels/Topics/useTopicsModel.spec.tsx

@@ -0,0 +1,45 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import React from 'react';
+import { renderHook, act } from '@testing-library/react-hooks';
+import { withApolloProviderReturning } from 'utils/test';
+import { useTopicsModel } from './Model';
+import {
+  mockGetTopicsRequests,
+  mockGetTopicsResponses,
+} from './useTopicsModel.assets';
+
+describe('`useTopicsModel` hook', () => {
+  beforeEach(() => {
+    jest.useFakeTimers();
+  });
+
+  afterEach(() => {
+    jest.useRealTimers();
+  });
+
+  it('returns the expected query content', async () => {
+    const { result, rerender } = renderHook(useTopicsModel, {
+      wrapper: ({ children }) =>
+        withApolloProviderReturning(
+          [mockGetTopicsRequests.successRequest],
+          <React.Fragment>{children}</React.Fragment>
+        ),
+    });
+
+    expect(result.current.model.loading).toBe(true);
+    expect(result.current.model.topics).toEqual([]);
+
+    await act(async () => {
+      jest.runAllTimers();
+    });
+    rerender();
+
+    expect(result.current.model.topics).toEqual(
+      mockGetTopicsResponses.successResponse
+    );
+    expect(result.current.model.loading).toBe(false);
+  });
+});

client/Panels/Topics/useTopicsModel.types.ts

@@ -0,0 +1,27 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+import { ApolloError } from '@apollo/client';
+import { ChangeEvent } from 'react';
+
+/** the shape of the object returned by the useTopicsModel hook */
+export type useTopicsModelType = {
+  model: {
+    filter: string | undefined;
+    topics: topicType[];
+    error: ApolloError | undefined;
+    loading: boolean;
+  };
+  updateTopicsFilter: (evt: ChangeEvent<HTMLInputElement>) => void;
+};
+
+export type topicsType = {
+  topics: topicType[];
+};
+
+export type topicType = {
+  name: string;
+  partitions: number;
+  replicas: number;
+};

client/Panels/index.ts

@@ -0,0 +1,6 @@
+/*
+ * Copyright Strimzi authors.
+ * License: Apache License 2.0 (see the file LICENSE or http://apache.org/licenses/LICENSE-2.0.html).
+ */
+export * from './Home';
+export * from './Topics';