wip

Author: vieiralucas

apps/web/src/components/ExecutionStatusText.tsx

@@ -1,6 +1,8 @@
 import { format } from 'date-fns'
 import {
   CheckCircleIcon,
+  ChevronDownIcon,
+  ChevronRightIcon,
   CloudArrowDownIcon,
   Cog8ToothIcon,
 } from '@heroicons/react/20/solid'
@@ -10,19 +12,25 @@ type StartExecutionStatusTextProps = {
   startExecutionTime: string | null
 }
 
-type LastExecutedStatusTextProps = {
+interface LastExecutedStatusTextProps {
   lastExecutionTime: string
+  isResultHidden: boolean
+  onToggleResultHidden: () => void
 }
-
-export const QuerySucceededText = ({
-  lastExecutionTime,
-}: LastExecutedStatusTextProps) => {
+export function QuerySucceededText(props: LastExecutedStatusTextProps) {
   return (
     <span className="font-syne text-gray-300 text-xs flex items-center select-none">
-      <CheckCircleIcon className="w-4 h-4 mr-1" />
+      <button className="group mr-1" onClick={props.onToggleResultHidden}>
+        <CheckCircleIcon className="w-4 h-4 group-hover:hidden" />
+        {props.isResultHidden ? (
+          <ChevronRightIcon className="h-4 w-4 text-gray-400 hidden group-hover:block" />
+        ) : (
+          <ChevronDownIcon className="h-4 w-4 text-gray-400 hidden group-hover:block" />
+        )}
+      </button>
       <span className="pt-0.5">
         This query was last executed at{' '}
-        {format(new Date(lastExecutionTime), "h:mm a '-' do MMM, yyyy")}
+        {format(new Date(props.lastExecutionTime), "h:mm a '-' do MMM, yyyy")}
       </span>
     </span>
   )
@@ -95,15 +103,20 @@ export const ExecutingPythonText = ({
   )
 }
 
-export const PythonSucceededText = ({
-  lastExecutionTime,
-}: LastExecutedStatusTextProps) => {
+export function PythonSucceededText(props: LastExecutedStatusTextProps) {
   return (
     <span className="font-syne text-gray-300 text-xs flex items-center select-none">
-      <CheckCircleIcon className="w-4 h-4 mr-1" />
+      <button className="group mr-1" onClick={props.onToggleResultHidden}>
+        <CheckCircleIcon className="w-4 h-4 group-hover:hidden" />
+        {props.isResultHidden ? (
+          <ChevronRightIcon className="h-4 w-4 text-gray-400 hidden group-hover:block" />
+        ) : (
+          <ChevronDownIcon className="h-4 w-4 text-gray-400 hidden group-hover:block" />
+        )}
+      </button>
       <span className="pt-0.5">
         This code was last executed at{' '}
-        {format(new Date(lastExecutionTime), "h:mm a '-' do MMM, yyyy")}
+        {format(new Date(props.lastExecutionTime), "h:mm a '-' do MMM, yyyy")}
       </span>
     </span>
   )

apps/web/src/components/v2Editor/customBlocks/python/index.tsx

@@ -47,7 +47,11 @@ import { exhaustiveCheck } from '@briefer/types'
 import { useBlockExecutions } from '@/hooks/useBlockExecution'
 import { head } from 'ramda'
 import { useAITasks } from '@/hooks/useAITasks'
-import { CommandLineIcon } from '@heroicons/react/24/solid'
+import {
+  ChevronDownIcon,
+  ChevronRightIcon,
+  CommandLineIcon,
+} from '@heroicons/react/24/solid'
 import { TooltipV2 } from '@/components/Tooltips'
 import { DashboardMode, dashboardModeHasControls } from '@/components/Dashboard'
 
@@ -188,12 +192,25 @@ function PythonBlock(props: Props) {
   const startQueryTime = props.block.getAttribute('startQueryTime')
   const lastQueryTime = props.block.getAttribute('lastQueryTime')
 
+  const isCodeHidden =
+    props.block.getAttribute('isCodeHidden') &&
+    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode))
+  const isResultHidden =
+    props.block.getAttribute('isResultHidden') &&
+    (!props.dashboardMode || !dashboardModeHasControls(props.dashboardMode))
+
   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':
@@ -216,15 +233,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>) => {
@@ -454,7 +466,14 @@ 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">
-                <CommandLineIcon className="h-4 w-4 text-gray-400" />
+                <button className="group" onClick={toggleCodeHidden}>
+                  <CommandLineIcon className="h-4 w-4 text-gray-400 group-hover:hidden" />
+                  {isCodeHidden ? (
+                    <ChevronRightIcon className="h-4 w-4 text-gray-400 hidden group-hover:block" />
+                  ) : (
+                    <ChevronDownIcon className="h-4 w-4 text-gray-400 hidden group-hover:block" />
+                  )}
+                </button>
                 <input
                   type="text"
                   className={clsx(

apps/web/src/components/v2Editor/customBlocks/sql/index.tsx

@@ -72,9 +72,10 @@ import { useBlockExecutions } from '@/hooks/useBlockExecution'
 import { head } from 'ramda'
 import { useAITasks } from '@/hooks/useAITasks'
 import useFeatureFlags from '@/hooks/useFeatureFlags'
-import { CircleStackIcon } from '@heroicons/react/24/solid'
+import { ChevronDownIcon, CircleStackIcon } from '@heroicons/react/24/solid'
 import { TooltipV2 } from '@/components/Tooltips'
 import { DashboardMode, dashboardModeHasControls } from '@/components/Dashboard'
+import { ChevronRightIcon } from '@heroicons/react/24/outline'
 
 interface Props {
   block: Y.XmlElement<SQLBlock>
@@ -330,7 +331,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
@@ -352,6 +359,8 @@ function SQLBlock(props: Props) {
     lastQueryTime,
     source.toJSON(),
     envStatus,
+    isResultHidden,
+    toggleResultHidden,
   ])
 
   const onSubmitEditWithAI = useCallback(() => {
@@ -764,7 +773,14 @@ function SQLBlock(props: Props) {
               )}
             >
               <div className="select-none text-gray-300 text-xs flex items-center w-full h-full gap-x-1.5">
-                <CircleStackIcon className="h-4 w-4 text-gray-400" />
+                <button className="group" onClick={toggleCodeHidden}>
+                  <CircleStackIcon className="h-4 w-4 text-gray-400 group-hover:hidden" />
+                  {isCodeHiddenProp ? (
+                    <ChevronRightIcon className="h-4 w-4 text-gray-400 hidden group-hover:block" />
+                  ) : (
+                    <ChevronDownIcon className="h-4 w-4 text-gray-400 hidden group-hover:block" />
+                  )}
+                </button>
                 <input
                   type="text"
                   className={clsx(