refactor(coral): Update copy for topic messages (#1589)

* Update copy for topic messages --------- Signed-off-by: Mirjam Aulbach <mirjam.aulbach@aiven.io>
Aiven-Open · Aug 9, 2023 · 1c9dca5 · 1c9dca5
1 parent 92f59e0
commit 1c9dca5
Show file tree

Hide file tree

Showing 4 changed files with 16 additions and 13 deletions.
diff --git a/coral/src/app/features/topics/details/messages/TopicMessages.test.tsx b/coral/src/app/features/topics/details/messages/TopicMessages.test.tsx
@@ -48,7 +48,9 @@ describe("TopicMessages", () => {
         queryClient: true,
       }
     );
-    screen.getByText("Select offset and Update results.");
+    screen.getByText(
+      "To view messages in this topic, select the number of messages you'd like to view and select Fetch messages."
+    );
   });
   it("requests and displays all messages when Update results is pressed", async () => {
     mockGetTopicMessages.mockResolvedValue(mockGetTopicMessagesResponse);
@@ -65,7 +67,7 @@ describe("TopicMessages", () => {
     );
     await userEvent.click(
       screen.getByRole("button", {
-        name: "Consume and display the latest 5 messages from topic test",
+        name: "Fetch and display the latest 5 messages from topic test",
       })
     );
     await waitFor(() => expect(mockGetTopicMessages).toHaveBeenCalledTimes(1));
@@ -95,11 +97,11 @@ describe("TopicMessages", () => {
     );
     await userEvent.click(
       screen.getByRole("button", {
-        name: "Consume and display the latest 5 messages from topic test",
+        name: "Fetch and display the latest 5 messages from topic test",
       })
     );
     await waitFor(() => {
-      screen.getByText("This Topic contains no Messages.");
+      screen.getByText("This Topic contains no messages.");
     });
   });
 
@@ -128,7 +130,7 @@ describe("TopicMessages", () => {
       );
       await userEvent.click(
         screen.getByRole("button", {
-          name: "Consume and display the latest 25 messages from topic test",
+          name: "Fetch and display the latest 25 messages from topic test",
         })
       );
       await waitFor(() => {
@@ -155,7 +157,7 @@ describe("TopicMessages", () => {
       await userEvent.click(screen.getByRole("radio", { name: "50" }));
       await userEvent.click(
         screen.getByRole("button", {
-          name: "Consume and display the latest 50 messages from topic test",
+          name: "Fetch and display the latest 50 messages from topic test",
         })
       );
       await waitFor(() => {

diff --git a/coral/src/app/features/topics/details/messages/TopicMessages.tsx b/coral/src/app/features/topics/details/messages/TopicMessages.tsx
@@ -72,14 +72,15 @@ function TopicMessages() {
   function getTableContent() {
     if (!consumeResult) {
       return (
-        <EmptyState title="Consume Messages">
-          Select offset and Update results.
+        <EmptyState title="No messages displayed">
+          To view messages in this topic, select the number of messages
+          you&apos;d like to view and select Fetch messages.
         </EmptyState>
       );
     } else if (isNoContentResult(consumeResult)) {
       return (
         <EmptyState title="No messages">
-          This Topic contains no Messages.
+          This Topic contains no messages.
         </EmptyState>
       );
     } else {
@@ -110,10 +111,10 @@ function TopicMessages() {
               onClick={handleUpdateResultClick}
               disabled={isConsuming}
               loading={isConsuming}
-              aria-label={`Consume and display the latest ${offset} messages from topic ${topicName}`}
+              aria-label={`Fetch and display the latest ${offset} messages from topic ${topicName}`}
               icon={refreshIcon}
             >
-              Update results
+              Fetch messages
             </Button.Primary>
           </Box.Flex>,
         ]}

diff --git a/coral/src/app/features/topics/details/messages/components/TopicMessageOffsetFilter.test.tsx b/coral/src/app/features/topics/details/messages/components/TopicMessageOffsetFilter.test.tsx
@@ -39,7 +39,7 @@ describe("TopicMessageOffsetFilter", () => {
         disabled={true}
       />
     );
-    within(screen.getByRole("group", { name: "Offset" }))
+    within(screen.getByRole("group", { name: "Number of messages" }))
       .getAllByRole("radio")
       .forEach((option) => expect(option).toBeDisabled());
   });

diff --git a/coral/src/app/features/topics/details/messages/components/TopicMessageOffsetFilter.tsx b/coral/src/app/features/topics/details/messages/components/TopicMessageOffsetFilter.tsx
@@ -23,7 +23,7 @@ function TopicMessageOffsetFilter({
     <RadioButtonGroup
       name={"offset"}
       value={value}
-      labelText="Offset"
+      labelText="Number of messages"
       disabled={disabled}
       onChange={(value) => onChange(value as Offset)}
     >