fix: Validator run is available when proxy is offline (#660)

going-confetti · web-flow · commit 82e7ffaa3381 · 2025-04-15T18:19:28.000+02:00
diff --git a/src/components/GhostButton.tsx b/src/components/GhostButton.tsx
@@ -1,20 +1,24 @@
 import { css } from '@emotion/react'
 import { Button, ButtonProps } from '@radix-ui/themes'
+import { forwardRef } from 'react'
 
 type GhostButtonProps = Omit<ButtonProps, 'variant'>
 
-export function GhostButton(props: GhostButtonProps) {
-  return (
-    <Button
-      css={css`
-        margin: 0;
-        height: var(--base-button-height);
+export const GhostButton = forwardRef<HTMLButtonElement, GhostButtonProps>(
+  function GhostButton(props, ref) {
+    return (
+      <Button
+        ref={ref}
+        css={css`
+          margin: 0;
+          height: var(--base-button-height);
 
-        --button-ghost-padding-x: var(--space-3);
-        --button-ghost-padding-y: 0;
-      `}
-      {...props}
-      variant="ghost"
-    />
-  )
-}
+          --button-ghost-padding-x: var(--space-3);
+          --button-ghost-padding-y: 0;
+        `}
+        {...props}
+        variant="ghost"
+      />
+    )
+  }
+)
diff --git a/src/views/Generator/GeneratorControls/GeneratorControls.tsx b/src/views/Generator/GeneratorControls/GeneratorControls.tsx
@@ -4,6 +4,7 @@ import { useState } from 'react'
 import { useNavigate } from 'react-router-dom'
 
 import { ButtonWithTooltip } from '@/components/ButtonWithTooltip'
+import { useProxyStatus } from '@/hooks/useProxyStatus'
 import { useScriptPreview } from '@/hooks/useScriptPreview'
 import { getRoutePath } from '@/routeMap'
 import { useGeneratorStore } from '@/store/generator'
