From 97b3786617131acdaeeb66568ca520a16640c496 Mon Sep 17 00:00:00 2001
From: Gabriel Diaz <gabrieldiaz31@gmail.com>
Date: Mon, 9 Oct 2023 18:00:29 -0300
Subject: [PATCH] fix: Triggers width

---
 .../MoreOptionsMenu/MoreOptionsMenu.tsx       |  6 +-
 .../TriggerAction/TriggerAction.css           | 12 +++-
 .../TriggerAction/TriggerAction.tsx           | 44 ++++++------
 .../TriggerCondition/TriggerCondition.css     | 12 +++-
 .../TriggerCondition/TriggerCondition.tsx     | 67 ++++++++++---------
 .../TriggerInspector/TriggerInspector.tsx     | 11 ++-
 .../@dcl/inspector/src/hooks/useArrayState.ts |  2 +-
 7 files changed, 90 insertions(+), 64 deletions(-)

diff --git a/packages/@dcl/inspector/src/components/EntityInspector/MoreOptionsMenu/MoreOptionsMenu.tsx b/packages/@dcl/inspector/src/components/EntityInspector/MoreOptionsMenu/MoreOptionsMenu.tsx
index 2a4a161d3..db0f08419 100644
--- a/packages/@dcl/inspector/src/components/EntityInspector/MoreOptionsMenu/MoreOptionsMenu.tsx
+++ b/packages/@dcl/inspector/src/components/EntityInspector/MoreOptionsMenu/MoreOptionsMenu.tsx
@@ -16,8 +16,10 @@ export const MoreOptionsMenu = ({ children, icon }: { children: JSX.Element | JS
   )
 
   const handleClosePanel = useCallback(() => {
-    setShowMoreOptions(false)
-  }, [setShowMoreOptions])
+    if (showMoreOptions) {
+      setShowMoreOptions(false)
+    }
+  }, [showMoreOptions, setShowMoreOptions])
 
   const ref = useOutsideClick(handleClosePanel)
 
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerAction/TriggerAction.css b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerAction/TriggerAction.css
index 11426e742..3364949bc 100644
--- a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerAction/TriggerAction.css
+++ b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerAction/TriggerAction.css
@@ -36,10 +36,20 @@
 .TriggerActionsContainer > .TriggerAction {
   display: flex;
   flex-direction: row;
+}
+
+.TriggerActionsContainer > .TriggerAction > .Fields {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
 }
 
-.TriggerActionsContainer > .TriggerAction .MoreOptionsMenu .MoreOptionsContent {
+.TriggerActionsContainer > .TriggerAction > .RightMenu {
+  align-self: start;
+}
+
+.TriggerActionsContainer > .TriggerAction > .RightMenu > .MoreOptionsMenu .MoreOptionsContent {
   min-width: 185px;
 }
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerAction/TriggerAction.tsx b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerAction/TriggerAction.tsx
index bd2569686..abe645d7a 100644
--- a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerAction/TriggerAction.tsx
+++ b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerAction/TriggerAction.tsx
@@ -73,26 +73,30 @@ export const TriggerActionContainer = ({ trigger, availableActions, onUpdateActi
           : []
         return (
           <div className="TriggerAction" key={`trigger-action-${idx}`}>
-            <Dropdown
-              options={availableActions ? [{ value: '', text: 'Select an Entity' }, ...entities] : []}
-              value={action.id}
-              onChange={(e) => handleChangeEntity(e, idx)}
-            />
-            <Dropdown
-              disabled={!action.id || !availableActions.get(action.id)}
-              options={
-                action.id && availableActions.get(action.id)?.actions
-                  ? [{ value: '', text: 'Select an Action' }, ...actions]
-                  : []
-              }
-              value={action.name}
-              onChange={(e) => handleChangeAction(e, idx)}
-            />
-            <MoreOptionsMenu>
-              <Button className="RemoveButton" onClick={(e) => handleRemoveAction(e, idx)}>
-                <RemoveIcon /> Remove Trigger Action
-              </Button>
-            </MoreOptionsMenu>
+            <div className="Fields">
+              <Dropdown
+                options={availableActions ? [{ value: '', text: 'Select an Entity' }, ...entities] : []}
+                value={action.id}
+                onChange={(e) => handleChangeEntity(e, idx)}
+              />
+              <Dropdown
+                disabled={!action.id || !availableActions.get(action.id)}
+                options={
+                  action.id && availableActions.get(action.id)?.actions
+                    ? [{ value: '', text: 'Select an Action' }, ...actions]
+                    : []
+                }
+                value={action.name}
+                onChange={(e) => handleChangeAction(e, idx)}
+              />
+            </div>
+            <div className="RightMenu">
+              <MoreOptionsMenu>
+                <Button className="RemoveButton" onClick={(e) => handleRemoveAction(e, idx)}>
+                  <RemoveIcon /> Remove Trigger Action
+                </Button>
+              </MoreOptionsMenu>
+            </div>
           </div>
         )
       })}
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerCondition/TriggerCondition.css b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerCondition/TriggerCondition.css
index 714eb3d18..40c310f0d 100644
--- a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerCondition/TriggerCondition.css
+++ b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerCondition/TriggerCondition.css
@@ -37,10 +37,20 @@
 .TriggerConditionsContainer > .TriggerCondition {
   display: flex;
   flex-direction: row;
+}
+
+.TriggerConditionsContainer > .TriggerCondition > .Fields {
+  display: flex;
+  flex: 1;
+  flex-wrap: wrap;
   align-items: center;
   gap: 4px;
 }
 
