From c9de1f054f8e7b841c07254048f16c53cfb67c19 Mon Sep 17 00:00:00 2001 From: maxgfr <25312957+maxgfr@users.noreply.github.com> Date: Fri, 4 Mar 2022 16:41:08 +0100 Subject: [PATCH] fix: header --- .env.development | 1 + .env.production | 3 +- .env.staging | 1 + .github/workflows/preproduction.yml | 6 +- .github/workflows/production.yml | 4 ++ .github/workflows/review.yml | 4 +- Dockerfile | 4 +- next.config.js | 8 +++ src/components/footer/bottom.tsx | 24 ++++++- src/components/footer/type.ts | 4 +- src/components/header/body.tsx | 40 ------------ src/components/header/index.stories.tsx | 15 +---- src/components/header/index.tsx | 76 ++++++++++++++++++++-- src/components/header/nav.tsx | 34 ---------- src/components/header/type.ts | 15 ++--- src/config/{layout/footer.ts => layout.ts} | 75 ++++++++++++++++++++- src/config/layout/header.ts | 73 --------------------- src/config/layout/index.ts | 2 - src/pages/_app.tsx | 5 +- 19 files changed, 206 insertions(+), 188 deletions(-) delete mode 100644 src/components/header/body.tsx delete mode 100644 src/components/header/nav.tsx rename src/config/{layout/footer.ts => layout.ts} (50%) delete mode 100644 src/config/layout/header.ts delete mode 100644 src/config/layout/index.ts diff --git a/.env.development b/.env.development index 28d82a46..700d2c7b 100644 --- a/.env.development +++ b/.env.development @@ -4,3 +4,4 @@ NEXT_PUBLIC_SENTRY_DSN="" NEXT_PUBLIC_SENTRY_ENV="" NEXT_PUBLIC_MATOMO_URL="" NEXT_PUBLIC_MATOMO_SITE_ID="" +NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/SocialGouv/template" \ No newline at end of file diff --git a/.env.production b/.env.production index 126a2e2d..f655a790 100644 --- a/.env.production +++ b/.env.production @@ -3,4 +3,5 @@ NEXT_PUBLIC_SITE_URL="https://template.fabrique.social.gouv.fr/" NEXT_PUBLIC_SENTRY_DSN="https://67a92c8c0f70486d9f36f2352eff1d19@sentry.fabrique.social.gouv.fr/68" NEXT_PUBLIC_SENTRY_ENV="production" NEXT_PUBLIC_MATOMO_URL="https://matomo.fabrique.social.gouv.fr" -NEXT_PUBLIC_MATOMO_SITE_ID=63 \ No newline at end of file +NEXT_PUBLIC_MATOMO_SITE_ID=63 +NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/SocialGouv/template" \ No newline at end of file diff --git a/.env.staging b/.env.staging index ce0a5259..5fefb033 100644 --- a/.env.staging +++ b/.env.staging @@ -4,3 +4,4 @@ NEXT_PUBLIC_SENTRY_DSN="https://67a92c8c0f70486d9f36f2352eff1d19@sentry.fabrique NEXT_PUBLIC_SENTRY_ENV="development" NEXT_PUBLIC_MATOMO_URL="" NEXT_PUBLIC_MATOMO_SITE_ID="" +NEXT_PUBLIC_APP_REPOSITORY_URL="https://github.com/SocialGouv/template" \ No newline at end of file diff --git a/.github/workflows/preproduction.yml b/.github/workflows/preproduction.yml index 6452385f..a7724a04 100644 --- a/.github/workflows/preproduction.yml +++ b/.github/workflows/preproduction.yml @@ -16,7 +16,9 @@ jobs: - name: Get project name run: | echo "project=${GITHUB_REPOSITORY#*/}" >> $GITHUB_ENV - + - name: Get commit sha + run: | + echo "GITHUB_SHA=${GITHUB_SHA}" >> $GITHUB_ENV - name: Use autodevops to deploy review branch uses: SocialGouv/actions/autodevops-helm@v1 with: @@ -28,3 +30,5 @@ jobs: rancherId: ${{ secrets.RANCHER_PROJECT_ID }} rancherProjectName: ${{ secrets.RANCHER_PROJECT_NAME }} socialgouvBaseDomain: ${{ secrets.SOCIALGOUV_BASE_DOMAIN }} + dockerbuildargs: | + GITHUB_SHA=${{ env.GITHUB_SHA }} diff --git a/.github/workflows/production.yml b/.github/workflows/production.yml index 6a27e763..ca198688 100644 --- a/.github/workflows/production.yml +++ b/.github/workflows/production.yml @@ -20,6 +20,9 @@ jobs: - name: Get project name run: | echo "project=${GITHUB_REPOSITORY#*/}" >> $GITHUB_ENV + - name: Get commit sha + run: | + echo "GITHUB_SHA=${GITHUB_SHA}" >> $GITHUB_ENV - name: Use autodevops to deploy production uses: SocialGouv/actions/autodevops-helm@v1 id: autodevops @@ -33,3 +36,4 @@ jobs: socialgouvBaseDomain: ${{ secrets.SOCIALGOUV_BASE_DOMAIN }} dockerbuildargs: | PRODUCTION=true + GITHUB_SHA=${{ env.GITHUB_SHA }} diff --git a/.github/workflows/review.yml b/.github/workflows/review.yml index b63eefeb..4e56e9c1 100644 --- a/.github/workflows/review.yml +++ b/.github/workflows/review.yml @@ -19,7 +19,9 @@ jobs: - name: Get project name run: | echo "project=${GITHUB_REPOSITORY#*/}" >> $GITHUB_ENV - + - name: Get commit sha + run: | + echo "GITHUB_SHA=${GITHUB_SHA}" >> $GITHUB_ENV - name: Use autodevops to deploy review branch uses: SocialGouv/actions/autodevops-helm@v1 with: diff --git a/Dockerfile b/Dockerfile index e80db2d1..02023a2b 100644 --- a/Dockerfile +++ b/Dockerfile @@ -19,8 +19,10 @@ RUN yarn install --frozen-lockfile # Rebuild the source code only when needed FROM node:$NODE_VERSION AS builder -ENV NODE_ENV production ARG PRODUCTION +ENV NODE_ENV production +ARG GITHUB_SHA +ENV GITHUB_SHA $GITHUB_SHA WORKDIR /app COPY --from=deps /app/node_modules ./node_modules COPY . . diff --git a/next.config.js b/next.config.js index 5451f306..bba31969 100644 --- a/next.config.js +++ b/next.config.js @@ -4,6 +4,10 @@ // https://docs.sentry.io/platforms/javascript/guides/nextjs/ const { withSentryConfig } = require("@sentry/nextjs"); +const { version } = require("./package.json"); + +const commitSha = process.env.GITHUB_SHA || "dev"; + /** @type {import('next').NextConfig} */ const moduleExports = { reactStrictMode: true, @@ -23,6 +27,10 @@ const sentryWebpackPluginOptions = { silent: true, // Suppresses all logs // For all available options, see: // https://github.com/getsentry/sentry-webpack-plugin#options. + env: { + NEXT_PUBLIC_APP_VERSION: version, + NEXT_PUBLIC_APP_VERSION_COMMIT: commitSha, + }, }; // Make sure adding Sentry options is the last code to run before exporting, to diff --git a/src/components/footer/bottom.tsx b/src/components/footer/bottom.tsx index 2c018c64..e1b817d2 100644 --- a/src/components/footer/bottom.tsx +++ b/src/components/footer/bottom.tsx @@ -8,6 +8,28 @@ export const Bottom = (props: FooterBottomSectionProps): JSX.Element => ( {link.title} ))} - {props.copyright} + +

