Development

.github/workflows/build-twins-image.yml

@@ -0,0 +1,59 @@
+name: Docker Image CI
+
+on:
+  push:
+    paths:
+      - 'apps/digitaltwins/**'
+
+jobs:
+
+  test:
+
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        node-version: ["18"]
+    name: Run tests
+    steps:
+    - name: Checkout repo
+      uses: actions/checkout@v3
+    - name: Set node version
+      uses: actions/setup-node@v3
+      with:
+        node-version: '18'
+    - name: Install dependencies
+      run: |
+        sudo apt-get update
+        sudo apt-get install git
+        npm i -g turbo
+        npm i -g pnpm
+    - name: Run tests
+      run: "echo 'setup complete' "
+
+  push:
+
+    name: Push to registry.
+    runs-on: ohsmart-demo
+    needs: test
+    strategy:
+      matrix:
+        node-version: ["18"]
+    env:
+      IMAGE_TAG: ${{ github.ref_name }}
+      USERNAME: ${{ secrets.DOCKERHUB_USERNAME }}
+      IMAGE_NAME: "dans-frontend-framework-digital-twins"
+      ORG: "dansknaw"
+    steps:
+    - name: Checkout repo
+      uses: actions/checkout@v3
+    - name: Copy file
+      run: "cp /data/secrets/digitaltwins/.env.production apps/digitaltwins/."
+    - name: Login to registry
+      uses: docker/login-action@v3
+      with:
+        username: ${{ secrets.DOCKERHUB_USERNAME }}
+        password: ${{ secrets.DOCKERHUB_PASSWORD }}
+    - name: Push to dockerhub
+      run: |
+        docker build -f apps/digitaltwins/Dockerfile . -t $ORG/$IMAGE_NAME:$IMAGE_TAG
+        docker push $ORG/$IMAGE_NAME:$IMAGE_TAG

.gitignore

@@ -30,4 +30,7 @@ dist-ssr
 
 # Testing related
 playwright-report
-test-results
+test-results
+
+# Rollup visualiser
+stats.html

apps/4tu/package.json

@@ -18,13 +18,13 @@
     "@dans-framework/user-auth": "workspace:*",
     "@dans-framework/utils": "workspace:*",
     "@fontsource/roboto": "^5.0.7",
-    "@mui/material": "^5.14.3",
+    "@mui/material": "^5.16.7",
     "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",
+    "lz-string": "^1.5.0",
+    "notistack": "^3.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-i18next": "^13.0.3",
@@ -33,12 +33,10 @@
     "web-vitals": "^3.4.0"
   },
   "devDependencies": {
-    "@types/node": "^20.11.27",
     "@types/react": "^18.2.15",
     "@types/react-dom": "^18.2.7",
     "@vitejs/plugin-react": "^4.0.3",
-    "eslint-plugin-react-hooks": "^4.6.0",
-    "eslint-plugin-react-refresh": "^0.4.3",
+    "eslint-plugin-react-hooks": "^5.0.0",
     "vite": "^4.4.5",
     "vite-plugin-checker": "^0.6.2"
   }

apps/4tu/src/App.tsx

@@ -13,7 +13,11 @@ import {
   UserSubmissions,
   SignInCallback,
 } from "@dans-framework/user-auth";
-import { RepoAdvisor, RepoBar, NoRepoSelected } from '@dans-framework/repo-advisor';
+import {
+  RepoAdvisor,
+  RepoBar,
+  NoRepoSelected,
+} from "@dans-framework/repo-advisor";
 import { Generic, type Page } from "@dans-framework/pages";
 
 // Load config variables
