[Timelines] remove ColumnToggle, Overflow and LoadingPanel deprecated and unused code (#206323)

## Summary

While working on replacing all `styled-components`with `@emotion/react`
I realized that there is some dead code in the Timelines plugin. Both
the `Overflow` and `ColumnToggle` components used in the `HoverActions`
code exported to other plugins are not used anywhere.

Moreover that `HoverConfig` logic has been deprecated for years now...

I thought about removing all the other hover action components
(`AddToTimeline`, `Copy`, `FilterIn` and `FilterOut`) but these are
currently in used in other plugins (`threat_intelligence` and
`kubernetes_security`) so the effort to replace these are a bit more
involved and will be done in a separate PR

This PR also removes an unused LoadingPanel component.

**No changes to the application are introduced in this PR!**

packages/kbn-babel-preset/styled_components_files.js

@@ -517,8 +517,6 @@ module.exports = {
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]timelines[\/\\]components[\/\\]timeline[\/\\]unified_components[\/\\]data_table[\/\\]custom_timeline_data_grid_body.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]timelines[\/\\]components[\/\\]timeline[\/\\]unified_components[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]security_solution[\/\\]public[\/\\]timelines[\/\\]components[\/\\]timeline[\/\\]unified_components[\/\\]styles.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]timelines[\/\\]public[\/\\]components[\/\\]hover_actions[\/\\]actions[\/\\]overflow.tsx/,
-    /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]timelines[\/\\]public[\/\\]components[\/\\]loading[\/\\]index.tsx/,
     /x-pack[\/\\]solutions[\/\\]security[\/\\]plugins[\/\\]timelines[\/\\]public[\/\\]mock[\/\\]test_providers.tsx/,
     /x-pack[\/\\]test[\/\\]plugin_functional[\/\\]plugins[\/\\]resolver_test[\/\\]public[\/\\]applications[\/\\]resolver_test[\/\\]index.tsx/,
     /src[\/\\]platform[\/\\]packages[\/\\]shared[\/\\]react[\/\\]kibana_context[\/\\]styled[\/\\]styled_provider.tsx/,

x-pack/platform/plugins/private/translations/translations/fr-FR.json

@@ -44221,12 +44221,9 @@
     "xpack.timelines.dragAndDrop.copyToClipboardTooltip": "Copier dans le Presse-papiers",
     "xpack.timelines.hoverActions.addToTimeline": "Ajouter à l'investigation de chronologie",
     "xpack.timelines.hoverActions.addToTimeline.addedFieldMessage": "Ajout effectué de {fieldOrValue} {isTimeline, select, true {à la chronologie} other {au modèle}}",
-    "xpack.timelines.hoverActions.columnToggleLabel": "Basculer la vue {field} dans le tableau",
     "xpack.timelines.hoverActions.fieldLabel": "Champ",
     "xpack.timelines.hoverActions.filterIn": "Inclure",
     "xpack.timelines.hoverActions.filterOut": "Exclure",
-    "xpack.timelines.hoverActions.moreActions": "Plus d'actions",
-    "xpack.timelines.hoverActions.nestedColumnToggleLabel": "Le champ {field} est un objet, et il est composé de champs imbriqués qui peuvent être ajoutés en tant que colonnes",
     "xpack.timelines.hoverActions.tooltipWithKeyboardShortcut.pressTooltipLabel": "Appuyer",
     "xpack.timelines.updated": "Mis à jour",
     "xpack.timelines.updating": "Mise à jour...",

x-pack/platform/plugins/private/translations/translations/ja-JP.json

@@ -44075,12 +44075,9 @@
     "xpack.timelines.dragAndDrop.copyToClipboardTooltip": "クリップボードにコピー",
     "xpack.timelines.hoverActions.addToTimeline": "タイムライン調査に追加",
     "xpack.timelines.hoverActions.addToTimeline.addedFieldMessage": "{fieldOrValue}を{isTimeline, select, true {タイムライン} other {テンプレート}}に追加しました",