+ Sauf mention contraire, tous les contenus de ce site sont sous{" "} + + licence etalab-2.0 + +

+

+ Version {props.version} ( + + {props.commitHash.substring(0, 8)} + + ) +

+ ); diff --git a/src/components/footer/type.ts b/src/components/footer/type.ts index 360297f2..4614cee6 100644 --- a/src/components/footer/type.ts +++ b/src/components/footer/type.ts @@ -25,7 +25,9 @@ export type FooterPartnerSectionProps = { export type FooterBottomSectionProps = { links: Array; - copyright: string; + version: string; + repositoryUrl: string; + commitHash: string; }; export type FooterTopSectionProps = { diff --git a/src/components/header/body.tsx b/src/components/header/body.tsx deleted file mode 100644 index bfb8b00f..00000000 --- a/src/components/header/body.tsx +++ /dev/null @@ -1,40 +0,0 @@ -import { - ToolItem, - Logo, - HeaderBody, - Service, - HeaderOperator, - ToolItemGroup, - Tool, -} from "@dataesr/react-dsfr"; -import { SwitchThemeMode } from "./switch"; -import { HeaderBodyProps } from "./type"; - -export const Body = (props: HeaderBodyProps): JSX.Element => ( - - {props.mainTitle} - {props.image && ( - - {props.image.alt} - - )} - - - - {props.items?.map((item, index) => ( - - {item.title} - - ))} - {props.switchProps && } - - - -); diff --git a/src/components/header/index.stories.tsx b/src/components/header/index.stories.tsx index 86721b71..674b01f9 100644 --- a/src/components/header/index.stories.tsx +++ b/src/components/header/index.stories.tsx @@ -2,7 +2,7 @@ import React from "react"; import { ComponentStory, ComponentMeta } from "@storybook/react"; import Header from "."; -import { headerBody, headerNav } from "@config"; +import { headerProps } from "@config"; export default { title: "Header", @@ -13,16 +13,5 @@ const Template: ComponentStory = args =>
; export const Default = Template.bind({}); Default.args = { - bodySection: headerBody, - navSection: headerNav, -}; - -export const Body = Template.bind({}); -Body.args = { - bodySection: headerBody, -}; - -export const Nav = Template.bind({}); -Nav.args = { - navSection: headerNav, + ...headerProps, }; diff --git a/src/components/header/index.tsx b/src/components/header/index.tsx index c3886fc3..aeba31ff 100644 --- a/src/components/header/index.tsx +++ b/src/components/header/index.tsx @@ -1,12 +1,78 @@ -import { Header } from "@dataesr/react-dsfr"; -import { Body } from "./body"; -import { Nav } from "./nav"; +import { + HeaderNav, + NavItem, + NavSubItem, + Header, + ToolItem, + Logo, + HeaderBody, + Service, + HeaderOperator, + ToolItemGroup, + Tool, +} from "@dataesr/react-dsfr"; +import { MegaNav } from "./megaNav"; import { HeaderProps } from "./type"; +import { SwitchThemeMode } from "./switch"; const Index = (props: HeaderProps): JSX.Element => (
- {props.bodySection && } - {props.navSection &&
); diff --git a/src/components/header/nav.tsx b/src/components/header/nav.tsx deleted file mode 100644 index 335f7211..00000000 --- a/src/components/header/nav.tsx +++ /dev/null @@ -1,34 +0,0 @@ -import { HeaderNav, NavItem, NavSubItem } from "@dataesr/react-dsfr"; -import { MegaNav } from "./megaNav"; -import { HeaderNavProps } from "./type"; - -export const Nav = (props: HeaderNavProps): JSX.Element => ( - - {props.items.map((item, index) => { - if ("headingLevel" in item) { - return ; - } else if ("items" in item) { - return ( - - {item.items?.map((subItem, index) => ( - - ))} - - ); - } else { - return ( - - ); - } - })} - -); diff --git a/src/components/header/type.ts b/src/components/header/type.ts index 00780d13..16ceb92a 100644 --- a/src/components/header/type.ts +++ b/src/components/header/type.ts @@ -35,23 +35,16 @@ export type MegaNavProps = { items: Array; }; -export type HeaderNavProps = { - items: Array; -}; - -export type HeaderBodyProps = { +export type HeaderProps = { mainTitle: string; splitTitleLength?: number; image?: Image; serviceTitle: string; serviceDescription: string; - items?: Array>; + bodyItems?: Array>; switchProps?: SwitchProps; -}; - -export type HeaderProps = { - navSection?: HeaderNavProps; - bodySection: HeaderBodyProps; + closeButtonLabel?: string; + navItems: Array; }; export type SwitchProps = { diff --git a/src/config/layout/footer.ts b/src/config/layout.ts similarity index 50% rename from src/config/layout/footer.ts rename to src/config/layout.ts index b86d3aab..823ee8db 100644 --- a/src/config/layout/footer.ts +++ b/src/config/layout.ts @@ -3,8 +3,79 @@ import { FooterBottomSectionProps, FooterPartnerSectionProps, FooterTopSectionProps, + HeaderProps, } from "@components"; +export const headerProps: HeaderProps = { + mainTitle: "République Française", + splitTitleLength: 10, + image: { + src: "/assets/marianne.jpeg", + alt: "Logo", + height: "80px", + width: "80px", + }, + serviceTitle: "La fabrique numérique des Ministères Sociaux", + serviceDescription: + "L'incubateur des services numériques du pôle ministériel", + bodyItems: [ + { href: "/", title: "Lien A" }, + { href: "/", title: "Lien B" }, + ], + switchProps: { + label: "Paramètre d'affichage", + }, + navItems: [ + { + title: "Titre 1", + items: [ + { + title: "Lien A", + href: "/", + current: true, + }, + { + title: "Lien B", + href: "/", + }, + ], + }, + { + title: "Titre 2", + href: "/", + }, + { + title: "Titre 3", + description: "Navigation", + headingLevel: "h5", + linkHref: "/", + linkName: "Link", + closeButtonLabel: "Fermer", + href: "/", + items: [ + { + title: "Accueil", + href: "/", + current: true, + links: [ + { + title: "Name 1", + href: "/", + name: "Name 1", + }, + { + title: "Name 2", + href: "/", + name: "Name 2", + }, + ], + }, + ], + }, + ], + closeButtonLabel: "Fermer", +}; + const links = [ { title: "Lien utile 1", @@ -76,5 +147,7 @@ export const footerPartnerSection: FooterPartnerSectionProps = { export const footerBottomSection: FooterBottomSectionProps = { links, - copyright: "© République Française 2022", + version: process.env.NEXT_PUBLIC_APP_VERSION ?? "X.X.X", + repositoryUrl: process.env.NEXT_PUBLIC_APP_REPOSITORY_URL ?? "", + commitHash: process.env.NEXT_PUBLIC_APP_VERSION_COMMIT ?? "master", }; diff --git a/src/config/layout/header.ts b/src/config/layout/header.ts deleted file mode 100644 index 1369d02a..00000000 --- a/src/config/layout/header.ts +++ /dev/null @@ -1,73 +0,0 @@ -import { HeaderBodyProps, HeaderNavProps } from "@components"; - -export const headerBody: HeaderBodyProps = { - mainTitle: "République Française", - splitTitleLength: 10, - image: { - src: "/assets/marianne.jpeg", - alt: "Logo", - height: "80px", - width: "80px", - }, - serviceTitle: "La fabrique numérique des Ministères Sociaux", - serviceDescription: - "L'incubateur des services numériques du pôle ministériel", - items: [ - { href: "/", title: "Lien A" }, - { href: "/", title: "Lien B" }, - ], - switchProps: { - label: "Paramètre d'affichage", - }, -}; - -export const headerNav: HeaderNavProps = { - items: [ - { - title: "Titre 1", - items: [ - { - title: "Lien A", - href: "/", - current: true, - }, - { - title: "Lien B", - href: "/", - }, - ], - }, - { - title: "Titre 2", - href: "/", - }, - { - title: "Titre 3", - description: "Navigation", - headingLevel: "h5", - linkHref: "/", - linkName: "Link", - closeButtonLabel: "Fermer", - href: "/", - items: [ - { - title: "Accueil", - href: "/", - current: true, - links: [ - { - title: "Name 1", - href: "/", - name: "Name 1", - }, - { - title: "Name 2", - href: "/", - name: "Name 2", - }, - ], - }, - ], - }, - ], -}; diff --git a/src/config/layout/index.ts b/src/config/layout/index.ts deleted file mode 100644 index c8662192..00000000 --- a/src/config/layout/index.ts +++ /dev/null @@ -1,2 +0,0 @@ -export * from "./footer"; -export * from "./header"; diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx index 09c3a402..b6f194ea 100644 --- a/src/pages/_app.tsx +++ b/src/pages/_app.tsx @@ -6,8 +6,7 @@ import { footerBottomSection, footerPartnerSection, footerTopSection, - headerBody, - headerNav, + headerProps, } from "@config"; import { useEffect } from "react"; import { init } from "@socialgouv/matomo-next"; @@ -22,7 +21,7 @@ function MyApp({ Component, pageProps }: AppProps) { return (