dbeaver/pro#7798 [CB] Fix: menu after migration to new (#4008)

* dbeaver/pro#7798 fix: remove unwanted wrapper and relevant CSS module

* dbeaver/pro#7798 feat: add refresh action to user administration tools menu

* dbeaver/pro#7798 fix: add loader to context menu rendering

The menu was failing to open on first click due to lazy-loaded custom items (ContextMenuSearchItem) suspending the entire top navigation bar on initial load, causing portal recreation and loss of open state. Wrapped menu items in a local Loader to ensure lazy components load within the popover without affecting the parent component.

* dbeaver/pro#7798 fix: use suspense for each renderMenuItem

* dbeaver/pro#7798 refactor: simplify orderItems method in CreateUserBootstrap

* dbeaver/pro#7798 fix: fix menuBarItem styles

* dbeaver/pro#7798 refactor: update CreateUserBootstrap to include AdministrationScreenService

---------

Co-authored-by: mr-anton-t <[email protected]>
Co-authored-by: Evgenia <[email protected]>

Author: 3 people

webapp/packages/core-ui/src/ContextMenu/RenderMenuItems.tsx

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 import { observer } from 'mobx-react-lite';
+import { Suspense } from 'react';
 
 import { type IMenuData } from '@cloudbeaver/core-view';
 import { RenderMenuItem } from './RenderMenuItem.js';
