Merge branch 'KelvinTegelaar:main' into main

.github/workflows/Comment_on_Issues.yml

@@ -16,7 +16,7 @@ jobs:
         with:
           issue-number: ${{ github.event.issue.number }}
           body: |
-            Thank you for creating a bug. Please make sure your bug is indeed a unique case by checking current and past issues, and reading the complete documentation at https://kelvintegelaar.github.io/CIPP
+            Thank you for creating a bug. Please make sure your bug is indeed a unique case by checking current and past issues, and reading the complete documentation at https://docs.cipp.app/
             If your bug is a known documentation issue, it will be closed without notice by a contributor. To confirm that this is not a bug found in the documentation, please copy and paste the following comment: "I confirm that I have checked the documentation thoroughly and believe this to be an actual bug.".
 
             Without confirming, your report will be closed in 24 hours. If you'd like this bug to be assigned to you, please comment "I would like to work on this please!".

public/version_latest.txt

@@ -1 +1 @@
-3.4.0
+3.5.1

src/_nav.js

@@ -18,6 +18,7 @@ import {
   faExclamationTriangle,
   faUserShield,
   faEnvelope,
+  faToolbox,
 } from '@fortawesome/free-solid-svg-icons'
 
 const _nav = [
@@ -134,6 +135,35 @@ const _nav = [
       },
     ],
   },