@@ -27,16 +31,16 @@ import { AnimatePresence, motion } from "framer-motion";
 
 const App = () => {
   const { i18n } = useTranslation();
-  const [ repoConfig, setRepoConfig ] = useState<FormConfig>();
-  const configIsSet = repoConfig?.hasOwnProperty('form') || false;
+  const [repoConfig, setRepoConfig] = useState<FormConfig>();
+  const configIsSet = repoConfig?.hasOwnProperty("form") || false;
   return (
     <AuthWrapper authProvider={authProvider}>
       <ThemeWrapper theme={theme} siteTitle={siteTitle}>
         <BrowserRouter>
           {/* Suspense to make sure languages can load first */}
           <Suspense>
             <AnimatePresence>
-              { configIsSet && 
+              {configIsSet && (
                 <motion.div
                   initial={{ opacity: 0, y: -10 }}
                   animate={{ opacity: 1, y: 0 }}
@@ -45,14 +49,14 @@ const App = () => {
                 >
                   <RepoBar repo={repoConfig?.displayName} />
                 </motion.div>
-              }
+              )}
             </AnimatePresence>
           </Suspense>
           <LanguageBar
             languages={languages}
             changeLanguage={i18n.changeLanguage}
           />
-          <MenuBar 
+          <MenuBar
             pages={pages}
             userSettings={configIsSet}
             userSubmissions={configIsSet}
@@ -75,9 +79,8 @@ const App = () => {
                       <UserSettings
                         target={repoConfig.targetCredentials}
                         depositSlug=""
-                      /> :
-                      <NoRepoSelected advisorLocation="/" />
-                    }
+                      />
+                    : <NoRepoSelected advisorLocation="/" />}
                   </AuthRoute>
                 }
               />
@@ -86,9 +89,8 @@ const App = () => {
                 element={
                   <AuthRoute>
                     {repoConfig ?
-                      <UserSubmissions depositSlug="" /> :
-                      <NoRepoSelected advisorLocation="/" />
-                    }
+                      <UserSubmissions depositSlug="" targetCredentials={repoConfig.targetCredentials} />
+                    : <NoRepoSelected advisorLocation="/" />}
                   </AuthRoute>
                 }
               />
@@ -102,13 +104,16 @@ const App = () => {
                       page.template === "deposit" ?
                         <AuthRoute>
                           {repoConfig ?
-                            <Deposit config={repoConfig} page={page} /> :
-                            <NoRepoSelected advisorLocation="/" />
-                          }
+                            <Deposit config={repoConfig} page={page} />
+                          : <NoRepoSelected advisorLocation="/" />}
                         </AuthRoute>
                       : page.template === "advisor" ?
                         <AuthRoute>
-                          <RepoAdvisor page={page} setRepoConfig={setRepoConfig} depositLocation="/deposit" />
+                          <RepoAdvisor
+                            page={page}
+                            setRepoConfig={setRepoConfig}
+                            depositLocation="/deposit"
+                          />
                         </AuthRoute>
                       : <Generic {...page} />
                     }
@@ -122,16 +127,15 @@ const App = () => {
                 element={
                   <AuthRoute>
                     {repoConfig ?
-                      <Deposit 
-                        config={repoConfig} 
-                        page={{ 
+                      <Deposit
+                        config={repoConfig}
+                        page={{
                           name: "Deposit",
                           id: "deposit",
                           inMenu: true,
-                        }} 
-                      /> :
-                      <NoRepoSelected advisorLocation="/" />
-                    }
+                        }}
+                      />
+                    : <NoRepoSelected advisorLocation="/" />}
                   </AuthRoute>
                 }
               />

apps/4tu/src/config/auth.ts

@@ -6,4 +6,4 @@ const authProvider = {
   loadUserInfo: true,
 };
 
-export default authProvider;
+export default authProvider;

apps/4tu/src/config/i18n.ts

