From fda903d58aad7fb91fa3da0829530e1d9b2725c8 Mon Sep 17 00:00:00 2001
From: weareoutman <wangshenwei@qq.com>
Date: Tue, 10 Oct 2023 10:27:57 +0800
Subject: [PATCH] fix: refresh brick info

---
 src/panel/components/PropView.tsx             |  2 +-
 .../components/SelectedBrickToolbar.spec.tsx  | 19 ++++++++++++++++---
 src/panel/components/SelectedBrickToolbar.tsx |  9 ++++++++-
 3 files changed, 25 insertions(+), 5 deletions(-)

diff --git a/src/panel/components/PropView.tsx b/src/panel/components/PropView.tsx
index 70c283a..5bdf287 100644
--- a/src/panel/components/PropView.tsx
+++ b/src/panel/components/PropView.tsx
@@ -124,7 +124,7 @@ export function PropView(): React.ReactElement {
                 <PropList
                   list={brickInfo[key]}
                   overrideProps={overrideProps}
-                  editable={key !== "events"}
+                  editable={key !== "events" && key !== "tplState"}
                 />
               </div>
             </React.Fragment>
diff --git a/src/panel/components/SelectedBrickToolbar.spec.tsx b/src/panel/components/SelectedBrickToolbar.spec.tsx
index 533a81a..8f528ee 100644
--- a/src/panel/components/SelectedBrickToolbar.spec.tsx
+++ b/src/panel/components/SelectedBrickToolbar.spec.tsx
@@ -6,7 +6,11 @@ import { useSelectedBrickContext } from "../libs/SelectedBrickContext";
 
 jest.mock("../libs/SelectedBrickContext");
 
-(useSelectedBrickContext as jest.Mock).mockReturnValue({ selectedBrick: null });
+const setSelectedBrick = jest.fn();
+(useSelectedBrickContext as jest.Mock).mockReturnValue({
+  selectedBrick: null,
+  setSelectedBrick,
+});
 
 const mockEval = jest.fn();
 
@@ -33,20 +37,29 @@ describe("SelectedBrickToolbar", () => {
       uid: 1,
       tagName: "your.awesome-brick",
     };
-    (useSelectedBrickContext as jest.Mock).mockReturnValue({ selectedBrick });
+    (useSelectedBrickContext as jest.Mock).mockReturnValue({
+      selectedBrick,
+      setSelectedBrick,
+    });
 
     const wrapper = shallow(<SelectedBrickToolbar />);
 
     expect(wrapper.find(".brick-title").text()).toBe("your.awesome-brick");
 
     wrapper.find(Button).at(0).invoke("onClick")(null);
+    expect(setSelectedBrick).toBeCalledWith({
+      uid: 1,
+      tagName: "your.awesome-brick",
+    });
+
+    wrapper.find(Button).at(1).invoke("onClick")(null);
     expect(mockEval).toHaveBeenNthCalledWith(
       1,
       "inspect(window.__BRICK_NEXT_DEVTOOLS_HOOK__.getBrickByUid(1));",
       {}
     );
 
-    wrapper.find(Button).at(1).invoke("onClick")(null);
+    wrapper.find(Button).at(2).invoke("onClick")(null);
     expect(mockEval).toHaveBeenNthCalledWith(
       2,
       "inspect(window.__BRICK_NEXT_DEVTOOLS_HOOK__.getBrickByUid(1).constructor);",
diff --git a/src/panel/components/SelectedBrickToolbar.tsx b/src/panel/components/SelectedBrickToolbar.tsx
index 4b85518..8f91948 100644
--- a/src/panel/components/SelectedBrickToolbar.tsx
+++ b/src/panel/components/SelectedBrickToolbar.tsx
@@ -6,7 +6,7 @@ import { useSelectedBrickContext } from "../libs/SelectedBrickContext";
 import { useEvalOptions } from "../libs/useEvalOptions";
 
 export function SelectedBrickToolbar(): React.ReactElement {
-  const { selectedBrick } = useSelectedBrickContext();
+  const { selectedBrick, setSelectedBrick } = useSelectedBrickContext();
   const evalOptions = useEvalOptions();
 
   const handleInspectElement = React.useCallback((): void => {
@@ -23,6 +23,10 @@ export function SelectedBrickToolbar(): React.ReactElement {
     );
   }, [evalOptions, selectedBrick]);
 
+  const handleRefreshBrickInfo = React.useCallback(() => {
+    setSelectedBrick({ ...selectedBrick });
+  }, [selectedBrick, setSelectedBrick]);
+
   return (
     <div className="selected-brick-toolbar">
       {selectedBrick && (
@@ -36,6 +40,9 @@ export function SelectedBrickToolbar(): React.ReactElement {
             {selectedBrick.tagName}
           </span>
           <ButtonGroup>
+            <Tooltip content="Refresh brick info" hoverOpenDelay={300}>
+              <Button icon="refresh" minimal onClick={handleRefreshBrickInfo} />
+            </Tooltip>
             <Tooltip content="Inspect the brick element" hoverOpenDelay={300}>
               <Button icon="eye-open" minimal onClick={handleInspectElement} />
             </Tooltip>