Merge pull request KelvinTegelaar#2320 from KelvinTegelaar/dev

Dev to release

.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.5.0",
   "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.5.0

src/App.jsx

@@ -2,29 +2,32 @@ import React, { Suspense } from 'react'
 import { BrowserRouter, Route, Routes, Navigate } 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 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 { useAuthCheck } from './components/utilities/CippauthCheck'
+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 (
@@ -50,6 +53,10 @@ const App = () => {
             }
           >
             {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
@@ -58,35 +65,13 @@ const App = () => {
                     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">
+                      <PrivateRoute allowedRoles={allowedRoles}>
                         <Suspense fallback={<Skeleton />}>
                           <Helmet>
                             <title>CIPP - {route.name}</title>
                           </Helmet>
                           <ErrorBoundary key={route.name}>
-                            <route.component />
+                            <Routecomponent />
                           </ErrorBoundary>
                         </Suspense>
                       </PrivateRoute>

src/_nav.jsx

@@ -244,6 +244,11 @@ const _nav = [
         name: 'Deploy CA Policies',
         to: '/tenant/conditional/deploy',
       },
+      {
+        component: CNavItem,
+        name: 'CA Policy Tester',
+        to: '/tenant/conditional/test-policy',
+      },
       {
         component: CNavItem,
         name: 'CA Vacation Mode',
@@ -254,11 +259,6 @@ const _nav = [
         name: 'CA Templates',
         to: '/tenant/conditional/list-template',
       },
-      {
-        component: CNavItem,
-        name: 'Add CA Template',
-        to: '/tenant/conditional/add-template',
-      },
       {
         component: CNavItem,
         name: 'Named Locations',

src/components/buttons/PdfButton.jsx

@@ -9,7 +9,7 @@ import { useSelector } from 'react-redux'
 
 function ExportPDFButton(props) {
   const base64 = useSelector((state) => state.app.reportImage)
-  const exportPDF = (pdfData, pdfHeaders, pdfSize = 'A4', reportName = 'report') => {
+  const exportPDF = (pdfData, pdfHeaders, pdfSize = 'A3', reportName = 'report') => {
     const unit = 'pt'
     const size = pdfSize // Use A1, A2, A3 or A4
     const orientation = 'landscape' // portrait or landscape

src/components/forms/RFFComponents.jsx

@@ -102,9 +102,16 @@ export const RFFCFormSwitch = ({
   disabled = false,
   initialValue,
   onClick,
+  defaultValue,
 }) => {
   return (
-    <Field initialValue={initialValue} name={name} type="checkbox" validate={validate}>
+    <Field
+      defaultValue={defaultValue}
+      initialValue={initialValue}
+      name={name}
+      type="checkbox"
+      validate={validate}
+    >
       {({ meta, input }) => (
         <ConditionWrapper
           condition={helpText}