-    "xpack.timelines.hoverActions.columnToggleLabel": "表の{field}列を切り替える",
     "xpack.timelines.hoverActions.fieldLabel": "フィールド",
     "xpack.timelines.hoverActions.filterIn": "フィルタリング",
     "xpack.timelines.hoverActions.filterOut": "除外",
-    "xpack.timelines.hoverActions.moreActions": "さらにアクションを表示",
-    "xpack.timelines.hoverActions.nestedColumnToggleLabel": "{field}フィールドはオブジェクトであり、列として追加できるネストされたフィールドに分解されます",
     "xpack.timelines.hoverActions.tooltipWithKeyboardShortcut.pressTooltipLabel": "プレス",
     "xpack.timelines.updated": "更新しました",
     "xpack.timelines.updating": "更新中...",

x-pack/platform/plugins/private/translations/translations/zh-CN.json

@@ -43420,12 +43420,9 @@
     "xpack.timelines.dragAndDrop.copyToClipboardTooltip": "复制到剪贴板",
     "xpack.timelines.hoverActions.addToTimeline": "添加到时间线调查",
     "xpack.timelines.hoverActions.addToTimeline.addedFieldMessage": "已将 {fieldOrValue} 添加到{isTimeline, select, true {时间线} other {模板}}",
-    "xpack.timelines.hoverActions.columnToggleLabel": "在表中切换 {field} 列",
     "xpack.timelines.hoverActions.fieldLabel": "字段",
     "xpack.timelines.hoverActions.filterIn": "筛选",
     "xpack.timelines.hoverActions.filterOut": "筛除",
-    "xpack.timelines.hoverActions.moreActions": "更多操作",
-    "xpack.timelines.hoverActions.nestedColumnToggleLabel": "{field} 字段是对象，并分解为可以添加为列的嵌套字段",
     "xpack.timelines.hoverActions.tooltipWithKeyboardShortcut.pressTooltipLabel": "按",
     "xpack.timelines.updated": "已更新",
     "xpack.timelines.updating": "正在更新......",

x-pack/solutions/security/plugins/security_solution/public/common/mock/mock_timelines_plugin.tsx

@@ -16,7 +16,6 @@ const useAddToTimeline = () => ({
 
 export const mockTimelines = {
   getLastUpdated: jest.fn(),
-  getLoadingPanel: jest.fn(),
   getFieldBrowser: jest.fn(),
   getUseAddToTimeline: () => useAddToTimeline,
 };

x-pack/solutions/security/plugins/security_solution/public/common/mock/storybook_providers.tsx

@@ -79,11 +79,9 @@ const coreMock = {
   timelines: {
     getHoverActions: () => ({
       getAddToTimelineButton: () => {},
-      getColumnToggleButton: () => {},
       getCopyButton: () => {},
       getFilterForValueButton: () => {},
       getFilterOutValueButton: () => {},
-      getOverflowButton: () => {},
     }),
   },
 } as unknown as CoreStart;

x-pack/solutions/security/plugins/security_solution/public/timelines/components/timeline/tabs/session/use_session_view.test.tsx

@@ -14,8 +14,8 @@ import { mockTimelineModel, TestProviders } from '../../../../../common/mock';
 import { useKibana } from '../../../../../common/lib/kibana';
 import { useDeepEqualSelector } from '../../../../../common/hooks/use_selector';
 import {
-  useTimelineFullScreen,
   useGlobalFullScreen,
+  useTimelineFullScreen,
 } from '../../../../../common/containers/use_full_screen';
 import { useSessionView, useSessionViewNavigation } from './use_session_view';
 import { TableId } from '@kbn/securitysolution-data-table';
@@ -61,7 +61,6 @@ jest.mock('../../../../../common/lib/kibana', () => {
         },
         timelines: {
           getLastUpdated: jest.fn(),
-          getLoadingPanel: jest.fn(),
         },
       },
     }),

