[#187811193] Adds non-functional ui for graph camera menu (#1330)

* Adds non-functional ui for graph camera menu

* adds testids to menu items

v3/src/components/graph/components/camera-menu-list.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react"
+import { MenuItem, MenuList } from "@chakra-ui/react"
+import { t } from "../../../utilities/translation/translate"
+
+export const CameraMenuList = () => {
+  const [hasBackgroundImage, setHasBackgroundImage] = useState(false)
+  const [imageLocked, setImageLocked] = useState(false)
+
+  const handleAddBackgroundImage = () => {
+    setHasBackgroundImage(true)
+  }
+
+  const handleRemoveBackgroundImage = () => {
+    setHasBackgroundImage(false)
+  }
+
+  const handleUnlockImage = () => {
+    setImageLocked(false)
+  }
+
+  const handleLockImage = () => {
+    setImageLocked(true)
+  }
+
+  return (
+    <MenuList data-testid="graph-camera-menu-list">
+      {hasBackgroundImage
+        ? <>
+            <MenuItem onClick={handleRemoveBackgroundImage} data-testid="remove-background-image">
+              {t("DG.DataDisplayMenu.removeBackgroundImage")}
+            </MenuItem>
+            {imageLocked
+              ? <MenuItem onClick={handleUnlockImage} data-testid="unlock-image">
+                  {t("DG.DataDisplayMenu.unlockImageFromAxes")}
+                </MenuItem>
+              : <MenuItem onClick={handleLockImage} data-testid="lock-image">
+                  {t("DG.DataDisplayMenu.lockImageToAxes")}
+                </MenuItem>
+            }
+          </>
+        : <MenuItem onClick={handleAddBackgroundImage} data-testid="add-background-image">
+            {t("DG.DataDisplayMenu.addBackgroundImage")}
+          </MenuItem>
+      }
+      <MenuItem data-testid="open-in-draw-tool">{t("DG.DataDisplayMenu.copyAsImage")}</MenuItem>
+      <MenuItem data-testid="export-png-image">{t("DG.DataDisplayMenu.exportPngImage")}</MenuItem>
+      <MenuItem data-testid="export-svg-image">{t("DG.DataDisplayMenu.exportSvgImage")}</MenuItem>
+    </MenuList>
+  )
+}

v3/src/components/graph/components/graph-inspector.tsx

@@ -15,6 +15,7 @@ import {useDndContext} from "@dnd-kit/core"
 import {ITileInspectorPanelProps} from "../../tiles/tile-base-props"
 import {isGraphContentModel} from "../models/graph-content-model"
 import { DisplayConfigPalette } from "./inspector-panel/display-config-palette"
+import { CameraMenuList } from "./camera-menu-list"
 
 
 export const GraphInspector = observer(function GraphInspector({tile, show}: ITileInspectorPanelProps) {
@@ -101,10 +102,10 @@ export const GraphInspector = observer(function GraphInspector({tile, show}: ITi
                        testId={"graph-display-styles-button"}>
         <StylesIcon/>
       </InspectorButton>
-      <InspectorButton tooltip={t("DG.Inspector.makeImage.toolTip")} showMoreOptions={true}
-                       testId={"graph-camera-button"}>
-        <CameraIcon/>
-      </InspectorButton>
+      <InspectorMenu tooltip={t("DG.Inspector.makeImage.toolTip")} icon={<CameraIcon/>}
+                     onButtonClick={handleClosePalette} testId={"graph-camera-button"}>
+        <CameraMenuList/>
+      </InspectorMenu>
       {showPalette === "measure" &&
         <GraphMeasurePalette tile={tile} setShowPalette={setShowPalette}
                              panelRect={panelRect} buttonRect={buttonRect}/>}