Add a custom workflow panel component.

package.json

@@ -17,7 +17,7 @@
     "prettier": "^2.6.1",
     "rollup": "^2.70.1",
     "rollup-plugin-terser": "^7.0.2",
-    "terriajs": "8.1.26",
+    "terriajs": "8.2.3",
     "tslib": "^2.3.1",
     "typescript": "^3.9.4"
   }

src/TestTool.tsx

@@ -0,0 +1,25 @@
+import { observer } from "mobx-react";
+import React from "react";
+import { Icon, ViewState } from "terriajs-plugin-api";
+import WorkflowPanel from "terriajs/lib/ReactViews/Workflow/WorkflowPanel";
+
+interface PropsType {
+  viewState: ViewState;
+}
+
+// Note: we need to wrap this in observer() right now or else it results in a render loop.
+// Will have to debug that later.
+const TestTool: React.FC<PropsType> = observer((props: PropsType) => {
+  return (
+    <WorkflowPanel
+      viewState={props.viewState}
+      title="Test tool"
+      icon={Icon.GLYPHS.cube}
+      closeButtonText="Close"
+      onClose={() => {props.viewState.closeTool()}}>
+      <p>Hello, world</p>
+    </WorkflowPanel>
+  );
+});
+
+export default TestTool;

src/index.ts

@@ -11,6 +11,7 @@ import {
   Workbench
 } from "terriajs-plugin-api";
 import BoxDrawingCatalogItem from "./BoxDrawingCatalogItem";
+import TestTool from "./TestTool";
 
 const plugin: TerriaPlugin = {
   name: "Sample plugin",
@@ -22,11 +23,16 @@ const plugin: TerriaPlugin = {
       icon: Icon.GLYPHS.cube,
       text: "Draw a 3D box",
       onUserEnterMode: () => {
-        userDrawing = createUserRectangleDrawing(terria, rectangle => {
-          create3dBoxItemFromRectangle(terria, workbench, rectangle);
-          drawModeButton.closeMode();
+        // userDrawing = createUserRectangleDrawing(terria, rectangle => {
+        //   create3dBoxItemFromRectangle(terria, workbench, rectangle);
+        //   drawModeButton.closeMode();
+        // });
+        // userDrawing.enterDrawMode();
+        viewState.openTool({
+          toolName: "My Tool",
+          getToolComponent: () => TestTool,
+          showCloseButton: false
         });
-        userDrawing.enterDrawMode();
       },
       onUserCloseMode: () => {
         userDrawing?.endDrawing();