Feature: Edit component names

frontend/src/Editor/Components/components.js

@@ -481,7 +481,7 @@ export const componentTypes = [
         placeholder: { value: 'Placeholder text' }
       },
       events: {
-
+        
       },
       styles: {
 

frontend/src/Editor/Editor.jsx

@@ -214,8 +214,6 @@ class Editor extends React.Component {
   };
 
   componentDefinitionChanged = (newDefinition) => {
-    console.log('new component definition', newDefinition);
-    console.log('app definition', this.state.appDefinition);
     this.setState({
       appDefinition: {
         ...this.state.appDefinition,
@@ -230,6 +228,21 @@ class Editor extends React.Component {
     });
   };
 
+  componentChanged = (newComponent) => {
+    this.setState({
+      appDefinition: {
+        ...this.state.appDefinition,
+        components: {
+          ...this.state.appDefinition.components,
+          [newComponent.id]: {
+            ...this.state.appDefinition.components[newComponent.id],
+            ...newComponent
+          }
+        }
+      }
+    });
+  }
+
   saveApp = (id, attributes, notify = false) => {
     appService.saveApp(id, attributes).then(() => {
       if (notify) {
@@ -735,6 +748,7 @@ class Editor extends React.Component {
                     <Inspector
                       componentDefinitionChanged={this.componentDefinitionChanged}
                       dataQueries={dataQueries}
+                      componentChanged={this.componentChanged}
                       removeComponent={this.removeComponent}
                       selectedComponent={selectedComponent}
                       components={appDefinition.components}

frontend/src/Editor/Inspector/Inspector.jsx

@@ -5,13 +5,16 @@ import { renderElement, renderEvent } from './Utils';
 import OverlayTrigger from 'react-bootstrap/OverlayTrigger';
 import Popover from 'react-bootstrap/Popover';
 import ReactTooltip from 'react-tooltip';
+import { toast } from 'react-toastify';
+import { validateQueryName } from '@/_helpers/utils';
 
 export const Inspector = ({
   selectedComponent,
   componentDefinitionChanged,
   dataQueries,
   removeComponent,
-  components
+  components,
+  componentChanged
 }) => {
   const [component, setComponent] = useState(selectedComponent);
   const componentMeta = componentTypes.find((comp) => component.component.component === comp.component);
@@ -23,6 +26,17 @@ export const Inspector = ({
     setComponent(selectedComponent);
   }, [selectedComponent]);
 
+  function handleComponentNameChange(newName) {
+    if (validateQueryName(newName)) {
+      let newComponent = { ...component };
+      newComponent.component.name = newName;
+      setComponent(newComponent);
+      componentChanged(newComponent);
+    } else {
+      toast.error('Invalid query name. Should be unique and only include letters, numbers and underscore.', { hideProgressBar: true });
+    }
+  }
+
   function paramUpdated(param, attr, value, paramType) {
     let newDefinition = { ...component.component.definition };
 
@@ -72,37 +86,49 @@ export const Inspector = ({
   return (
     <div className="inspector">
     <ReactTooltip type="dark" effect="solid" place="left" eventOff="click" />
-      <div className="header p-2">
-        <span className="component-name">
-          <span className="p-2">{component.component.name}</span>
-        </span>
+      <div className="header p-2 row">
+        <div className="col-auto">
+            <div className="input-icon">
+                <input
+                    type="text"
+                    onChange={(e) => handleComponentNameChange(e.target.value)}
+                    className="form-control-plaintext form-control-plaintext-sm mt-1"
+                    value={component.component.name}
+                />
+                <span className="input-icon-addon">
+                    <img src="https://www.svgrepo.com/show/149235/edit.svg" width="12" height="12" />
+                </span>
+            </div>
+        </div>
+        <div className="col pt-2">
+            <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>
 
-        <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' ? (

frontend/src/_helpers/utils.js

@@ -122,3 +122,8 @@ export function computeActionName(actions) {
 
   return actionName;
 }
+
+export function validateQueryName(name){
+    const nameRegex = new RegExp('^[A-Za-z0-9_-]*$');
+    return nameRegex.test(name);
+};