feat(cypher): add execute cypher button to details pane

Author: dmitriigaidarji

src/browser/modules/Stream/CypherFrame/VisualizationView/PropertiesPanelContent/DetailsPane.tsx

@@ -17,23 +17,30 @@
  * You should have received a copy of the GNU General Public License
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
-import React, { useState } from 'react'
+import React, { useCallback, useState } from 'react'
 
 import { ClipboardCopier, PropertiesTable, upperFirst } from 'neo4j-arc/common'
 
 import { StyleableNodeLabel } from './StyleableNodeLabel'
 import { StyleableRelType } from './StyleableRelType'
 import { PaneBody, PaneHeader, PaneTitle, PaneWrapper } from './styled'
 import { DetailsPaneProps } from 'neo4j-arc'
+import { withBus } from 'react-suber'
+import {
+  commandSources,
+  executeCommand
+} from 'project-root/src/shared/modules/commands/commandsDuck'
 
 export const DETAILS_PANE_STEP_SIZE = 1000
-export function DetailsPane({
+
+function DetailsPaneRender({
   vizItem,
   graphStyle,
   nodeInspectorWidth,
   nodes,
-  relationships
-}: DetailsPaneProps): JSX.Element {
+  relationships,
+  bus
+}: DetailsPaneProps & { bus: any }): JSX.Element {
   const [maxPropertiesCount, setMaxPropertiesCount] = useState(
     DETAILS_PANE_STEP_SIZE
   )
@@ -51,7 +58,14 @@ export function DetailsPane({
   const handleMorePropertiesClick = (numMore: number) => {
     setMaxPropertiesCount(maxPropertiesCount + numMore)
   }
+  const executeCypher = useCallback(
+    (cmd: string) => {
+      const action = executeCommand(cmd, { source: commandSources.button })
 
+      bus.send(action.type, action)
+    },
+    [bus]
+  )
   return (
     <PaneWrapper>
       <PaneHeader>
@@ -99,8 +113,15 @@ export function DetailsPane({
           moreStep={DETAILS_PANE_STEP_SIZE}
           totalNumItems={allItemProperties.length}
           nodeInspectorWidth={nodeInspectorWidth}
+          executeCypher={executeCypher}
         />
       </PaneBody>
     </PaneWrapper>
   )
 }
+
+const DetailsPaneWithBus = withBus(DetailsPaneRender)
+
+export function DetailsPane(props: DetailsPaneProps) {
+  return <DetailsPaneWithBus {...props} />
+}

src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.style.ts

@@ -67,7 +67,9 @@ export const KeyCell = styled.td`
   padding: 2px;
   width: 30%;
 `
-
+export const CypherExecDiv = styled.div`
+  margin-top: 10px;
+`
 export const CopyCell = styled.td`
   padding: 2px 5px;
   display: flex;

src/neo4j-arc/common/components/PropertiesTable/PropertiesTable.tsx

@@ -22,7 +22,7 @@ import React, { useState } from 'react'
 import { ClickableUrls } from '../ClickableUrls'
 import {
   AlternatingTable,
-  CopyCell,
+  CypherExecDiv,
   KeyCell,
   StyledExpandValueButton,
   StyledInlineList,
@@ -75,13 +75,15 @@ type PropertiesViewProps = {
   totalNumItems: number
   moreStep: number
   nodeInspectorWidth: number
+  executeCypher?: (cmd: string) => any
 }
 export const PropertiesTable = ({
   visibleProperties,
   totalNumItems,
   onMoreClick,
   moreStep,
-  nodeInspectorWidth
+  nodeInspectorWidth,
+  executeCypher
 }: PropertiesViewProps): JSX.Element => {
   return (
     <>
@@ -100,13 +102,30 @@ export const PropertiesTable = ({
                     type={type}
                   />
                 </ValueCell>
-                <CopyCell>
+                <td>
                   <ClipboardCopier
                     titleText={'Copy key and value'}
                     textToCopy={`${key}: ${value}`}
                     iconSize={12}
                   />
-                </CopyCell>
+                  {key === 'cypher' && executeCypher && value && (
+                    <CypherExecDiv>
+                      <button
+                        title={'Execute cypher'}
+                        onClick={() => {
+                          if (executeCypher && value) {
+                            executeCypher(value)
+                          }
+                        }}
+                      >
+                        <i
+                          className="fa fa-external-link"
+                          aria-hidden="true"
+                        ></i>
+                      </button>
+                    </CypherExecDiv>
+                  )}
+                </td>
               </tr>
             ))}
           </tbody>