From 499b5e9731e52601dbebb99095735bdc9380b9cc Mon Sep 17 00:00:00 2001 From: Kibana Machine <42973632+kibanamachine@users.noreply.github.com> Date: Thu, 4 May 2023 05:21:40 -0400 Subject: [PATCH] [8.8] Fix Alerts table inspect modal incomplete title (#156488) (#156648) # Backport This will backport the following commits from `main` to `8.8`: - [Fix Alerts table inspect modal incomplete title (#156488)](https://github.com/elastic/kibana/pull/156488) ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport) Co-authored-by: Pablo Machado --- .../application/sections/alerts_table/empty_state.tsx | 3 ++- .../toolbar/components/inspect/index.test.tsx | 8 +++++++- .../alerts_table/toolbar/components/inspect/index.tsx | 7 ++++++- .../toolbar/components/inspect/modal.test.tsx | 1 + .../alerts_table/toolbar/components/inspect/modal.tsx | 7 +++++-- .../sections/alerts_table/toolbar/toolbar_visibility.tsx | 5 ++++- .../application/sections/alerts_table/translations.ts | 7 +++++++ 7 files changed, 32 insertions(+), 6 deletions(-) diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/empty_state.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/empty_state.tsx index 62ba0365f0034..01a936778c366 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/empty_state.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/empty_state.tsx @@ -19,6 +19,7 @@ import { FormattedMessage } from '@kbn/i18n-react'; import { GetInspectQuery } from '../../../types'; import icon from './assets/illustration_product_no_results_magnifying_glass.svg'; import { InspectButton } from './toolbar/components/inspect'; +import { ALERTS_TABLE_TITLE } from './translations'; const heights = { tall: 490, @@ -40,7 +41,7 @@ export const EmptyState: React.FC<{ {showInpectButton && ( - + )} {controls?.right && {controls.right}} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.test.tsx index 2d9fa190963f6..fb8444bb93540 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.test.tsx @@ -27,7 +27,13 @@ describe('Inspect Button', () => { }); test('open Inspect Modal', async () => { - render(); + render( + + ); fireEvent.click(await screen.findByTestId('inspect-icon-button')); expect(await screen.findByTestId('mocker-modal')).toBeInTheDocument(); diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.tsx index 62b931573764f..1a4215a55ca17 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.tsx @@ -34,9 +34,13 @@ interface InspectButtonProps { onCloseInspect?: () => void; showInspectButton?: boolean; getInspectQuery: GetInspectQuery; + inspectTitle: string; } -const InspectButtonComponent: React.FC = ({ getInspectQuery }) => { +const InspectButtonComponent: React.FC = ({ + getInspectQuery, + inspectTitle, +}) => { const [isShowingModal, setIsShowingModal] = useState(false); const onOpenModal = () => { @@ -63,6 +67,7 @@ const InspectButtonComponent: React.FC = ({ getInspectQuery closeModal={onCloseModal} data-test-subj="inspect-modal" getInspectQuery={getInspectQuery} + title={inspectTitle} /> )} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.test.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.test.tsx index 769dbfdcc9a17..f885610e33c6f 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.test.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.test.tsx @@ -34,6 +34,7 @@ describe('Modal Inspect', () => { const closeModal = jest.fn(); const defaultProps: ModalInspectProps = { closeModal, + title: 'Inspect', getInspectQuery: () => ({ request: [getRequest()], response: [response], diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.tsx index 125961526d69b..f64c531519d5e 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.tsx @@ -45,6 +45,7 @@ DescriptionListStyled.displayName = 'DescriptionListStyled'; export interface ModalInspectProps { closeModal: () => void; getInspectQuery: GetInspectQuery; + title: string; } interface Request { @@ -91,7 +92,7 @@ const stringify = (object: Request | Response): string => { } }; -const ModalInspectQueryComponent = ({ closeModal, getInspectQuery }: ModalInspectProps) => { +const ModalInspectQueryComponent = ({ closeModal, getInspectQuery, title }: ModalInspectProps) => { const { request, response } = getInspectQuery(); // using index 0 as there will be only one request and response for now const parsedRequest: Request = parse(request[0]); @@ -200,7 +201,9 @@ const ModalInspectQueryComponent = ({ closeModal, getInspectQuery }: ModalInspec return ( - {i18n.INSPECT} + + {i18n.INSPECT} {title} + diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/toolbar_visibility.tsx b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/toolbar_visibility.tsx index 65ac4f0eaf2dc..a8abe4fc983d7 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/toolbar_visibility.tsx +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/toolbar/toolbar_visibility.tsx @@ -17,6 +17,7 @@ import { LastUpdatedAt } from './components/last_updated_at'; import { FieldBrowser } from '../../field_browser'; import { FieldBrowserOptions } from '../../field_browser/types'; import { InspectButton } from './components/inspect'; +import { ALERTS_TABLE_TITLE } from '../translations'; const BulkActionsToolbar = lazy(() => import('../bulk_actions/components/toolbar')); @@ -33,7 +34,9 @@ const rightControl = ({ }) => { return ( <> - {showInspectButton && } + {showInspectButton && ( + + )} {controls?.right} diff --git a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/translations.ts b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/translations.ts index 871aad0b80fcb..c00fcd4de7309 100644 --- a/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/translations.ts +++ b/x-pack/plugins/triggers_actions_ui/public/application/sections/alerts_table/translations.ts @@ -35,3 +35,10 @@ export const ALERTS_TABLE_CONTROL_COLUMNS_VIEW_DETAILS_LABEL = i18n.translate( defaultMessage: 'View details', } ); + +export const ALERTS_TABLE_TITLE = i18n.translate( + 'xpack.triggersActionsUI.sections.alertsTable.title', + { + defaultMessage: 'Alerts table', + } +);