#622

.github/workflows/ci.yaml

@@ -82,8 +82,6 @@ jobs:
           push: true
           context: .
           tags: ${{needs.prepare_release.outputs.new_web_docker_image_tags}}
-          build-args: CHART_VERSION=${{needs.prepare_release.outputs.new_chart_version}}
-
 
   release:
     runs-on: ubuntu-latest

web/.env

@@ -204,4 +204,10 @@ REACT_APP_DISABLE_COMMAND_BAR=false
 
 REACT_APP_ONYXIA_API_URL=/api
 # https://github.com/facebook/create-react-app/discussions/11767#discussioncomment-1968889
-GENERATE_SOURCEMAP=false
+GENERATE_SOURCEMAP=false
+
+
+# Automatically by the Helm chart but can be overriden
+# It defines the version that is displayed in the footer, it's the only thing it does.  
+REACT_APP_ONYXIA_VERSION=
+REACT_APP_ONYXIA_VERSION_URL=

web/Dockerfile

@@ -7,7 +7,6 @@ COPY patches ./patches
 RUN yarn install --frozen-lockfile
 COPY config-overrides.js tsconfig.json ./
 COPY src ./src
-ARG CHART_VERSION=""
 RUN yarn build
 COPY nginx.conf ./
 

web/config-overrides.js

@@ -41,21 +41,7 @@ module.exports = function override(config) {
                 "process": "process",
             }),
             new DefinePlugin({
-                // This let us display the version number in the footer of the app.
-                "process.env.CHART_VERSION": JSON.stringify((()=>{
-
-                    const { CHART_VERSION } = process.env;
-
-                    console.log(CHART_VERSION);
-
-                    if( CHART_VERSION === undefined ){
-                        return "";
-                    }
-
-                    return CHART_VERSION;
-
-
-                })())
+                "process.env.WEB_VERSION": JSON.stringify(process.env.npm_package_version)
             }),
         ],
     );

web/src/core/adapters/onyxiaApi.ts

@@ -74,6 +74,9 @@ export function createOnyxiaApi(params: {
         "getAvailableRegionsAndOidcParams": memoize(() =>
             axiosInstance
                 .get<{
+                    build: {
+                        version: string;
+                    };
                     regions: {
                         id: string;
                         services: {
@@ -194,7 +197,17 @@ export function createOnyxiaApi(params: {
                         clientID: string;
                     };
                 }>("/public/configuration")
-                .then(({ data }) => ({
+                .then(({ data }) => {
+                    const { version } = data.build;
+                    console.log(
+                        [
+                            `inseefrlab/onyxia-api version ${version}`,
+                            `https://github.com/InseeFrLab/onyxia-api/tree/${version}`
+                        ].join("\n")
+                    );
+                    return data;
+                })
+                .then(data => ({
                     "regions": data.regions.map(
                         (region): DeploymentRegion => ({
                             "id": region.id,

web/src/index.tsx

@@ -4,6 +4,17 @@ import { kcContext as kcLoginThemeContext } from "keycloak-theme/login/kcContext
 import { assert } from "tsafe/assert";
 import { applyFaviconColor } from "ui/theme";
 
+{
+    const version = process.env.REACT_APP_VERSION;
+
+    console.log(
+        [
+            `inseefrlab/onyxia-web version: ${version}`,
+            `https://github.com/InseeFrLab/onyxia/tree/web-v${version}/web`
+        ].join("\n")
+    );
+}
+
 applyFaviconColor();
 
 const App = lazy(() => import("ui/App"));

web/src/stories/App/Footer.stories.tsx

@@ -11,7 +11,10 @@ const { meta, getStory } = getStoryFactory({
 export default meta;
 
 export const View1 = getStory({
-    "chartVersion": "4.1.1",
+    "onyxiaVersion": {
+        "number": "v3.0.1",
+        "url": "https://github.com/InseeFrLab/onyxia/tree/v3.0.1/helm-chart"
+    },
     "contributeUrl": "#",
     "termsLink": {
         "href": "https://example.com",

web/src/ui/App/App.tsx

@@ -304,8 +304,19 @@ function ContextualizedApp() {
             </section>
             <Footer
                 className={classes.footer}
-                //NOTE: Defined in ./config-overrides.js
-                chartVersion={process.env.CHART_VERSION || undefined}
+                onyxiaVersion={(() => {
+                    const version = getEnv().ONYXIA_VERSION;
+
+                    if (version === "") {
+                        return undefined;
+                    }
+
+                    const url = getEnv().ONYXIA_VERSION_URL;
+
+                    assert(url !== "");
+
+                    return { "number": version, url };
+                })()}
                 contributeUrl={"https://github.com/inseefrlab/onyxia"}
                 termsLink={routes.terms().link}
             />

web/src/ui/App/Footer.tsx

@@ -10,12 +10,17 @@ import type { Link } from "type-route";
 export type Props = {
     className?: string;
     contributeUrl: string;
-    chartVersion: string | undefined;
+    onyxiaVersion:
+        | {
+              number: string;
+              url: string;
+          }
+        | undefined;
     termsLink: Link;
 };
 
 export const Footer = memo((props: Props) => {
-    const { className, contributeUrl, chartVersion, termsLink } = props;
+    const { className, contributeUrl, onyxiaVersion, termsLink } = props;
 
     const { classes, cx } = useStyles(props);
 
@@ -49,16 +54,12 @@ export const Footer = memo((props: Props) => {
             {spacing}
             <a {...termsLink} target="_blank" rel="noreferrer">
                 {" "}
-                <Text typo="body 2">{t("terms of service")}</Text>{" "}
+                <Text typo="body 2">v{t("terms of service")}</Text>{" "}
             </a>
             {spacing}
-            {chartVersion !== undefined && (
-                <a
-                    href={`https://github.com/InseeFrLab/onyxia/tree/v${chartVersion}/helm-chart`}
-                    target="_blank"
-                    rel="noreferrer"
-                >
-                    <Text typo="body 2">v{chartVersion} </Text>
+            {onyxiaVersion !== undefined && (
+                <a href={onyxiaVersion.url} target="_blank" rel="noreferrer">
+                    <Text typo="body 2">{onyxiaVersion.number}</Text>
                 </a>
             )}
             {spacing}