added internationalization calls navbar and search

openml · Nov 10, 2023 · 6c45dfd · 6c45dfd
1 parent 965dd4c
commit 6c45dfd
Show file tree

Hide file tree

Showing 10 changed files with 106 additions and 59 deletions.
diff --git a/app/public/locales/en/common.yml b/app/public/locales/en/common.yml
@@ -595,4 +595,24 @@ apis:
             - "Command line"
     tooltip:
         colab: "Run in Google Colab"
-        copy: "Copy to clipboard"
+        copy: "Copy to clipboard"
+search:
+    sort_by: "Sort by"
+    showing: "Showing"
+    out_of: "out of"
+    results: "results"
+    results_per_page: "Results per page"
+    relevance: "Relevance"
+    most_runs: "Runs"
+    most_likes: "Likes"
+    most_downloads: "Downloads"
+    most_recent: "Recent"
+    most_instances: "Dataset size"
+    most_features: "Number of Features"
+    most_numeric_features: "Numeric features"
+    most_missing_values: "Missing values"
+    most_classes: "Most classes"
+    status: "Status"
+    licence: "Licence"
+    size: "Size"
+
diff --git a/app/src/components/Settings.js b/app/src/components/Settings.js
@@ -7,6 +7,7 @@ import { Box, Drawer, Grid, ListItemButton, Typography } from "@mui/material";
 
 import { THEMES } from "../constants";
 import useTheme from "../hooks/useTheme";
