FE: Add dropdown action to re-produce existing message into topic (#247)

frontend/src/components/Topics/Topic/Messages/Message.tsx

@@ -1,15 +1,19 @@
 import React from 'react';
 import useDataSaver from 'lib/hooks/useDataSaver';
-import { TopicMessage } from 'generated-sources';
+import { Action, ResourceType, TopicMessage } from 'generated-sources';
 import MessageToggleIcon from 'components/common/Icons/MessageToggleIcon';
 import IconButtonWrapper from 'components/common/Icons/IconButtonWrapper';
 import { Dropdown, DropdownItem } from 'components/common/Dropdown';
+import { ActionDropdownItem } from 'components/common/ActionComponent';
 import { formatTimestamp } from 'lib/dateTimeHelpers';
 import { JSONPath } from 'jsonpath-plus';
 import Ellipsis from 'components/common/Ellipsis/Ellipsis';
 import WarningRedIcon from 'components/common/Icons/WarningRedIcon';
 import Tooltip from 'components/common/Tooltip/Tooltip';
 import { useTimezone } from 'lib/hooks/useTimezones';
+import useAppParams from 'lib/hooks/useAppParams';
+import { RouteParamsClusterTopic } from 'lib/paths';
+import { useTopicActions } from 'components/contexts/TopicActionsContext';
 
 import MessageContent from './MessageContent/MessageContent';
 import * as S from './MessageContent/MessageContent.styled';
@@ -43,7 +47,24 @@ const Message: React.FC<Props> = ({
   contentFilters,
 }) => {
   const { currentTimezone } = useTimezone();
+  const { topicName } = useAppParams<RouteParamsClusterTopic>();
+  const { openSidebarWithMessage } = useTopicActions();
   const [isOpen, setIsOpen] = React.useState(false);
+
+  const message = {
+    timestamp,
+    timestampType,
+    offset,
+    key,
+    keySize,
+    partition,
+    value,
+    valueSize,
+    headers,
+    valueSerde,
+    keySerde,
+  };
+
   const savedMessageJson = {
     Value: value,
     Offset: offset,
@@ -142,10 +163,28 @@ const Message: React.FC<Props> = ({
         <td style={{ width: '5%' }}>
           {vEllipsisOpen && (
             <Dropdown>
-              <DropdownItem onClick={copyToClipboard}>
+              <DropdownItem
+                aria-label="Copy to clipboard"
+                onClick={copyToClipboard}
+              >
                 Copy to clipboard
               </DropdownItem>
-              <DropdownItem onClick={saveFile}>Save as a file</DropdownItem>
+              <DropdownItem aria-label="Save as a file" onClick={saveFile}>
+                Save as a file
+              </DropdownItem>
+              <ActionDropdownItem
+                aria-label="Reproduce message"
+                onClick={() => {
+                  openSidebarWithMessage(message);
+                }}
+                permission={{
+                  resource: ResourceType.TOPIC,
+                  action: Action.MESSAGES_PRODUCE,
+                  value: topicName,
+                }}
+              >
+                Reproduce message
+              </ActionDropdownItem>
             </Dropdown>
           )}
         </td>

frontend/src/components/Topics/Topic/Messages/__test__/Message.fixtures.ts

@@ -0,0 +1,57 @@
+import {
+  Action,
+  ResourceType,
+  TopicMessage,
+  TopicMessageTimestampTypeEnum,
+} from 'generated-sources';
+import { PreviewFilter } from 'components/Topics/Topic/Messages/Message';
+import { RolesType } from 'lib/permissions';
+
+export const mockMessageContentText = 'messageContentText';
+
+export const mockRoles: Map<string, Map<ResourceType, RolesType>> = new Map([
+  [
+    'test-cluster',
+    new Map([
+      [
+        ResourceType.TOPIC,
+        [
+          {
+            resource: ResourceType.TOPIC,
+            actions: [Action.MESSAGES_PRODUCE, Action.VIEW],
+            value: '.*',
+            clusters: ['test-cluster'],
+          },
+        ],
+      ],
+    ]),
+  ],
+]);
+
+export const mockNoRoles: Map<string, Map<ResourceType, RolesType>> = new Map([
+  ['test-cluster', new Map([])],
+]);
+
+export const mockMessageKey = '{"payload":{"subreddit":"learnprogramming"}}';
+
+export const mockMessageValue =
+  '{"payload":{"author":"DwaywelayTOP","archived":false,"name":"t3_11jshwd","id":"11jshwd"}}';
+export const mockMessage: TopicMessage = {
+  timestamp: new Date(),
+  timestampType: TopicMessageTimestampTypeEnum.CREATE_TIME,
+  offset: 0,
+  key: 'test-key',
+  partition: 6,
+  value: '{"data": "test"}',
+  headers: { header: 'test' },
+};
+
+export const mockKeyFilters: PreviewFilter = {
+  field: 'sub',
+  path: '$.payload.subreddit',
+};
+
+export const mockContentFilters: PreviewFilter = {
+  field: 'author',
+  path: '$.payload.author',
+};