✨ Improve value result panel (#60)

* ✨ Use media query for default result opening state * Change icon for results panel toggling * Improve result formatting * Add tests
marilari88 · Aug 12, 2024 · a8c6b71 · a8c6b71
1 parent 606ef5f
commit a8c6b71
Show file tree

Hide file tree

Showing 3 changed files with 60 additions and 19 deletions.
diff --git a/src/features/ValueEditor/ValueEditor.module.css b/src/features/ValueEditor/ValueEditor.module.css
@@ -36,4 +36,7 @@
   border-left: 1px solid var(--mantine-color-neutral-2);
   display: block;
   flex: 1;
+
+  white-space: pre-wrap;
+  font-size: var(--mantine-font-size-sm);
 }
diff --git a/src/features/ValueEditor/ValueEditor.tsx b/src/features/ValueEditor/ValueEditor.tsx
@@ -13,8 +13,9 @@ import {
 import Editor from '@monaco-editor/react'
 import type {editor} from 'monaco-editor'
 
-import {useDisclosure} from '@mantine/hooks'
-import {FiAlertCircle, FiCheckCircle, FiColumns, FiMinus, FiPlus} from 'react-icons/fi'
+import {useDisclosure, useMediaQuery} from '@mantine/hooks'
+import {useState} from 'react'
+import {FiAlertCircle, FiCheckCircle, FiEye, FiEyeOff, FiMinus, FiPlus} from 'react-icons/fi'
 import {LuEraser} from 'react-icons/lu'
 import * as zod from '../../zod'
 import {CopyButton} from '../CopyButton'
@@ -52,8 +53,11 @@ const editorOptions: editor.IStandaloneEditorConstructionOptions = {
 }
 
 export const Validation = ({schema, value, index, onChange, onAdd, onRemove, onClear}: Props) => {
-  const [opened, {close, open}] = useDisclosure(false)
-  const [openedResult, {toggle: toggleResult}] = useDisclosure(false)
+  const [isPopoverOpen, {close, open}] = useDisclosure(false)
+
+  const matches = useMediaQuery('(min-width: 1200px)')
+  const [isResultManuallyOpen, setIsResultManuallyOpen] = useState<boolean | null>(null)
+  const isResultOpen = isResultManuallyOpen ?? !!matches
 
   const validation = schema
     ? zod.validateValue(schema, value)
@@ -70,7 +74,7 @@ export const Validation = ({schema, value, index, onChange, onAdd, onRemove, onC
         <Flex gap="sm" align="center">
           Value #{index + 1}
           {validation.success && (
-            <Popover opened={opened}>
+            <Popover opened={isPopoverOpen}>
               <Popover.Target>
                 <Badge
                   variant="dot"
@@ -98,7 +102,7 @@ export const Validation = ({schema, value, index, onChange, onAdd, onRemove, onC
             </Popover>
           )}
           {!validation.success && (
-            <Popover opened={opened} withArrow>
+            <Popover opened={isPopoverOpen} withArrow>
               <Popover.Target>
                 <Badge
                   variant="dot"
@@ -149,9 +153,15 @@ export const Validation = ({schema, value, index, onChange, onAdd, onRemove, onC
               <FiMinus />
             </ActionIcon>
           </Tooltip>
-          <Tooltip label="Toggle results column" withArrow>
-            <ActionIcon variant="light" aria-label="Toggle results column" onClick={toggleResult}>
-              <FiColumns />
+          <Tooltip label={isResultOpen ? 'Hide results' : 'Show results'} withArrow>
+            <ActionIcon
+              variant="light"
+              aria-label={isResultOpen ? 'Hide results' : 'Show results'}
+              onClick={() => {
+                isResultOpen ? setIsResultManuallyOpen(false) : setIsResultManuallyOpen(true)
+              }}
+            >
+              {!isResultOpen ? <FiEye /> : <FiEyeOff />}
             </ActionIcon>
           </Tooltip>
         </Flex>
@@ -168,18 +178,17 @@ export const Validation = ({schema, value, index, onChange, onAdd, onRemove, onC
             value={value}
           />
         </div>
-        <div
-          style={{display: openedResult ? 'block' : 'none'}}
+        <Box
+          style={{
+            display: isResultOpen ? 'block' : 'none',
+          }}
           className={classes.valueResult}
-          data-open={openedResult}
+          data-open={isResultOpen}
+          c={errors ? 'red' : 'neutral.8'}
         >
-          {parsedData && <Code>{parsedData}</Code>}
-          {errors && (
-            <Text c="red" size="sm" style={{whiteSpace: 'pre-line'}}>
-              {errors}
-            </Text>
-          )}
-        </div>
+          {parsedData && JSON.stringify(JSON.parse(parsedData), null, 4)}
+          {errors && errors}
+        </Box>
       </div>
     </Box>
   )

diff --git a/tests/tests.spec.ts b/tests/tests.spec.ts
@@ -46,3 +46,32 @@ test('has invalid marker when an invalid value is in the Value Editor', async ({
 
   await expect(page.locator('div').filter({hasText: /^Invalid$/})).toBeVisible()
 })
+
+test('should display results by default on wide screen', async ({page, codeEditors}) => {
+  await page.setViewportSize({width: 1920, height: 1080})
+  await codeEditors.writeSchema({
+    text: '----',
+  })
+
+  await expect(page.getByText(/invalid schema/i)).toBeVisible()
+
+  await page.getByRole('button', {name: 'Hide results'}).click()
+  await expect(page.getByText(/invalid schema/i)).not.toBeVisible()
+
+  await page.getByRole('button', {name: 'Show results'}).click()
+  await expect(page.getByText(/invalid schema/i)).toBeVisible()
+})
+
+test('should hide results by default on narrow screen', async ({page, codeEditors}) => {
+  await page.setViewportSize({width: 800, height: 600})
+  await codeEditors.writeSchema({
+    text: '----',
+  })
+
+  await expect(page.getByText(/invalid schema/i)).not.toBeVisible()
+  await page.getByRole('button', {name: 'Show results'}).click()
+  await expect(page.getByText(/invalid schema/i)).toBeVisible()
+
+  await page.getByRole('button', {name: 'Hide results'}).click()
+  await expect(page.getByText(/invalid schema/i)).not.toBeVisible()
+})