[Logs Shared] Types refactor (#173819)

## 📓 Summary

Closes #173493 

This work improves typing for the `dynamic` util for lazily exported
components, catching a couple of typing issues.

---------

Co-authored-by: Marco Antonio Ghiani <[email protected]>

x-pack/plugins/infra/public/pages/logs/log_entry_categories/sections/top_categories/category_example_message.tsx

@@ -52,13 +52,15 @@ export const CategoryExampleMessage: React.FunctionComponent<{
   const openMenu = useCallback(() => setIsMenuOpen(true), []);
   const closeMenu = useCallback(() => setIsMenuOpen(false), []);
 
+  const time = moment(timestamp).toISOString();
+
   const viewInStreamLinkProps = useLinkProps({
     app: 'logs',
     pathname: 'stream',
     search: {
       logPosition: encode({
         end: moment(timeRange.endTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
-        position: { tiebreaker, time: moment(timestamp).toISOString() },
+        position: { tiebreaker, time },
         start: moment(timeRange.startTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
         streamLive: false,
       }),
@@ -79,7 +81,7 @@ export const CategoryExampleMessage: React.FunctionComponent<{
       onMouseLeave={setNotHovered}
     >
       <LogEntryColumn {...columnWidths[timestampColumnId]}>
-        <LogEntryTimestampColumn format={exampleTimestampFormat} time={timestamp} />
+        <LogEntryTimestampColumn format={exampleTimestampFormat} time={time} />
       </LogEntryColumn>
       <LogEntryColumn {...columnWidths[messageColumnId]}>
         <LogEntryMessageColumn

x-pack/plugins/infra/public/pages/logs/log_entry_rate/sections/anomalies/log_entry_example.tsx

@@ -96,13 +96,15 @@ export const LogEntryExampleMessage: React.FunctionComponent<Props> = ({
   // handle special cases for the dataset value
   const humanFriendlyDataset = getFriendlyNameForPartitionId(dataset);
 
+  const time = moment(timestamp).toISOString();
+
   const viewInStreamLinkProps = useLinkProps({
     app: 'logs',
     pathname: 'stream',
     search: {
       logPosition: encode({
         end: moment(timeRange.endTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
-        position: { tiebreaker, time: moment(timestamp).toISOString() },
+        position: { tiebreaker, time },
         start: moment(timeRange.startTime).format('YYYY-MM-DDTHH:mm:ss.SSSZ'),
         streamLive: false,
       }),
@@ -182,7 +184,7 @@ export const LogEntryExampleMessage: React.FunctionComponent<Props> = ({
       onMouseLeave={setItemIsNotHovered}
     >
       <LogEntryColumn {...columnWidths[timestampColumnId]}>
-        <LogEntryTimestampColumn format={exampleTimestampFormat} time={timestamp} />
+        <LogEntryTimestampColumn format={exampleTimestampFormat} time={time} />
       </LogEntryColumn>
       <LogEntryColumn {...columnWidths[messageColumnId]}>
         <LogEntryMessageColumn
@@ -301,7 +303,10 @@ export const LogEntryExampleMessageHeaders: React.FunctionComponent<{
                 data-test-subj="logColumnHeader messageLogColumnHeader"
                 key={columnConfiguration.messageColumn.id}
               >
-                Message
+                {i18n.translate(
+                  'xpack.infra.logEntryExampleMessageHeaders.logColumnHeader.messageLabel',
+                  { defaultMessage: 'Message' }
+                )}
               </LogColumnHeader>
             );
           } else if (isFieldLogColumnConfiguration(columnConfiguration)) {

x-pack/plugins/logs_shared/common/dynamic.tsx

@@ -5,10 +5,10 @@
  * 2.0.
  */
 
-import React, { lazy, Suspense } from 'react';
+import React, { ComponentProps, ComponentType, lazy, Suspense } from 'react';
 
-type LoadableComponent = () => Promise<{
-  default: React.ComponentType<any>;
+type LoadableComponent<TComponent extends ComponentType<any>> = () => Promise<{
+  default: TComponent;
 }>;
 
 interface DynamicOptions {
@@ -21,10 +21,13 @@ interface DynamicOptions {
  * @example
  * const Header = dynamic(() => import('./components/header'))
  */
-export function dynamic(loader: LoadableComponent, options: DynamicOptions = {}) {
+export function dynamic<TComponent extends ComponentType<any>>(
+  loader: LoadableComponent<TComponent>,
+  options: DynamicOptions = {}
+) {
   const Component = lazy(loader);
 
-  return (props: any) => (
+  return (props: ComponentProps<TComponent>) => (
     <Suspense fallback={options.fallback ?? null}>
       <Component {...props} />
     </Suspense>

x-pack/plugins/logs_shared/public/components/log_ai_assistant/index.tsx

@@ -4,18 +4,16 @@
  * 2.0; you may not use this file except in compliance with the Elastic License
  * 2.0.
  */
-import { ObservabilityAIAssistantPluginStart } from '@kbn/observability-ai-assistant-plugin/public';
 import React from 'react';
 import { dynamic } from '../../../common/dynamic';
+import { LogAIAssistantProps } from './log_ai_assistant';
 
 export const LogAIAssistant = dynamic(() => import('./log_ai_assistant'));
 
 export function createLogAIAssistant({
   observabilityAIAssistant,
-}: {
-  observabilityAIAssistant: ObservabilityAIAssistantPluginStart;
-}) {
-  return ({ ...props }) => (
+}: Pick<LogAIAssistantProps, 'observabilityAIAssistant'>) {
+  return (props: Omit<LogAIAssistantProps, 'observabilityAIAssistant'>) => (
     <LogAIAssistant observabilityAIAssistant={observabilityAIAssistant} {...props} />
   );
 }

x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_context_menu.tsx

@@ -19,13 +19,13 @@ import {
 import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { LogEntryColumnContent } from './log_entry_column';
 
-interface LogEntryContextMenuItem {
+export interface LogEntryContextMenuItem {
   label: string;
   onClick: (e: React.MouseEvent) => void;
   href?: string;
 }
 
-interface LogEntryContextMenuProps {
+export interface LogEntryContextMenuProps {
   'aria-label'?: string;
   isOpen: boolean;
   onOpen: () => void;

x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_field_column.tsx

@@ -19,7 +19,7 @@ import {
   WrapMode,
 } from './text_styles';
 
-interface LogEntryFieldColumnProps {
+export interface LogEntryFieldColumnProps {
   columnValue: LogColumn;
   highlights: LogColumn[];
   isActiveHighlight: boolean;

x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_message_column.tsx

@@ -24,7 +24,7 @@ import {
   WrapMode,
 } from './text_styles';
 
-interface LogEntryMessageColumnProps {
+export interface LogEntryMessageColumnProps {
   columnValue: LogColumn;
   highlights: LogColumn[];
   isActiveHighlight: boolean;

x-pack/plugins/logs_shared/public/components/logging/log_text_stream/log_entry_timestamp_column.tsx

@@ -11,7 +11,7 @@ import { euiStyled } from '@kbn/kibana-react-plugin/common';
 import { TimeFormat, useFormattedTime } from '../../formatted_time';
 import { LogEntryColumnContent } from './log_entry_column';
 
-interface LogEntryTimestampColumnProps {
+export interface LogEntryTimestampColumnProps {
   format?: TimeFormat;
   time: string;
   render?: (time: string) => React.ReactNode;

x-pack/plugins/logs_shared/public/components/logging/log_text_stream/scrollable_log_text_stream_view.tsx

@@ -28,7 +28,7 @@ import { LogDateRow } from './log_date_row';
 import { LogEntry } from '../../../../common/log_entry';
 import { LogColumnRenderConfiguration } from '../../../utils/log_column_render_configuration';
 
-interface ScrollableLogTextStreamViewProps {
+export interface ScrollableLogTextStreamViewProps {
   columnConfigurations: LogColumnRenderConfiguration[];
   items: StreamItem[];
   scale: TextScale;