added offcanvas and theming for code

BNWEIN · Sep 6, 2023 · 7318fc3 · 7318fc3
1 parent 9979c91
commit 7318fc3
Show file tree

Hide file tree

Showing 9 changed files with 104 additions and 54 deletions.
diff --git a/src/components/utilities/CippCodeOffcanvas.js b/src/components/utilities/CippCodeOffcanvas.js
@@ -0,0 +1,60 @@
+import React, { useState } from 'react'
+import { CButton, CCallout, CCol, CRow, CSpinner } from '@coreui/react'
+import { CippOffcanvas } from 'src/components/utilities'
+import { useLazyGenericGetRequestQuery, useLazyGenericPostRequestQuery } from 'src/store/api/app'
+
+import { Editor } from '@monaco-editor/react'
+import { useSelector } from 'react-redux'
+
+function CippCodeOffCanvas({ row, state, hideFunction, type }) {
+  const [SaveTemplate, templateDetails] = useLazyGenericPostRequestQuery()
+  const currentTheme = useSelector((state) => state.app.currentTheme)
+  const [templateData, setFormData] = useState(row)
+  function handleEditorChange(value, event) {
+    setFormData(JSON.parse(value))
+  }
+  return (
+    <>
+      <CippOffcanvas
+        title="Template JSON"
+        addedClass="offcanvas-large"
+        placement="end"
+        visible={state}
+        id={row.id}
+        hideFunction={hideFunction}
+      >
+        <Editor
+          className="mb-3"
+          defaultLanguage="json"
+          value={JSON.stringify(row, null, 2)}
+          theme={currentTheme == 'cyberdrain' ? 'vs-light' : 'vs-dark'}
+          height="800px"
+          onChange={handleEditorChange}
+          options={{
+            wordWrap: true,
+          }}
+        />
+        <CRow className="mb-3">
+          <CCol>
+            <CButton
+              onClick={() =>
+                SaveTemplate({
+                  path: `/api/ExecEditTemplate?type=${type}`,
+                  method: 'POST',
+                  values: templateData,
+                })
+              }
+            >
+              Save changes {templateDetails.isFetching && <CSpinner size="sm" />}
+            </CButton>
+          </CCol>
+        </CRow>
+        {templateDetails.isSuccess && !templateDetails.isFetching && (
+          <CCallout color="success">{templateDetails.data.Results}</CCallout>
+        )}
+      </CippOffcanvas>
+    </>
+  )
+}
+
+export default CippCodeOffCanvas
diff --git a/src/components/utilities/CippOffcanvas.js b/src/components/utilities/CippOffcanvas.js
@@ -8,7 +8,7 @@ export default function CippOffcanvas(props) {
   return (
     <COffcanvas
       scroll
-      className="cipp-offcanvas"
+      className={`cipp-offcanvas ${props.addedClass ? props.addedClass : ''}`}
       visible={props.visible}
       placement={props.placement}
       id={props.id}

diff --git a/src/scss/_custom.scss b/src/scss/_custom.scss
@@ -217,6 +217,9 @@
     }
   }
 }
