Merge pull request #2423 from Ren-Roros-Digital/blocklist

Added New & Remove function to Tenant Allow/Block List
KelvinTegelaar · May 8, 2024 · d1ae131 · d1ae131
2 parents 6828ae8 + d82d169
commit d1ae131
Show file tree

Hide file tree

Showing 4 changed files with 230 additions and 74 deletions.
diff --git a/src/importsMap.jsx b/src/importsMap.jsx
@@ -117,6 +117,7 @@ import React from 'react'
   "/email/administration/mailbox-rules": React.lazy(() => import('./views/email-exchange/administration/MailboxRuleList')),
   "/email/administration/Quarantine": React.lazy(() => import('./views/email-exchange/administration/QuarantineList')),
   "/email/administration/tenant-allow-block-lists": React.lazy(() => import('./views/email-exchange/administration/ListTenantAllowBlockList')),
+  "/email/administration/add-tenant-allow-block-list": React.lazy(() => import('./views/email-exchange/administration/AddTenantAllowBlockList')),
   "/email/reports/mailbox-statistics": React.lazy(() => import('./views/email-exchange/reports/MailboxStatisticsList')),
   "/email/reports/SharedMailboxEnabledAccount": React.lazy(() => import('./views/email-exchange/reports/SharedMailboxEnabledAccount')),
   "/email/reports/mailbox-cas-settings": React.lazy(() => import('./views/email-exchange/reports/MailboxClientAccessSettingsList')),

diff --git a/src/routes.json b/src/routes.json
@@ -786,6 +786,12 @@
     "component": "views/email-exchange/administration/ListTenantAllowBlockList",
     "allowedRoles": ["admin", "editor", "readonly"]
   },
