From ecda2a49b40d514ddb3b8da443d9bb44cf6da115 Mon Sep 17 00:00:00 2001
From: Uladzimir Dzmitrachkou <uladzimir.dzmitrachkou@grafana.com>
Date: Fri, 20 Sep 2024 14:29:37 +0200
Subject: [PATCH 1/3] feat: Simplify Generator controls

---
 .../GeneraterControls/GeneratorControls.tsx   | 48 +++++++++++++++----
 src/views/Generator/NewRuleMenu.tsx           |  5 +-
 .../TestRuleContainer/TestRule/TestRule.tsx   |  2 +
 .../TestRuleContainer/TestRuleContainer.tsx   | 25 ++++++++--
 4 files changed, 65 insertions(+), 15 deletions(-)

diff --git a/src/views/Generator/GeneraterControls/GeneratorControls.tsx b/src/views/Generator/GeneraterControls/GeneratorControls.tsx
index c5a826dc..06613d93 100644
--- a/src/views/Generator/GeneraterControls/GeneratorControls.tsx
+++ b/src/views/Generator/GeneraterControls/GeneratorControls.tsx
@@ -1,9 +1,19 @@
 import { useState } from 'react'
-import { Button, ButtonProps, Tooltip } from '@radix-ui/themes'
+import {
+  Button,
+  ButtonProps,
+  DropdownMenu,
+  IconButton,
+  Tooltip,
+} from '@radix-ui/themes'
 
 import { useScriptPreview } from '@/hooks/useScriptPreview'
 import { exportScript } from '../Generator.utils'
 import { ValidatorDialog } from './ValidatorDialog'
