feat: Disable / Enable actions

Composer/packages/client/src/components/ToolBar/ToolBar.tsx

@@ -3,12 +3,14 @@
 
 /** @jsx jsx */
 import { jsx } from '@emotion/core';
-import { useCallback, Fragment } from 'react';
+import { useCallback, Fragment, useMemo } from 'react';
 import formatMessage from 'format-message';
 import { ActionButton, CommandButton } from 'office-ui-fabric-react/lib/Button';
 import { DialogInfo } from '@bfc/shared';
+import get from 'lodash/get';
 
 import { useStoreContext } from '../../hooks/useStoreContext';
+import { VisualEditorAPI } from '../../pages/design/FrameAPI';
 
 import { headerSub, leftActions, rightActions, actionButton } from './styles';
 
@@ -67,8 +69,20 @@ export function ToolBar(props: ToolbarProps) {
   } = props;
   const {
     actions: { onboardingAddCoachMarkRef, createDialogBegin, exportToZip },
-    state: { projectId },
+    state: { projectId, visualEditorSelection },
   } = useStoreContext();
+
+  const { actionSelected, showDisableBtn, showEnableBtn } = useMemo(() => {
+    const actionSelected = Array.isArray(visualEditorSelection) && visualEditorSelection.length > 0;
+    if (!actionSelected) {
+      return {};
+    }
+    const selectedActions = visualEditorSelection.map((id) => get(currentDialog?.content, id));
+    const showDisableBtn = selectedActions.some((x) => get(x, 'disabled') !== true);
+    const showEnableBtn = selectedActions.some((x) => get(x, 'disabled') === true);
+    return { actionSelected, showDisableBtn, showEnableBtn };
+  }, [visualEditorSelection]);
+
   const left: IToolBarItem[] = [];
   const right: IToolBarItem[] = [];
 
@@ -122,6 +136,34 @@ export function ToolBar(props: ToolbarProps) {
           </div>
         )}
         {left.map(itemList)}{' '}
