Fix missing test step viewer labels (#2292)

Fixes OPS-4318

## Additional Notes

From `dev` env

<img width="484" height="358" alt="Screenshot 2026-05-14 at 5 10 37 PM"
src="https://github.com/user-attachments/assets/03f16bf5-6a5e-49fa-8d82-8be1b0809f14"
/>
<img width="484" height="358" alt="Screenshot 2026-05-14 at 5 10 49 PM"
src="https://github.com/user-attachments/assets/ea3e2a1b-dbfb-4d08-bec2-2d8ff6ca70dc"
/>

Author: ravikiranvm

packages/ui-components/src/components/test-step-data-viewer/test-step-data-viewer.tsx

@@ -1,5 +1,5 @@
-import { t } from 'i18next';
 import { useMemo, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { Theme } from '../../lib/theme';
 import { JsonViewer } from '../json-viewer/json-viewer';
 import { ToggleSwitch } from '../toggle-switch/toggle-switch';
@@ -19,19 +19,6 @@ const JsonViewType = {
   Output: 'Output',
 };
 
-const VIEW_INPUT_OPTIONS = [
-  {
-    value: JsonViewType.Input,
-    label: t('Input'),
-    tooltipText: t('View input data'),
-  },
-  {
-    value: JsonViewType.Output,
-    label: t('Output'),
-    tooltipText: t('View output data'),
-  },
-];
-
 const TestStepDataViewer = ({
   inputJson,
   outputJson,
@@ -41,6 +28,19 @@ const TestStepDataViewer = ({
   editorClassName,
   containerClassName,
 }: TestStepDataViewerProps) => {
+  const { t } = useTranslation();
+  const VIEW_INPUT_OPTIONS = [
+    {
+      value: JsonViewType.Input,
+      label: t('Input'),
+      tooltipText: t('View input data'),
+    },
+    {
+      value: JsonViewType.Output,
+      label: t('Output'),
+      tooltipText: t('View output data'),
+    },
+  ];
   const [selectedViewType, setSelectedViewType] = useState<string>(
     JsonViewType.Output,
   );