Merge branch 'main' into feature/connector-failed-modal

Author: mehmetcangulesci

api/src/main/java/io/kafbat/ui/model/rbac/permission/TopicAction.java

@@ -12,7 +12,7 @@ public enum TopicAction implements PermissibleAction {
   DELETE(VIEW),
   MESSAGES_READ(VIEW),
   MESSAGES_PRODUCE(VIEW),
-  MESSAGES_DELETE(VIEW, EDIT),
+  MESSAGES_DELETE(VIEW),
   ANALYSIS_VIEW(VIEW),
   ANALYSIS_RUN(VIEW, ANALYSIS_VIEW),
 

e2e-playwright/src/services/commonFunctions.ts

@@ -1,5 +1,5 @@
 import { v4 as uuidv4 } from 'uuid';
-import { Page } from "@playwright/test";
+import { expect, Locator, Page } from "@playwright/test";
 
 export const generateName = (prefix: string): string => {
   return `${prefix}${uuidv4().slice(0, 8)}`;
@@ -17,6 +17,30 @@ export async function clearWithSelectAll(page: Page): Promise<void> {
   await page.keyboard.press('Backspace');
 }
 
-// export const generateName = (prefix: string): string => {
-//   return `${prefix}-${uuidv4().slice(0, 8)}`;
-// };
+export async function clickMenuThenItem(
+  page: Page,
+  expectable : Locator,
+  result: Locator
+): Promise<void> {
+  const VISIBLE_TIMEOUT = 5000;
+  const ENABLED_TIMEOUT = 5000;
+  const NETWORK_IDLE_TIMEOUT = 10000;
+
+  async function attemptClick() {
+    await expect(expectable).toBeVisible({ timeout: VISIBLE_TIMEOUT });
+    await expect(expectable).toBeEnabled({ timeout: ENABLED_TIMEOUT });
+    await expectable.scrollIntoViewIfNeeded();
+    await expectable.click();
+
+    await expect(result).toBeVisible({ timeout: VISIBLE_TIMEOUT });
+    await result.click();
+  }
+
+  try {
+    await attemptClick();
+  } catch {
+    await page.reload({ waitUntil: 'domcontentloaded' });
+    await page.waitForLoadState('networkidle', { timeout: NETWORK_IDLE_TIMEOUT }).catch(() => {});
+    await attemptClick();
+  }
+}

e2e-playwright/src/steps/KafkaConnect.steps.ts

@@ -2,7 +2,7 @@
 import { Given, When, Then, setDefaultTimeout } from "@cucumber/cucumber";
 import { expectVisibility } from "../services/uiHelper";
 import { PlaywrightWorld } from "../support/PlaywrightWorld";
-import { expect } from "@playwright/test";
+import { clickMenuThenItem } from "../services/commonFunctions";
 
 setDefaultTimeout(60 * 1000 * 2);
 
@@ -26,29 +26,11 @@ Given('KafkaConnect satus is: {string}, type is: {string}', async function(this:
 });
 
 Given('KafkaConnect row menu menu item {string} is clicked', async function(this: PlaywrightWorld, menuItem: string) {
-        const { page } = this;
-    const rowMenu = this.locators.connectors.rowMenu;
-    const rowMenuItem = this.locators.connectors.rowMenuItem(menuItem);
-
-    async function attemptClick() {
-      await expect(rowMenu).toBeVisible({ timeout: 5000 });
-      await expect(rowMenu).toBeEnabled({ timeout: 5000 });
-      await rowMenu.scrollIntoViewIfNeeded();
-
-      await rowMenu.click();
-
-      await expect(rowMenuItem).toBeVisible({ timeout: 5000 });
-      await rowMenuItem.click();
-    }
-
-    try {
-      await attemptClick();
-    } catch (firstErr) {
-      await page.reload({ waitUntil: 'domcontentloaded' });
-      await page.waitForLoadState('networkidle', { timeout: 10000 }).catch(() => {});
-
-      await attemptClick();
-    }
+  await clickMenuThenItem(
+    this.page,
+    this.locators.connectors.rowMenu,
+    this.locators.connectors.rowMenuItem(menuItem)
+  );
 });
 
 When('KafkaConnect connector named: {string} clicked', async function(this: PlaywrightWorld, name: string) {
@@ -64,29 +46,11 @@ Given('KafkaConnect connector page status is: {string}', async function(this: Pl
 });
 
 When('KafkaConnect connector menu item {string} clicked', async function(this: PlaywrightWorld, menuItem: string) {
-    const { page } = this;
-    const menuButton = this.locators.connectors.internalMenuButton;
-    const menuItemLocator = this.locators.connectors.internalMenuButtonItem(menuItem);
-
-    async function attemptClick() {
-      await expect(menuButton).toBeVisible({ timeout: 5000 });
-      await expect(menuButton).toBeEnabled({ timeout: 5000 });
-
-      await menuButton.click();
-
-      await expect(menuItemLocator).toBeVisible({ timeout: 5000 });
-      await menuItemLocator.click();
-    }
-
-    try {
-      await attemptClick();
-    } catch (firstErr) {
-      await page.reload({ waitUntil: 'domcontentloaded' });
-
-      await page.waitForLoadState('networkidle', { timeout: 10000 }).catch(() => {});
-
-      await attemptClick();
-    }
+    await clickMenuThenItem(
+    this.page,
+    this.locators.connectors.internalMenuButton,
+    this.locators.connectors.internalMenuButtonItem(menuItem)
+  );
 });
 
 Given('KafkaConnect connector page state is: {string}', async function(this: PlaywrightWorld, state: string) {

frontend/src/components/Connect/Details/DetailsPage.tsx

@@ -5,6 +5,8 @@ import {
   clusterConnectConnectorConfigPath,
   clusterConnectConnectorConfigRelativePath,
   clusterConnectConnectorPath,
+  clusterConnectConnectorTopicsPath,
+  clusterConnectConnectorTopicsRelativePath,
   clusterConnectorsPath,
   RouterParamsClusterConnectConnector,
 } from 'lib/paths';
@@ -16,6 +18,7 @@ import Overview from './Overview/Overview';
 import Tasks from './Tasks/Tasks';
 import Config from './Config/Config';
 import Actions from './Actions/Actions';
+import Topics from './Topics/Topics';
 
 const DetailsPage: React.FC = () => {
   const { clusterName, connectName, connectorName } =
@@ -53,6 +56,16 @@ const DetailsPage: React.FC = () => {
         >
           Config
         </NavLink>
+        <NavLink
+          to={clusterConnectConnectorTopicsPath(
+            clusterName,
+            connectName,
+            connectorName
+          )}
+          className={({ isActive }) => (isActive ? 'is-active' : '')}
+        >
+          Topics
+        </NavLink>
       </Navbar>
       <Suspense fallback={<PageLoader />}>
         <Routes>
@@ -61,6 +74,10 @@ const DetailsPage: React.FC = () => {
             path={clusterConnectConnectorConfigRelativePath}
             element={<Config />}
           />
+          <Route
+            path={clusterConnectConnectorTopicsRelativePath}
+            element={<Topics />}
+          />
         </Routes>
       </Suspense>
     </div>

frontend/src/components/Connect/Details/Topics/Topics.tsx

@@ -0,0 +1,32 @@
+import React from 'react';
+import useAppParams from 'lib/hooks/useAppParams';
+import { RouterParamsClusterConnectConnector } from 'lib/paths';
+import { useConnector } from 'lib/hooks/api/kafkaConnect';
+import Table from 'components/common/NewTable';
+import { ColumnDef } from '@tanstack/react-table';
+
+import { TopicNameCell } from './cells/TopicNameCell';
+
+const columns: ColumnDef<{ topicName: string }>[] = [
+  {
+    header: 'Topic',
+    accessorKey: 'topicName',
+    cell: TopicNameCell,
+  },
+];
+
+const Topics = () => {
+  const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
+
+  const { data: connector } = useConnector(routerProps);
+
+  const tableData = (connector?.topics ?? []).map((topicName) => ({
+    topicName,
+  }));
+
+  return (
+    <Table columns={columns} data={tableData} emptyMessage="No topics found" />
+  );
+};
+
+export default Topics;

frontend/src/components/Connect/Details/Topics/cells/TopicNameCell.tsx

@@ -0,0 +1,24 @@
+import React from 'react';
+import useAppParams from 'lib/hooks/useAppParams';
+import {
+  clusterTopicPath,
+  RouterParamsClusterConnectConnector,
+} from 'lib/paths';
+import { CellContext } from '@tanstack/react-table';
+import { TableKeyLink } from 'components/common/table/Table/TableKeyLink.styled';
+import { Link } from 'react-router-dom';
+
+type TopicNameCellProps = CellContext<{ topicName: string }, unknown>;
+
+export const TopicNameCell = ({ getValue }: TopicNameCellProps) => {
+  const routerProps = useAppParams<RouterParamsClusterConnectConnector>();
+  const topicName = getValue<string>();
+
+  return (
+    <TableKeyLink>
+      <Link to={clusterTopicPath(routerProps.clusterName, topicName)}>
+        {topicName}
+      </Link>
+    </TableKeyLink>
+  );
+};

frontend/src/lib/paths.ts

@@ -216,6 +216,7 @@ export const clusterConnectConnectorRelativePath = `${clusterConnectsRelativePat
 export const clusterConnectorNewRelativePath = 'create-new';
 const clusterConnectConnectorTasksRelativePath = 'tasks';
 export const clusterConnectConnectorConfigRelativePath = 'config';
+export const clusterConnectConnectorTopicsRelativePath = 'topics';
 
 export const clusterConnectsPath = (
   clusterName: ClusterName = RouteParams.clusterName
@@ -281,6 +282,16 @@ export const clusterConnectConnectorConfigPath = (
     connectName,
     connectorName
   )}/${clusterConnectConnectorConfigRelativePath}`;
+export const clusterConnectConnectorTopicsPath = (
+  clusterName: ClusterName = RouteParams.clusterName,
+  connectName: Connect['name'] = RouteParams.connectName,
+  connectorName: Connector['name'] = RouteParams.connectorName
+) =>
+  `${clusterConnectConnectorPath(
+    clusterName,
+    connectName,
+    connectorName
+  )}/${clusterConnectConnectorTopicsRelativePath}`;
 
 export type RouterParamsClusterConnectConnector = {
   clusterName: ClusterName;