Use TopNavControlButtonData for channel test button (#243)

Signed-off-by: Miki <miki@amazon.com>
(cherry picked from commit 6121bd4)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

public/pages/Channels/components/details/ChannelDetails.tsx

@@ -33,6 +33,7 @@ import { ChannelDetailItems } from './ChannelDetailItems';
 import { ChannelDetailsActions } from './ChannelDetailsActions';
 import { ChannelSettingsDetails } from './ChannelSettingsDetails';
 import PageHeader from "../../../../components/PageHeader/PageHeader";
+import { TopNavControlButtonData } from '../../../../../../../src/plugins/navigation/public';
 
 interface ChannelDetailsProps extends RouteComponentProps<{
   id: string
@@ -191,19 +192,12 @@ export function ChannelDetails(props: ChannelDetailsProps) {
       ),
     },
     {
-      renderComponent: (
-        <div style={{ display: 'flex', alignItems: 'center' }}>
-          <EuiSmallButton
-            data-test-subj="send-test-message-button"
-            onClick={sendTestMessage}
-            style={{ marginLeft: '10px' }}
-            disabled={!channel?.is_enabled}
-          >
-            Send test message
-          </EuiSmallButton>
-        </div>
-      ),
-    },
+      controlType: 'button',
+      testId: 'send-test-message-button',
+      isDisabled: !channel?.is_enabled,
+      run: sendTestMessage,
+      label: 'Send test message',
+    } as TopNavControlButtonData,
   ];
 
   const badgeComponent = <EuiFlexItem grow={false} style={{ paddingBottom: 5 }}>