@@ -32,6 +33,7 @@ export function GeneratorControls({
     useState(false)
   const { fileName } = useGeneratorParams()
   const { preview, hasError } = useScriptPreview()
+  const proxyStatus = useProxyStatus()
   const isScriptExportable = !hasError && !!preview
   const navigate = useNavigate()
 
@@ -67,7 +69,7 @@ export function GeneratorControls({
           <DropdownMenu.Content>
             <DropdownMenu.Item
               onSelect={() => setIsValidatorDialogOpen(true)}
-              disabled={!isScriptExportable}
+              disabled={!isScriptExportable || proxyStatus !== 'online'}
             >
               Validate script
             </DropdownMenu.Item>
diff --git a/src/views/Generator/GeneratorTabs/ScriptPreview.tsx b/src/views/Generator/GeneratorTabs/ScriptPreview.tsx
@@ -1,11 +1,12 @@
 import { CheckCircledIcon, DownloadIcon } from '@radix-ui/react-icons'
-import { Flex } from '@radix-ui/themes'
+import { Flex, Tooltip } from '@radix-ui/themes'
 import { useState } from 'react'
 
 import { GhostButton } from '@/components/GhostButton'
 import { CodeEditor } from '@/components/Monaco/CodeEditor'
 import { RunInCloudButton } from '@/components/RunInCloudDialog/RunInCloudButton'
 import { RunInCloudDialog } from '@/components/RunInCloudDialog/RunInCloudDialog'
+import { useProxyStatus } from '@/hooks/useProxyStatus'
 import { useScriptPreview } from '@/hooks/useScriptPreview'
 import { useGeneratorStore } from '@/store/generator'
 
@@ -27,22 +28,28 @@ export function ScriptPreview({ fileName }: ScriptPreviewProps) {
   const [isExportScriptDialogOpen, setIsExportScriptDialogOpen] =
     useState(false)
   const { preview, error } = useScriptPreview()
+  const proxyStatus = useProxyStatus()
   const isScriptExportable = !error && !!preview
 
   const handleExportScript = useScriptExport(fileName)
 
   return (
     <Flex direction="column" height="100%" position="relative">
       <Flex py="1" px="2" gap="2" align="center" justify="end">
-        <GhostButton
-          disabled={!isScriptExportable}
-          onClick={() => {
-            setIsValidatorDialogOpen(true)
-          }}
+        <Tooltip
+          content={`Proxy is ${proxyStatus}`}
+          hidden={proxyStatus === 'online'}
         >
-          <CheckCircledIcon />
-          Validate
-        </GhostButton>
+          <GhostButton
+            disabled={!isScriptExportable || proxyStatus !== 'online'}
+            onClick={() => {
+              setIsValidatorDialogOpen(true)
+            }}
+          >
+            <CheckCircledIcon />
+            Validate
+          </GhostButton>
+        </Tooltip>
         <GhostButton
           disabled={!isScriptExportable}
           onClick={() => {
diff --git a/src/views/Validator/ValidatorControls.tsx b/src/views/Validator/ValidatorControls.tsx
@@ -3,6 +3,7 @@ import { Button, DropdownMenu, IconButton, Tooltip } from '@radix-ui/themes'
 
 import TextSpinner from '@/components/TextSpinner/TextSpinner'
 import { GrafanaIcon } from '@/components/icons/GrafanaIcon'
+import { useProxyStatus } from '@/hooks/useProxyStatus'
 
 interface ValidatorControlsProps {
   isRunning: boolean
@@ -25,6 +26,8 @@ export function ValidatorControls({
   onSelectScript,
   onStopScript,
 }: ValidatorControlsProps) {
+  const proxyStatus = useProxyStatus()
+
   return (
     <>
       {isRunning && (
@@ -40,9 +43,17 @@ export function ValidatorControls({
           <Button variant="outline" onClick={onRunInCloud}>
             <GrafanaIcon /> Run in Grafana Cloud
           </Button>
-          <Button disabled={!isScriptSelected} onClick={onRunScript}>
-            Validate script
-          </Button>
+          <Tooltip
+            content={`Proxy is ${proxyStatus}`}
+            hidden={proxyStatus === 'online'}
+          >
+            <Button
+              disabled={!isScriptSelected || proxyStatus !== 'online'}
+              onClick={onRunScript}
+            >
+              Validate script
+            </Button>
+          </Tooltip>
         </>
       )}
       <DropdownMenu.Root>
diff --git a/src/views/Validator/ValidatorEmptyState.tsx b/src/views/Validator/ValidatorEmptyState.tsx
@@ -1,6 +1,10 @@
 import { CheckCircledIcon } from '@radix-ui/react-icons'
 import { Button, Spinner, Text } from '@radix-ui/themes'
 
+import { TextButton } from '@/components/TextButton'
+import { useProxyStatus } from '@/hooks/useProxyStatus'
+import { useStudioUIStore } from '@/store/ui'
+
 interface ValidatorEmptyStateProps {
   isRunning: boolean
   isScriptSelected: boolean
@@ -14,6 +18,14 @@ export function ValidatorEmptyState({
   onRunScript,
   onSelectScript,
 }: ValidatorEmptyStateProps) {
+  const proxyStatus = useProxyStatus()
+  const openSettingsDialog = useStudioUIStore(
+    (state) => state.openSettingsDialog
+  )
+  const handleProxyStart = () => {
+    return window.studio.proxy.launchProxy()
+  }
+
   if (!isScriptSelected) {
     return (
       <>
@@ -25,6 +37,25 @@ export function ValidatorEmptyState({
     )
   }
 
+  if (proxyStatus !== 'online') {
+    return (
+      <>
+        <Text size="1" color="gray" align="center">
+          Proxy is offline
+          <br />
+          Start proxy or check proxy configuration in{' '}
+          <TextButton onClick={() => openSettingsDialog('proxy')}>
+            Settings
+          </TextButton>
+          .
+        </Text>
+        <Button onClick={handleProxyStart} loading={proxyStatus === 'starting'}>
+          Start proxy
+        </Button>
+      </>
+    )
+  }
+
   return (
     <>
       <Text color="gray" size="1">