x-pack/solutions/security/plugins/timelines/common/constants.ts

@@ -9,6 +9,3 @@ export const DEFAULT_MAX_TABLE_QUERY_SIZE = 10000;
 
 export const DELETED_SECURITY_SOLUTION_DATA_VIEW = 'DELETED_SECURITY_SOLUTION_DATA_VIEW';
 export const ENRICHMENT_DESTINATION_PATH = 'threat.enrichments';
-
-/** The default minimum width of a column (when a width for the column type is not specified) */
-export const DEFAULT_COLUMN_MIN_WIDTH = 180; // px

x-pack/solutions/security/plugins/timelines/public/components/hover_actions/actions/column_toggle.tsx

@@ -1,133 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { useCallback, useEffect, useMemo } from 'react';
-import { EuiContextMenuItem, EuiButtonEmpty, EuiButtonIcon, EuiToolTip } from '@elastic/eui';
-import { i18n } from '@kbn/i18n';
-
-import { DEFAULT_COLUMN_MIN_WIDTH } from '../../../../common/constants';
-import { ColumnHeaderOptions, defaultColumnHeaderType } from '../../../../common/types';
-import { stopPropagationAndPreventDefault } from '../../../../common/utils/accessibility';
-import { TooltipWithKeyboardShortcut } from '../../tooltip_with_keyboard_shortcut';
-import { getAdditionalScreenReaderOnlyContext } from '../utils';
-import { HoverActionComponentProps } from './types';
-
-export const COLUMN_TOGGLE = (field: string) =>
-  i18n.translate('xpack.timelines.hoverActions.columnToggleLabel', {
-    values: { field },
-    defaultMessage: 'Toggle {field} column in table',
-  });
-
-export const NESTED_COLUMN = (field: string) =>
-  i18n.translate('xpack.timelines.hoverActions.nestedColumnToggleLabel', {
-    values: { field },
-    defaultMessage:
-      'The {field} field is an object, and is broken down into nested fields which can be added as columns',
-  });
-
-export const COLUMN_TOGGLE_KEYBOARD_SHORTCUT = 'i';
-
-export interface ColumnToggleProps extends HoverActionComponentProps {
-  Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon | typeof EuiContextMenuItem;
-  isDisabled: boolean;
-  isObjectArray: boolean;
-  toggleColumn: (column: ColumnHeaderOptions) => void;
-}
-
-const ColumnToggleButton: React.FC<ColumnToggleProps> = React.memo(
-  ({
-    Component,
-    defaultFocusedButtonRef,
-    field,
-    isDisabled,
-    isObjectArray,
-    keyboardEvent,
-    ownFocus,
-    onClick,
-    showTooltip = false,
-    toggleColumn,
-    value,
-  }) => {
-    const label = isObjectArray ? NESTED_COLUMN(field) : COLUMN_TOGGLE(field);
-
-    const handleToggleColumn = useCallback(() => {
-      toggleColumn({
-        columnHeaderType: defaultColumnHeaderType,
-        id: field,
-        initialWidth: DEFAULT_COLUMN_MIN_WIDTH,
-      });
-      if (onClick != null) {
-        onClick();
-      }
-    }, [onClick, field, toggleColumn]);
-
-    useEffect(() => {
-      if (!ownFocus) {
-        return;
-      }
-      if (keyboardEvent?.key === COLUMN_TOGGLE_KEYBOARD_SHORTCUT) {
-        stopPropagationAndPreventDefault(keyboardEvent);
-        handleToggleColumn();
-      }
-    }, [handleToggleColumn, keyboardEvent, ownFocus]);
-
-    const button = useMemo(
-      () =>
-        Component ? (
-          <Component
-            aria-label={label}
-            data-test-subj={`toggle-field-${field}`}
-            icon="listAdd"
-            iconType="listAdd"
-            onClick={handleToggleColumn}
-            title={label}
-          >
-            {label}
-          </Component>
-        ) : (
-          <EuiButtonIcon
-            aria-label={label}
-            buttonRef={defaultFocusedButtonRef}
-            className="timelines__hoverActionButton"
-            data-test-subj={`toggle-field-${field}`}
-            data-colindex={1}
-            disabled={isDisabled}
-            id={field}
-            iconSize="s"
-            iconType="listAdd"
-            onClick={handleToggleColumn}
-          />
-        ),
-      [Component, defaultFocusedButtonRef, field, handleToggleColumn, isDisabled, label]
-    );
-
-    return showTooltip ? (
-      <EuiToolTip
-        content={
-          <TooltipWithKeyboardShortcut
-            additionalScreenReaderOnlyContext={getAdditionalScreenReaderOnlyContext({
-              field,
-              value,
-            })}
-            content={label}
-            shortcut={COLUMN_TOGGLE_KEYBOARD_SHORTCUT}
-            showShortcut={ownFocus}
-          />
-        }
-      >
-        {button}
-      </EuiToolTip>
-    ) : (
-      button
-    );
-  }
-);
-
-ColumnToggleButton.displayName = 'ColumnToggleButton';
-
-// eslint-disable-next-line import/no-default-export
-export { ColumnToggleButton as default };