-.TriggerConditionsContainer > .TriggerCondition .MoreOptionsMenu .MoreOptionsContent {
+.TriggerConditionsContainer > .TriggerCondition > .RightMenu {
+  align-self: start;
+}
+
+.TriggerConditionsContainer > .TriggerCondition > .RightMenu > .MoreOptionsMenu .MoreOptionsContent {
   min-width: 205px;
 }
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerCondition/TriggerCondition.tsx b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerCondition/TriggerCondition.tsx
index 752ba4405..a41980f52 100644
--- a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerCondition/TriggerCondition.tsx
+++ b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerCondition/TriggerCondition.tsx
@@ -58,7 +58,6 @@ export const TriggerConditionContainer = ({
   const handleChangeType = useCallback(
     ({ target: { value } }: React.ChangeEvent<HTMLSelectElement>, idx: number) => {
       const [id, type] = value.split(SEPARATOR)
-      console.log('value', value, id, type)
       modifyCondition(idx, {
         ...conditions[idx],
         id: parseInt(id),
@@ -79,7 +78,7 @@ export const TriggerConditionContainer = ({
   )
 
   const handleRemoveCondition = useCallback(
-    (e: React.MouseEvent, idx: number) => {
+    (_e: React.MouseEvent, idx: number) => {
       removeCondition(idx)
     },
     [removeCondition]
@@ -130,40 +129,44 @@ export const TriggerConditionContainer = ({
         const isCounterCondition = counterConditionTypeOptions.some(($) => $.value === condition.type)
         return (
           <div className="TriggerCondition" key={`trigger-condition-${idx}`}>
-            <Dropdown
-              options={entityOptions ? [{ value: '', text: 'Select an Entity' }, ...entityOptions] : []}
-              value={entity}
-              onChange={(e) => handleChangeEntity(e, idx)}
-            />
-            <Dropdown
-              disabled={isDisabled}
-              options={conditionOptions.map(({ text, value }) => ({
-                text,
-                value: [value.id, value.type].join(SEPARATOR)
-              }))}
-              value={type}
-              onChange={(e) => handleChangeType(e, idx)}
-            />
-            {isStatesCondition && (
+            <div className="Fields">
               <Dropdown
-                disabled={isDisabled}
-                options={stateOptions.length > 0 ? [{ value: '', text: 'Select state' }, ...stateOptions] : []}
-                value={condition.value}
-                onChange={(e) => handleChangeSelectValue(e, idx)}
+                options={entityOptions ? [{ value: '', text: 'Select an Entity' }, ...entityOptions] : []}
+                value={entity}
+                onChange={(e) => handleChangeEntity(e, idx)}
               />
-            )}
-            {isCounterCondition && (
-              <TextField
+              <Dropdown
                 disabled={isDisabled}
-                value={condition.value}
-                onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeSelectValue(e, idx)}
+                options={conditionOptions.map(({ text, value }) => ({
+                  text,
+                  value: [value.id, value.type].join(SEPARATOR)
+                }))}
+                value={type}
+                onChange={(e) => handleChangeType(e, idx)}
               />
-            )}
-            <MoreOptionsMenu>
-              <Button className="RemoveButton" onClick={(e) => handleRemoveCondition(e, idx)}>
-                <RemoveIcon /> Remove Trigger Condition
-              </Button>
-            </MoreOptionsMenu>
+              {isStatesCondition && (
+                <Dropdown
+                  disabled={isDisabled}
+                  options={stateOptions.length > 0 ? [{ value: '', text: 'Select state' }, ...stateOptions] : []}
+                  value={condition.value}
+                  onChange={(e) => handleChangeSelectValue(e, idx)}
+                />
+              )}
+              {isCounterCondition && (
+                <TextField
+                  disabled={isDisabled}
+                  value={condition.value}
+                  onChange={(e: React.ChangeEvent<HTMLInputElement>) => handleChangeSelectValue(e, idx)}
+                />
+              )}
+            </div>
+            <div className="RightMenu">
+              <MoreOptionsMenu>
+                <Button className="RemoveButton" onClick={(e) => handleRemoveCondition(e, idx)}>
+                  <RemoveIcon /> Remove Trigger Condition
+                </Button>
+              </MoreOptionsMenu>
+            </div>
           </div>
         )
       })}
diff --git a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerInspector.tsx b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerInspector.tsx
index 0aa5cce23..c1f2cd66d 100644
--- a/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerInspector.tsx
+++ b/packages/@dcl/inspector/src/components/EntityInspector/TriggerInspector/TriggerInspector.tsx
@@ -189,8 +189,7 @@ export default withSdk<Props>(
     }, [])
 
     const handleAddNewTrigger = useCallback(
-      (e: React.MouseEvent) => {
-        e.stopPropagation()
+      (_e: React.MouseEvent) => {
         addTrigger({
           type: TriggerType.ON_CLICK,
           conditions: [],
@@ -207,8 +206,7 @@ export default withSdk<Props>(
     )
 
     const handleRemoveTrigger = useCallback(
-      (e: React.MouseEvent, idx: number) => {
-        e.stopPropagation()
+      (_e: React.MouseEvent, idx: number) => {
         removeTrigger(idx)
       },
       [removeTrigger]
@@ -225,8 +223,7 @@ export default withSdk<Props>(
     )
 
     const handleAddNewTriggerAction = useCallback(
-      (e: React.MouseEvent, idx: number) => {
-        e.stopPropagation()
+      (_e: React.MouseEvent, idx: number) => {
         modifyTrigger(idx, {
           ...triggers[idx],
           actions: [...triggers[idx].actions, { id: undefined, name: '' }]
@@ -246,7 +243,7 @@ export default withSdk<Props>(
     )
 
     const handleAddNewTriggerCondition = useCallback(
-      (e: React.MouseEvent, idx: number) => {
+      (_e: React.MouseEvent, idx: number) => {
         modifyTrigger(idx, {
           ...triggers[idx],
           conditions: [
diff --git a/packages/@dcl/inspector/src/hooks/useArrayState.ts b/packages/@dcl/inspector/src/hooks/useArrayState.ts
index 6844b9f66..db53d0d59 100644
--- a/packages/@dcl/inspector/src/hooks/useArrayState.ts
+++ b/packages/@dcl/inspector/src/hooks/useArrayState.ts
@@ -1,7 +1,7 @@
 import { useCallback, useState } from 'react'
 
 export function useArrayState<T>(initialArray: T[] = []) {
-  const [array, setArray] = useState<T[]>(initialArray)
+  const [array, setArray] = useState<T[]>([...initialArray])
 
   // Function to add an item to the array
   const addItem = useCallback(