awslabs · jmbuss · Aug 19, 2022 · Aug 9, 2022
diff --git a/...shots/integration/iot-dashboard-context-menu.spec.component.ts/renders.snap.png b/...shots/integration/iot-dashboard-context-menu.spec.component.ts/renders.snap.png
diff --git a/packages/dashboard/cypress/support/commands.js b/packages/dashboard/cypress/support/commands.js
@@ -25,3 +25,9 @@
 // Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
 
 import '@4tw/cypress-drag-drop';
+import { addMatchImageSnapshotCommand } from 'cypress-image-snapshot/command';
+
+addMatchImageSnapshotCommand({
+  failureThreshold: 0.025,
+  failureThresholdType: 'percent',
+});
diff --git a/packages/dashboard/package.json b/packages/dashboard/package.json
@@ -62,9 +62,12 @@
   },
   "dependencies": {
     "@iot-app-kit/core": "^1.5.0",
+    "@popperjs/core": "^2.11.5",
     "@stencil/core": "^2.17.1",
     "@synchro-charts/core": "^4.0.0",
+    "@types/lodash": "^3.10.5",
     "box-intersect": "^1.0.2",
+    "lodash": "^4.17.21",
     "resize-observer-polyfill": "^1.5.1",
     "uuid": "^8.3.2"
   }

diff --git a/packages/dashboard/src/components.d.ts b/packages/dashboard/src/components.d.ts
@@ -5,16 +5,43 @@
  * It contains typing information for all components that exist in this project.
  */
 import { HTMLStencilElement, JSXBase } from "@stencil/core/internal";
-import { Anchor, DashboardConfiguration, OnResize, Widget } from "./types";
+import { Anchor, DashboardConfiguration, OnResize, RecursivePartial, Widget } from "./types";
+import { DashboardMessages } from "./messages";
 import { AlarmsConfig, Annotations, Axis, LabelsConfig, LayoutConfig, LegendConfig, MessageOverrides, MinimalSizeConfig, MinimalViewPortConfig, MovementConfig, ScaleConfig, Trend } from "@synchro-charts/core";
 import { TimeQuery, TimeSeriesData, TimeSeriesDataRequest } from "@iot-app-kit/core";
