From cf764f5807eba387ef35e3011af8af2a3945058b Mon Sep 17 00:00:00 2001
From: Alexey <wrouds@gmail.com>
Date: Fri, 27 Sep 2024 17:04:39 +0800
Subject: [PATCH] CB-4192 fix: users loading (#2939)

Co-authored-by: Evgenia Bezborodova <139753579+EvgeniaBzzz@users.noreply.github.com>
---
 .../src/Resource/ResourceOffsetPagination.ts  |  8 +---
 .../UsersTable/Filters/UsersTableFilters.tsx  | 27 +++---------
 .../Filters/UsersTableFiltersDetails.tsx      | 42 +++++++++++++++++++
 3 files changed, 49 insertions(+), 28 deletions(-)
 create mode 100644 webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFiltersDetails.tsx

diff --git a/webapp/packages/core-resource/src/Resource/ResourceOffsetPagination.ts b/webapp/packages/core-resource/src/Resource/ResourceOffsetPagination.ts
index cc021d0e37..87c74709ca 100644
--- a/webapp/packages/core-resource/src/Resource/ResourceOffsetPagination.ts
+++ b/webapp/packages/core-resource/src/Resource/ResourceOffsetPagination.ts
@@ -30,13 +30,7 @@ export class ResourceOffsetPagination<TKey, TMetadata extends ICachedResourceMet
       return undefined;
     }
 
-    const page = this.metadata.get(key as TKey).offsetPage;
-
-    if (!page || !isOffsetPageInRange(page, key.options)) {
-      return undefined;
-    }
-
-    return page;
+    return this.metadata.get(key as TKey).offsetPage;
   }
 
   hasNextPage(key: ResourceAlias<TKey, Readonly<ICachedResourceOffsetPageOptions>>): boolean {
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.tsx
index 603250a291..de91f23469 100644
--- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.tsx
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.tsx
@@ -8,11 +8,11 @@
 import { observer } from 'mobx-react-lite';
 import { useState } from 'react';
 
-import { AuthRolesResource } from '@cloudbeaver/core-authentication';
-import { Combobox, Filter, Group, IconOrImage, s, useResource, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { Filter, Group, IconOrImage, Loader, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
 
 import styles from './UsersTableFilters.module.css';
-import { type IUserFilters, USER_ROLE_ALL, USER_STATUSES } from './useUsersTableFilters.js';
+import { UsersTableFiltersDetails } from './UsersTableFiltersDetails.js';
+import { type IUserFilters } from './useUsersTableFilters.js';
 
 interface Props {
   filters: IUserFilters;
@@ -21,7 +21,6 @@ interface Props {
 export const UsersTableFilters = observer<Props>(function UsersTableFilters({ filters }) {
   const translate = useTranslate();
   const style = useS(styles);
-  const authRolesResource = useResource(UsersTableFilters, AuthRolesResource, undefined);
 
   const [open, setOpen] = useState(false);
 
@@ -42,23 +41,9 @@ export const UsersTableFilters = observer<Props>(function UsersTableFilters({ fi
       </div>
 
       {open && (
-        <Group box gap>
-          <Combobox
-            value={filters.status}
-            items={USER_STATUSES}
-            valueSelector={value => translate(value.label)}
-            keySelector={value => value.value}
-            keepSize
-            onSelect={filters.setStatus}
-          >
-            {translate('authentication_user_status')}
-          </Combobox>
-          {!!authRolesResource.data.length && (
-            <Combobox items={[...authRolesResource.data, USER_ROLE_ALL]} value={filters.role} keepSize onSelect={filters.setRole}>
-              {translate('authentication_user_role')}
-            </Combobox>
-          )}
-        </Group>
+        <Loader suspense inline>
+          <UsersTableFiltersDetails filters={filters} />
+        </Loader>
       )}
     </Group>
   );
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFiltersDetails.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFiltersDetails.tsx
new file mode 100644
index 0000000000..ea55448799
--- /dev/null
+++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFiltersDetails.tsx
@@ -0,0 +1,42 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2024 DBeaver Corp and others
+ *
+ * Licensed under the Apache License, Version 2.0.
+ * you may not use this file except in compliance with the License.
+ */
+import { observer } from 'mobx-react-lite';
+
+import { AuthRolesResource } from '@cloudbeaver/core-authentication';
+import { Combobox, Group, useResource, useTranslate } from '@cloudbeaver/core-blocks';
+
+import { type IUserFilters, USER_ROLE_ALL, USER_STATUSES } from './useUsersTableFilters.js';
+
+interface Props {
+  filters: IUserFilters;
+}
+
+export const UsersTableFiltersDetails = observer<Props>(function UsersTableFiltersDetails({ filters }) {
+  const translate = useTranslate();
+  const authRolesResource = useResource(UsersTableFiltersDetails, AuthRolesResource, undefined);
+
+  return (
+    <Group box gap>
+      <Combobox
+        value={filters.status}
+        items={USER_STATUSES}
+        valueSelector={value => translate(value.label)}
+        keySelector={value => value.value}
+        keepSize
+        onSelect={filters.setStatus}
+      >
+        {translate('authentication_user_status')}
+      </Combobox>
+      {!!authRolesResource.data.length && (
+        <Combobox items={[...authRolesResource.data, USER_ROLE_ALL]} value={filters.role} keepSize onSelect={filters.setRole}>
+          {translate('authentication_user_role')}
+        </Combobox>
+      )}
+    </Group>
+  );
+});