+import { CheckCircledIcon, DotsVerticalIcon } from '@radix-ui/react-icons'
+import { useGeneratorParams } from '../Generator.hooks'
+import { useNavigate } from 'react-router-dom'
+import { getRoutePath } from '@/routeMap'
 
 interface GeneratorControlsProps {
   onSave: () => void
@@ -11,32 +21,34 @@ interface GeneratorControlsProps {
 }
 
 export function GeneratorControls({ onSave, isDirty }: GeneratorControlsProps) {
+  const { fileName } = useGeneratorParams()
   const [isDialogOpen, setIsDialogOpen] = useState(false)
   const { preview, hasError } = useScriptPreview()
+  const navigate = useNavigate()
   const tooltip = hasError ? 'Invalid script. Please check your rules' : ''
 
+  const handleDeleteGenerator = async () => {
+    await window.studio.ui.deleteFile(fileName)
+
+    navigate(getRoutePath('home'))
+  }
+
   return (
     <>
       {!!preview && (
         <>
           <ButtonWithTooltip
-            variant="outline"
+            variant="ghost"
+            color="gray"
             disabled={hasError}
             tooltip={tooltip}
             onClick={() => {
               setIsDialogOpen(true)
             }}
           >
+            <CheckCircledIcon />
             Validate script
           </ButtonWithTooltip>
-          <ButtonWithTooltip
-            variant="outline"
-            disabled={hasError}
-            tooltip={tooltip}
-            onClick={exportScript}
-          >
-            Export script
-          </ButtonWithTooltip>
           <ValidatorDialog
             script={preview}
             open={isDialogOpen}
@@ -53,6 +65,22 @@ export function GeneratorControls({ onSave, isDirty }: GeneratorControlsProps) {
       >
         Save
       </ButtonWithTooltip>
+      <DropdownMenu.Root>
+        <DropdownMenu.Trigger>
+          <IconButton variant="ghost" color="gray">
+            <DotsVerticalIcon />
+          </IconButton>
+        </DropdownMenu.Trigger>
+        <DropdownMenu.Content>
+          <DropdownMenu.Item onSelect={exportScript} disabled={hasError}>
+            Export script
+          </DropdownMenu.Item>
+          <DropdownMenu.Separator />
+          <DropdownMenu.Item onSelect={handleDeleteGenerator} color="red">
+            Delete generator
+          </DropdownMenu.Item>
+        </DropdownMenu.Content>
+      </DropdownMenu.Root>
     </>
   )
 }
diff --git a/src/views/Generator/NewRuleMenu.tsx b/src/views/Generator/NewRuleMenu.tsx
index 44bf5632..c25519f4 100644
--- a/src/views/Generator/NewRuleMenu.tsx
+++ b/src/views/Generator/NewRuleMenu.tsx
@@ -1,11 +1,12 @@
 import { PlusCircledIcon } from '@radix-ui/react-icons'
 import { Button, DropdownMenu } from '@radix-ui/themes'
+import { ComponentProps } from 'react'
 
 import { useGeneratorStore } from '@/store/generator'
 import { TestRule } from '@/types/rules'
 import { createEmptyRule } from '@/utils/rules'
 
-export function NewRuleMenu() {
+export function NewRuleMenu(props: ComponentProps<typeof Button>) {
   const addRule = useGeneratorStore((store) => store.addRule)
 
   const createRule = (type: TestRule['type']) => {
@@ -16,7 +17,7 @@ export function NewRuleMenu() {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <Button variant="ghost" size="1" color="orange" mr="2">
+        <Button variant="ghost" size="1" color="orange" mr="2" {...props}>
           <PlusCircledIcon />
           Add rule
         </Button>
diff --git a/src/views/Generator/TestRuleContainer/TestRule/TestRule.tsx b/src/views/Generator/TestRuleContainer/TestRule/TestRule.tsx
index 9c9b1658..808dd28d 100644
--- a/src/views/Generator/TestRuleContainer/TestRule/TestRule.tsx
+++ b/src/views/Generator/TestRuleContainer/TestRule/TestRule.tsx
@@ -92,6 +92,8 @@ export function TestRuleItem({
           css={css`
             cursor: grab;
           `}
+          width={16}
+          height={16}
           aria-hidden
         />
       </IconButton>
diff --git a/src/views/Generator/TestRuleContainer/TestRuleContainer.tsx b/src/views/Generator/TestRuleContainer/TestRuleContainer.tsx
index 326626e7..240b94ec 100644
--- a/src/views/Generator/TestRuleContainer/TestRuleContainer.tsx
+++ b/src/views/Generator/TestRuleContainer/TestRuleContainer.tsx
@@ -1,9 +1,10 @@
 import { useGeneratorStore } from '@/store/generator'
-import { Flex, Heading, ScrollArea } from '@radix-ui/themes'
+import { Flex, Heading, ScrollArea, Text } from '@radix-ui/themes'
 import { NewRuleMenu } from '../NewRuleMenu'
 import { SortableRuleList } from './SortableRuleList'
 import { css } from '@emotion/react'
 import { TestOptions } from '../TestOptions'
+import grotIllustration from '@/assets/grot.svg'
 
 export function TestRuleContainer() {
   const rules = useGeneratorStore((store) => store.rules)
@@ -16,7 +17,7 @@ export function TestRuleContainer() {
         align="center"
         top="0"
         pr="2"
-        gap="4"
+        gap="2"
         css={css`
           background-color: var(--color-background);
           z-index: 1;
@@ -33,11 +34,29 @@ export function TestRuleContainer() {
         >
           Test rules ({rules.length})
         </Heading>
-        <TestOptions />
         <NewRuleMenu />
+        <TestOptions />
       </Flex>
 
       <SortableRuleList rules={rules} onSwapRules={swapRules} />
+      <Flex py="3" px="6" align="center" direction="column" gap="3">
+        {rules.length === 0 ? (
+          <>
+            <img
+              src={grotIllustration}
+              css={css`
+                max-height: 200px;
+              `}
+            />
+            <Text size="1" color="gray">
+              Start configuring your test logic by adding a new rule
+            </Text>
+            <NewRuleMenu variant="solid" size="2" />
+          </>
+        ) : (
+          <NewRuleMenu />
+        )}
+      </Flex>
     </ScrollArea>
   )
 }

From 8a3942af29d90312784cd47c44776a68ba02321d Mon Sep 17 00:00:00 2001
From: Uladzimir Dzmitrachkou <uladzimir.dzmitrachkou@grafana.com>
Date: Fri, 20 Sep 2024 14:32:34 +0200
Subject: [PATCH 2/3] fix alignment

---
 .../Generator/TestRuleContainer/TestRuleContainer.tsx     | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/src/views/Generator/TestRuleContainer/TestRuleContainer.tsx b/src/views/Generator/TestRuleContainer/TestRuleContainer.tsx
index 240b94ec..cb13a780 100644
--- a/src/views/Generator/TestRuleContainer/TestRuleContainer.tsx
+++ b/src/views/Generator/TestRuleContainer/TestRuleContainer.tsx
@@ -39,7 +39,13 @@ export function TestRuleContainer() {
       </Flex>
 
       <SortableRuleList rules={rules} onSwapRules={swapRules} />
-      <Flex py="3" px="6" align="center" direction="column" gap="3">
+      <Flex
+        py="3"
+        px="6"
+        align={rules.length === 0 ? 'center' : 'start'}
+        direction="column"
+        gap="3"
+      >
         {rules.length === 0 ? (
           <>
             <img

From cd18f212aee0ce62348227363bd0194f04c54d79 Mon Sep 17 00:00:00 2001
From: Uladzimir Dzmitrachkou <uladzimir.dzmitrachkou@grafana.com>
Date: Fri, 20 Sep 2024 14:34:38 +0200
Subject: [PATCH 3/3] adjust add rule button color

---
 src/views/Generator/NewRuleMenu.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/Generator/NewRuleMenu.tsx b/src/views/Generator/NewRuleMenu.tsx
index c25519f4..bf52f205 100644
--- a/src/views/Generator/NewRuleMenu.tsx
+++ b/src/views/Generator/NewRuleMenu.tsx
@@ -17,7 +17,7 @@ export function NewRuleMenu(props: ComponentProps<typeof Button>) {
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger>
-        <Button variant="ghost" size="1" color="orange" mr="2" {...props}>
+        <Button variant="ghost" size="1" color="gray" mr="2" {...props}>
           <PlusCircledIcon />
           Add rule
         </Button>