Merge pull request #89 from easyops-cn/steve/refresh-brick-info

fix: refresh brick info
easyops-cn · Oct 10, 2023 · b33e0aa · b33e0aa
2 parents ff5c436 + fda903d
commit b33e0aa
Show file tree

Hide file tree

Showing 3 changed files with 25 additions and 5 deletions.
diff --git 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
@@ -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
@@ -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>