chore: let ElementWrapper handle Visual Editor focus states

Composer/packages/extensions/visual-designer/src/components/nodes/layout-steps/BaseInput.tsx

@@ -36,17 +36,17 @@ export const BaseInput: FC<NodeProps> = ({ id, data, onEvent, onResize }): JSX.E
   return (
     <div className="Action-BaseInput" css={{ width: boundary.width, height: boundary.height }}>
       <OffsetContainer offset={botAsksNode.offset}>
-        <ElementWrapper id={botAsksNode.id} tab={PromptTab.BOT_ASKS}>
+        <ElementWrapper id={botAsksNode.id} tab={PromptTab.BOT_ASKS} onEvent={onEvent}>
           <BotAsks id={botAsksNode.id} data={botAsksNode.data} onEvent={onEvent} onResize={onResize} />
         </ElementWrapper>
       </OffsetContainer>
       <OffsetContainer offset={userAnswersNode.offset}>
-        <ElementWrapper id={userAnswersNode.id} tab={PromptTab.USER_INPUT}>
+        <ElementWrapper id={userAnswersNode.id} tab={PromptTab.USER_INPUT} onEvent={onEvent}>
           <UserInput id={userAnswersNode.id} data={userAnswersNode.data} onEvent={onEvent} onResize={onResize} />
         </ElementWrapper>
       </OffsetContainer>
       <OffsetContainer offset={brickNode.offset}>
-        <ElementWrapper id={brickNode.id} tab={PromptTab.OTHER}>
+        <ElementWrapper id={brickNode.id} tab={PromptTab.OTHER} onEvent={onEvent}>
           <InvalidPromptBrick id={brickNode.id} data={brickNode.data} onEvent={onEvent} onResize={onResize} />
         </ElementWrapper>
       </OffsetContainer>

Composer/packages/extensions/visual-designer/src/components/nodes/layout-steps/Foreach.tsx

@@ -75,7 +75,7 @@ export const Foreach: FunctionComponent<NodeProps> = ({ id, data, onEvent, onRes
   return (
     <div css={{ width: boundary.width, height: boundary.height, position: 'relative' }}>
       <OffsetContainer offset={foreachNode.offset}>
-        <ElementWrapper id={id}>
+        <ElementWrapper id={id} onEvent={onEvent}>
           <ForeachHeader
             key={foreachNode.id}
             id={foreachNode.id}

Composer/packages/extensions/visual-designer/src/components/nodes/layout-steps/IfCondition.tsx

@@ -68,7 +68,7 @@ export const IfCondition: FunctionComponent<NodeProps> = ({ id, data, onEvent, o
   return (
     <div css={{ width: boundary.width, height: boundary.height, position: 'relative' }}>
       <OffsetContainer offset={condition.offset}>
-        <ElementWrapper id={condition.id}>
+        <ElementWrapper id={condition.id} onEvent={onEvent}>
           <ConditionNode
             key={condition.id}
             id={condition.id}

Composer/packages/extensions/visual-designer/src/components/nodes/layout-steps/SwitchCondition.tsx

@@ -66,7 +66,7 @@ export const SwitchCondition: FunctionComponent<NodeProps> = ({ id, data, onEven
   return (
     <div css={{ width: boundary.width, height: boundary.height, position: 'relative' }}>
       <OffsetContainer offset={nodeMap && nodeMap.conditionNode.offset}>
-        <ElementWrapper id={conditionNode.id}>
+        <ElementWrapper id={conditionNode.id} onEvent={onEvent}>
           <ConditionNode
             key={conditionNode.id}
             id={conditionNode.id}

Composer/packages/extensions/visual-designer/src/components/nodes/templates/FormCard.tsx

@@ -33,7 +33,7 @@ interface NodeProps {
   iconSize?: number;
   styles?: object;
   nodeColors: { [key: string]: any };
-  onClick: () => void;
+  onClick?: () => void;
   children?: any;
 }
 export const FormCard: FunctionComponent<NodeProps> = ({
@@ -54,8 +54,10 @@ export const FormCard: FunctionComponent<NodeProps> = ({
       data-testid="FormCard"
       css={[containerStyle, { ...styles }]}
       onClick={e => {
-        e.stopPropagation();
-        onClick();
+        if (typeof onClick === 'function') {
+          e.stopPropagation();
+          onClick();
+        }
       }}
     >
       <div

Composer/packages/extensions/visual-designer/src/components/renderers/ElementWrapper.tsx

@@ -9,6 +9,7 @@ import classnames from 'classnames';
 import { AttrNames } from '../../constants/ElementAttributes';
 import { NodeRendererContext } from '../../store/NodeRendererContext';
 import { SelectionContext } from '../../store/SelectionContext';
+import { NodeEventTypes } from '../../constants/NodeEventTypes';
 
 const nodeBorderHoveredStyle = css`
   box-shadow: 0px 0px 0px 1px #323130;
@@ -26,9 +27,10 @@ const nodeBorderDoubleSelectedStyle = css`
 export interface ElementWrapperProps {
   id: string;
   tab?: string;
+  onEvent: (eventName: NodeEventTypes, eventData: any) => any;
 }
 
-export const ElementWrapper: FC<ElementWrapperProps> = ({ id, tab, children }): JSX.Element => {
+export const ElementWrapper: FC<ElementWrapperProps> = ({ id, tab, onEvent, children }): JSX.Element => {
   const selectableId = tab ? `${id}${tab}` : id;
   const { focusedId, focusedEvent, focusedTab } = useContext(NodeRendererContext);
   const { selectedIds, getNodeIndex } = useContext(SelectionContext);
@@ -62,6 +64,10 @@ export const ElementWrapper: FC<ElementWrapperProps> = ({ id, tab, children }):
         }
       `}
       {...declareElementAttributes(selectableId, id)}
+      onClick={e => {
+        e.stopPropagation();
+        onEvent(NodeEventTypes.Focus, { id, tab });
+      }}
     >
       {children}
     </div>

Composer/packages/extensions/visual-designer/src/components/renderers/StepRenderer.tsx

@@ -65,7 +65,11 @@ export const StepRenderer: FC<NodeProps> = ({ id, data, onEvent, onResize }): JS
     return content;
   }
 
-  return <ElementWrapper id={id}>{content}</ElementWrapper>;
+  return (
+    <ElementWrapper id={id} onEvent={onEvent}>
+      {content}
+    </ElementWrapper>
+  );
 };
 
 StepRenderer.defaultProps = defaultNodeProps;

Composer/packages/extensions/visual-designer/src/widgets/ActionCard.tsx

@@ -7,7 +7,6 @@ import { generateSDKTitle } from '@bfc/shared';
 import { FormCard } from '../components/nodes/templates/FormCard';
 import { WidgetContainerProps, WidgetComponent } from '../schema/uischema.types';
 import { ObiColors } from '../constants/ElementColors';
-import { NodeEventTypes } from '../constants/NodeEventTypes';
 import { NodeMenu } from '../components/menus/NodeMenu';
 
 export interface ActionCardProps extends WidgetContainerProps {
@@ -43,7 +42,6 @@ export const ActionCard: WidgetComponent<ActionCardProps> = ({
       icon={icon}
       label={content}
       nodeColors={nodeColors}
-      onClick={() => onEvent(NodeEventTypes.Focus, { id })}
     />
   );
 };

Composer/packages/extensions/visual-designer/src/widgets/ActivityRenderer.tsx

@@ -5,7 +5,6 @@ import React from 'react';
 import { generateSDKTitle } from '@bfc/shared';
 import get from 'lodash/get';
 
-import { NodeEventTypes } from '../constants/NodeEventTypes';
 import { ElementIcon } from '../utils/obiPropertyResolver';
 import { NodeMenu } from '../components/menus/NodeMenu';
 import { FormCard } from '../components/nodes/templates/FormCard';
@@ -49,9 +48,6 @@ export const ActivityRenderer: React.FC<ActivityRenderer> = ({
       icon={icon}
       corner={<NodeMenu id={id} onEvent={onEvent} />}
       nodeColors={nodeColors}
-      onClick={() => {
-        onEvent(NodeEventTypes.Focus, { id });
-      }}
     />
   );
 };

Composer/packages/extensions/visual-designer/src/widgets/DialogRefCard.tsx

@@ -54,7 +54,6 @@ export const DialogRefCard: WidgetComponent<DialogRefCardProps> = ({
       corner={<NodeMenu id={id} onEvent={onEvent} />}
       label={typeof getRefContent === 'function' ? getRefContent(dialogRef) : dialogRef}
       nodeColors={nodeColors}
-      onClick={() => onEvent(NodeEventTypes.Focus, { id })}
     />
   );
 };