+.offcanvas-large {
+  width: 800px !important;
+}
 
 .cipp-offcanvas {
   background-color: var(--cui-body-bg);
@@ -243,7 +246,7 @@
     background-color: var(--cipp-offcanvas-title-bg);
     color: var(--cipp-offcanvas-title-color);
     padding-bottom: 1rem;
-    padding-top: 0.5rem;
+    padding-top: 1rem;
   }
 
   .cipp-extendedinfo-label {
@@ -572,7 +575,6 @@
 }
 
 .no-colour {
-
   .text-success {
     color: var(--cui-body-color) !important;
   }
@@ -608,4 +610,4 @@ i.glyphicon {
 
 .array-item-remove::after {
   content: 'Remove';
-}
+}
diff --git a/src/views/email-exchange/connectors/ListConnectorTemplates.js b/src/views/email-exchange/connectors/ListConnectorTemplates.js
@@ -2,17 +2,18 @@ import React, { useState } from 'react'
 import { useSelector } from 'react-redux'
 import { CippCodeBlock, CippOffcanvas } from 'src/components/utilities'
 import { CellTip } from 'src/components/tables'
-import { CButton, CCallout, CSpinner } from '@coreui/react'
+import { CButton, CCallout, CCol, CRow, CSpinner } from '@coreui/react'
 import { faEye, faTrash } from '@fortawesome/free-solid-svg-icons'
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
 import { CippPageList } from 'src/components/layout'
 import { ModalService } from 'src/components/utilities'
 import { TitleButton } from 'src/components/buttons'
+import { Editor } from '@monaco-editor/react'
+import CippCodeOffCanvas from 'src/components/utilities/CippCodeOffcanvas'
 
 const ConnectorListTemplates = () => {
   const tenant = useSelector((state) => state.app.currentTenant)
-
   const [ExecuteGetRequest, getResults] = useLazyGenericGetRequestQuery()
   const Offcanvas = (row, rowIndex, formatExtraData) => {
     const [ocVisible, setOCVisible] = useState(false)
@@ -44,15 +45,12 @@ const ConnectorListTemplates = () => {
           <FontAwesomeIcon icon={faTrash} href="" />
         </CButton>
 
-        <CippOffcanvas
-          title="Template JSON"
-          placement="end"
-          visible={ocVisible}
-          id={row.id}
+        <CippCodeOffCanvas
+          row={row}
+          state={ocVisible}
+          type="ExConnectorTemplate"
           hideFunction={() => setOCVisible(false)}
-        >
-          <CippCodeBlock language="json" code={JSON.stringify(row, null, 2)} />
-        </CippOffcanvas>
+        />
       </>
     )
   }

diff --git a/src/views/email-exchange/spamfilter/ListSpamfilterTemplates.js b/src/views/email-exchange/spamfilter/ListSpamfilterTemplates.js
@@ -9,6 +9,7 @@ import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
 import { CippPageList } from 'src/components/layout'
 import { ModalService } from 'src/components/utilities'
 import { TitleButton } from 'src/components/buttons'
+import CippCodeOffCanvas from 'src/components/utilities/CippCodeOffcanvas'
 
 const SpamFilterListTemplates = () => {
   const tenant = useSelector((state) => state.app.currentTenant)
@@ -44,15 +45,12 @@ const SpamFilterListTemplates = () => {
           <FontAwesomeIcon icon={faTrash} href="" />
         </CButton>
 
-        <CippOffcanvas
-          title="Template JSON"
-          placement="end"
-          visible={ocVisible}
-          id={row.id}
+        <CippCodeOffCanvas
+          row={row}
+          state={ocVisible}
+          type="SpamfilterTemplate"
           hideFunction={() => setOCVisible(false)}
-        >
-          <CippCodeBlock language="json" code={JSON.stringify(row, null, 2)} />
-        </CippOffcanvas>
+        />
       </>
     )
   }

diff --git a/src/views/email-exchange/transport/ListTransportTemplates.js b/src/views/email-exchange/transport/ListTransportTemplates.js
@@ -9,6 +9,7 @@ import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
 import { CippPageList } from 'src/components/layout'
 import { ModalService } from 'src/components/utilities'
 import { TitleButton } from 'src/components/buttons'
+import CippCodeOffCanvas from 'src/components/utilities/CippCodeOffcanvas'
 
 const TransportListTemplates = () => {
   const tenant = useSelector((state) => state.app.currentTenant)
@@ -44,15 +45,12 @@ const TransportListTemplates = () => {
           <FontAwesomeIcon icon={faTrash} href="" />
         </CButton>
 
-        <CippOffcanvas
-          title="Template JSON"
-          placement="end"
-          visible={ocVisible}
-          id={row.id}
+        <CippCodeOffCanvas
+          row={row}
+          state={ocVisible}
+          type="TransportTemplate"
           hideFunction={() => setOCVisible(false)}
-        >
-          <CippCodeBlock language="json" code={JSON.stringify(row, null, 2)} />
-        </CippOffcanvas>
+        />
       </>
     )
   }

diff --git a/src/views/endpoint/intune/MEMListPolicyTemplates.js b/src/views/endpoint/intune/MEMListPolicyTemplates.js
@@ -16,6 +16,7 @@ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
 import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
 import { CippPage } from 'src/components/layout'
 import { ModalService } from 'src/components/utilities'
+import CippCodeOffCanvas from 'src/components/utilities/CippCodeOffcanvas'
 
 //todo: expandable with RAWJson property.
 
@@ -52,15 +53,12 @@ const AutopilotListTemplates = () => {
         >
           <FontAwesomeIcon icon={faTrash} href="" />
         </CButton>
-        <CippOffcanvas
-          title="Template JSON"
-          placement="end"
-          visible={ocVisible}
-          id={row.id}
+        <CippCodeOffCanvas
+          row={row}
+          state={ocVisible}
+          type="IntuneTemplate"
           hideFunction={() => setOCVisible(false)}
-        >
-          <CippCodeBlock language="json" code={JSON.stringify(row, null, 2)} />
-        </CippOffcanvas>
+        />
       </>
     )
   }

diff --git a/src/views/identity/administration/GroupTemplates.js b/src/views/identity/administration/GroupTemplates.js
@@ -9,6 +9,7 @@ import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
 import { CippPageList } from 'src/components/layout'
 import { ModalService } from 'src/components/utilities'
 import { TitleButton } from 'src/components/buttons'
+import CippCodeOffCanvas from 'src/components/utilities/CippCodeOffcanvas'
 
 const GroupTemplates = () => {
   const tenant = useSelector((state) => state.app.currentTenant)
@@ -43,15 +44,12 @@ const GroupTemplates = () => {
         >
           <FontAwesomeIcon icon={faTrash} href="" />
         </CButton>
-        <CippOffcanvas
-          title="Template JSON"
-          placement="end"
-          visible={ocVisible}
-          id={row.id}
+        <CippCodeOffCanvas
+          row={row}
+          state={ocVisible}
+          type="GroupTemplate"
           hideFunction={() => setOCVisible(false)}
-        >
-          <CippCodeBlock language="json" code={JSON.stringify(row, null, 2)} />
-        </CippOffcanvas>
+        />
       </>
     )
   }

diff --git a/src/views/tenant/conditional/ListCATemplates.js b/src/views/tenant/conditional/ListCATemplates.js
@@ -17,6 +17,7 @@ import { useLazyGenericGetRequestQuery } from 'src/store/api/app'
 import { CippPage } from 'src/components/layout'
 import { ModalService } from 'src/components/utilities'
 import { CellTip } from 'src/components/tables'
+import CippCodeOffCanvas from 'src/components/utilities/CippCodeOffcanvas'
 
 //todo: expandable with RAWJson property.
 
@@ -53,15 +54,12 @@ const AutopilotListTemplates = () => {
         >
           <FontAwesomeIcon icon={faTrash} href="" />
         </CButton>
-        <CippOffcanvas
-          title="Template JSON"
-          placement="end"
-          visible={ocVisible}
-          id={row.id}
+        <CippCodeOffCanvas
+          row={row}
+          state={ocVisible}
+          type="CATemplate"
           hideFunction={() => setOCVisible(false)}
-        >
-          <CippCodeBlock language="json" code={JSON.stringify(row, null, 2)} />
-        </CippOffcanvas>
+        />
       </>
     )
   }