+import { useTranslation } from "next-i18next";
 
 const DemoButton = styled.div`
   cursor: pointer;
@@ -94,16 +95,22 @@ function Demo({ title, themeVariant }) {
 }
 
 function Demos() {
+  // When developing, reload i18n resources on page reload
+  const { i18n, t } = useTranslation();
+  if (process.env.NODE_ENV === "development") {
+    i18n.reloadResources();
+  }
+
   return (
     <Wrapper>
-      <Heading>Select a theme</Heading>
+      <Heading>{t("settings.select_theme")}</Heading>
 
       <Box px={4} my={3}>
         <Grid container spacing={3}>
-          <Demo title="Dark" themeVariant={THEMES.DARK} />
-          <Demo title="Light" themeVariant={THEMES.LIGHT} />
-          <Demo title="Default" themeVariant={THEMES.DEFAULT} />
-          <Demo title="Indigo" themeVariant={THEMES.INDIGO} />
+          <Demo title={t("settings.dark")} themeVariant={THEMES.DARK} />
+          <Demo title={t("settings.light")} themeVariant={THEMES.LIGHT} />
+          <Demo title={t("settings.default")} themeVariant={THEMES.DEFAULT} />
+          <Demo title={t("settings.indigo")} themeVariant={THEMES.INDIGO} />
         </Grid>
       </Box>
     </Wrapper>

diff --git a/app/src/components/navbar/NavbarCreationDropdown.js b/app/src/components/navbar/NavbarCreationDropdown.js
@@ -18,6 +18,7 @@ import {
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faMagicWandSparkles } from "@fortawesome/free-solid-svg-icons";
+import { useTranslation } from "next-i18next";
 
 const IconButton = styled(MuiIconButton)`
   svg {
@@ -76,9 +77,15 @@ function NavbarCreationDropdown() {
     setOpen(false);
   };
 
+  // When developing, reload i18n resources on page reload
+  const { i18n, t } = useTranslation();
+  if (process.env.NODE_ENV === "development") {
+    i18n.reloadResources();
+  }
+
   return (
     <React.Fragment>
-      <Tooltip title="Create">
+      <Tooltip title={t("tooltips.create")}>
         <IconButton color="inherit" ref={ref} onClick={handleOpen} size="large">
           <FontAwesomeIcon icon={faMagicWandSparkles} />
         </IconButton>
@@ -94,26 +101,26 @@ function NavbarCreationDropdown() {
       >
         <MessageHeader p={2}>
           <Typography variant="subtitle1" color="textPrimary">
-            Create and share
+            {t("create.title")}
           </Typography>
         </MessageHeader>
         <React.Fragment>
           <List disablePadding>
             <Message
-              title="New dataset"
-              description="Share a new dataset."
+              title={t("create.new_data")}
+              description={t("create.new_data_text")}
               icon={theme.palette.icon.data}
               color={theme.palette.entity.data}
             />
             <Message
-              title="New task"
-              description="Set a new challenge for the community."
+              title={t("create.new_task")}
+              description={t("create.new_task_text")}
               icon={theme.palette.icon.task}
               color={theme.palette.entity.task}
             />
             <Message
-              title="New collection"
-              description="Organize your resources."
+              title={t("create.new_collection")}
+              description={t("create.new_collection_text")}
               icon={theme.palette.icon.collections}
               color={theme.palette.entity.collections}
             />

diff --git a/app/src/components/navbar/NavbarLanguagesDropdown.js b/app/src/components/navbar/NavbarLanguagesDropdown.js
@@ -27,24 +27,28 @@ const Flag = styled.img`
 const languageOptions = {
   en: {
     icon: "/static/img/flags/us.png",
-    name: "English",
+    name: "languages.english",
   },
   fr: {
     icon: "/static/img/flags/fr.png",
-    name: "French",
+    name: "languages.french",
   },
   de: {
     icon: "/static/img/flags/de.png",
-    name: "German",
+    name: "languages.german",
   },
   nl: {
     icon: "/static/img/flags/nl.png",
-    name: "Dutch",
+    name: "languages.dutch",
   },
 };
 
 function NavbarLanguagesDropdown() {
-  const { i18n } = useTranslation();
+  // When developing, reload i18n resources on page reload
+  const { i18n, t } = useTranslation();
+  if (process.env.NODE_ENV === "development") {
+    i18n.reloadResources();
+  }
   const selectedLanguage = languageOptions[i18n.language];
 
   const router = useRouter();
@@ -55,7 +59,7 @@ function NavbarLanguagesDropdown() {
         query: router.query,
       },
       router.asPath,
-      { locale }
+      { locale },
     );
   }
 
@@ -76,7 +80,7 @@ function NavbarLanguagesDropdown() {
   return (
     <React.Fragment>
       {selectedLanguage && (
-        <Tooltip title="Languages">
+        <Tooltip title={t("tooltips.languages")}>
           <IconButton
             aria-owns={Boolean(anchorMenu) ? "menu-appbar" : undefined}
             aria-haspopup="true"
@@ -99,7 +103,7 @@ function NavbarLanguagesDropdown() {
             key={language}
             onClick={() => handleLanguageChange(language)}
           >
-            {languageOptions[language].name}
+            {t(languageOptions[language].name)}
           </MenuItem>
         ))}
       </Menu>

diff --git a/app/src/components/navbar/NavbarNotificationsDropdown.js b/app/src/components/navbar/NavbarNotificationsDropdown.js
@@ -1,5 +1,5 @@
 import React, { useRef, useState } from "react";
-import Link from "next/link";
+import NextLink from "next/link";
 import styled from "@emotion/styled";
 
 import {
@@ -18,6 +18,7 @@ import {
   Typography,
 } from "@mui/material";
 import { Bell, Server } from "react-feather";
+import { useTranslation } from "next-i18next";
 
 const Popover = styled(MuiPopover)`
   .MuiPaper-root {
@@ -43,6 +44,10 @@ const NotificationHeader = styled(Box)`
   border-bottom: 1px solid ${(props) => props.theme.palette.divider};
 `;
 
+const Link = styled(NextLink)`
+  text-decoration: none;
+`;
+
 function Notification({ title, description, Icon }) {
   return (
     <Link href="/">
@@ -79,6 +84,12 @@ function NavbarNotificationsDropdown() {
     setOpen(false);
   };
 
+  // When developing, reload i18n resources on page reload
+  const { i18n, t } = useTranslation();
+  if (process.env.NODE_ENV === "development") {
+    i18n.reloadResources();
+  }
+
   return (
     <React.Fragment>
       <Tooltip title="Notifications">
@@ -99,7 +110,7 @@ function NavbarNotificationsDropdown() {
       >
         <NotificationHeader p={2}>
           <Typography variant="subtitle1" color="textPrimary">
-            1 New Notification
+            {t("notifications.new_notifications")}
           </Typography>
         </NotificationHeader>
         <React.Fragment>
@@ -112,7 +123,7 @@ function NavbarNotificationsDropdown() {
           </List>
           <Box p={1} display="flex" justifyContent="center">
             <Button component={Link} href="/" size="small">
-              Show all notifications
+              {t("notifications.show_all")}
             </Button>
           </Box>
         </React.Fragment>

diff --git a/app/src/components/navbar/NavbarUserDropdown.js b/app/src/components/navbar/NavbarUserDropdown.js
@@ -13,6 +13,7 @@ import useAuth from "../../hooks/useAuth";
 
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { faCircleUser } from "@fortawesome/free-solid-svg-icons";
+import { useTranslation } from "next-i18next";
 
 const IconButton = styled(MuiIconButton)`
   svg {
@@ -43,9 +44,15 @@ function NavbarUserDropdown() {
     router.push("/auth/sign-in");
   };
 
+  // When developing, reload i18n resources on page reload
+  const { i18n, t } = useTranslation();
+  if (process.env.NODE_ENV === "development") {
+    i18n.reloadResources();
+  }
+
   return (
     <React.Fragment>
-      <Tooltip title="Account">
+      <Tooltip title={t("tooltips.account")}>
         <IconButton
           aria-owns={Boolean(anchorMenu) ? "menu-appbar" : undefined}
           aria-haspopup="true"
@@ -62,8 +69,8 @@ function NavbarUserDropdown() {
         open={Boolean(anchorMenu)}
         onClose={closeMenu}
       >
-        <MenuItem onClick={openProfile}>Profile</MenuItem>
-        <MenuItem onClick={handleSignOut}>Sign out</MenuItem>
+        <MenuItem onClick={openProfile}>{t("account.profile")}</MenuItem>
+        <MenuItem onClick={handleSignOut}>{t("account.sign_out")}</MenuItem>
       </Menu>
     </React.Fragment>
   );

diff --git a/app/src/components/search/Filter.js b/app/src/components/search/Filter.js
@@ -2,18 +2,7 @@ import React from "react";
 import { useTheme } from "@mui/material/styles";
 
 import styled from "@emotion/styled";
-import {
-  Card,
-  Tooltip,
-  CardHeader,
-  Badge,
-  Link as MuiLink,
-  Chip as MuiChip,
-  Box,
-  TabPanel,
-  Tab,
-  Tabs,
-} from "@mui/material";
+import { Link as MuiLink, Chip as MuiChip } from "@mui/material";
 
 import TimeAgo from "react-timeago";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";

diff --git a/app/src/components/search/SearchContainer.js b/app/src/components/search/SearchContainer.js
@@ -39,6 +39,7 @@ import {
   faXmark,
 } from "@fortawesome/free-solid-svg-icons";
 import Wrapper from "../Wrapper";
+import { i18n } from "next-i18next";
 
 const SearchResults = styled(Results)`
   margin: 0px;
@@ -95,7 +96,7 @@ const SortView = ({ label, options, value, onChange }) => {
     <Box>
       <FormControl fullWidth>
         <InputLabel variant="standard" htmlFor="uncontrolled-native">
-          Sort by
+          {i18n.t("search.sort_by")}
         </InputLabel>
         <NativeSelect
           value={value}
@@ -120,7 +121,7 @@ const ResultsPerPageView = ({ options, value, onChange }) => (
   <Box minWidth={80}>
     <FormControl fullWidth>
       <InputLabel variant="standard" htmlFor="uncontrolled-native">
-        Results per page
+        {i18n.t("search.results_per_page")}
       </InputLabel>
       <NativeSelect
         value={value}
@@ -166,7 +167,8 @@ const PagingInfoView = ({ start, end, totalResults }) => (
     }}
   >
     <Typography justifyContent="center" display="inline-block">
-      Showing <b>{start}</b> - <b>{end}</b> out of <b>{totalResults}</b> results
+      {i18n.t("search.showing")} <b>{start}</b> - <b>{end}</b>{" "}
+      {i18n.t("search.out_of")} <b>{totalResults}</b> {i18n.t("search.results")}
     </Typography>
   </Box>
 );
@@ -249,7 +251,7 @@ const SearchContainer = memo(
               {search_facets.map((facet, index) => (
                 <FilterTab
                   value={facet.label}
-                  label={facet.label}
+                  label={i18n.t(facet.label)}
                   key={facet.label}
                   iconPosition="start"
                   icon={<FontAwesomeIcon icon={faChevronDown} />}

diff --git a/app/src/components/sidebar/SidebarNavList.js b/app/src/components/sidebar/SidebarNavList.js
@@ -11,7 +11,7 @@ const SidebarNavList = (props) => {
   const childRoutes = pages.reduce(
     (items, page) =>
       reduceChildRoutes({ items, page, currentRoute: pathname, depth }),
-    []
+    [],
   );
 
   return <React.Fragment>{childRoutes}</React.Fragment>;