✨(frontend) show version number in footer (#461)

In order to see the version number pushed into production

CHANGELOG.md

@@ -16,6 +16,7 @@ and this project adheres to
 ### Added
 
 - ✨(backend) manage roles on domain admin view
+- ✨(frontend) show version number in footer #369
 
 ### Changed
 

src/frontend/apps/desk/src/__tests__/pages.test.tsx

@@ -21,7 +21,7 @@ describe('Page', () => {
 
   it('checks Page rendering with team feature', () => {
     useConfigStore.setState({
-      config: { FEATURES: { TEAMS: true }, LANGUAGES: [] },
+      config: { RELEASE: '1.0.0', FEATURES: { TEAMS: true }, LANGUAGES: [] },
     });
 
     render(<Page />, { wrapper: AppWrapper });
@@ -31,7 +31,7 @@ describe('Page', () => {
 
   it('checks Page rendering without team feature', () => {
     useConfigStore.setState({
-      config: { FEATURES: { TEAMS: false }, LANGUAGES: [] },
+      config: { RELEASE: '1.0.0', FEATURES: { TEAMS: false }, LANGUAGES: [] },
     });
 
     render(<Page />, { wrapper: AppWrapper });

src/frontend/apps/desk/src/core/__tests__/MainLayout.test.tsx

@@ -17,7 +17,7 @@ jest.mock('next/navigation', () => ({
 describe('MainLayout', () => {
   it('checks menu rendering with team feature', () => {
     useConfigStore.setState({
-      config: { FEATURES: { TEAMS: true }, LANGUAGES: [] },
+      config: { RELEASE: '1.0.0', FEATURES: { TEAMS: true }, LANGUAGES: [] },
     });
 
     render(<MainLayout />, { wrapper: AppWrapper });
@@ -37,7 +37,7 @@ describe('MainLayout', () => {
 
   it('checks menu rendering without team feature', () => {
     useConfigStore.setState({
-      config: { FEATURES: { TEAMS: false }, LANGUAGES: [] },
+      config: { RELEASE: '1.0.0', FEATURES: { TEAMS: false }, LANGUAGES: [] },
     });
 
     render(<MainLayout />, { wrapper: AppWrapper });

src/frontend/apps/desk/src/core/config/types.ts

@@ -1,5 +1,6 @@
 export interface Config {
   LANGUAGES: [string, string][];
+  RELEASE: string;
   FEATURES: {
     TEAMS: boolean;
   };

src/frontend/apps/desk/src/features/footer/Footer.tsx

@@ -3,6 +3,7 @@ import { Trans, useTranslation } from 'react-i18next';
 import styled from 'styled-components';
 
 import { Box, LogoGouv, StyledLink, Text } from '@/components';
+import { useConfigStore } from '@/core';
 
 import IconLink from './assets/external-link.svg';
 
@@ -16,6 +17,7 @@ const BlueStripe = styled.div`
 
 export const Footer = () => {
   const { t } = useTranslation();
+  const { config } = useConfigStore();
 
   return (
     <Box $position="relative" as="footer">
@@ -94,7 +96,7 @@ export const Footer = () => {
           $padding={{ top: 'tiny' }}
           $css="
             flex-wrap: wrap;
-            border-top: 1px solid var(--c--theme--colors--greyscale-200); 
+            border-top: 1px solid var(--c--theme--colors--greyscale-200);
             column-gap: 1rem;
             row-gap: .5rem;
           "
@@ -138,6 +140,7 @@ export const Footer = () => {
             </StyledLink>
           ))}
         </Box>
+
         <Text
           as="p"
           $size="m"
@@ -145,6 +148,12 @@ export const Footer = () => {
           $variation="600"
           $display="inline"
         >
+          {config?.RELEASE && (
+            <>
+              {t(`Version: {{release}}`, { release: config?.RELEASE })} •&nbsp;
+            </>
+          )}
+
           <Trans>
             Unless otherwise stated, all content on this site is under
             <StyledLink

src/frontend/apps/e2e/__tests__/app-desk/footer.spec.ts

@@ -87,4 +87,13 @@ test.describe('Footer', () => {
       await expect(page).toHaveURL(url);
     });
   }
+
+  test('check if the app version is visible', async ({ page }) => {
+    const footer = page.locator('footer').first();
+    await expect(
+      footer.getByText(
+        'Version: NA • Unless otherwise stated, all content on this site is under',
+      ),
+    ).toBeVisible();
+  });
 });