opensource/cloudbeaver
3
0
Fork 0
mirror of https://github.com/dbeaver/cloudbeaver.git synced 2026-10-16 14:50:15 +08:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'refactor/cb-4332/css-modules/ee-parts' into CB-4385-migration-from-reshadow-to-module-styles

Browse Source
This commit is contained in:
s.teleshev
2023-12-15 09:36:00 +01:00
parent a2b7b6701d ebe24f7e97
commit 2818824965
17 changed files with 78 additions and 101 deletions
Download Patch File Download Diff File Expand all files Collapse all files
webapp/packages/core-blocks/src/FormControls/Filter.tsx
+6 -6
View File
@@ -30,14 +30,14 @@ type ControlledProps = BaseProps & {
name?: string;
value?: string;
state?: never;
onFilter?: (value: string, name?: string) => void;
onChange?: (value: string, name?: string) => void;
};
type ObjectsProps<TKey extends keyof TState, TState> = BaseProps & {
name: TKey;
state: TState;
value?: never;
onFilter?: (value: TState[TKey], name: TKey) => void;
onChange?: (value: TState[TKey], name: TKey) => void;
};
export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(function Filter({
@@ -49,7 +49,7 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
disabled,
max,
className,
onFilter,
onChange,
onToggle,
onKeyDown,
onClick,
@@ -66,11 +66,11 @@ export const Filter = observer<ControlledProps | ObjectsProps<any, any>>(functio
state[name] = value;
}
if (onFilter) {
onFilter(value, name);
if (onChange) {
onChange(value, name);
}
},
[onFilter, state],
[onChange, state],
);
const toggle = useCallback(() => {
webapp/packages/core-blocks/src/PropertiesTable/PropertiesTable.tsx
+2 -6
View File
@@ -19,9 +19,9 @@ import { useTranslate } from '../localization/useTranslate';
import { SContext, StyleRegistry } from '../SContext';
import { useObjectRef } from '../useObjectRef';
import type { IProperty } from './IProperty';
import PropertiesTableAddButtonStyles from './PropertiesTableAddButtonStyles.m.css';
import PropertiesTableFilterStyles from './PropertiesTableFilterStyles.m.css';
import PropertiesTableInputStyles from './PropertiesTableInputStyles.m.css';
import PropertiesTableAddButtonStyles from './PropertiesTableAddButtonStyles.m.css';
import { PropertyItem } from './PropertyItem';
import { PROPERTIES_TABLE_STYLES } from './styles';
@@ -153,11 +153,7 @@ export const PropertiesTable = observer<Props>(function PropertiesTable(props) {
<div>{translate('core_block_properties_table_name')}</div>
{props.filterable ? (
<SContext registry={registry}>
<Filter
value={filterValue}
placeholder={translate('core_block_properties_table_filter_name')}
onFilter={setFilterValue}
/>
<Filter value={filterValue} placeholder={translate('core_block_properties_table_filter_name')} onChange={setFilterValue} />
</SContext>
) : null}
</properties-header-name>
webapp/packages/core-ui/src/ContextMenu/MenuBar/MenuBarItem.m.css
+12
View File
@@ -70,9 +70,21 @@
flex-shrink: 0;
border-radius: var(--theme-form-element-radius);
}
& .menuBarItemLabel {
display: none;
}
& .menuBarItemIcon {
width: 16px;
height: 16px;
padding: 0px;
}
&.withLabel {
& .menuBarItem {
width: auto;
}
& .menuBarItemLabel {
display: block;
}
}
}
webapp/packages/core-ui/src/Tabs/TabList.tsx
+2 -2
View File
@@ -40,7 +40,7 @@ export const TabList = observer<React.PropsWithChildren<Props>>(function TabList
{...props}
className={s(componentStyle, { tabList: true }, className)}
{...state.state}
area-label={translate(props['aria-label'] ?? state.container.areaLabel)}
aria-label={translate(props['aria-label'] ?? state.container.areaLabel)}
>
{childrenFirst && children}
{displayed
@@ -71,7 +71,7 @@ export const TabList = observer<React.PropsWithChildren<Props>>(function TabList
}
return (
<BaseTabList {...props} className={s(componentStyle, { tabList: true }, className)} {...state.state} area-label={translate(props['aria-label'])}>
<BaseTabList {...props} className={s(componentStyle, { tabList: true }, className)} {...state.state} aria-label={translate(props['aria-label'])}>
{children}
</BaseTabList>
);
webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationsAdministration.m.css
-3
View File
@@ -1,3 +0,0 @@
.error {
padding: 24px;
}
webapp/packages/plugin-authentication-administration/src/Administration/IdentityProviders/AuthConfigurationsAdministration.tsx
+37 -48
View File
@@ -8,22 +8,13 @@
import { observer } from 'mobx-react-lite';
import type { AdministrationItemContentComponent } from '@cloudbeaver/core-administration';
import { ColoredContainer, Container, ExceptionMessageStyles, Group, Loader, SContext, StyleRegistry, ToolsAction, ToolsPanel, useTranslate } from '@cloudbeaver/core-blocks';
import { ColoredContainer, Container, Group, Loader, ToolsAction, ToolsPanel, useTranslate } from '@cloudbeaver/core-blocks';
import { useService } from '@cloudbeaver/core-di';
import { AuthConfigurationsTable } from './AuthConfigurationsTable/AuthConfigurationsTable';
import { useConfigurationsTable } from './AuthConfigurationsTable/useConfigurationsTable';
import { CreateAuthConfiguration } from './CreateAuthConfiguration';
import { CreateAuthConfigurationService } from './CreateAuthConfigurationService';
import AuthConfigurationsAdministrationStyle from './AuthConfigurationsAdministration.m.css';
const registry: StyleRegistry = [[
ExceptionMessageStyles,
{
mode: 'append',
styles: [AuthConfigurationsAdministrationStyle],
},
]];
export const AuthConfigurationsAdministration: AdministrationItemContentComponent = observer(function AuthConfigurationsAdministration({ sub }) {
const translate = useTranslate();
@@ -34,35 +25,35 @@ export const AuthConfigurationsAdministration: AdministrationItemContentComponen
return (
<ColoredContainer wrap gap parent vertical>
<Group box keepSize>
<ToolsPanel>
<ToolsAction
title={translate('administration_identity_providers_add_tooltip')}
icon="add"
viewBox="0 0 24 24"
disabled={!!sub || table.processing}
onClick={service.create}
>
{translate('ui_add')}
</ToolsAction>
<ToolsAction
title={translate('administration_identity_providers_refresh_tooltip')}
icon="refresh"
viewBox="0 0 24 24"
disabled={table.processing}
onClick={table.update}
>
{translate('ui_refresh')}
</ToolsAction>
<ToolsAction
title={translate('administration_identity_providers_delete_tooltip')}
icon="trash"
viewBox="0 0 24 24"
disabled={!table.tableState.itemsSelected || table.processing}
onClick={table.delete}
>
{translate('ui_delete')}
</ToolsAction>
</ToolsPanel>
<ToolsPanel>
<ToolsAction
title={translate('administration_identity_providers_add_tooltip')}
icon="add"
viewBox="0 0 24 24"
disabled={!!sub || table.processing}
onClick={service.create}
>
{translate('ui_add')}
</ToolsAction>
<ToolsAction
title={translate('administration_identity_providers_refresh_tooltip')}
icon="refresh"
viewBox="0 0 24 24"
disabled={table.processing}
onClick={table.update}
>
{translate('ui_refresh')}
</ToolsAction>
<ToolsAction
title={translate('administration_identity_providers_delete_tooltip')}
icon="trash"
viewBox="0 0 24 24"
disabled={!table.tableState.itemsSelected || table.processing}
onClick={table.delete}
>
{translate('ui_delete')}
</ToolsAction>
</ToolsPanel>
</Group>
<Container overflow gap>
{sub && (
@@ -71,15 +62,13 @@ export const AuthConfigurationsAdministration: AdministrationItemContentComponen
</Group>
)}
<Group boxNoOverflow>
<SContext registry={registry}>
<Loader loading={table.processing} overlay>
<AuthConfigurationsTable
configurations={table.configurations}
selectedItems={table.tableState.selected}
expandedItems={table.tableState.expanded}
/>
</Loader>
</SContext>
<Loader loading={table.processing} overlay>
<AuthConfigurationsTable
configurations={table.configurations}
selectedItems={table.tableState.selected}
expandedItems={table.tableState.expanded}
/>
</Loader>
</Group>
</Container>
</ColoredContainer>
webapp/packages/plugin-authentication-administration/src/Administration/Users/UsersTable/Filters/UsersTableFilters.tsx
+1 -1
View File
@@ -73,7 +73,7 @@ export const UsersTableFilters = observer<Props>(function UsersTableFilters({ fi
placeholder={translate('authentication_administration_users_filters_search_placeholder')}
value={filters.search}
max
onFilter={filters.setSearch}
onChange={filters.setSearch}
/>
<actions>
<button {...use({ active: open })} onClick={() => setOpen(!open)}>
webapp/packages/plugin-authentication/src/Dialog/AuthProviderForm/ConfigurationsList.tsx
+3 -9
View File
@@ -58,12 +58,6 @@ const styles = css`
}
`;
const loaderStyle = css`
ExceptionMessage {
padding: 24px;
}
`;
interface IProviderConfiguration {
provider: AuthProvider;
configuration: AuthProviderConfiguration;
@@ -140,7 +134,7 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
if (activeProvider && activeConfiguration) {
return styled(style)(
<container className={className}>
<Loader state={authTaskState} style={loaderStyle} message="authentication_authorizing" hideException>
<Loader state={authTaskState} message="authentication_authorizing" hideException>
<center>
{providerDisabled ? (
<TextPlaceholder>
@@ -161,7 +155,7 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
return styled(style)(
<container className={className}>
{configurations.length >= 10 && (
<Filter placeholder={translate('authentication_identity_provider_search_placeholder')} value={search} max onFilter={setSearch} />
<Filter placeholder={translate('authentication_identity_provider_search_placeholder')} value={search} max onChange={setSearch} />
)}
<list>
{filteredConfigurations.map(({ provider, configuration }) => {
@@ -176,7 +170,7 @@ export const ConfigurationsList = observer<Props>(function ConfigurationsList({
);
})}
</list>
<Loader state={authTaskState} style={loaderStyle} message="authentication_authorizing" overlay hideException />
<Loader state={authTaskState} message="authentication_authorizing" overlay hideException />
</container>,
);
});
webapp/packages/plugin-connections/src/ConnectionForm/OriginInfo/OriginInfo.tsx
-3
View File
@@ -34,9 +34,6 @@ const style = css`
flex: 1;
overflow: auto;
}
ExceptionMessage {
padding: 16px;
}
`;
export const OriginInfo: TabContainerPanelComponent<IConnectionFormProps> = observer(function OriginInfo({
webapp/packages/plugin-log-viewer/src/LogViewer/LogViewerTable.tsx
+2 -2
View File
@@ -46,8 +46,8 @@ const styles = css`
width: 32px;
}
[|timestamp] {
width: 100px;
min-width: 100px;
width: 116px;
min-width: 116px;
}
`;
webapp/packages/plugin-navigation-tree/src/NavigationTree/ElementsTree/ElementsTreeTools/ElementsTreeFilter.tsx
+1 -1
View File
@@ -30,7 +30,7 @@ export const ElementsTreeFilter = observer<Props>(function ElementsTreeFilter({
return (
<div ref={focusedRef} className={s(computedStyles, { filterBox: true }, className)}>
<Filter placeholder={translate('app_navigationTree_search')} value={tree.filter} max onFilter={value => tree.setFilter(value as string)} />
<Filter placeholder={translate('app_navigationTree_search')} value={tree.filter} max onChange={value => tree.setFilter(value as string)} />
</div>
);
});
webapp/packages/plugin-sql-editor/src/SqlEditor/ISQLEditorData.ts
+1
View File
@@ -66,4 +66,5 @@ export interface ISQLEditorData {
passEmpty?: boolean,
passDisabled?: boolean,
): Promise<T | undefined>;
setModeId(tabId: string): void;
}
webapp/packages/plugin-sql-editor/src/SqlEditor/SqlEditor.tsx
+1 -1
View File
@@ -71,7 +71,7 @@ export const SqlEditor = observer<ISqlEditorProps>(function SqlEditor({ state, c
});
function handleModeSelect(tab: ITabData<ISqlEditorModeProps>) {
state.currentModeId = tab.tabId;
data.setModeId(tab.tabId);
}
const displayedEditors = getComputed(() => sqlEditorModeService.tabsContainer.getDisplayed({ state, data }).length);
webapp/packages/plugin-sql-editor/src/SqlEditor/useSqlEditor.ts
+4
View File
@@ -462,6 +462,10 @@ export function useSqlEditor(state: ISqlEditorTabState): ISQLEditorData {
return query;
},
setModeId(tabId: string): void {
this.state.currentModeId = tabId;
this.onUpdate.execute();
},
}),
{
formatScript: action.bound,
webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsPanel.tsx
+3 -3
View File
@@ -7,7 +7,7 @@
*/
import { observer } from 'mobx-react-lite';
import { Container, useResource } from '@cloudbeaver/core-blocks';
import { Container, Group, useResource } from '@cloudbeaver/core-blocks';
import { useService } from '@cloudbeaver/core-di';
import { EditorLoader } from '@cloudbeaver/plugin-codemirror6';
@@ -32,7 +32,7 @@ export const OutputLogsPanel = observer<Props>(function SqlOutputLogsPanel({ sql
<Container className="theme-background-secondary" overflow vertical noWrap dense parent gap>
<OutputLogsToolbar state={state} sqlEditorTabState={sqlEditorTabState} />
{data && (
<Container overflow>
<Group box>
<EditorLoader
value={state.resultValue}
foldGutter={false}
@@ -40,7 +40,7 @@ export const OutputLogsPanel = observer<Props>(function SqlOutputLogsPanel({ sql
highlightActiveLine={false}
readonly
/>
</Container>
</Group>
)}
</Container>
);
webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsToolbar.m.css
-6
View File
@@ -1,6 +0,0 @@
.searchIcon {
width: 24px;
height: 24px;
display: flex;
border-radius: var(--theme-menu-bar-small-action-radius);
}
webapp/packages/plugin-sql-editor/src/SqlResultTabs/OutputLogs/OutputLogsToolbar.tsx
+3 -10
View File
@@ -8,11 +8,10 @@
import { observer } from 'mobx-react-lite';
import React from 'react';
import { Container, Icon, InputField, s, useS, useTranslate } from '@cloudbeaver/core-blocks';
import { Container, Filter, useTranslate } from '@cloudbeaver/core-blocks';
import type { ISqlEditorTabState } from '../../ISqlEditorTabState';
import { OutputLogsMenu } from './OutputLogsMenu';
import style from './OutputLogsToolbar.m.css';
import type { SqlOutputLogsPanelState } from './useOutputLogsPanelState';
interface Props {
@@ -21,20 +20,14 @@ interface Props {
}
export const OutputLogsToolbar = observer<Props>(function OutputLogsToolbar({ state, sqlEditorTabState }) {
const styles = useS(style);
const translate = useTranslate();
return (
<Container noWrap center gap dense keepSize>
<InputField
<Filter
value={state.searchValue}
placeholder={translate('sql_editor_output_logs_input_placeholder')}
icon={
<div className={s(styles, { searchIcon: true })}>
<Icon name="search" viewBox="0 0 24 24" />
</div>
}
fill
max
onChange={value => state.setSearchValue(value.toString())}
/>
<Container keepSize>