Merge pull request #8 from k-grube/master

Add data pages, update BPA

src/components/SharedModal.js

@@ -4,13 +4,13 @@ import { CButton, CModal, CModalBody, CModalFooter, CModalHeader, CModalTitle }
 import { hideModal } from '../store/modules/modal'
 
 export default function SharedModal() {
-  const { body, title, visible } = useSelector((store) => store.modal)
+  const { body, title, visible, size } = useSelector((store) => store.modal)
   const dispatch = useDispatch()
 
   const hideAction = () => dispatch(hideModal())
 
   return (
-    <CModal scrollable visible={visible} onClose={hideAction}>
+    <CModal size={size} scrollable visible={visible} onClose={hideAction}>
       <CModalHeader onClose={hideAction}>
         <CModalTitle>{title}</CModalTitle>
       </CModalHeader>

src/store/modules/modal.js

@@ -2,6 +2,7 @@ const initialState = {
   visible: false,
   body: undefined,
   title: undefined,
+  size: undefined,
 }
 
 const SET_VISIBLE = 'modal/SET_VISIBLE'
@@ -20,6 +21,7 @@ export default function reducer(state = initialState, action = {}) {
         ...state,
         body: action.body,
         title: action.title,
+        size: action.size,
       }
     case RESET_MODAL:
       return initialState
@@ -46,10 +48,18 @@ export function resetModal() {
   }
 }
 
-export function setModalContent({ body, title }) {
+/**
+ *
+ * @param {Element} body
+ * @param {String} title
+ * @param {String} [size] ['sm', 'lg', 'xl'] defaults to None
+ * @returns {{size, type: string, body, title}}
+ */
+export function setModalContent({ body, title, size }) {
   return {
     type: SET_CONTENT,
     body: body,
     title,
+    size,
   }
 }

src/store/modules/tenants.js

@@ -2,6 +2,12 @@ const initialState = {
   tenants: [],
   selectedTenant: {},
   loading: false,
+  loaded: false,
+  cap: {
+    loading: false,
+    loaded: false,
+    policies: [],
+  },
 }
 
 const LOADING = 'tenants/LOADING'
@@ -10,16 +16,45 @@ const LOADING_FAILURE = 'tenants/LOADING_FAILURE'
 
 const SET_TENANT = 'tenants/SET_TENANT'
 
+const LOAD_CONDITIONAL_ACCESS = 'tenants/LOAD_CONDITIONAL_ACCESS'
+const LOAD_CONDITIONAL_ACCESS_SUCCESS = 'tenants/LOAD_CONDITIONAL_ACCESS_SUCCESS'
+const LOAD_CONDITIONAL_ACCESS_FAIL = 'tenants/LOAD_CONDITIONAL_ACCESS_FAIL'
+
 export default function reducer(state = initialState, action = {}) {
   switch (action.type) {
     case LOADING:
-      return { ...state, loading: true }
+      return { ...state, loading: true, loaded: false }
     case LOADING_SUCCESS:
-      return { ...state, tenants: action.result, loading: false }
+      return { ...state, tenants: action.result, loading: false, loaded: true }
     case LOADING_FAILURE:
-      return { ...state, loading: false, tenants: [] }
+      return { ...state, loading: false, loaded: false, tenants: [] }
     case SET_TENANT:
       return { ...state, selectedTenant: action.tenant }
+    case LOAD_CONDITIONAL_ACCESS:
+      return {
+        ...state,
+        cap: {
+          ...state.cap,
+          loading: true,
+          loaded: false,
+          policies: [],
+        },
+      }
+    case LOAD_CONDITIONAL_ACCESS_SUCCESS:
+      return {
+        ...state,
+        cap: {
+          ...state.cap,
+          loading: false,
+          loaded: true,
+          policies: action.result,
+        },
+      }
+    case LOAD_CONDITIONAL_ACCESS_FAIL:
+      return {
+        ...state,
+        cap: initialState.cap,
+      }
     default:
       return state
   }
@@ -38,3 +73,13 @@ export function setTenant({ tenant }) {
     tenant,
   }
 }
+
+export function loadConditionalAccessPolicies({ domain }) {
+  return {
+    types: [LOAD_CONDITIONAL_ACCESS, LOAD_CONDITIONAL_ACCESS_SUCCESS, LOAD_CONDITIONAL_ACCESS_FAIL],
+    promise: (client) =>
+      client
+        .get('/api/ListConditionalAccessPolicies', { params: { TenantFilter: domain } })
+        .then((result) => result.data),
+  }
+}

src/views/tenant/administration/ConditionalAccess.js

@@ -0,0 +1,148 @@
+import React, { useEffect } from 'react'
+import ToolkitProvider, { CSVExport, Search } from 'react-bootstrap-table2-toolkit'
+import paginationFactory from 'react-bootstrap-table2-paginator'
+import CellBadge from '../../../components/cipp/CellBadge'
+import { useDispatch, useSelector } from 'react-redux'
+import { listTenants, loadConditionalAccessPolicies } from '../../../store/modules/tenants'
+import BootstrapTable from 'react-bootstrap-table-next'
+import { CButton, CSpinner } from '@coreui/react'
+import CIcon from '@coreui/icons-react'
+import { cilCog } from '@coreui/icons'
+import TenantSelector from '../../../components/cipp/TenantSelector'
+
+const { SearchBar } = Search
+const pagination = paginationFactory()
+
+const columns = [
+  {
+    text: 'Name',
+    dataField: 'displayName',
+    sort: true,
+  },
+  {
+    text: 'State',
+    dataField: 'state',
+    sort: true,
+  },
+  {
+    text: 'Last Modified',
+    dataField: 'modifiedDateTime',
+    sort: true,
+  },
+  {
+    text: 'Client App Types',
+    dataField: 'clientAppTypes',
+    sort: true,
+  },
+  {
+    text: 'Platform Inc',
+    dataField: 'includePlatforms',
+    sort: true,
+  },
+  {
+    text: 'Platform Exc',
+    dataField: 'excludePlatforms',
+    sort: true,
+  },
+  {
+    text: 'Include Locations',
+    dataField: 'includeLocations',
+    sort: true,
+  },
+  {
+    text: 'Exclude Locations',
+    dataField: 'excludeLocations',
+    sort: true,
+  },
+  {
+    text: 'Include Users',
+    dataField: 'includeUsers',
+    sort: true,
+  },
+  {
+    text: 'Exclude Users',
+    dataField: 'excludeUsers',
+    sort: true,
+  },
+  {
+    text: 'Include Groups',
+    dataField: 'includeGroups',
+    sort: true,
+  },
+  {
+    text: 'Exclude Groups',
+    dataField: 'excludeGroups',
+    sort: true,
+  },
+  {
+    text: 'Include Applications',
+    dataField: 'includeApplications',
+    sort: true,
+  },
+  {
+    text: 'Exclude Applications',
+    dataField: 'excludeApplications',
+    sort: true,
+  },
+  {
+    text: 'Control Operator',
+    dataField: 'grantControlsOperator',
+    sort: true,
+  },
+  {
+    text: 'Built-in Controls',
+    dataField: 'builtInControls',
+    sort: true,
+  },
+]
+
+const ConditionalAccess = () => {
+  const dispatch = useDispatch()
+  const {
+    tenant,
+    cap: { policies, loading, loaded },
+  } = useSelector((state) => state.tenants)
+
+  const tenantSelected = tenant && tenant.defaultDomainName
+
+  useEffect(() => {
+    if (tenantSelected) {
+      dispatch(loadConditionalAccessPolicies({ domain: tenantSelected.defaultDomainName }))
+    }
+  }, [])
+
+  const action = (selected) =>
+    dispatch(loadConditionalAccessPolicies({ domain: selected.defaultDomainName }))
+
+  return (
+    <div>
+      <TenantSelector action={action} />
+      <hr />
+      <div className="bg-white rounded p-5">
+        <h3>Conditional Access Policies</h3>
+        {!loaded && loading && <CSpinner />}
+        {loaded && !loading && (
+          <ToolkitProvider keyField="displayName" columns={columns} data={policies} search>
+            {(props) => (
+              <div>
+                {/* eslint-disable-next-line react/prop-types */}
+                <SearchBar {...props.searchProps} />
+                <hr />
+                {/*eslint-disable */}
+                <BootstrapTable
+                  {...props.baseProps}
+                  pagination={pagination}
+                  striped
+                  wrapperClasses="table-responsive"
+                />
+                {/*eslint-enable */}
+              </div>
+            )}
+          </ToolkitProvider>
+        )}
+      </div>
+    </div>
+  )
+}
+
+export default ConditionalAccess