@@ -58,7 +61,7 @@ function ExploreHeader() {
- Home
+ {t('exploreHeader.home')}
diff --git a/src/components/Header/Header.jsx b/src/components/Header/Header.jsx
index ad7e70fd..d55f0442 100644
--- a/src/components/Header/Header.jsx
+++ b/src/components/Header/Header.jsx
@@ -1,11 +1,12 @@
// react global
import React, { useState, useEffect } from 'react';
import { Link, useLocation } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
import { isAuthenticated, isAuthenticationEnabled, logoutUser } from '../../utilities/authUtilities';
// components
-import { AppBar, Toolbar, Grid, Button } from '@mui/material';
+import { AppBar, Toolbar, Grid, Button, FormControl, Select, MenuItem } from '@mui/material';
import SearchSuggestion from './SearchSuggestion';
import UserAccountMenu from './UserAccountMenu';
// styling
@@ -95,6 +96,10 @@ const useStyles = makeStyles((theme) => ({
fontSize: '1rem',
textTransform: 'none',
fontWeight: 600
+ },
+ selectLanguage: {
+ width: 'max-content',
+ backgroundColor: '#ffffff'
}
}));
@@ -131,6 +136,18 @@ function Header({ setSearchCurrentValue = () => {} }) {
const classes = useStyles();
const path = useLocation().pathname;
+ const locales = {
+ en: { title: 'English' },
+ ru: { title: 'Русский' }
+ };
+
+ const { t, i18n } = useTranslation();
+ const [selectedLanguage, setSelectedLanguage] = useState(i18n.language);
+ const handleLanguageChange = (event) => {
+ i18n.changeLanguage(event.target.value);
+ setSelectedLanguage(event.target.value);
+ };
+
const handleSignInClick = () => {
logoutUser();
};
@@ -150,7 +167,7 @@ function Header({ setSearchCurrentValue = () => {} }) {
- Product
+ {t('header.product')}
@@ -160,7 +177,7 @@ function Header({ setSearchCurrentValue = () => {} }) {
target="_blank"
rel="noreferrer"
>
- Docs
+ {t('header.docs')}
@@ -181,10 +198,27 @@ function Header({ setSearchCurrentValue = () => {} }) {
{!isAuthenticated() && isAuthenticationEnabled() && (
)}
+
+
+
+
+
diff --git a/src/components/Header/SearchSuggestion.jsx b/src/components/Header/SearchSuggestion.jsx
index ddb68913..accafaaa 100644
--- a/src/components/Header/SearchSuggestion.jsx
+++ b/src/components/Header/SearchSuggestion.jsx
@@ -3,6 +3,7 @@ import { makeStyles } from '@mui/styles';
import PhotoIcon from '@mui/icons-material/Photo';
import SearchIcon from '@mui/icons-material/Search';
import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { api, endpoints } from 'api';
import { host } from 'host';
import { mapToImage, mapToRepo } from 'utilities/objectModels';
@@ -274,6 +275,8 @@ function SearchSuggestion({ setSearchCurrentValue = () => {} }) {
));
};
+ const { t } = useTranslation();
+
return (
{} }) {
{...getComboboxProps()}
>
{} }) {
spacing={2}
>
- Loading...
+ {t('main.loading')}
@@ -331,7 +334,7 @@ function SearchSuggestion({ setSearchCurrentValue = () => {} }) {
onClick={() => {}}
>
- Press Enter for advanced search
+ {t('searchSuggestion.advancedSearch')}
{} }) {
onClick={() => {}}
>
- Use the ':' character to search for tags
+ {t('searchSuggestion.useAposChar')}
diff --git a/src/components/Header/UserAccountMenu.jsx b/src/components/Header/UserAccountMenu.jsx
index 5223dd65..a7fd3f3d 100644
--- a/src/components/Header/UserAccountMenu.jsx
+++ b/src/components/Header/UserAccountMenu.jsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { Menu, MenuItem, IconButton, Avatar, Divider } from '@mui/material';
@@ -22,6 +23,8 @@ function UserAccountMenu() {
setAnchorEl(null);
};
+ const { t } = useTranslation();
+
return (
<>
- Most popular images
+ {t('home.mostPopularImages')}
@@ -301,7 +304,7 @@ function Home() {
- Recently updated images
+ {t('home.recentlyUpdatedImages')}
@@ -320,7 +323,7 @@ function Home() {
- Bookmarks
+ {t('home.bookmarks')}
@@ -341,7 +344,7 @@ function Home() {
- Stars
+ {t('main.stars')}
diff --git a/src/components/Login/SignIn.jsx b/src/components/Login/SignIn.jsx
index 761ed8c1..da9d12a7 100644
--- a/src/components/Login/SignIn.jsx
+++ b/src/components/Login/SignIn.jsx
@@ -1,6 +1,7 @@
// react global
import React, { useEffect, useMemo, useState } from 'react';
import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
// utility
import { api, endpoints } from '../../api';
@@ -324,6 +325,8 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
);
};
+ const { t } = useTranslation();
+
return (
- {repoDetailData?.title || 'Title not available'}
+ {repoDetailData?.title || t('repoDetails.titleNA')}
{platformChips()}
diff --git a/src/components/Repo/RepoDetailsMetadata.jsx b/src/components/Repo/RepoDetailsMetadata.jsx
index 9b4901e4..330a0b02 100644
--- a/src/components/Repo/RepoDetailsMetadata.jsx
+++ b/src/components/Repo/RepoDetailsMetadata.jsx
@@ -2,7 +2,8 @@ import { Card, CardContent, Grid, Typography, Tooltip } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
import { DateTime } from 'luxon';
import { Markdown } from 'utilities/MarkdowntojsxWrapper';
-import React from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import transform from '../../utilities/transform';
const useStyles = makeStyles((theme) => ({
@@ -44,20 +45,26 @@ const useStyles = makeStyles((theme) => ({
function RepoDetailsMetadata(props) {
const classes = useStyles();
const { repoURL, totalDownloads, lastUpdated, size, license, description } = props;
+ const { t, i18n } = useTranslation();
+ const [selectedLanguage] = useState(i18n.language);
const lastDate = lastUpdated
- ? DateTime.fromISO(lastUpdated).toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })
- : `Timestamp N/A`;
+ ? DateTime.fromISO(lastUpdated)
+ .setLocale(selectedLanguage)
+ .toRelative({
+ unit: ['weeks', 'days', 'hours', 'minutes']
+ })
+ : `${t('main.timestampNA')}`;
return (
- Repository
+ {t('repoDetailsMetadata.repository')}
- {repoURL || `not available`}
+ {repoURL || `${t('main.NA')}`}
@@ -66,10 +73,10 @@ function RepoDetailsMetadata(props) {
- Total downloads
+ {t('repoDetailsMetadata.totalDownloads')}
- {!isNaN(totalDownloads) ? totalDownloads : `not available`}
+ {!isNaN(totalDownloads) ? totalDownloads : `${t('main.NA')}`}
@@ -79,7 +86,7 @@ function RepoDetailsMetadata(props) {
- Last publish
+ {t('repoDetailsMetadata.lastPublish')}
@@ -93,7 +100,7 @@ function RepoDetailsMetadata(props) {
- Total size
+ {t('main.totalSize')}
{transform.formatBytes(size) || `----`}
@@ -107,11 +114,11 @@ function RepoDetailsMetadata(props) {
- License
+ {t('main.license')}
- {license ? {license} : `License info not available`}
+ {license ? {license} : `${t('main.licenseNA')}`}
@@ -123,10 +130,10 @@ function RepoDetailsMetadata(props) {
- Description
+ {t('main.description')}
- {description ? {description} : `Description not available`}
+ {description ? {description} : `${t('main.descriptionNA')}`}
diff --git a/src/components/Repo/Tabs/Tags.jsx b/src/components/Repo/Tabs/Tags.jsx
index 6abb6f38..b6633f85 100644
--- a/src/components/Repo/Tabs/Tags.jsx
+++ b/src/components/Repo/Tabs/Tags.jsx
@@ -1,5 +1,6 @@
// react global
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
// components
import Typography from '@mui/material/Typography';
@@ -82,6 +83,8 @@ export default function Tags(props) {
setSortFilter(value);
};
+ const { t } = useTranslation();
+
return (
@@ -92,19 +95,19 @@ export default function Tags(props) {
align="left"
style={{ color: 'rgba(0, 0, 0, 0.87)', fontSize: '1.5rem', fontWeight: '600' }}
>
- Tags History
+ {t('tags.tagsHistory')}
- Sort
+ {t('main.sort')}
@@ -112,7 +115,7 @@ export default function Tags(props) {
@@ -46,7 +49,7 @@ export default function DeleteTag(props) {
+
- {title || 'Filter Title'}
+ {title || t('filterCard.filterTitle')}
{getFilterRows()}
diff --git a/src/components/Shared/LayerCard.jsx b/src/components/Shared/LayerCard.jsx
index 133cadc8..77e157b2 100644
--- a/src/components/Shared/LayerCard.jsx
+++ b/src/components/Shared/LayerCard.jsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import transform from 'utilities/transform';
@@ -99,6 +100,8 @@ function LayerCard(props) {
else return layer.Size;
};
+ const { t } = useTranslation();
+
return (
@@ -123,17 +126,17 @@ function LayerCard(props) {
) : (
DETAILS
+ {t('layerCard.details')}
- Command
+ {t('layerCard.command')}
{historyDescription.CreatedBy}
{!historyDescription.EmptyLayer && (
<>
- DIGEST
+ {t('main.digest')}
{layer.Digest}
diff --git a/src/components/Shared/NoDataComponent.jsx b/src/components/Shared/NoDataComponent.jsx
index d6290816..9203928c 100644
--- a/src/components/Shared/NoDataComponent.jsx
+++ b/src/components/Shared/NoDataComponent.jsx
@@ -1,5 +1,6 @@
// react global
import React from 'react';
+import { useTranslation } from 'react-i18next';
// components
import { Stack, Typography } from '@mui/material';
@@ -28,11 +29,12 @@ const useStyles = makeStyles((theme) => ({
function NoDataComponent({ text }) {
const classes = useStyles();
+ const { t } = useTranslation();
return (
- {text ? text : 'No Data'}
+ {text ? text : t('noData.noData')}
);
}
diff --git a/src/components/Shared/PullCommandButton.jsx b/src/components/Shared/PullCommandButton.jsx
index aff8fb40..da964a97 100644
--- a/src/components/Shared/PullCommandButton.jsx
+++ b/src/components/Shared/PullCommandButton.jsx
@@ -1,4 +1,5 @@
import React, { useState, useEffect, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
import makeStyles from '@mui/styles/makeStyles';
import { Grid, Button, FormControl, Menu, MenuItem, Box, Tab, InputBase, IconButton, ButtonBase } from '@mui/material';
@@ -162,9 +163,11 @@ function PullCommandButton(props) {
}
}, [isCopied]);
+ const { t } = useTranslation();
+
return isCopied ? (
) : (
@@ -174,7 +177,7 @@ function PullCommandButton(props) {
className={`${classes.copyStringSelect} ${open && classes.copyStringSelectOpened}`}
disableRipple
>
- Pull {imageName}
+ {t('pullCommandButton.pull')} {imageName}
{getButtonIcon()}
diff --git a/src/components/Shared/RepoCard.jsx b/src/components/Shared/RepoCard.jsx
index e196a092..ab5c86dd 100644
--- a/src/components/Shared/RepoCard.jsx
+++ b/src/components/Shared/RepoCard.jsx
@@ -1,6 +1,7 @@
// react global
import React, { useRef, useMemo, useState } from 'react';
import { useNavigate, createSearchParams } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
// utility
import { DateTime } from 'luxon';
@@ -259,16 +260,21 @@ function RepoCard(props) {
));
};
+ const { t, i18n } = useTranslation();
+ const [selectedLanguage] = useState(i18n.language);
+
const getVendor = () => {
- return `${vendor || 'Vendor not available'} •`;
+ return `${vendor || t('main.vendorNA')} •`;
};
const getVersion = () => {
- return `published ${version} •`;
+ return `${t('main.published')} ${version} •`;
};
const getLast = () => {
const lastDate = lastUpdated
- ? DateTime.fromISO(lastUpdated).toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })
- : `Timestamp N/A`;
+ ? DateTime.fromISO(lastUpdated)
+ .setLocale(selectedLanguage)
+ .toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })
+ : `${t('main.timestampNA')}`;
return lastDate;
};
@@ -346,9 +352,9 @@ function RepoCard(props) {
{getSignatureChips()}
-
+
- {description || 'Description not available'}
+ {description || t('main.descriptionNA')}
@@ -375,10 +381,10 @@ function RepoCard(props) {
- Downloads •
+ {t('repoCard.downloads')} •
- {!isNaN(downloads) ? downloads : `not available`}
+ {!isNaN(downloads) ? downloads : `${t('main.NA')}`}
{/*
@@ -392,10 +398,10 @@ function RepoCard(props) {
{renderStar()}
- Stars •
+ {t('main.stars')} •
- {!isNaN(currentStarCount) ? currentStarCount : `not available`}
+ {!isNaN(currentStarCount) ? currentStarCount : `${t('main.NA')}`}
diff --git a/src/components/Shared/SignatureTooltip.jsx b/src/components/Shared/SignatureTooltip.jsx
index bde8ae17..aec97d1e 100644
--- a/src/components/Shared/SignatureTooltip.jsx
+++ b/src/components/Shared/SignatureTooltip.jsx
@@ -1,17 +1,23 @@
import React, { useMemo } from 'react';
+import { useTranslation } from 'react-i18next';
import { Typography, Stack } from '@mui/material';
import { isEmpty } from 'lodash';
import { getStrongestSignature, getAllAuthorsOfSignatures } from 'utilities/vulnerabilityAndSignatureCheck';
function SignatureTooltip({ signatureInfo }) {
const strongestSignature = useMemo(() => getStrongestSignature(signatureInfo));
+ const { t } = useTranslation();
return isEmpty(strongestSignature) ? (
- Not signed
+ {t('signatureTooltip.notSigned')}
) : (
- Tool: {strongestSignature?.tool || 'Unknown'}
- Signed-by: {getAllAuthorsOfSignatures(signatureInfo) || 'Unknown'}
+
+ {t('signatureTooltip.tool')}: {strongestSignature?.tool || t('main.unknown')}
+
+
+ {t('signatureTooltip.signedBy')}: {getAllAuthorsOfSignatures(signatureInfo) || t('main.unknown')}
+
);
}
diff --git a/src/components/Shared/TagCard.jsx b/src/components/Shared/TagCard.jsx
index 91fb0be9..3935b703 100644
--- a/src/components/Shared/TagCard.jsx
+++ b/src/components/Shared/TagCard.jsx
@@ -1,6 +1,7 @@
import React, { useState } from 'react';
import { makeStyles } from '@mui/styles';
import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
import { Box, Card, CardContent, Collapse, Grid, Stack, Tooltip, Typography, Divider } from '@mui/material';
import { Markdown } from 'utilities/MarkdowntojsxWrapper';
import transform from 'utilities/transform';
@@ -84,9 +85,14 @@ export default function TagCard(props) {
const classes = useStyles();
+ const { t, i18n } = useTranslation();
+ const [selectedLanguage] = useState(i18n.language);
+
const lastDate = lastUpdated
- ? DateTime.fromISO(lastUpdated).toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })
- : `Timestamp N/A`;
+ ? DateTime.fromISO(lastUpdated)
+ .setLocale(selectedLanguage)
+ .toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })
+ : `${t('main.timestampNA')}`;
const navigate = useNavigate();
const goToTags = (digest = null) => {
@@ -102,7 +108,7 @@ export default function TagCard(props) {
- Tag
+ {t('tagCard.tag')}
{isDeletable &&
@@ -113,11 +119,12 @@ export default function TagCard(props) {
- Created
+ {t('main.created')}
- {lastDate} by {vendor || 'Vendor not available'}
+ {lastDate} {t('tagCard.by')}
+ {vendor || t('main.vendorNA')}
@@ -128,18 +135,20 @@ export default function TagCard(props) {
) : (
{!open ? `Show more` : `Show less`}
+
+ {!open ? `${t('tagCard.showMore')}` : `${t('tagCard.showLess')}`}
+
- DIGEST
+ {t('main.digest')}
- OS/Arch
+ {t('main.osOrArch')}
- COMPRESSED SIZE
+ {t('tagCard.compressedSize')}
diff --git a/src/components/Shared/VulnerabilityCard.jsx b/src/components/Shared/VulnerabilityCard.jsx
index 976913bc..2d69adb7 100644
--- a/src/components/Shared/VulnerabilityCard.jsx
+++ b/src/components/Shared/VulnerabilityCard.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
// utility
import { api, endpoints } from '../../api';
@@ -177,6 +178,8 @@ function VulnerabilitiyCard(props) {
setPageNumber((pageNumber) => pageNumber + 1);
};
+ const { t } = useTranslation();
+
const renderFixedVer = () => {
if (!isEmpty(fixedInfo)) {
return fixedInfo.map((tag, index) => {
@@ -187,7 +190,7 @@ function VulnerabilitiyCard(props) {
);
});
} else {
- return 'Not fixed';
+ return t('vulnerabilityCard.notFixed');
}
};
@@ -206,7 +209,7 @@ function VulnerabilitiyCard(props) {
onClick={loadMore}
component="div"
>
- Load more
+ {t('vulnerabilityCard.loadMore')}
)
);
@@ -243,7 +246,7 @@ function VulnerabilitiyCard(props) {
- External reference
+ {t('vulnerabilityCard.externalReference')}
- Packages
+ {t('vulnerabilityCard.packages')}
- Fixed in
+ {t('vulnerabilityCard.fixedIn')}
{loadingFixed ? (
- 'Loading...'
+ t('main.loading')
) : (
{renderFixedVer()}
@@ -283,7 +286,7 @@ function VulnerabilitiyCard(props) {
)}
- Description
+ {t('main.description')}
diff --git a/src/components/Shared/VulnerabilityCountCard.jsx b/src/components/Shared/VulnerabilityCountCard.jsx
index be308cbb..87e992cb 100644
--- a/src/components/Shared/VulnerabilityCountCard.jsx
+++ b/src/components/Shared/VulnerabilityCountCard.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useTranslation } from 'react-i18next';
import makeStyles from '@mui/styles/makeStyles';
import { Stack, Tooltip } from '@mui/material';
@@ -71,26 +72,40 @@ function VulnerabilitiyCountCard(props) {
const classes = useStyles();
const { total, critical, high, medium, low, unknown, filterBySeverity } = props;
+ const { t } = useTranslation();
+
return (
- filterBySeverity('')}>
- filterBySeverity('')}>
+
diff --git a/src/components/Shared/VulnerabilityPackageSection.jsx b/src/components/Shared/VulnerabilityPackageSection.jsx
index 4ddae292..e118ca88 100644
--- a/src/components/Shared/VulnerabilityPackageSection.jsx
+++ b/src/components/Shared/VulnerabilityPackageSection.jsx
@@ -1,4 +1,6 @@
import React from 'react';
+import { useTranslation } from 'react-i18next';
+
import { Divider, Grid, Stack, Typography } from '@mui/material';
import makeStyles from '@mui/styles/makeStyles';
@@ -26,6 +28,7 @@ const useStyles = makeStyles(() => ({
function VulnerabilityPackageSection(props) {
const { cve } = props;
const classes = useStyles();
+ const { t } = useTranslation();
return (
- Package Path
+ {t('vulnerabilityPackageSection.packagePath')}
{cve.packagePath}
@@ -46,7 +49,7 @@ function VulnerabilityPackageSection(props) {
- Installed Version
+ {t('vulnerabilityPackageSection.installedVersion')}
{cve.packageInstalledVersion}
@@ -54,7 +57,7 @@ function VulnerabilityPackageSection(props) {
- Fixed Version
+ {t('vulnerabilityPackageSection.fixedVersion')}
{cve.packageFixedVersion}
diff --git a/src/components/Tag/Tabs/DependsOn.jsx b/src/components/Tag/Tabs/DependsOn.jsx
index 1cfafb37..208c0c81 100644
--- a/src/components/Tag/Tabs/DependsOn.jsx
+++ b/src/components/Tag/Tabs/DependsOn.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useState, useMemo, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
import { isEmpty } from 'lodash';
// utility
@@ -99,6 +100,8 @@ function DependsOn(props) {
};
}, [isLoading, isEndOfList]);
+ const { t } = useTranslation();
+
const renderDependencies = () => {
return !isEmpty(images) ? (
images.map((dependence, index) => {
@@ -115,7 +118,7 @@ function DependsOn(props) {
);
})
) : (
-
- Uses
+ {t('main.uses')}
diff --git a/src/components/Tag/Tabs/HistoryLayers.jsx b/src/components/Tag/Tabs/HistoryLayers.jsx
index c37146e6..d9b9f9d7 100644
--- a/src/components/Tag/Tabs/HistoryLayers.jsx
+++ b/src/components/Tag/Tabs/HistoryLayers.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
// components
import { Stack, Typography } from '@mui/material';
@@ -35,10 +36,12 @@ function HistoryLayers(props) {
};
}, [name, history]);
+ const { t } = useTranslation();
+
return (
<>
- Layers
+ {t('main.layers')}
{isLoading ? (
diff --git a/src/components/Tag/Tabs/IsDependentOn.jsx b/src/components/Tag/Tabs/IsDependentOn.jsx
index 03ec2b3d..9eed00c4 100644
--- a/src/components/Tag/Tabs/IsDependentOn.jsx
+++ b/src/components/Tag/Tabs/IsDependentOn.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
import { isEmpty } from 'lodash';
// utility
@@ -99,6 +100,8 @@ function IsDependentOn(props) {
};
}, [isLoading, isEndOfList]);
+ const { t } = useTranslation();
+
const renderDependents = () => {
return !isEmpty(images) ? (
images?.map((dependence, index) => {
@@ -115,7 +118,7 @@ function IsDependentOn(props) {
);
})
) : (
-
- Used by
+ {t('main.usedBy')}
diff --git a/src/components/Tag/Tabs/ReferredBy.jsx b/src/components/Tag/Tabs/ReferredBy.jsx
index 6a38fc3a..12331d61 100644
--- a/src/components/Tag/Tabs/ReferredBy.jsx
+++ b/src/components/Tag/Tabs/ReferredBy.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { makeStyles } from '@mui/styles';
import { isEmpty } from 'lodash';
import { Typography, Stack } from '@mui/material';
@@ -36,6 +37,8 @@ function ReferredBy(props) {
setIsLoading(false);
}, []);
+ const { t } = useTranslation();
+
const renderReferrers = () => {
return !isEmpty(referrersData) ? (
referrersData.map((referrer, index) => {
@@ -51,14 +54,14 @@ function ReferredBy(props) {
);
})
) : (
-
- Referred By
+ {t('main.referredBy')}
diff --git a/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx b/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
index a7d8f8a7..be5370dd 100644
--- a/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
+++ b/src/components/Tag/Tabs/VulnerabilitiesDetails.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useMemo, useState, useRef } from 'react';
+import { useTranslation } from 'react-i18next';
// utility
import { api, endpoints } from '../../../api';
@@ -339,13 +340,19 @@ function VulnerabilitiesDetails(props) {
}
}, [openExport]);
+ const { t } = useTranslation();
+
const renderCVEs = () => {
return !isEmpty(cveData) ? (
cveData.map((cve, index) => {
return
- Vulnerabilities
+ {t('main.vulnerabilities')}
@@ -391,12 +398,12 @@ function VulnerabilitiesDetails(props) {
- OS/Arch
+ {t('main.osOrArch')}
{!isEmpty(selectedManifest) && (
@@ -328,19 +331,19 @@ function TagDetails() {
disabled={isLoading}
>
- Layers
+ {t('main.layers')}
- Uses
+ {t('main.uses')}
- Used by
+ {t('main.usedBy')}
- Vulnerabilities
+ {t('main.vulnerabilities')}
- Referred by
+ {t('main.referredBy')}
diff --git a/src/components/Tag/TagDetailsMetadata.jsx b/src/components/Tag/TagDetailsMetadata.jsx
index 3da99cd3..9378182d 100644
--- a/src/components/Tag/TagDetailsMetadata.jsx
+++ b/src/components/Tag/TagDetailsMetadata.jsx
@@ -1,4 +1,5 @@
-import React from 'react';
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import transform from '../../utilities/transform';
import { DateTime } from 'luxon';
@@ -54,9 +55,14 @@ function TagDetailsMetadata(props) {
const classes = useStyles();
const { platform, lastUpdated, size, license, imageName } = props;
+ const { t, i18n } = useTranslation();
+ const [selectedLanguage] = useState(i18n.language);
+
const lastDate = lastUpdated
- ? DateTime.fromISO(lastUpdated).toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })
- : `Timestamp N/A`;
+ ? DateTime.fromISO(lastUpdated)
+ .setLocale(selectedLanguage)
+ .toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })
+ : `${t('main.timestampNA')}`;
return (
@@ -71,7 +77,7 @@ function TagDetailsMetadata(props) {
- OS/Arch
+ {t('main.osOrArch')}
{platform?.Os || `----`} / {platform?.Arch || `----`}
@@ -83,7 +89,7 @@ function TagDetailsMetadata(props) {
- Total Size
+ {t('main.totalSize')}
{transform.formatBytes(size) || `----`}
@@ -96,7 +102,7 @@ function TagDetailsMetadata(props) {
- Last Published
+ {t('tagDetailsMetadata.lastPublished')}
@@ -112,11 +118,11 @@ function TagDetailsMetadata(props) {
- License
+ {t('main.license')}
- {license ? {license} : `License info not available`}
+ {license ? {license} : `${t('main.licenseNA')}`}
diff --git a/src/components/User/ApiKeys/ApiKeyCard.jsx b/src/components/User/ApiKeys/ApiKeyCard.jsx
index 02b663bf..ea142a32 100644
--- a/src/components/User/ApiKeys/ApiKeyCard.jsx
+++ b/src/components/User/ApiKeys/ApiKeyCard.jsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { DateTime } from 'luxon';
import { isNil } from 'lodash';
@@ -105,6 +106,8 @@ function ApiKeyCard(props) {
setApiKeyRevokeOpen(true);
};
+ const { t } = useTranslation();
+
return (
@@ -121,7 +124,7 @@ function ApiKeyCard(props) {
{!isNil(apiKey.apiKey) && (
@@ -136,7 +139,7 @@ function ApiKeyCard(props) {
) : (
KEY
+ {t('apiKeyCard.key')}
diff --git a/src/components/User/ApiKeys/ApiKeyConfirmDialog.jsx b/src/components/User/ApiKeys/ApiKeyConfirmDialog.jsx
index ec51930e..7678168a 100644
--- a/src/components/User/ApiKeys/ApiKeyConfirmDialog.jsx
+++ b/src/components/User/ApiKeys/ApiKeyConfirmDialog.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { Dialog, DialogContent, DialogTitle, DialogActions, Button, Typography, Grid } from '@mui/material';
@@ -30,13 +31,17 @@ function ApiKeyConfirmDialog(props) {
setOpen(false);
};
+ const { t } = useTranslation();
+
return (
diff --git a/src/components/User/ApiKeys/ApiKeyDialog.jsx b/src/components/User/ApiKeys/ApiKeyDialog.jsx
index f6fc1a06..48f4a89a 100644
--- a/src/components/User/ApiKeys/ApiKeyDialog.jsx
+++ b/src/components/User/ApiKeys/ApiKeyDialog.jsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { isNil, isNumber } from 'lodash';
import { DateTime } from 'luxon';
@@ -102,9 +103,11 @@ function ApiKeyDialog(props) {
return `Expires on ${expDateTime.toLocaleString(DateTime.DATE_MED_WITH_WEEKDAY)}`;
};
+ const { t } = useTranslation();
+
return (
diff --git a/src/components/User/ApiKeys/ApiKeyRevokeDialog.jsx b/src/components/User/ApiKeys/ApiKeyRevokeDialog.jsx
index d5dcb5d7..ef540b04 100644
--- a/src/components/User/ApiKeys/ApiKeyRevokeDialog.jsx
+++ b/src/components/User/ApiKeys/ApiKeyRevokeDialog.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { api, endpoints } from 'api';
import { host } from 'host';
@@ -45,23 +46,27 @@ function ApiKeyRevokeDialog(props) {
});
};
+ const { t } = useTranslation();
+
return (
diff --git a/src/components/User/ApiKeys/ApiKeys.jsx b/src/components/User/ApiKeys/ApiKeys.jsx
index 9117111b..3e146e33 100644
--- a/src/components/User/ApiKeys/ApiKeys.jsx
+++ b/src/components/User/ApiKeys/ApiKeys.jsx
@@ -1,4 +1,5 @@
import React, { useEffect, useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
import { isEmpty, isNil } from 'lodash';
import { api, endpoints } from 'api';
@@ -98,6 +99,8 @@ function ApiKeys() {
));
};
+ const { t } = useTranslation();
+
return (
<>
{isLoading ? (
@@ -111,10 +114,10 @@ function ApiKeys() {
- Manage your API Keys
+ {t('apiKeys.manageYourKeys')}
diff --git a/src/index.js b/src/index.js
index c21d1b97..502a89c1 100644
--- a/src/index.js
+++ b/src/index.js
@@ -3,6 +3,7 @@ import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
+import './utilities/i18n';
import { createTheme, ThemeProvider, StyledEngineProvider, adaptV4Theme } from '@mui/material/styles';
import { LocalizationProvider } from '@mui/x-date-pickers';
diff --git a/src/utilities/filterConstants.js b/src/utilities/filterConstants.js
index c9c8c373..6388338f 100644
--- a/src/utilities/filterConstants.js
+++ b/src/utilities/filterConstants.js
@@ -15,17 +15,17 @@ const osFilters = [
const imageFilters = [
{
- label: 'Signed Images',
+ label: 'filterConstants.signedImages',
value: 'HasToBeSigned',
type: 'boolean'
},
{
- label: 'Bookmarks',
+ label: 'filterConstants.bookmarks',
value: 'IsBookmarked',
type: 'boolean'
},
{
- label: 'Starred Repositories',
+ label: 'filterConstants.starredRepositories',
value: 'IsStarred',
type: 'boolean'
}
diff --git a/src/utilities/i18n.js b/src/utilities/i18n.js
new file mode 100644
index 00000000..4467b194
--- /dev/null
+++ b/src/utilities/i18n.js
@@ -0,0 +1,23 @@
+import i18n from 'i18next';
+import { initReactI18next } from 'react-i18next';
+import LanguageDetector from 'i18next-browser-languagedetector';
+import Backend from 'i18next-http-backend';
+
+i18n
+ .use(Backend)
+ .use(LanguageDetector)
+ .use(initReactI18next)
+ .init({
+ fallbackLng: {
+ ru_RU: 'ru',
+ default: ['en']
+ },
+ backend: {
+ loadPath: '/locales/{{lng}}/{{ns}}.json'
+ },
+ interpolation: {
+ escapeValue: false
+ }
+ });
+
+export default i18n;
diff --git a/src/utilities/sortCriteria.js b/src/utilities/sortCriteria.js
index 25f660da..95cc3def 100644
--- a/src/utilities/sortCriteria.js
+++ b/src/utilities/sortCriteria.js
@@ -3,55 +3,55 @@ import { DateTime } from 'luxon';
export const sortByCriteria = {
relevance: {
value: 'RELEVANCE',
- label: 'Relevance'
+ label: 'sortCriteria.relevance'
},
updateTime: {
value: 'UPDATE_TIME',
- label: 'Recent'
+ label: 'sortCriteria.recent'
},
alphabetic: {
value: 'ALPHABETIC_ASC',
- label: 'Alphabetical'
+ label: 'sortCriteria.alphabetical'
},
alphabeticDesc: {
value: 'ALPHABETIC_DSC',
- label: 'Alphabetical desc'
+ label: 'sortCriteria.alphabeticalDesc'
},
// stars: {
// value: 'STARS',
- // label: 'Most starred'
+ // label: 'sortCriteria.mostStarred'
// },
downloads: {
value: 'DOWNLOADS',
- label: 'Most downloaded'
+ label: 'sortCriteria.mostDownloaded'
}
};
export const tagsSortByCriteria = {
updateTimeDesc: {
value: 'UPDATETIME_DESC',
- label: 'Newest',
+ label: 'sortCriteria.newest',
func: (a, b) => {
return DateTime.fromISO(b.lastUpdated).diff(DateTime.fromISO(a.lastUpdated));
}
},
updateTime: {
value: 'UPDATETIME',
- label: 'Oldest',
+ label: 'sortCriteria.oldest',
func: (a, b) => {
return DateTime.fromISO(a.lastUpdated).diff(DateTime.fromISO(b.lastUpdated));
}
},
alphabetic: {
value: 'ALPHABETIC',
- label: 'A - Z',
+ label: 'sortCriteria.AZ',
func: (a, b) => {
return a.tag?.localeCompare(b.tag);
}
},
alphabeticDesc: {
value: 'ALPHABETIC_DESC',
- label: 'Z - A',
+ label: 'sortCriteria.ZA',
func: (a, b) => {
return b.tag?.localeCompare(a.tag);
}
diff --git a/src/utilities/vulnerabilityAndSignatureCheck.jsx b/src/utilities/vulnerabilityAndSignatureCheck.jsx
index dff55ef0..c66b594e 100644
--- a/src/utilities/vulnerabilityAndSignatureCheck.jsx
+++ b/src/utilities/vulnerabilityAndSignatureCheck.jsx
@@ -1,5 +1,6 @@
import { isEmpty } from 'lodash';
import React from 'react';
+import { useTranslation } from 'react-i18next';
import {
NoneVulnerabilityIcon,
LowVulnerabilityIcon,
@@ -35,13 +36,37 @@ const getAllAuthorsOfSignatures = (signatureInfo) => {
const VulnerabilityIconCheck = ({ vulnerabilitySeverity }) => {
let result;
+
+ const { t } = useTranslation();
+
let vulnerabilityStringTitle = '';
if (vulnerabilitySeverity) {
vulnerabilityStringTitle = vulnerabilitySeverity.charAt(0) + vulnerabilitySeverity.substring(1).toLowerCase();
+ switch (vulnerabilityStringTitle) {
+ case 'None':
+ vulnerabilityStringTitle = 'vulnerabilityCountCard.no';
+ break;
+ case 'Low':
+ vulnerabilityStringTitle = 'vulnerabilityCountCard.low';
+ break;
+ case 'Medium':
+ vulnerabilityStringTitle = 'vulnerabilityCountCard.medium';
+ break;
+ case 'High':
+ vulnerabilityStringTitle = 'vulnerabilityCountCard.high';
+ break;
+ case 'Critical':
+ vulnerabilityStringTitle = 'vulnerabilityCountCard.critical';
+ break;
+ case 'Unknown':
+ vulnerabilityStringTitle = 'vulnerabilityCountCard.unknown';
+ break;
+ }
+ vulnerabilityStringTitle = t(vulnerabilityStringTitle);
}
switch (vulnerabilitySeverity) {
case 'NONE':
- result =
+
{
);
};
const FailedScanChip = () => {
+ const { t } = useTranslation();
+
return (
handleClickViewAll('sortby', sortByCriteria.downloads.value)}>
- View all
+ {t('home.viewAll')}
@@ -310,7 +313,7 @@ function Home() {
className={classes.viewAll}
onClick={() => handleClickViewAll('sortby', sortByCriteria.updateTime.value)}
>
- View all
+ {t('home.viewAll')}
@@ -329,7 +332,7 @@ function Home() {
className={classes.viewAll}
onClick={() => handleClickViewAll('filter', 'IsBookmarked')}
>
- View all
+ {t('home.viewAll')}
@@ -350,7 +353,7 @@ function Home() {
className={classes.viewAll}
onClick={() => handleClickViewAll('filter', 'IsStarred')}
>
- View all
+ {t('home.viewAll')}
{isLoading ? (
@@ -333,17 +336,17 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
- Sign In
+ {t('main.signIn')}
- Welcome back! Please login.
+ {t('signIn.welcomeBack')}
{renderThirdPartyLoginMethods()}
{Object.keys(authMethods).length > 1 &&
Object.keys(authMethods).includes('openid') &&
Object.keys(authMethods.openid.providers).length > 0 && (
- or
+ {t('signIn.or')}
)}
{Object.keys(authMethods).includes('htpasswd') && (
@@ -353,7 +356,7 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
required
fullWidth
id="username"
- label="Username"
+ label={t('signIn.username')}
name="username"
className={classes.textField}
inputProps={{ className: classes.textColor }}
@@ -368,7 +371,7 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
required
fullWidth
name="password"
- label="Enter password"
+ label={t('signIn.enterPassword')}
type="password"
id="password"
className={classes.textField}
@@ -382,7 +385,7 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
{requestProcessing &&
- Authentication Failed. Please try again.
+ {t('signIn.authFailed')}
)}
diff --git a/src/components/Login/SignInPresentation.jsx b/src/components/Login/SignInPresentation.jsx
index 2158b32c..6cab4bdb 100644
--- a/src/components/Login/SignInPresentation.jsx
+++ b/src/components/Login/SignInPresentation.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useTranslation } from 'react-i18next';
import { Stack, Typography } from '@mui/material';
import { makeStyles } from '@mui/styles';
@@ -37,6 +38,7 @@ const useStyles = makeStyles((theme) => ({
export default function SigninPresentation() {
const classes = useStyles();
+ const { t } = useTranslation();
return (
@@ -44,7 +46,7 @@ export default function SigninPresentation() {
- OCI-native container image registry, simplified
+ {t('signInPresentation.description')}
diff --git a/src/components/Login/ThirdPartyLoginComponents.jsx b/src/components/Login/ThirdPartyLoginComponents.jsx
index ead49dc2..c0d33dd3 100644
--- a/src/components/Login/ThirdPartyLoginComponents.jsx
+++ b/src/components/Login/ThirdPartyLoginComponents.jsx
@@ -1,4 +1,5 @@
import React from 'react';
+import { useTranslation } from 'react-i18next';
import Button from '@mui/material/Button';
import SvgIcon from '@mui/material/SvgIcon';
@@ -46,6 +47,7 @@ const useStyles = makeStyles(() => ({
function GithubLoginButton({ handleClick }) {
const classes = useStyles();
+ const { t } = useTranslation();
return (
);
}
function GoogleLoginButton({ handleClick }) {
const classes = useStyles();
+ const { t } = useTranslation();
return (
);
}
function GitlabLoginButton({ handleClick }) {
const classes = useStyles();
+ const { t } = useTranslation();
return (
);
}
@@ -83,10 +87,11 @@ function GitlabLoginButton({ handleClick }) {
function OIDCLoginButton({ handleClick, oidcName }) {
const classes = useStyles();
const loginWithName = oidcName || 'OIDC';
+ const { t } = useTranslation();
return (
);
}
diff --git a/src/components/Repo/RepoDetails.jsx b/src/components/Repo/RepoDetails.jsx
index d04b76b1..c5a738bd 100644
--- a/src/components/Repo/RepoDetails.jsx
+++ b/src/components/Repo/RepoDetails.jsx
@@ -1,5 +1,6 @@
// react global
import React, { useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslation } from 'react-i18next';
// external
import { DateTime } from 'luxon';
@@ -248,16 +249,23 @@ function RepoDetails() {
});
};
+ const { t, i18n } = useTranslation();
+ const [selectedLanguage] = useState(i18n.language);
+
const getVendor = () => {
- return `${repoDetailData.newestTag?.Vendor || 'Vendor not available'} •`;
+ return `${repoDetailData.newestTag?.Vendor || t('main.vendorNA')} •`;
};
const getVersion = () => {
- return `published ${repoDetailData.newestTag?.Tag} •`;
+ return `${t('main.published')} ${repoDetailData.newestTag?.Tag} •`;
};
const getLast = () => {
const lastDate = repoDetailData.lastUpdated
- ? DateTime.fromISO(repoDetailData.lastUpdated).toRelative({ unit: ['weeks', 'days', 'hours', 'minutes'] })
- : `Timestamp N/A`;
+ ? DateTime.fromISO(repoDetailData.lastUpdated)
+ .setLocale(selectedLanguage)
+ .toRelative({
+ unit: ['weeks', 'days', 'hours', 'minutes']
+ })
+ : `${t('main.timestampNA')}`;
return lastDate;
};
@@ -342,7 +350,7 @@ function RepoDetails() {
@@ -393,7 +396,7 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
onClick={handleClick}
data-testid="basic-auth-submit-btn"
>
- Continue
+ {t('signIn.continue')}
@@ -405,7 +408,7 @@ export default function SignIn({ isLoggedIn, setIsLoggedIn, wrapperSetLoading =
className={classes.continueAsGuestButton}
onClick={handleGuestClick}
>
- Continue as guest
+ {t('signIn.continueAsGuest')}
)}
Total {total}
+
+ {t('vulnerabilityCountCard.total')} {total}
+
- filterBySeverity('CRITICAL')}>
- filterBySeverity('CRITICAL')}>
+
- filterBySeverity('HIGH')}>
- filterBySeverity('HIGH')}>
+
- filterBySeverity('MEDIUM')}>
- filterBySeverity('MEDIUM')}>
+
- filterBySeverity('LOW')}>
- filterBySeverity('LOW')}>
+
- filterBySeverity('UNKNOWN')}>
- filterBySeverity('UNKNOWN')}>
+
C {critical}
+
+ {t('vulnerabilityCountCard.criticalShort')} {critical}
+
H {high}
+
+ {t('vulnerabilityCountCard.highShort')} {high}
+
M {medium}
+
+ {t('vulnerabilityCountCard.mediumShort')} {medium}
+
L {low}
+
+ {t('vulnerabilityCountCard.lowShort')} {low}
+
U {unknown}
+
+ {t('vulnerabilityCountCard.unknownShort')} {unknown}
+
{!isLoading && Nothing found }
+ {!isLoading && {t('main.nothingFound')} }
);
};
@@ -132,7 +135,7 @@ function DependsOn(props) {
return (
- No Layer data available
+ {t('historyLayers.noLayers')}
)}
{!isLoading && Nothing found }
+ {!isLoading && {t('main.nothingFound')} }
);
};
@@ -132,7 +135,7 @@ function IsDependentOn(props) {
return (
{!isLoading && Nothing found }
+ {!isLoading && {t('main.nothingFound')} }
);
};
return (
{!isLoading && No Vulnerabilities }
+
+ {!isLoading && (
+ {t('VulnerabilitiesDetails.noVulnerabilities')}
+ )}
+
);
};
@@ -383,7 +390,7 @@ function VulnerabilitiesDetails(props) {