From 65aea71e37c014c1368f889f221c029225f3a9a8 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Sat, 10 Apr 2021 12:53:51 +0530
Subject: [PATCH] Feature: Show component variables on sidebar

---
 frontend/src/Editor/Components/components.js | 10 +++
 frontend/src/Editor/Editor.jsx               | 87 ++++++++++++++++----
 2 files changed, 80 insertions(+), 17 deletions(-)

diff --git a/frontend/src/Editor/Components/components.js b/frontend/src/Editor/Components/components.js
index 448ff8e22a..eba4bae603 100644
--- a/frontend/src/Editor/Components/components.js
+++ b/frontend/src/Editor/Components/components.js
@@ -20,6 +20,7 @@ export const componentTypes = [
             backgroundColor: { type: 'color'},
             textColor: { type: 'color'} 
         },
+        exposedVariables: {},
         definition: {
             properties: {
                 'text': { value: 'Button' },
@@ -61,6 +62,9 @@ export const componentTypes = [
         styles: {
             textColor: { type: 'color'} 
         },
+        exposedVariables: {
+            'selectedRow': {},
+        },
         definition: {
             properties: {
                 'title': { value: 'Table' },
@@ -102,6 +106,7 @@ export const componentTypes = [
         styles: {
             
         },
+        exposedVariables: {},
         definition: {
             properties: {
                 'placeholder': { value: 'Placeholder text' }
@@ -132,6 +137,7 @@ export const componentTypes = [
         styles: {
             
         },
+        exposedVariables: {},
         definition: {
             properties: {
                 'placeholder': { value: 'Placeholder text' }
@@ -163,6 +169,7 @@ export const componentTypes = [
         styles: {
             textColor: { type: 'color'} 
         },
+        exposedVariables: {},
         definition: {
             properties: {
                 'text': { value: 'Text goes here !' },
@@ -195,6 +202,7 @@ export const componentTypes = [
         styles: {
             
         },
+        exposedVariables: {},
         definition: {
             properties: {
                 'source': { value: 'https://www.svgrepo.com/show/34217/image.svg' },
@@ -224,6 +232,7 @@ export const componentTypes = [
         styles: {
             
         },
+        exposedVariables: {},
         definition: {
             properties: {
                 'label': { value: 'Select' },
@@ -255,6 +264,7 @@ export const componentTypes = [
         styles: {
             
         },
+        exposedVariables: {},
         definition: {
             properties: {
                 'label': { value: 'https://www.svgrepo.com/show/46775/drop-down-list.svg' },
diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index 054e31c70f..1ae458d6a7 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -177,6 +177,33 @@ class Editor extends React.Component {
         })
     }
 
+    renderComponentVariables = (id, component) => { 
+        const componentType = component.component.component;
+        const componentMeta = componentTypes.find(comp => componentType === comp.component);
+        const exposedVariables = Object.keys(componentMeta.exposedVariables);
+
+        return (
+            <div className="mb-2">
+                table1 <small className="text-muted"> {exposedVariables.length} keys</small>
+                <div className="p-2 bg-light w-100">
+                    {exposedVariables.map((variable) => 
+                        <div className="row">
+                            <div className="col">
+                                <small role="button col-auto">{variable}</small>
+                            </div>
+                            <div className="col-auto">
+                                <CopyToClipboard className="query-copy-button" text={`{{components.${component.component.name}.${variable}}}`}
+                                    onCopy={() => toast.success('Reference copied to clipboard', { hideProgressBar: true, position: "bottom-center", })}>
+                                    <img src="https://www.svgrepo.com/show/86790/copy.svg" width="8" height="8" role="button"></img>
+                                </CopyToClipboard>
+                            </div>
+                        </div>
+                    )}
+                </div>
+            </div>
+        )
+    }
+
     render() {
         const { 
             currentSidebarTab, 
@@ -365,27 +392,53 @@ class Editor extends React.Component {
                         </div>
                     </div>
                     <div className="left-sidebar">
-                        <div className="accordion" id="accordion-example">
-                            <div className="accordion-item">
-                            </div>
-                            <div className="accordion-item">
-                                <h2 className="accordion-header" id="heading-2">
-                                <button className="accordion-button" type="button" data-bs-toggle="collapse" data-bs-target="#collapse-2" aria-expanded="false">
-                                    Globals
-                                </button>
-                                </h2>
-                                <div id="collapse-2" className="accordion" data-bs-parent="#accordion-example">
-                                <div className="accordion-body pt-0">
-                                    <ReactJson
-                                        collapsed={true}
-                                        enableClipboard={false}
-                                        name={null}
-                                        src={global_context} />
-                                </div>
+                        <div className="variables-container p-3">
+                            <div className="col-md-12">
+                                <h5 className="text-muted">Globals</h5>
+                                <div className="mb-2">
+                                    currentUser <small className="text-muted">  2 keys</small>
+                                    <div className="p-2 bg-light w-100">
+                                    <div className="row">
+                                            <div className="col">
+                                                <small role="button col-auto">name</small>
+                                            </div>
+                                            <div className="col-auto">
+                                                <CopyToClipboard className="query-copy-button" text={`{{globals.current_user.name}}`}
+                                                    onCopy={() => toast.success('Reference copied to clipboard', { hideProgressBar: true, position: "bottom-center", })}>
+                                                    <img src="https://www.svgrepo.com/show/86790/copy.svg" width="8" height="8" role="button"></img>
+                                                </CopyToClipboard>
+                                            </div>
+                                        </div>
+                                        <div className="row">
+                                            <div className="col">
+                                                <small role="button col-auto">email</small>
+                                            </div>
+                                            <div className="col-auto">
+                                                <CopyToClipboard className="query-copy-button" text={`{{globals.current_user.email}}`}
+                                                    onCopy={() => toast.success('Reference copied to clipboard', { hideProgressBar: true, position: "bottom-center", })}>
+                                                    <img src="https://www.svgrepo.com/show/86790/copy.svg" width="8" height="8" role="button"></img>
+                                                </CopyToClipboard>
+                                            </div>
+                                        </div>
+                                    </div>
                                 </div>
                             </div>
+
+                            <hr/>
+
+                            <div className="col-md-9">
+                                <h5 className="text-muted">Components</h5>
+                            </div>
+                            {appDefinition.components && 
+                                <>
+                                    {Object.keys(appDefinition.components).map((key => 
+                                        this.renderComponentVariables(key, appDefinition.components[key])
+                                    ))}
+                                </>
+                            }
                         </div>
                         
+                        
                         <div className="datasources-container w-100">
                                 <div className="row m-2 datasources-header ">
                                     <div className="col-md-9">