Add alert about new scheme

public/locales/en/translation.json

@@ -223,5 +223,9 @@
   },
   "vulnerabilityAndSignatureComponents": {
     "failed2scan": "Failed to scan"
+  },
+  "alert": {
+    "newScheme": "In the near future (11/15/2024), it is planned to change the structure of image placement. ",
+    "more": "More detailed"
   }
 }

public/locales/ru/translation.json

@@ -223,5 +223,9 @@
   },
   "vulnerabilityAndSignatureComponents": {
     "failed2scan": "Не удалось выполнить сканирование"
+  },
+  "alert": {
+    "newScheme": "В скором времени (15.11.2024) планируется смена структуры размещения образов. ",
+    "more": "Подробнее"
   }
 }

src/pages/ExplorePage.jsx

@@ -1,9 +1,10 @@
 // components
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import Header from '../components/Header/Header.jsx';
 
 import makeStyles from '@mui/styles/makeStyles';
-import { Container, Grid, Stack } from '@mui/material';
+import { Alert, Container, Grid, Stack } from '@mui/material';
 import Explore from 'components/Explore/Explore.jsx';
 import { useState } from 'react';
 
@@ -23,6 +24,10 @@ const useStyles = makeStyles(() => ({
   tile: {
     width: '100%',
     padding: 5
+  },
+  newScheme: {
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 }));
 
@@ -30,9 +35,21 @@ function ExplorePage() {
   const classes = useStyles();
   const [searchCurrentValue, setSearchCurrentValue] = useState();
 
+  const { t } = useTranslation();
+
   return (
     <Stack className={classes.pageWrapper} direction="column" data-testid="explore-container">
       <Header setSearchCurrentValue={setSearchCurrentValue} />
+      <Grid container className={classes.newScheme}>
+        <div style={{ marginTop: 20 }}>
+          <Alert style={{ marginTop: 10 }} variant="outlined" severity="warning">
+            {t('alert.newScheme')}
+            <a href="https://www.altlinux.org/Registry_(%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0)">
+              {t('alert.more')}
+            </a>
+          </Alert>
+        </div>
+      </Grid>
       <Container className={classes.container}>
         <Grid container className={classes.gridWrapper}>
           <Grid item className={classes.tile}>

src/pages/HomePage.jsx

@@ -1,9 +1,10 @@
 // components
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 import Header from '../components/Header/Header.jsx';
 
 import makeStyles from '@mui/styles/makeStyles';
-import { Container, Grid, Stack } from '@mui/material';
+import { Alert, Container, Grid, Stack } from '@mui/material';
 import Home from 'components/Home/Home.jsx';
 
 const useStyles = makeStyles(() => ({
@@ -21,15 +22,31 @@ const useStyles = makeStyles(() => ({
   },
   tile: {
     width: '100%'
+  },
+  newScheme: {
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 }));
 
 function HomePage() {
   const classes = useStyles();
 
+  const { t } = useTranslation();
+
   return (
     <Stack className={classes.pageWrapper} direction="column" data-testid="homepage-container">
       <Header />
+      <Grid container className={classes.newScheme}>
+        <div style={{ marginTop: 20 }}>
+          <Alert style={{ marginTop: 10 }} variant="outlined" severity="warning">
+            {t('alert.newScheme')}
+            <a href="https://www.altlinux.org/Registry_(%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0)">
+              {t('alert.more')}
+            </a>
+          </Alert>
+        </div>
+      </Grid>
       <Container className={classes.container}>
         <Grid container className={classes.gridWrapper}>
           <Grid item className={classes.tile}>

src/pages/RepoPage.jsx

@@ -1,10 +1,11 @@
 // react global
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 // components
 
 import makeStyles from '@mui/styles/makeStyles';
-import { Container, Grid, Stack } from '@mui/material';
+import { Alert, Container, Grid, Stack } from '@mui/material';
 import Header from 'components/Header/Header';
 import RepoDetails from 'components/Repo/RepoDetails';
 import ExploreHeader from 'components/Header/ExploreHeader';
@@ -31,15 +32,31 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     flexFlow: 'column',
     height: '100%'
+  },
+  newScheme: {
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 }));
 
 function RepoPage() {
   const classes = useStyles();
 
+  const { t } = useTranslation();
+
   return (
     <Stack direction="column" className={classes.pageWrapper} data-testid="repo-container">
       <Header />
+      <Grid container className={classes.newScheme}>
+        <div style={{ marginTop: 20 }}>
+          <Alert style={{ marginTop: 10 }} variant="outlined" severity="warning">
+            {t('alert.newScheme')}
+            <a href="https://www.altlinux.org/Registry_(%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0)">
+              {t('alert.more')}
+            </a>
+          </Alert>
+        </div>
+      </Grid>
       <Container className={classes.container}>
         <ExploreHeader />
         <Grid container className={classes.gridWrapper}>

src/pages/TagPage.jsx

@@ -1,10 +1,11 @@
 // react global
 import React from 'react';
+import { useTranslation } from 'react-i18next';
 
 // components
 
 import makeStyles from '@mui/styles/makeStyles';
-import { Container, Grid, Stack } from '@mui/material';
+import { Alert, Container, Grid, Stack } from '@mui/material';
 import Header from 'components/Header/Header';
 import TagDetails from 'components/Tag/TagDetails';
 import ExploreHeader from 'components/Header/ExploreHeader';
@@ -31,15 +32,31 @@ const useStyles = makeStyles(() => ({
     display: 'flex',
     flexFlow: 'column',
     height: '100%'
+  },
+  newScheme: {
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 }));
 
 function TagPage() {
   const classes = useStyles();
 
+  const { t } = useTranslation();
+
   return (
     <Stack direction="column" className={classes.pageWrapper} data-testid="tag-container">
       <Header />
+      <Grid container className={classes.newScheme}>
+        <div style={{ marginTop: 20 }}>
+          <Alert style={{ marginTop: 10 }} variant="outlined" severity="warning">
+            {t('alert.newScheme')}
+            <a href="https://www.altlinux.org/Registry_(%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0)">
+              {t('alert.more')}
+            </a>
+          </Alert>
+        </div>
+      </Grid>
       <Container className={classes.container}>
         <ExploreHeader />
         <Grid container className={classes.gridWrapper}>

src/pages/UserManagementPage.jsx

@@ -1,10 +1,11 @@
 import React, { useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { useTranslation } from 'react-i18next';
 import { isEmpty } from 'lodash';
 
 import { getLoggedInUser } from 'utilities/authUtilities.js';
 
-import { Container, Grid, Stack } from '@mui/material';
+import { Alert, Container, Grid, Stack } from '@mui/material';
 
 import Header from '../components/Header/Header.jsx';
 import ApiKeys from '../components/User/ApiKeys/ApiKeys.jsx';
@@ -27,6 +28,10 @@ const useStyles = makeStyles(() => ({
   tile: {
     width: '100%',
     padding: 5
+  },
+  newScheme: {
+    justifyContent: 'center',
+    alignItems: 'center'
   }
 }));
 
@@ -40,9 +45,21 @@ function UserManagementPage() {
     }
   }, []);
 
+  const { t } = useTranslation();
+
   return (
     <Stack className={classes.pageWrapper} direction="column" data-testid="explore-container">
       <Header />
+      <Grid container className={classes.newScheme}>
+        <div style={{ marginTop: 20 }}>
+          <Alert style={{ marginTop: 10 }} variant="outlined" severity="warning">
+            {t('alert.newScheme')}
+            <a href="https://www.altlinux.org/Registry_(%D0%9D%D0%BE%D0%B2%D0%B0%D1%8F_%D1%81%D1%82%D1%80%D1%83%D0%BA%D1%82%D1%83%D1%80%D0%B0)">
+              {t('alert.more')}
+            </a>
+          </Alert>
+        </div>
+      </Grid>
       <Container className={classes.container}>
         <Grid container className={classes.gridWrapper}>
           <Grid item className={classes.tile}>