Change active tab to preview for form builder nodes (#1456)

* change active tab to preview for form nodes * use instance id for data panel key Co-authored-by: Ben Loe <[email protected]>
pixiebrix · Sep 24, 2021 · d6a29a6 · d6a29a6
1 parent 0f63eed
commit d6a29a6
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 11 deletions.
diff --git a/src/devTools/editor/tabs/editTab/EditTab.tsx b/src/devTools/editor/tabs/editTab/EditTab.tsx
@@ -191,6 +191,8 @@ const EditTab: React.FC<{
     [onSelectNode, pipelineFieldHelpers, blockPipeline]
   );
 
+  const blockInstanceId = blockPipeline[activeNodeIndex - 1]?.instanceId;
+
   return (
     <Tab.Pane eventKey={eventKey} className={styles.tabPane}>
       <div className={styles.paneContent}>
@@ -237,9 +239,9 @@ const EditTab: React.FC<{
         </div>
         <div className={styles.dataPanel}>
           <DataPanel
+            key={blockInstanceId}
             blockFieldName={blockFieldName}
-            // eslint-disable-next-line security/detect-object-injection
-            instanceId={blockPipeline[activeNodeIndex - 1]?.instanceId}
+            instanceId={blockInstanceId}
           />
         </div>
       </div>

diff --git a/src/devTools/editor/tabs/editTab/dataPanel/DataPanel.tsx b/src/devTools/editor/tabs/editTab/dataPanel/DataPanel.tsx
@@ -15,7 +15,7 @@
  * along with this program.  If not, see <http://www.gnu.org/licenses/>.
  */
 
-import React, { useCallback, useContext, useMemo, useState } from "react";
+import React, { useContext, useMemo } from "react";
 import { UUID } from "@/core";
 import useInterval from "@/hooks/useInterval";
 import { isEmpty, pickBy, sortBy } from "lodash";
@@ -164,16 +164,9 @@ const DataPanel: React.FC<{
     (record && blockConfig) || previewInfo?.traceOptional;
 
   const defaultKey = showFormPreview ? "preview" : "output";
-  const [activeTabKey, setActiveTabKey] = useState<string>(defaultKey);
-  const handleSelect = useCallback(
-    (eventKey: string) => {
-      setActiveTabKey(eventKey);
-    },
-    [setActiveTabKey]
-  );
 
   return (
-    <Tab.Container activeKey={activeTabKey} onSelect={handleSelect}>
+    <Tab.Container defaultActiveKey={defaultKey}>
       <Nav variant="tabs">
         <Nav.Item className={styles.tabNav}>
           <Nav.Link eventKey="context">Context</Nav.Link>