Reopen Context Panel When a Node is Selected (#1442)

## Description

<!-- Please provide a brief description of the changes made in this pull request. Include any relevant context or reasoning for the changes. -->
Right-side context panel will automatically re-open if collapsed and a node is selected.

## Related Issue and Pull requests

<!-- Link to any related issues using the format #<issue-number> -->
Closes Shopify/oasis-frontend#355

## Type of Change

<!-- Please delete options that are not relevant -->

- [x] Bug fix
- [x] Improvement

## Checklist

<!-- Please ensure the following are completed before submitting the PR -->

- [ ] I have tested this does not break current pipelines / runs functionality
- [ ] I have tested the changes on staging

## Screenshots (if applicable)

<!-- Include any screenshots that might help explain the changes or provide visual context -->

## Test Instructions

<!-- Detail steps and prerequisites for testing the changes in this PR -->

## Additional Comments

<!-- Add any additional context or information that reviewers might need to know regarding this PR -->

Author: camielvs

src/components/shared/ContextPanel/CollapsibleContextPanel.tsx

@@ -1,5 +1,3 @@
-import { useState } from "react";
-
 import { Button } from "@/components/ui/button";
 import {
   Collapsible,
@@ -8,21 +6,16 @@ import {
 } from "@/components/ui/collapsible";
 import { Icon } from "@/components/ui/icon";
 import { VerticalResizeHandle } from "@/components/ui/resize-handle";
+import { useContextPanel } from "@/providers/ContextPanelProvider";
 
 import { ContextPanel } from "./ContextPanel";
 
 const MIN_WIDTH = 200;
 const MAX_WIDTH = 600;
 const DEFAULT_WIDTH = 400;
 
-interface CollapsibleContextPanelProps {
-  defaultOpen?: boolean;
-}
-
-export function CollapsibleContextPanel({
-  defaultOpen = true,
-}: CollapsibleContextPanelProps = {}) {
-  const [open, setOpen] = useState(defaultOpen);
+export function CollapsibleContextPanel() {
+  const { open, setOpen } = useContextPanel();
 
   return (
     <Collapsible open={open} onOpenChange={setOpen} className="h-full">

src/components/shared/ReactFlow/FlowCanvas/IONode/IONode.tsx

@@ -30,7 +30,11 @@ interface IONodeProps {
 const IONode = ({ type, data, selected = false }: IONodeProps) => {
   const { currentGraphSpec, currentSubgraphSpec, currentSubgraphPath } =
     useComponentSpec();
-  const { setContent, clearContent } = useContextPanel();
+  const {
+    setContent,
+    clearContent,
+    setOpen: setContextPanelOpen,
+  } = useContextPanel();
 
   const isInput = type === "input";
   const isOutput = type === "output";
@@ -87,6 +91,8 @@ const IONode = ({ type, data, selected = false }: IONodeProps) => {
           />,
         );
       }
+
+      setContextPanelOpen(true);
     }
 
     return () => {

src/components/shared/ReactFlow/FlowCanvas/TaskNode/TaskNodeCard/TaskNodeCard.tsx

@@ -41,7 +41,11 @@ const TaskNodeCard = () => {
   const isInAppEditorEnabled = useBetaFlagValue("in-app-component-editor");
   const { registerNode } = useNodesOverlay();
   const taskNode = useTaskNode();
-  const { setContent, clearContent } = useContextPanel();
+  const {
+    setContent,
+    clearContent,
+    setOpen: setContextPanelOpen,
+  } = useContextPanel();
   const { navigateToSubgraph } = useComponentSpec();
   const executionData = useExecutionDataOptional();
   const rootExecutionId = executionData?.rootExecutionId;
@@ -239,14 +243,21 @@ const TaskNodeCard = () => {
   useEffect(() => {
     if (selected && !isDragging) {
       setContent(taskConfigMarkup);
+      setContextPanelOpen(true);
     }
 
     return () => {
       if (selected) {
         clearContent();
       }
     };
-  }, [selected, taskConfigMarkup, setContent, clearContent]);
+  }, [
+    selected,
+    taskConfigMarkup,
+    setContent,
+    clearContent,
+    setContextPanelOpen,
+  ]);
 
   if (!taskSpec) {
     return null;

src/providers/ContextPanelProvider.tsx

@@ -16,8 +16,10 @@ import {
 
 type ContextPanelContextType = {
   content: ReactNode;
+  open: boolean;
   setContent: (content: ReactNode) => void;
   clearContent: () => void;
+  setOpen: (open: boolean) => void;
 };
 
 const ContextPanelContext = createRequiredContext<ContextPanelContextType>(
@@ -38,7 +40,9 @@ export const ContextPanelProvider = ({
   children: ReactNode;
 }) => {
   const { setNodes } = useReactFlow();
+
   const [content, setContentState] = useState<ReactNode>(defaultContent);
+  const [open, setOpen] = useState(true);
 
   const setContent = useCallback((content: ReactNode) => {
     setContentState(content);
@@ -64,8 +68,8 @@ export const ContextPanelProvider = ({
   }, [defaultContent]);
 
   const value = useMemo(
-    () => ({ content, setContent, clearContent }),
-    [content, setContent, clearContent],
+    () => ({ content, open, setContent, clearContent, setOpen }),
+    [content, open, setContent, clearContent, setOpen],
   );
 
   return (