Merge branch 'KelvinTegelaar:main' into main

.github/workflows/dev_deploy.yml

@@ -0,0 +1,45 @@
+name: CIPP Development Frontend CI/CD
+
+on:
+  push:
+    branches:
+      - dev
+  pull_request:
+    types: [opened, synchronize, reopened, closed]
+    branches:
+      - dev
+
+jobs:
+  build_and_deploy_job:
+    if: github.event.repository.fork == false && github.event_name == 'push' || (github.event_name == 'pull_request' && github.event.action != 'closed')
+    runs-on: ubuntu-latest
+    name: Build and Deploy Job
+    steps:
+      - uses: actions/checkout@v4
+        with:
+          submodules: true
+      - name: Build And Deploy
+        id: builddeploy
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} # change this to your repository secret name
+          repo_token: ${{ secrets.GITHUB_TOKEN }} # Used for Github integrations (i.e. PR comments)
+          action: 'upload'
+          ###### Repository/Build Configurations - These values can be configured to match your app requirements. ######
+          # For more information regarding Static Web App workflow configurations, please visit: https://aka.ms/swaworkflowconfig
+          app_location: '/' # App source code path
+          api_location: '' # Api source code path - optional
+          output_location: '' # Built app content directory - optional
+          ###### End of Repository/Build Configurations ######
+
+  close_pull_request_job:
+    if: github.event.repository.fork == false && github.event_name == 'pull_request' && github.event.action == 'closed'
+    runs-on: ubuntu-latest
+    name: Close Pull Request Job
+    steps:
+      - name: Close Pull Request
+        id: closepullrequest
+        uses: Azure/static-web-apps-deploy@v1
+        with:
+          azure_static_web_apps_api_token: ${{ secrets.AZURE_STATIC_WEB_APPS_API_TOKEN }} # change this to your repository secret name
+          action: 'close'

.prettierignore

@@ -1 +1,4 @@
 dist/
+build/
+importsMap.jsx
+Generate-Import-Map.js

Generate-Import-Map.js

@@ -0,0 +1,35 @@
+// Using ES Module syntax compatible with Node.js 18 and ensuring cross-platform compatibility
+import fs from 'fs/promises'
+import path from 'path'
+import { fileURLToPath } from 'url'
+
+// Convert __dirname equivalent for ES Modules
+const __filename = fileURLToPath(import.meta.url)
+const __dirname = path.dirname(__filename)
+
+// Adjust the relative path as necessary to point to your routes.json location
+const routesPath = path.join(__dirname, './src/routes.json') // Example path
+
+// Load routes.json with an import assertion for JSON
+const routes = await import(`file://${routesPath}`, { assert: { type: 'json' } }).then(
+  (module) => module.default,
+)
+
+let importsMap = "import React from 'react'\n export const importsMap = {\n"
+
+routes.forEach((route) => {
+  if (route.component) {
+    // Adjust the import path to be relative to the importsMap.js file location
+    const importPath = route.component.replace('views', './views')
+    // Ensure paths are Unix-like for the dynamic import to work cross-platform
+    const unixImportPath = importPath.split(path.sep).join('/')
+    importsMap += `  "${route.path}": React.lazy(() => import('${unixImportPath}')), \n`
+  }
+})
+
+importsMap += '}\nexport default importsMap'
+
+// Specify the output file path for the generated imports map
+const outputPath = path.join(__dirname, './src/importsMap.jsx')
+await fs.writeFile(outputPath, importsMap)
+console.log('Import map generated.')

Importmap.ps1

