Merge pull request #25 from KelvinTegelaar/dev

[pull] dev from KelvinTegelaar:dev

src/_nav.jsx

@@ -142,6 +142,11 @@ const _nav = [
         name: 'Enterprise Applications',
         to: '/tenant/administration/enterprise-apps',
       },
+      {
+        component: CNavItem,
+        name: 'Secure Score',
+        to: '/tenant/administration/securescore',
+      },
       {
         component: CNavItem,
         name: 'App Consent Requests',
@@ -157,6 +162,11 @@ const _nav = [
         name: 'Tenant Offboarding',
         to: '/tenant/administration/tenant-offboarding-wizard',
       },
+      {
+        component: CNavItem,
+        name: 'Partner Relationships',
+        to: '/tenant/administration/partner-relationships',
+      },
     ],
   },
   {

src/components/contentcards/CippButtonCard.jsx

@@ -0,0 +1,27 @@
+import React from 'react'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { CCard, CCardBody, CCardFooter, CCardHeader, CCardTitle } from '@coreui/react'
+import Skeleton from 'react-loading-skeleton'
+
+export default function CippButtonCard({
+  title,
+  titleType = 'normal',
+  CardButton,
+  children,
+  isFetching,
+}) {
+  return (
+    <CCard className="h-100 mb-3">
+      <CCardHeader>
+        <CCardTitle>
+          {titleType === 'big' ? <h3 className="underline mb-3">{title}</h3> : title}
+        </CCardTitle>
+      </CCardHeader>
+      <CCardBody>
+        {isFetching && <Skeleton />}
+        {children}
+      </CCardBody>
+      <CCardFooter>{CardButton}</CCardFooter>
+    </CCard>
+  )
+}

src/components/forms/RFFComponents.jsx

@@ -444,6 +444,12 @@ export const RFFSelectSearch = ({
   return (
     <Field name={name} validate={validate}>
       {({ meta, input }) => {
+        const handleChange = onChange
+          ? (e) => {
+              input.onChange(e)
+              onChange(e)
+            }
+          : input.onChange
         return (
           <div>
             <CFormLabel htmlFor={name}>
@@ -473,7 +479,7 @@ export const RFFSelectSearch = ({
                 options={selectSearchvalues}
                 placeholder={placeholder}
                 isMulti={multi}
-                onChange={onChange}
+                onChange={handleChange}
                 onInputChange={debounceOnInputChange}
                 inputValue={inputText}
                 isLoading={isLoading}
@@ -510,7 +516,7 @@ export const RFFSelectSearch = ({
                 options={selectSearchvalues}
                 placeholder={placeholder}
                 isMulti={multi}
-                onChange={onChange}
+                onChange={handleChange}
                 onInputChange={debounceOnInputChange}
                 inputValue={inputText}
                 isLoading={isLoading}

src/components/layout/AppHeader.jsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from 'react'
+import React, { useState, useEffect, useRef } from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import {
   CAlert,
@@ -72,8 +72,29 @@ const AppHeader = () => {
     loadCippQueue()
   }
 
+  function useInterval(callback, delay, state) {
+    const savedCallback = useRef()
+
+    // Remember the latest callback.
+    useEffect(() => {
+      savedCallback.current = callback
+    })
+
+    // Set up the interval.
+    useEffect(() => {
+      function tick() {
+        savedCallback.current()
+      }
+
+      if (delay !== null) {
+        let id = setInterval(tick, delay)
+        return () => clearInterval(id)
+      }
+    }, [delay, state])
+  }
+
   useEffect(() => {
-    if (cippQueueList.isFetching || cippQueueList.isLoading) {
+    if (cippQueueList.isUninitialized && (cippQueueList.isFetching || cippQueueList.isLoading)) {
       setCippQueueExtendedInfo([
         {
           label: 'Fetching recent jobs',
@@ -82,26 +103,40 @@ const AppHeader = () => {
           link: '#',
         },
       ])
-    }
-    if (
-      cippQueueList.isSuccess &&
-      Array.isArray(cippQueueList.data) &&
-      cippQueueList.data.length > 0
-    ) {
-      setCippQueueExtendedInfo(
-        cippQueueList.data?.map((job) => ({
-          label: `${job.Name}`,
-          value: job.Status,
-          link: job.Link,
-          timestamp: job.Timestamp,
-        })),
-      )
     } else {
-      setCippQueueExtendedInfo([
-        { label: 'No jobs to display', value: '', timpestamp: Date(), link: '#' },
-      ])
+      if (
+        cippQueueList.isSuccess &&
+        Array.isArray(cippQueueList.data) &&
+        cippQueueList.data.length > 0
+      ) {
+        setCippQueueExtendedInfo(
+          cippQueueList.data?.map((job) => ({
+            label: `${job.Name}`,
+            value: job.Status,
+            link: job.Link,
+            timestamp: job.Timestamp,
+            percent: job.PercentComplete,
+            progressText: `${job.PercentComplete}%`,
+          })),
+        )
+      } else {
+        setCippQueueExtendedInfo([
+          { label: 'No jobs to display', value: '', timestamp: Date(), link: '#' },
+        ])
+      }
     }
-  }, [cippQueueList])
+  }, [cippQueueList, setCippQueueExtendedInfo])
+
+  useInterval(
+    async () => {
+      if (cippQueueVisible) {
+        setCippQueueRefresh((Math.random() + 1).toString(36).substring(7))
+        getCippQueueList({ path: 'api/ListCippQueue', params: { refresh: cippQueueRefresh } })
+      }
+    },
+    5000,
+    cippQueueVisible,
+  )
 
   const SwitchTheme = () => {
     let targetTheme = preferredTheme
@@ -197,6 +232,7 @@ const AppHeader = () => {
         extendedInfo={[]}
         cards={cippQueueExtendedInfo}
         refreshFunction={refreshCippQueue}
+        isRefreshing={cippQueueList.isFetching || cippQueueList.isLoading}
         actions={[
           {
             label: 'Clear History',

src/components/tables/CippTable.jsx

@@ -16,6 +16,7 @@ import {
   CAccordionHeader,
   CAccordionBody,
   CAccordionItem,
+  CTooltip,
 } from '@coreui/react'
 import DataTable, { createTheme } from 'react-data-table-component'
 import PropTypes from 'prop-types'
@@ -31,13 +32,12 @@ import {
   faSync,
 } from '@fortawesome/free-solid-svg-icons'
 import { cellGenericFormatter } from './CellGenericFormat'
-import { ModalService } from '../utilities'
+import { CippCodeOffCanvas, ModalService } from '../utilities'
 import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
 import { debounce } from 'lodash-es'
 import { useSearchParams } from 'react-router-dom'
 import CopyToClipboard from 'react-copy-to-clipboard'
 import { setDefaultColumns } from 'src/store/features/app'
-import M365Licenses from 'src/data/M365Licenses'
 
 const FilterComponent = ({ filterText, onFilter, onClear, filterlist, onFilterPreset }) => (
   <>
@@ -155,6 +155,7 @@ export default function CippTable({
   const [filterviaURL, setFilterviaURL] = React.useState(false)
   const [originalColumns, setOrginalColumns] = React.useState(columns)
   const [updatedColumns, setUpdatedColumns] = React.useState(columns)
+  const [codeOffcanvasVisible, setCodeOffcanvasVisible] = useState(false)
   if (defaultColumns && defaultColumnsSet === false && endpointName) {
     const defaultColumnsArray = defaultColumns.split(',').filter((item) => item)
 
@@ -579,7 +580,6 @@ export default function CippTable({
     }
 
     const executeselectedAction = (item) => {
-      //  console.log(item)
       setModalContent({
         item,
       })
@@ -605,16 +605,18 @@ export default function CippTable({
     }
     if (refreshFunction) {
       defaultActions.push([
-        <CButton
-          key={'refresh-action'}
-          onClick={() => {
-            refreshFunction((Math.random() + 1).toString(36).substring(7))
-          }}
-          className="m-1"
-          size="sm"
-        >
-          <FontAwesomeIcon icon={faSync} />
-        </CButton>,
+        <CTooltip key={'refresh-tooltip'} content="Refresh" placement="top">
+          <CButton
+            key={'refresh-action'}
+            onClick={() => {
+              refreshFunction((Math.random() + 1).toString(36).substring(7))
+            }}
+            className="m-1"
+            size="sm"
+          >
+            <FontAwesomeIcon icon={faSync} />
+          </CButton>
+        </CTooltip>,
       ])
     }
 
@@ -815,6 +817,20 @@ export default function CippTable({
         </>,
       ])
     }
+    defaultActions.push([
+      <CTooltip key={'code-tooltip'} content="View API Response" placement="top">
+        <CButton
+          key={'code-action'}
+          onClick={() => {
+            setCodeOffcanvasVisible(true)
+          }}
+          className="m-1"
+          size="sm"
+        >
+          <FontAwesomeIcon icon="code" />
+        </CButton>
+      </CTooltip>,
+    ])
     return (
       <>
         <div className="w-100 d-flex justify-content-start">
@@ -982,6 +998,13 @@ export default function CippTable({
               {...rest}
             />
             {selectedRows.length >= 1 && <CCallout>Selected {selectedRows.length} items</CCallout>}
+            <CippCodeOffCanvas
+              row={data}
+              hideButton={true}
+              state={codeOffcanvasVisible}
+              hideFunction={() => setCodeOffcanvasVisible(false)}
+              title="API Response"
+            />
           </>
         )}
       </div>

src/components/tables/WizardTableField.jsx

@@ -24,7 +24,6 @@ export default class WizardTableField extends React.Component {
   }
 
   handleSelect = ({ selectedRows = [] }) => {
-    // console.log(selectedRows)
     const { fieldProps, keyField } = this.props
     if (selectedRows.length > 0) {
       fieldProps.input.onChange(selectedRows)

src/components/utilities/CippActionsOffcanvas.jsx

@@ -5,14 +5,20 @@ import {
   CCallout,
   CCard,
   CCardBody,
+  CCardFooter,
   CCardHeader,
   CCardText,
   CCardTitle,
+  CCol,
   CFormInput,
   CFormSelect,
   CListGroup,
   CListGroupItem,
   COffcanvasTitle,
+  CProgress,
+  CProgressBar,
+  CProgressStacked,
+  CRow,
   CSpinner,
 } from '@coreui/react'
 import { CippCodeBlock, CippOffcanvas, ModalService } from 'src/components/utilities'
@@ -222,8 +228,23 @@ export default function CippActionsOffcanvas(props) {
             <CCardText>
               {action.value && <Link to={action.link}>Status: {action.value}</Link>}
             </CCardText>
-            <small>{action.timestamp && <ReactTimeAgo date={action.timestamp} />}</small>
           </CCardBody>
+          <CCardFooter className="text-end">
+            <CRow>
+              {action?.percent > 0 && (
+                <CCol xs="8">
+                  <div className="mt-1">
+                    <CProgress>
+                      <CProgressBar value={action.percent}>{action?.progressText}</CProgressBar>
+                    </CProgress>
+                  </div>
+                </CCol>
+              )}
+              <CCol xs={action?.percent ? '4' : '12'}>
+                <small>{action.timestamp && <ReactTimeAgo date={action.timestamp} />}</small>
+              </CCol>
+            </CRow>
+          </CCardFooter>
         </CCard>
       </>
     ))
@@ -295,6 +316,7 @@ export default function CippActionsOffcanvas(props) {
       id={props.id}
       hideFunction={props.hideFunction}
       refreshFunction={props.refreshFunction}
+      isRefreshing={props.isRefreshing}
     >
       {getResults.isFetching && (
         <CCallout color="info">
@@ -310,6 +332,7 @@ export default function CippActionsOffcanvas(props) {
         <CippCodeBlock
           code={postResults.data?.Results}
           callout={true}
+          dismissable={true}
           calloutCopyValue={getResults.data?.Results}
         />
       )}

src/components/utilities/CippCodeBlock.jsx

@@ -16,6 +16,7 @@ function CippCodeBlock({
   callout = false,
   calloutColour = 'info',
   calloutCopyValue = false,
+  dismissable = false,
 }) {
   const [codeCopied, setCodeCopied] = useState(false)
 
@@ -36,7 +37,11 @@ function CippCodeBlock({
           {codeCopied ? <FontAwesomeIcon icon={faClipboard} /> : <FontAwesomeIcon icon={faCopy} />}
         </CButton>
       </CopyToClipboard>
-      {callout && <CCallout color={calloutColour}>{code}</CCallout>}
+      {callout && (
+        <CCallout color={calloutColour} dismissable={dismissable}>
+          {code}
+        </CCallout>
+      )}
       {!callout && (
         <SyntaxHighlighter
           language={language}
@@ -62,4 +67,8 @@ CippCodeBlock.propTypes = {
   showLineNumbers: PropTypes.bool,
   startingLineNumber: PropTypes.number,
   wrapLongLines: PropTypes.bool,
+  callout: PropTypes.bool,
+  calloutColour: PropTypes.string,
+  calloutCopyValue: PropTypes.string,
+  dismissable: PropTypes.bool,
 }