Merge pull request #1180 from buster-so/big-nate-bus-1967-closing-and-reopening-a-dashboard-in-chat-adds-a-large-blank

Big nate bus 1967 closing and reopening a dashboard in chat adds a large blank

apps/web/src/api/buster_rest/dashboards/queries/useGetDashboard.ts

@@ -80,8 +80,9 @@ export const usePrefetchGetDashboardClient = <TData = GetDashboardResponse>(
   params?: Omit<UseQueryOptions<GetDashboardResponse, RustApiError, TData>, 'queryKey' | 'queryFn'>
 ) => {
   const queryClient = useQueryClient();
-  return useMemoizedFn((id: string, versionNumber: number | 'LATEST') => {
   const queryFn = useGetDashboardAndInitializeMetrics({ prefetchData: false });
+
+  return useMemoizedFn((id: string, versionNumber: number | 'LATEST') => {
     const getDashboardQueryKey = dashboardQueryKeys.dashboardGetDashboard(id, versionNumber);
     const isStale = isQueryStale(getDashboardQueryKey, queryClient) || params?.staleTime === 0;
     if (!isStale) return;

apps/web/src/components/ui/inputs/InputTextArea.tsx

@@ -1,9 +1,7 @@
-import { ClientOnly } from '@tanstack/react-router';
 import { cva, type VariantProps } from 'class-variance-authority';
-import React, { useEffect, useRef } from 'react';
+import React, { useImperativeHandle, useRef } from 'react';
 import TextareaAutosize, { type TextareaAutosizeProps } from 'react-textarea-autosize';
 import { cn } from '@/lib/classMerge';
-import { useMounted } from '../../../hooks/useMount';
 import { inputVariants } from './Input';
 
 const inputTextAreaVariants = inputVariants;
@@ -30,7 +28,11 @@ export interface InputTextAreaProps
   onPressEnter?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
 }
 
-export const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextAreaProps>(
+export interface InputTextAreaRef {
+  forceRecalculateHeight: () => void;
+}
+
+export const InputTextArea = React.forwardRef<InputTextAreaRef, InputTextAreaProps>(
   (
     {
       className,
@@ -46,14 +48,19 @@ export const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextArea
   ) => {
     const textareaRef = useRef<HTMLTextAreaElement | null>(null);
 
-    const combinedRef = (node: HTMLTextAreaElement) => {
-      textareaRef.current = node;
-      if (typeof ref === 'function') {
-        ref(node);
-      } else if (ref) {
-        ref.current = node;
+    useImperativeHandle(
+      ref,
+      () => ({
+        forceRecalculateHeight: () => {
+          if (textareaRef.current) {
+            // Force a recalculation by triggering an input event
+            const event = new Event('input', { bubbles: true });
+            textareaRef.current.dispatchEvent(event);
           }
-    };
+        },
+      }),
+      []
+    );
 
     const handleKeyDown = (e: React.KeyboardEvent<HTMLTextAreaElement>) => {
       if (e.key === 'Enter') {
@@ -70,16 +77,16 @@ export const InputTextArea = React.forwardRef<HTMLTextAreaElement, InputTextArea
 
     return (
       <TextareaAutosize
-        ref={combinedRef}
+        ref={textareaRef}
         className={cn(
           inputTextAreaVariants({ variant }),
           textAreaVariants({ rounding }),
           'px-2.5 py-2.5 resize-none! box-border',
           className
         )}
-        value={props.value}
         onKeyDown={handleKeyDown}
         style={style as Omit<React.CSSProperties, 'height'>}
+        cacheMeasurements={false}
         {...props}
       />
     );

apps/web/src/controllers/DashboardController/DashboardViewDashboardController/DashboardEditTitle.tsx

@@ -1,8 +1,10 @@
-import React, { useRef } from 'react';
+import React, { useEffect, useRef } from 'react';
 import { useUpdateDashboard } from '@/api/buster_rest/dashboards';
-import { InputTextArea } from '@/components/ui/inputs/InputTextArea';
+import { InputTextArea, type InputTextAreaRef } from '@/components/ui/inputs/InputTextArea';
 import { EditableTitle } from '@/components/ui/typography/EditableTitle';
+import { useDebounce } from '@/hooks/useDebounce';
 import { useMount } from '@/hooks/useMount';
+import { useSize } from '@/hooks/useSize';
 
 export const DASHBOARD_TITLE_INPUT_ID = (dashboardId: string) => `${dashboardId}-title-input`;
 
@@ -15,6 +17,9 @@ export const DashboardEditTitles: React.FC<{
   dashboardId: string;
 }> = React.memo(({ readOnly, title, description, dashboardId }) => {
   const titleRef = useRef<HTMLInputElement>(null);
+  const inputTextAreaRef = useRef<InputTextAreaRef>(null);
+  const size = useSize(titleRef);
+  const debouncedWidth = useDebounce(size?.width, { wait: 50, maxWait: 85 });
   const { mutateAsync: onUpdateDashboard } = useUpdateDashboard({
     saveToServer: false,
   });
@@ -37,6 +42,12 @@ export const DashboardEditTitles: React.FC<{
     }
   });
 
+  useEffect(() => {
+    if (debouncedWidth) {
+      inputTextAreaRef.current?.forceRecalculateHeight();
+    }
+  }, [debouncedWidth]);
+
   return (
     <div className="flex flex-col space-y-1.5">
       <EditableTitle
@@ -54,8 +65,9 @@ export const DashboardEditTitles: React.FC<{
 
       {(description || !readOnly) && (
         <InputTextArea
+          ref={inputTextAreaRef}
           variant="ghost"
-          readOnly={readOnly}
+          readOnly={false}
           onChange={onChangeDashboardDescription}
           value={description}
           minRows={1}

apps/web/src/layouts/ChatLayout/ChatContent/ChatInput/ChatInput.tsx

@@ -41,7 +41,7 @@ export const ChatInput: React.FC = React.memo(() => {
   useEffect(() => {
     if (hasChat) {
       requestAnimationFrame(() => {
-        textAreaRef.current?.focus();
+        textAreaRef.current?.focus?.();
       });
     }
   }, [hasChat, textAreaRef]);