-import { DeleteActionInput, MoveActionInput, ResizeActionInput, SelectActionInput } from "./dashboard-actions/actions";
+import { BringToFrontActionInput, DeleteActionInput, MoveActionInput, PasteActionInput, ResizeActionInput, SelectActionInput, SendToBackActionInput } from "./dashboard-actions/actions";
 export namespace Components {
+    interface IotContextMenu {
+        "x": number;
+        "y": number;
+    }
+    interface IotContextMenuOption {
+        "disabled": boolean;
+        "onClick"?: (event: MouseEvent) => void;
+    }
+    interface IotContextMenuSection {
+    }
     interface IotDashboard {
         /**
           * The configurations which determines which widgets render where with what settings.
          */
         "dashboardConfiguration": DashboardConfiguration;
+        "messageOverrides"?: RecursivePartial<DashboardMessages>;
+    }
+    interface IotDashboardContextMenu {
+        /**
+          * Actions to use for context menu
+         */
+        "actions": ActionsProp;
+        "hasCopiedWidgets": boolean;
+        /**
+          * Widget selections to be used to determine enabled actions.
+         */
+        "hasSelectedWidgets": boolean;
+        /**
+          * Message overrides to be used in the dashboard.
+         */
+        "messageOverrides": DashboardMessages;
     }
     interface IotDashboardDynamicWidget {
         "alarms"?: AlarmsConfig;
@@ -42,25 +69,35 @@ export namespace Components {
         "widgetId": string;
     }
     interface IotDashboardInternal {
+        "bringToFront": (input: BringToFrontActionInput) => void;
         /**
           * Width and height of the cell, in pixels
          */
         "cellSize": number;
+        /**
+          * List of widgets in the current copy group.
+         */
+        "copyGroup": Widget[];
         "copyWidgets": () => void;
         /**
           * The configurations which determines which widgets render where with what settings.
          */
         "dashboardConfiguration": DashboardConfiguration;
         "deleteWidgets": (deleteInput: DeleteActionInput) => void;
+        /**
+          * Message overrides to be used in the dashboard.
+         */
+        "messageOverrides": DashboardMessages;
         "move": (moveInput: MoveActionInput) => void;
-        "pasteWidgets": () => void;
+        "pasteWidgets": (input: PasteActionInput) => void;
         "redo": () => void;
         "resizeWidgets": (resizeInput: ResizeActionInput) => void;
         "selectWidgets": (selectInput: SelectActionInput) => void;
         /**
           * List of ID's of the currently selected widgets.
          */
         "selectedWidgetIds": string[];
+        "sendToBack": (input: SendToBackActionInput) => void;
         /**
           * Whether the dashboard grid will stretch to fit.  If stretch to fit is false, the dashboard grid will be the width in pixels. If not enough room is present, it will utilize scrollbars to allow access to the entire grid.  If stretch to fit is true, the entire grid will scale proportionally to scale to the available space for the grid.
          */
@@ -96,12 +133,36 @@ export namespace Components {
     }
 }
 declare global {
+    interface HTMLIotContextMenuElement extends Components.IotContextMenu, HTMLStencilElement {
+    }
+    var HTMLIotContextMenuElement: {
+        prototype: HTMLIotContextMenuElement;
+        new (): HTMLIotContextMenuElement;
+    };
+    interface HTMLIotContextMenuOptionElement extends Components.IotContextMenuOption, HTMLStencilElement {
+    }
+    var HTMLIotContextMenuOptionElement: {
+        prototype: HTMLIotContextMenuOptionElement;
+        new (): HTMLIotContextMenuOptionElement;
+    };
+    interface HTMLIotContextMenuSectionElement extends Components.IotContextMenuSection, HTMLStencilElement {
+    }
+    var HTMLIotContextMenuSectionElement: {
+        prototype: HTMLIotContextMenuSectionElement;
+        new (): HTMLIotContextMenuSectionElement;
+    };
     interface HTMLIotDashboardElement extends Components.IotDashboard, HTMLStencilElement {
     }
     var HTMLIotDashboardElement: {
         prototype: HTMLIotDashboardElement;
         new (): HTMLIotDashboardElement;
     };
+    interface HTMLIotDashboardContextMenuElement extends Components.IotDashboardContextMenu, HTMLStencilElement {
+    }
+    var HTMLIotDashboardContextMenuElement: {
+        prototype: HTMLIotDashboardContextMenuElement;
+        new (): HTMLIotDashboardContextMenuElement;
+    };
     interface HTMLIotDashboardDynamicWidgetElement extends Components.IotDashboardDynamicWidget, HTMLStencilElement {
     }
     var HTMLIotDashboardDynamicWidgetElement: {
@@ -145,7 +206,11 @@ declare global {
         new (): HTMLTestingGroundElement;
     };
     interface HTMLElementTagNameMap {
+        "iot-context-menu": HTMLIotContextMenuElement;
+        "iot-context-menu-option": HTMLIotContextMenuOptionElement;
+        "iot-context-menu-section": HTMLIotContextMenuSectionElement;
         "iot-dashboard": HTMLIotDashboardElement;
+        "iot-dashboard-context-menu": HTMLIotDashboardContextMenuElement;
         "iot-dashboard-dynamic-widget": HTMLIotDashboardDynamicWidgetElement;
         "iot-dashboard-internal": HTMLIotDashboardInternalElement;
         "iot-dashboard-widget": HTMLIotDashboardWidgetElement;
@@ -156,11 +221,37 @@ declare global {
     }
 }
 declare namespace LocalJSX {
+    interface IotContextMenu {
+        "x"?: number;
+        "y"?: number;
+    }
+    interface IotContextMenuOption {
+        "disabled"?: boolean;
+        "onClick"?: (event: MouseEvent) => void;
+    }
+    interface IotContextMenuSection {
+    }
     interface IotDashboard {
         /**
           * The configurations which determines which widgets render where with what settings.
          */
         "dashboardConfiguration"?: DashboardConfiguration;
+        "messageOverrides"?: RecursivePartial<DashboardMessages>;
+    }
+    interface IotDashboardContextMenu {
+        /**
+          * Actions to use for context menu
+         */
+        "actions"?: ActionsProp;
+        "hasCopiedWidgets"?: boolean;
+        /**
+          * Widget selections to be used to determine enabled actions.
+         */
+        "hasSelectedWidgets"?: boolean;
+        /**
+          * Message overrides to be used in the dashboard.
+         */
+        "messageOverrides"?: DashboardMessages;
     }
     interface IotDashboardDynamicWidget {
         "alarms"?: AlarmsConfig;
@@ -188,25 +279,35 @@ declare namespace LocalJSX {
         "widgetId": string;
     }
     interface IotDashboardInternal {
+        "bringToFront"?: (input: BringToFrontActionInput) => void;
         /**
           * Width and height of the cell, in pixels
          */
         "cellSize"?: number;
+        /**
+          * List of widgets in the current copy group.
+         */
+        "copyGroup"?: Widget[];
         "copyWidgets"?: () => void;
         /**
           * The configurations which determines which widgets render where with what settings.
          */
         "dashboardConfiguration"?: DashboardConfiguration;
         "deleteWidgets"?: (deleteInput: DeleteActionInput) => void;
+        /**
+          * Message overrides to be used in the dashboard.
+         */
+        "messageOverrides"?: DashboardMessages;
         "move"?: (moveInput: MoveActionInput) => void;
-        "pasteWidgets"?: () => void;
+        "pasteWidgets"?: (input: PasteActionInput) => void;
         "redo"?: () => void;
         "resizeWidgets"?: (resizeInput: ResizeActionInput) => void;
         "selectWidgets"?: (selectInput: SelectActionInput) => void;
         /**
           * List of ID's of the currently selected widgets.
          */
         "selectedWidgetIds"?: string[];
+        "sendToBack"?: (input: SendToBackActionInput) => void;
         /**
           * Whether the dashboard grid will stretch to fit.  If stretch to fit is false, the dashboard grid will be the width in pixels. If not enough room is present, it will utilize scrollbars to allow access to the entire grid.  If stretch to fit is true, the entire grid will scale proportionally to scale to the available space for the grid.
          */
@@ -241,7 +342,11 @@ declare namespace LocalJSX {
     interface TestingGround {
     }
     interface IntrinsicElements {
+        "iot-context-menu": IotContextMenu;
+        "iot-context-menu-option": IotContextMenuOption;
+        "iot-context-menu-section": IotContextMenuSection;
         "iot-dashboard": IotDashboard;
+        "iot-dashboard-context-menu": IotDashboardContextMenu;
         "iot-dashboard-dynamic-widget": IotDashboardDynamicWidget;
         "iot-dashboard-internal": IotDashboardInternal;
         "iot-dashboard-widget": IotDashboardWidget;
@@ -255,7 +360,11 @@ export { LocalJSX as JSX };
 declare module "@stencil/core" {
     export namespace JSX {
         interface IntrinsicElements {
+            "iot-context-menu": LocalJSX.IotContextMenu & JSXBase.HTMLAttributes<HTMLIotContextMenuElement>;
+            "iot-context-menu-option": LocalJSX.IotContextMenuOption & JSXBase.HTMLAttributes<HTMLIotContextMenuOptionElement>;
+            "iot-context-menu-section": LocalJSX.IotContextMenuSection & JSXBase.HTMLAttributes<HTMLIotContextMenuSectionElement>;
             "iot-dashboard": LocalJSX.IotDashboard & JSXBase.HTMLAttributes<HTMLIotDashboardElement>;
+            "iot-dashboard-context-menu": LocalJSX.IotDashboardContextMenu & JSXBase.HTMLAttributes<HTMLIotDashboardContextMenuElement>;
             "iot-dashboard-dynamic-widget": LocalJSX.IotDashboardDynamicWidget & JSXBase.HTMLAttributes<HTMLIotDashboardDynamicWidgetElement>;
             "iot-dashboard-internal": LocalJSX.IotDashboardInternal & JSXBase.HTMLAttributes<HTMLIotDashboardInternalElement>;
             "iot-dashboard-widget": LocalJSX.IotDashboardWidget & JSXBase.HTMLAttributes<HTMLIotDashboardWidgetElement>;

diff --git a/packages/dashboard/src/components/iot-dashboard/iot-context-menu/contextMenuOptions.ts b/packages/dashboard/src/components/iot-dashboard/iot-context-menu/contextMenuOptions.ts
@@ -0,0 +1,113 @@
+import { ContextMenuMessages, keyboardShortcuts } from '../../../messages';
+
+type ContextMenuOptionConfiguration = {
+  id: string;
+  action: (event: MouseEvent) => void;
+  text: string;
+  disabled: boolean;
+  hotkey?: string;
+};
+
+type ContextMenuSectionConfiguration = {
+  id: string;
+  options: ContextMenuOptionConfiguration[];
+};
+
+export type ContextMenuConfiguration = ContextMenuSectionConfiguration[];
+
+export type ContextMenuConfigurationProps = {
+  messages: ContextMenuMessages;
+  actions: {
+    copyAction: (event: MouseEvent) => void;
+    pasteAction: (event: MouseEvent) => void;
+    deleteAction: (event: MouseEvent) => void;
+    bringToFrontAction: (event: MouseEvent) => void;
+    sendToBackAction: (event: MouseEvent) => void;
+  };
+  state: {
+    hasSelectedWidgets: boolean;
+    hasCopiedWidgets: boolean;
+  };
+};
+
+type OptionCreator = (props: ContextMenuConfigurationProps) => ContextMenuOptionConfiguration;
+
+type ContextMenuConfigurationCreator = {
+  id: string;
+  options: OptionCreator[];
+};
+
+const createCopyOption: OptionCreator = (props: ContextMenuConfigurationProps): ContextMenuOptionConfiguration => {
+  const { actions, messages, state } = props;
+  return {
+    id: 'copy',
+    text: messages.copyText,
+    hotkey: keyboardShortcuts.copy,
+    disabled: !state.hasSelectedWidgets,
+    action: actions.copyAction,
+  };
+};
+
+const createPasteOption: OptionCreator = (props: ContextMenuConfigurationProps): ContextMenuOptionConfiguration => {
+  const { actions, messages, state } = props;
+  return {
+    id: 'paste',
+    text: messages.pasteText,
+    hotkey: keyboardShortcuts.paste,
+    disabled: !state.hasCopiedWidgets,
+    action: actions.pasteAction,
+  };
+};
+
+const createDeleteOption: OptionCreator = (props: ContextMenuConfigurationProps): ContextMenuOptionConfiguration => {
+  const { actions, messages, state } = props;
+  return {
+    id: 'delete',
+    text: messages.deleteText,
+    disabled: !state.hasSelectedWidgets,
+    action: actions.deleteAction,
+  };
+};
+
+const createBringToFrontOption: OptionCreator = (
+  props: ContextMenuConfigurationProps
+): ContextMenuOptionConfiguration => {
+  const { actions, messages, state } = props;
+  return {
+    id: 'bringToFront',
+    text: messages.bringToFrontText,
+    hotkey: keyboardShortcuts.bringToFront,
+    disabled: !state.hasSelectedWidgets,
+    action: actions.bringToFrontAction,
+  };
+};
+
+const createSendToBackOption: OptionCreator = (
+  props: ContextMenuConfigurationProps
+): ContextMenuOptionConfiguration => {
+  const { actions, messages, state } = props;
+  return {
+    id: 'sendToBack',
+    text: messages.sendToBackText,
+    hotkey: keyboardShortcuts.sendToBack,
+    disabled: !state.hasSelectedWidgets,
+    action: actions.sendToBackAction,
+  };
+};
+
+const configuration: ContextMenuConfigurationCreator[] = [
+  {
+    id: 'section1',
+    options: [createCopyOption, createPasteOption, createDeleteOption],
+  },
+  {
+    id: 'section2',
+    options: [createBringToFrontOption, createSendToBackOption],
+  },
+];
+
+export const createContextMenuOptions = (props: ContextMenuConfigurationProps): ContextMenuConfiguration =>
+  configuration.map((section) => ({
+    ...section,
+    options: section.options.map((createOption) => createOption(props)),
+  }));
diff --git a/packages/dashboard/src/components/iot-dashboard/iot-context-menu/iot-context-menu-option.css b/packages/dashboard/src/components/iot-dashboard/iot-context-menu/iot-context-menu-option.css
@@ -0,0 +1,19 @@
+.iot-context-menu-option {
+  color: var(--selection-bg-color);
+  background-color: var(--colors-dark-grey);
+  font-weight: var(--font-weight-context-menu);
+  font-size: var(--font-size-context-menu);
+  padding: var(--spacing-context-menu-option);
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+}
+
+.iot-context-menu-option:hover {
+  background-color: var(--colors-blue);
+}
+
+.iot-context-menu-option-disabled {
+  color: var(--colors-light-grey);
+  cursor: not-allowed;
+}