x-pack/solutions/security/plugins/timelines/public/components/hover_actions/actions/overflow.test.tsx

@@ -1,45 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React from 'react';
-import { shallow } from 'enzyme';
-import OverflowButton from './overflow';
-
-describe('OverflowButton', () => {
-  const props = {
-    field: 'host.name',
-    ownFocus: false,
-    showTooltip: true,
-    value: 'mac',
-    closePopOver: jest.fn(),
-    items: [<div />],
-    isOverflowPopoverOpen: false,
-  };
-  test('should render a popover', () => {
-    const wrapper = shallow(<OverflowButton {...props} />);
-    expect(wrapper.find('EuiPopover').exists()).toBeTruthy();
-  });
-
-  test('the popover always contains a class that hides it when an overlay (e.g. the inspect modal) is displayed', () => {
-    const wrapper = shallow(<OverflowButton {...props} />);
-    expect(wrapper.find('EuiPopover').prop('panelClassName')).toEqual('withHoverActions__popover');
-  });
-
-  test('should enable repositionOnScroll', () => {
-    const wrapper = shallow(<OverflowButton {...props} />);
-    expect(wrapper.find('EuiPopover').prop('repositionOnScroll')).toEqual(true);
-  });
-
-  test('should render a tooltip if showTooltip is true', () => {
-    const testProps = {
-      ...props,
-      showTooltip: true,
-    };
-    const wrapper = shallow(<OverflowButton {...testProps} />);
-    expect(wrapper.find('EuiToolTip').exists()).toBeTruthy();
-  });
-});

x-pack/solutions/security/plugins/timelines/public/components/hover_actions/actions/overflow.tsx

