From 93f16f0ed676ca6eb833f842dab3a61540ddb1a9 Mon Sep 17 00:00:00 2001
From: navaneeth <navaneethpk@outlook.com>
Date: Wed, 7 Apr 2021 12:54:21 +0530
Subject: [PATCH] Feature: Remove components from builder

---
 frontend/src/Editor/Editor.jsx              |  7 +++++
 frontend/src/Editor/Inspector/Inspector.jsx | 31 +++++++++++++++++++--
 frontend/src/_helpers/utils.js              |  2 +-
 3 files changed, 37 insertions(+), 3 deletions(-)

diff --git a/frontend/src/Editor/Editor.jsx b/frontend/src/Editor/Editor.jsx
index af8050efbb..cef564282b 100644
--- a/frontend/src/Editor/Editor.jsx
+++ b/frontend/src/Editor/Editor.jsx
@@ -104,6 +104,12 @@ class Editor extends React.Component {
         console.log('app definition', this.state.appDefinition);
     }
 
+    removeComponent = (component) => {
+        let newDefinition = this.state.appDefinition;
+        delete newDefinition.components[component.id];
+        this.appDefinitionChanged(newDefinition);
+    }
+
     componentDefinitionChanged = (newDefinition) => { 
         console.log('new component definition', newDefinition);
         console.log('app definition', this.state.appDefinition);
@@ -245,6 +251,7 @@ class Editor extends React.Component {
                                         <Inspector 
                                             componentDefinitionChanged={this.componentDefinitionChanged}
                                             dataQueries={dataQueries}
+                                            removeComponent={this.removeComponent}
                                             selectedComponent={selectedComponent}>
 
                                         </Inspector>
diff --git a/frontend/src/Editor/Inspector/Inspector.jsx b/frontend/src/Editor/Inspector/Inspector.jsx
index 42c908e60a..54c0586788 100644
--- a/frontend/src/Editor/Inspector/Inspector.jsx
+++ b/frontend/src/Editor/Inspector/Inspector.jsx
@@ -7,6 +7,8 @@ import { componentTypes } from '../Components/components';
 import { Table } from './Components/Table';
 import { renderElement, renderEvent } from './Utils';
 import { toast } from 'react-toastify';
+import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
+import Popover from 'react-bootstrap/Popover';
 
 const AllElements = { 
     Color,
@@ -14,7 +16,7 @@ const AllElements = {
     Text
 }
 
-export const Inspector = ({ selectedComponent, componentDefinitionChanged, dataQueries }) => {
+export const Inspector = ({ selectedComponent, componentDefinitionChanged, dataQueries, removeComponent }) => {
 
     const [component, setComponent] = useState(selectedComponent);
     const componentMeta = componentTypes.find(comp => component.component.component === comp.component);
@@ -84,7 +86,32 @@ export const Inspector = ({ selectedComponent, componentDefinitionChanged, dataQ
                     </CopyToClipboard>
                 </span>
                 
-                <img role="button" className="component-action-button" src="https://www.svgrepo.com/show/46582/menu.svg" width="15" height="15"/>
+
+                <OverlayTrigger 
+                    trigger="click" 
+                    placement="left" 
+                    overlay={
+                        <Popover id="popover-basic">
+                            {/* <Popover.Title as="h3">brrr</Popover.Title> */}
+                            <Popover.Content>
+                                <div className="field mb-2">
+                                    <button className="btn btn-light btn-sm mb-2">Duplicate</button>
+                                    <br></br>
+                                    <button 
+                                        className="btn btn-danger btn-sm"
+                                        onClick={() => removeComponent(component)}
+                                    >
+                                        Remove
+                                    </button>
+                                </div>
+                            </Popover.Content>
+                        </Popover>
+                    }>
+
+                    <img role="button" className="component-action-button" src="https://www.svgrepo.com/show/46582/menu.svg" width="15" height="15"/>
+
+                </OverlayTrigger>
+
             </div>
 
             {componentMeta.component === 'Table' ? 
diff --git a/frontend/src/_helpers/utils.js b/frontend/src/_helpers/utils.js
index 8dbea15a0e..48bd0fb345 100644
--- a/frontend/src/_helpers/utils.js
+++ b/frontend/src/_helpers/utils.js
@@ -39,7 +39,7 @@ export function computeComponentName(componentType, currentComponents) {
     const currentComponentsForKind = Object.values(currentComponents).filter(component => component.component.component === componentType);
     let found = false;
     let name = '';
-    let currentNumber = currentComponentsForKind.length;
+    let currentNumber = currentComponentsForKind.length + 1;
 
     while(!found) { 
         name = `${componentType.toLowerCase()}${currentNumber}`;