Merge pull request #190 from DANS-KNAW/demo

Prod release ohsmart
DANS-KNAW · Aug 19, 2024 · 5221640 · 5221640
2 parents 0c8d6f3 + 9028aad
commit 5221640
Show file tree

Hide file tree

Showing 144 changed files with 6,992 additions and 3,617 deletions.
diff --git a/.github/workflows/build-ohsmart-image.yml b/.github/workflows/build-ohsmart-image.yml
@@ -12,15 +12,15 @@ jobs:
     runs-on: ubuntu-latest 
     strategy:
       matrix:
-        node-version: ["18"]
+        node-version: ["20"]
     name: Run tests
     steps:
     - name: Checkout repo
       uses: actions/checkout@v3
     - name: Set node version
       uses: actions/setup-node@v3
       with:
-        node-version: '18'
+        node-version: '20'
     - name: Install dependencies
       run: |
         sudo apt-get update
@@ -36,7 +36,7 @@ jobs:
     runs-on: ohsmart-production
     strategy:
       matrix:
-        node-version: ["18"]
+        node-version: ["20"]
     env:
       IMAGE_TAG: ${{ github.ref_name }}
       USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}

diff --git a/apps/4tu/.env b/apps/4tu/.env
@@ -1,23 +1,13 @@
 ## Values are exposed (as strings) in the app as: import.meta.env.VITE_VALUE_NAME
 
-## DANS packaging key
-VITE_PACKAGING_KEY = ''
-
-## Packaging target
-VITE_PACKAGING_TARGET = ''
-VITE_ENV_NAME = ''
-VITE_CONFIG_NAME = ''
-
-## Target configs
-VITE_TARGET_1_REPO = ''
-VITE_TARGET_1_KEY_URL = ''
-VITE_TARGET_1_KEY_CHECK_URL = ''
-
 ## OIDC config
 VITE_OIDC_AUTHORITY = ''
 VITE_OIDC_CLIENT_ID = ''
 VITE_OIDC_SCOPE = 'openid profile'
 
+## Advisor config
+VITE_ADVISOR_URL = ''
+
 ## API keys
 VITE_GEONAMES_API_KEY = ''
 

diff --git a/apps/4tu/Dockerfile b/apps/4tu/Dockerfile
@@ -1,6 +1,6 @@
 # Fetching the latest node image on apline linux
-FROM node:18-alpine AS builder
-RUN apk update && apk add git && npm i -g turbo && npm i -g pnpm@8.6.12
+FROM node:20-alpine AS builder
+RUN apk update && apk add git && npm i -g turbo && npm i -g pnpm
 
 # Setting up the work directory
 WORKDIR /app

diff --git a/apps/4tu/package.json b/apps/4tu/package.json
@@ -13,15 +13,23 @@
     "@dans-framework/deposit": "workspace:*",
     "@dans-framework/layout": "workspace:*",
     "@dans-framework/pages": "workspace:*",
+    "@dans-framework/repo-advisor": "workspace:*",
     "@dans-framework/theme": "workspace:*",
     "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/utils": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
     "@mui/material": "^5.14.3",
+    "framer-motion": "^10.15.0",
     "lz-string": "^1.5.0",
+    "notistack": "^3.0.1",
+    "i18next": "^23.4.1",
+    "i18next-browser-languagedetector": "^7.1.0",
+    "i18next-resources-to-backend": "^1.1.4",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
+    "react-i18next": "^13.0.3",
     "react-router-dom": "^6.14.2",
