diff --git a/webapp/packages/core-administration/src/Administration/Administration.tsx b/webapp/packages/core-administration/src/Administration/Administration.tsx index d35c91ee20..d406875618 100644 --- a/webapp/packages/core-administration/src/Administration/Administration.tsx +++ b/webapp/packages/core-administration/src/Administration/Administration.tsx @@ -66,6 +66,7 @@ const administrationStyles = composes( ); type Props = { + configurationWizard: boolean; activeItem: string | null; activeItemSub: string | null; activeItemSubParam: string | null; @@ -73,17 +74,24 @@ type Props = { } export const Administration = observer(function Administration({ - activeItem, activeItemSub, activeItemSubParam, onItemSelect, + configurationWizard, activeItem, activeItemSub, activeItemSubParam, onItemSelect, }: Props) { const controller = useController(AdministrationController); + const items = controller.getItems(configurationWizard); return styled(useStyles(verticalTabStyles, administrationStyles, tabsStyles))( - {controller.items.map(item => ( - + {items.map(item => ( + ))} @@ -92,6 +100,7 @@ export const Administration = observer(function Administration({ activeItemName={activeItem} activeItemSub={activeItemSub} activeItemSubParam={activeItemSubParam} + configurationWizard={configurationWizard} /> diff --git a/webapp/packages/core-administration/src/Administration/AdministrationController.ts b/webapp/packages/core-administration/src/Administration/AdministrationController.ts index 06a1bcb669..a7679ab44d 100644 --- a/webapp/packages/core-administration/src/Administration/AdministrationController.ts +++ b/webapp/packages/core-administration/src/Administration/AdministrationController.ts @@ -6,19 +6,19 @@ * you may not use this file except in compliance with the License. */ -import { computed } from 'mobx'; - import { injectable } from '@cloudbeaver/core-di'; import { AdministrationItemService } from '../AdministrationItem/AdministrationItemService'; +import { filterConfigurationWizard } from '../AdministrationItem/filterConfigurationWizard'; +import { orderAdministrationItems } from '../AdministrationItem/orderAdministrationItems'; @injectable() export class AdministrationController { - @computed get items() { + getItems(configurationWizard: boolean) { return this.administrationItemService .items - .concat() - .sort((a, b) => a.order - b.order); + .filter(filterConfigurationWizard(configurationWizard)) + .sort(orderAdministrationItems); } constructor( diff --git a/webapp/packages/core-administration/src/Administration/DrawerItem.tsx b/webapp/packages/core-administration/src/Administration/DrawerItem.tsx index 5da79d3fc9..e5d96bd355 100644 --- a/webapp/packages/core-administration/src/Administration/DrawerItem.tsx +++ b/webapp/packages/core-administration/src/Administration/DrawerItem.tsx @@ -10,8 +10,10 @@ import { observer } from 'mobx-react'; import { AdministrationItemDrawerProps } from '../AdministrationItem/IAdministrationItem'; -export const DrawerItem = observer(function DrawerItem({ item, onSelect, style }: AdministrationItemDrawerProps) { +export const DrawerItem = observer(function DrawerItem({ + item, onSelect, style, configurationWizard, +}: AdministrationItemDrawerProps) { const Component = item.getDrawerComponent(); - return ; + return ; }); diff --git a/webapp/packages/core-administration/src/Administration/ItemContent.tsx b/webapp/packages/core-administration/src/Administration/ItemContent.tsx index aee3cbaa7b..3b47d6e722 100644 --- a/webapp/packages/core-administration/src/Administration/ItemContent.tsx +++ b/webapp/packages/core-administration/src/Administration/ItemContent.tsx @@ -16,16 +16,22 @@ type Props = { activeItemName: string | null; activeItemSub: string | null; activeItemSubParam: string | null; + configurationWizard: boolean; } -export const ItemContent = observer(function ItemContent({ activeItemName, activeItemSub, activeItemSubParam }: Props) { +export const ItemContent = observer(function ItemContent({ + activeItemName, + activeItemSub, + activeItemSubParam, + configurationWizard, +}: Props) { const administrationItemService = useService(AdministrationItemService); if (!activeItemName) { return null; } - const item = administrationItemService.getItem(activeItemName); + const item = administrationItemService.getItem(activeItemName, configurationWizard); if (!item) { return null; @@ -36,11 +42,11 @@ export const ItemContent = observer(function ItemContent({ activeItemName, activ if (sub) { const Component = sub.getComponent(); - return ; + return ; } } const Component = item.getContentComponent(); - return ; + return ; }); diff --git a/webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts b/webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts index a729c280fb..faa66ccb3f 100644 --- a/webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts +++ b/webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts @@ -10,23 +10,32 @@ import { observable } from 'mobx'; import { injectable } from '@cloudbeaver/core-di'; -import { IAdministrationItem, IAdministrationItemOptions, IAdministrationItemSubItem } from './IAdministrationItem'; +import { filterConfigurationWizard } from './filterConfigurationWizard'; +import { + IAdministrationItem, IAdministrationItemOptions, IAdministrationItemSubItem, AdministrationItemType +} from './IAdministrationItem'; +import { orderAdministrationItems } from './orderAdministrationItems'; @injectable() export class AdministrationItemService { @observable items: IAdministrationItem[] = [] - getDefaultItem() { - if (this.items.length === 0) { + getDefaultItem(configurationWizard: boolean) { + const items = this.items.filter(filterConfigurationWizard(configurationWizard)); + + console.log(configurationWizard, items); + + if (items.length === 0) { return null; } - return this.items - .concat() - .sort((a, b) => a.order - b.order)[0].name; + return items.sort(orderAdministrationItems)[0].name; } - getItem(name: string): IAdministrationItem | null { - const item = this.items.find(item => item.name === name); + getItem(name: string, configurationWizard: boolean): IAdministrationItem | null { + const item = this.items.find(item => ( + filterConfigurationWizard(configurationWizard)(item) + && item.name === name + )); if (!item) { return null; } @@ -44,32 +53,39 @@ export class AdministrationItemService { } create(options: IAdministrationItemOptions) { - if (this.items.some(item => item.name === options.name)) { - throw new Error(`Administration item "${options.name}" already exists`); + const type = options.type === undefined ? AdministrationItemType.Administration : options.type; + + if (this.items.some(item => item.name === options.name && ( + item.type === type + || item.type === AdministrationItemType.Default + || type === AdministrationItemType.Default + ))) { + throw new Error(`Administration item "${options.name}" already exists in the same visibility scope`); } const item: IAdministrationItem = { ...options, + type, sub: options.sub || [], order: options.order || Number.MAX_SAFE_INTEGER, }; this.items.push(item); } - async activate(name: string, itemSub: string | null, param: string | null) { - const item = this.getItem(name); + async activate(name: string, itemSub: string | null, param: string | null, configurationWizard: boolean) { + const item = this.getItem(name, configurationWizard); if (!item) { return; } if (item.onActivate) { - await item.onActivate(); + await item.onActivate(configurationWizard); } if (itemSub) { const sub = this.getItemSub(item, itemSub); if (sub && sub.onActivate) { - await sub.onActivate(param); + await sub.onActivate(param, configurationWizard); } } } diff --git a/webapp/packages/core-administration/src/AdministrationItem/IAdministrationItem.ts b/webapp/packages/core-administration/src/AdministrationItem/IAdministrationItem.ts index 926282b64b..25a8584303 100644 --- a/webapp/packages/core-administration/src/AdministrationItem/IAdministrationItem.ts +++ b/webapp/packages/core-administration/src/AdministrationItem/IAdministrationItem.ts @@ -8,8 +8,15 @@ import { Style } from '@cloudbeaver/core-theming'; +export enum AdministrationItemType { + Default, + Administration, + ConfigurationWizard +} + export type AdministrationItemDrawerProps = { item: IAdministrationItem; + configurationWizard: boolean; onSelect(id: string): void; style: Style[]; } @@ -17,18 +24,20 @@ export type AdministrationItemDrawerComponent = React.FunctionComponent export type AdministrationItemSubContentProps = { item: IAdministrationItem; sub: IAdministrationItemSubItem; + configurationWizard: boolean; param: string | null; } export type AdministrationItemSubContentComponent = React.FunctionComponent -export type AdministrationItemEvent = () => Promise | void -export type AdministrationItemSubEvent = (param: string | null) => Promise | void +export type AdministrationItemEvent = (configurationWizard: boolean) => Promise | void +export type AdministrationItemSubEvent = (param: string | null, configurationWizard: boolean) => Promise | void export interface IAdministrationItemSubItem { name: string; @@ -38,6 +47,8 @@ export interface IAdministrationItemSubItem { export interface IAdministrationItemOptions { name: string; + /** By default will be set to AdministrationItemType.Administration */ + type?: AdministrationItemType; order?: number; sub?: IAdministrationItemSubItem[]; getDrawerComponent(): AdministrationItemDrawerComponent; @@ -46,6 +57,7 @@ export interface IAdministrationItemOptions { } export interface IAdministrationItem extends IAdministrationItemOptions { + type: AdministrationItemType; order: number; sub: IAdministrationItemSubItem[]; } diff --git a/webapp/packages/core-administration/src/AdministrationItem/filterConfigurationWizard.ts b/webapp/packages/core-administration/src/AdministrationItem/filterConfigurationWizard.ts new file mode 100644 index 0000000000..87aafb1986 --- /dev/null +++ b/webapp/packages/core-administration/src/AdministrationItem/filterConfigurationWizard.ts @@ -0,0 +1,15 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 { AdministrationItemType, IAdministrationItem } from './IAdministrationItem'; + +export function filterConfigurationWizard(configurationWizard: boolean) { + return (item: IAdministrationItem) => (configurationWizard + ? item.type !== AdministrationItemType.Administration + : item.type !== AdministrationItemType.ConfigurationWizard); +} diff --git a/webapp/packages/core-administration/src/AdministrationItem/orderAdministrationItems.ts b/webapp/packages/core-administration/src/AdministrationItem/orderAdministrationItems.ts new file mode 100644 index 0000000000..ccfe613830 --- /dev/null +++ b/webapp/packages/core-administration/src/AdministrationItem/orderAdministrationItems.ts @@ -0,0 +1,13 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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 { IAdministrationItem } from './IAdministrationItem'; + +export function orderAdministrationItems(itemA: IAdministrationItem, itemB: IAdministrationItem) { + return itemA.order - itemB.order; +} diff --git a/webapp/packages/core-administration/src/AdministrationScreen/AdministrationScreen.tsx b/webapp/packages/core-administration/src/AdministrationScreen/AdministrationScreen.tsx index 40b712baa4..0a8341076a 100644 --- a/webapp/packages/core-administration/src/AdministrationScreen/AdministrationScreen.tsx +++ b/webapp/packages/core-administration/src/AdministrationScreen/AdministrationScreen.tsx @@ -33,6 +33,7 @@ export const AdministrationScreen = observer(function AdministrationScreen() { <> { } @@ -105,8 +153,23 @@ export class AdministrationScreenService extends Bootstrap { return; } + // FIXME: for development purposes only, must be removed + if (this.screenService.isActive(AdministrationScreenService.setupName)) { + this.configurationWizard = true; + } + if (this.activeItem) { - await this.administrationItemService.activate(this.activeItem, this.activeItemSub, this.activeItemSubParam); + await this.administrationItemService.activate( + this.activeItem, + this.activeItemSub, + this.activeItemSubParam, + this.configurationWizard + ); } } + + private isAdministrationRouteActive() { + return this.screenService.isActive(AdministrationScreenService.screenName) + || this.screenService.isActive(AdministrationScreenService.setupName); + } } diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizardScreen.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizardScreen.tsx new file mode 100644 index 0000000000..76c1ac0fda --- /dev/null +++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizardScreen.tsx @@ -0,0 +1,44 @@ +/* + * cloudbeaver - Cloud Database Manager + * Copyright (C) 2020 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'; +import { useCallback } from 'react'; + +import { useService } from '@cloudbeaver/core-di'; +import { Translate } from '@cloudbeaver/core-localization'; +import { usePermission } from '@cloudbeaver/core-root'; + +import { Administration } from '../Administration/Administration'; +import { EAdminPermission } from '../EAdminPermission'; +import { AdministrationScreenService } from './AdministrationScreenService'; +import { AdministrationTopAppBar } from './AdministrationTopAppBar/AdministrationTopAppBar'; + +export const ConfigurationWizardScreen = observer(function ConfigurationWizardScreen() { + const administrationScreenService = useService(AdministrationScreenService); + if (!usePermission(EAdminPermission.admin)) { + return ; + } + + const handleSelect = useCallback( + (item: string) => administrationScreenService.navigateToItem(item), + [administrationScreenService] + ); + + return ( + <> + + + + ); +}); diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts index 26c2b47051..f700104cd0 100644 --- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts +++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministrationService.ts @@ -6,7 +6,7 @@ * you may not use this file except in compliance with the License. */ -import { AdministrationItemService, AdministrationScreenService } from '@cloudbeaver/core-administration'; +import { AdministrationItemService, AdministrationScreenService, AdministrationItemType } from '@cloudbeaver/core-administration'; import { injectable, Bootstrap } from '@cloudbeaver/core-di'; import { NotificationService } from '@cloudbeaver/core-events'; @@ -30,6 +30,7 @@ export class ConnectionsAdministrationService extends Bootstrap { register() { this.administrationItemService.create({ name: 'connections', + type: AdministrationItemType.Default, order: 2, sub: [ {