From 5926e4fce44352de36912ecc9da6500703e55a7d Mon Sep 17 00:00:00 2001
From: Nanda <nanda.sankaran@gmail.com>
Date: Fri, 6 May 2022 15:34:54 +1000
Subject: [PATCH 1/2] Add a custom workflow panel component.

---
 package.json     |  2 +-
 src/TestTool.tsx | 23 +++++++++++++++++++++++
 src/index.ts     | 14 ++++++++++----
 3 files changed, 34 insertions(+), 5 deletions(-)
 create mode 100644 src/TestTool.tsx

diff --git a/package.json b/package.json
index 2022b46..26b2e6d 100644
--- a/package.json
+++ b/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"
   }
diff --git a/src/TestTool.tsx b/src/TestTool.tsx
new file mode 100644
index 0000000..ee61116
--- /dev/null
+++ b/src/TestTool.tsx
@@ -0,0 +1,23 @@
+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;
+}
+
+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;
diff --git a/src/index.ts b/src/index.ts
index 373ee1f..02f8364 100644
--- a/src/index.ts
+++ b/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();

From 1bf78dba2b18e92d1dd4a8f753ef547f7f2f451e Mon Sep 17 00:00:00 2001
From: Nanda <nanda.sankaran@gmail.com>
Date: Fri, 6 May 2022 15:41:06 +1000
Subject: [PATCH 2/2] Add note.

---
 src/TestTool.tsx | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/src/TestTool.tsx b/src/TestTool.tsx
index ee61116..d22948a 100644
--- a/src/TestTool.tsx
+++ b/src/TestTool.tsx
@@ -7,6 +7,8 @@ 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