@@ -1,142 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import React, { useEffect, useMemo } from 'react';
-import { i18n } from '@kbn/i18n';
-import {
-  EuiButtonIcon,
-  EuiButtonEmpty,
-  EuiContextMenuPanel,
-  EuiContextMenuItem,
-  EuiPopover,
-  EuiToolTip,
-} from '@elastic/eui';
-
-import styled from 'styled-components';
-import { stopPropagationAndPreventDefault } from '../../../../common/utils/accessibility';
-import { TooltipWithKeyboardShortcut } from '../../tooltip_with_keyboard_shortcut';
-import { getAdditionalScreenReaderOnlyContext } from '../utils';
-import { HoverActionComponentProps } from './types';
-
-export const MORE_ACTIONS = i18n.translate('xpack.timelines.hoverActions.moreActions', {
-  defaultMessage: 'More actions',
-});
-
-export const FILTER_OUT_VALUE_KEYBOARD_SHORTCUT = 'm';
-
-export interface OverflowButtonProps extends HoverActionComponentProps {
-  closePopOver: () => void;
-  Component?: typeof EuiButtonEmpty | typeof EuiButtonIcon | typeof EuiContextMenuItem;
-  items: JSX.Element[];
-  isOverflowPopoverOpen: boolean;
-}
-
-const StyledEuiContextMenuPanel = styled(EuiContextMenuPanel)`
-  visibility: inherit;
-`;
-
-const OverflowButton: React.FC<OverflowButtonProps> = React.memo(
-  ({
-    closePopOver,
-    Component,
-    defaultFocusedButtonRef,
-    field,
-    items,
-    isOverflowPopoverOpen,
-    keyboardEvent,
-    ownFocus,
-    onClick,
-    showTooltip = false,
-    value,
-  }) => {
-    useEffect(() => {
-      if (!ownFocus) {
-        return;
-      }
-      if (keyboardEvent?.key === FILTER_OUT_VALUE_KEYBOARD_SHORTCUT) {
-        stopPropagationAndPreventDefault(keyboardEvent);
-        if (onClick != null) {
-          onClick();
-        }
-      }
-    }, [keyboardEvent, onClick, ownFocus]);
-
-    const popover = useMemo(
-      () => (
-        <EuiPopover
-          button={
-            Component ? (
-              <Component
-                aria-label={MORE_ACTIONS}
-                buttonRef={defaultFocusedButtonRef}
-                data-test-subj={`more-actions-${field}`}
-                icon="boxesHorizontal"
-                iconType="boxesHorizontal"
-                onClick={onClick}
-                title={MORE_ACTIONS}
-              >
-                {MORE_ACTIONS}
-              </Component>
-            ) : (
-              <EuiButtonIcon
-                aria-label={MORE_ACTIONS}
-                buttonRef={defaultFocusedButtonRef}
-                className="timelines__hoverActionButton"
-                data-test-subj={`more-actions-${field}`}
-                iconSize="s"
-                iconType="boxesHorizontal"
-                onClick={onClick}
-              />
-            )
-          }
-          isOpen={isOverflowPopoverOpen}
-          closePopover={closePopOver}
-          panelPaddingSize="none"
-          panelClassName="withHoverActions__popover"
-          repositionOnScroll={true}
-          anchorPosition="downLeft"
-        >
-          <StyledEuiContextMenuPanel items={items} />
-        </EuiPopover>
-      ),
-      [
-        Component,
-        defaultFocusedButtonRef,
-        field,
-        onClick,
-        isOverflowPopoverOpen,
-        closePopOver,
-        items,
-      ]
-    );
-
-    return showTooltip ? (
-      <EuiToolTip
-        content={
-          <TooltipWithKeyboardShortcut
-            additionalScreenReaderOnlyContext={getAdditionalScreenReaderOnlyContext({
-              field,
-              value,
-            })}
-            content={MORE_ACTIONS}
-            shortcut={FILTER_OUT_VALUE_KEYBOARD_SHORTCUT}
-            showShortcut={ownFocus}
-          />
-        }
-      >
-        {popover}
-      </EuiToolTip>
-    ) : (
-      popover
-    );
-  }
-);
-
-OverflowButton.displayName = 'OverflowButton';
-
-// eslint-disable-next-line import/no-default-export
-export { OverflowButton as default };

x-pack/solutions/security/plugins/timelines/public/components/hover_actions/index.tsx

@@ -10,16 +10,13 @@ import React, { ReactElement } from 'react';
 import { Provider } from 'react-redux';
 import { Store } from 'redux';
 import type { AddToTimelineButtonProps } from './actions/add_to_timeline';
-import type { ColumnToggleProps } from './actions/column_toggle';
 import type { CopyProps } from './actions/copy';
