feat: allow toggling code/result visibility in non-editable blocks

vieiralucas · vieiralucas · commit 80edcbb919eb · 2025-03-11T14:16:57.000-03:00
- Add local state management for code and result visibility in non-editable blocks
- Remove dependency on isEditable prop for visibility toggle buttons
- Maintain dashboard mode controls while supporting local visibility state
- Clean up unused isEditable prop from ExecutionStatusText components

This change allows users to toggle code and result visibility even when blocks
are not editable, storing the state locally instead of persisting it to the block.
diff --git a/apps/web/src/components/ExecutionStatusText.tsx b/apps/web/src/components/ExecutionStatusText.tsx
@@ -3,28 +3,54 @@ import {
   CheckCircleIcon,
   CloudArrowDownIcon,
   Cog8ToothIcon,
+  CheckIcon,
+  ChevronRightIcon,
+  ChevronDownIcon,
 } from '@heroicons/react/20/solid'
 import { useEffect, useState } from 'react'
+import clsx from 'clsx'
+
+function formatExecutionTime(time: string): string {
+  return format(new Date(time), 'h:mm a - do MMM, yyyy')
+}
 
 type StartExecutionStatusTextProps = {
   startExecutionTime: string | null
 }
 
-type LastExecutedStatusTextProps = {
+interface LastExecutedStatusTextProps {
   lastExecutionTime: string
+  isResultHidden: boolean
+  onToggleResultHidden: () => void
 }
 
-export const QuerySucceededText = ({
+export function QuerySucceededText({
   lastExecutionTime,
-}: LastExecutedStatusTextProps) => {
+  isResultHidden,
+  onToggleResultHidden,
+}: LastExecutedStatusTextProps) {
   return (
-    <span className="font-syne text-gray-300 text-xs flex items-center select-none">
-      <CheckCircleIcon className="w-4 h-4 mr-1" />
-      <span className="pt-0.5">
-        This query was last executed at{' '}
-        {format(new Date(lastExecutionTime), "h:mm a '-' do MMM, yyyy")}
-      </span>
-    </span>
+    <div className="flex items-center gap-x-1 text-gray-400">
+      <div className="relative group w-4 h-4">
+        <CheckCircleIcon
+          className={clsx(
+            'absolute inset-0 h-4 w-4',
+            'group-hover:opacity-0 transition-opacity'
+          )}
+        />
+        <button
+          className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
+          onClick={onToggleResultHidden}
+        >
+          {isResultHidden ? (
+            <ChevronRightIcon className="h-4 w-4" />
+          ) : (
+            <ChevronDownIcon className="h-4 w-4" />
+          )}
+        </button>
+      </div>
+      <span>Succeeded in {formatExecutionTime(lastExecutionTime)}</span>
+    </div>
   )
 }
 
@@ -95,16 +121,32 @@ export const ExecutingPythonText = ({
   )
 }
 
-export const PythonSucceededText = ({
+export function PythonSucceededText({
   lastExecutionTime,
-}: LastExecutedStatusTextProps) => {
+  isResultHidden,
+  onToggleResultHidden,
+}: LastExecutedStatusTextProps) {
   return (
-    <span className="font-syne text-gray-300 text-xs flex items-center select-none">
-      <CheckCircleIcon className="w-4 h-4 mr-1" />
-      <span className="pt-0.5">
-        This code was last executed at{' '}
-        {format(new Date(lastExecutionTime), "h:mm a '-' do MMM, yyyy")}
-      </span>
-    </span>
+    <div className="flex items-center gap-x-1 text-gray-400">
+      <div className="relative group w-4 h-4">
+        <CheckCircleIcon
+          className={clsx(
+            'absolute inset-0 h-4 w-4',
+            'group-hover:opacity-0 transition-opacity'
+          )}
+        />
+        <button
+          className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
+          onClick={onToggleResultHidden}
+        >
+          {isResultHidden ? (
+            <ChevronRightIcon className="h-4 w-4" />
+          ) : (
+            <ChevronDownIcon className="h-4 w-4" />
+          )}
+        </button>
+      </div>
+      <span>Succeeded in {formatExecutionTime(lastExecutionTime)}</span>
+    </div>
   )
 }
diff --git a/apps/web/src/components/v2Editor/customBlocks/python/index.tsx b/apps/web/src/components/v2Editor/customBlocks/python/index.tsx
@@ -25,7 +25,7 @@ import {
 import clsx from 'clsx'
 import type { ApiDocument, ApiWorkspace } from '@briefer/database'
 import { useEnvironmentStatus } from '@/hooks/useEnvironmentStatus'
-import { RefObject, useCallback, useMemo } from 'react'
+import { RefObject, useCallback, useMemo, useState } from 'react'
 import {
   ExecutingPythonText,
   LoadingEnvText,
@@ -91,19 +91,39 @@ function PythonBlock(props: Props) {
     startedAt: environmentStartedAt,
   } = useEnvironmentStatus(props.document.workspaceId)
 
+  const [localResultHidden, setLocalResultHidden] = useState<boolean | null>(
+    null
+  )
+
   const toggleResultHidden = useCallback(() => {
-    props.block.doc?.transact(() => {
-      const currentIsResultHidden = props.block.getAttribute('isResultHidden')
-      props.block.setAttribute('isResultHidden', !currentIsResultHidden)
-    })
-  }, [props.block])
+    if (props.isEditable) {
+      props.block.doc?.transact(() => {
+        const currentIsResultHidden = props.block.getAttribute('isResultHidden')
+        props.block.setAttribute('isResultHidden', !currentIsResultHidden)
+      })
+    } else {
+      setLocalResultHidden((prev) => {
+        const blockResultHidden = props.block.getAttribute('isResultHidden')
+        return prev === null ? !blockResultHidden : !prev
+      })
+    }
+  }, [props.block, props.isEditable])
+
+  const [localCodeHidden, setLocalCodeHidden] = useState<boolean | null>(null)
 
   const toggleCodeHidden = useCallback(() => {
-    props.block.doc?.transact(() => {
-      const currentIsCodeHidden = props.block.getAttribute('isCodeHidden')
-      props.block.setAttribute('isCodeHidden', !currentIsCodeHidden)
-    })
-  }, [props.block])
+    if (props.isEditable) {
+      props.block.doc?.transact(() => {
+        const currentIsCodeHidden = props.block.getAttribute('isCodeHidden')
+        props.block.setAttribute('isCodeHidden', !currentIsCodeHidden)
+      })
+    } else {
+      setLocalCodeHidden((prev) => {
+        const blockCodeHidden = props.block.getAttribute('isCodeHidden')
+        return prev === null ? !blockCodeHidden : !prev
+      })
+    }
+  }, [props.block, props.isEditable])
 
   const executions = useBlockExecutions(
     props.executionQueue,
@@ -189,12 +209,34 @@ function PythonBlock(props: Props) {
   const startQueryTime = props.block.getAttribute('startQueryTime')
   const lastQueryTime = props.block.getAttribute('lastQueryTime')
 
+  const isCodeHidden =
+    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode)) &&
+    (props.isEditable
+      ? props.block.getAttribute('isCodeHidden') ?? false
+      : localCodeHidden === null
+      ? props.block.getAttribute('isCodeHidden') ?? false
+      : localCodeHidden)
+
+  const isResultHidden =
+    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode)) &&
+    (props.isEditable
+      ? props.block.getAttribute('isResultHidden') ?? false
+      : localResultHidden === null
+      ? props.block.getAttribute('isResultHidden') ?? false
+      : localResultHidden)
+
   const queryStatusText: JSX.Element | null = useMemo(() => {
     switch (status) {
       case 'idle':
       case 'completed':
         if (source?.toJSON() === lastQuery && lastQueryTime) {
-          return <PythonSucceededText lastExecutionTime={lastQueryTime} />
+          return (
+            <PythonSucceededText
+              lastExecutionTime={lastQueryTime}
+              isResultHidden={isResultHidden ?? false}
+              onToggleResultHidden={toggleResultHidden}
+            />
+          )
         }
         return null
       case 'running':
@@ -217,15 +259,10 @@ function PythonBlock(props: Props) {
     lastQueryTime,
     source.toJSON(),
     envStatus,
+    isResultHidden,
+    toggleResultHidden,
   ])
 
-  const isCodeHidden =
-    props.block.getAttribute('isCodeHidden') &&
-    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode))
-  const isResultHidden =
-    props.block.getAttribute('isResultHidden') &&
-    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode))
-
   const { title } = getBaseAttributes(props.block)
   const onChangeTitle = useCallback(
     (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -457,25 +494,17 @@ function PythonBlock(props: Props) {
             <div className="flex items-center justify-between px-3 pr-4 gap-x-4 font-sans h-12">
               <div className="select-none text-gray-300 text-xs flex items-center w-full h-full gap-x-1.5">
                 <div className="relative group w-4 h-4">
-                  <CommandLineIcon
-                    className={clsx(
-                      'absolute inset-0 h-4 w-4 text-gray-400',
-                      props.isEditable &&
-                        'group-hover:opacity-0 transition-opacity'
+                  <CommandLineIcon className="absolute inset-0 h-4 w-4 text-gray-400 group-hover:opacity-0 transition-opacity" />
+                  <button
+                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                    onClick={toggleCodeHidden}
+                  >
+                    {isCodeHidden ? (
+                      <ChevronRightIcon className="h-4 w-4" />
+                    ) : (
+                      <ChevronDownIcon className="h-4 w-4" />
                     )}
-                  />
-                  {props.isEditable && (
-                    <button
-                      className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                      onClick={toggleCodeHidden}
-                    >
-                      {isCodeHidden ? (
-                        <ChevronRightIcon className="h-4 w-4" />
-                      ) : (
-                        <ChevronDownIcon className="h-4 w-4" />
-                      )}
-                    </button>
-                  )}
+                  </button>
                 </div>
                 <input
                   type="text"
diff --git a/apps/web/src/components/v2Editor/customBlocks/sql/index.tsx b/apps/web/src/components/v2Editor/customBlocks/sql/index.tsx
@@ -115,19 +115,39 @@ function SQLBlock(props: Props) {
     )
   }, [currentWorkspace, properties.data])
 
+  const [localResultHidden, setLocalResultHidden] = useState<boolean | null>(
+    null
+  )
+
   const toggleResultHidden = useCallback(() => {
-    props.block.doc?.transact(() => {
-      const currentIsResultHidden = props.block.getAttribute('isResultHidden')
-      props.block.setAttribute('isResultHidden', !currentIsResultHidden)
-    })
-  }, [props.block])
+    if (props.isEditable) {
+      props.block.doc?.transact(() => {
+        const currentIsResultHidden = props.block.getAttribute('isResultHidden')
+        props.block.setAttribute('isResultHidden', !currentIsResultHidden)
+      })
+    } else {
+      setLocalResultHidden((prev) => {
+        const blockResultHidden = props.block.getAttribute('isResultHidden')
+        return prev === null ? !blockResultHidden : !prev
+      })
+    }
+  }, [props.block, props.isEditable])
+
+  const [localCodeHidden, setLocalCodeHidden] = useState<boolean | null>(null)
 
   const toggleCodeHidden = useCallback(() => {
-    props.block.doc?.transact(() => {
-      const currentIsCodeHidden = props.block.getAttribute('isCodeHidden')
-      props.block.setAttribute('isCodeHidden', !currentIsCodeHidden)
-    })
-  }, [props.block])
+    if (props.isEditable) {
+      props.block.doc?.transact(() => {
+        const currentIsCodeHidden = props.block.getAttribute('isCodeHidden')
+        props.block.setAttribute('isCodeHidden', !currentIsCodeHidden)
+      })
+    } else {
+      setLocalCodeHidden((prev) => {
+        const blockCodeHidden = props.block.getAttribute('isCodeHidden')
+        return prev === null ? !blockCodeHidden : !prev
+      })
+    }
+  }, [props.block, props.isEditable])
 
   const [selectedCode, setSelectedCode] = useState<string | null>(null)
   const onSQLSelectionChanged = useCallback((selectedCode: string | null) => {
@@ -153,11 +173,20 @@ function SQLBlock(props: Props) {
   } = getSQLAttributes(props.block, props.blocks)
 
   const isCodeHidden =
-    isCodeHiddenProp &&
-    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode))
+    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode)) &&
+    (props.isEditable
+      ? props.block.getAttribute('isCodeHidden') ?? false
+      : localCodeHidden === null
+      ? props.block.getAttribute('isCodeHidden') ?? false
+      : localCodeHidden)
+
   const isResultHidden =
