Merge branch 'main' into issues/205

api/src/main/java/io/kafbat/ui/config/auth/LdapProperties.java

@@ -20,7 +20,7 @@ public class LdapProperties {
 
   @Value("${oauth2.ldap.activeDirectory:false}")
   private boolean isActiveDirectory;
-  @Value("${oauth2.ldap.aсtiveDirectory.domain:@null}")
+  @Value("${oauth2.ldap.activeDirectory.domain:@null}")
   private String activeDirectoryDomain;
 
 }

api/src/main/resources/application-local.yml

@@ -40,7 +40,7 @@ dynamic.config.enabled: true
 oauth2:
   ldap:
     activeDirectory: false
-    aсtiveDirectory.domain: domain.com
+    activeDirectory.domain: domain.com
 
 auth:
   type: DISABLED

documentation/compose/ui-ldap.yaml

@@ -25,7 +25,7 @@ services:
       SPRING_LDAP_USER_FILTER_SEARCH_FILTER: "(&(uid={0})(objectClass=inetOrgPerson))"
       SPRING_LDAP_GROUP_FILTER_SEARCH_BASE: "ou=people,dc=planetexpress,dc=com"
 #     OAUTH2.LDAP.ACTIVEDIRECTORY: true
-#     OAUTH2.LDAP.AСTIVEDIRECTORY.DOMAIN: "memelord.lol"
+#     OAUTH2.LDAP.ACTIVEDIRECTORY.DOMAIN: "memelord.lol"
 
   ldap:
     image: rroemhild/test-openldap:latest

frontend/src/components/App.tsx

@@ -8,25 +8,28 @@ import {
   clusterNewConfigPath,
 } from 'lib/paths';
 import PageLoader from 'components/common/PageLoader/PageLoader';
-import Dashboard from 'components/Dashboard/Dashboard';
-import ClusterPage from 'components/ClusterPage/ClusterPage';
 import { ThemeProvider } from 'styled-components';
 import { theme, darkTheme } from 'theme/theme';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { showServerError } from 'lib/errorHandling';
 import { Toaster } from 'react-hot-toast';
 import GlobalCSS from 'components/globalCss';
 import * as S from 'components/App.styled';
-import ClusterConfigForm from 'widgets/ClusterConfigForm';
 import { ThemeModeContext } from 'components/contexts/ThemeModeContext';
 
 import ConfirmationModal from './common/ConfirmationModal/ConfirmationModal';
 import { ConfirmContextProvider } from './contexts/ConfirmContext';
 import { GlobalSettingsProvider } from './contexts/GlobalSettingsContext';
-import ErrorPage from './ErrorPage/ErrorPage';
 import { UserInfoRolesAccessProvider } from './contexts/UserInfoRolesAccessContext';
 import PageContainer from './PageContainer/PageContainer';
 
+const Dashboard = React.lazy(() => import('components/Dashboard/Dashboard'));
+const ClusterPage = React.lazy(
+  () => import('components/ClusterPage/ClusterPage')
+);
+const ClusterConfigForm = React.lazy(() => import('widgets/ClusterConfigForm'));
+const ErrorPage = React.lazy(() => import('components/ErrorPage/ErrorPage'));
+
 const queryClient = new QueryClient({
   defaultOptions: {
     queries: {

frontend/src/components/Topics/Topics.tsx

@@ -1,5 +1,6 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import { Route, Routes } from 'react-router-dom';
+import PageLoader from 'components/common/PageLoader/PageLoader';
 import {
   clusterTopicCopyRelativePath,
   clusterTopicNewRelativePath,
@@ -8,24 +9,26 @@ import {
 } from 'lib/paths';
 import SuspenseQueryComponent from 'components/common/SuspenseQueryComponent/SuspenseQueryComponent';
 
-import New from './New/New';
-import ListPage from './List/ListPage';
-import Topic from './Topic/Topic';
+const New = React.lazy(() => import('./New/New'));
+const ListPage = React.lazy(() => import('./List/ListPage'));
+const Topic = React.lazy(() => import('./Topic/Topic'));
 
 const Topics: React.FC = () => (
-  <Routes>
-    <Route index element={<ListPage />} />
-    <Route path={clusterTopicNewRelativePath} element={<New />} />
-    <Route path={clusterTopicCopyRelativePath} element={<New />} />
-    <Route
-      path={getNonExactPath(RouteParams.topicName)}
-      element={
-        <SuspenseQueryComponent>
-          <Topic />
-        </SuspenseQueryComponent>
-      }
-    />
-  </Routes>
+  <Suspense fallback={<PageLoader />}>
+    <Routes>
+      <Route index element={<ListPage />} />
+      <Route path={clusterTopicNewRelativePath} element={<New />} />
+      <Route path={clusterTopicCopyRelativePath} element={<New />} />
+      <Route
+        path={getNonExactPath(RouteParams.topicName)}
+        element={
+          <SuspenseQueryComponent>
+            <Topic />
+          </SuspenseQueryComponent>
+        }
+      />
+    </Routes>
+  </Suspense>
 );
 
 export default Topics;

frontend/src/components/Topics/__tests__/Topics.spec.tsx

@@ -35,23 +35,23 @@ describe('Topics Component', () => {
       { initialEntries: [path] }
     );
 
-  it('should check if the page is Topics List rendered', () => {
+  it('should check if the page is Topics List rendered', async () => {
     setUpComponent(clusterTopicsPath(clusterName));
-    expect(screen.getByText(listContainer)).toBeInTheDocument();
+    expect(await screen.findByText(listContainer)).toBeInTheDocument();
   });
 
-  it('should check if the page is  New Topic  rendered', () => {
+  it('should check if the page is  New Topic  rendered', async () => {
     setUpComponent(clusterTopicNewPath(clusterName));
-    expect(screen.getByText(newCopyContainer)).toBeInTheDocument();
+    expect(await screen.findByText(newCopyContainer)).toBeInTheDocument();
   });
 
   it('should check if the page is Copy Topic rendered', () => {
     setUpComponent(clusterTopicCopyPath(clusterName));
     expect(screen.getByText(newCopyContainer)).toBeInTheDocument();
   });
 
-  it('should check if the page is Topic page rendered', () => {
+  it('should check if the page is Topic page rendered', async () => {
     setUpComponent(clusterTopicPath(clusterName, topicName));
-    expect(screen.getByText(topicContainer)).toBeInTheDocument();
+    expect(await screen.findByText(topicContainer)).toBeInTheDocument();
   });
 });

frontend/src/components/__tests__/App.spec.tsx

@@ -33,7 +33,7 @@ describe('App', () => {
   });
 
   it('Renders navigation', async () => {
-    expect(screen.getByText('Navigation')).toBeInTheDocument();
+    expect(await screen.findByText('Navigation')).toBeInTheDocument();
   });
 
   it('Renders NavBar', async () => {

frontend/src/lib/hooks/filterUtils.ts

@@ -1,8 +1,8 @@
 import { PollingMode } from 'generated-sources';
 
 export const ModeOptions = [
-  { value: PollingMode.LATEST, label: 'Oldest' },
-  { value: PollingMode.EARLIEST, label: 'Newest' },
+  { value: PollingMode.EARLIEST, label: 'Oldest' },
+  { value: PollingMode.LATEST, label: 'Newest' },
   { value: PollingMode.TAILING, label: 'Live' },
   { value: PollingMode.FROM_OFFSET, label: 'From offset' },
   { value: PollingMode.TO_OFFSET, label: 'To offset' },