@@ -1,40 +1,40 @@
-import i18n from "i18next";
-import { initReactI18next } from "react-i18next";
-import languages from "./languages";
-import LanguageDetector from "i18next-browser-languagedetector";
-import { i18n as i18nLayout } from "@dans-framework/layout";
-import { i18n as i18nDeposit } from "@dans-framework/deposit";
-import { i18n as i18nAuth } from "@dans-framework/user-auth";
-import { i18n as i18nRepo } from "@dans-framework/repo-advisor";
-
-// this is the main language provider for all subcomponents/libraries
-i18n
-  .use(LanguageDetector)
-  .use(initReactI18next)
-  .init({
-    debug: import.meta.env.DEV,
-    supportedLngs: languages,
-    detection: {
-      order: ["cookie", "localStorage"],
-      lookupCookie: "i18next",
-      lookupLocalStorage: "i18nextLng",
-      caches: ["localStorage", "cookie"],
-    },
-    fallbackLng: "en",
-    interpolation: {
-      escapeValue: false,
-    },
-    react: {
-      useSuspense: true,
-    },
-  });
-
-// make sure to import languages for the components that need it
-i18n.on("languageChanged", (lng) => {
-  i18nLayout.changeLanguage(lng);
-  i18nDeposit.changeLanguage(lng);
-  i18nAuth.changeLanguage(lng);
-  i18nRepo.changeLanguage(lng);
-});
-
-export default i18n;
+import i18n from "i18next";
+import { initReactI18next } from "react-i18next";
+import languages from "./languages";
+import LanguageDetector from "i18next-browser-languagedetector";
+import { i18n as i18nLayout } from "@dans-framework/layout";
+import { i18n as i18nDeposit } from "@dans-framework/deposit";
+import { i18n as i18nAuth } from "@dans-framework/user-auth";
+import { i18n as i18nRepo } from "@dans-framework/repo-advisor";
+
+// this is the main language provider for all subcomponents/libraries
+i18n
+  .use(LanguageDetector)
+  .use(initReactI18next)
+  .init({
+    debug: import.meta.env.DEV,
+    supportedLngs: languages,
+    detection: {
+      order: ["cookie", "localStorage"],
+      lookupCookie: "i18next",
+      lookupLocalStorage: "i18nextLng",
+      caches: ["localStorage", "cookie"],
+    },
+    fallbackLng: "en",
+    interpolation: {
+      escapeValue: false,
+    },
+    react: {
+      useSuspense: true,
+    },
+  });
+
+// make sure to import languages for the components that need it
+i18n.on("languageChanged", (lng) => {
+  i18nLayout.changeLanguage(lng);
+  i18nDeposit.changeLanguage(lng);
+  i18nAuth.changeLanguage(lng);
+  i18nRepo.changeLanguage(lng);
+});
+
+export default i18n;

apps/4tu/src/config/languages.ts

@@ -1,5 +1,5 @@
-import type { Language } from "@dans-framework/utils";
-
-const languages: Language[] = ["en", "nl"];
-
-export default languages;
+import type { Language } from "@dans-framework/utils";
+
+const languages: Language[] = ["en", "nl"];
+
+export default languages;

apps/4tu/src/config/pages.ts

@@ -1,33 +1,33 @@
-import type { Page } from "@dans-framework/pages";
-
-const depositPage: Page = {
-  id: "deposit",
-  name: {
-    en: "Deposit",
-    nl: "Deponeren",
-  },
-  slug: "deposit",
-  template: "deposit",
-  inMenu: true,
-  menuTitle: {
-    en: "Deposit",
-    nl: "Deponeren",
-  },
-};
-
-const advisorPage: Page = {
-  id: "advisor",
-  name: {
-    en: "Repository selector",
-    nl: "Repository selector",
-  },
-  slug: "/",
-  template: "advisor",
-  inMenu: true,
-  menuTitle: {
-    en: "Repository selector",
-    nl: "Repository selector",
-  },
-};
-
-export default [ advisorPage, depositPage ];
+import type { Page } from "@dans-framework/pages";
+
+const depositPage: Page = {
+  id: "deposit",
+  name: {
+    en: "Deposit",
+    nl: "Deponeren",
+  },
+  slug: "deposit",
+  template: "deposit",
+  inMenu: true,
+  menuTitle: {
+    en: "Deposit",
+    nl: "Deponeren",
+  },
+};
+
+const advisorPage: Page = {
+  id: "advisor",
+  name: {
+    en: "Repository selector",
+    nl: "Repository selector",
+  },
+  slug: "/",
+  template: "advisor",
+  inMenu: true,
+  menuTitle: {
+    en: "Repository selector",
+    nl: "Repository selector",
+  },
+};
+
+export default [advisorPage, depositPage];