Merge pull request #2208 from k-grube/dev

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,
 }