Add test environment label in the login view

Author: Jokinen

CHANGELOG.md

@@ -2,6 +2,10 @@
 
 ## [Unreleased]
 
+### Added
+
+- Test label in the login view int he test environment
+
 ### Changed
 
 - Hide create event button when project does not allow loose events

src/common/components/appTitle/AppTitle.tsx

@@ -1,21 +1,15 @@
 import React from 'react';
 import { useTranslate } from 'react-admin';
 
-import Config from '../../../domain/config';
-import styles from './appTitle.module.css';
+import IsTestEnvironmentLabel from '../isTestEnvironmentLabel/IsTestEnvironmentLabel';
 
 const AppTitle = () => {
   const translate = useTranslate();
 
-  const isTestEnvironment = Config.IS_TEST_ENVIRONMENT;
-  const testEnvironmentString = ` ${translate('application.test')}`;
-
   return (
     <>
       {translate('dashboard.title')}
-      {isTestEnvironment && (
-        <span className={styles.uppercase}>{testEnvironmentString}</span>
-      )}
+      <IsTestEnvironmentLabel />
     </>
   );
 };

src/common/components/isTestEnvironmentLabel/IsTestEnvironmentLabel.tsx

@@ -0,0 +1,18 @@
+import React from 'react';
+import { useTranslate } from 'react-admin';
+
+import Config from '../../../domain/config';
+import styles from './isTestEnvironmentLabel.module.css';
+
+const IsTestEnvironmentLabel = () => {
+  const translate = useTranslate();
+
+  const isTestEnvironment = Config.IS_TEST_ENVIRONMENT;
+  const testEnvironmentString = ` ${translate('application.test')}`;
+
+  return isTestEnvironment ? (
+    <span className={styles.uppercase}>{testEnvironmentString}</span>
+  ) : null;
+};
+
+export default IsTestEnvironmentLabel;

…/components/appTitle/appTitle.module.css …tLabel/isTestEnvironmentLabel.module.csssrc/common/components/appTitle/appTitle.module.css renamed to src/common/components/isTestEnvironmentLabel/isTestEnvironmentLabel.module.css src/common/components/appTitle/appTitle.module.css renamed to src/common/components/isTestEnvironmentLabel/isTestEnvironmentLabel.module.css

@@ -6,6 +6,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import { RouteComponentProps, StaticContext } from 'react-router';
 
 import theme from '../../common/materialUI/themeConfig';
+import IsTestEnvironmentLabel from '../../common/components/isTestEnvironmentLabel/IsTestEnvironmentLabel';
 
 const useStyles = makeStyles({
   container: {
@@ -45,7 +46,10 @@ const LoginPage = ({ location }: Props) => {
         <Card>
           <CardContent>
             <div className={classes.container}>
-              <p>{translate('dashboard.title')}</p>
+              <p>
+                {translate('dashboard.title')}
+                <IsTestEnvironmentLabel />
+              </p>
               <Button
                 className={classes.button}
                 variant="contained"