+  {
+    component: CNavGroup,
+    name: 'Tools',
+    section: 'Tools',
+    to: '/tenant/administration',
+    icon: <FontAwesomeIcon icon={faToolbox} className="nav-icon" />,
+    items: [
+      {
+        component: CNavItem,
+        name: 'Graph Explorer',
+        to: '/tenant/administration/graph-explorer',
+      },
+      {
+        component: CNavItem,
+        name: 'Application Approval',
+        to: '/tenant/administration/appapproval',
+      },
+      {
+        component: CNavItem,
+        name: 'Tenant Lookup',
+        to: '/tenant/administration/tenantlookup',
+      },
+      {
+        component: CNavItem,
+        name: 'Individual Domain Check',
+        to: '/tenant/standards/individual-domains',
+      },
+    ],
+  },
   {
     component: CNavGroup,
     name: 'Standards',
@@ -161,11 +191,6 @@ const _nav = [
         name: 'Domains Analyser',
         to: '/tenant/standards/domains-analyser',
       },
-      {
-        component: CNavItem,
-        name: 'Individual Domain Check',
-        to: '/tenant/standards/individual-domains',
-      },
     ],
   },
   {
@@ -214,11 +239,6 @@ const _nav = [
     to: '/tenant/reports',
     icon: <FontAwesomeIcon icon={faChartBar} className="nav-icon" />,
     items: [
-      {
-        component: CNavItem,
-        name: 'Graph Explorer',
-        to: '/tenant/administration/graph-explorer',
-      },
       {
         component: CNavItem,
         name: 'Licence Report',
@@ -671,8 +691,8 @@ const _nav = [
       },
       {
         component: CNavItem,
-        name: 'Application Approval',
-        to: '/tenant/administration/appapproval',
+        name: 'GDAP Relationships',
+        to: '/tenant/administration/gdap-relationships',
       },
       {
         component: CNavItem,

src/adminRoutes.js

@@ -6,6 +6,9 @@ const GDAPStatus = React.lazy(() => import('src/views/tenant/administration/List
 const GDAP = React.lazy(() => import('src/views/tenant/administration/GDAPWizard'))
 const GDAPRoleWizard = React.lazy(() => import('src/views/tenant/administration/GDAPRoleWizard'))
 const GDAPRoles = React.lazy(() => import('src/views/tenant/administration/ListGDAPRoles'))
+const GDAPRelationships = React.lazy(() =>
+  import('./views/tenant/administration/ListGDAPRelationships'),
+)
 const appapproval = React.lazy(() => import('src/views/cipp/AppApproval'))
 
 const adminRoutes = [
@@ -24,6 +27,11 @@ const adminRoutes = [
     name: 'GDAP Roles',
     component: GDAPRoles,
   },
+  {
+    path: '/tenant/administration/gdap-relationships',
+    name: 'GDAP Relationships',
+    component: GDAPRelationships,
+  },
   { path: '/tenant/administration/appapproval', name: 'App Approval', component: appapproval },
   { path: '/tenant/administration/gdap-status', name: 'GDAP Status', component: GDAPStatus },
   { path: '/tenant/standards/apply-standard', name: 'Apply Standard', component: ApplyStandard },

src/components/header/AppHeaderSearch.js

@@ -12,8 +12,8 @@ const AppHeaderSearch = () => {
   }, [dispatch])
   return (
     <>
-      <CButton size="sm" variant="ghost" onClick={handleFastSwitcher}>
-        <FontAwesomeIcon icon={faSearch} />
+      <CButton variant="ghost" onClick={handleFastSwitcher}>
+        <FontAwesomeIcon icon={faSearch} size="lg" />
       </CButton>
     </>
   )

src/components/layout/AppHeader.js

@@ -1,9 +1,13 @@
 import React from 'react'
 import { useSelector, useDispatch } from 'react-redux'
 import {
+  CAlert,
+  CAlertLink,
   CContainer,
+  CCollapse,
   CHeader,
   CHeaderNav,
+  CNavItem,
   CHeaderToggler,
   CImage,
   CSidebarBrand,
@@ -17,16 +21,23 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { faCaretSquareLeft, faCaretSquareRight } from '@fortawesome/free-solid-svg-icons'
 import { toggleSidebarShow } from 'src/store/features/app'
 import { useMediaPredicate } from 'react-media-hook'
+import { useGenericGetRequestQuery } from 'src/store/api/app'
 
 const AppHeader = () => {
   const dispatch = useDispatch()
   const sidebarShow = useSelector((state) => state.app.sidebarShow)
   const currentTheme = useSelector((state) => state.app.currentTheme)
   const preferredTheme = useMediaPredicate('(prefers-color-scheme: dark)') ? 'impact' : 'cyberdrain'
+  const {
+    data: dashboard,
+    isLoading: isLoadingDash,
+    isSuccess: issuccessDash,
+  } = useGenericGetRequestQuery({ path: '/api/GetCippAlerts' })
+
   return (
-    <CHeader position="sticky">
-      <CContainer fluid>
-        <CSidebarBrand className="me-auto p-2" to="/">
+    <>
+      <CHeader position="sticky">
+        <CSidebarBrand className="me-auto pt-xs-2 p-md-2" to="/">
           <CImage
             className="sidebar-brand-full me-2"
             src={
@@ -47,16 +58,31 @@ const AppHeader = () => {
                 className="me-2"
               />
             </CHeaderToggler>
-            <TenantSelector className="me-2" NavSelector={true} />
           </CHeaderNav>
         </CSidebarBrand>
-
-        <CHeaderNav className="ms-auto p-2">
-          <AppHeaderSearch />
-          <AppHeaderDropdown />
+        <CHeaderNav className="p-md-2 flex-grow-1">
+          <TenantSelector NavSelector={true} />
+          <CNavItem>
+            <AppHeaderSearch />
+          </CNavItem>
+          <CNavItem>
+            <AppHeaderDropdown />
+          </CNavItem>
         </CHeaderNav>
-      </CContainer>
-    </CHeader>
+      </CHeader>
+
+      {dashboard &&
+        dashboard.map((item, index) => (
+          <div
+            className="mb-3"
+            style={{ zIndex: 10000, 'padding-left': '20rem', 'padding-right': '3rem' }}
+          >
+            <CAlert key={index} color={item.type} variant dismissible>
+              {item.Alert} <CAlertLink href={item.link}>Link</CAlertLink>
+            </CAlert>
+          </div>
+        ))}
+    </>
   )
 }
 

src/components/tables/CellDate.js

@@ -2,10 +2,14 @@ import React from 'react'
 import moment from 'moment'
 import PropTypes from 'prop-types'
 import { CTooltip } from '@coreui/react'
+import TimeAgo from 'javascript-time-ago'
+import en from 'javascript-time-ago/locale/en.json'
+TimeAgo.addDefaultLocale(en)
+import ReactTimeAgo from 'react-time-ago'
 
 /**
  *
- * @param format ['short', 'long']
+ * @param format ['short', 'long', 'relative']
  * @param value
  * @returns {JSX.Element}
  * @constructor
@@ -27,35 +31,52 @@ export const CellDate = ({ format = 'short', showTime = true, showDate = true, c
   ]
 
   const dateTimeFormatOptions = {}
+  if (format == 'relative') {
+    try {
+      return (
+        <CTooltip content={cell}>
+          <ReactTimeAgo date={cell} />
+        </CTooltip>
+      )
+    } catch (error) {
+      console.error('Error formatting date, fallback to string value', { date: cell, error })
+      return (
+        <CTooltip content={cell}>
+          <div>{String(cell)}</div>
+        </CTooltip>
+      )
+    }
+  } else {
+    if (showTime) {
+      dateTimeFormatOptions.timeStyle = format
+    }
+    if (showDate) {
+      dateTimeFormatOptions.dateStyle = format
+    }
 
-  if (showTime) {
-    dateTimeFormatOptions.timeStyle = format
-  }
-  if (showDate) {
-    dateTimeFormatOptions.dateStyle = format
-  }
+    dateTimeArgs.push(dateTimeFormatOptions)
 
-  dateTimeArgs.push(dateTimeFormatOptions)
+    let formatted
 
-  let formatted
-  try {
-    // lots of dates returned are unreliably parsable (e.g. non ISO8601 format)
-    // fallback using moment to parse into date object
-    formatted = new Intl.DateTimeFormat(...dateTimeArgs).format(moment(cell).toDate())
-  } catch (error) {
-    console.error('Error formatting date, fallback to string value', { date: cell, error })
-    formatted = cell
-  }
+    try {
+      // lots of dates returned are unreliably parsable (e.g. non ISO8601 format)
+      // fallback using moment to parse into date object
+      formatted = new Intl.DateTimeFormat(...dateTimeArgs).format(moment(cell).toDate())
+    } catch (error) {
+      console.error('Error formatting date, fallback to string value', { date: cell, error })
+      formatted = cell
+    }
 
-  return (
-    <CTooltip content={cell}>
-      <div>{String(formatted)}</div>
-    </CTooltip>
-  )
+    return (
+      <CTooltip content={cell}>
+        <div>{String(formatted)}</div>
+      </CTooltip>
+    )
+  }
 }
 
 CellDate.propTypes = {
-  format: PropTypes.oneOf(['short', 'medium', 'long', 'full']),
+  format: PropTypes.oneOf(['short', 'medium', 'long', 'full', 'relative']),
   cell: PropTypes.oneOfType([PropTypes.string, PropTypes.instanceOf(Date)]),
   showTime: PropTypes.bool,
   showDate: PropTypes.bool,

src/components/tables/CellGenericFormat.js

@@ -79,7 +79,6 @@ export const cellGenericFormatter =
       return CellTip(cell)
     }
     if (Array.isArray(cell) || typeof cell === 'object') {
-      console.log(cell)
       return CellTip(JSON.stringify(cell))
     }
   }

src/components/tables/CippDatatable.js

@@ -6,18 +6,20 @@ import { CippTablePropTypes } from 'src/components/tables/CippTable'
 
 export default function CippDatatable({ path, params, ...rest }) {
   const [refreshGuid, setRefreshGuid] = React.useState('')
+  const [graphFilter, setGraphFilter] = React.useState('')
   const {
     data = [],
     isFetching,
     error,
-  } = useListDatatableQuery({ path, params: { refreshGuid, ...params } })
+  } = useListDatatableQuery({ path, params: { refreshGuid, graphFilter, ...params } })
   return (
     <CippTable
       {...rest}
       data={data}
       isFetching={isFetching}
       error={error}
       refreshFunction={setRefreshGuid}
+      graphFilterFunction={setGraphFilter}
     />
   )
 }