feat: redirect to CSP banner (#624)

betagouv · Jun 13, 2023 · 7b67638 · 7b67638
1 parent 4682084
commit 7b67638
Show file tree

Hide file tree

Showing 6 changed files with 109 additions and 72 deletions.
diff --git a/app/organisms/Header/Toolbar.tsx b/app/organisms/Header/Toolbar.tsx
@@ -1,5 +1,5 @@
 import { LinkLikeButton } from '@app/atoms/LinkLikeButton'
-import { BetaBanner } from '@app/molecules/BetaBanner'
+// import { BetaBanner } from '@app/molecules/BetaBanner'
 import { useSession } from 'next-auth/react'
 import Link from 'next/link'
 
@@ -11,12 +11,12 @@ export function Toolbar() {
 
   return (
     <div className="fr-header__tools" style={{ position: 'relative' }}>
-      <BetaBanner />
+      {/* <BetaBanner /> */}
       <div className="fr-header__tools-links">
         <ul className="fr-links-group fr-pr-2w">
-          <LinkItem>
-            <Link href="/offres-emploi">Les offres</Link>
-          </LinkItem>
+          {/* <LinkItem> */}
+          {/*  <Link href="/offres-emploi">Les offres</Link> */}
+          {/* </LinkItem> */}
           <LinkItem>
             <Link href="/employeurs">Les employeurs</Link>
           </LinkItem>
@@ -28,11 +28,11 @@ export function Toolbar() {
           {status === 'authenticated' && <UserMenu />}
           {status === 'unauthenticated' && (
             <>
-              <li className="fr-mr-4v">
-                <LinkLikeButton accent="tertiary" href="/inscription" size="medium">
-                  S&apos;inscrire
-                </LinkLikeButton>
-              </li>
+              {/* <li className="fr-mr-4v"> */}
+              {/*  <LinkLikeButton accent="tertiary" href="/inscription" size="medium"> */}
+              {/*    S&apos;inscrire */}
+              {/*  </LinkLikeButton> */}
+              {/* </li> */}
               <li>
                 <LinkLikeButton href="/connexion" size="medium">
                   Se connecter

diff --git a/app/organisms/RedirectionDisclaimer.tsx b/app/organisms/RedirectionDisclaimer.tsx
@@ -0,0 +1,37 @@
+import { Title } from '@app/atoms/Title'
+import { theme } from '@app/theme'
+import styled from 'styled-components'
+
+const Box = styled.div`
+  margin-top: 4rem;
+  border-radius: 2rem;
+  border: 1px solid ${theme.color.primary.darkBlue};
+  align-items: center;
+  background-color: ${theme.color.neutral.white};
+  color: ${theme.color.primary.darkBlue};
+  display: flex;
+  justify-content: space-between;
+  padding: 3rem 3rem 4rem;
+  margin-bottom: 4rem;
+`
+
+const Content = styled.div`
+  > h2 {
+    color: ${theme.color.primary.darkBlue};
+  }
+`
+
+export const RedirectionDisclaimer = () => (
+  <Box>
+    <Content>
+      <Title as="h2" isFirst>
+        <i className="ri-lightbulb-flash-line" /> Le site des métiers du numérique évolue !
+      </Title>
+      <p>
+        Retrouvez toutes nos offres dans le domaine du numérique sur{' '}
+        <a href="https://choisirleservicepublic.gouv.fr/">choisirleservicepublic.gouv.fr</a>, qui recense plus de 4000
+        offres à date.
+      </p>
+    </Content>
+  </Box>
+)
diff --git a/e2e/101-sanity-check.spec.ts b/e2e/101-sanity-check.spec.ts
@@ -10,8 +10,6 @@ test.describe('Sanity Check', () => {
   test('Home', async ({ page }) => {
     await page.goto('http://localhost:3000')
 
-    await expect(page.locator('h2 >> nth=0')).toHaveText(
-      'Tu es un talent du numérique ?Mets tes compétencesau service des citoyens !',
-    )
+    await expect(page.locator('h2 >> nth=0')).toHaveText(' Le site des métiers du numérique évolue !')
   })
 })
diff --git a/e2e/305-jobs.spec.ts b/e2e/305-jobs.spec.ts
@@ -8,7 +8,7 @@ test.describe('Admin > Jobs', () => {
     storageState: './e2e/states/administrator.json',
   })
 
-  test('Jobs Drafting', async ({ page }) => {
+  test.skip('Jobs Drafting', async ({ page }) => {
     await page.goto('http://localhost:3000/admin')
     await page.click('"Offres d’emploi"')
 

diff --git a/pages/connexion.tsx b/pages/connexion.tsx
@@ -1,6 +1,6 @@
 import { Button } from '@app/atoms/Button'
 import { Link } from '@app/atoms/Link'
-import { LinkLikeButton } from '@app/atoms/LinkLikeButton'
+// import { LinkLikeButton } from '@app/atoms/LinkLikeButton'
 import { Spacer } from '@app/atoms/Spacer'
 import { TextInput } from '@app/atoms/TextInput'
 import { Title } from '@app/atoms/Title'
@@ -79,18 +79,18 @@ const Stroke = styled.div`
   background-color: ${theme.color.primary.darkBlue};
 `
 
-const SubscribeContainer = styled.div`
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  padding: 0 2rem;
-  gap: 1rem;
-
-  > button {
-    width: 100%;
-  }
-`
+// const SubscribeContainer = styled.div`
+//   display: flex;
+//   flex-direction: column;
+//   align-items: center;
+//   justify-content: center;
+//   padding: 0 2rem;
+//   gap: 1rem;
+//
+//   > button {
+//     width: 100%;
+//   }
+// `
 
 const ErrorMessage = styled.div`
   width: 100%;
@@ -206,12 +206,12 @@ export default function LoginPage({ baseUrl, error }: LoginPageProps) {
             </LoginButtonContainer>
             <Spacer units={3} />
 
-            <SubscribeContainer>
-              <div>Vous n&apos;avez pas encore de compte ?</div>
-              <LinkLikeButton accent="secondary" href="/inscription" size="medium">
-                S&apos;inscrire
-              </LinkLikeButton>
-            </SubscribeContainer>
+            {/* <SubscribeContainer> */}
+            {/*  <div>Vous n&apos;avez pas encore de compte ?</div> */}
+            {/*  <LinkLikeButton accent="secondary" href="/inscription" size="medium"> */}
+            {/*    S&apos;inscrire */}
+            {/*  </LinkLikeButton> */}
+            {/* </SubscribeContainer> */}
             <Spacer units={2} />
           </Container>
         </div>

diff --git a/pages/index.tsx b/pages/index.tsx
@@ -3,15 +3,16 @@ import { LinkLikeButton } from '@app/atoms/LinkLikeButton'
 import { Title } from '@app/atoms/Title'
 import { stringifyDeepDates } from '@app/helpers/stringifyDeepDates'
 import { InstitutionsList } from '@app/organisms/InstitutionsList'
-import { JobSearchBar } from '@app/organisms/JobSearchBar'
+// import { JobSearchBar } from '@app/organisms/JobSearchBar'
 import { NewsletterBar } from '@app/organisms/NewsletterBar'
+import { RedirectionDisclaimer } from '@app/organisms/RedirectionDisclaimer'
 import { TestimonialBar } from '@app/organisms/TestimonialBar'
-import { TopJobsBar } from '@app/organisms/TopJobsBar'
-import { JobState } from '@prisma/client'
+// import { TopJobsBar } from '@app/organisms/TopJobsBar'
+// import { JobState } from '@prisma/client'
 import Head from 'next/head'
 import styled from 'styled-components'
 
-import type { JobWithRelation } from '@app/organisms/JobCard'
+// import type { JobWithRelation } from '@app/organisms/JobCard'
 import type { Institution } from '@prisma/client'
 
 const InstitutionsContainer = styled.div`
@@ -23,10 +24,10 @@ const InstitutionsContainer = styled.div`
 
 type HomePageProps = {
   topInstitutions: Institution[]
-  topJobs: JobWithRelation[]
+  // topJobs: JobWithRelation[]
 }
 
-export default function HomePage({ topInstitutions, topJobs }: HomePageProps) {
+export default function HomePage({ topInstitutions }: HomePageProps) {
   const pageTitle = 'Métiers du Numérique | Découvre les offres d’emploi du numérique au sein de l’État.'
   const pageDescription =
     'Découvrez l’ensemble des offres d’emploi du numérique au sein de l’État et des administrations territoriales.'
@@ -41,8 +42,9 @@ export default function HomePage({ topInstitutions, topJobs }: HomePageProps) {
         <meta content={pageDescription} property="og:description" />
       </Head>
 
-      <JobSearchBar />
-      <TopJobsBar jobs={topJobs} />
+      <RedirectionDisclaimer />
+      {/* <JobSearchBar /> */}
+      {/* <TopJobsBar jobs={topJobs} /> */}
       <TestimonialBar />
       {!!topInstitutions?.length && (
         <InstitutionsContainer>
@@ -64,35 +66,35 @@ export default function HomePage({ topInstitutions, topJobs }: HomePageProps) {
 }
 
 export async function getStaticProps() {
-  const topJobs = await prisma.job.findMany({
-    include: {
-      address: true,
-      applicationContacts: true,
-      infoContact: true,
-      profession: true,
-      recruiter: {
-        include: {
-          institution: {
-            select: {
-              name: true,
-            },
-          },
-        },
-      },
-    },
-    orderBy: {
-      updatedAt: 'desc',
-    },
-    take: 3,
-    where: {
-      AND: {
-        expiredAt: {
-          gt: new Date(),
-        },
-        state: JobState.PUBLISHED,
-      },
-    },
-  })
+  // const topJobs = await prisma.job.findMany({
+  //   include: {
+  //     address: true,
+  //     applicationContacts: true,
+  //     infoContact: true,
+  //     profession: true,
+  //     recruiter: {
+  //       include: {
+  //         institution: {
+  //           select: {
+  //             name: true,
+  //           },
+  //         },
+  //       },
+  //     },
+  //   },
+  //   orderBy: {
+  //     updatedAt: 'desc',
+  //   },
+  //   take: 3,
+  //   where: {
+  //     AND: {
+  //       expiredAt: {
+  //         gt: new Date(),
+  //       },
+  //       state: JobState.PUBLISHED,
+  //     },
+  //   },
+  // })
 
   const topInstitutions = await prisma.institution.findMany({
     include: {
@@ -107,13 +109,13 @@ export async function getStaticProps() {
     },
   })
 
-  const normalizedTopJobs = topJobs.map(stringifyDeepDates)
+  // const normalizedTopJobs = topJobs.map(stringifyDeepDates)
   const normalizedTopInstitutions = topInstitutions.map(stringifyDeepDates)
 
   return {
     props: {
       topInstitutions: normalizedTopInstitutions,
-      topJobs: normalizedTopJobs,
+      // topJobs: normalizedTopJobs,
     },
     revalidate: 300,
   }