+    "use-debounce": "^9.0.4",
     "web-vitals": "^3.4.0"
   },
   "devDependencies": {

diff --git a/apps/4tu/src/App.tsx b/apps/4tu/src/App.tsx
@@ -1,33 +1,62 @@
-import { Suspense } from "react";
+import { Suspense, useState } from "react";
 import { BrowserRouter, Routes, Route } from "react-router-dom";
 import Skeleton from "@mui/material/Skeleton";
 import Box from "@mui/material/Box";
+import { useTranslation } from "react-i18next";
 import { ThemeWrapper } from "@dans-framework/theme";
-import { MenuBar, Footer } from "@dans-framework/layout";
-import { Deposit } from "@dans-framework/deposit";
-import { Generic, type Page } from "@dans-framework/pages";
+import { LanguageBar, MenuBar, Footer } from "@dans-framework/layout";
+import { Deposit, type FormConfig } from "@dans-framework/deposit";
 import {
   AuthWrapper,
   AuthRoute,
   UserSettings,
   UserSubmissions,
   SignInCallback,
 } from "@dans-framework/user-auth";
+import { RepoAdvisor, RepoBar, NoRepoSelected } from '@dans-framework/repo-advisor';
+import { Generic, type Page } from "@dans-framework/pages";
 
 // Load config variables
+import pages from "./config/pages";
 import theme from "./config/theme";
 import footer from "./config/footer";
-import pages from "./config/pages";
 import siteTitle from "./config/siteTitle";
+import languages from "./config/languages";
 import authProvider from "./config/auth";
-import form from "./config/form";
+import { AnimatePresence, motion } from "framer-motion";
 
 const App = () => {
+  const { i18n } = useTranslation();
+  const [ repoConfig, setRepoConfig ] = useState<FormConfig>();
+  const configIsSet = repoConfig?.hasOwnProperty('form') || false;
   return (
     <AuthWrapper authProvider={authProvider}>
       <ThemeWrapper theme={theme} siteTitle={siteTitle}>
         <BrowserRouter>
-          <MenuBar pages={pages} />
+          {/* Suspense to make sure languages can load first */}
+          <Suspense>
+            <AnimatePresence>
+              { configIsSet && 
+                <motion.div
+                  initial={{ opacity: 0, y: -10 }}
+                  animate={{ opacity: 1, y: 0 }}
+                  exit={{ opacity: 0, y: -10 }}
+                  key="repo"
+                >
+                  <RepoBar repo={repoConfig?.displayName} />
+                </motion.div>
+              }
+            </AnimatePresence>
+          </Suspense>
+          <LanguageBar
+            languages={languages}
+            changeLanguage={i18n.changeLanguage}
+          />
+          <MenuBar 
+            pages={pages}
+            userSettings={configIsSet}
+            userSubmissions={configIsSet}
+          />
           {/* Suspense to make sure languages can load first */}
           <Suspense
             fallback={
@@ -42,21 +71,28 @@ const App = () => {
                 path="user-settings"
                 element={
                   <AuthRoute>
-                    <UserSettings
-                      target={form.targetCredentials}
-                      depositSlug=""
-                    />
+                    {repoConfig ?
+                      <UserSettings
+                        target={repoConfig.targetCredentials}
+                        depositSlug=""
+                      /> :
+                      <NoRepoSelected advisorLocation="/" />
+                    }
                   </AuthRoute>
                 }
               />
               <Route
                 path="user-submissions"
                 element={
                   <AuthRoute>
-                    <UserSubmissions depositSlug="" />
+                    {repoConfig ?
+                      <UserSubmissions depositSlug="" /> :
+                      <NoRepoSelected advisorLocation="/" />
+                    }
                   </AuthRoute>
                 }
               />
+
               {(pages as Page[]).map((page) => {
                 return (
                   <Route
@@ -65,13 +101,48 @@ const App = () => {
                     element={
                       page.template === "deposit" ?
                         <AuthRoute>
-                          <Deposit config={form} page={page} />
+                          {repoConfig ?
+                            <Deposit config={repoConfig} page={page} /> :
+                            <NoRepoSelected advisorLocation="/" />
+                          }
+                        </AuthRoute>
+                      : page.template === "advisor" ?
+                        <AuthRoute>
+                          <RepoAdvisor page={page} setRepoConfig={setRepoConfig} depositLocation="/deposit" />
                         </AuthRoute>
                       : <Generic {...page} />
                     }
                   />
                 );
               })}
+
+              <Route
+                key="deposit"
+                path="deposit"
+                element={
+                  <AuthRoute>
+                    {repoConfig ?
+                      <Deposit 
+                        config={repoConfig} 
+                        page={{ 
+                          name: "Deposit",
+                          id: "deposit",
+                          inMenu: true,
+                        }} 
+                      /> :
+                      <NoRepoSelected advisorLocation="/" />
+                    }
+                  </AuthRoute>
+                }
+              />
+              <Route
+                path="*"
+                element={
+                  <AuthRoute>
+                    <NoRepoSelected advisorLocation="/" />
+                  </AuthRoute>
+                }
+              />
             </Routes>
           </Suspense>
         </BrowserRouter>