- Set up your account + {this.props.t('confirmationPage.setupAccount', 'Set up your account')}
{this.state.configs?.enable_sign_up && (
{this.state.configs?.google?.enabled && (
)}
- OR + {this.props.t('confirmationPage.or', 'OR')}
- Role
+ {this.props.t('confirmationPage.role', 'Role')}
- By clicking the button below, you agree to our{' '} - Terms and Conditions. + {this.props.t('confirmationPage.clickAndAgree', 'By clicking the button below, you agree to our')}{' '} + + {this.props.t('confirmationPage.termsAndConditions', 'Terms and Conditions')} + + .
- Already have an account? + {this.props.t('confirmationPage.accountExists', 'Already have an account?')}
- Set up your account + {this.props.t('confirmationPage.setupAccount', 'Set up your account')}
{this.state.configs?.enable_sign_up && (
{this.state.configs?.google?.enabled && (
)}
- OR + {this.props.t('confirmationPage.or', 'OR')}
- By clicking the button below, you agree to our{' '} - Terms and Conditions. + {this.props.t( + 'confirmationPage.clickAndAgree', + 'By clicking the button below, you agree to our' + )}{' '} + + {this.props.t('confirmationPage.termsAndConditions', 'Terms and Conditions')} + + .
- Version
+ {t('editor.appVersionManager.version', 'Version')}
{
@@ -198,8 +201,10 @@ export const AppVersionsManager = function AppVersionsManager({
>
@@ -271,11 +276,13 @@ export const AppVersionsManager = function AppVersionsManager({
setShowModal(true);
}}
>
- Create Version
+
+ {t('editor.appVersionManager.createVersion', 'Create Version')}
+
{version.name}
- 
- Currently Released
+ 
+
+ {t('editor.appVersionManager.currentlyReleased', 'Currently Released')}
+
- Currently Released
+
+
+ {t('editor.appVersionManager.currentlyReleased', 'Currently Released')}
+
setVersionName(e.target.value)}
className="form-control"
- placeholder="version name"
+ placeholder={t('editor.appVersionManager.versionName', 'Version name')}
disabled={isEditingVersion}
value={versionName}
maxLength={25}
@@ -314,10 +325,10 @@ export const AppVersionsManager = function AppVersionsManager({
@@ -338,6 +349,7 @@ const CreateVersionModal = function CreateVersionModal({
appVersions,
showCreateVersionModalPrompt,
}) {
+ const { t } = useTranslation();
const handleKeyPress = (event) => {
if (event.key === 'Enter') {
// eslint-disable-next-line no-undef
@@ -379,18 +391,18 @@ const CreateVersionModal = function CreateVersionModal({
setShowModal(false)}
>
)}
diff --git a/frontend/src/Editor/CodeBuilder/CodeBuilder.jsx b/frontend/src/Editor/CodeBuilder/CodeBuilder.jsx
index 50ee575358..111745b590 100644
--- a/frontend/src/Editor/CodeBuilder/CodeBuilder.jsx
+++ b/frontend/src/Editor/CodeBuilder/CodeBuilder.jsx
@@ -5,6 +5,7 @@ import { componentTypes } from '../WidgetManager/components';
import { DataSourceTypes } from '../DataSourceManager/SourceComponents';
import { debounce } from 'lodash';
import Fuse from 'fuse.js';
+import { useTranslation } from 'react-i18next';
export function CodeBuilder({ initialValue, onChange, components, dataQueries }) {
const [showDropdown, setShowDropdown] = useState(false);
@@ -12,6 +13,7 @@ export function CodeBuilder({ initialValue, onChange, components, dataQueries })
const [currentValue, setCurrentValue] = useState(initialValue);
const [codeMirrorInstance, setCodeMirrorInstance] = useState(null);
const [currentWord, setCurrentWord] = useState('');
+ const { t } = useTranslation();
function computeCurrentWord(value, _cursorPosition) {
const sliced = value
@@ -134,7 +136,7 @@ export function CodeBuilder({ initialValue, onChange, components, dataQueries })
{showDropdown && (
- Justified
+ {t('globals.justified', 'Justified')}
-
+
setVersionName(e.target.value)}
className="form-control"
- placeholder="Enter version name"
+ placeholder={t('editor.appVersionManager.enterVersionName', 'Enter version name')}
disabled={isCreatingVersion}
value={versionName}
autoFocus={true}
@@ -400,7 +412,7 @@ const CreateVersionModal = function CreateVersionModal({
-
+
@@ -441,13 +456,13 @@ const CreateVersionModal = function CreateVersionModal({
diff --git a/frontend/src/Editor/Box.jsx b/frontend/src/Editor/Box.jsx
index 2992808c62..3d54cc8ea5 100644
--- a/frontend/src/Editor/Box.jsx
+++ b/frontend/src/Editor/Box.jsx
@@ -60,6 +60,7 @@ import {
} from './component-properties-resolution';
import _ from 'lodash';
import { EditorContext } from '@/Editor/Context/EditorContextWrapper';
+import { useTranslation } from 'react-i18next';
const AllComponents = {
Button,
@@ -137,6 +138,7 @@ export const Box = function Box({
dataQueries,
readOnly,
}) {
+ const { t } = useTranslation();
const backgroundColor = yellow ? 'yellow' : '';
let styles = {
@@ -249,7 +251,12 @@ export const Box = function Box({
delay={{ show: 500, hide: 0 }}
trigger={inCanvas && !validatedGeneralProperties.tooltip?.trim() ? null : ['hover', 'focus']}
overlay={(props) =>
- renderTooltip({ props, text: inCanvas ? `${validatedGeneralProperties.tooltip}` : `${component.description}` })
+ renderTooltip({
+ props,
+ text: inCanvas
+ ? `${validatedGeneralProperties.tooltip}`
+ : `${t(`widget.${component.name}.description`, component.description)}`,
+ })
}
>
- {component.displayName}
+
+ {t(`widget.${component.name}.displayName`, component.displayName)}
+
-
- Right
+ {t('globals.right', 'Right')}
components
+ {t('globals.components', 'components')}
{Object.keys(components).map((component) => renderComponentVariables(components[component]))}
diff --git a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
index ace86fbe7b..e79767de6c 100644
--- a/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
+++ b/frontend/src/Editor/CodeBuilder/CodeHinter.jsx
@@ -29,6 +29,8 @@ import FxButton from './Elements/FxButton';
import { ToolTip } from '../Inspector/Elements/Components/ToolTip';
import { toast } from 'react-hot-toast';
import { EditorContext } from '@/Editor/Context/EditorContextWrapper';
+import { camelCase } from 'lodash';
+import { useTranslation } from 'react-i18next';
const AllElements = {
Color,
@@ -92,6 +94,7 @@ export function CodeHinter({
height: isFocused ? currentHeight : 0,
},
});
+ const { t } = useTranslation();
const { variablesExposedForPreview } = useContext(EditorContext);
@@ -264,7 +267,7 @@ export function CodeHinter({
{paramLabel && (
@@ -29,7 +31,7 @@ export const AlignButtons = ({ value, onChange, forceCodeBox, meta }) => {
/>
- Left
+ {t('globals.left', 'Left')}
- Edit
+ {t('globals.edit', 'Edit')}
{/* TODO: Add a popup confirmation on delete */}
- Delete
+ {t('globals.delete', 'Delete')}
There are no comments to display
;
+ if (isEmpty(thread))
+ return (
+ {t('leftSidebar.Comments.commentBody', 'There are no comments to display')}
+ );
const currentUser = JSON.parse(localStorage.getItem('currentUser'));
return (
diff --git a/frontend/src/Editor/Comment/CommentFooter.jsx b/frontend/src/Editor/Comment/CommentFooter.jsx
index ccbd40fd31..b462c464c4 100644
--- a/frontend/src/Editor/Comment/CommentFooter.jsx
+++ b/frontend/src/Editor/Comment/CommentFooter.jsx
@@ -6,11 +6,13 @@ import TextareaMentions from '@/_ui/Mentions';
import Button from '@/_ui/Button';
import usePopover from '@/_hooks/use-popover';
import { useHotkeys } from 'react-hotkeys-hook';
+import { useTranslation } from 'react-i18next';
function CommentFooter({ users, editComment = '', setMentionedUsers, editCommentId, setEditCommentId, handleSubmit }) {
const [comment, setComment] = React.useState(editComment);
const [loading, setLoading] = React.useState(false);
const [open, trigger, content, setOpen] = usePopover(false);
+ const { t } = useTranslation();
React.useEffect(() => {
setComment(editComment);
@@ -44,7 +46,7 @@ function CommentFooter({ users, editComment = '', setMentionedUsers, editComment
setMentionedUsers={setMentionedUsers}
value={comment}
setValue={setComment}
- placeholder="Type your comment here"
+ placeholder={t('leftSidebar.Comments.typeComment', 'Type your comment here')}
darkMode={darkMode}
/>
{validationError}
@@ -512,7 +515,7 @@ export function Table({
printOptions="on-focus"
multiple
search={true}
- placeholder="Select.."
+ placeholder={t('globals.select', 'Select') + '...'}
options={columnOptions.selectOptions}
value={cellValue}
onChange={(value) => {
@@ -1133,7 +1136,7 @@ export function Table({
filterColumnChanged(index, value);
}}
filterOptions={fuzzySearch}
- placeholder="Select.."
+ placeholder={t('globals.select', 'Select') + '...'}
/>
@@ -1155,7 +1158,7 @@ export function Table({
filterOperationChanged(index, value);
}}
filterOptions={fuzzySearch}
- placeholder="Select.."
+ placeholder={t('globals.select', 'Select') + '...'}
/>
diff --git a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
index f1afed8a7b..ffaa07ce5c 100644
--- a/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
+++ b/frontend/src/Editor/DataSourceManager/DataSourceManager.jsx
@@ -15,8 +15,9 @@ import { CopyToClipboard } from 'react-copy-to-clipboard';
import config from 'config';
import { isEmpty } from 'lodash';
import { Card } from '@/_ui/card';
+import { withTranslation, useTranslation } from 'react-i18next';
-class DataSourceManager extends React.Component {
+class DataSourceManagerComponent extends React.Component {
constructor(props) {
super(props);
@@ -132,7 +133,10 @@ class DataSourceManager extends React.Component {
datasourceService.save(selectedDataSource.id, appId, name, parsedOptions).then(() => {
this.setState({ isSaving: false });
this.hideModal();
- toast.success('Datasource Saved', { position: 'top-center' });
+ toast.success(
+ this.props.t('editor.queryManager.dataSourceManager.toast.success.dataSourceSaved', 'Datasource Saved'),
+ { position: 'top-center' }
+ );
this.props.dataSourcesChanged();
});
} else {
@@ -140,12 +144,21 @@ class DataSourceManager extends React.Component {
datasourceService.create(appId, appVersionId, name, kind, parsedOptions).then(() => {
this.setState({ isSaving: false });
this.hideModal();
- toast.success('Datasource Added', { position: 'top-center' });
+ toast.success(
+ this.props.t('editor.queryManager.dataSourceManager.toast.success.dataSourceAdded', 'Datasource Added'),
+ { position: 'top-center' }
+ );
this.props.dataSourcesChanged();
});
}
} else {
- toast.error('The name of datasource should not be empty', { position: 'top-center' });
+ toast.error(
+ this.props.t(
+ 'editor.queryManager.dataSourceManager.toast.error.noEmptyDsName',
+ 'The name of datasource should not be empty'
+ ),
+ { position: 'top-center' }
+ );
}
};
@@ -221,7 +234,10 @@ class DataSourceManager extends React.Component {
queryString={this.state.queryString}
handleBackToAllDatasources={goBacktoAllDatasources}
darkMode={this.props.darkMode}
- placeholder={'Suggest an integration'}
+ placeholder={this.props.t(
+ 'editor.queryManager.dataSourceManager.suggestAnIntegration',
+ 'Suggest an integration'
+ )}
/>
);
@@ -244,7 +260,9 @@ class DataSourceManager extends React.Component {
-
) : (
@@ -276,7 +294,10 @@ class DataSourceManager extends React.Component {
queryString={this.state.queryString}
handleBackToAllDatasources={this.handleBackToAllDatasources}
darkMode={this.props.darkMode}
- placeholder={'Tell us what you were looking for?'}
+ placeholder={this.props.t(
+ 'editor.queryManager.dataSourceManager.whatLookingFor',
+ 'Tell us what you were looking for?'
+ )}
/>
Suggest Datasource
++ {this.props.t('editor.queryManager.dataSourceManager.suggestDataSource', 'Suggest Datasource')} +
{datasourceSuggestionUI()}
- Don't see what you were looking for?
+
+ {this.props.t(
+ 'editor.queryManager.dataSourceManager.noResultFound',
+ `Don't see what you were looking for?`
+ )}
+
- Suggest
+ {this.props.t('editor.queryManager.dataSourceManager.suggest', 'Suggest')}
-
Please white-list our IP address if the data source is not publicly accessible.
++ {this.props.t( + 'editor.queryManager.dataSourceManager.whiteListIP', + 'Please white-list our IP address if the data source is not publicly accessible.' + )} +
{isCopied ? (
- Copied
+
+ {this.props.t('editor.queryManager.dataSourceManager.copied', 'Copied')}
+
) : (
@@ -651,7 +688,7 @@ class DataSourceManager extends React.Component {
variant="primary"
onClick={this.createDataSource}
>
- {'Save'}
+ {this.props.t('globals.save', 'Save')}
- {queryString && !suggestionUI &&
{status ? (
No results for "{queryString} "
} + {queryString && !suggestionUI && ( ++ {t( + `editor.queryManager.dataSourceManager.noResultsFor + "${queryString}"`, + `No results for "${queryString}"` + )} +
+ )}
{status ? (
-
) : (
@@ -734,7 +783,7 @@ const EmptyStateContainer = ({
Thank you, we've taken a note of that!
++ {t('editor.queryManager.dataSourceManager.noteTaken', `Thank you, we've taken a note of that!`)} +