diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersAdministrationService.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersAdministrationService.ts index 1d4c373e2a..eae553f07f 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersAdministrationService.ts +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersAdministrationService.ts @@ -1,6 +1,6 @@ /* * CloudBeaver - Cloud Database Manager - * Copyright (C) 2020-2025 DBeaver Corp and others + * Copyright (C) 2020-2026 DBeaver Corp and others * * Licensed under the Apache License, Version 2.0. * you may not use this file except in compliance with the License. @@ -17,6 +17,7 @@ import { CommonDialogService, DialogueStateResult } from '@cloudbeaver/core-dial import { CreateTeamService } from './Teams/TeamsTable/CreateTeamService.js'; import { EUsersAdministrationSub, UsersAdministrationNavigationService } from './UsersAdministrationNavigationService.js'; import { CreateUserService } from './UsersTable/CreateUserService.js'; +import type { IUserFilters } from './UsersTable/Filters/useUsersTableFilters.js'; const UserCredentialsList = React.lazy(async () => { const { UserCredentialsList } = await import('./UsersTable/UserCredentialsList.js'); @@ -33,15 +34,25 @@ const UsersAdministration = React.lazy(async () => { return { default: UsersAdministration }; }); +const UsersTableFilterButton = React.lazy(async () => { + const { UsersTableFilterButton } = await import('./UsersTable/Filters/UsersTableFilterButton.js'); + return { default: UsersTableFilterButton }; +}); + export interface IUserDetailsInfoProps { user: AdminUser; } +export interface IUsersActionButtonProps { + filters: IUserFilters; +} + @injectable(() => [AdministrationItemService, CreateUserService, TeamsResource, CreateTeamService, UsersResource, CommonDialogService]) export class UsersAdministrationService extends Bootstrap { readonly tabsContainer: TabsContainer; readonly userDetailsInfoPlaceholder: PlaceholderContainer; readonly informationPlaceholder: PlaceholderContainer; + readonly actionButtonsPlaceholder: PlaceholderContainer; administrationItem!: IAdministrationItem; constructor( @@ -56,6 +67,7 @@ export class UsersAdministrationService extends Bootstrap { this.userDetailsInfoPlaceholder = new PlaceholderContainer(); this.tabsContainer = new TabsContainer('Access Control'); this.informationPlaceholder = new PlaceholderContainer(); + this.actionButtonsPlaceholder = new PlaceholderContainer(); } override register(): void { @@ -83,6 +95,7 @@ export class UsersAdministrationService extends Bootstrap { getDrawerComponent: () => UsersDrawerItem, }); this.userDetailsInfoPlaceholder.add(UserCredentialsList, 0); + this.actionButtonsPlaceholder.add(UsersTableFilterButton, 0); } private async handleDeactivate(sub: EUsersAdministrationSub) { diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/FiltersActionButton.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/FiltersActionButton.tsx new file mode 100644 index 0000000000..129f013b98 --- /dev/null +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/FiltersActionButton.tsx @@ -0,0 +1,29 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 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 { clsx, IconButton, type IconButtonProps } from '@dbeaver/ui-kit'; + +const BUTTON_BOX_CLASS_NAME = clsx( + 'theme-form-element-radius theme-background-surface theme-text-on-surface theme theme-border-color-background', + 'tw:flex tw:items-center tw:justify-center tw:box-border tw:h-8 tw:border-2', +); + +const BUTTON_CLASS_NAME = 'tw:relative! tw:box-border! tw:bg-inherit! tw:cursor-pointer! tw:w-[28px]! tw:h-full! tw:p-1! tw:hover:opacity-80!'; + +export interface IFiltersActionButtonProps extends IconButtonProps { + active?: boolean; +} + +export const FiltersActionButton = observer(function FiltersActionButton({ active, className, size = 'small', ...rest }) { + return ( +
+ +
+ ); +}); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilterButton.tsx b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilterButton.tsx new file mode 100644 index 0000000000..c47fd02c09 --- /dev/null +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilterButton.tsx @@ -0,0 +1,32 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 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 { useContext } from 'react'; + +import { IconOrImage, useTranslate } from '@cloudbeaver/core-blocks'; + +import type { IUsersActionButtonProps } from '../../UsersAdministrationService.js'; +import { FiltersActionButton } from './FiltersActionButton.js'; +import { UsersTableFiltersOpenContext } from './UsersTableFiltersOpenContext.js'; + +export const UsersTableFilterButton = observer(function UsersTableFilterButton() { + const translate = useTranslate(); + const openContext = useContext(UsersTableFiltersOpenContext); + + if (!openContext) { + throw new Error('UsersTableFilterButton must be rendered within UsersTableFiltersOpenContext'); + } + + const label = translate('authentication_administration_users_filters_filter_label'); + + return ( + + + + ); +}); diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.module.css b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.module.css index 220e53fea6..45b82c0f3a 100644 --- a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.module.css +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.module.css @@ -1,11 +1,3 @@ -/* - * 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. - */ - .filterContainer { display: flex; gap: 12px; @@ -16,31 +8,7 @@ } .actions { - composes: theme-form-element-radius theme-background-surface theme-text-on-surface theme theme-border-color-background from global; - box-sizing: border-box; - border: 2px solid; - height: 32px; -} - -.button { - position: relative; - box-sizing: border-box; - background: inherit; - cursor: pointer; - width: 28px; - height: 100%; - padding: 4px; - - &:hover { - opacity: 0.8; - } -} - -.buttonActive { - background: var(--theme-secondary); -} - -.iconOrImage { - width: 100%; - height: 100%; + display: flex; + align-items: center; + gap: 8px; } 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 e60c33e2f6..3aeca27f1e 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 @@ -6,14 +6,16 @@ * you may not use this file except in compliance with the License. */ import { observer } from 'mobx-react-lite'; -import { useState } from 'react'; +import { useCallback, useMemo, useState } from 'react'; -import { Filter, Group, IconOrImage, Loader, s, useS, useTranslate } from '@cloudbeaver/core-blocks'; +import { Filter, Group, Loader, Placeholder, s, useS, useTranslate } from '@cloudbeaver/core-blocks'; +import { useService } from '@cloudbeaver/core-di'; +import { UsersAdministrationService } from '../../UsersAdministrationService.js'; import styles from './UsersTableFilters.module.css'; import { UsersTableFiltersDetails } from './UsersTableFiltersDetails.js'; +import { UsersTableFiltersOpenContext } from './UsersTableFiltersOpenContext.js'; import { type IUserFilters } from './useUsersTableFilters.js'; -import { IconButton } from '@dbeaver/ui-kit'; interface Props { filters: IUserFilters; @@ -22,8 +24,11 @@ interface Props { export const UsersTableFilters = observer(function UsersTableFilters({ filters }) { const translate = useTranslate(); const style = useS(styles); + const usersAdministrationService = useService(UsersAdministrationService); const [open, setOpen] = useState(false); + const onToggle = useCallback(() => setOpen(open => !open), []); + const openContext = useMemo(() => ({ open, onToggle }), [open, onToggle]); return ( @@ -35,14 +40,9 @@ export const UsersTableFilters = observer(function UsersTableFilters({ fi onChange={filters.setSearch} />
- setOpen(!open)} - > - - + + +
diff --git a/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFiltersOpenContext.ts b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFiltersOpenContext.ts new file mode 100644 index 0000000000..3745d6cf1f --- /dev/null +++ b/webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFiltersOpenContext.ts @@ -0,0 +1,15 @@ +/* + * CloudBeaver - Cloud Database Manager + * Copyright (C) 2020-2026 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 { createContext } from 'react'; + +export interface IUsersTableFiltersOpenContext { + open: boolean; + onToggle: () => void; +} + +export const UsersTableFiltersOpenContext = createContext(null); diff --git a/webapp/packages/plugin-authentication-administration/src/index.ts b/webapp/packages/plugin-authentication-administration/src/index.ts index 4441479b12..3b8803e235 100644 --- a/webapp/packages/plugin-authentication-administration/src/index.ts +++ b/webapp/packages/plugin-authentication-administration/src/index.ts @@ -22,3 +22,5 @@ export * from './AdministrationUsersManagementService.js'; export * from './externalUserProviderStatusContext.js'; export * from './Administration/Users/Teams/TeamsForm/Options/getTeamOptionsFormPart.js'; export * from './Administration/Users/UsersTable/UsersTableOptionsPanelService.js'; +export * from './Administration/Users/UsersTable/Filters/useUsersTableFilters.js'; +export * from './Administration/Users/UsersTable/Filters/FiltersActionButton.js';