Merge branch 'KelvinTegelaar:main' into main

package.json

@@ -38,8 +38,13 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.16",
+    "@monaco-editor/react": "^4.5.2",
     "@popperjs/core": "^2.10.2",
     "@reduxjs/toolkit": "^1.7.0",
+    "@rjsf/bootstrap-4": "^5.12.1",
+    "@rjsf/core": "^5.12.1",
+    "@rjsf/utils": "^5.12.1",
+    "@rjsf/validator-ajv8": "^5.12.1",
     "@wojtekmaj/enzyme-adapter-react-17": "^0.6.3",
     "axios": "^0.24.0",
     "buffer": "^6.0.3",
@@ -56,6 +61,7 @@
     "prop-types": "^15.7.2",
     "react": "^17.0.2",
     "react-app-polyfill": "^2.0.0",
+    "react-bootstrap": "^1.6.5",
     "react-copy-to-clipboard": "^5.0.4",
     "react-data-table-component": "^7.4.5",
     "react-datepicker": "^4.10.0",

public/version_latest.txt

@@ -1 +1 @@
-4.1.0
+4.2.1

src/App.js

@@ -9,6 +9,10 @@ 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'
+
+library.add(fas)
 
 // Containers
 const DefaultLayout = React.lazy(() => import('./layout/DefaultLayout'))

src/_nav.js

@@ -171,6 +171,11 @@ const _nav = [
         name: 'Individual Domain Check',
         to: '/tenant/standards/individual-domains',
       },
