Cb 5178 redesign administration menu

webapp/packages/core-administration/src/AdministrationItem/AdministrationItemService.ts

@@ -142,7 +142,7 @@ export class AdministrationItemService {
     return sub;
   }
 
-  create(options: IAdministrationItemOptions): void {
+  create(options: IAdministrationItemOptions): IAdministrationItem {
     const type = options.type ?? AdministrationItemType.Administration;
 
     const existedIndex = this.items.findIndex(
@@ -160,7 +160,9 @@ export class AdministrationItemService {
       sub: options.sub ?? [],
       order: options.order ?? Number.MAX_SAFE_INTEGER,
     };
-    this.items.push(item);
+    const index = this.items.push(item);
+
+    return this.items[index - 1];
   }
 
   async activate(screen: IAdministrationItemRoute, configurationWizard: boolean, outside: boolean, outsideAdminPage: boolean): Promise<void> {

webapp/packages/plugin-administration/src/Administration/Administration.tsx

@@ -88,8 +88,8 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
   const optionsPanelService = useService(OptionsPanelService);
 
   const OptionsPanel = optionsPanelService.getPanelComponent();
-  const items = administrationItemService.getActiveItems(configurationWizard);
-  const onlyActiveItem = items.find(filterOnlyActive(configurationWizard));
+  const visibleItems = administrationItemService.getActiveItems(configurationWizard);
+  const onlyActiveItem = administrationItemService.items.find(filterOnlyActive(configurationWizard));
 
   useLayoutEffect(() => {
     contentRef.current?.scrollTo({ top: 0, left: 0 });
@@ -101,7 +101,7 @@ export const Administration = observer<React.PropsWithChildren<Props>>(function
       <TabsState currentTabId={activeScreen?.item} localState={administrationScreenService.itemState} orientation="vertical">
         <SContext registry={tabsRegistry}>
           <TabList aria-label="Administration items" vertical>
-            {items.map(item => (
+            {visibleItems.map(item => (
               <DrawerItem
                 key={item.name}
                 item={item}

webapp/packages/plugin-administration/src/ConfigurationWizard/ConfigurationWizardPagesBootstrapService.ts

@@ -49,7 +49,7 @@ export class ConfigurationWizardPagesBootstrapService extends Bootstrap {
         onFinish: this.serverConfigurationService.saveConfiguration.bind(this.serverConfigurationService, false),
         onConfigurationFinish: this.serverConfigurationService.saveConfiguration.bind(this.serverConfigurationService, true),
       },
-      order: 4,
+      order: 2,
       onActivate: () => this.serverConfigurationService.activate(),
       onDeActivate: this.serverConfigurationService.deactivate.bind(this.serverConfigurationService),
       onLoad: this.serverConfigurationService.loadConfig.bind(this.serverConfigurationService, false),

webapp/packages/plugin-administration/src/locales/en.ts

@@ -1,3 +1,10 @@
+/*
+ * 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.
+ */
 export default [
   ['administration_server_configuration_save_confirmation_title', 'Server settings update'],
   ['administration_server_configuration_save_confirmation_message', 'You are about to change critical settings. Are you sure?'],
@@ -14,7 +21,7 @@ export default [
     'Note: you will be able to change these configuration parameters later on the administration panel.',
   ],
 
-  ['administration_configuration_wizard_configuration', 'Server configuration'],
+  ['administration_configuration_wizard_configuration', 'Server Configuration'],
   ['administration_configuration_wizard_configuration_step_description', 'Main server configuration'],
   ['administration_configuration_wizard_configuration_title', 'You can configure the main server parameters here.'],
   [

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

@@ -52,7 +52,7 @@ export class UsersAdministrationService extends Bootstrap {
   register() {
     this.administrationItemService.create({
       name: UsersAdministrationNavigationService.ItemName,
-      order: 3,
+      order: 4,
       sub: [
         {
           name: EUsersAdministrationSub.MetaProperties,

webapp/packages/plugin-authentication-administration/src/Administration/Users/shared/UsersAdministration.module.css

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
+// TODO: same styles in cloudbeaver/webapp/packages/plugin-product-information-administration/src/shared/ProductInfoPage.module.css
 .tabList {
   position: relative;
   flex-shrink: 0;

webapp/packages/plugin-authentication-administration/src/Administration/Users/shared/UsersAdministrationTab.module.css

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
+// TODO: same styles cloudbeaver/webapp/packages/plugin-product-information-administration/src/shared/ProductInfoPage.module.css
 .administrationTabs {
   & .tab {
     height: 100%;

webapp/packages/plugin-authentication-administration/src/Administration/Users/shared/UsersAdministrationTabPanel.module.css

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
+// TODO: same styles cloudbeaver/webapp/packages/plugin-product-information-administration/src/shared/ProductInfoPageTabPanel.module.css
 .tabPanel {
   overflow: auto;
 }

webapp/packages/plugin-authentication-administration/src/Administration/Users/shared/UsersAdministrationTabTitle.module.css

@@ -6,6 +6,7 @@
  * you may not use this file except in compliance with the License.
  */
 
+// TODO: same styles cloudbeaver/webapp/packages/plugin-product-information-administration/src/shared/ProductInfoPageTabTitle.module.css
 .tabTitle {
   font-weight: 700;
 }

webapp/packages/plugin-authentication-administration/src/locales/en.ts

@@ -23,7 +23,7 @@ export default [
   ['authentication_administration_user_auth_methods', 'Auth Methods'],
   ['authentication_administration_user_auth_methods_empty', 'No available auth methods'],
   ['authentication_administration_user_auth_method_no_details', 'No details available'],
-  ['authentication_administration_item', 'Access Management'],
+  ['authentication_administration_item', 'Users and Teams'],
   ['authentication_administration_item_users', 'Users'],
   ['authentication_administration_item_metaParameters', 'Meta Parameters'],
   ['authentication_administration_tools_add_tooltip', 'Create new user'],

webapp/packages/plugin-authentication-administration/src/locales/fr.ts

@@ -23,7 +23,7 @@ export default [
   ['authentication_administration_user_auth_methods', "Méthodes d'authentification"],
   ['authentication_administration_user_auth_methods_empty', "Aucune méthode d'authentification disponible"],
   ['authentication_administration_user_auth_method_no_details', 'Aucun détail disponible'],
-  ['authentication_administration_item', 'Gestion des accès'],
+  ['authentication_administration_item', 'Users and Teams'],
   ['authentication_administration_item_users', 'Utilisateurs'],
   ['authentication_administration_item_metaParameters', 'Paramètres Méta'],
   ['authentication_administration_tools_add_tooltip', 'Créer un nouvel utilisateur'],

webapp/packages/plugin-authentication-administration/src/locales/it.ts

@@ -22,7 +22,7 @@ export default [
   ['authentication_administration_user_auth_methods', 'Auth Methods'],
   ['authentication_administration_user_auth_methods_empty', 'No available auth methods'],
   ['authentication_administration_user_auth_method_no_details', 'No details available'],
-  ['authentication_administration_item', 'Utenti'],
+  ['authentication_administration_item', 'Users and Teams'],
   ['authentication_administration_tools_add_tooltip', 'Create new user'],
   ['authentication_administration_tools_refresh_tooltip', 'Aggiorna la lista utenti'],
   ['authentication_administration_tools_delete_tooltip', 'Elimina gli utenti selezionati'],

webapp/packages/plugin-authentication-administration/src/locales/ru.ts

@@ -23,7 +23,7 @@ export default [
   ['authentication_administration_user_auth_methods', 'Способы входа'],
   ['authentication_administration_user_auth_methods_empty', 'Нет доступных способов входа'],
   ['authentication_administration_user_auth_method_no_details', 'Дополнительная информация не доступна'],
-  ['authentication_administration_item', 'Управление доступом'],
+  ['authentication_administration_item', 'Пользователи и команды'],
   ['authentication_administration_item_users', 'Пользователи'],
   ['authentication_administration_item_metaParameters', 'Свойства Пользователей'],
   ['authentication_administration_tools_add_tooltip', 'Создать нового пользователя'],

webapp/packages/plugin-authentication-administration/src/locales/zh.ts

@@ -22,7 +22,7 @@ export default [
   ['authentication_administration_user_auth_methods_empty', 'No available auth methods'],
   ['authentication_administration_user_auth_method_no_details', 'No details available'],
   ['authentication_administration_user_local', 'Local user'],
-  ['authentication_administration_item', '访问管理'],
+  ['authentication_administration_item', 'Users and Teams'],
   ['authentication_administration_item_users', '用户'],
   ['authentication_administration_item_metaParameters', '元参数'],
   ['authentication_administration_tools_add_tooltip', 'Create new user'],

webapp/packages/plugin-connections-administration/src/Administration/Connections/ConnectionsAdministrationService.ts

@@ -59,7 +59,7 @@ export class ConnectionsAdministrationService extends Bootstrap {
     this.administrationItemService.create({
       name: 'connections',
       type: AdministrationItemType.Administration,
-      order: 2.2,
+      order: 5,
       configurationWizardOptions: {
         defaultRoute: { sub: 'create' },
         description: 'connections_administration_configuration_wizard_step_description',

webapp/packages/plugin-product-information-administration/.gitignore

@@ -0,0 +1,17 @@
+# dependencies
+/node_modules
+
+# testing
+/coverage
+
+# production
+/lib
+
+# misc
+.DS_Store
+.env*
+
+# debug
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

webapp/packages/plugin-product-information-administration/package.json

@@ -0,0 +1,37 @@
+{
+  "name": "@cloudbeaver/plugin-product-information-administration",
+  "sideEffects": [
+    "src/**/*.css",
+    "src/**/*.scss",
+    "public/**/*"
+  ],
+  "version": "0.1.0",
+  "description": "",
+  "license": "Apache-2.0",
+  "main": "dist/index.js",
+  "scripts": {
+    "build": "tsc -b",
+    "clean": "rimraf --glob dist",
+    "lint": "eslint ./src/ --ext .ts,.tsx",
+    "validate-dependencies": "core-cli-validate-dependencies",
+    "update-ts-references": "yarn run clean && typescript-resolve-references"
+  },
+  "dependencies": {
+    "@cloudbeaver/core-administration": "^0",
+    "@cloudbeaver/core-blocks": "^0",
+    "@cloudbeaver/core-di": "^0",
+    "@cloudbeaver/core-localization": "^0",
+    "@cloudbeaver/core-ui": "^0",
+    "@cloudbeaver/core-version": "^0",
+    "@cloudbeaver/core-version-update": "^0",
+    "mobx": "^6",
+    "mobx-react-lite": "^4",
+    "react": "^18"
+  },
+  "peerDependencies": {},
+  "devDependencies": {
+    "@types/react": "^18",
+    "typescript": "^5",
+    "typescript-plugin-css-modules": "^5"
+  }
+}

webapp/packages/plugin-product-information-administration/src/LocaleService.ts

@@ -0,0 +1,37 @@
+/*
+ * 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 { Bootstrap, injectable } from '@cloudbeaver/core-di';
+import { LocalizationService } from '@cloudbeaver/core-localization';
+
+@injectable()
+export class LocaleService extends Bootstrap {
+  constructor(private readonly localizationService: LocalizationService) {
+    super();
+  }
+
+  register(): void | Promise<void> {
+    this.localizationService.addProvider(this.provider.bind(this));
+  }
+
+  load(): void | Promise<void> {}
+
+  private async provider(locale: string) {
+    switch (locale) {
+      case 'ru':
+        return (await import('./locales/ru')).default;
+      case 'it':
+        return (await import('./locales/it')).default;
+      case 'zh':
+        return (await import('./locales/zh')).default;
+      case 'fr':
+        return (await import('./locales/fr')).default;
+      default:
+        return (await import('./locales/en')).default;
+    }
+  }
+}

webapp/packages/plugin-version-update-administration/src/VersionUpdateDrawerItem.module.css → webapp/packages/plugin-product-information-administration/src/ProductInfoDrawerItem.module.css

@@ -5,19 +5,11 @@
  * Licensed under the Apache License, Version 2.0.
  * you may not use this file except in compliance with the License.
  */
-.tabTitle {
-  flex: 1;
-}
 
 .icon {
   composes: theme-background-primary from global;
   width: 8px;
   height: 8px;
   border-radius: 50%;
   flex-shrink: 0;
-  margin-right: 12px;
-}
-
-.iconOrImage {
-  width: 16px;
 }

webapp/packages/plugin-product-information-administration/src/ProductInfoDrawerItem.tsx

@@ -0,0 +1,40 @@
+/*
+ * 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 type { AdministrationItemDrawerProps } from '@cloudbeaver/core-administration';
+import { s, Translate, useResource, useS, useTranslate } from '@cloudbeaver/core-blocks';
+import { useService } from '@cloudbeaver/core-di';
+import { CachedMapAllKey } from '@cloudbeaver/core-resource';
+import { Tab, TabIcon, TabTitle } from '@cloudbeaver/core-ui';
+import { VersionResource } from '@cloudbeaver/core-version';
+import { VersionUpdateService } from '@cloudbeaver/core-version-update';
+
+import style from './ProductInfoDrawerItem.module.css';
+
+export const ProductInfoDrawerItem: React.FC<AdministrationItemDrawerProps> = function ProductInfoDrawerItem({ item, onSelect, disabled }) {
+  const styles = useS(style);
+  const versionUpdateService = useService(VersionUpdateService);
+  const newVersionAvailable = versionUpdateService.newVersionAvailable;
+  const translate = useTranslate();
+
+  useResource(ProductInfoDrawerItem, VersionResource, CachedMapAllKey);
+
+  return (
+    <Tab
+      title={translate(newVersionAvailable ? 'version_update_new_version_available' : undefined)}
+      tabId={item.name}
+      disabled={disabled}
+      onOpen={() => onSelect(item.name)}
+    >
+      <TabIcon icon="/icons/license.svg" viewBox="0 0 16 16" />
+      <TabTitle>
+        <Translate token="administration_settings_menu_title" />
+      </TabTitle>
+      {newVersionAvailable && <div className={s(styles, { icon: true })} />}
+    </Tab>
+  );
+};

webapp/packages/plugin-product-information-administration/src/ProductInfoNavigationService.ts

@@ -0,0 +1,26 @@
+/*
+ * 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 { AdministrationScreenService, IRouteParams } from '@cloudbeaver/core-administration';
+import { injectable } from '@cloudbeaver/core-di';
+
+@injectable()
+export class ProductInfoNavigationService {
+  static ROOT_ITEM = 'product-info';
+
+  constructor(private readonly administrationScreenService: AdministrationScreenService) {
+    this.navToRoot = this.navToRoot.bind(this);
+  }
+
+  navToRoot(): void {
+    this.administrationScreenService.navigateToItem(ProductInfoNavigationService.ROOT_ITEM);
+  }
+
+  navigateToSub(params: IRouteParams): void {
+    this.administrationScreenService.navigateToItemSub(ProductInfoNavigationService.ROOT_ITEM, params.sub, params.param);
+  }
+}