Merge branch 'ui-v0.3' into 'test'

Ui v0.3

See merge request opensource/answer!219

i18n/en_US.yaml

@@ -904,6 +904,10 @@ ui:
     installed_description: >-
       You appear to have already installed. To reinstall please clear your old
       database tables first.
+    db_failed: Database connection failed
+    db_failed_description: >-
+      This either means that the database information in your <1>config.yaml</1> file is incorrect or that contact with the database server could not be established. This could mean your host’s database server is down.
+
   page_404:
     description: 'Unfortunately, this page doesn''t exist.'
     back_home: Back to homepage

ui/config-overrides.js

@@ -35,12 +35,12 @@ module.exports = {
       const config = configFunction(proxy, allowedHost);
       config.proxy = {
         "/answer": {
-          target: "http://10.0.10.98:2060",
+          target: "http://10.0.20.88:8080/",
           changeOrigin: true,
           secure: false
         },
         "/installation": {
-          target: "http://10.0.10.98:2060",
+          target: "http://10.0.20.88:8080/",
           changeOrigin: true,
           secure: false
         }

ui/src/pages/Install/index.tsx

@@ -29,7 +29,10 @@ const Index: FC = () => {
   const [errorData, setErrorData] = useState<{ [propName: string]: any }>({
     msg: '',
   });
-  const [tableExist, setTableExist] = useState(false);
+  const [checkData, setCheckData] = useState({
+    db_table_exist: false,
+    db_connection_success: false,
+  });
 
   const [formData, setFormData] = useState<FormDataType>({
     lang: {
@@ -200,8 +203,8 @@ const Index: FC = () => {
 
   const handleInstallNow = (e) => {
     e.preventDefault();
-    if (tableExist) {
-      setStep(7);
+    if (checkData.db_table_exist) {
+      setStep(8);
     } else {
       setStep(4);
     }
@@ -210,9 +213,16 @@ const Index: FC = () => {
   const configYmlCheck = () => {
     checkConfigFileExists()
       .then((res) => {
-        setTableExist(res?.db_table_exist);
+        setCheckData({
+          db_table_exist: res.db_table_exist,
+          db_connection_success: res.db_connection_success,
+        });
         if (res && res.config_file_exist) {
-          setStep(6);
+          if (res.db_connection_success) {
+            setStep(6)
+          } else {
+            setStep(7);
+          }
         }
       })
       .finally(() => {
@@ -283,6 +293,15 @@ const Index: FC = () => {
                 )}
 
                 {step === 7 && (
+                  <div>
+                    <h5>{t('db_failed')}</h5>
+                    <p>
+                      <Trans i18nKey="install.db_failed_description" components={{ 1: <code />}} />
+                    </p>
+                  </div>
+                )}
+
+                {step === 8  && (
                   <div>
                     <h5>{t('installed')}</h5>
                     <p>{t('installed_description')}</p>