feat(console): animate inspector panel sections when opening and clos…

…ing (#6909)

Adds smooth transitions for the inspector panel sections.

Also, sets a default transition duration of 1.5s, which is the default `tailwindcss` transition duration.

Lastly, fixes a small type issue inside the `@wingconsole/ui` package.

apps/wing-console/console/design-system/src/headless/tree-item.tsx

@@ -169,7 +169,6 @@ export const TreeItem = ({
         initial={{ opacity: 0, height: 0 }}
         animate={{ opacity: expanded ? 1 : 0, height: expanded ? "auto" : 0 }}
         exit={{ opacity: 0, height: 0 }}
-        transition={{ duration: 0.15 }}
       >
         <treeItemContext.Provider
           value={{ itemId, indentation: indentation + 1 }}

apps/wing-console/console/design-system/src/inspector-section.tsx

@@ -1,4 +1,5 @@
-import type { PropsWithChildren } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { useEffect, useState, type PropsWithChildren } from "react";
 
 import { InspectorSectionHeading } from "./inspector-section-heading.js";
 import type { IconComponent } from "./resource-icon.js";
@@ -23,6 +24,10 @@ export const InspectorSection = ({
   bold = true,
   headingClassName,
 }: PropsWithChildren<InspectorSectionProps>) => {
+  const [initialRender, setInitialRender] = useState(true);
+  useEffect(() => {
+    setInitialRender(false);
+  }, []);
   return (
     <>
       <InspectorSectionHeading
@@ -34,7 +39,19 @@ export const InspectorSection = ({
         className={headingClassName}
         bold={bold}
       />
-      {open && children}
+      <AnimatePresence>
+        {open && (
+          <motion.div
+            role="group"
+            style={{ overflow: "hidden" }}
+            initial={initialRender ? undefined : { opacity: 0, height: 0 }}
+            animate={{ opacity: 1, height: "auto" }}
+            exit={{ opacity: 0, height: 0 }}
+          >
+            {children}
+          </motion.div>
+        )}
+      </AnimatePresence>
     </>
   );
 };

apps/wing-console/console/ui/src/App.tsx

@@ -6,6 +6,7 @@ import {
 } from "@wingconsole/design-system";
 import type { Trace } from "@wingconsole/server";
 import { PersistentStateProvider } from "@wingconsole/use-persistent-state";
+import { MotionConfig } from "framer-motion";
 
 import type { LayoutType } from "./features/layout/layout-provider.js";
 import { LayoutProvider } from "./features/layout/layout-provider.js";
@@ -51,14 +52,16 @@ export const App = ({ layout, theme, color, onTrace }: AppProps) => {
         <TestsContextProvider>
           <SelectionContextProvider>
             <PersistentStateProvider>
-              <LayoutProvider
-                layoutType={layout}
-                layoutProps={{
-                  cloudAppState: appState.data ?? "compiling",
-                  wingVersion: appDetails.data?.wingVersion,
-                  layoutConfig: layoutConfig.data?.config,
-                }}
-              />
+              <MotionConfig transition={{ duration: 0.15 }}>
+                <LayoutProvider
+                  layoutType={layout}
+                  layoutProps={{
+                    cloudAppState: appState.data ?? "compiling",
+                    wingVersion: appDetails.data?.wingVersion,
+                    layoutConfig: layoutConfig.data?.config,
+                  }}
+                />
+              </MotionConfig>
             </PersistentStateProvider>
           </SelectionContextProvider>
         </TestsContextProvider>

apps/wing-console/console/ui/src/features/explorer-pane/zoom-pane.tsx

@@ -505,7 +505,6 @@ export const ZoomPane = forwardRef<ZoomPaneRef, ZoomPaneProps>((props, ref) => {
             initial={{ opacity: 0 }}
             animate={{ opacity: 1 }}
             exit={{ opacity: 0 }}
-            transition={{ duration: 0.15 }}
           >
             <div
               className={classNames(

apps/wing-console/console/ui/src/features/inspector-pane/resource-panes/resource-metadata.tsx

@@ -16,7 +16,6 @@ import {
 import type { NodeDisplay } from "@wingconsole/server";
 import type { ResourceRunningState } from "@winglang/sdk/lib/simulator/simulator.js";
 import classNames from "classnames";
-import type { FunctionComponent } from "react";
 import { memo, useCallback, useMemo, useState } from "react";
 
 import { trpc } from "../../../trpc.js";
@@ -30,26 +29,6 @@ import { QueueMetadataView } from "./queue-metadata-view.js";
 import { ResourceInteractionView } from "./resource-interaction-view.js";
 import { ScheduleMetadata } from "./schedule-metadata.js";
 
-const runningStateToText = (runningState: ResourceRunningState) => {
-  switch (runningState) {
-    case "error": {
-      return "Error";
-    }
-    case "started": {
-      return "Started";
-    }
-    case "starting": {
-      return "Starting";
-    }
-    case "stopped": {
-      return "Stopped";
-    }
-    case "stopping": {
-      return "Stopping";
-    }
-  }
-};
-
 interface AttributeGroup {
   groupName: string;
   actionName?: string;
@@ -83,7 +62,7 @@ export interface MetadataNode {
         [key: string]: any;
       }
     | undefined;
-  hierarchichalRunningState: ResourceRunningState;
+  hierarchichalRunningState?: ResourceRunningState | undefined;
 }
 
 export interface MetadataProps {

apps/wing-console/console/ui/src/features/running-state-indicator/running-state-indicator.tsx

@@ -3,7 +3,7 @@ import classNames from "classnames";
 import { useMemo, type FunctionComponent } from "react";
 
 export interface RunningStateIndicatorProps {
-  runningState: ResourceRunningState;
+  runningState: ResourceRunningState | undefined;
   className?: string;
 }