[Feature]: Added Localisation (ToolJet#3746)

* Added localisation

* Closed modal after language selection

* updated transaltaion setup

* Updated language tooltip

* Added fallback language support

* Adding english library resource for translation (ToolJet#3844)

* Adding English dictionary for the widget lists in the inspector

* added leftSideBar object in en.json and implemented it for leftSidebar icon text

* renamed leftSideBar to leftSidebar and added resources for tip in the left side bar

* added english translation resources for leftsidebar debugger

* added english language resources for the global settings

* added english language resources for data sources in left sidebar

* added english language resources for the share button and share modal in the editor

* added english language resources for release button, manageOrgUsers, appVersionManager

* added english language resources for Queries and Please select a widget to inspect in the editor

* added english language resources for data source list , data source manager, and query manager(partially)

* added english language resources for queryManager, transformation, preview

* added english language resources for dark mode toggle in the headers inside homepage

* added fallback message for dark mode toggle

* added resources for language change in the headers inside homepage

* added resources for notification center in the header inside homepage

* added resources for organization and manage users components in header inside homepage

* added resources in manageGroupPermission

* added resources for manageGroupPermissionsResources component

* added resources for manageSSO and generalSettings components

* added resources for google sso

* added resources for github sso

* added resources for environment variables in manageSSO

* added resources for profile and setting page

* added resources for app card and app card menu

* added resources for folder section and app list in homepage

* added resources for header section in the homepage

* added resources for pagination in homepage

* added resources for modals in the homepage

* added resources for blank page

* added resources for login page

* added resources for forgot password page

* added resources for sign up page

* added resources for onBoarding component

* added resources for reset password page

* deleted duplicate key for readDocumentation

* deleted duplicate key for cancel in en.json and added translation for cancel at few places

* removing duplicate copy of save key in en.json

* added translation for CommentActions.jsx components

* deleted duplicate copy of search key in en.json and added resources for create and search queries , select keys

* fix typo errors

* fixed typo errors

* shorten the key for loginAndSignUpAndForgotPassword to loginSignupPage in en.json file and related files

* shorten the key noLoginMethodsEnabledForThisWorkspace to noLoginMethodsEnabled

* shorten the key pleaseCheckYourEmailForConfirmationLink to emailConfirmLink

* shorten the key dontHaveAccountYet to dontHaveAccount

* shorten keys from loginSignupPage key in en.json

* shorten keys of shareModal nested object in en.json

* shorten the key in appVersionManager nested object

* shorten the keys for queryManager nested object in the en.json

* delete duplicate copy of environmentVar and shorten manageEnvironmentVariables,environmentVariables

* shorten keys in the organization nested object

* shorten keys in the homePage nested object in en.json file

* added inspector and eventManager empty object

* added resources to RedirectSSO component

* added resources for OAuth2

* added resources for TemplateCard.jsx

* added resources for TemplateLibraryModal.jsx

* added resources for ConfirmationPage.jsx

* added resources for ConfirmationPage component

* removed translation in App.jsx file

* added resources for Slack.jsx

* added resources for GoogleSheets.jsx

* added resources for CodeBuilder.jsx

* added resources for CommentBody and CommentFooter

* added resources for TestConnection component

* added resources for AllignButton.jsx

* added resources for Openapi and Stripe components

* added resources for ErrorBoundary

* added resources for Viewer.jsx

* Translation for widgets, table

Co-authored-by: Kavin Venkatachalam <kavin.saratha@gmail.com>

* Commented Language selection

* Fixed typos

* Updated fr.json file

Co-authored-by: Manish Kushare <kushare.manish9@gmail.com>

frontend/assets/translations/languages.json

@@ -0,0 +1,6 @@
+{
+  "languageList": [
+  { "lang": "English", "code": "en", "nativeLang": "English" },
+  { "lang": "French", "code": "fr", "nativeLang": "Français" }
+  ]
+}

frontend/package.json

@@ -21,6 +21,11 @@
     "emoji-mart": "^3.0.1",
     "fuse.js": "^6.4.6",
     "history": "^4.9.0",
+    "html-loader": "^3.1.0",
+    "html-webpack-plugin": "^5.3.2",
+    "i18next": "^21.8.14",
+    "i18next-browser-languagedetector": "^6.1.4",
+    "i18next-http-backend": "^1.4.1",
     "immer": "^9.0.6",
     "immutability-helper": "^3.1.1",
     "lodash": "^4.17.21",
@@ -50,6 +55,7 @@
     "react-google-login": "^5.2.2",
     "react-hot-toast": "^2.1.1",
     "react-hotkeys-hook": "^3.4.4",
+    "react-i18next": "^11.18.3",
     "react-json-tree": "^0.16.1",
     "react-json-view": "^1.21.3",
     "react-lazy-load-image-component": "^1.5.1",

frontend/src/App/App.jsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { Suspense } from 'react';
 import config from 'config';
 import { BrowserRouter, Route, Redirect } from 'react-router-dom';
 import { history } from '@/_helpers';
@@ -86,7 +86,7 @@ class App extends React.Component {
     }
 
     return (
-      <>
+      <Suspense fallback={null}>
         <BrowserRouter history={history} basename={window.public_config?.SUB_PATH || '/'}>
           <div className={`main-wrapper ${darkMode ? 'theme-dark' : ''}`}>
             {updateAvailable && (
@@ -261,7 +261,7 @@ class App extends React.Component {
           </div>
         </BrowserRouter>
         <Toast toastOptions={toastOptions} />
-      </>
+      </Suspense>
     );
   }
 }

frontend/src/ConfirmationPage/ConfirmationPage.jsx

@@ -4,8 +4,9 @@ import { toast } from 'react-hot-toast';
 import GoogleSSOLoginButton from '@ee/components/LoginPage/GoogleSSOLoginButton';
 import GitSSOLoginButton from '@ee/components/LoginPage/GitSSOLoginButton';
 import { ShowLoading } from '@/_components';
+import { withTranslation } from 'react-i18next';
 
-class ConfirmationPage extends React.Component {
+class ConfirmationPageComponent extends React.Component {
   constructor(props) {
     super(props);
 
@@ -150,30 +151,33 @@ class ConfirmationPage extends React.Component {
             ) : (
               <div className="card-body">
                 <h2 className="card-title text-center mb-4" data-cy="card-title">
-                  Set up your account
+                  {this.props.t('confirmationPage.setupAccount', 'Set up your account')}
                 </h2>
                 {this.state.configs?.enable_sign_up && (
                   <div className="d-flex flex-column align-items-center separator-bottom">
                     {this.state.configs?.google?.enabled && (
                       <GoogleSSOLoginButton
-                        text="Sign up with Google"
+                        text={this.props.t('confirmationPage.signupWithGoogle', 'Sign up with Google')}
                         configs={this.state.configs?.google?.configs}
                         configId={this.state.configs?.google?.config_id}
                       />
                     )}
                     {this.state.configs?.git?.enabled && (
-                      <GitSSOLoginButton text="Sign up with GitHub" configs={this.state.configs?.git?.configs} />
+                      <GitSSOLoginButton
+                        text={this.props.t('confirmationPage.signupWithGitHub', 'Sign up with GitHub')}
+                        configs={this.state.configs?.git?.configs}
+                      />
                     )}
                     <div className="mt-2 separator">
                       <h2>
-                        <span>OR</span>
+                        <span>{this.props.t('confirmationPage.or', 'OR')}</span>
                       </h2>
                     </div>
                   </div>
                 )}
                 <div className="mb-3">
                   <label className="form-label" data-cy="first-name-label">
-                    First name
+                    {this.props.t('confirmationPage.firstName', 'First name')}
                   </label>
                   <div className="input-group input-group-flat">
                     <input
@@ -189,7 +193,7 @@ class ConfirmationPage extends React.Component {
                 </div>
                 <div className="mb-3">
                   <label className="form-label" data-cy="last-name-label">
-                    Last name
+                    {this.props.t('confirmationPage.lastName', 'Last name')}
                   </label>
                   <div className="input-group input-group-flat">
                     <input
@@ -205,7 +209,7 @@ class ConfirmationPage extends React.Component {
                 </div>
                 <div className="mb-3">
                   <label className="form-label" data-cy="company-label">
-                    Company
+                    {this.props.t('confirmationPage.company', 'Company')}
                   </label>
                   <div className="input-group input-group-flat">
                     <input
@@ -221,7 +225,7 @@ class ConfirmationPage extends React.Component {
                 </div>
                 <div className="mb-3">
                   <div className="form-label" data-cy="role-label">
-                    Role
+                    {this.props.t('confirmationPage.role', 'Role')}
                   </div>
                   <select
                     className="form-select"
@@ -231,14 +235,14 @@ class ConfirmationPage extends React.Component {
                     data-cy="role-options"
                   >
                     <option value="" disabled>
-                      Please select
+                      {this.props.t('confirmationPage.pleaseSelect', 'Please select')}
                     </option>
                     {roleOptions}
                   </select>
                 </div>
                 <div className="mb-3">
                   <label className="form-label" data-cy="password-label">
-                    Password
+                    {this.props.t('confirmationPage.password', 'Password')}
                   </label>
                   <div className="input-group input-group-flat">
                     <input
@@ -254,7 +258,7 @@ class ConfirmationPage extends React.Component {
                 </div>
                 <div className="mb-3">
                   <label className="form-label" data-cy="confirm-password-label">
-                    Confirm Password
+                    {this.props.t('confirmationPage.confirmPassword', 'Confirm Password')}
                   </label>
                   <div className="input-group input-group-flat">
                     <input
@@ -270,16 +274,19 @@ class ConfirmationPage extends React.Component {
                 </div>
                 <div className="form-footer">
                   <p data-cy="terms-and-condition-info">
-                    By clicking the button below, you agree to our{' '}
-                    <a href="https://tooljet.io/terms">Terms and Conditions</a>.
+                    {this.props.t('confirmationPage.clickAndAgree', 'By clicking the button below, you agree to our')}{' '}
+                    <a href="https://tooljet.io/terms">
+                      {this.props.t('confirmationPage.termsAndConditions', 'Terms and Conditions')}
+                    </a>
+                    .
                   </p>
                   <button
                     className={`btn mt-2 btn-primary w-100 ${isLoading ? ' btn-loading' : ''}`}
                     onClick={this.setPassword}
                     disabled={isLoading}
                     data-cy="finish-setup-button"
                   >
-                    Finish account setup
+                    {this.props.t('confirmationPage.finishAccountSetup', 'Finish account setup')}
                   </button>
                 </div>
               </div>
@@ -291,4 +298,4 @@ class ConfirmationPage extends React.Component {
   }
 }
 
-export { ConfirmationPage };
+export const ConfirmationPage = withTranslation()(ConfirmationPageComponent);

frontend/src/ConfirmationPage/OrganizationInvitationPage.jsx

@@ -4,8 +4,9 @@ import { toast } from 'react-hot-toast';
 import GoogleSSOLoginButton from '@ee/components/LoginPage/GoogleSSOLoginButton';
 import GitSSOLoginButton from '@ee/components/LoginPage/GitSSOLoginButton';
 import { ShowLoading } from '@/_components';
+import { withTranslation } from 'react-i18next';
 
-class OrganizationInvitationPage extends React.Component {
+class OrganizationInvitationPageComponent extends React.Component {
   constructor(props) {
     super(props);
 
@@ -101,7 +102,7 @@ class OrganizationInvitationPage extends React.Component {
                 {!this.single_organization ? (
                   <>
                     <h2 className="card-title text-center mb-2" data-cy="card-title">
-                      Already have an account?
+                      {this.props.t('confirmationPage.accountExists', 'Already have an account?')}
                     </h2>
                     <div className="mb-3">
                       <button
@@ -110,37 +111,40 @@ class OrganizationInvitationPage extends React.Component {
                         disabled={isLoading}
                         data-cy="accept-invite-button"
                       >
-                        Accept invite
+                        {this.props.t('confirmationPage.acceptInvite', 'Accept invite')}
                       </button>
                     </div>
                   </>
                 ) : (
                   <>
                     <h2 className="card-title text-center mb-4" data-cy="card-title">
-                      Set up your account
+                      {this.props.t('confirmationPage.setupAccount', 'Set up your account')}
                     </h2>
                     {this.state.configs?.enable_sign_up && (
                       <div className="d-flex flex-column align-items-center separator-bottom">
                         {this.state.configs?.google?.enabled && (
                           <GoogleSSOLoginButton
-                            text="Sign up with Google"
+                            text={this.props.t('confirmationPage.signupWithGoogle', 'Sign up with Google')}
                             configs={this.state.configs?.google?.configs}
                             configId={this.state.configs?.google?.config_id}
                           />
                         )}
                         {this.state.configs?.git?.enabled && (
-                          <GitSSOLoginButton text="Sign up with GitHub" configs={this.state.configs?.git?.configs} />
+                          <GitSSOLoginButton
+                            text={this.props.t('confirmationPage.signupWithGitHub', 'Sign up with GitHub')}
+                            configs={this.state.configs?.git?.configs}
+                          />
                         )}
                         <div className="mt-2 separator">
                           <h2>
-                            <span>OR</span>
+                            <span>{this.props.t('confirmationPage.or', 'OR')}</span>
                           </h2>
                         </div>
                       </div>
                     )}
                     <div className="mb-3">
                       <label className="form-label" data-cy="password-label">
-                        Password
+                        {this.props.t('confirmationPage.password', 'Password')}
                       </label>
                       <div className="input-group input-group-flat">
                         <input
@@ -156,7 +160,7 @@ class OrganizationInvitationPage extends React.Component {
                     </div>
                     <div className="mb-3">
                       <label className="form-label" data-cy="confirm-password-label">
-                        Confirm Password
+                        {this.props.t('confirmationPage.confirmPassword', 'Confirm Password')}
                       </label>
                       <div className="input-group input-group-flat">
                         <input
@@ -172,16 +176,24 @@ class OrganizationInvitationPage extends React.Component {
                     </div>
                     <div className="form-footer">
                       <p data-cy="terms-and-condition-info">
-                        By clicking the button below, you agree to our{' '}
-                        <a href="https://tooljet.io/terms">Terms and Conditions</a>.
+                        {this.props.t(
+                          'confirmationPage.clickAndAgree',
+                          'By clicking the button below, you agree to our'
+                        )}{' '}
+                        <a href="https://tooljet.io/terms">
+                          {this.props.t('confirmationPage.termsAndConditions', 'Terms and Conditions')}
+                        </a>
+                        .
                       </p>
                       <button
                         className={`btn mt-2 btn-primary w-100 ${isLoading ? ' btn-loading' : ''}`}
                         onClick={(e) => this.acceptInvite(e, true)}
                         disabled={isLoading}
                         data-cy="finish-setup-button"
                       >
-                        Finish account setup and accept invite
+                        {this.props.t('confirmationPage.finishAccountSetup', 'Finish account setup')}{' '}
+                        {this.props.t('confirmationPage.and', 'and')}{' '}
+                        {this.props.t('confirmationPage.acceptInvite', 'accept invite')}
                       </button>
                     </div>
                   </>
@@ -195,4 +207,4 @@ class OrganizationInvitationPage extends React.Component {
   }
 }
 
-export { OrganizationInvitationPage };
+export const OrganizationInvitationPage = withTranslation()(OrganizationInvitationPageComponent);