-import type { HoverActionComponentProps, FilterValueFnArgs } from './actions/types';
-import type { OverflowButtonProps } from './actions/overflow';
+import type { FilterValueFnArgs, HoverActionComponentProps } from './actions/types';
 
 export interface HoverActionsConfig {
   getAddToTimelineButton: (
     props: AddToTimelineButtonProps
   ) => ReactElement<AddToTimelineButtonProps>;
-  getColumnToggleButton: (props: ColumnToggleProps) => ReactElement<ColumnToggleProps>;
   getCopyButton: (props: CopyProps) => ReactElement<CopyProps>;
   getFilterForValueButton: (
     props: HoverActionComponentProps & FilterValueFnArgs
@@ -27,7 +24,6 @@ export interface HoverActionsConfig {
   getFilterOutValueButton: (
     props: HoverActionComponentProps & FilterValueFnArgs
   ) => ReactElement<HoverActionComponentProps & FilterValueFnArgs>;
-  getOverflowButton: (props: OverflowButtonProps) => ReactElement<HoverActionComponentProps>;
 }
 
 const AddToTimelineButtonLazy = React.lazy(() => import('./actions/add_to_timeline'));
@@ -43,15 +39,6 @@ const getAddToTimelineButtonLazy = (store: Store, props: AddToTimelineButtonProp
   );
 };
 
-const ColumnToggleButtonLazy = React.lazy(() => import('./actions/column_toggle'));
-const getColumnToggleButtonLazy = (props: ColumnToggleProps) => {
-  return (
-    <React.Suspense fallback={<EuiLoadingSpinner />}>
-      <ColumnToggleButtonLazy {...props} />
-    </React.Suspense>
-  );
-};
-
 const CopyButtonLazy = React.lazy(() => import('./actions/copy'));
 const getCopyButtonLazy = (props: CopyProps) => {
   return (
@@ -79,21 +66,10 @@ const getFilterOutValueButtonLazy = (props: HoverActionComponentProps & FilterVa
   );
 };
 
-const OverflowButtonLazy = React.lazy(() => import('./actions/overflow'));
-const getOverflowButtonLazy = (props: OverflowButtonProps) => {
-  return (
-    <React.Suspense fallback={<EuiLoadingSpinner />}>
-      <OverflowButtonLazy {...props} />
-    </React.Suspense>
-  );
-};
-
 export const getHoverActions = (store?: Store): HoverActionsConfig => ({
   // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
   getAddToTimelineButton: getAddToTimelineButtonLazy.bind(null, store!),
-  getColumnToggleButton: getColumnToggleButtonLazy,
   getCopyButton: getCopyButtonLazy,
   getFilterForValueButton: getFilterForValueButtonLazy,
   getFilterOutValueButton: getFilterOutValueButtonLazy,
-  getOverflowButton: getOverflowButtonLazy,
 });

x-pack/solutions/security/plugins/timelines/public/components/index.tsx

@@ -6,4 +6,3 @@
  */
 
 export * from './last_updated';
-export * from './loading';

x-pack/solutions/security/plugins/timelines/public/components/loading/index.tsx

@@ -1,98 +0,0 @@
-/*
- * Copyright Elasticsearch B.V. and/or licensed to Elasticsearch B.V. under one
- * or more contributor license agreements. Licensed under the Elastic License
- * 2.0; you may not use this file except in compliance with the Elastic License
- * 2.0.
- */
-
-import { EuiFlexGroup, EuiFlexItem, EuiLoadingSpinner, EuiPanel, EuiText } from '@elastic/eui';
-import React from 'react';
-import styled from 'styled-components';
-
-const SpinnerFlexItem = styled(EuiFlexItem)`
-  margin-right: 5px;
-`;
-
-SpinnerFlexItem.displayName = 'SpinnerFlexItem';
-
-export interface LoadingPanelProps {
-  dataTestSubj?: string;
-  text: string | React.ReactNode;
-  height: number | string;
-  showBorder?: boolean;
-  width: number | string;
-  zIndex?: number | string;
-  position?: string;
-}
-
-export const LoadingPanel = React.memo<LoadingPanelProps>(
-  ({
-    dataTestSubj = '',
-    height = 'auto',
-    showBorder = true,
-    text,
-    width,
-    position = 'relative',
-    zIndex = 'inherit',
-  }) => (
-    <LoadingStaticPanel
-      className="app-loading"
-      height={height}
-      width={width}
-      position={position}
-      zIndex={zIndex}
-    >
-      <LoadingStaticContentPanel>
-        <EuiPanel
-          data-test-subj={dataTestSubj}
-          className={showBorder ? '' : 'euiPanel-loading-hide-border'}
-        >
-          <EuiFlexGroup alignItems="center" direction="row" gutterSize="none">
-            <SpinnerFlexItem grow={false}>
-              <EuiLoadingSpinner size="m" />
-            </SpinnerFlexItem>
-
-            <EuiFlexItem grow={false}>
-              <EuiText>{text}</EuiText>
-            </EuiFlexItem>
-          </EuiFlexGroup>
-        </EuiPanel>
-      </LoadingStaticContentPanel>
-    </LoadingStaticPanel>
-  )
-);
-
-LoadingPanel.displayName = 'LoadingPanel';
-
-export const LoadingStaticPanel = styled.div<{
-  height: number | string;
-  position: string;
-  width: number | string;
-  zIndex: number | string;
-}>`
-  height: ${({ height }) => height};
-  position: ${({ position }) => position};
-  width: ${({ width }) => width};
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  z-index: ${({ zIndex }) => zIndex};
-`;
-
-LoadingStaticPanel.displayName = 'LoadingStaticPanel';
-
-export const LoadingStaticContentPanel = styled.div`
-  flex: 0 0 auto;
-  align-self: center;
-  text-align: center;
-  height: fit-content;
-  .euiPanel.euiPanel--paddingMedium {
-    padding: 10px;
-  }
-`;
-
-LoadingStaticContentPanel.displayName = 'LoadingStaticContentPanel';
-
-// eslint-disable-next-line import/no-default-export
-export { LoadingPanel as default };

x-pack/solutions/security/plugins/timelines/public/methods/index.tsx

@@ -7,7 +7,7 @@
 
 import React, { lazy, Suspense } from 'react';
 import { EuiLoadingSpinner } from '@elastic/eui';
-import { LastUpdatedAtProps, LoadingPanelProps } from '../components';
+import { LastUpdatedAtProps } from '../components';
 
 const LastUpdatedLazy = lazy(() => import('../components/last_updated'));
 export const getLastUpdatedLazy = (props: LastUpdatedAtProps) => {
@@ -17,12 +17,3 @@ export const getLastUpdatedLazy = (props: LastUpdatedAtProps) => {
     </Suspense>
   );
 };
-
-const LoadingPanelLazy = lazy(() => import('../components/loading'));
-export const getLoadingPanelLazy = (props: LoadingPanelProps) => {
-  return (
-    <Suspense fallback={<EuiLoadingSpinner />}>
-      <LoadingPanelLazy {...props} />
-    </Suspense>
-  );
-};

x-pack/solutions/security/plugins/timelines/public/mock/mock_hover_actions.tsx

@@ -10,15 +10,9 @@ export const mockHoverActions = {
   getAddToTimelineButton: () => (
     <span data-test-subj="test-add-to-timeline">{'Add To Timeline'}</span>
   ),
-  getColumnToggleButton: () => <span data-test-subj="test-column-toggle">{'Column Toggle'}</span>,
   getCopyButton: () => <span data-test-subj="test-copy-button">{'Copy button'}</span>,
   getFilterForValueButton: () => <span data-test-subj="test-filter-for">{'Filter button'}</span>,
   getFilterOutValueButton: () => (
     <span data-test-subj="test-filter-out">{'Filter out button'}</span>
   ),
-  getOverflowButton: (props: { field: string }) => (
-    <div data-test-subj={`more-actions-${props.field}`} {...props}>
-      {'Overflow button'}
-    </div>
-  ),
 };

x-pack/solutions/security/plugins/timelines/public/mock/plugin_mock.tsx

@@ -5,14 +5,13 @@
  * 2.0.
  */
 import React from 'react';
-import { LastUpdatedAt, LastUpdatedAtProps, LoadingPanel, LoadingPanelProps } from '../components';
+import { LastUpdatedAt, LastUpdatedAtProps } from '../components';
 import { useAddToTimeline, useAddToTimelineSensor } from '../hooks/use_add_to_timeline';
 import { mockHoverActions } from './mock_hover_actions';
 
 export const createTGridMocks = () => ({
   getHoverActions: () => mockHoverActions,
   getLastUpdated: (props: LastUpdatedAtProps) => <LastUpdatedAt {...props} />,
-  getLoadingPanel: (props: LoadingPanelProps) => <LoadingPanel {...props} />,
   getUseAddToTimeline: () => useAddToTimeline,
   getUseAddToTimelineSensor: () => useAddToTimelineSensor,
 });

x-pack/solutions/security/plugins/timelines/public/plugin.ts

@@ -6,13 +6,13 @@
  */
 
 import { Store, Unsubscribe } from 'redux';
-import type { CoreSetup, Plugin, CoreStart } from '@kbn/core/public';
-import { getLastUpdatedLazy, getLoadingPanelLazy } from './methods';
-import type { TimelinesUIStart, TimelinesStartPlugins } from './types';
+import type { CoreSetup, CoreStart, Plugin } from '@kbn/core/public';
+import { getLastUpdatedLazy } from './methods';
+import type { TimelinesStartPlugins, TimelinesUIStart } from './types';
 import { useAddToTimeline, useAddToTimelineSensor } from './hooks/use_add_to_timeline';
 import { getHoverActions, HoverActionsConfig } from './components/hover_actions';
 import { timelineReducer } from './store/timeline/reducer';
-import { LastUpdatedAtProps, LoadingPanelProps } from './components';
+import { LastUpdatedAtProps } from './components';
 
 export class TimelinesPlugin implements Plugin<void, TimelinesUIStart> {
   private _store: Store | undefined;
@@ -36,9 +36,6 @@ export class TimelinesPlugin implements Plugin<void, TimelinesUIStart> {
       getTimelineReducer: () => {
         return timelineReducer;
       },
-      getLoadingPanel: (props: LoadingPanelProps) => {
-        return getLoadingPanelLazy(props);
-      },
       getLastUpdated: (props: LastUpdatedAtProps) => {
         return getLastUpdatedLazy(props);
       },

x-pack/solutions/security/plugins/timelines/public/types.ts

@@ -12,10 +12,10 @@ import { CoreStart } from '@kbn/core/public';
 import type { DataPublicPluginStart } from '@kbn/data-plugin/public';
 import { CasesPublicStart } from '@kbn/cases-plugin/public';
 import { ApmBase } from '@elastic/apm-rum';
-import type { UseAddToTimelineProps, UseAddToTimeline } from './hooks/use_add_to_timeline';
+import type { UseAddToTimeline, UseAddToTimelineProps } from './hooks/use_add_to_timeline';
 import { HoverActionsConfig } from './components/hover_actions';
 import { LastUpdatedAtProps } from './components/last_updated';
-import { LoadingPanelProps } from './components/loading';
+
 export interface TimelinesUIStart {
   /**
    * @deprecated Use cell-actions package instead
@@ -23,7 +23,6 @@ export interface TimelinesUIStart {
   getHoverActions: () => HoverActionsConfig;
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   getTimelineReducer: () => any;
-  getLoadingPanel: (props: LoadingPanelProps) => ReactElement<LoadingPanelProps>;
   getLastUpdated: (props: LastUpdatedAtProps) => ReactElement<LastUpdatedAtProps>;
   getUseAddToTimeline: () => (props: UseAddToTimelineProps) => UseAddToTimeline;
   getUseAddToTimelineSensor: () => (api: SensorAPI) => void;