From 91834c9c7df8e62badc0ff1f36eb412c4e1797eb Mon Sep 17 00:00:00 2001
From: Wroud <wrouds@gmail.com>
Date: Wed, 9 Sep 2020 19:15:31 +0300
Subject: [PATCH] feat(core-administration): localization

CB-293
---
 .../Pages/Finish/FinishPage.tsx                |  9 +++++++--
 .../ServerConfigurationPage.tsx                | 10 ++++++++--
 .../Pages/Welcome/WelcomePage.tsx              | 14 ++++++++++++--
 .../core-administration/src/locales/en.ts      | 11 +++++++++--
 .../Connections/ConnectionsAdministration.tsx  | 18 +++++++++++++++++-
 .../core-connections/src/locales/en.ts         |  1 +
 6 files changed, 54 insertions(+), 9 deletions(-)

diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Finish/FinishPage.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Finish/FinishPage.tsx
index c19974014d..0e851d08ae 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Finish/FinishPage.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Finish/FinishPage.tsx
@@ -41,6 +41,11 @@ const styles = composes(
       border: solid 1px;
       padding: 16px 24px
     }
+
+    p {
+      line-height: 2;
+      white-space: pre;
+    }
   `
 );
 
@@ -52,8 +57,8 @@ export const FinishPage = observer(function FinishPage() {
     <layout-grid as="div">
       <layout-grid-inner as="div">
         <layout-grid-cell as='div' {...use({ span: 12 })}>
-          <h3>All done</h3>
-          <p>Go to fun</p>
+          <h3>{translate('administration_configuration_wizard_finish_title')}</h3>
+          <p>{translate('administration_configuration_wizard_finish_message')}</p>
 
           <Button
             type="button"
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationPage.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationPage.tsx
index 952441ddbc..f30cb4c8ac 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationPage.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/ServerConfiguration/ServerConfigurationPage.tsx
@@ -10,6 +10,7 @@ import { observer } from 'mobx-react';
 import styled, { use, css } from 'reshadow';
 
 import { useController } from '@cloudbeaver/core-di';
+import { useTranslate } from '@cloudbeaver/core-localization';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 
 import { ServerConfigurationForm } from './ServerConfigurationForm';
@@ -40,18 +41,23 @@ const styles = composes(
       border: solid 1px;
       padding: 16px 24px
     }
+
+    p {
+      line-height: 2;
+    }
   `
 );
 
 export const ServerConfigurationPage = observer(function ServerConfigurationPage() {
+  const translate = useTranslate();
   const controller = useController(ServerConfigurationPageController);
 
   return styled(useStyles(styles))(
     <layout-grid as="div">
       <layout-grid-inner as="div">
         <layout-grid-cell as='div' {...use({ span: 12 })}>
-          <h3>Welcome to initial server configuration</h3>
-          <p>Here you can configure something...</p>
+          <h3>{translate('administration_configuration_wizard_configuration_title')}</h3>
+          <p>{translate('administration_configuration_wizard_configuration_message')}</p>
           <ServerConfigurationForm
             serverConfig={controller.state.serverConfig}
             onChange={controller.onChange}
diff --git a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx
index 8e06a3a145..d8ab1c3ab5 100644
--- a/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx
+++ b/webapp/packages/core-administration/src/AdministrationScreen/ConfigurationWizard/Pages/Welcome/WelcomePage.tsx
@@ -8,6 +8,7 @@
 
 import styled, { use, css } from 'reshadow';
 
+import { Translate } from '@cloudbeaver/core-localization';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 
 const styles = composes(
@@ -35,6 +36,14 @@ const styles = composes(
       border: solid 1px;
       padding: 16px 24px
     }
+
+    p {
+      line-height: 2;
+    }
+
+    note {
+      composes: theme-typography--body2 from global;
+    }
   `
 );
 
@@ -43,8 +52,9 @@ export function WelcomePage() {
     <layout-grid as="div">
       <layout-grid-inner as="div">
         <layout-grid-cell as='div' {...use({ span: 12 })}>
-          <h3>Welcome to initial server configuration</h3>
-          <p>Here you can configure something...</p>
+          <h3><Translate token='administration_configuration_wizard_welcome_title'/></h3>
+          <p><Translate token='administration_configuration_wizard_welcome_message'/></p>
+          <note as='div'><Translate token='administration_configuration_wizard_welcome_note'/></note>
         </layout-grid-cell>
       </layout-grid-inner>
     </layout-grid>
diff --git a/webapp/packages/core-administration/src/locales/en.ts b/webapp/packages/core-administration/src/locales/en.ts
index 854c0ae53e..0932aa3db0 100644
--- a/webapp/packages/core-administration/src/locales/en.ts
+++ b/webapp/packages/core-administration/src/locales/en.ts
@@ -3,9 +3,14 @@ export default [
   ['administration_menu_back', 'Back to app'],
   ['administration_configuration_wizard_title', 'Initial Server Configuration'],
   ['administration_configuration_wizard_welcome', 'Welcome'],
-  ['administration_configuration_wizard_welcome_step_description', 'Welcome'],
+  ['administration_configuration_wizard_welcome_step_description', 'Welcome to CloudBeaver'],
+  ['administration_configuration_wizard_welcome_title', 'Welcome to CloudBeaver, cloud database management system!'],
+  ['administration_configuration_wizard_welcome_message', 'The easy configuration wizard will guide you through the several simple steps to set up the CloudBeaver server. You will need to set server information and administrator credentials. You can also add first database connections here.'],
+  ['administration_configuration_wizard_welcome_note', '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_step_description', 'Server configuration'],
+  ['administration_configuration_wizard_configuration_step_description', 'Main server configuration'],
+  ['administration_configuration_wizard_configuration_title', 'You can configure the main server parameters here.'],
+  ['administration_configuration_wizard_configuration_message', 'Administrator is super user which can configure server, set databases connections, manage other users and much more. Please, remember the entered password. It is not possible to recover administrator password automatically.'],
   ['administration_configuration_wizard_configuration_plugins', 'Configuration'],
   ['administration_configuration_wizard_configuration_server_info', 'Server Info'],
   ['administration_configuration_wizard_configuration_server_name', 'Server Name'],
@@ -28,4 +33,6 @@ export default [
   ['administration_configuration_wizard_configuration_navigator_show_utility_objects', 'Utility Objects'],
   ['administration_configuration_wizard_finish', 'Confirmation'],
   ['administration_configuration_wizard_finish_step_description', 'Confirmation'],
+  ['administration_configuration_wizard_finish_title', 'That is almost it.'],
+  ['administration_configuration_wizard_finish_message', 'Press the Finish button to complete the server configuration. You can return to the previous pages if you want to change or add something.\nWhen the configuration is completed all entered settings will be applied for your CloudBeaver server. You will be redirected to the main page to start working.\nYou can always login to the system as administrator to change the server settings.'],
 ];
diff --git a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
index 782baa80b4..66b59ab3da 100644
--- a/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
+++ b/webapp/packages/core-connections/src/Administration/Connections/ConnectionsAdministration.tsx
@@ -12,6 +12,7 @@ import styled, { css, use } from 'reshadow';
 import { AdministrationTools, AdministrationItemContentProps } from '@cloudbeaver/core-administration';
 import { Loader, IconButton } from '@cloudbeaver/core-blocks';
 import { useController } from '@cloudbeaver/core-di';
+import { Translate } from '@cloudbeaver/core-localization';
 import { useStyles, composes } from '@cloudbeaver/core-theming';
 
 import { ConnectionsAdministrationController } from './ConnectionsAdministrationController';
@@ -24,11 +25,16 @@ const styles = composes(
       composes: theme-background-surface theme-text-on-surface from global;
     }
 
-    layout-grid-cell {
+    layout-grid-cell, message-box {
       composes: theme-border-color-background from global;
     }
   `,
   css`
+    message-box {
+      padding: 16px 24px;
+      border-bottom: solid 1px;
+    }
+
     layout-grid {
       width: 100%;
       flex: 1;
@@ -59,6 +65,11 @@ const styles = composes(
       padding: 0 12px;
       padding-right: 24px;
     }
+    
+    p {
+      line-height: 2;
+      white-space: pre;
+    }
   `
 );
 
@@ -73,6 +84,11 @@ export const ConnectionsAdministration = observer(function ConnectionsAdministra
     <layout-grid as="div">
       <layout-grid-inner as="div">
         <layout-grid-cell as='div' {...use({ span: 12 })}>
+          {configurationWizard && (
+            <message-box as='div'>
+              <p><Translate token='connections_administration_configuration_wizard_message'/></p>
+            </message-box>
+          )}
           <AdministrationTools>
             <IconButton name="add" viewBox="0 0 28 28" onClick={controller.create} />
             <IconButton name="trash" viewBox="0 0 28 28" onClick={controller.delete} />
diff --git a/webapp/packages/core-connections/src/locales/en.ts b/webapp/packages/core-connections/src/locales/en.ts
index e6a3e0f8b0..108fa27a00 100644
--- a/webapp/packages/core-connections/src/locales/en.ts
+++ b/webapp/packages/core-connections/src/locales/en.ts
@@ -5,6 +5,7 @@ export default [
   ['connections_administration_new_connection', 'New connection'],
   ['connections_administration_configuration_wizard_step_title', 'Database connections'],
   ['connections_administration_configuration_wizard_step_description', 'Database connections'],
+  ['connections_administration_configuration_wizard_message', 'Here you can create the database connections manually or using a database server search feature.\nYou can skip this step and configure connections later.'],
   ['connections_connection_create_search_database', 'Search Database'],
   ['connections_connection_edit_authentication', 'Authentication'],
   ['connections_connection_edit_access', 'Access'],