PLU-343 [FIND-SINGLE-ROW-3]: show tooltips for variables, show formsg attachment (#954)

### Problem
- Certain variable types can be confusing to users, e.g. users may not know what Row ID can be used for
- FormSG attachments not showing in output results, users may think that they're not processed

### Solution

Add a tag to variables with a explanation tooltip. Also, show all variable types (including files) in output.
- Added a new `VariableTag` component that displays tags for specific variable types (array, file, tile_row_id)
- Each tag includes a tooltip explaining the variable's purpose
- Remove filtering by variable type in TestSubstep output.

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/ycT2Xb5nBEjN2kf2gy95/93afab7a-a263-4c3c-95c1-0d9ee8136e64.png)

![image.png](https://graphite-user-uploaded-assets-prod.s3.amazonaws.com/ycT2Xb5nBEjN2kf2gy95/6b4950fb-d058-4dd7-a20e-3db11ceb4623.png)

### How to test?

a. Test that FormSG show attachment results in test results
b. Test that variables has the appropriate Variable Tag (e.g. attachment, tile row ID, etc.)

Author: pregnantboy

packages/frontend/src/components/TestSubstep/index.tsx

@@ -23,11 +23,7 @@ import { EXECUTE_FLOW } from '@/graphql/mutations/execute-flow'
 import { EXECUTE_STEP } from '@/graphql/mutations/execute-step'
 import { GET_FLOW } from '@/graphql/queries/get-flow'
 import { GET_TEST_EXECUTION_STEPS } from '@/graphql/queries/get-test-execution-steps'
-import {
-  extractVariables,
-  filterVariables,
-  VISIBLE_VARIABLE_TYPES,
-} from '@/helpers/variables'
+import { extractVariables } from '@/helpers/variables'
 
 import FlowSubstepTitle from '../FlowSubstepTitle'
 
@@ -118,13 +114,7 @@ function TestSubstep(props: TestSubstepProps): JSX.Element {
     if (!currentExecutionStep) {
       return null
     }
-    const stepWithVariables = filterVariables(
-      extractVariables([currentExecutionStep]),
-      (variable) => {
-        const variableType = variable.type ?? 'text'
-        return VISIBLE_VARIABLE_TYPES.includes(variableType)
-      },
-    )
+    const stepWithVariables = extractVariables([currentExecutionStep])
     if (stepWithVariables.length > 0) {
       return stepWithVariables[0].output
     }

packages/frontend/src/components/VariablesList/index.tsx

@@ -1,11 +1,67 @@
-import { Box, Text } from '@chakra-ui/react'
+import { TDataOutMetadatumType } from '@plumber/types'
+
+import { useMemo } from 'react'
+import { Box, Tag, Text, Tooltip } from '@chakra-ui/react'
 
 import { type Variable } from '@/helpers/variables'
+import { POPOVER_MOTION_PROPS } from '@/theme/constants'
+
+function VariableTag({
+  type,
+}: {
+  type: TDataOutMetadatumType | null
+}): JSX.Element | null {
+  const { label, tooltip } = useMemo(() => {
+    switch (type) {
+      case 'array':
+        return {
+          label: 'List',
+          tooltip: 'This variable can be used in for-each loops (coming soon!)',
+        }
+      case 'file':
+        return {
+          label: 'File',
+          tooltip:
+            'This variable can be used as an attachment in Email by Postman action.',
+        }
+      case 'tile_row_id':
+        return {
+          label: 'Tile Row ID',
+          tooltip: `This variable can be used in Tile's Update Single Row action`,
+        }
+      default:
+        return {
+          label: null,
+          tooltip: null,
+        }
+    }
+  }, [type])
+
+  if (!label) {
+    return null
+  }
+
+  return (
+    <Tooltip
+      label={tooltip}
+      placement="right"
+      hasArrow
+      motionProps={POPOVER_MOTION_PROPS}
+    >
+      <Tag size="xs" variant="outline">
+        {label}
+      </Tag>
+    </Tooltip>
+  )
+}
 
-function makeVariableComponent(
-  variable: Variable,
-  onClick?: (variable: Variable) => void,
-): JSX.Element {
+function VariableItem({
+  variable,
+  onClick,
+}: {
+  variable: Variable
+  onClick?: (variable: Variable) => void
+}): JSX.Element {
   return (
     <Box
       key={`suggestion-${variable.name}`}
@@ -37,8 +93,14 @@ function makeVariableComponent(
           : undefined
       }
     >
-      <Text textStyle="body-1" color="base.content.strong">
-        {variable.label ?? variable.name}
+      <Text
+        textStyle="body-1"
+        color="base.content.strong"
+        display="flex"
+        alignItems="center"
+        gap={2}
+      >
+        {variable.label ?? variable.name} <VariableTag type={variable.type} />
       </Text>
       <Text textStyle="body-2" color="base.content.medium">
         {variable.displayedValue ?? variable.value?.toString() ?? ''}
@@ -66,7 +128,13 @@ export default function VariablesList(props: VariablesListProps) {
       overflowY="auto"
       p={onClick ? undefined : '1rem'}
     >
-      {variables.map((variable) => makeVariableComponent(variable, onClick))}
+      {variables.map((variable, index) => (
+        <VariableItem
+          key={`variable-${variable.name}-${index}`}
+          variable={variable}
+          onClick={onClick}
+        />
+      ))}
     </Box>
   )
 }