+      {
+        component: CNavItem,
+        name: 'BPA Report Builder',
+        to: '/tenant/tools/bpa-report-builder',
+      },
     ],
   },
   {

src/components/header/AppHeaderDropdown.js

@@ -18,24 +18,30 @@ const AppHeaderDropdown = () => {
   const [profileVisible, setProfileVisible] = useState(false)
   const [cippQueueExtendedInfo, setCippQueueExtendedInfo] = useState([])
   const [cippQueueVisible, setCippQueueVisible] = useState(false)
-  const [cippQueueRefresh, setCippQueueRefresh] = useState('')
+  const [cippQueueRefresh, setCippQueueRefresh] = useState(
+    (Math.random() + 1).toString(36).substring(7),
+  )
   const { data: profile } = authApi.endpoints.loadClientPrincipal.useQueryState()
 
   const [getCippQueueList, cippQueueList] = useLazyGenericGetRequestQuery()
 
   function loadCippQueue() {
     setCippQueueVisible(true)
+    getCippQueueList({ path: 'api/ListCippQueue', params: { refresh: cippQueueRefresh } })
+  }
+
+  function refreshCippQueue() {
     setCippQueueRefresh((Math.random() + 1).toString(36).substring(7))
-    getCippQueueList({ path: `api/ListCippQueue?refresh=${cippQueueRefresh}` })
+    loadCippQueue()
   }
 
   useEffect(() => {
-    if (cippQueueList.isFetching) {
+    if (cippQueueList.isFetching || cippQueueList.isLoading) {
       setCippQueueExtendedInfo([
         {
           label: 'Fetching recent jobs',
           value: 'Please wait',
-          timpestamp: Date(),
+          timestamp: Date(),
           link: '#',
         },
       ])
@@ -101,6 +107,7 @@ const AppHeaderDropdown = () => {
         title="Recent Jobs"
         extendedInfo={[]}
         cards={cippQueueExtendedInfo}
+        refreshFunction={refreshCippQueue}
         actions={[
           {
             label: 'Clear History',

src/components/layout/AppFooter.js

@@ -8,7 +8,7 @@ import netfriends from 'src/assets/images/netfriends.png'
 //todo: Add darkmode detection and change logos accordingly.
 const AppFooter = () => {
   return (
-    <CFooter className="d-flex justify-content-between align-items-center">
+    <CFooter className="d-flex justify-content-between align-items-center" position="sticky">
       <div className="sponsors">
         <p>
           This application is sponsored by{' '}

src/components/tables/CellDelegatedPrivilege.js

@@ -0,0 +1,25 @@
+import PropTypes from 'prop-types'
+import { CellBadge } from './CellBadge'
+
+export function CellDelegatedPrivilege({ cell }) {
+  if (!cell) {
+    return <CellBadge color="info" label="DAP" />
+  }
+  if (cell.toLowerCase() == 'none') {
+    return <CellBadge color="info" label="No Access" />
+  }
+  if (cell === 'delegatedAdminPrivileges') {
+    return <CellBadge color="info" label="DAP Only" />
+  }
+  if (cell === 'delegatedAndGranularDelegetedAdminPrivileges') {
+    return <CellBadge color="info" label="GDAP & DAP" />
+  }
+  if (cell === 'granularDelegatedAdminPrivileges') {
+    return <CellBadge color="info" label="GDAP" />
+  }
+  return <CellBadge color="info" label="Unknown" />
+}
+
+CellDelegatedPrivilege.propTypes = {
+  cell: PropTypes.string,
+}

src/components/tables/CippTable.js

@@ -14,6 +14,7 @@ import {
   CModalBody,
   CModalTitle,
   CCallout,
+  CFormSelect,
 } from '@coreui/react'
 import DataTable, { createTheme } from 'react-data-table-component'
 import PropTypes from 'prop-types'
@@ -24,6 +25,7 @@ import { cellGenericFormatter } from './CellGenericFormat'
 import { ModalService } from '../utilities'
 import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
 import { ConfirmModal } from '../utilities/SharedModal'
+import { useState } from 'react'
 
 const FilterComponent = ({
   filterText,
@@ -156,6 +158,40 @@ export default function CippTable({
   const [selectedRows, setSelectedRows] = React.useState(false)
   const [genericGetRequest, getResults] = useLazyGenericGetRequestQuery()
   const [genericPostRequest, postResults] = useLazyGenericPostRequestQuery()
+  const [getDrowndownInfo, dropDownInfo] = useLazyGenericGetRequestQuery()
+  const [modalContent, setModalContent] = useState(null)
+  useEffect(() => {
+    if (dropDownInfo.isFetching) {
+      handleModal(
+        <CSpinner />,
+        modalContent.item.modalUrl,
+        modalContent.item.modalType,
+        modalContent.item.modalBody,
+        modalContent.item.modalInput,
+        modalContent.item.modalDropdown,
+      )
+    }
+    if (dropDownInfo.isSuccess) {
+      console.log(modalContent)
+      handleModal(
+        modalContent.item.modalMessage,
+        modalContent.item.modalUrl,
+        modalContent.item.modalType,
+        modalContent.item.modalBody,
+        modalContent.item.modalInput,
+        modalContent.item.modalDropdown,
+      )
+    } else if (dropDownInfo.isError) {
+      handleModal(
+        'Error connecting to the API.',
+        modalContent.item.modalUrl,
+        modalContent.item.modalType,
+        modalContent.item.modalBody,
+        modalContent.item.modalInput,
+        modalContent.item.modalDropdown,
+      )
+    }
+  }, [dropDownInfo])
   const handleSelectedChange = ({ selectedRows }) => {
     setSelectedRows(selectedRows)
     if (selectedRows.length < 1) {
@@ -229,84 +265,118 @@ export default function CippTable({
       },
     },
   }
-  const subHeaderComponentMemo = React.useMemo(() => {
-    const handleClear = () => {
-      if (filterText) {
-        setResetPaginationToggle(!resetPaginationToggle)
-        setFilterText('')
-      }
-    }
-    const handleModal = (modalMessage, modalUrl, modalType = 'GET', modalBody, modalInput) => {
-      if (modalType === 'GET') {
-        ModalService.confirm({
-          body: (
-            <div style={{ overflow: 'visible' }}>
-              <div>{modalMessage}</div>
-            </div>
-          ),
-          title: 'Confirm',
-          onConfirm: async () => {
-            const resultsarr = []
-            for (const row of selectedRows) {
-              setLoopRunning(true)
-              const urlParams = new URLSearchParams(modalUrl.split('?')[1])
-              for (let [paramName, paramValue] of urlParams.entries()) {
-                if (paramValue.startsWith('!')) {
-                  urlParams.set(paramName, row[paramValue.replace('!', '')])
-                }
+  const handleModal = (
+    modalMessage,
+    modalUrl,
+    modalType = 'GET',
+    modalBody,
+    modalInput,
+    modalDropdown,
+  ) => {
+    if (modalType === 'GET') {
+      ModalService.confirm({
+        body: (
+          <div style={{ overflow: 'visible' }}>
+            <div>{modalMessage}</div>
+          </div>
+        ),
+        title: 'Confirm',
+        onConfirm: async () => {
+          const resultsarr = []
+          for (const row of selectedRows) {
+            setLoopRunning(true)
+            const urlParams = new URLSearchParams(modalUrl.split('?')[1])
+            for (let [paramName, paramValue] of urlParams.entries()) {
+              if (paramValue.startsWith('!')) {
+                urlParams.set(paramName, row[paramValue.replace('!', '')])
               }
-              const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
-              const results = await genericGetRequest({ path: NewModalUrl, refreshParam: row.id })
-              resultsarr.push(results)
-              setMassResults(resultsarr)
             }
-            setLoopRunning(false)
-          },
-        })
-      } else {
-        ModalService.confirm({
-          body: (
-            <div style={{ overflow: 'visible' }}>
-              {modalInput && (
-                <div>
-                  <CFormInput ref={inputRef} type="text" />
-                </div>
-              )}
-              <div>{modalMessage}</div>
-            </div>
-          ),
-          title: 'Confirm',
-          onConfirm: async () => {
-            const resultsarr = []
-            for (const row of selectedRows) {
-              setLoopRunning(true)
-              const urlParams = new URLSearchParams(modalUrl.split('?')[1])
-              for (let [paramName, paramValue] of urlParams.entries()) {
-                if (paramValue.toString().startsWith('!')) {
-                  urlParams.set(paramName, row[paramValue.replace('!', '')])
-                }
+            const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
+            const results = await genericGetRequest({ path: NewModalUrl, refreshParam: row.id })
+            resultsarr.push(results)
+            setMassResults(resultsarr)
+          }
+          setLoopRunning(false)
+        },
+      })
+    } else {
+      ModalService.confirm({
+        body: (
+          <div style={{ overflow: 'visible' }}>
+            {modalInput && (
+              <div>
+                <CFormInput ref={inputRef} type="text" />
+              </div>
+            )}
+            {modalDropdown && (
+              <div>
+                {dropDownInfo.isSuccess && (
+                  <CFormSelect
+                    ref={inputRef}
+                    options={dropDownInfo.data.map((data) => ({
+                      value: data[modalDropdown.valueField],
+                      label: data[modalDropdown.labelField],
+                    }))}
+                  />
+                )}
+              </div>
+            )}
+            <div>{modalMessage}</div>
+          </div>
+        ),
+        title: 'Confirm',
+        onConfirm: async () => {
+          const resultsarr = []
+          for (const row of selectedRows) {
+            setLoopRunning(true)
+            const urlParams = new URLSearchParams(modalUrl.split('?')[1])
+            for (let [paramName, paramValue] of urlParams.entries()) {
+              if (paramValue.toString().startsWith('!')) {
+                urlParams.set(paramName, row[paramValue.replace('!', '')])
               }
-              const newModalBody = {}
-              for (let [objName, objValue] of Object.entries(modalBody)) {
-                if (objValue.toString().startsWith('!')) {
-                  newModalBody[objName] = row[objValue.replace('!', '')]
-                }
+            }
+            const newModalBody = {}
+            for (let [objName, objValue] of Object.entries(modalBody)) {
+              if (objValue.toString().startsWith('!')) {
+                newModalBody[objName] = row[objValue.replace('!', '')]
               }
-              const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
-              const results = await genericPostRequest({
-                path: NewModalUrl,
-                values: { ...modalBody, ...newModalBody, ...{ input: inputRef.current.value } },
-              })
-              resultsarr.push(results)
-              setMassResults(resultsarr)
             }
-            setLoopRunning(false)
-          },
-        })
+            const NewModalUrl = `${modalUrl.split('?')[0]}?${urlParams.toString()}`
+            const results = await genericPostRequest({
+              path: NewModalUrl,
+              values: { ...modalBody, ...newModalBody, ...{ input: inputRef.current.value } },
+            })
+            resultsarr.push(results)
+            setMassResults(resultsarr)
+          }
+          setLoopRunning(false)
+        },
+      })
+    }
+  }
+  const subHeaderComponentMemo = React.useMemo(() => {
+    const handleClear = () => {
+      if (filterText) {
+        setResetPaginationToggle(!resetPaginationToggle)
+        setFilterText('')
       }
     }
+
     const executeselectedAction = (item) => {
-      handleModal(item.modalMessage, item.modalUrl, item.modalType, item.modalBody, item.modalInput)
+      setModalContent({
+        item,
+      })
+      if (item.modalDropdown) {
+        getDrowndownInfo({ path: item.modalDropdown.url })
+      }
+      handleModal(
+        item.modalMessage,
+        item.modalUrl,
+        item.modalType,
+        item.modalBody,
+        item.modalInput,
+        item.modalDropdown,
+      )
     }
     const defaultActions = []
     const dataKeys = () => {

src/components/tables/index.js

@@ -4,6 +4,7 @@ import { CellDate, cellDateFormatter } from 'src/components/tables/CellDate'
 import { CellTip, CellTipButton, CellTipIcon } from 'src/components/tables/CellTip'
 import { CellNullText, cellNullTextFormatter } from 'src/components/tables/CellNullText'
 import { CellProgressBar, cellProgressBarFormatter } from 'src/components/tables/CellProgressBar'
+import { CellDelegatedPrivilege } from './CellDelegatedPrivilege'
 import CippDatatable from 'src/components/tables/CippDatatable'
 import CippOffcanvasTable from 'src/components/tables/CippOffcanvasTable'
 import CippTable from 'src/components/tables/CippTable'
@@ -27,4 +28,5 @@ export {
   CippOffcanvasTable,
   CippTable,
   WizardTableField,
+  CellDelegatedPrivilege,
 }