-    isResultHiddenProp &&
-    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode))
+    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode)) &&
+    (props.isEditable
+      ? props.block.getAttribute('isResultHidden') ?? false
+      : localResultHidden === null
+      ? props.block.getAttribute('isResultHidden') ?? false
+      : localResultHidden)
 
   const { startedAt: environmentStartedAt } = useEnvironmentStatus(
     props.document.workspaceId
@@ -334,7 +363,13 @@ function SQLBlock(props: Props) {
       case 'idle':
       case 'completed': {
         if (source?.toJSON() === lastQuery && lastQueryTime) {
-          return <QuerySucceededText lastExecutionTime={lastQueryTime} />
+          return (
+            <QuerySucceededText
+              lastExecutionTime={lastQueryTime}
+              isResultHidden={isResultHidden}
+              onToggleResultHidden={toggleResultHidden}
+            />
+          )
         }
 
         return null
@@ -770,25 +805,17 @@ function SQLBlock(props: Props) {
             >
               <div className="select-none text-gray-300 text-xs flex items-center w-full h-full gap-x-1.5">
                 <div className="relative group w-4 h-4">
-                  <CircleStackIcon
-                    className={clsx(
-                      'absolute inset-0 h-4 w-4 text-gray-400',
-                      props.isEditable &&
-                        'group-hover:opacity-0 transition-opacity'
+                  <CircleStackIcon className="absolute inset-0 h-4 w-4 text-gray-400 group-hover:opacity-0 transition-opacity" />
+                  <button
+                    className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
+                    onClick={toggleCodeHidden}
+                  >
+                    {isCodeHidden ? (
+                      <ChevronRightIcon className="h-4 w-4" />
+                    ) : (
+                      <ChevronDownIcon className="h-4 w-4" />
                     )}
-                  />
-                  {props.isEditable && (
-                    <button
-                      className="absolute inset-0 opacity-0 group-hover:opacity-100 transition-opacity"
-                      onClick={toggleCodeHidden}
-                    >
-                      {isCodeHidden ? (
-                        <ChevronRightIcon className="h-4 w-4" />
-                      ) : (
-                        <ChevronDownIcon className="h-4 w-4" />
-                      )}
-                    </button>
-                  )}
+                  </button>
                 </div>
                 <input
                   type="text"
