Migrate expanded message components to UI registry

Remove @redpanda-data/ui from the expanded-message chain:
expanded-message, message-meta-data, payload-component, and
troubleshoot-report-viewer now use registry components and Tailwind.
Replace useToast with sonner and useColorModeValue with theme tokens.

Author: jvorcak

frontend/src/components/pages/topics/Tab.Messages/message-display/expanded-message.tsx

@@ -9,7 +9,6 @@
  * by the Apache License, Version 2.0
  */
 
-import { Box, Flex, useColorModeValue } from '@redpanda-data/ui';
 import React, { type FC, type ReactNode, useCallback } from 'react';
 
 import { MessageHeaders } from './message-headers';
@@ -25,14 +24,14 @@ const ExpandedMessageFooter: FC<{ children?: ReactNode; onDownloadRecord?: () =>
   children,
   onDownloadRecord,
 }) => (
-  <Flex gap={2} my={4} style={{ justifyContent: 'flex-end' }}>
+  <div className="my-4 flex justify-end gap-2">
     {children}
     {Boolean(onDownloadRecord) && (
       <Button onClick={onDownloadRecord} variant="outline">
         Download Record
       </Button>
     )}
-  </Flex>
+  </div>
 );
 
 type ExpandedMessageProps = {
@@ -57,7 +56,6 @@ export const ExpandedMessage: FC<ExpandedMessageProps> = React.memo(
     onCopyKey,
     onCopyValue,
   }) => {
-    const bg = useColorModeValue('gray.50', 'gray.600');
     const handleLoadLargeMessage = useCallback(
       () =>
         onLoadLargeMessage && topicName !== undefined
@@ -80,7 +78,7 @@ export const ExpandedMessage: FC<ExpandedMessageProps> = React.memo(
     }, [msg, onCopyValue]);
 
     return (
-      <Box bg={bg} px={10} py={6}>
+      <div className="bg-muted/30 px-10 py-6">
         <MessageMetaData msg={msg} />
         <Tabs defaultValue="value">
           <TabsList className="w-full" columns={3} layout="equal">
@@ -123,7 +121,7 @@ export const ExpandedMessage: FC<ExpandedMessageProps> = React.memo(
             ) : null}
           </TabsContent>
         </Tabs>
-      </Box>
+      </div>
     );
   }
 );

frontend/src/components/pages/topics/Tab.Messages/message-display/message-meta-data.tsx

@@ -9,13 +9,13 @@
  * by the Apache License, Version 2.0
  */
 
-import { Flex, Text } from '@redpanda-data/ui';
-import React from 'react';
+import type React from 'react';
 
 import { MessageSchema } from './message-schema';
 import type { TopicMessage } from '../../../../../state/rest-interfaces';
 import { numberToThousandsString } from '../../../../../utils/tsx-utils';
 import { prettyBytes, titleCase } from '../../../../../utils/utils';
+import { Text } from '../../../../redpanda-ui/components/typography';
 
 export const MessageMetaData = (props: { msg: TopicMessage }) => {
   const msg = props.msg;
@@ -36,17 +36,13 @@ export const MessageMetaData = (props: { msg: TopicMessage }) => {
   }
 
   return (
-    <Flex gap={10} my={6}>
+    <div className="my-6 flex gap-10">
       {Object.entries(data).map(([k, v]) => (
-        <Flex direction="column" key={k} rowGap=".4em">
-          <Text fontSize="md" fontWeight="600">
-            {k}
-          </Text>
-          <Text color="" fontSize="sm">
-            {v}
-          </Text>
-        </Flex>
+        <div className="flex flex-col gap-[0.4em]" key={k}>
+          <Text className="font-semibold text-base">{k}</Text>
+          <Text className="text-sm">{v}</Text>
+        </div>
       ))}
-    </Flex>
+    </div>
   );
 };

frontend/src/components/pages/topics/Tab.Messages/message-display/payload-component.tsx

@@ -9,12 +9,13 @@
  * by the Apache License, Version 2.0
  */
 
-import { Button, Flex, useToast } from '@redpanda-data/ui';
 import type { ReactNode } from 'react';
 import { useMemo, useState } from 'react';
+import { toast } from 'sonner';
 
 import type { Payload } from '../../../../../state/rest-interfaces';
 import { KowlJsonView } from '../../../../misc/kowl-json-view';
+import { Button } from '../../../../redpanda-ui/components/button';
 import { getControlCharacterName } from '../helpers';
 
 // Regex for checking printable ASCII characters
@@ -64,6 +65,7 @@ type PayloadRenderData =
   | { type: 'json'; content: string | object | null | undefined }
   | { type: 'error'; content: string };
 
+// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex payload parsing
 function preparePayloadData(payload: Payload): PayloadRenderData {
   try {
     if (payload === null || payload === undefined || payload.payload === null || payload.payload === undefined) {
@@ -120,41 +122,33 @@ function preparePayloadData(payload: Payload): PayloadRenderData {
   }
 }
 
-// biome-ignore lint/complexity/noExcessiveCognitiveComplexity: complex business logic
 export const PayloadComponent = (p: { payload: Payload; loadLargeMessage: () => Promise<void> }) => {
   const { payload, loadLargeMessage } = p;
-  const toast = useToast();
   const [isLoadingLargeMessage, setLoadingLargeMessage] = useState(false);
   const renderData = useMemo(() => preparePayloadData(payload), [payload]);
 
   if (payload.isPayloadTooLarge) {
     return (
-      <Flex flexDirection="column" gap="4">
-        <Flex alignItems="center" gap="2">
+      <div className="flex flex-col gap-4">
+        <div className="flex items-center gap-2">
           Because this message size exceeds the display limit, loading it could cause performance degradation.
-        </Flex>
+        </div>
         <Button
+          className="w-40"
           data-testid="load-anyway-button"
           isLoading={isLoadingLargeMessage}
-          loadingText="Loading..."
           onClick={() => {
             setLoadingLargeMessage(true);
             loadLargeMessage()
-              .catch((err) =>
-                toast({
-                  status: 'error',
-                  description: err instanceof Error ? err.message : String(err),
-                })
-              )
+              .catch((err) => toast.error(err instanceof Error ? err.message : String(err)))
               .finally(() => setLoadingLargeMessage(false));
           }}
-          size="small"
+          size="sm"
           variant="outline"
-          width="10rem"
         >
           Load anyway
         </Button>
-      </Flex>
+      </div>
     );
   }
 

frontend/src/components/pages/topics/Tab.Messages/message-display/troubleshoot-report-viewer.tsx

@@ -9,10 +9,12 @@
  * by the Apache License, Version 2.0
  */
 
-import { Alert, AlertDescription, AlertIcon, AlertTitle, Box, Grid, GridItem, Heading } from '@redpanda-data/ui';
-import { useState } from 'react';
+import { AlertTriangle } from 'lucide-react';
+import { Fragment, useState } from 'react';
 
 import type { Payload } from '../../../../../state/rest-interfaces';
+import { Alert, AlertDescription, AlertTitle } from '../../../../redpanda-ui/components/alert';
+import { Heading } from '../../../../redpanda-ui/components/typography';
 
 export const TroubleshootReportViewer = (props: { payload: Payload }) => {
   const report = props.payload.troubleshootReport;
@@ -26,18 +28,11 @@ export const TroubleshootReportViewer = (props: { payload: Payload }) => {
   }
 
   return (
-    <Box mb="4" mt="4">
+    <div className="my-4">
       <Heading as="h4">Deserialization Troubleshoot Report</Heading>
-      <Alert background="red.50" flexDirection="column" my={4} status="error" variant="subtle">
-        <AlertTitle
-          alignItems="center"
-          alignSelf="flex-start"
-          display="flex"
-          flexDirection="row"
-          fontWeight="normal"
-          pb="4"
-        >
-          <AlertIcon /> Errors were encountered when deserializing this message
+      <Alert className="mt-4" icon={<AlertTriangle />} variant="destructive">
+        <AlertTitle className="flex items-center font-normal [&]:line-clamp-none">
+          Errors were encountered when deserializing this message
           <button
             className="cursor-pointer border-none bg-transparent pl-2 font-medium text-primary underline underline-offset-4"
             onClick={() => setShow(!show)}
@@ -46,36 +41,19 @@ export const TroubleshootReportViewer = (props: { payload: Payload }) => {
             {show ? 'Hide' : 'Show'}
           </button>
         </AlertTitle>
-        <AlertDescription display={show ? undefined : 'none'} whiteSpace="pre-wrap">
-          <Grid columnGap="4" rowGap="1" templateColumns="auto 1fr">
-            {report.map((e) => (
-              <>
-                <GridItem
-                  fontWeight="bold"
-                  key={`${e.serdeName}-name`}
-                  pl="8"
-                  px="5"
-                  py="2"
-                  textTransform="capitalize"
-                  w="100%"
-                >
-                  {e.serdeName}
-                </GridItem>
-                <GridItem
-                  background="red.100"
-                  fontFamily="monospace"
-                  key={`${e.serdeName}-message`}
-                  px="5"
-                  py="2"
-                  w="100%"
-                >
-                  {e.message}
-                </GridItem>
-              </>
-            ))}
-          </Grid>
-        </AlertDescription>
+        {show ? (
+          <AlertDescription className="whitespace-pre-wrap">
+            <div className="grid grid-cols-[auto_1fr] gap-x-4 gap-y-1">
+              {report.map((e) => (
+                <Fragment key={e.serdeName}>
+                  <div className="w-full px-5 py-2 pl-8 font-bold capitalize">{e.serdeName}</div>
+                  <div className="w-full bg-red-100 px-5 py-2 font-mono">{e.message}</div>
+                </Fragment>
+              ))}
+            </div>
+          </AlertDescription>
+        ) : null}
       </Alert>
-    </Box>
+    </div>
   );
 };