From 8c7b312178ae74331f0e7b70d185dcd2c7f0020a Mon Sep 17 00:00:00 2001
From: rvdwegen <github@vdwegen.app>
Date: Sat, 25 Nov 2023 21:26:14 +0100
Subject: [PATCH 1/2] Add app consent requests page

---
 src/_nav.jsx                                  |   5 +
 src/routes.js                                 |   8 +
 .../administration/ListAppConsentRequests.jsx | 164 ++++++++++++++++++
 3 files changed, 177 insertions(+)
 create mode 100644 src/views/tenant/administration/ListAppConsentRequests.jsx

diff --git a/src/_nav.jsx b/src/_nav.jsx
index 9b7f618820ab..112f16b5d919 100644
--- a/src/_nav.jsx
+++ b/src/_nav.jsx
@@ -137,6 +137,11 @@ const _nav = [
         name: 'Enterprise Applications',
         to: '/tenant/administration/enterprise-apps',
       },
+      {
+        component: CNavItem,
+        name: 'App Consent Requests',
+        to: '/tenant/administration/app-consent-requests',
+      },
       {
         component: CNavItem,
         name: 'Tenant Offboarding',
diff --git a/src/routes.js b/src/routes.js
index 68a4a5838e20..58f179268b7e 100644
--- a/src/routes.js
+++ b/src/routes.js
@@ -226,6 +226,9 @@ const ServiceHealth = React.lazy(() => import('src/views/tenant/administration/S
 const EnterpriseApplications = React.lazy(() =>
   import('src/views/tenant/administration/ListEnterpriseApps'),
 )
+const AppConsentRequests = React.lazy(() =>
+  import('src/views/tenant/administration/ListAppConsentRequests'),
+)
 const MailboxRestoreWizard = React.lazy(() =>
   import('src/views/email-exchange/tools/MailboxRestoreWizard'),
 )
@@ -324,6 +327,11 @@ const routes = [
     name: 'Enterprise Applications',
     component: EnterpriseApplications,
   },
+  {
+    path: '/tenant/administration/app-consent-requests',
+    name: 'App Consent Requests',
+    component: AppConsentRequests,
+  },
   {
     path: '/tenant/conditional/list-policies',
     name: 'Conditional Access',
diff --git a/src/views/tenant/administration/ListAppConsentRequests.jsx b/src/views/tenant/administration/ListAppConsentRequests.jsx
new file mode 100644
index 000000000000..c5a3cb993fb1
--- /dev/null
+++ b/src/views/tenant/administration/ListAppConsentRequests.jsx
@@ -0,0 +1,164 @@
+/* eslint-disable import/no-unresolved */
+import React, { useState, useEffect } from 'react'
+import { useSelector } from 'react-redux'
+import { CButton, CFormInput, CFormLabel } from '@coreui/react'
+import { faEdit, faEllipsisV, faEye } from '@fortawesome/free-solid-svg-icons'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { CippPageList } from 'src/components/layout'
+import { cellDateFormatter, cellNullTextFormatter } from 'src/components/tables'
+import { cellLogoFormatter } from 'src/components/tables/CellLogo'
+import { CippActionsOffcanvas, ModalService } from 'src/components/utilities'
+import { Link, useSearchParams } from 'react-router-dom'
+import { CellTip } from 'src/components/tables/CellGenericFormat'
+import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
+
+const AppConsentRequests = () => {
+  const [tenantColumnSet, setTenantColumn] = useState(true)
+  const tenant = useSelector((state) => state.app.currentTenant)
+  useEffect(() => {
+    if (tenant.defaultDomainName === 'AllTenants') {
+      setTenantColumn(false)
+    }
+    if (tenant.defaultDomainName !== 'AllTenants') {
+      setTenantColumn(true)
+    }
+  }, [tenant.defaultDomainName, tenantColumnSet])
+
+  const columns = [
+    {
+      name: 'Tenant',
+      selector: (row) => row['Tenant'],
+      sortable: true,
+      cell: (row) => CellTip(row['Tenant']),
+      exportSelector: 'Tenant',
+      omit: tenantColumnSet,
+    },
+    {
+      name: 'Retrieval Status',
+      selector: (row) => row['CippStatus'],
+      sortable: true,
+      cell: (row) => CellTip(row['CippStatus']),
+      exportSelector: 'CippStatus',
+      omit: tenantColumnSet,
+    },
+    {
+      name: 'Application Name',
+      selector: (row) => row.appDisplayName,
+      sortable: true,
+      exportSelector: 'appDisplayName',
+    },
+    {
+      name: 'Requester',
+      selector: (row) => row.requestUser,
+      sortable: true,
+      exportSelector: 'requestUser',
+    },
+    {
+      name: 'Reason',
+      selector: (row) => row.requestReason,
+      sortable: true,
+      exportSelector: 'requestReason',
+    },
+    {
+      name: 'Status',
+      selector: (row) => row.requestStatus,
+      sortable: true,
+      exportSelector: 'requestStatus',
+    },
+    {
+      name: 'Request Date',
+      selector: (row) => row.requestDate,
+      sortable: true,
+      exportSelector: 'requestDate',
+      cell: cellDateFormatter({ format: 'short' }),
+    },
+    {
+      name: 'Actions',
+      cell: Offcanvas,
+      maxWidth: '80px',
+    },
+  ]
+  return (
+    <div>
+      <CippPageList
+        capabilities={{ allTenants: true, helpContext: 'https://google.com' }}
+        title="App Consent Requests"
+        tenantSelector={false}
+        datatable={{
+          filterlist: [
+            {
+              filterName: 'Pending consent requests',
+              filter: 'Complex: requestStatus eq InProgress',
+            },
+            {
+              filterName: 'Expired consent requests',
+              filter: 'Complex: requestStatus eq Expired',
+            },
+            {
+              filterName: 'Completed consent requests',
+              filter: 'Complex: requestStatus eq Completed',
+            },
+          ],
+          tableProps: {
+            selectableRows: true,
+          },
+          keyField: 'id',
+          columns,
+          reportName: `App Consent Requests`,
+          path: '/api/ListAppConsentRequests',
+          params: {
+            TenantFilter: tenant?.defaultDomainName,
+          },
+        }}
+      />
+    </div>
+  )
+}
+
+export default AppConsentRequests
+
+const Offcanvas = (row, rowIndex, formatExtraData) => {
+  const tenant = useSelector((state) => state.app.currentTenant)
+  const [ocVisible, setOCVisible] = useState(false)
+  const entraLink = `https://entra.microsoft.com/${tenant.defaultDomainName}/#view/Microsoft_AAD_IAM/StartboardApplicationsMenuBlade/~/AccessRequests`
+
+  return (
+    <>
+      <CButton size="sm" color="link" onClick={() => setOCVisible(true)}>
+        <FontAwesomeIcon icon={faEllipsisV} />
+      </CButton>
+      <CippActionsOffcanvas
+        title="Request Information"
+        extendedInfo={[
+          { label: 'Requester', value: `${row.requestUser ?? ' '}` },
+          { label: 'Application Name', value: `${row.appDisplayName ?? ' '}` },
+          { label: 'Application Id', value: `${row.appId ?? ' '}` },
+          { label: 'Reason', value: `${row.requestReason ?? ' '}` },
+          { label: 'Status', value: `${row.requestStatus ?? ' '}` },
+          { label: 'Reviewed by', value: `${row.reviewedBy ?? ' '}` },
+          { label: 'Reviewed reason', value: `${row.reviewedJustification ?? ' '}` },
+        ]}
+        actions={[
+          {
+            label: 'Review in Entra',
+            link: entraLink,
+            color: 'info',
+            target: '_blank',
+            external: true,
+          },
+          {
+            label: 'Approve in Entra',
+            link: row.consentUrl,
+            color: 'info',
+            target: '_blank',
+            external: true,
+          },
+        ]}
+        placement="end"
+        visible={ocVisible}
+        id={row.id}
+        hideFunction={() => setOCVisible(false)}
+      />
+    </>
+  )
+}

From e6b9dc7c9819b655fa849777a9e7964bb768b396 Mon Sep 17 00:00:00 2001
From: rvdwegen <github@vdwegen.app>
Date: Sat, 25 Nov 2023 21:36:15 +0100
Subject: [PATCH 2/2] Import cleanup

---
 .../tenant/administration/ListAppConsentRequests.jsx     | 9 +++------
 1 file changed, 3 insertions(+), 6 deletions(-)

diff --git a/src/views/tenant/administration/ListAppConsentRequests.jsx b/src/views/tenant/administration/ListAppConsentRequests.jsx
index c5a3cb993fb1..45f883eee0d3 100644
--- a/src/views/tenant/administration/ListAppConsentRequests.jsx
+++ b/src/views/tenant/administration/ListAppConsentRequests.jsx
@@ -1,16 +1,13 @@
 /* eslint-disable import/no-unresolved */
 import React, { useState, useEffect } from 'react'
 import { useSelector } from 'react-redux'
-import { CButton, CFormInput, CFormLabel } from '@coreui/react'
-import { faEdit, faEllipsisV, faEye } from '@fortawesome/free-solid-svg-icons'
+import { CButton } from '@coreui/react'
+import { faEllipsisV } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { CippPageList } from 'src/components/layout'
 import { cellDateFormatter, cellNullTextFormatter } from 'src/components/tables'
-import { cellLogoFormatter } from 'src/components/tables/CellLogo'
-import { CippActionsOffcanvas, ModalService } from 'src/components/utilities'
-import { Link, useSearchParams } from 'react-router-dom'
+import { CippActionsOffcanvas } from 'src/components/utilities'
 import { CellTip } from 'src/components/tables/CellGenericFormat'
-import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
 
 const AppConsentRequests = () => {
   const [tenantColumnSet, setTenantColumn] = useState(true)