Graph Explorer Import / Export

src/components/utilities/CippCodeOffcanvas.jsx

@@ -1,11 +1,13 @@
-import React, { useState } from 'react'
+import React, { useState, useEffect } 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'
 import PropTypes from 'prop-types'
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
+import CopyToClipboard from 'react-copy-to-clipboard'
 
 function CippCodeOffCanvas({
   row,
@@ -14,11 +16,13 @@ function CippCodeOffCanvas({
   type,
   title = 'Template JSON',
   hideButton = false,
+  path = `/api/ExecEditTemplate?type=${type}`,
 }) {
   const [SaveTemplate, templateDetails] = useLazyGenericPostRequestQuery()
   const currentTheme = useSelector((state) => state.app.currentTheme)
   const [templateData, setFormData] = useState(row)
   const [invalidJSON, setInvalid] = useState(false)
+  const [copied, setCopied] = useState(false)
 
   function handleEditorChange(value, event) {
     try {
@@ -29,6 +33,10 @@ function CippCodeOffCanvas({
     }
   }
 
+  useEffect(() => {
+    setCopied(false)
+  }, [setCopied, templateData])
+
   return (
     <>
       <CippOffcanvas
@@ -53,18 +61,28 @@ function CippCodeOffCanvas({
         <CRow className="mb-3">
           <CCol>
             {!hideButton && (
-              <CButton
-                disabled={invalidJSON}
-                onClick={() =>
-                  SaveTemplate({
-                    path: `/api/ExecEditTemplate?type=${type}`,
-                    method: 'POST',
-                    values: templateData,
-                  })
-                }
-              >
-                Save changes {templateDetails.isFetching && <CSpinner size="sm" />}
-              </CButton>
+              <>
+                <CButton
+                  disabled={invalidJSON}
+                  onClick={() =>
+                    SaveTemplate({
+                      path: path,
+                      method: 'POST',
+                      values: templateData,
+                    })
+                  }
+                  className="me-2"
+                >
+                  <FontAwesomeIcon icon="save" className="me-2" /> Save changes
+                  {templateDetails.isFetching && <CSpinner size="sm" />}
+                </CButton>
+                <CopyToClipboard text={JSON.stringify(row, null, 2)} onCopy={() => setCopied(true)}>
+                  <CButton disabled={invalidJSON}>
+                    <FontAwesomeIcon icon={copied ? 'check' : 'clipboard'} className="me-2" /> Copy
+                    to Clipboard
+                  </CButton>
+                </CopyToClipboard>
+              </>
             )}
           </CCol>
         </CRow>
@@ -83,6 +101,7 @@ CippCodeOffCanvas.propTypes = {
   type: PropTypes.string,
   title: PropTypes.string,
   hideButton: PropTypes.bool,
+  path: PropTypes.string,
 }
 
 export default CippCodeOffCanvas

src/components/utilities/SharedModal.jsx

@@ -29,7 +29,7 @@ function mapBodyComponent({ componentType, data, componentProps }) {
 }
 
 const sharedProps = {
-  componentType: PropTypes.oneOf(['table', 'list', 'text', 'confirm']),
+  componentType: PropTypes.oneOf(['table', 'list', 'text', 'confirm', 'codeblock']),
   componentProps: PropTypes.object,
   body: PropTypes.oneOfType([PropTypes.node, PropTypes.element]),
   data: PropTypes.any,

src/views/tenant/administration/GraphExplorer.jsx

@@ -30,7 +30,7 @@ import {
 import { OnChange } from 'react-final-form-listeners'
 import { cellGenericFormatter } from 'src/components/tables/CellGenericFormat'
 import PropTypes from 'prop-types'
-import { ModalService } from 'src/components/utilities'
+import { CippCodeOffCanvas, ModalService } from 'src/components/utilities'
 
 const GraphExplorer = () => {
   const tenant = useSelector((state) => state.app.currentTenant)
@@ -39,6 +39,7 @@ const GraphExplorer = () => {
   const [alertVisible, setAlertVisible] = useState()
   const [random, setRandom] = useState('')
   const [random2, setRandom2] = useState('')
+  const [ocVisible, setOCVisible] = useState(false)
   const [searchNow, setSearchNow] = useState(false)
   const [visibleA, setVisibleA] = useState(true)
   const handleSubmit = async (values) => {
@@ -316,7 +317,11 @@ const GraphExplorer = () => {
                             </div>
                             <RFFCFormInput type="text" name="name" label="Preset Name" />
                             <WhenFieldChanges field="reportTemplate" set="name" />
-                            <RFFCFormSwitch name="IsShared" label="Share Preset" />
+                            <CTooltip content="Share this preset with other users?">
+                              <span>
+                                <RFFCFormSwitch name="IsShared" label="Share Preset" />
+                              </span>
+                            </CTooltip>
                             <WhenFieldChanges field="reportTemplate" set="IsShared" />
                             <FormSpy>
                               {(props) => {
@@ -326,6 +331,14 @@ const GraphExplorer = () => {
                                 return (
                                   <>
                                     <div className="my-2">
+                                      <CTooltip content="Import / Export" placement="right">
+                                        <CButton
+                                          onClick={() => setOCVisible(true)}
+                                          className="me-2"
+                                        >
+                                          <FontAwesomeIcon icon="exchange-alt" />
+                                        </CButton>
+                                      </CTooltip>
                                       {!preset[0]?.isBuiltin &&
                                         preset[0]?.id &&
                                         preset[0]?.IsMyPreset && (
@@ -373,6 +386,7 @@ const GraphExplorer = () => {
                                                   values: props.values,
                                                 })
                                               }
+                                              className="me-2"
                                             >
                                               <FontAwesomeIcon icon="trash" />
                                             </CButton>
@@ -394,6 +408,19 @@ const GraphExplorer = () => {
                                         {postResults.data?.Results}
                                       </CAlert>
                                     )}
+                                    <CippCodeOffCanvas
+                                      title="Preset Import / Export"
+                                      row={{
+                                        action: 'Copy',
+                                        values: props.values,
+                                      }}
+                                      state={ocVisible}
+                                      path="api/ExecGraphExplorerPreset"
+                                      hideFunction={() => {
+                                        setOCVisible(false)
+                                        setRandom2((Math.random() + 1).toString(36).substring(7))
+                                      }}
+                                    />
                                   </>
                                 )
                               }}