@@ -0,0 +1,22 @@
+// generate-imports-map.js
+const fs = require('fs')
+const path = require('path')
+const routes = require('./path/to/routes.json')
+
+let importsMap = 'export const importsMap = {\n'
+
+routes.forEach(route => {
+        if (route.component) {
+            // Convert the path to a format that's relative to where you'll be importing from
+            const importPath = route.component.replace('views', './views')
+            const componentName = path.basename(importPath)
+
+            // Create an import statement for the component
+            importsMap += "${route.path}": React.lazy(() = > import('${importPath}')), \n`;
+        }
+    })
+
+importsMap += '};\n'
+
+fs.writeFileSync(path.resolve(__dirname,'./src/importsMap.js'), importsMap)
+console.log('Import map generated.')

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "5.4.2",
+  "version": "5.6.1",
   "description": "The CyberDrain Improved Partner Portal is a portal to help manage administration for Microsoft Partners.",
   "homepage": "https://cipp.app/",
   "bugs": {
@@ -14,6 +14,7 @@
   "license": "AGPL-3.0",
   "author": "CIPP Contributors",
   "scripts": {
+    "prebuild": "node Generate-Import-Map.js",
     "build": "echo react-scripts build && vite build",
     "changelog": "auto-changelog --starting-version 3.0.0 --commit-limit false --hide-credit",
     "lint": "eslint \"src/**/*.js\"",
@@ -43,6 +44,7 @@
     "@rjsf/core": "^5.12.1",
     "@rjsf/utils": "^5.12.1",
     "@rjsf/validator-ajv8": "^5.12.1",
+    "@uiw/react-json-view": "^2.0.0-alpha.23",
     "axios": "^1.6.2",
     "buffer": "^6.0.3",
     "chart.js": "^3.5.1",

public/version_latest.txt

@@ -1 +1 @@
-5.4.2
+5.6.1

src/App.jsx

@@ -1,105 +1,88 @@
 import React, { Suspense } from 'react'
-import { BrowserRouter, Route, Routes, Navigate } from 'react-router-dom'
+import { BrowserRouter, Route, Routes, Navigate, useLocation } from 'react-router-dom'
 import { PrivateRoute, FullScreenLoading, ErrorBoundary } from 'src/components/utilities'
 import 'src/scss/style.scss'
-import routes from 'src/routes'
-import { Helmet } from 'react-helmet-async'
-import adminRoutes from './adminRoutes'
+import { Helmet, HelmetProvider } from 'react-helmet-async'
 import Skeleton from 'react-loading-skeleton'
 import TimeAgo from 'javascript-time-ago'
 import en from 'javascript-time-ago/locale/en.json'
 TimeAgo.addDefaultLocale(en)
 import { library } from '@fortawesome/fontawesome-svg-core'
 import { fas } from '@fortawesome/free-solid-svg-icons'
+import routes from 'src/routes'
+import importsMap from './importsMap'
 
 library.add(fas)
 
-// Containers
-const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
+const dynamicImport = (path) => {
+  return importsMap[path] || null
+}
 
-// Pages
+const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))
 const Page401 = React.lazy(() => import('./views/pages/page401/Page401'))
 const Page403 = React.lazy(() => import('./views/pages/page403/Page403'))
 const Page404 = React.lazy(() => import('./views/pages/page404/Page404'))
 const Page500 = React.lazy(() => import('./views/pages/page500/Page500'))
 const PageLogOut = React.lazy(() => import('src/views/pages/LogoutRedirect/PageLogOut'))
 const Login = React.lazy(() => import('./views/pages/login/Login'))
 const Logout = React.lazy(() => import('./views/pages/login/Logout'))
+//we loop through the routes array, dynamicly create the component by using dynamicImport, add the component to the route array as 'component' key.
 
 const App = () => {
   return (
     <BrowserRouter>
-      <Suspense fallback={<FullScreenLoading />}>
-        <Helmet>
-          <title>CIPP</title>
-        </Helmet>
-        <Routes>
-          <Route exact path="/LogoutRedirect" name="LogoutRedirect" element={<PageLogOut />} />
-          <Route exact path="/401" name="Page 401" element={<Page401 />} />
-          <Route exact path="/403" name="Page 403" element={<Page403 />} />
-          <Route exact path="/404" name="Page 404" element={<Page404 />} />
-          <Route exact path="/500" name="Page 500" element={<Page500 />} />
-          <Route exact path="/login" name="Login" element={<Login />} />
-          <Route exact path="/logout" name="Logout" element={<Logout />} />
-          <Route
-            path="/"
-            element={
-              <PrivateRoute>
-                <DefaultLayout />
-              </PrivateRoute>
-            }
-          >
-            {routes.map((route, idx) => {
-              return (
-                route.component && (
-                  <Route
-                    key={`route-${idx}`}
-                    path={route.path}
-                    exact={route.exact}
-                    name={route.name}
-                    element={
-                      <Suspense fallback={<Skeleton />}>
-                        <Helmet>
-                          <title>CIPP - {route.name}</title>
-                        </Helmet>
-                        <ErrorBoundary key={route.name}>
-                          <route.component />
-                        </ErrorBoundary>
-                      </Suspense>
-                    }
-                  />
-                )
-              )
-            })}
-            {adminRoutes.map((route, idx) => {
-              return (
-                route.component && (
-                  <Route
-                    key={`route-${idx}`}
-                    path={route.path}
-                    exact={route.exact}
-                    name={route.name}
-                    element={
-                      <PrivateRoute routeType="admin">
-                        <Suspense fallback={<Skeleton />}>
-                          <Helmet>
-                            <title>CIPP - {route.name}</title>
-                          </Helmet>
-                          <ErrorBoundary key={route.name}>
-                            <route.component />
-                          </ErrorBoundary>
-                        </Suspense>
-                      </PrivateRoute>
-                    }
-                  />
+      <HelmetProvider>
+        <Suspense fallback={<FullScreenLoading />}>
+          <Helmet>
+            <title>CIPP</title>
+          </Helmet>
+          <Routes>
+            <Route exact path="/LogoutRedirect" name="LogoutRedirect" element={<PageLogOut />} />
+            <Route exact path="/401" name="Page 401" element={<Page401 />} />
+            <Route exact path="/403" name="Page 403" element={<Page403 />} />
+            <Route exact path="/404" name="Page 404" element={<Page404 />} />
+            <Route exact path="/500" name="Page 500" element={<Page500 />} />
+            <Route exact path="/login" name="Login" element={<Login />} />
+            <Route exact path="/logout" name="Logout" element={<Logout />} />
+            <Route
+              path="/"
+              element={
+                <PrivateRoute>
+                  <DefaultLayout />
+                </PrivateRoute>
+              }
+            >
+              {routes.map((route, idx) => {
+                const allowedRoles = route.allowedRoles
+                const Routecomponent = dynamicImport(route.path)
+                //console.log('route', route)
+                //console.log('Routecomponent', Routecomponent)
+                return (
+                  route.component && (
+                    <Route
+                      key={`route-${idx}`}
+                      path={route.path}
+                      exact={route.exact}
+                      name={route.name}
+                      element={
+                        <PrivateRoute allowedRoles={allowedRoles}>
+                          <Suspense fallback={<Skeleton />}>
+                            <ErrorBoundary key={route.name}>
+                              <Routecomponent />
+                            </ErrorBoundary>
+                          </Suspense>
+                        </PrivateRoute>
+                      }
+                    />
+                  )
                 )
-              )
-            })}
-            <Route path="/" element={<Navigate to="/home" replace={true} />} />
-          </Route>
-          <Route path="*" name="Page 404" element={<Page404 />} />
-        </Routes>
-      </Suspense>
+              })}
+              <Route path="/" element={<Navigate to="/home" replace={true} />} />
+            </Route>
+            <Route path="*" name="Page 404" element={<Page404 />} />
+          </Routes>
+        </Suspense>
+      </HelmetProvider>
     </BrowserRouter>
   )
 }