From 20dea69a6f58b2a4038b0ebb7c43e5314d745a1b Mon Sep 17 00:00:00 2001 From: Adam Tackett <105462877+TackAdam@users.noreply.github.com> Date: Thu, 5 Sep 2024 08:45:43 -0700 Subject: [PATCH] [Bugfix] Update UI and handle new navigation (#416) * update reporting UI and handle new navigation Signed-off-by: Adam Tackett * fix linting errors Signed-off-by: Adam Tackett * fix linting errors Signed-off-by: Adam Tackett * fix spacing from comment Signed-off-by: Adam Tackett * fix comments Signed-off-by: Adam Tackett * fix lint spacing in app Signed-off-by: Adam Tackett * more lint Signed-off-by: Adam Tackett * and more lint Signed-off-by: Adam Tackett --------- Signed-off-by: Adam Tackett Co-authored-by: Adam Tackett --- public/components/app.tsx | 33 +- .../__snapshots__/main.test.tsx.snap | 392 +++--- .../report_definitions_table.test.tsx.snap | 26 +- .../__snapshots__/reports_table.test.tsx.snap | 20 +- .../components/main/__tests__/main.test.tsx | 56 +- .../main/loading_modal/loading_modal.tsx | 4 +- public/components/main/main.tsx | 38 +- .../report_definition_details.test.tsx.snap | 1240 +---------------- .../report_definition_details.test.tsx | 13 + .../report_definition_details.tsx | 327 +++-- .../main/report_definitions_table.tsx | 3 +- .../report_details.test.tsx.snap | 767 +--------- .../main/report_details/report_details.tsx | 344 +++-- public/components/main/reports_table.tsx | 2 + .../create/create_report_definition.tsx | 9 +- .../report_settings.test.tsx.snap | 40 +- .../report_settings/report_settings.tsx | 4 +- 17 files changed, 685 insertions(+), 2633 deletions(-) diff --git a/public/components/app.tsx b/public/components/app.tsx index 4091c0d7..fbe4727c 100644 --- a/public/components/app.tsx +++ b/public/components/app.tsx @@ -4,31 +4,21 @@ */ import React from 'react'; -import { FormattedMessage, I18nProvider } from '@osd/i18n/react'; +import { I18nProvider } from '@osd/i18n/react'; import { HashRouter as Router, Route, Switch } from 'react-router-dom'; - -import { - EuiPage, - EuiPageBody, - EuiPageContentBody, - EuiPageContentHeader, - EuiPageContentHeaderSection, -} from '@elastic/eui'; -import CSS from 'csstype'; +import { i18n } from '@osd/i18n'; +import { EuiPage, EuiPageBody, EuiPageContentBody } from '@elastic/eui'; import { CoreStart, - CoreSystem, ChromeBreadcrumb, IUiSettingsClient, } from '../../../../src/core/public'; import { NavigationPublicPluginStart } from '../../../../src/plugins/navigation/public'; - import { CreateReport } from './report_definitions/create/create_report_definition'; import { Main } from './main/main'; import { ReportDetails } from './main/report_details/report_details'; import { ReportDefinitionDetails } from './main/report_definition_details/report_definition_details'; import { EditReportDefinition } from './report_definitions/edit/edit_report_definition'; -import { i18n } from '@osd/i18n'; export interface CoreInterface { http: CoreStart['http']; @@ -44,29 +34,18 @@ interface ReportsDashboardsAppDeps { chrome: CoreStart['chrome']; } -const styles: CSS.Properties = { - float: 'left', - width: '100%', - maxWidth: '1600px', -}; - export const ReportsDashboardsApp = ({ basename, - notifications, http, - navigation, chrome, }: ReportsDashboardsAppDeps) => { // Render the application DOM. return ( -
+
- - - @@ -92,6 +72,7 @@ export const ReportsDashboardsApp = ({ { defaultMessage: 'Report Definition Details' } )} httpClient={http} + chrome={chrome} {...props} setBreadcrumbs={chrome.setBreadcrumbs} /> @@ -106,6 +87,7 @@ export const ReportsDashboardsApp = ({ { defaultMessage: 'Create Report' } )} httpClient={http} + chrome={chrome} {...props} setBreadcrumbs={chrome.setBreadcrumbs} /> @@ -136,6 +118,7 @@ export const ReportsDashboardsApp = ({ httpClient={http} {...props} setBreadcrumbs={chrome.setBreadcrumbs} + chrome={chrome} /> )} /> diff --git a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap index fb5284a8..c64ee236 100644 --- a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap +++ b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap @@ -2,8 +2,16 @@ exports[`
panel render component 1`] = `
+

+ Reporting +

+
panel render component 1`] = `
-

- Reports - -

- ( - 0 - ) -

-

+

+ Reports + +

+ ( + 0 + ) +

+

+
panel render component 1`] = `

panel render component 1`] = ` class="euiFlexItem euiSearchBar__searchHolder" >
panel render component 1`] = ` > panel render component 1`] = ` class="euiPopover__anchor" > -
-
- -
-
- -
-
- -
-

- Report settings -

-
-
-
-
-
- Name -
-
-
-
-
-
-
- Description -
-
-
-
-
-
-
- Created -
-
-
-
-
-
-
- Last updated -
-
-
-
-
-
-
- -
-
-
- Time period -
-
- Last -
-
-
-
-
-
- File format -
-
- -
-
-
-
-
-
-
-
-
-
- Report header -
-
-
-
-
-
-
- Report footer -
-
-
-
-
-
-
-
-
-
-
-
- Report trigger -
-
-
-
-
-
-
- Schedule details -
-
-
-
-
-
-
- Status -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Report definition details + `; exports[` panel render disabled daily definition, click 1`] = ` -
-
-

- Report definition details -

-
-
-
-
-
-
-

-

-
-
-
-
- -
-
- -
-
- -
-
-
-
-

- Report settings -

-
-
-
-
-
- Name -
-
-
-
-
-
-
- Description -
-
-
-
-
-
-
- Created -
-
-
-
-
-
-
- Last updated -
-
-
-
-
-
-
- -
-
-
- Time period -
-
- Last -
-
-
-
-
-
- File format -
-
- -
-
-
-
-
-
-
-
-
-
- Report header -
-
-
-
-
-
-
- Report footer -
-
-
-
-
-
-
-
-
-
-
-
- Report trigger -
-
-
-
-
-
-
- Schedule details -
-
-
-
-
-
-
- Status -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Report definition details + `; exports[` panel render on demand definition details 1`] = ` -
-
-

- Report definition details -

-
-
-
-
-
-
-

-

-
-
-
-
- -
-
- -
-
- -
-
-
-
-

- Report settings -

-
-
-
-
-
- Name -
-
-
-
-
-
-
- Description -
-
-
-
-
-
-
- Created -
-
-
-
-
-
-
- Last updated -
-
-
-
-
-
-
- -
-
-
- Time period -
-
- Last -
-
-
-
-
-
- File format -
-
- -
-
-
-
-
-
-
-
-
-
- Report header -
-
-
-
-
-
-
- Report footer -
-
-
-
-
-
-
-
-
-
-
-
- Report trigger -
-
-
-
-
-
-
- Schedule details -
-
-
-
-
-
-
- Status -
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Report definition details + `; diff --git a/public/components/main/report_definition_details/__tests__/report_definition_details.test.tsx b/public/components/main/report_definition_details/__tests__/report_definition_details.test.tsx index 7e26cd63..dfec8ac7 100644 --- a/public/components/main/report_definition_details/__tests__/report_definition_details.test.tsx +++ b/public/components/main/report_definition_details/__tests__/report_definition_details.test.tsx @@ -15,6 +15,12 @@ function setBreadcrumbs(array: []) { jest.fn(); } +const chromeMock = { + navGroup: { + getNavGroupEnabled: jest.fn().mockReturnValue(false), + }, +}; + describe(' panel', () => { let propsMock = { match: { @@ -71,6 +77,7 @@ describe(' panel', () => { props={propsMock} match={match} setBreadcrumbs={setBreadcrumbs} + chrome={chromeMock} /> ); expect(container.firstChild).toMatchSnapshot(); @@ -126,6 +133,7 @@ describe(' panel', () => { props={propsMock} match={match} setBreadcrumbs={setBreadcrumbs} + chrome={chromeMock} /> ); expect(container.firstChild).toMatchSnapshot(); @@ -181,6 +189,7 @@ describe(' panel', () => { props={propsMock} match={match} setBreadcrumbs={setBreadcrumbs} + chrome={chromeMock} /> ); @@ -225,6 +234,7 @@ describe(' panel', () => { props={propsMock} match={match} setBreadcrumbs={setBreadcrumbs} + chrome={chromeMock} /> ); await act(() => promise); @@ -284,6 +294,7 @@ describe(' panel', () => { props={propsMock} match={match} setBreadcrumbs={setBreadcrumbs} + chrome={chromeMock} /> ); @@ -346,6 +357,7 @@ describe(' panel', () => { props={propsMock} match={match} setBreadcrumbs={setBreadcrumbs} + chrome={chromeMock} /> ); await act(() => promise); @@ -408,6 +420,7 @@ describe(' panel', () => { props={propsMock} match={match} setBreadcrumbs={setBreadcrumbs} + chrome={chromeMock} /> ); await act(() => promise); diff --git a/public/components/main/report_definition_details/report_definition_details.tsx b/public/components/main/report_definition_details/report_definition_details.tsx index 531b42a8..0963d594 100644 --- a/public/components/main/report_definition_details/report_definition_details.tsx +++ b/public/components/main/report_definition_details/report_definition_details.tsx @@ -8,10 +8,8 @@ import { i18n } from '@osd/i18n'; import { EuiFlexGroup, EuiFlexItem, - EuiPage, EuiPageHeader, EuiTitle, - EuiPageBody, EuiPageContent, EuiHorizontalRule, EuiSpacer, @@ -25,7 +23,6 @@ import { } from '@elastic/eui'; import { ReportDetailsComponent, - formatEmails, trimAndRenderAsText, } from '../report_details/report_details'; import { @@ -58,7 +55,8 @@ interface ReportDefinitionDetails { baseUrl: string; } -export function ReportDefinitionDetails(props: { match?: any; setBreadcrumbs?: any; httpClient?: any; }) { +export function ReportDefinitionDetails(props: { match?: any; setBreadcrumbs?: any; httpClient?: any; chrome: any }) { + const { chrome } = props; const [reportDefinitionDetails, setReportDefinitionDetails] = useState({ name: '', description: '', @@ -82,6 +80,7 @@ export function ReportDefinitionDetails(props: { match?: any; setBreadcrumbs?: a const [showDeleteModal, setShowDeleteModal] = useState(false); const [showLoading, setShowLoading] = useState(false); const reportDefinitionId = props.match['params']['reportDefinitionId']; + const getNavGroupEnabled = chrome.navGroup.getNavGroupEnabled(); const handleLoading = (e: boolean | ((prevState: boolean) => boolean)) => { setShowLoading(e); @@ -669,169 +668,167 @@ export function ReportDefinitionDetails(props: { match?: any; setBreadcrumbs?: a ) : null; return ( - - - -

- {i18n.translate( - 'opensearch.reports.reportDefinitionsDetails.title', - { defaultMessage: 'Report definition details' } - )} -

-
- - - - - - - -

{reportDefinitionDetails.name}

-
-
-
-
- - - handleShowDeleteModal(show)} - id={'deleteReportDefinitionButton'} - > - {i18n.translate( - 'opensearch.reports.reportDefinitionsDetails.deleteReportDefinitionButton', - { defaultMessage: 'Delete' } - )} - - - {showActionButton} - - { - window.location.assign( - `reports-dashboards#/edit/${reportDefinitionId}` - ); - }} - id={'editReportDefinitionButton'} - > - {i18n.translate( - 'opensearch.reports.reportDefinitionsDetails.editReportDefinitionButton', - { defaultMessage: 'Edit' } - )} - - - -
- - -

- {i18n.translate( - 'opensearch.reports.reportDefinitionsDetails.reportSettings', - { defaultMessage: 'Report settings' } - )} -

-
- - - - - - - - + <> + +

+ {!getNavGroupEnabled && i18n.translate('opensearch.reports.reportDefinitionsDetails.title', { + defaultMessage: 'Report definition details', + } + )} +

+
+ {!getNavGroupEnabled && } + + - - - - + + + +

{reportDefinitionDetails.name}

+
+
+
- - - - - - + + + handleShowDeleteModal(show)} + id={'deleteReportDefinitionButton'} + > + {i18n.translate( + 'opensearch.reports.reportDefinitionsDetails.deleteReportDefinitionButton', + { defaultMessage: 'Delete' } + )} + + + {showActionButton} + + { + window.location.assign( + `reports-dashboards#/edit/${reportDefinitionId}` + ); + }} + id={'editReportDefinitionButton'} + > + {i18n.translate( + 'opensearch.reports.reportDefinitionsDetails.editReportDefinitionButton', + { defaultMessage: 'Edit' } + )} + + - - {triggerSection} -
- - {showDeleteConfirmationModal} - {showLoadingModal} -
-
+ + + +

+ {i18n.translate( + 'opensearch.reports.reportDefinitionsDetails.reportSettings', + { defaultMessage: 'Report settings' } + )} +

+
+ + + + + + + + + + + + + + + + + + + + + + + {triggerSection} + + + {showDeleteConfirmationModal} + {showLoadingModal} + ); } diff --git a/public/components/main/report_definitions_table.tsx b/public/components/main/report_definitions_table.tsx index 3f0c3b98..f26954e2 100644 --- a/public/components/main/report_definitions_table.tsx +++ b/public/components/main/report_definitions_table.tsx @@ -10,7 +10,6 @@ import { EuiSmallButton, EuiEmptyPrompt, EuiText, - EuiIcon, } from '@elastic/eui'; import { i18n } from '@osd/i18n'; import { humanReadableDate } from './main_utils'; @@ -50,7 +49,6 @@ const emptyMessageReportDefinitions = ( 'Get started with OpenSearch Dashboards reporting', } )} -
@@ -75,6 +73,7 @@ const emptyMessageReportDefinitions = ( const reportDefinitionsSearch = { box: { incremental: true, + compressed: true, }, filters: [], }; diff --git a/public/components/main/report_details/__tests__/__snapshots__/report_details.test.tsx.snap b/public/components/main/report_details/__tests__/__snapshots__/report_details.test.tsx.snap index 80620d7f..f6443eb2 100644 --- a/public/components/main/report_details/__tests__/__snapshots__/report_details.test.tsx.snap +++ b/public/components/main/report_details/__tests__/__snapshots__/report_details.test.tsx.snap @@ -1,768 +1,17 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[` panel render 5 hours recurring component 1`] = ` -
-
-

- Report details -

-
-
-
-
-
-
-

- test create report definition trigger -

-
-
-
-
-
-

- Report Settings -

-
-
-
-
-
- Name -
-
- test create report definition trigger -
-
-
-
-
-
- Description -
-
- — -
-
-
-
-
-
- Created -
-
- — -
-
-
-
-
-
- Last updated -
-
- — -
-
-
-
-
-
- -
-
-
- Time period -
-
- Invalid Date -> 10/23/2020, 8:53:35 PM -
-
-
-
-
-
- File format -
-
- -
-
-
-
-
-
- State -
-
-
-
-
-
-
-
-
-
- Report header -
-
-

- — -

-
-
-
-
-
-
- Report footer -
-
-

- — -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Report trigger -
-
- Schedule -
-
-
-
-
-
- Schedule type -
-
- Recurring -
-
-
-
-
-
- Schedule details -
-
- — -
-
-
-
-
-
-
-
-
-
-
-
-
-
+ Report details + `; exports[` panel render on-demand component 1`] = ` -
-
-

- Report details -

-
-
-
-
-
-
-

- test create report definition trigger -

-
-
-
-
-
-

- Report Settings -

-
-
-
-
-
- Name -
-
- test create report definition trigger -
-
-
-
-
-
- Description -
-
- — -
-
-
-
-
-
- Created -
-
- — -
-
-
-
-
-
- Last updated -
-
- — -
-
-
-
-
-
- -
-
-
- Time period -
-
- Invalid Date -> 10/23/2020, 8:53:35 PM -
-
-
-
-
-
- File format -
-
- -
-
-
-
-
-
- State -
-
-
-
-
-
-
-
-
-
- Report header -
-
-

- — -

-
-
-
-
-
-
- Report footer -
-
-

- — -

-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
- Report trigger -
-
- On demand -
-
-
-
-
-
-
+ Report details + `; diff --git a/public/components/main/report_details/report_details.tsx b/public/components/main/report_details/report_details.tsx index 65fa02aa..ea4ad5dc 100644 --- a/public/components/main/report_details/report_details.tsx +++ b/public/components/main/report_details/report_details.tsx @@ -8,10 +8,8 @@ import { i18n } from '@osd/i18n'; import { EuiFlexGroup, EuiFlexItem, - EuiPage, EuiPageHeader, EuiTitle, - EuiPageBody, EuiPageContent, EuiHorizontalRule, EuiSpacer, @@ -80,7 +78,7 @@ export const formatEmails = (emails: string[]) => { return Array.isArray(emails) ? emails.join(', ') : emails; }; -export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpClient: any; }) { +export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpClient: any; chrome: any; }) { const [reportDetails, setReportDetails] = useState({ reportName: '', description: '', @@ -163,7 +161,7 @@ export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpCl }; const removeToast = (removedToast: { id: any; }) => { - setToasts(toasts.filter((toast : any) => toast.id !== removedToast.id)); + setToasts(toasts.filter((toast: any) => toast.id !== removedToast.id)); }; const handleReportDetails = (e: React.SetStateAction) => { @@ -180,7 +178,7 @@ export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpCl }; const parseTimePeriod = (queryUrl: string) => { - let [fromDateString, toDateString] : RegExpMatchArray | null = queryUrl.match( + let [fromDateString, toDateString]: RegExpMatchArray | null = queryUrl.match( timeRangeMatcher ); @@ -199,7 +197,7 @@ export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpCl const getReportDetailsData = ( report: ReportSchemaType - ) : ReportDetails => { + ): ReportDetails => { const { report_definition: reportDefinition, last_updated: lastUpdated, @@ -227,12 +225,12 @@ export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpCl state: state, reportHeader: reportParams.core_params.hasOwnProperty('header') && - reportParams.core_params.header != '' + reportParams.core_params.header != '' ? reportParams.core_params.header : `\u2014`, reportFooter: reportParams.core_params.hasOwnProperty('footer') && - reportParams.core_params.footer != '' + reportParams.core_params.footer != '' ? reportParams.core_params.footer : `\u2014`, triggerType: triggerType, @@ -246,34 +244,34 @@ export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpCl useEffect(() => { const { httpClient } = props; httpClient - .get('../api/reporting/reports/' + reportId) - .then((response: ReportSchemaType) => { - handleReportDetails(getReportDetailsData(response)); - props.setBreadcrumbs([ - { - text: i18n.translate( - 'opensearch.reports.details.breadcrumb.reporting', - { defaultMessage: 'Reporting' } - ), - href: '#', - }, - { - text: i18n.translate( - 'opensearch.reports.details.breadcrumb.reportDetails', - { - defaultMessage: 'Report details: {name}', - values: { - name: response.report_definition.report_params.report_name, - }, - } - ), - }, - ]); - }) - .catch((error: any) => { - console.log('Error when fetching report details: ', error); - handleErrorToast(); - }); + .get('../api/reporting/reports/' + reportId) + .then((response: ReportSchemaType) => { + handleReportDetails(getReportDetailsData(response)); + props.setBreadcrumbs([ + { + text: i18n.translate( + 'opensearch.reports.details.breadcrumb.reporting', + { defaultMessage: 'Reporting' } + ), + href: '#', + }, + { + text: i18n.translate( + 'opensearch.reports.details.breadcrumb.reportDetails', + { + defaultMessage: 'Report details: {name}', + values: { + name: response.report_definition.report_params.report_name, + }, + } + ), + }, + ]); + }) + .catch((error: any) => { + console.log('Error when fetching report details: ', error); + handleErrorToast(); + }); }, []); const downloadIconDownload = async () => { @@ -310,15 +308,15 @@ export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpCl ); }; - const triggerSection = + const triggerSection = reportDetails.triggerType === TRIGGER_TYPE.onDemand ? ( + reportDetailsComponentTitle={i18n.translate( + 'opensearch.reports.details.reportTrigger.reportType', + { defaultMessage: 'Report trigger' } + )} + reportDetailsComponentContent={reportDetails.triggerType} + /> ) : ( ) : null; + const getNavGroupEnabled = props.chrome?.navGroup.getNavGroupEnabled(); + return ( - - - -

- {i18n.translate('opensearch.reports.details.title', { - defaultMessage: 'Report details', - })} -

-
- - - - - - - -

{reportDetails.reportName}

-
-
-
-
-
- - -

- {i18n.translate('opensearch.reports.details.reportSettings', { - defaultMessage: 'Report Settings', - })} -

-
- - - - - - - - + <> + +

+ {!getNavGroupEnabled && i18n.translate('opensearch.reports.details.title', { + defaultMessage: 'Report details', + })} +

+
+ {!getNavGroupEnabled && } + + - - - - + + + +

{reportDetails.reportName}

+
+
+
- - - - - - - - - {triggerSection} -
- - {showLoadingModal} -
-
+ + + +

+ {i18n.translate('opensearch.reports.details.reportSettings', { + defaultMessage: 'Report Settings', + })} +

+
+ + + + + + + + + + + + + + + + + + + + + + + {triggerSection} + + + {showLoadingModal} + ); } diff --git a/public/components/main/reports_table.tsx b/public/components/main/reports_table.tsx index 4e3f46c0..4f3ac3bd 100644 --- a/public/components/main/reports_table.tsx +++ b/public/components/main/reports_table.tsx @@ -204,6 +204,7 @@ export function ReportsTable(props) { const reportsListSearch = { box: { incremental: true, + compressed: true, }, filters: [ { @@ -235,6 +236,7 @@ export function ReportsTable(props) { })), }, ], + compressed: true, }; const displayMessage = diff --git a/public/components/report_definitions/create/create_report_definition.tsx b/public/components/report_definitions/create/create_report_definition.tsx index 3d0f2f59..f594bb60 100644 --- a/public/components/report_definitions/create/create_report_definition.tsx +++ b/public/components/report_definitions/create/create_report_definition.tsx @@ -88,7 +88,9 @@ export interface timeRangeParams { timeTo: Date; } -export function CreateReport(props: { [x: string]: any; setBreadcrumbs?: any; httpClient?: any; }) { +export function CreateReport(props: { [x: string]: any; setBreadcrumbs?: any; httpClient?: any; chrome: any }) { + const { chrome } = props; + let createReportDefinitionRequest: reportDefinitionParams = { report_params: { report_name: '', @@ -137,6 +139,7 @@ export function CreateReport(props: { [x: string]: any; setBreadcrumbs?: any; ht ] = useState(false); const [showCronError, setShowCronError] = useState(false); const [showTimeRangeError, setShowTimeRangeError] = useState(false); + const getNavGroupEnabled = chrome.navGroup.getNavGroupEnabled(); // preserve the state of the request after an invalid create report definition request if (comingFromError) { @@ -301,12 +304,12 @@ export function CreateReport(props: { [x: string]: any; setBreadcrumbs?: any; ht

- {i18n.translate('opensearch.reports.createReportDefinition.title', { + {!getNavGroupEnabled && i18n.translate('opensearch.reports.createReportDefinition.title', { defaultMessage: 'Create report definition', })}

- + {!getNavGroupEnabled && } panel dashboard create from in-context 1`] = `
-

Report settings -

+

panel display errors on create 1`] = `
-

Report settings -

+

panel render component 1`] = `
-

Report settings -

+

panel render edit, dashboard source 1`] = `
-

Report settings -

+

panel render edit, dashboard source 2`] = `
-

Report settings -

+

panel render edit, saved search source 1`] = `
-

Report settings -

+

panel render edit, visualization source 1`] = `
-

Report settings -

+

panel render edit, visualization source 2`] = `
-

Report settings -

+

panel saved search create from in-context 1`] = `
-

Report settings -

+

panel visualization create from in-context 1`] = `
-

Report settings -

+

-

+

{i18n.translate( 'opensearch.reports.reportSettingProps.form.reportSettings', { defaultMessage: 'Report settings' } )} -

+