update verification rule inline content

Author: e-fisher

src/views/Generator/TestRuleContainer/TestRule/TestRuleInlineContent.tsx

@@ -2,7 +2,6 @@ import {
   CorrelationRule,
   CustomCodeRule,
   TestRule,
-  VerificationRule,
   ParameterizationRule,
 } from '@/types/rules'
 import { TestRuleFilter } from './TestRuleFilter'
@@ -13,8 +12,8 @@ import {
   BorderLeftIcon,
   BorderRightIcon,
   EyeOpenIcon,
-  DiscIcon,
 } from '@radix-ui/react-icons'
+import { VerificationContent } from './VerificationContent'
 
 interface TestRuleInlineContentProps {
   rule: TestRule
@@ -35,19 +34,6 @@ export function TestRuleInlineContent({ rule }: TestRuleInlineContentProps) {
   }
 }
 
-function VerificationContent({ rule }: { rule: VerificationRule }) {
-  return (
-    <>
-      <TestRuleFilter filter={rule.filter} />{' '}
-      <Tooltip content="Checks that all request statuses match the recording.">
-        <Badge color="gray">
-          <DiscIcon /> Recording
-        </Badge>
-      </Tooltip>
-    </>
-  )
-}
-
 function CorrelationContent({ rule }: { rule: CorrelationRule }) {
   return (
     <>

src/views/Generator/TestRuleContainer/TestRule/VerificationContent.tsx

@@ -0,0 +1,51 @@
+import { VerificationRule } from '@/types/rules'
+import { TestRuleFilter } from './TestRuleFilter'
+import { Badge, Strong } from '@radix-ui/themes'
+import { exhaustive } from '@/utils/typescript'
+import { Link1Icon } from '@radix-ui/react-icons'
+
+export function VerificationContent({ rule }: { rule: VerificationRule }) {
+  return (
+    <>
+      <TestRuleFilter filter={rule.filter} />
+      <Badge color="gray">
+        Verify <Strong>{rule.target}</Strong>{' '}
+        <OperatorLabel operator={rule.operator} /> <ValueLabel rule={rule} />
+      </Badge>
+    </>
+  )
+}
+
+function OperatorLabel({
+  operator,
+}: {
+  operator: VerificationRule['operator']
+}) {
+  switch (operator) {
+    case 'equals':
+    case 'contains':
+      return operator
+    case 'notContains':
+      return 'does not contain'
+    default:
+      return exhaustive(operator)
+  }
+}
+
+function ValueLabel({ rule }: { rule: VerificationRule }) {
+  switch (rule.value.type) {
+    case 'recordedValue':
+      return <Strong>recorded value</Strong>
+    case 'string':
+      return <Strong>{rule.value.value}</Strong>
+    case 'variable':
+      return (
+        <Strong>
+          <Link1Icon css={{ verticalAlign: 'middle', display: 'inline' }} />{' '}
+          {rule.value.variableName}
+        </Strong>
+      )
+    default:
+      return exhaustive(rule.value)
+  }
+}