@@ -37,18 +38,19 @@ export const RenderMenuItems = observer<IRenderMenuItemsProps>(function RenderMe
   return (
     <>
       {menu.items.map(item => (
-        <RenderMenuItem
-          key={item.id}
-          item={item}
-          menuData={menu}
-          onlyIcons={onlyIcons}
-          placement={placement}
-          showSubmenuOnHover={showSubmenuOnHover}
-          menuComponent={menuComponent}
-          itemComponent={itemComponent}
-          groupComponent={groupComponent}
-          groupArrowComponent={groupArrowComponent}
-        />
+        <Suspense key={item.id} fallback={null}>
+          <RenderMenuItem
+            item={item}
+            menuData={menu}
+            onlyIcons={onlyIcons}
+            placement={placement}
+            showSubmenuOnHover={showSubmenuOnHover}
+            menuComponent={menuComponent}
+            itemComponent={itemComponent}
+            groupComponent={groupComponent}
+            groupArrowComponent={groupArrowComponent}
+          />
+        </Suspense>
       ))}
     </>
   );

webapp/packages/core-ui/src/Tabs/Tab/TabMenu.module.css

@@ -7,7 +7,7 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { getComputed, s, useS } from '@cloudbeaver/core-blocks';
+import { getComputed } from '@cloudbeaver/core-blocks';
 import { type IDataContext, useDataContextLink } from '@cloudbeaver/core-data-context';
 import { useMenu } from '@cloudbeaver/core-view';
 
@@ -16,7 +16,6 @@ import type { ITabsContext } from '../TabsContext.js';
 import { DATA_CONTEXT_TAB_ID } from './DATA_CONTEXT_TAB_ID.js';
 import { DATA_CONTEXT_TABS_CONTEXT } from './DATA_CONTEXT_TABS_CONTEXT.js';
 import { MENU_TAB } from './MENU_TAB.js';
-import style from './TabMenu.module.css';
 
 interface TabMenuProps extends React.PropsWithChildren {
   tabId: string;
@@ -25,7 +24,6 @@ interface TabMenuProps extends React.PropsWithChildren {
 }
 
 export const TabMenu = observer<TabMenuProps>(function TabMenu({ children, tabId, state, menuContext }) {
-  const styles = useS(style);
   const menu = useMenu({
     menu: MENU_TAB,
     context: menuContext,
@@ -43,10 +41,8 @@ export const TabMenu = observer<TabMenuProps>(function TabMenu({ children, tabId
   }
 
   return (
-    <div className={s(styles, { portal: true })}>
       <ContextMenu menu={menu} placement="bottom-start">
         {children}
       </ContextMenu>
-    </div>
   );
 });

webapp/packages/core-ui/src/Tabs/Tab/TabMenu.tsx

@@ -5,41 +5,54 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-import { DATA_CONTEXT_ADMINISTRATION_ITEM_ROUTE } from '@cloudbeaver/core-administration';
+import { AdministrationScreenService } from '@cloudbeaver/core-administration';
 import { AUTH_PROVIDER_LOCAL_ID, AuthProvidersResource } from '@cloudbeaver/core-authentication';
 import { Bootstrap, injectable } from '@cloudbeaver/core-di';
 import { CachedMapAllKey, getCachedMapResourceLoaderState } from '@cloudbeaver/core-resource';
-import { ACTION_CREATE, ActionService, MenuService } from '@cloudbeaver/core-view';
+import { ACTION_CREATE, ACTION_REFRESH, ActionService, menuExtractItems, MenuService } from '@cloudbeaver/core-view';
 
 import { AdministrationUsersManagementService } from '../../../AdministrationUsersManagementService.js';
 import { MENU_USERS_ADMINISTRATION } from '../../../Menus/MENU_USERS_ADMINISTRATION.js';
 import { ADMINISTRATION_ITEM_USER_CREATE_PARAM } from '../ADMINISTRATION_ITEM_USER_CREATE_PARAM.js';
 import { CreateUserService } from './CreateUserService.js';
+import { DATA_CONTEXT_USERS_ADMINISTRATION_ACTIONS } from './DATA_CONTEXT_USERS_ADMINISTRATION_ACTIONS.js';
 
-@injectable(() => [AuthProvidersResource, CreateUserService, MenuService, ActionService, AdministrationUsersManagementService])
+@injectable(() => [
+  AuthProvidersResource,
+  CreateUserService,
+  MenuService,
+  ActionService,
+  AdministrationUsersManagementService,
+  AdministrationScreenService,
+])
 export class CreateUserBootstrap extends Bootstrap {
   constructor(
     private readonly authProvidersResource: AuthProvidersResource,
     private readonly createUserService: CreateUserService,
     private readonly menuService: MenuService,
     private readonly actionService: ActionService,
     private readonly administrationUsersManagementService: AdministrationUsersManagementService,
+    private readonly administrationScreenService: AdministrationScreenService,
   ) {
     super();
   }
 
-  override register() {
+  override register(): void {
     this.menuService.addCreator({
       menus: [MENU_USERS_ADMINISTRATION],
       getItems(context, items) {
-        return [...items, ACTION_CREATE];
+        return [...items, ACTION_CREATE, ACTION_REFRESH];
+      },
+      orderItems(context, items) {
+        items.push(...menuExtractItems(items, [ACTION_REFRESH]));
+        return items;
       },
     });
 
     this.actionService.addHandler({
       id: 'users-table-base',
       menus: [MENU_USERS_ADMINISTRATION],
-      actions: [ACTION_CREATE],
+      actions: [ACTION_CREATE, ACTION_REFRESH],
       isHidden: (context, action) => {
         if (action === ACTION_CREATE) {
           return this.administrationUsersManagementService.externalUserProviderEnabled || !this.authProvidersResource.has(AUTH_PROVIDER_LOCAL_ID);
@@ -49,9 +62,7 @@ export class CreateUserBootstrap extends Bootstrap {
       },
       isDisabled: (context, action) => {
         if (action === ACTION_CREATE) {
-          const administrationItemRoute = context.get(DATA_CONTEXT_ADMINISTRATION_ITEM_ROUTE);
-
-          return administrationItemRoute?.param === ADMINISTRATION_ITEM_USER_CREATE_PARAM && !!this.createUserService.state;
+          return this.administrationScreenService.activeScreen?.param === ADMINISTRATION_ITEM_USER_CREATE_PARAM && !!this.createUserService.state;
         }
 
         return false;
@@ -65,6 +76,9 @@ export class CreateUserBootstrap extends Bootstrap {
           case ACTION_CREATE:
             this.createUserService.create();
             break;
+          case ACTION_REFRESH:
+            context.get(DATA_CONTEXT_USERS_ADMINISTRATION_ACTIONS)?.onRefresh();
+            break;
         }
       },
       getActionInfo: (context, action) => {
@@ -76,6 +90,15 @@ export class CreateUserBootstrap extends Bootstrap {
           };
         }
 
+        if (action === ACTION_REFRESH) {
+          return {
+            ...action.info,
+            label: 'ui_refresh',
+            icon: 'refresh',
+            tooltip: 'authentication_administration_tools_refresh_tooltip',
+          };
+        }
+
         return action.info;
       },
     });

webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/CreateUserBootstrap.ts

@@ -0,0 +1,15 @@
+/*
+ * CloudBeaver - Cloud Database Manager
+ * Copyright (C) 2020-2025 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 { createDataContext } from '@cloudbeaver/core-data-context';
+
+export interface IUsersAdministrationActions {
+  onRefresh: () => void;
+}
+
+export const DATA_CONTEXT_USERS_ADMINISTRATION_ACTIONS = createDataContext<IUsersAdministrationActions>('Users Administration Actions');

webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/DATA_CONTEXT_USERS_ADMINISTRATION_ACTIONS.ts

@@ -6,17 +6,19 @@
  * you may not use this file except in compliance with the License.
  */
 
-.menuBarItemGroup {
-  & .menuBarItem {
-    & .menuBarItemBox {
-      gap: 0;
-    }
-    & .menuBarItemLabel {
-      font-size: 14px;
-    }
+.menuBarItem {
+  padding: 0 4px;
 
-    & .menuBarItemIcon + .menuBarItemLabel {
-      padding-left: initial;
-    }
+  & .menuBarItemBox {
+    gap: 0;
+  }
+  & .menuBarItemLabel {
+    font-size: 14px;
+    text-transform: uppercase;
+    font-weight: 700;
+  }
+
+  & .menuBarItemIcon + .menuBarItemLabel {
+    padding-left: initial;
   }
 }

webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/UsersAdministrationMenuBarItemStyles.module.css

@@ -7,11 +7,13 @@
  */
 import { observer } from 'mobx-react-lite';
 
-import { s, SContext, type StyleRegistry, ToolsAction, ToolsPanel, useTranslate } from '@cloudbeaver/core-blocks';
+import { s, SContext, type StyleRegistry, ToolsPanel } from '@cloudbeaver/core-blocks';
+import { useDataContext, useDataContextLink } from '@cloudbeaver/core-data-context';
 import { MenuBar, MenuBarItemStyles } from '@cloudbeaver/core-ui';
 import { useMenu } from '@cloudbeaver/core-view';
 
 import { MENU_USERS_ADMINISTRATION } from '../../../Menus/MENU_USERS_ADMINISTRATION.js';
+import { DATA_CONTEXT_USERS_ADMINISTRATION_ACTIONS } from './DATA_CONTEXT_USERS_ADMINISTRATION_ACTIONS.js';
 import UsersAdministrationMenuBarItemStyles from './UsersAdministrationMenuBarItemStyles.module.css';
 import styles from './UsersAdministrationToolsPanel.module.css';
 
@@ -30,17 +32,19 @@ const registry: StyleRegistry = [
 ];
 
 export const UsersAdministrationToolsPanel = observer<Props>(function UsersAdministrationToolsPanel({ onUpdate }) {
-  const translate = useTranslate();
-  const menu = useMenu({ menu: MENU_USERS_ADMINISTRATION });
+  const context = useDataContext();
+
+  useDataContextLink(context, (context, id) => {
+    context.set(DATA_CONTEXT_USERS_ADMINISTRATION_ACTIONS, { onRefresh: onUpdate }, id);
+  });
+
+  const menu = useMenu({ menu: MENU_USERS_ADMINISTRATION, context });
 
   return (
     <ToolsPanel className={s(styles, { toolsPanel: true })} rounded>
       <SContext registry={registry}>
         <MenuBar menu={menu} className={s(styles, { menuBar: true })} compact={false} />
       </SContext>
-      <ToolsAction title={translate('authentication_administration_tools_refresh_tooltip')} icon="refresh" viewBox="0 0 24 24" onClick={onUpdate}>
-        {translate('ui_refresh')}
-      </ToolsAction>
     </ToolsPanel>
   );
 });