Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Use i18n Keys (2) #4464

Merged
merged 8 commits into from
Nov 7, 2024
12 changes: 11 additions & 1 deletion frontend/src/components/form/custom-input.tsx
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
import { useTranslation } from "react-i18next";
import { I18nKey } from "#/i18n/declaration";

interface CustomInputProps {
name: string;
label: string;
Expand All @@ -13,12 +16,19 @@ export function CustomInput({
defaultValue,
type = "text",
}: CustomInputProps) {
const { t } = useTranslation();

return (
<label htmlFor={name} className="flex flex-col gap-2">
<span className="text-[11px] leading-4 tracking-[0.5px] font-[500] text-[#A3A3A3]">
{label}
{required && <span className="text-[#FF4D4F]">*</span>}
{!required && <span className="text-[#A3A3A3]"> (optional)</span>}
{!required && (
<span className="text-[#A3A3A3]">
{" "}
{t(I18nKey.CUSTOM_INPUT$OPTIONAL_LABEL)}
</span>
)}
</span>
<input
id={name}
Expand Down
56 changes: 33 additions & 23 deletions frontend/src/components/form/settings-form.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -5,16 +5,18 @@ import {
Switch,
} from "@nextui-org/react";
import { useFetcher, useLocation, useNavigate } from "@remix-run/react";
import { useTranslation } from "react-i18next";
import clsx from "clsx";
import React from "react";
import { ModalBackdrop } from "#/components/modals/modal-backdrop";
import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders";
import { ModelSelector } from "#/components/modals/settings/ModelSelector";
import { clientAction } from "#/routes/settings";
import { Settings } from "#/services/settings";
import { ModalBackdrop } from "#/components/modals/modal-backdrop";
import { clientAction } from "#/routes/settings";
import { extractModelAndProvider } from "#/utils/extractModelAndProvider";
import { organizeModelsAndProviders } from "#/utils/organizeModelsAndProviders";
import ModalButton from "../buttons/ModalButton";
import { DangerModal } from "../modals/confirmation-modals/danger-modal";
import { I18nKey } from "#/i18n/declaration";

interface SettingsFormProps {
disabled?: boolean;
Expand All @@ -35,6 +37,7 @@ export function SettingsForm({
}: SettingsFormProps) {
const location = useLocation();
const navigate = useNavigate();
const { t } = useTranslation();

const fetcher = useFetcher<typeof clientAction>();
const formRef = React.useRef<HTMLFormElement>(null);
Expand Down Expand Up @@ -161,7 +164,7 @@ export function SettingsForm({
label: "text-[#A3A3A3] text-xs",
}}
>
Advanced Options
{t(I18nKey.SETTINGS_FORM$ADVANCED_OPTIONS_LABEL)}
</Switch>

{showAdvancedOptions && (
Expand All @@ -171,7 +174,7 @@ export function SettingsForm({
htmlFor="custom-model"
className="font-[500] text-[#A3A3A3] text-xs"
>
Custom Model
{t(I18nKey.SETTINGS_FORM$CUSTOM_MODEL_LABEL)}
</label>
<Input
isDisabled={disabled}
Expand All @@ -190,7 +193,7 @@ export function SettingsForm({
htmlFor="base-url"
className="font-[500] text-[#A3A3A3] text-xs"
>
Base URL
{t(I18nKey.SETTINGS_FORM$BASE_URL_LABEL)}
</label>
<Input
isDisabled={disabled}
Expand Down Expand Up @@ -220,7 +223,7 @@ export function SettingsForm({
htmlFor="api-key"
className="font-[500] text-[#A3A3A3] text-xs"
>
API Key
{t(I18nKey.SETTINGS_FORM$API_KEY_LABEL)}
</label>
<Input
isDisabled={disabled}
Expand All @@ -234,14 +237,14 @@ export function SettingsForm({
}}
/>
<p className="text-sm text-[#A3A3A3]">
Don&apos;t know your API key?{" "}
{t(I18nKey.SETTINGS_FORM$DONT_KNOW_API_KEY_LABEL)}{" "}
<a
href="https://docs.all-hands.dev/modules/usage/llms"
rel="noreferrer noopener"
target="_blank"
className="underline underline-offset-2"
>
Click here for instructions
{t(I18nKey.SETTINGS_FORM$CLICK_HERE_FOR_INSTRUCTIONS_LABEL)}
</a>
</p>
</fieldset>
Expand All @@ -255,7 +258,7 @@ export function SettingsForm({
htmlFor="agent"
className="font-[500] text-[#A3A3A3] text-xs"
>
Agent
{t(I18nKey.SETTINGS_FORM$AGENT_LABEL)}
</label>
<Autocomplete
isDisabled={disabled}
Expand Down Expand Up @@ -291,7 +294,7 @@ export function SettingsForm({
htmlFor="security-analyzer"
className="font-[500] text-[#A3A3A3] text-xs"
>
Security Analyzer (Optional)
{t(I18nKey.SETTINGS_FORM$SECURITY_ANALYZER_LABEL)}
</label>
<Autocomplete
isDisabled={disabled}
Expand Down Expand Up @@ -334,7 +337,7 @@ export function SettingsForm({
label: "text-[#A3A3A3] text-xs",
}}
>
Enable Confirmation Mode
{t(I18nKey.SETTINGS_FORM$ENABLE_CONFIRMATION_MODE_LABEL)}
</Switch>
</>
)}
Expand All @@ -345,18 +348,18 @@ export function SettingsForm({
<ModalButton
disabled={disabled || fetcher.state === "submitting"}
type="submit"
text="Save"
text={t(I18nKey.SETTINGS_FORM$SAVE_LABEL)}
className="bg-[#4465DB] w-full"
/>
<ModalButton
text="Close"
text={t(I18nKey.SETTINGS_FORM$CLOSE_LABEL)}
className="bg-[#737373] w-full"
onClick={handleCloseClick}
/>
</div>
<ModalButton
disabled={disabled}
text="Reset to defaults"
text={t(I18nKey.SETTINGS_FORM$RESET_TO_DEFAULTS_LABEL)}
variant="text-like"
className="text-danger self-start"
onClick={() => {
Expand All @@ -369,15 +372,17 @@ export function SettingsForm({
{confirmResetDefaultsModalOpen && (
<ModalBackdrop>
<DangerModal
title="Are you sure?"
description="All saved information in your AI settings will be deleted including any API keys."
title={t(I18nKey.SETTINGS_FORM$ARE_YOU_SURE_LABEL)}
description={t(
I18nKey.SETTINGS_FORM$ALL_INFORMATION_WILL_BE_DELETED_MESSAGE,
)}
buttons={{
danger: {
text: "Reset Defaults",
text: t(I18nKey.SETTINGS_FORM$RESET_TO_DEFAULTS_LABEL),
onClick: handleConfirmResetSettings,
},
cancel: {
text: "Cancel",
text: t(I18nKey.SETTINGS_FORM$CANCEL_LABEL),
onClick: () => setConfirmResetDefaultsModalOpen(false),
},
}}
Expand All @@ -387,12 +392,17 @@ export function SettingsForm({
{confirmEndSessionModalOpen && (
<ModalBackdrop>
<DangerModal
title="End Session"
description="Changing your settings will clear your workspace and start a new session. Are you sure you want to continue?"
title={t(I18nKey.SETTINGS_FORM$END_SESSION_LABEL)}
description={t(
I18nKey.SETTINGS_FORM$CHANGING_WORKSPACE_WARNING_MESSAGE,
)}
buttons={{
danger: { text: "End Session", onClick: handleConfirmEndSession },
danger: {
text: t(I18nKey.SETTINGS_FORM$END_SESSION_LABEL),
onClick: handleConfirmEndSession,
},
cancel: {
text: "Cancel",
text: t(I18nKey.SETTINGS_FORM$CANCEL_LABEL),
onClick: () => setConfirmEndSessionModalOpen(false),
},
}}
Expand Down
11 changes: 7 additions & 4 deletions frontend/src/components/modals/AccountSettingsModal.tsx
Original file line number Diff line number Diff line change
@@ -1,5 +1,6 @@
import { useFetcher, useRouteLoaderData } from "@remix-run/react";
import React from "react";
import { useTranslation } from "react-i18next";
import { BaseModalTitle } from "./confirmation-modals/BaseModal";
import ModalBody from "./ModalBody";
import ModalButton from "../buttons/ModalButton";
Expand All @@ -9,6 +10,7 @@ import { clientLoader } from "#/routes/_oh";
import { clientAction as settingsClientAction } from "#/routes/settings";
import { clientAction as loginClientAction } from "#/routes/login";
import { AvailableLanguages } from "#/i18n";
import { I18nKey } from "#/i18n/declaration";

interface AccountSettingsModalProps {
onClose: () => void;
Expand All @@ -23,6 +25,7 @@ function AccountSettingsModal({
gitHubError,
analyticsConsent,
}: AccountSettingsModalProps) {
const { t } = useTranslation();
const data = useRouteLoaderData<typeof clientLoader>("routes/_oh");
const settingsFetcher = useFetcher<typeof settingsClientAction>({
key: "settings",
Expand Down Expand Up @@ -86,13 +89,13 @@ function AccountSettingsModal({
/>
{gitHubError && (
<p className="text-danger text-xs">
GitHub token is invalid. Please try again.
{t(I18nKey.ACCOUNT_SETTINGS_MODAL$GITHUB_TOKEN_INVALID)}
</p>
)}
{data?.ghToken && !gitHubError && (
<ModalButton
variant="text-like"
text="Disconnect"
text={t(I18nKey.ACCOUNT_SETTINGS_MODAL$DISCONNECT)}
onClick={() => {
settingsFetcher.submit(
{},
Expand Down Expand Up @@ -122,11 +125,11 @@ function AccountSettingsModal({
}
type="submit"
intent="account"
text="Save"
text={t(I18nKey.ACCOUNT_SETTINGS_MODAL$SAVE)}
className="bg-[#4465DB]"
/>
<ModalButton
text="Close"
text={t(I18nKey.ACCOUNT_SETTINGS_MODAL$CLOSE)}
onClick={onClose}
className="bg-[#737373]"
/>
Expand Down
15 changes: 11 additions & 4 deletions frontend/src/components/modals/ConnectToGitHubByTokenModal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { Form, useNavigation } from "@remix-run/react";
import { useTranslation } from "react-i18next";
import {
BaseModalDescription,
BaseModalTitle,
Expand All @@ -7,10 +8,11 @@ import ModalButton from "../buttons/ModalButton";
import AllHandsLogo from "#/assets/branding/all-hands-logo-spark.svg?react";
import ModalBody from "./ModalBody";
import { CustomInput } from "../form/custom-input";
import { I18nKey } from "#/i18n/declaration";

function ConnectToGitHubByTokenModal() {
const navigation = useNavigation();

const { t } = useTranslation();
return (
<ModalBody testID="auth-modal">
<div className="flex flex-col gap-2">
Expand All @@ -29,13 +31,18 @@ function ConnectToGitHubByTokenModal() {
required
/>
<p className="text-xs text-[#A3A3A3]">
By connecting you agree to our{" "}
<span className="text-hyperlink">terms of service</span>.
{t(
I18nKey.CONNECT_TO_GITHUB_BY_TOKEN_MODAL$BY_CONNECTING_YOU_AGREE,
)}{" "}
<span className="text-hyperlink">
{t(I18nKey.CONNECT_TO_GITHUB_BY_TOKEN_MODAL$TERMS_OF_SERVICE)}
</span>
.
</p>
</label>
<ModalButton
type="submit"
text="Continue"
text={t(I18nKey.CONNECT_TO_GITHUB_BY_TOKEN_MODAL$CONTINUE)}
className="bg-[#791B80] w-full"
disabled={navigation.state === "loading"}
/>
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/modals/LoadingProject.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import { useTranslation } from "react-i18next";
import LoadingSpinnerOuter from "#/assets/loading-outer.svg?react";
import { cn } from "#/utils/utils";
import ModalBody from "./ModalBody";
import { I18nKey } from "#/i18n/declaration";

interface LoadingSpinnerProps {
size: "small" | "large";
Expand Down Expand Up @@ -28,10 +30,12 @@ interface LoadingProjectModalProps {
}

function LoadingProjectModal({ message }: LoadingProjectModalProps) {
const { t } = useTranslation();

return (
<ModalBody>
<span className="text-xl leading-6 -tracking-[0.01em] font-semibold">
{message || "Loading..."}
{message || t(I18nKey.LOADING_PROJECT$LOADING)}
</span>
<LoadingSpinner size="large" />
</ModalBody>
Expand Down
11 changes: 7 additions & 4 deletions frontend/src/components/modals/connect-to-github-modal.tsx
Original file line number Diff line number Diff line change
@@ -1,4 +1,5 @@
import { useFetcher, useRouteLoaderData } from "@remix-run/react";
import { useTranslation } from "react-i18next";
import ModalBody from "./ModalBody";
import { CustomInput } from "../form/custom-input";
import ModalButton from "../buttons/ModalButton";
Expand All @@ -8,6 +9,7 @@ import {
} from "./confirmation-modals/BaseModal";
import { clientLoader } from "#/routes/_oh";
import { clientAction } from "#/routes/login";
import { I18nKey } from "#/i18n/declaration";

interface ConnectToGitHubModalProps {
onClose: () => void;
Expand All @@ -16,6 +18,7 @@ interface ConnectToGitHubModalProps {
export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
const data = useRouteLoaderData<typeof clientLoader>("routes/_oh");
const fetcher = useFetcher<typeof clientAction>({ key: "login" });
const { t } = useTranslation();

return (
<ModalBody>
Expand All @@ -24,14 +27,14 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
<BaseModalDescription
description={
<span>
Get your token{" "}
{t(I18nKey.CONNECT_TO_GITHUB_MODAL$GET_YOUR_TOKEN)}{" "}
<a
href="https://github.com/settings/tokens/new?description=openhands-app&scopes=repo,user,workflow"
target="_blank"
rel="noreferrer noopener"
className="text-[#791B80] underline"
>
here
{t(I18nKey.CONNECT_TO_GITHUB_MODAL$HERE)}
</a>
</span>
}
Expand All @@ -55,13 +58,13 @@ export function ConnectToGitHubModal({ onClose }: ConnectToGitHubModalProps) {
<ModalButton
testId="connect-to-github"
type="submit"
text="Connect"
text={t(I18nKey.CONNECT_TO_GITHUB_MODAL$CONNECT)}
disabled={fetcher.state === "submitting"}
className="bg-[#791B80] w-full"
/>
<ModalButton
onClick={onClose}
text="Close"
text={t(I18nKey.CONNECT_TO_GITHUB_MODAL$CLOSE)}
className="bg-[#737373] w-full"
/>
</div>
Expand Down
6 changes: 5 additions & 1 deletion frontend/src/components/modals/security/Security.tsx
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
import React from "react";
import { useTranslation } from "react-i18next";
import SecurityInvariant from "./invariant/Invariant";
import BaseModal from "../base-modal/BaseModal";
import { I18nKey } from "#/i18n/declaration";

interface SecurityProps {
isOpen: boolean;
Expand All @@ -17,11 +19,13 @@ const SecurityAnalyzers: Record<SecurityAnalyzerOption, React.ElementType> = {
};

function Security({ isOpen, onOpenChange, securityAnalyzer }: SecurityProps) {
const { t } = useTranslation();

const AnalyzerComponent =
securityAnalyzer &&
SecurityAnalyzers[securityAnalyzer as SecurityAnalyzerOption]
? SecurityAnalyzers[securityAnalyzer as SecurityAnalyzerOption]
: () => <div>Unknown security analyzer chosen</div>;
: () => <div>{t(I18nKey.SECURITY$UNKNOWN_ANALYZER_LABEL)}</div>;

return (
<BaseModal
Expand Down
Loading