Merge pull request #92 from InseeFr/feat/add-footer

Feat: add app name and version in footer

.github/workflows/docker.yml

@@ -18,8 +18,8 @@ jobs:
         with:
           node-version: ${{ matrix.node }}
 
-      - run: npm install --force
-      - run: npm run build
+      - run: yarn
+      - run: yarn build
 
       - name: Upload Deploy Artifact
         uses: actions/upload-artifact@v2
@@ -38,7 +38,7 @@ jobs:
         uses: actions/download-artifact@v2
         with:
           name: build
-          path: build
+          path: build/
 
       - name: Set up QEMU
         uses: docker/setup-qemu-action@v2

Dockerfile

@@ -1,15 +1,15 @@
-# Étape de construction
-FROM node:latest as builder
+### BUILD STEP ###
+
+FROM node:latest AS builder
 
 WORKDIR /impala
 
 COPY ./ ./
 
-RUN npm install --force
+RUN yarn && yarn build
 
-RUN npm run build
+### EXECUTION STEP ###
 
-# Étape d'exécution
 FROM nginxinc/nginx-unprivileged:1.27-alpine
 
 # Non root user
@@ -20,12 +20,12 @@ ENV NGINX_GROUP=nginx
 
 USER $NGINX_USER_ID
 
-# Ajout du build au dossier root de nginx
+# Add build to nginx root webapp
 COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /impala/build /usr/share/nginx/html
 
-# Copie de la configuration nginx
+# Copy nginx configuration
 RUN rm /etc/nginx/conf.d/default.conf
-COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /impala/config/nginx.conf /etc/nginx/conf.d/nginx.conf
-
+COPY --from=builder --chown=$NGINX_USER:$NGINX_GROUP /impala/nginx.conf /etc/nginx/conf.d/nginx.conf
 
+# Strart nginx server
 CMD ["nginx", "-g", "daemon off;"]

index.html

@@ -19,15 +19,6 @@
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
     -->
         <link rel="manifest" href="/manifest.json" />
-        <!--
-      Notice the use of %PUBLIC_URL% in the tags above.
-      It will be replaced with the URL of the `public` folder during the build.
-      Only files inside the `public` folder can be referenced from the HTML.
-
-      Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
-      work correctly both with client-side routing and a non-root public URL.
-      Learn how to configure a non-root public URL by running `npm run build`.
-    -->
         <title>Espace RDF de l'Insee</title>
     </head>
 

package.json

@@ -1,5 +1,5 @@
 {
-    "name": "yasgui-react",
+    "name": "impala",
     "version": "1.3.0",
     "dependencies": {
         "react": "^18.3.1",
@@ -17,6 +17,7 @@
         "@vitejs/plugin-react-swc": "^3.7.0",
         "@vitest/coverage-v8": "^2.0.5",
         "bestzip": "^2.2.1",
+        "cross-env": "^7.0.3",
         "eslint": "^9.10.0",
         "eslint-plugin-react": "^7.35.2",
         "eslint-plugin-vitest": "^0.5.4",
@@ -29,11 +30,11 @@
         "vitest": "^2.0.4"
     },
     "scripts": {
-        "pre-script": "REACT_APP_VERSION=$(node ./scripts/getVersion.js)",
+        "pre-script": "cross-env VITE_VERSION=$npm_package_version VITE_NAME=$npm_package_name",
         "copy-static": "ncp pages build && ncp temp_dist build/sparql",
         "build-react": "vite build --base=/sparql",
-        "start": "yarn pre-script && vite",
-        "build": "yarn pre-script && yarn build-react && yarn copy-static && yarn create-zip",
+        "start": "yarn pre-script vite",
+        "build": "yarn pre-script yarn build-react && yarn copy-static && yarn create-zip",
         "test": "vitest test",
         "eject": "react-scripts eject",
         "create-zip": "cd build && bestzip build.zip *",

public/manifest.json

@@ -1,25 +1,15 @@
 {
-  "short_name": "React App",
-  "name": "Create React App Sample",
-  "icons": [
-    {
-      "src": "favicon.ico",
-      "sizes": "64x64 32x32 24x24 16x16",
-      "type": "image/x-icon"
-    },
-    {
-      "src": "logo192.png",
-      "type": "image/png",
-      "sizes": "192x192"
-    },
-    {
-      "src": "logo512.png",
-      "type": "image/png",
-      "sizes": "512x512"
-    }
-  ],
-  "start_url": ".",
-  "display": "standalone",
-  "theme_color": "#000000",
-  "background_color": "#ffffff"
+    "short_name": "React App",
+    "name": "Create React App Sample",
+    "icons": [
+        {
+            "src": "insee.ico",
+            "sizes": "64x64 32x32 24x24 16x16",
+            "type": "image/x-icon"
+        }
+    ],
+    "start_url": ".",
+    "display": "standalone",
+    "theme_color": "#000000",
+    "background_color": "#ffffff"
 }

sonar-project.properties

@@ -4,17 +4,18 @@ sonar.host.url=https://sonarcloud.io
 
 # Project name & version
 sonar.projectName=Impala
-sonar.projectVersion=1.2.0
+sonar.projectVersion=1.3.0
 
 # Path to sources
 sonar.sources=src
+sonar.exclusions=src/**/*.spec.jsx, src/**/*.test.jsx
 
 # Path to tests
-sonar.test.inclusions=src/**/*.spec.jsx
+sonar.test.inclusions=src/**/*.spec.jsx, src/**/*.test.jsx
 
 # Coverage
 sonar.javascript.lcov.reportPaths=coverage/lcov.info
-sonar.coverage.exclusions=src/**/*.spec.jsx
+sonar.coverage.exclusions=src/**/*.spec.jsx, src/**/*.test.jsx
 
 # Source encoding
 sonar.sourceEncoding=UTF-8

src/App.jsx

@@ -1,5 +1,4 @@
 import React, { useEffect, useLayoutEffect, useRef, useState } from "react";
-import "./App.css";
 import PropTypes from "prop-types";
 
 const defaultEndpoint = "http://rdf.insee.fr/sparql";
@@ -37,7 +36,6 @@ function Editor({ endpoint, queries, prefix }) {
         if (editorRef.current.getAttribute("data-yasgui") === "true") {
             return;
         }
-
         localStorage.removeItem("yagui__config");
         editorRef.current.setAttribute("data-yasgui", "true");
         setYasgui(
@@ -97,7 +95,6 @@ function App() {
             });
     }, []);
 
-    //
     useEffect(() => {
         fetch("/configuration.json")
             .then(response => response.json())
@@ -111,9 +108,14 @@ function App() {
             });
     }, []);
 
