Refactor CIPP Settings

package.json

@@ -1,6 +1,6 @@
 {
   "name": "cipp",
-  "version": "4.5.5",
+  "version": "5.2.1",
   "description": "The CyberDrain Improved Partner Portal is a portal to help manage administration for Microsoft Partners.",
   "homepage": "https://cipp.app/",
   "bugs": {
@@ -31,11 +31,11 @@
     "@coreui/react": "^4.11.0",
     "@coreui/react-chartjs": "^2.1.3",
     "@coreui/utils": "^1.3.1",
-    "@fortawesome/fontawesome-svg-core": "^1.2.36",
-    "@fortawesome/free-brands-svg-icons": "^5.15.4",
-    "@fortawesome/free-regular-svg-icons": "^5.15.4",
-    "@fortawesome/free-solid-svg-icons": "^5.15.4",
-    "@fortawesome/react-fontawesome": "^0.1.16",
+    "@fortawesome/fontawesome-svg-core": "^6.5.1",
+    "@fortawesome/free-brands-svg-icons": "^6.5.1",
+    "@fortawesome/free-regular-svg-icons": "^6.5.1",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.5.2",
     "@popperjs/core": "^2.10.2",
     "@reduxjs/toolkit": "^1.9.7",

src/adminRoutes.js

@@ -1,5 +1,6 @@
 import React from 'react'
-const CIPPSettings = React.lazy(() => import('src/views/cipp/CIPPSettings'))
+
+const CIPPSettings = React.lazy(() => import('src/views/cipp/app-settings/CIPPSettings'))
 const Setup = React.lazy(() => import('src/views/cipp/Setup'))
 const ApplyStandard = React.lazy(() => import('src/views/tenant/standards/ListStandards'))
 const GDAPStatus = React.lazy(() => import('src/views/tenant/administration/ListGDAPQueue'))
@@ -25,7 +26,11 @@ const adminRoutes = [
   { path: '/cipp/setup', name: 'Setup', component: Setup },
 
   { path: '/tenant/administration/gdap', name: 'GDAP Wizard', component: GDAP },
-  { path: '/tenant/administration/gdap-invite', name: 'GDAP Invite Wizard', component: GDAPInvite },
+  {
+    path: '/tenant/administration/gdap-invite',
+    name: 'GDAP Invite Wizard',
+    component: GDAPInvite,
+  },
   {
     path: '/tenant/administration/gdap-role-wizard',
     name: 'GDAP Role Wizard',
@@ -41,9 +46,21 @@ const adminRoutes = [
     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/list-standards', name: 'List Standard', component: ApplyStandard },
+  {
+    path: '/tenant/administration/appapproval',
+    name: 'App Approval',
+    component: appapproval,
+  },
+  {
+    path: '/tenant/administration/gdap-status',
+    name: 'GDAP Status',
+    component: GDAPStatus,
+  },
+  {
+    path: '/tenant/standards/list-standards',
+    name: 'List Standard',
+    component: ApplyStandard,
+  },
   {
     path: '/tenant/administration/tenant-offboarding-wizard',
     name: 'Tenant Offboarding',

src/components/layout/CippCallout.css

@@ -0,0 +1,28 @@
+.cipp-callout {
+  --cui-callout-padding-x: 1rem;
+  --cui-callout-padding-y: 1rem;
+  --cui-callout-border-width: var(--cui-border-width);
+  --cui-callout-border-color: var(--cui-border-color);
+  --cui-callout-border-left-width: calc(var(--cui-border-width) * 4);
+  --cui-callout-border-radius: var(--cui-border-radius);
+  border: var(--cui-callout-border-width) solid var(--cui-callout-border-color);
+  border-radius: var(--cui-callout-border-radius);
+  margin-bottom: 16px;
+  padding: var(--cui-callout-padding-y) var(--cui-callout-padding-x);
+}
+
+html:not([dir=rtl]) .cipp-callout {
+  border-left-color: var(--cui-callout-border-left-color);
+}
+
+html:not([dir=rtl]) .cipp-callout {
+  border-left-width: var(--cui-callout-border-left-width);
+}
+
+html:not([dir=rtl]) .cipp-callout-dismissible .btn {
+  right: 0;
+}
+
+.cipp-callout-dismissible .btn {
+  cursor: pointer;
+}

src/components/layout/CippCallout.jsx

@@ -0,0 +1,70 @@
+import React, { useState } from 'react'
+import { CAlert, CCallout } from '@coreui/react'
+import PropTypes from 'prop-types'
+import './CippCallout.css'
+import classNames from 'classnames'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faXmark } from '@fortawesome/free-solid-svg-icons'
+
+export function CippCallout({
+  dismissible = false,
+  color = 'primary',
+  children = null,
+  className = '',
+  style = {},
+  ...rest
+}) {
+  const [open, setOpen] = useState(true)
+
+  if (!open) {
+    return null
+  }
+
+  return (
+    <div
+      className={classNames(className, 'cipp-callout', `callout-${color}`, {
+        'cipp-callout-dismissible': dismissible,
+      })}
+      color={color}
+      style={{
+        backgroundColor: 'rgb(var(--cui-body-color-rgb))',
+        color: 'var(--cui-body-color)',
+        display: 'flex',
+        justifyContent: 'space-between',
+        alignItems: 'flex-start',
+        ...style,
+      }}
+      {...rest}
+    >
+      <div>{children}</div>
+      {dismissible && (
+        <button
+          type="button"
+          className="btn"
+          aria-label="Close"
+          onClick={() => setOpen(false)}
+          style={{ padding: 0, margin: 0 }}
+        >
+          <FontAwesomeIcon icon={faXmark} size={'xl'} />
+        </button>
+      )}
+    </div>
+  )
+}
+
+CippCallout.propTypes = {
+  dismissible: PropTypes.bool,
+  color: PropTypes.oneOf([
+    'primary',
+    'secondary',
+    'success',
+    'warning',
+    'danger',
+    'info',
+    'light',
+    'dark',
+  ]),
+  children: PropTypes.oneOfType([PropTypes.arrayOf(PropTypes.node), PropTypes.node]),
+  className: PropTypes.string,
+  style: PropTypes.object,
+}

src/components/layout/index.js

@@ -7,6 +7,7 @@ import CippContentCard from 'src/components/layout/CippContentCard'
 import { CippMasonry, CippMasonryItem } from 'src/components/layout/CippMasonry'
 import { CippPage, CippPageList } from 'src/components/layout/CippPage'
 import CippWizard from 'src/components/layout/CippWizard'
+import { CippCallout } from 'src/components/layout/CippCallout.jsx'
 
 export {
   AppBreadcrumb,
@@ -19,5 +20,6 @@ export {
   CippMasonryItem,
   CippPage,
   CippPageList,
+  CippCallout,
   CippWizard,
 }