+  {
+    "name": "Add Tenant Allow/Block List",
+    "path": "/email/administration/add-tenant-allow-block-list",
+    "component": "views/email-exchange/administration/AddTenantAllowBlockList",
+    "allowedRoles": ["admin", "editor", "readonly"]
+  },
   {
     "name": "Email Reports",
     "path": "/email/reports",

diff --git a/src/views/email-exchange/administration/AddTenantAllowBlockList.jsx b/src/views/email-exchange/administration/AddTenantAllowBlockList.jsx
@@ -0,0 +1,122 @@
+import React from 'react'
+import {
+  CCallout,
+  CButton,
+  CCol,
+  CForm,
+  CRow,
+  CSpinner,
+  CCard,
+  CCardHeader,
+  CCardTitle,
+  CCardBody,
+} from '@coreui/react'
+import { Form } from 'react-final-form'
+import { RFFCFormSelect, RFFCFormInput, RFFCFormCheck } from 'src/components/forms'
+import { CippPage } from 'src/components/layout/CippPage'
+import { useLazyGenericPostRequestQuery } from 'src/store/api/app'
+import { useSelector } from 'react-redux'
+
+const AddTenantAllowBlockList = () => {
+  const tenantDomain = useSelector((state) => state.app.currentTenant.defaultDomainName)
+
+  const [genericPostRequest, postResults] = useLazyGenericPostRequestQuery()
+  const onSubmit = (values) => {
+    const shippedValues = {
+      tenantID: tenantDomain,
+      entries: values.entries,
+      listType: values.listType,
+      notes: values.notes,
+      listMethod: values.listMethod,
+      NoExpiration: values.NoExpiration,
+    }
+    genericPostRequest({ path: '/api/AddTenantAllowBlockList', values: shippedValues })
+  }
+  return (
+    <CippPage title="Add Tenant Allow/Block List">
+      <CCard className="content-card">
+        <CCardHeader className="d-flex justify-content-between align-items-center">
+          <CCardTitle>Add Tenant Allow/Block List</CCardTitle>
+        </CCardHeader>
+        <CCardBody>
+          <Form
+            onSubmit={onSubmit}
+            render={({ handleSubmit, submitting, values }) => {
+              return (
+                <CForm onSubmit={handleSubmit}>
+                  <CRow>
+                    <CCol md={8}>
+                      <RFFCFormInput type="text" name="entries" label="Entries" />
+                    </CCol>
+                  </CRow>
+                  <CRow>
+                    <CCol md={4}>
+                      <RFFCFormInput type="text" name="notes" label="Notes" />
+                    </CCol>
+                    <CCol md={4}>
+                      <RFFCFormSelect
+                        name="listType"
+                        values={[
+                          {
+                            value: 'Sender',
+                            label: 'Sender',
+                          },
+                          {
+                            value: 'Url',
+                            label: 'Url',
+                          },
+                          {
+                            value: 'FileHash',
+                            label: 'FileHash',
+                          },
+                        ]}
+                        placeholder="Select a List Type"
+                        label="Please choose a List Type."
+                      />
+                    </CCol>
+                  </CRow>
+                  <CRow>
+                    <CCol md={4}>
+                      <RFFCFormSelect name="listMethod" label="Block or Allow Entry" values={[
+                        {
+                          value: 'Block',
+                          label: 'Block',
+                        },
+                        {
+                          value: 'Allow',
+                          label: 'Allow',
+                        },
+                      ]} />
+                    </CCol>
+                  </CRow>
+                  <CRow>
+                    <CCol md={4}>
+                      <RFFCFormCheck label="NoExpiration" name="NoExpiration" />
+                    </CCol>
+                  </CRow>
+                  <CRow className="mb-3">
+                    <CCol md={6}>
+                      <CButton type="submit" disabled={submitting}>
+                        Add Entry
+                      </CButton>
+                    </CCol>
+                  </CRow>
+                  {postResults.isFetching && (
+                    <CCallout color="success">
+                      <CSpinner />
+                    </CCallout>
+                  )}
+                  {postResults.isSuccess && (
+                    <CCallout color="success">{postResults.data.Results}</CCallout>
+                  )}
+                </CForm>
+              )
+            }}
+          />
+        </CCardBody>
+      </CCard>
+    </CippPage>
+  )
+}
+
+export default AddTenantAllowBlockList
diff --git a/src/views/email-exchange/administration/ListTenantAllowBlockList.jsx b/src/views/email-exchange/administration/ListTenantAllowBlockList.jsx
@@ -1,92 +1,119 @@
-import React from 'react'
+import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { CButton } from '@coreui/react'
-import { faEdit } from '@fortawesome/free-solid-svg-icons'
-import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
-import { Link } from 'react-router-dom'
 import { CippPageList } from 'src/components/layout'
-import { CellTip } from 'src/components/tables'
+import { CellTip, cellBooleanFormatter } from 'src/components/tables'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import { faEdit, faEllipsisV } from '@fortawesome/free-solid-svg-icons'
+import { TitleButton } from 'src/components/buttons'
+import { CippActionsOffcanvas } from 'src/components/utilities'
 
-const AllowBlockList = () => {
+const Actions = (row, rowIndex, formatExtraData) => {
   const tenant = useSelector((state) => state.app.currentTenant)
-  const Actions = (row, rowIndex, formatExtraData) => (
+  const [ocVisible, setOCVisible] = useState(false)
+  return (
     <>
-      <Link
-        to={`/email/administration/edit-tenant-allow-block-lists?tenantDomain=${tenant.defaultDomainName}?Entry=${row.value}?ListType=${row.ListType}`}
-      >
-        <CButton size="sm" variant="ghost" color="warning">
-          <FontAwesomeIcon icon={faEdit} />
-        </CButton>
-      </Link>
-      <Link
-        to={`/email/administration/delete-tenant-allow-block-lists?tenantDomain=${tenant.defaultDomainName}?Entry=${row.value}?ListType=${row.ListType}`}
-      >
-        <CButton size="sm" variant="ghost" color="danger">
-          <FontAwesomeIcon icon={'trash'} />
-        </CButton>
-      </Link>
+      <CButton size="sm" color="link" onClick={() => setOCVisible(true)}>
+        <FontAwesomeIcon icon={faEllipsisV} />
+      </CButton>
+      <CippActionsOffcanvas
+        title="Settings"
+        extendedInfo={[
+          {
+            label: 'Entry',
+            value: row.Value,
+          },
+          {
+            label: 'Notes',
+            value: row.Notes,
+          },
+          {
+            label: 'Expiration Date',
+            value: row.ExpirationDate,
+          },
+        ]}
+        actions={[
+          {
+            label: 'Remove',
+            color: 'danger',
+            modal: true,
+            modalUrl: `/api/RemoveTenantAllowBlockList?TenantFilter=${tenant.defaultDomainName}&Entries=${row.Value}&ListType=${row.ListType}`,
+            modalMessage: 'Are you sure you want to delete?',
+          },
+        ]}
+        placement="end"
+        visible={ocVisible}
+        id={row.id}
+        hideFunction={() => setOCVisible(false)}
+      />
     </>
   )
+}
+
+const columns = [
+  {
+    name: 'Value',
+    selector: (row) => row['Value'],
+    sortable: true,
+    cell: (row) => CellTip(row['Value']),
+    exportSelector: 'Value',
+  },
+  {
+    name: 'ListType',
+    selector: (row) => row['ListType'],
+    sortable: true,
+    cell: (row) => CellTip(row['ListType']),
+    exportSelector: 'ListType',
+    maxWidth: '80px',
+  },
+  {
+    name: 'Action',
+    selector: (row) => row['Action'],
+    sortable: true,
+    cell: (row) => CellTip(row['Action']),
+    exportSelector: 'Action',
+    maxWidth: '80px',
+  },
+  {
+    name: 'Notes',
+    selector: (row) => row['Notes'],
+    sortable: true,
+    cell: (row) => CellTip(row['Notes']),
+    exportSelector: 'Notes',
+  },
+  {
+    name: 'LastModifiedDateTime',
+    selector: (row) => row['LastModifiedDateTime'],
+    sortable: true,
+    cell: (row) => CellTip(row['LastModifiedDateTime']),
+    exportSelector: 'LastModifiedDateTime',
+  },
+  {
+    name: 'ExpirationDate',
+    selector: (row) => row['ExpirationDate'],
+    sortable: true,
+    cell: (row) => CellTip(row['ExpirationDate']),
+    exportSelector: 'ExpirationDate',
+  },
+  /*{
+    name: 'Actions',
+    cell: Actions,
+    maxWidth: '80px',
+  },*/
+]
 
-  const columns = [
-    {
-      name: 'Value',
-      selector: (row) => row['Value'],
-      sortable: true,
-      cell: (row) => CellTip(row['Value']),
-      exportSelector: 'Value',
-    },
-    {
-      name: 'ListType',
-      selector: (row) => row['ListType'],
-      sortable: true,
-      cell: (row) => CellTip(row['ListType']),
-      exportSelector: 'ListType',
-      maxWidth: '80px',
-    },
-    {
-      name: 'Action',
-      selector: (row) => row['Action'],
-      sortable: true,
-      cell: (row) => CellTip(row['Action']),
-      exportSelector: 'Action',
-      maxWidth: '80px',
-    },
-    {
-      name: 'Notes',
-      selector: (row) => row['Notes'],
-      sortable: true,
-      cell: (row) => CellTip(row['Notes']),
-      exportSelector: 'Notes',
-    },
-    {
-      name: 'LastModifiedDateTime',
-      selector: (row) => row['LastModifiedDateTime'],
-      sortable: true,
-      cell: (row) => CellTip(row['LastModifiedDateTime']),
-      exportSelector: 'LastModifiedDateTime',
-    },
-    {
-      name: 'ExpirationDate',
-      selector: (row) => row['ExpirationDate'],
-      sortable: true,
-      cell: (row) => CellTip(row['ExpirationDate']),
-      exportSelector: 'ExpirationDate',
-    },
-    // {
-    //   name: 'Actions',
-    //  cell: Actions,
-    //  maxWidth: '80px',
-    // },
-  ]
+const AllowBlockList = () => {
+  const tenant = useSelector((state) => state.app.currentTenant)
 
   return (
     <CippPageList
+      titleButton={<TitleButton href="/email/administration/add-tenant-allow-block-list" title="New Entry" />}
       title="Tenant Allow/Block Lists"
       datatable={{
-        columns,
-        path: '/api/ListTenantAllowBlockList',
+        keyField: 'id',
         reportName: `${tenant?.defaultDomainName}-TenantAllowBlockList`,
+        path: '/api/ListTenantAllowBlockList',
+        columns,
         params: { TenantFilter: tenant?.defaultDomainName },
       }}
     />