[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)](#156488)  ### Questions ? Please refer to the [Backport tool documentation](https://github.com/sqren/backport)  Co-authored-by: Pablo Machado <[email protected]>
elastic · May 4, 2023 · 499b5e9 · 499b5e9
1 parent 069d308
commit 499b5e9
Show file tree

Hide file tree

Showing 7 changed files with 32 additions and 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
@@ -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<{
       <EuiFlexGroup alignItems="flexEnd" justifyContent="flexEnd">
         {showInpectButton && (
           <EuiFlexItem grow={false}>
-            <InspectButton getInspectQuery={getInspectQuery} />
+            <InspectButton getInspectQuery={getInspectQuery} inspectTitle={ALERTS_TABLE_TITLE} />
           </EuiFlexItem>
         )}
         {controls?.right && <EuiFlexItem grow={false}>{controls.right}</EuiFlexItem>}

diff --git a/...ons_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.test.tsx b/...ons_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(<InspectButton showInspectButton getInspectQuery={getInspectQuery} />);
+    render(
+      <InspectButton
+        inspectTitle={'Inspect Title'}
+        showInspectButton
+        getInspectQuery={getInspectQuery}
+      />
+    );
     fireEvent.click(await screen.findByTestId('inspect-icon-button'));
 
     expect(await screen.findByTestId('mocker-modal')).toBeInTheDocument();

diff --git a/..._actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/index.tsx b/..._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<InspectButtonProps> = ({ getInspectQuery }) => {
+const InspectButtonComponent: React.FC<InspectButtonProps> = ({
+  getInspectQuery,
+  inspectTitle,
+}) => {
   const [isShowingModal, setIsShowingModal] = useState(false);
 
   const onOpenModal = () => {
@@ -63,6 +67,7 @@ const InspectButtonComponent: React.FC<InspectButtonProps> = ({ getInspectQuery
           closeModal={onCloseModal}
           data-test-subj="inspect-modal"
           getInspectQuery={getInspectQuery}
+          title={inspectTitle}
         />
       )}
     </>

diff --git a/...ons_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.test.tsx b/...ons_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/..._actions_ui/public/application/sections/alerts_table/toolbar/components/inspect/modal.tsx b/..._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 (
     <MyEuiModal onClose={closeModal} data-test-subj="modal-inspect-euiModal">
       <EuiModalHeader>
-        <EuiModalHeaderTitle>{i18n.INSPECT}</EuiModalHeaderTitle>
+        <EuiModalHeaderTitle>
+          {i18n.INSPECT} {title}
+        </EuiModalHeaderTitle>
       </EuiModalHeader>
 
       <EuiModalBody>

diff --git a/...iggers_actions_ui/public/application/sections/alerts_table/toolbar/toolbar_visibility.tsx b/...iggers_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 && <InspectButton getInspectQuery={getInspectQuery} />}
+      {showInspectButton && (
+        <InspectButton inspectTitle={ALERTS_TABLE_TITLE} getInspectQuery={getInspectQuery} />
+      )}
       <LastUpdatedAt updatedAt={updatedAt} />
       {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
@@ -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',
+  }
+);