+    const footer = `${import.meta.env.VITE_NAME?.toUpperCase()} : v${import.meta.env.VITE_VERSION}`;
+
     return (
         <div className="App">
             {endpoint && <Editor endpoint={endpoint} queries={queries} prefix={prefix} />}
+            <footer>
+                <p>{footer}</p>
+            </footer>
         </div>
     );
 }

src/index.css

@@ -1,6 +1,7 @@
 body {
     width: 70%;
     margin: auto;
+    font: 1em sans-serif;
 }
 
 .controlbar {
@@ -24,3 +25,11 @@ table td {
 .queries-block {
     padding: 1em 0;
 }
+
+footer {
+    p {
+        font-weight: bold;
+    }
+    text-align: center;
+    margin-top: 50px;
+}

vite.config.ts

@@ -1,11 +1,10 @@
-import { defineConfig } from "vite";
 import react from "@vitejs/plugin-react-swc";
 import { configDefaults } from "vitest/config";
 import { readFileSync } from "fs";
 import { resolve } from "path";
 
 // https://vitejs.dev/config/
-export default defineConfig({
+export default {
     base: "/",
     plugins: [react()],
     test: {
@@ -47,4 +46,4 @@ export default defineConfig({
             }
         }
     }
-});
+};

yarn.lock

@@ -1092,7 +1092,14 @@ crc32-stream@^4.0.2:
     crc-32 "^1.2.0"
     readable-stream "^3.4.0"
 
-cross-spawn@^7.0.0, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
+cross-env@^7.0.3:
+  version "7.0.3"
+  resolved "https://registry.yarnpkg.com/cross-env/-/cross-env-7.0.3.tgz#865264b29677dc015ba8418918965dd232fc54cf"
+  integrity sha512-+/HKd6EgcQCJGh2PSjZuUitQBQynKor4wrFbRg4DtAgS1aWO+gU52xpH7M9ScGgXSYmAVS9bIJ8EzuaGw0oNAw==
+  dependencies:
+    cross-spawn "^7.0.1"
+
+cross-spawn@^7.0.0, cross-spawn@^7.0.1, cross-spawn@^7.0.2, cross-spawn@^7.0.3:
   version "7.0.3"
   resolved "https://registry.npmjs.org/cross-spawn/-/cross-spawn-7.0.3.tgz"
   integrity sha512-iRDPJKUPVEND7dHPO8rkbOnPpyDygcDFtWjpeWNCgy8WP2rXcxXL8TskReQl6OrB2G7+UJrags1q15Fudc7G6w==