+        {window.location.href.includes('/dialogs/') && (
+          <CommandButton
+            css={actionButton}
+            disabled={!actionSelected}
+            iconProps={{ iconName: 'RemoveOccurrence' }}
+            menuProps={{
+              items: [
+                {
+                  key: 'disable',
+                  text: formatMessage('Disable'),
+                  disabled: !showDisableBtn,
+                  onClick: () => {
+                    VisualEditorAPI.disableSelection();
+                  },
+                },
+                {
+                  key: 'enable',
+                  text: formatMessage('Enable'),
+                  disabled: !showEnableBtn,
+                  onClick: () => {
+                    VisualEditorAPI.enableSelection();
+                  },
+                },
+              ],
+            }}
+            text={formatMessage('Disable')}
+          />
+        )}
         {window.location.href.includes('/dialogs/') && (
           <CommandButton
             css={actionButton}

Composer/packages/client/src/pages/design/FrameAPI.ts

@@ -25,5 +25,7 @@ export const VisualEditorAPI = (() => {
     cutSelection: () => visualEditorFrameAPI.invoke('cutSelection'),
     moveSelection: () => visualEditorFrameAPI.invoke('moveSelection'),
     deleteSelection: () => visualEditorFrameAPI.invoke('deleteSelection'),
+    disableSelection: () => visualEditorFrameAPI.invoke('disableSelection'),
+    enableSelection: () => visualEditorFrameAPI.invoke('enableSelection'),
   };
 })();

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-editor/constants/ScreenReaderMessage.ts

@@ -9,6 +9,8 @@ export enum ScreenReaderMessage {
   DialogOpened = 'Dialog opened',
   ActionDeleted = 'Action deleted',
   ActionsDeleted = 'Actions deleted',
+  ActionsDisabled = 'Actions disabled',
+  ActionsEnabled = 'Actions enabled',
   ActionCreated = 'Action created',
   ActionsCreated = 'Actions created',
   EventCreated = 'Event created',

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-editor/hooks/useEditorEventApi.ts

@@ -30,6 +30,8 @@ export const useEditorEventApi = (
     cutSelectedActions,
     deleteSelectedAction,
     deleteSelectedActions,
+    disableSelectedActions,
+    enableSelectedActions,
     updateRecognizer,
   } = useDialogEditApi(shellApi);
   const { createDialog, readDialog, updateDialog } = useDialogApi(shellApi);
@@ -267,6 +269,20 @@ export const useEditorEventApi = (
           announce(ScreenReaderMessage.ActionsDeleted);
         };
         break;
+      case NodeEventTypes.DisableSelection:
+        handler = () => {
+          const actionIds = getClipboardTargetsFromContext();
+          onChange(disableSelectedActions(path, data, actionIds));
+          announce(ScreenReaderMessage.ActionsDisabled);
+        };
+        break;
+      case NodeEventTypes.EnableSelection:
+        handler = () => {
+          const actionIds = getClipboardTargetsFromContext();
+          onChange(enableSelectedActions(path, data, actionIds));
+          announce(ScreenReaderMessage.ActionsEnabled);
+        };
+        break;
       case NodeEventTypes.AppendSelection:
         handler = (e) => {
           trackActionListChange(e.target);
@@ -300,6 +316,8 @@ export const useEditorEventApi = (
   (window as any).cutSelection = () => handleEditorEvent(NodeEventTypes.CutSelection);
   (window as any).moveSelection = () => handleEditorEvent(NodeEventTypes.MoveSelection);
   (window as any).deleteSelection = () => handleEditorEvent(NodeEventTypes.DeleteSelection);
+  (window as any).disableSelection = () => handleEditorEvent(NodeEventTypes.DisableSelection);
+  (window as any).enableSelection = () => handleEditorEvent(NodeEventTypes.EnableSelection);
 
   return {
     handleEditorEvent,

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/components/IconBrick.tsx

@@ -7,12 +7,15 @@ import { Icon } from 'office-ui-fabric-react/lib/Icon';
 
 import { IconBrickSize } from '../constants/ElementSizes';
 
-export const IconBrick = ({ onClick }): JSX.Element => {
+export const IconBrick = ({ onClick, disabled = false }): JSX.Element => {
+  const brickColor = disabled ? 'transparent' : '#FFFFFF';
+  const iconColor = disabled ? '#ddd' : '#FED9CC';
+
   return (
     <div
       css={{
         ...IconBrickSize,
-        background: '#FFFFFF',
+        background: brickColor,
         boxShadow: '0px 0.6px 1.8px rgba(0, 0, 0, 0.108), 0px 3.2px 7.2px rgba(0, 0, 0, 0.132)',
         borderRadius: '2px',
         cursor: 'pointer',
@@ -31,7 +34,7 @@ export const IconBrick = ({ onClick }): JSX.Element => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'center',
-          background: '#FED9CC',
+          background: iconColor,
           width: 16,
           height: 16,
           borderRadius: '8px',

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/constants/NodeEventTypes.ts

@@ -15,6 +15,8 @@ export enum NodeEventTypes {
   PasteSelection = 'event.data.paste-selection',
   MoveSelection = 'event.data.move-selection',
   DeleteSelection = 'event.data.delete-selection',
+  DisableSelection = 'event.data.disable-selection',
+  EnableSelection = 'event.data.enable-selection',
   AppendSelection = 'event.data.paste-selection--keyboard',
   InsertSelection = 'event.data.paste-selection--menu',
   Undo = 'event.operation.undo',

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/models/IndexedNode.ts

@@ -1,11 +1,15 @@
 // Copyright (c) Microsoft Corporation.
 // Licensed under the MIT License.
 
+import clone from 'lodash/clone';
+
 export class IndexedNode {
   id: string;
   json: any;
   constructor(id, payload) {
     this.id = id;
-    this.json = payload;
+    // Adaptive Flow lib leverages origin json to store necessary UI states,
+    // thus shallow clone input json here to support immutable case.
+    this.json = clone(payload);
   }
 }

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/transformers/inheritParentProperty.ts

@@ -0,0 +1,13 @@
+// Copyright (c) Microsoft Corporation.
+// Licensed under the MIT License.
+
+import { IndexedNode } from '../models/IndexedNode';
+
+export const inheritParentProperties = (parentJson: any, childNodes: IndexedNode[]) => {
+  /** inherit the 'disabled' property */
+  if (parentJson.disabled === true) {
+    // Action.disabled is typed with IExpressionString but could be a boolean.
+    // Composer only show disable effects when it's strictly set to static {true}.
+    childNodes.forEach((node) => (node.json.disabled = true));
+  }
+};

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/transformers/transformForeach.ts

@@ -5,6 +5,8 @@ import { AdaptiveFieldNames } from '../constants/AdaptiveFieldNames';
 import { AdaptiveKinds } from '../constants/AdaptiveKinds';
 import { IndexedNode } from '../models/IndexedNode';
 
+import { inheritParentProperties } from './inheritParentProperty';
+
 const StepsKey = AdaptiveFieldNames.Actions;
 
 export function transformForeach(
@@ -24,10 +26,13 @@ export function transformForeach(
     children: steps,
   });
 
-  return {
+  const result = {
     foreachDetail: foreachDetailNode,
     stepGroup: stepsNode,
     loopBegin: new IndexedNode(jsonpath, { $kind: AdaptiveKinds.LoopIndicator }),
     loopEnd: new IndexedNode(jsonpath, { $kind: AdaptiveKinds.LoopIndicator }),
   };
+
+  inheritParentProperties(input, Object.values(result));
+  return result;
 }

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/transformers/transformIfCondition.ts

@@ -5,6 +5,8 @@ import { AdaptiveFieldNames } from '../constants/AdaptiveFieldNames';
 import { AdaptiveKinds } from '../constants/AdaptiveKinds';
 import { IndexedNode } from '../models/IndexedNode';
 
+import { inheritParentProperties } from './inheritParentProperty';
+
 const IfBranchKey = AdaptiveFieldNames.Actions;
 const ElseBranchKey = AdaptiveFieldNames.ElseActions;
 
@@ -33,5 +35,6 @@ export function transformIfCondtion(
     }),
   };
 
+  inheritParentProperties(input, Object.values(result));
   return result;
 }

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/transformers/transformStepGroup.ts

@@ -5,9 +5,13 @@ import { AdaptiveKinds } from '../constants/AdaptiveKinds';
 import { IndexedNode } from '../models/IndexedNode';
 import { normalizeObiStep } from '../utils/adaptive/stepBuilder';
 
+import { inheritParentProperties } from './inheritParentProperty';
+
 export function transformStepGroup(input, groupId): IndexedNode[] {
   if (!input || input.$kind !== AdaptiveKinds.StepGroup) return [];
   if (!input.children || !Array.isArray(input.children)) return [];
 
-  return input.children.map((step, index) => new IndexedNode(`${groupId}[${index}]`, normalizeObiStep(step)));
+  const results = input.children.map((step, index) => new IndexedNode(`${groupId}[${index}]`, normalizeObiStep(step)));
+  inheritParentProperties(input, results);
+  return results;
 }

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/transformers/transformSwitchCondition.ts

@@ -5,6 +5,8 @@ import { AdaptiveFieldNames } from '../constants/AdaptiveFieldNames';
 import { AdaptiveKinds } from '../constants/AdaptiveKinds';
 import { IndexedNode } from '../models/IndexedNode';
 
+import { inheritParentProperties } from './inheritParentProperty';
+
 const ConditionKey = AdaptiveFieldNames.Condition;
 const CasesKey = AdaptiveFieldNames.Cases;
 const CaseStepKey = AdaptiveFieldNames.Actions;
@@ -52,5 +54,7 @@ export function transformSwitchCondition(
       });
     })
   );
+
+  inheritParentProperties(input, [result.condition, result.choice, ...result.branches]);
   return result;
 }

Composer/packages/extensions/adaptive-flow/src/adaptive-flow-renderer/widgets/ActionCard/ActionCard.tsx

@@ -15,5 +15,13 @@ export interface ActionCardProps extends WidgetContainerProps {
 }
 
 export const ActionCard: WidgetComponent<ActionCardProps> = ({ header, body, footer, ...widgetContext }) => {
-  return <CardTemplate body={body} footer={footer} header={header || <ActionHeader {...widgetContext} />} />;
+  const disabled = widgetContext.data.disabled === true;
+  return (
+    <CardTemplate
+      body={body}
+      disabled={disabled}
+      footer={footer}
+      header={header || <ActionHeader {...widgetContext} />}
+    />
+  );
 };