chore: configuration wizard steps improvements

CB-245

webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomeForm.tsx

@@ -10,7 +10,7 @@ import { observer } from 'mobx-react';
 import styled, { css } from 'reshadow';
 
 import {
-  SubmittingForm, InputGroup, InputField, Checkbox, useFocus
+  SubmittingForm, InputGroup, InputField, Checkbox, useFocus, Switch
 } from '@cloudbeaver/core-blocks';
 import { useTranslate } from '@cloudbeaver/core-localization';
 import { ServerConfigInput, NavigatorSettingsInput } from '@cloudbeaver/core-sdk';
@@ -49,19 +49,19 @@ const boxStyles = css`
     flex-wrap: wrap;
   }
   box-element {
-    min-width: 450px;
+    width: 450px;
   }
 `;
 
 type Props = {
   serverConfig: ServerConfigInput;
-  navigatorConfig: NavigatorSettingsInput;
+  onChange: () => void;
   onSave: () => void;
 }
 
 export const WelcomeConfigForm = observer(function WelcomeConfigForm({
   serverConfig,
-  navigatorConfig,
+  onChange,
   onSave,
 }: Props) {
   const translate = useTranslate();
@@ -78,6 +78,7 @@ export const WelcomeConfigForm = observer(function WelcomeConfigForm({
                 name='serverName'
                 state={serverConfig}
                 mod='surface'
+                required
               >
                 {translate('administration_configuration_wizard_welcome_server_name')}
               </InputField>
@@ -90,6 +91,7 @@ export const WelcomeConfigForm = observer(function WelcomeConfigForm({
               name="adminName"
               state={serverConfig}
               mod='surface'
+              required
             >
               {translate('administration_configuration_wizard_welcome_admin_name')}
             </InputField>
@@ -98,6 +100,7 @@ export const WelcomeConfigForm = observer(function WelcomeConfigForm({
               name="adminPassword"
               state={serverConfig}
               mod='surface'
+              required
             >
               {translate('administration_configuration_wizard_welcome_admin_password')}
             </InputField>
@@ -105,89 +108,36 @@ export const WelcomeConfigForm = observer(function WelcomeConfigForm({
               <InputGroup>{translate('administration_configuration_wizard_welcome_plugins')}</InputGroup>
             </group>
             <group as="div">
-              <Checkbox
+              <Switch
                 name="anonymousAccessEnabled"
                 state={serverConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_anonymous_access')}
-                mod='surface'
-              />
+                description={translate('administration_configuration_wizard_welcome_anonymous_access_description')}
+                mod={['primary']}
+                disabled={!serverConfig.authenticationEnabled}
+              >
+                {translate('administration_configuration_wizard_welcome_anonymous_access')}
+              </Switch>
             </group>
             <group as="div">
-              <Checkbox
+              <Switch
                 name="authenticationEnabled"
                 state={serverConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_authentication')}
-                mod='surface'
-              />
+                description={translate('administration_configuration_wizard_welcome_authentication_description')}
+                onChange={onChange}
+                mod={['primary']}
+              >
+                {translate('administration_configuration_wizard_welcome_authentication')}
+              </Switch>
             </group>
             <group as="div">
-              <Checkbox
+              <Switch
                 name="customConnectionsEnabled"
                 state={serverConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_custom_connections')}
-                mod='surface'
-              />
-            </group>
-          </box-element>
-          <box-element as='div' hidden>
-            <group as="div">
-              <InputGroup>{translate('administration_configuration_wizard_welcome_navigator')}</InputGroup>
-            </group>
-            <group as="div">
-              <Checkbox
-                name="hideFolders"
-                state={navigatorConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_navigator_hide_folders')}
-                mod='surface'
-              />
-            </group>
-            <group as="div">
-              <Checkbox
-                name="hideSchemas"
-                state={navigatorConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_navigator_hide_schemas')}
-                mod='surface'
-              />
-            </group>
-            <group as="div">
-              <Checkbox
-                name="hideVirtualModel"
-                state={navigatorConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_navigator_hide_virtual_model')}
-                mod='surface'
-              />
-            </group>
-            <group as="div">
-              <Checkbox
-                name="mergeEntities"
-                state={navigatorConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_navigator_merge_entities')}
-                mod='surface'
-              />
-            </group>
-            <group as="div">
-              <Checkbox
-                name="showOnlyEntities"
-                state={navigatorConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_navigator_show_only_entities')}
-                mod='surface'
-              />
-            </group>
-            <group as="div">
-              <Checkbox
-                name="showSystemObjects"
-                state={navigatorConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_navigator_show_system_objects')}
-                mod='surface'
-              />
-            </group>
-            <group as="div">
-              <Checkbox
-                name="showUtilityObjects"
-                state={navigatorConfig}
-                checkboxLabel={translate('administration_configuration_wizard_welcome_navigator_show_utility_objects')}
-                mod='surface'
-              />
+                description={translate('administration_configuration_wizard_welcome_custom_connections_description')}
+                mod={['primary']}
+              >
+                {translate('administration_configuration_wizard_welcome_custom_connections')}
+              </Switch>
             </group>
           </box-element>
         </box>

webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx

@@ -54,7 +54,7 @@ export const WelcomePage = observer(function WelcomePage() {
           <p>Here you can configure something...</p>
           <WelcomeConfigForm
             serverConfig={controller.state.serverConfig}
-            navigatorConfig={controller.state.navigatorConfig}
+            onChange={controller.onChange}
             onSave={controller.finish}
           />
         </layout-grid-cell>

webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePageController.ts

@@ -27,7 +27,7 @@ export class WelcomePageController {
         serverName: 'CloudBeaver',
         adminName: 'admin',
         adminPassword: '',
-        anonymousAccessEnabled: false,
+        anonymousAccessEnabled: true,
         authenticationEnabled: false,
         customConnectionsEnabled: false,
       },
@@ -43,5 +43,11 @@ export class WelcomePageController {
     }));
   }
 
+  onChange = () => {
+    if (!this.state.serverConfig.authenticationEnabled) {
+      this.state.serverConfig.anonymousAccessEnabled = true;
+    }
+  }
+
   finish = () => this.configurationWizardService.next()
 }

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

@@ -2,18 +2,21 @@ export default [
   ['administration_menu_enter', 'Administration'],
   ['administration_menu_back', 'Back to app'],
   ['administration_configuration_wizard_title', 'Initial Server Configuration'],
-  ['administration_configuration_wizard_welcome', 'Welcome'],
-  ['administration_configuration_wizard_welcome_plugins', 'Plugins'],
-  ['administration_configuration_wizard_welcome_step_description', 'Welcome'],
+  ['administration_configuration_wizard_welcome', 'Server configuration'],
+  ['administration_configuration_wizard_welcome_plugins', 'Configuration'],
+  ['administration_configuration_wizard_welcome_step_description', 'Server configuration'],
   ['administration_configuration_wizard_welcome_server_name', 'Server Name'],
-  ['administration_configuration_wizard_welcome_admin', 'Admin Credentials'],
-  ['administration_configuration_wizard_welcome_admin_name', 'Name'],
-  ['administration_configuration_wizard_welcome_admin_password', 'Password'],
-  ['administration_configuration_wizard_welcome_anonymous_access', 'Anonymous Access'],
-  ['administration_configuration_wizard_welcome_authentication', 'Authentication'],
-  ['administration_configuration_wizard_welcome_custom_connections', 'Custom Connections'],
-  ['administration_configuration_wizard_finish', 'Finalization'],
-  ['administration_configuration_wizard_finish_step_description', 'Finalization'],
+  ['administration_configuration_wizard_welcome_admin', 'Administrator'],
+  ['administration_configuration_wizard_welcome_admin_name', 'Admin user name'],
+  ['administration_configuration_wizard_welcome_admin_password', 'Admin password'],
+  ['administration_configuration_wizard_welcome_anonymous_access', 'Allow anonymous access'],
+  ['administration_configuration_wizard_welcome_anonymous_access_description', 'Allows to work with CloudBeaver without user authentication'],
+  ['administration_configuration_wizard_welcome_authentication', 'Enable users authentication'],
+  ['administration_configuration_wizard_welcome_authentication_description', 'Allows users to authenticate. Otherwise only anonymous access is enabled'],
+  ['administration_configuration_wizard_welcome_custom_connections', 'Enable custom connections'],
+  ['administration_configuration_wizard_welcome_custom_connections_description', 'Allows users to create custom connections. Otherwise only administrator can create connections'],
+  ['administration_configuration_wizard_finish', 'Confirmation'],
+  ['administration_configuration_wizard_finish_step_description', 'Confirmation'],
   ['administration_configuration_wizard_welcome_navigator', 'Navigator'],
   ['administration_configuration_wizard_welcome_navigator_hide_folders', 'Hide Folders'],
   ['administration_configuration_wizard_welcome_navigator_hide_schemas', 'Hide Schemas'],

webapp/packages/core-blocks/src/FormControls/InputGroup.tsx

@@ -6,21 +6,30 @@
  * you may not use this file except in compliance with the License.
  */
 
-import styled, { use, css } from 'reshadow';
+import styled, { css } from 'reshadow';
 
-import { useStyles } from '@cloudbeaver/core-theming';
+import { useStyles, composes } from '@cloudbeaver/core-theming';
 
 import { baseFormControlStyles } from './baseFormControlStyles';
 
-const styles = css`
-  field-label {
-    composes: theme-typography--body2 from global;
-    margin-left: 150px;
-    text-align: left;
-    font-weight: initial;
-  }
-`;
-
+const styles = composes(
+  css`
+    field-label {
+      composes: theme-border-color-background from global;
+    }
+  `,
+  css`
+    field-label {
+      composes: theme-typography--body2 from global;
+      margin-left: 150px;
+      text-align: left;
+      font-weight: initial;
+      padding-bottom: 8px;
+      border-bottom: solid 1px #dedede;
+      width: 100%;
+    }
+  `
+);
 type Props = React.PropsWithChildren<{
   className?: string;
 }>

webapp/packages/core-connections/src/Administration/Connections/ConnectionsDrawerItem.tsx

@@ -14,12 +14,12 @@ import { Translate } from '@cloudbeaver/core-localization';
 import { useStyles } from '@cloudbeaver/core-theming';
 
 export function ConnectionsDrawerItem({
-  item, onSelect, style, disabled,
+  item, onSelect, style, disabled, configurationWizard,
 }: AdministrationItemDrawerProps) {
   return styled(useStyles(...style))(
     <Tab tabId={item.name} onOpen={() => onSelect(item.name)} disabled={disabled}>
       <TabIcon icon='/icons/connection.svg' />
-      <TabTitle><Translate token='connections_administration_item'/></TabTitle>
+      <TabTitle><Translate token={configurationWizard ? 'connections_administration_configuration_wizard_step_title' : 'connections_administration_item'}/></TabTitle>
     </Tab>
   );
 }

webapp/packages/core-connections/src/locales/en.ts

@@ -1,7 +1,8 @@
 export default [
   ['connections_administration_item', 'Connection Management'],
   ['connections_administration_new_connection', 'New connection'],
-  ['connections_administration_configuration_wizard_step_description', 'Configuring connections...'],
+  ['connections_administration_configuration_wizard_step_title', 'Database connections'],
+  ['connections_administration_configuration_wizard_step_description', 'Database connections'],
   ['connections_connection_edit_authentication', 'Authentication'],
   ['connections_connection_edit_access', 'Access'],
   ['connections_connection_edit_access_load_failed', 'Connection access loading failed'],