[Visual Editor] Focus state for prompt tab

Composer/packages/client/src/ShellApi.ts

@@ -136,7 +136,7 @@ export const ShellApi: React.FC = () => {
       const editorWindow = window.frames[VISUAL_EDITOR];
       apiClient.apiCall('reset', getState(VISUAL_EDITOR), editorWindow);
     }
-  }, [dialogs, lgFiles, luFiles, focusPath, selected, focused]);
+  }, [dialogs, lgFiles, luFiles, focusPath, selected, focused, promptTab]);
 
   useEffect(() => {
     if (window.frames[FORM_EDITOR]) {

Composer/packages/extensions/visual-designer/__tests__/index.test.tsx

@@ -25,6 +25,7 @@ describe('<VisualDesigner />', () => {
         dialogId="SomeDialog"
         focusedEvent="events[0]"
         focusedSteps={['events[0].steps[0]']}
+        focusedTab=""
         shellApi={{
           saveData: () => {},
         }}

Composer/packages/extensions/visual-designer/demo/src/stories/VisualEditorDemo.js

@@ -20,6 +20,7 @@ export class VisualEditorDemo extends Component {
     obiJson: ObiExamples[defaultFile],
     focusedEvent: 'events[0]',
     focusedSteps: [],
+    focusedTab: '',
   };
 
   constructor(props) {
@@ -32,6 +33,7 @@ export class VisualEditorDemo extends Component {
       obiJson: copyJson(ObiExamples[file]),
       focusedEvent: '',
       focusedSteps: [],
+      focusedTab: '',
     });
   }
 
@@ -41,7 +43,7 @@ export class VisualEditorDemo extends Component {
   }
 
   render() {
-    const { selectedFile, obiJson, focusedEvent, focusedSteps } = this.state;
+    const { selectedFile, obiJson, focusedEvent, focusedSteps, focusedTab } = this.state;
 
     return (
       <div className="ve-container">
@@ -81,6 +83,7 @@ export class VisualEditorDemo extends Component {
               dialogId={selectedFile}
               focusedEvent={focusedEvent}
               focusedSteps={focusedSteps}
+              focusedTab={focusedTab}
               shellApi={{
                 navTo: e => {
                   console.log('navTo', e);
@@ -92,10 +95,11 @@ export class VisualEditorDemo extends Component {
                     focusedSteps: [],
                   });
                 },
-                onFocusSteps: stepIds => {
-                  console.log('onFocusSteps', stepIds);
+                onFocusSteps: (stepIds, tabName) => {
+                  console.log('onFocusSteps', stepIds, tabName);
                   this.setState({
                     focusedSteps: stepIds,
+                    focusedTab: tabName,
                   });
                 },
                 saveData: json => {

Composer/packages/extensions/visual-designer/src/components/lib/KeyboardZone.tsx

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { FC } from 'react';
+
 import { mapShortcutToKeyboardCommand } from '../../constants/KeyboardCommandTypes';
 
 const KeyNameByModifierAttr = {

Composer/packages/extensions/visual-designer/src/components/menus/EdgeMenu.tsx

@@ -73,7 +73,20 @@ export const EdgeMenu: React.FC<EdgeMenuProps> = ({ id, onClick, ...rest }) => {
     >
       <IconMenu
         iconName="Add"
-        iconStyles={{ background: 'white', color: '#005CE6' }}
+        iconStyles={{
+          background: 'white',
+          color: '#005CE6',
+          selectors: {
+            ':focus': {
+              outline: 'none',
+              selectors: {
+                '::after': {
+                  outline: 'none !important',
+                },
+              },
+            },
+          },
+        }}
         iconSize={10}
         nodeSelected={nodeSelected}
         menuItems={buildEdgeMenuItemsFromClipboardContext(clipboarcContext, onClick)}

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

@@ -1,6 +1,7 @@
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
 import { FC } from 'react';
+import { PromptTab } from 'shared';
 
 import { baseInputLayouter } from '../../../layouters/baseInputLayouter';
 import { NodeProps } from '../nodeProps';
@@ -29,13 +30,31 @@ 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}>
-        <ElementRenderer id={botAsksNode.id} data={botAsksNode.data} onEvent={onEvent} onResize={onResize} />
+        <ElementRenderer
+          id={botAsksNode.id}
+          tab={PromptTab.BOT_ASKS}
+          data={botAsksNode.data}
+          onEvent={onEvent}
+          onResize={onResize}
+        />
       </OffsetContainer>
       <OffsetContainer offset={userAnswersNode.offset}>
-        <ElementRenderer id={userAnswersNode.id} data={userAnswersNode.data} onEvent={onEvent} onResize={onResize} />
+        <ElementRenderer
+          id={userAnswersNode.id}
+          tab={PromptTab.USER_ANSWERS}
+          data={userAnswersNode.data}
+          onEvent={onEvent}
+          onResize={onResize}
+        />
       </OffsetContainer>
       <OffsetContainer offset={brickNode.offset}>
-        <ElementRenderer id={brickNode.id} data={brickNode.data} onEvent={onEvent} onResize={onResize} />
+        <ElementRenderer
+          id={brickNode.id}
+          tab={PromptTab.EXCEPTIONS}
+          data={brickNode.data}
+          onEvent={onEvent}
+          onResize={onResize}
+        />
       </OffsetContainer>
       {edges ? edges.map(x => <Edge key={x.id} {...x} />) : null}
     </div>

Composer/packages/extensions/visual-designer/src/components/nodes/nodeProps.ts

@@ -2,6 +2,7 @@ import { Boundary } from '../../models/Boundary';
 
 export interface NodeProps {
   id: string;
+  tab?: string;
   data: any;
   focused?: boolean;
   onEvent: (action, id, ...rest) => object | void;

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

@@ -63,7 +63,6 @@ export const FormCard: FunctionComponent<NodeProps> = ({
           fontSize: '14px',
           lineHeight: '19px',
           color: 'black',
-          position: 'relative',
         }}
       >
         <div css={{ padding: '10px 10px', fontSize: '14px', fontFamily: 'Segoe UI', lineHeight: '19px' }}>{header}</div>

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

@@ -47,11 +47,19 @@ const nodeBorderSelectedStyle = css`
   box-shadow: 0px 0px 0px 2px #0078d4;
 `;
 
-export const ElementRenderer: FC<NodeProps> = ({ id, data, onEvent, onResize }): JSX.Element => {
+// BotAsks, UserAnswers and InvalidPromptBrick nodes selected style
+const nodeBorderDoubleSelectedStyle = css`
+  outline: 2px solid #0078d4;
+  box-shadow: 0px 0px 0px 6px rgba(0, 120, 212, 0.3);
+`;
+
+export const ElementRenderer: FC<NodeProps> = ({ id, data, onEvent, onResize, tab }): JSX.Element => {
   const ChosenRenderer = chooseRendererByType(data.$type);
-  const { focusedId, focusedEvent } = useContext(NodeRendererContext);
-  const { getNodeIndex, selectedIds } = useContext(SelectionContext);
+  const selectableId = tab ? `${id}${tab}` : id;
+  const { focusedId, focusedEvent, focusedTab } = useContext(NodeRendererContext);
+  const { selectedIds, getNodeIndex } = useContext(SelectionContext);
   const nodeFocused = focusedId === id || focusedEvent === id;
+  const nodeDoubleSelected = tab && nodeFocused && tab === focusedTab;
   const nodeSelected = selectedIds.includes(id);
 
   const declareElementAttributes = (selectedId: string, id: string) => {
@@ -61,28 +69,26 @@ export const ElementRenderer: FC<NodeProps> = ({ id, data, onEvent, onResize }):
       [AttrNames.FocusedId]: id,
       [AttrNames.SelectableElement]: true,
       [AttrNames.SelectedId]: selectedId,
-      [AttrNames.SelectionIndex]: getNodeIndex(selectedId),
+      [AttrNames.SelectionIndex]: getNodeIndex(id),
+      [AttrNames.Tab]: tab,
     };
   };
 
   return (
     <div
-      className={classnames(
-        'step-renderer-container',
-        { 'step-renderer-container--focused': nodeFocused },
-        { 'step-renderer-container--selected': nodeSelected }
-      )}
+      className={classnames('step-renderer-container', { 'step-renderer-container--focused': nodeFocused })}
       css={css`
         display: inline-block;
         position: relative;
         border-radius: 1px 1px 0 0;
-        ${nodeSelected && nodeBorderSelectedStyle};
         ${nodeFocused && nodeBorderSelectedStyle};
+        ${nodeSelected && nodeBorderSelectedStyle};
+        ${nodeDoubleSelected && nodeBorderDoubleSelectedStyle};
         &:hover {
-          ${!nodeFocused && !nodeSelected && nodeBorderHoveredStyle}
+          ${!nodeFocused && nodeBorderHoveredStyle}
         }
       `}
-      {...declareElementAttributes(id, id)}
+      {...declareElementAttributes(selectableId, id)}
     >
       <ChosenRenderer
         id={id}

Composer/packages/extensions/visual-designer/src/constants/ElementAttributes.ts

@@ -5,6 +5,7 @@ export enum AttrNames {
   EdgeMenuElement = 'data-is-edge-menu',
   FocusedId = 'data-focused-id',
   SelectedId = 'data-selected-id',
+  Tab = 'data-tab',
 
   // attrs for multi selection
   FocusableElement = 'data-is-focusable',

Composer/packages/extensions/visual-designer/src/editors/ObiEditor.tsx

@@ -181,8 +181,8 @@ export const ObiEditor: FC<ObiEditorProps> = ({
 
   useEffect((): void => {
     resetSelectionData();
-    setSelectedElements(querySelectedElements());
-  }, [data]);
+    setSelectableElements(querySelectableElements());
+  }, [data, focusedEvent]);
 
   const selection = new Selection({
     onSelectionChanged: (): void => {
@@ -201,11 +201,10 @@ export const ObiEditor: FC<ObiEditorProps> = ({
     },
   });
 
-  const querySelectedElements = () => {
-    const items: NodeListOf<HTMLElement> = document.querySelectorAll(`[${AttrNames.SelectableElement}]`);
-    return items;
+  const querySelectableElements = (): NodeListOf<HTMLElement> => {
+    return document.querySelectorAll(`[${AttrNames.SelectableElement}]`);
   };
-  const [selectedElements, setSelectedElements] = useState<NodeListOf<HTMLElement>>(querySelectedElements());
+  const [selectableElements, setSelectableElements] = useState<NodeListOf<HTMLElement>>(querySelectableElements());
 
   const getClipboardTargetsFromContext = (): string[] => {
     const selectedActionIds = normalizeSelection(selectionContext.selectedIds);
@@ -251,12 +250,12 @@ export const ObiEditor: FC<ObiEditorProps> = ({
         break;
       case KeyboardPrimaryTypes.Cursor: {
         const currentSelectedId = selectionContext.selectedIds[0] || focusedId;
-        const { selected, focused } = moveCursor(selectedElements, currentSelectedId, command);
+        const { selected, focused, tab } = moveCursor(selectableElements, currentSelectedId, command);
         setSelectionContext({
           getNodeIndex: selectionContext.getNodeIndex,
           selectedIds: [selected as string],
         });
-        focused && onFocusSteps([focused]);
+        focused && onFocusSteps([focused], tab);
         break;
       }
       case KeyboardPrimaryTypes.Operation: {

Composer/packages/extensions/visual-designer/src/index.tsx

@@ -15,6 +15,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
   dialogId,
   focusedEvent,
   focusedSteps,
+  focusedTab,
   data: inputData,
   shellApi,
 }): JSX.Element => {
@@ -48,6 +49,7 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
   const [context, setContext] = useState({
     focusedId,
     focusedEvent,
+    focusedTab,
     getLgTemplates: getLgTemplates,
     removeLgTemplate: removeLgTemplate,
   });
@@ -57,8 +59,9 @@ const VisualDesigner: React.FC<VisualDesignerProps> = ({
       ...context,
       focusedId,
       focusedEvent,
+      focusedTab,
     });
-  }, [focusedEvent, focusedSteps]);
+  }, [focusedEvent, focusedSteps, focusedTab]);
 
   return (
     <NodeRendererContext.Provider value={context}>
@@ -87,6 +90,7 @@ interface VisualDesignerProps {
   dialogId: string;
   focusedEvent: string;
   focusedSteps: string[];
+  focusedTab: string;
   shellApi: any;
   currentDialog: { id: string; displayName: string; isRoot: boolean };
 }

Composer/packages/extensions/visual-designer/src/store/NodeRendererContext.ts

@@ -8,6 +8,7 @@ interface LgTemplate {
 export const NodeRendererContext = React.createContext({
   focusedId: '',
   focusedEvent: '',
+  focusedTab: '',
   getLgTemplates: (_id: string, _templateName: string) => Promise.resolve([] as LgTemplate[]),
   removeLgTemplate: (_id: string, _templateName: string) => Promise.resolve(),
 });

Composer/packages/extensions/visual-designer/src/utils/cursorTracker.ts

@@ -60,7 +60,7 @@ function localeNearestElement(
       assistDistance = Math.abs(
         currentElementBounds.top + currentElementBounds.height / 2 - (bounds.top + bounds.height / 2)
       );
-      if (distance > 0 && distance <= minDistance && assistMinDistance > assistDistance) {
+      if (distance > 0 && distance <= minDistance && assistMinDistance >= assistDistance) {
         neareastElement = element;
         minDistance = distance;
         assistMinDistance = assistDistance;
@@ -184,7 +184,8 @@ export function moveCursor(
   element.scrollIntoView(true);
 
   return {
-    selected: element.dataset.selectedId || id,
-    focused: element.dataset.focusedId,
+    selected: element.getAttribute(AttrNames.SelectedId) || id,
+    focused: element.getAttribute(AttrNames.FocusedId) || undefined,
+    tab: element.getAttribute(AttrNames.Tab) || '',
   };
 }