From 325a43b729ab50190541d804d88b49e72ea4a9e0 Mon Sep 17 00:00:00 2001 From: Adam Tackett Date: Wed, 4 Sep 2024 11:23:53 -0700 Subject: [PATCH 1/8] update reporting UI and handle new navigation Signed-off-by: Adam Tackett --- public/components/app.tsx | 20 +- .../__snapshots__/main.test.tsx.snap | 152 +- .../report_definitions_table.test.tsx.snap | 26 +- .../__snapshots__/reports_table.test.tsx.snap | 20 +- .../main/loading_modal/loading_modal.tsx | 4 +- public/components/main/main.tsx | 8 +- .../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 +- 16 files changed, 472 insertions(+), 2507 deletions(-) diff --git a/public/components/app.tsx b/public/components/app.tsx index 4091c0d7..48790b11 100644 --- a/public/components/app.tsx +++ b/public/components/app.tsx @@ -4,20 +4,16 @@ */ 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 { CoreStart, - CoreSystem, ChromeBreadcrumb, IUiSettingsClient, } from '../../../../src/core/public'; @@ -44,12 +40,6 @@ interface ReportsDashboardsAppDeps { chrome: CoreStart['chrome']; } -const styles: CSS.Properties = { - float: 'left', - width: '100%', - maxWidth: '1600px', -}; - export const ReportsDashboardsApp = ({ basename, notifications, @@ -61,12 +51,9 @@ export const ReportsDashboardsApp = ({ return ( -
+
- - - @@ -92,6 +80,7 @@ export const ReportsDashboardsApp = ({ { defaultMessage: 'Report Definition Details' } )} httpClient={http} + chrome={chrome} {...props} setBreadcrumbs={chrome.setBreadcrumbs} /> @@ -106,6 +95,7 @@ export const ReportsDashboardsApp = ({ { defaultMessage: 'Create Report' } )} httpClient={http} + chrome={chrome} {...props} setBreadcrumbs={chrome.setBreadcrumbs} /> diff --git a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap index fb5284a8..cdf09ba3 100644 --- a/public/components/main/__tests__/__snapshots__/main.test.tsx.snap +++ b/public/components/main/__tests__/__snapshots__/main.test.tsx.snap @@ -11,7 +11,7 @@ exports[`
panel render component 1`] = `
-

Reports @@ -23,7 +23,7 @@ exports[`
panel render component 1`] = ` 0 )

-

+
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 -
-
-
-
-
-
-
-
-
-
- Source -
-
- - - - - - - (opens in a new tab or window) - - -
-
-
-
-
-
- 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 -
-
-
-
-
-
-
-
-
-
- Source -
-
- - - - - - - (opens in a new tab or window) - - -
-
-
-
-
-
- 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 -
-
-
-
-
-
-
-
-
-
- Source -
-
- - - - - (opens in a new tab or window) - - -
-
-
-
-
-
- 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..ada2ead7 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', + } + )} +

+ + + + - - - - + + + +

{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 -
-
- — -
-
-
-
-
-
-
-
-
- Source -
-
- - Dashboard - - - - - (opens in a new tab or window) - - -
-
-
-
-
-
- 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 -
-
- — -
-
-
-
-
-
-
-
-
- Source -
-
- - Dashboard - - - (opens in a new tab or window) - - -
-
-
-
-
-
- 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..127fbbb2 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', + })} +

+ + + + - - - - + + + +

{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..41978d09 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', })}

- + 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' } )} -

+ From 820a44637d1a4cba5613b10718d7fb86d4e517b1 Mon Sep 17 00:00:00 2001 From: Adam Tackett Date: Wed, 4 Sep 2024 12:01:07 -0700 Subject: [PATCH 2/8] fix linting errors Signed-off-by: Adam Tackett --- public/components/app.tsx | 13 +++---------- 1 file changed, 3 insertions(+), 10 deletions(-) diff --git a/public/components/app.tsx b/public/components/app.tsx index 48790b11..39aed75b 100644 --- a/public/components/app.tsx +++ b/public/components/app.tsx @@ -6,25 +6,20 @@ import React from 'react'; import { I18nProvider } from '@osd/i18n/react'; import { HashRouter as Router, Route, Switch } from 'react-router-dom'; - -import { - EuiPage, - EuiPageBody, - EuiPageContentBody, -} from '@elastic/eui'; +import { i18n } from '@osd/i18n'; +import { EuiPage, EuiPageBody, EuiPageContentBody } from '@elastic/eui'; import { CoreStart, 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']; @@ -42,9 +37,7 @@ interface ReportsDashboardsAppDeps { export const ReportsDashboardsApp = ({ basename, - notifications, http, - navigation, chrome, }: ReportsDashboardsAppDeps) => { // Render the application DOM. From 10bbc73226f1608f47376fd32a20e26e1753233b Mon Sep 17 00:00:00 2001 From: Adam Tackett Date: Wed, 4 Sep 2024 12:07:35 -0700 Subject: [PATCH 3/8] fix linting errors Signed-off-by: Adam Tackett --- public/components/app.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/public/components/app.tsx b/public/components/app.tsx index 39aed75b..ad3d1879 100644 --- a/public/components/app.tsx +++ b/public/components/app.tsx @@ -20,7 +20,6 @@ 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'; - export interface CoreInterface { http: CoreStart['http']; uiSettings: IUiSettingsClient; From 7c0354669c85cb9adc3e33db73d4bee4b872f082 Mon Sep 17 00:00:00 2001 From: Adam Tackett Date: Wed, 4 Sep 2024 13:35:51 -0700 Subject: [PATCH 4/8] fix spacing from comment Signed-off-by: Adam Tackett --- .../report_definition_details/report_definition_details.tsx | 2 +- public/components/main/report_details/report_details.tsx | 2 +- .../report_definitions/create/create_report_definition.tsx | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) 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 ada2ead7..0963d594 100644 --- a/public/components/main/report_definition_details/report_definition_details.tsx +++ b/public/components/main/report_definition_details/report_definition_details.tsx @@ -677,7 +677,7 @@ export function ReportDefinitionDetails(props: { match?: any; setBreadcrumbs?: a )} - + {!getNavGroupEnabled && } diff --git a/public/components/main/report_details/report_details.tsx b/public/components/main/report_details/report_details.tsx index 127fbbb2..ea4ad5dc 100644 --- a/public/components/main/report_details/report_details.tsx +++ b/public/components/main/report_details/report_details.tsx @@ -362,7 +362,7 @@ export function ReportDetails(props: { match?: any; setBreadcrumbs?: any; httpCl })} - + {!getNavGroupEnabled && } diff --git a/public/components/report_definitions/create/create_report_definition.tsx b/public/components/report_definitions/create/create_report_definition.tsx index 41978d09..f594bb60 100644 --- a/public/components/report_definitions/create/create_report_definition.tsx +++ b/public/components/report_definitions/create/create_report_definition.tsx @@ -309,7 +309,7 @@ export function CreateReport(props: { [x: string]: any; setBreadcrumbs?: any; ht })} - + {!getNavGroupEnabled && } Date: Wed, 4 Sep 2024 14:58:07 -0700 Subject: [PATCH 5/8] fix comments Signed-off-by: Adam Tackett --- public/components/app.tsx | 2 + .../__snapshots__/main.test.tsx.snap | 272 ++++++++++-------- .../components/main/__tests__/main.test.tsx | 20 +- public/components/main/main.tsx | 30 +- 4 files changed, 196 insertions(+), 128 deletions(-) diff --git a/public/components/app.tsx b/public/components/app.tsx index ad3d1879..ea71b5d2 100644 --- a/public/components/app.tsx +++ b/public/components/app.tsx @@ -20,6 +20,7 @@ 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'; + export interface CoreInterface { http: CoreStart['http']; uiSettings: IUiSettingsClient; @@ -118,6 +119,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 cdf09ba3..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="euiSpacer euiSpacer--l" />
panel render component 1`] = `
-

- Report definitions -

- - ( - 0 - ) -

-

+

+ Report definitions +

+ + ( + 0 + ) +

+

+
panel render component 1`] = `
@@ -934,8 +946,16 @@ exports[`
panel render component 1`] = ` exports[`
panel render component after create success 1`] = `
+

+ Reporting +

+
panel render component after create success 1`] = `
-

- Reports - -

- ( - 0 - ) -

-

+

+ Reports + +

+ ( + 0 + ) +

+

+
panel render component after create success 1`] = `
panel render component after create success 1`] = ` class="euiSpacer euiSpacer--l" />
panel render component after create success 1`] = `
-

- Report definitions -

- - ( - 0 - ) -

-

+

+ Report definitions +

+ + ( + 0 + ) +

+

+
panel render component after create success 1`] = `
@@ -1925,8 +1949,16 @@ exports[`
panel render component after create success 1`] = ` exports[`
panel render component after delete success 1`] = `
+

+ Reporting +

+
panel render component after delete success 1`] = `
-

- Reports - -

- ( - 0 - ) -

-

+

+ Reports + +

+ ( + 0 + ) +

+

+
panel render component after delete success 1`] = `
panel render component after delete success 1`] = ` class="euiSpacer euiSpacer--l" />
panel render component after delete success 1`] = `
-

- Report definitions -

- - ( - 0 - ) -

-

+

+ Report definitions +

+ + ( + 0 + ) +

+

+
panel render component after delete success 1`] = `
@@ -2917,8 +2953,16 @@ exports[`
panel render component after delete success 1`] = ` exports[`
panel render component after edit success 1`] = `
+

+ Reporting +

+
panel render component after edit success 1`] = `
-

- Reports - -

- ( - 0 - ) -

-

+

+ Reports + +

+ ( + 0 + ) +

+

+
panel render component after edit success 1`] = `
panel render component after edit success 1`] = ` class="euiSpacer euiSpacer--l" />
panel render component after edit success 1`] = `
-

- Report definitions -

- - ( - 0 - ) -

-

+

+ Report definitions +

+ + ( + 0 + ) +

+

+
panel render component after edit success 1`] = `
diff --git a/public/components/main/__tests__/main.test.tsx b/public/components/main/__tests__/main.test.tsx index 3142326e..ed924e23 100644 --- a/public/components/main/__tests__/main.test.tsx +++ b/public/components/main/__tests__/main.test.tsx @@ -15,6 +15,12 @@ function setBreadcrumbs(array: []) { jest.fn(); } +const chromeMock = { + navGroup: { + getNavGroupEnabled: jest.fn().mockReturnValue(false), + }, +}; + describe('
panel', () => { configure({ adapter: new Adapter() }); test('render component', (done) => { @@ -28,7 +34,7 @@ describe('
panel', () => { }); const { container } = render( -
+
); expect(container.firstChild).toMatchSnapshot(); @@ -47,7 +53,7 @@ describe('
panel', () => { }); const { container } = render( -
+
); expect(container.firstChild).toMatchSnapshot(); @@ -65,7 +71,7 @@ describe('
panel', () => { }); const { container } = render( -
+
); expect(container.firstChild).toMatchSnapshot(); @@ -83,7 +89,7 @@ describe('
panel', () => { }); const { container } = render( -
+
); expect(container.firstChild).toMatchSnapshot(); @@ -131,7 +137,7 @@ describe('
panel', () => { }); const component = mount( -
+
); await act(() => promise); @@ -182,7 +188,7 @@ describe('
panel', () => { }); const component = mount( -
+
); await act(() => promise); @@ -201,7 +207,7 @@ describe('
panel', () => { }); const component = mount( -
+
); const generate = component.find('button').at(7); try { diff --git a/public/components/main/main.tsx b/public/components/main/main.tsx index a62396bf..fc2b7d9f 100644 --- a/public/components/main/main.tsx +++ b/public/components/main/main.tsx @@ -9,12 +9,13 @@ import { EuiFlexGroup, EuiFlexItem, EuiSmallButton, - EuiTitle, // @ts-ignore EuiHorizontalRule, EuiSpacer, EuiPanel, EuiGlobalToastList, + EuiText, + EuiTitle, } from '@elastic/eui'; import { ReportsTable } from './reports_table'; import { ReportDefinitions } from './report_definitions_table'; @@ -27,6 +28,7 @@ import { permissionsMissingToast, permissionsMissingActions, } from '../utils/utils'; +import { EuiHeader } from '@opensearch-project/oui'; const reportCountStyles: CSS.Properties = { color: 'gray', @@ -34,6 +36,8 @@ const reportCountStyles: CSS.Properties = { }; export function Main(props) { + const { chrome } = props; + const getNavGroupEnabled = chrome.navGroup.getNavGroupEnabled(); const [reportsTableContent, setReportsTableContent] = useState([]); const [ reportDefinitionsTableContent, @@ -272,17 +276,25 @@ export function Main(props) { return (
- + +

+ {!getNavGroupEnabled && i18n.translate('opensearch.reporting.title', { + defaultMessage: 'Reporting', + })} +

+ + {!getNavGroupEnabled && } + - +

{i18n.translate('opensearch.reports.main.title.reports', { defaultMessage: 'Reports', })}{' '}

({reportsTableContent.length})

- + - + - + - +

{i18n.translate( 'opensearch.reports.main.title.reportDefinitions', @@ -322,7 +334,7 @@ export function Main(props) { ({reportDefinitionsTableContent.length})

- + - + Date: Wed, 4 Sep 2024 15:05:35 -0700 Subject: [PATCH 6/8] fix lint spacing in app Signed-off-by: Adam Tackett --- public/components/app.tsx | 1 - 1 file changed, 1 deletion(-) diff --git a/public/components/app.tsx b/public/components/app.tsx index ea71b5d2..fbe4727c 100644 --- a/public/components/app.tsx +++ b/public/components/app.tsx @@ -20,7 +20,6 @@ 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'; - export interface CoreInterface { http: CoreStart['http']; uiSettings: IUiSettingsClient; From a0a33975c286fccd9c68eea3df3106903d87752b Mon Sep 17 00:00:00 2001 From: Adam Tackett Date: Wed, 4 Sep 2024 15:38:47 -0700 Subject: [PATCH 7/8] more lint Signed-off-by: Adam Tackett --- .../components/main/__tests__/main.test.tsx | 42 +++++++++++++++---- 1 file changed, 35 insertions(+), 7 deletions(-) diff --git a/public/components/main/__tests__/main.test.tsx b/public/components/main/__tests__/main.test.tsx index ed924e23..633ca3d8 100644 --- a/public/components/main/__tests__/main.test.tsx +++ b/public/components/main/__tests__/main.test.tsx @@ -34,7 +34,11 @@ describe('
panel', () => { }); const { container } = render( -
+
); expect(container.firstChild).toMatchSnapshot(); @@ -53,7 +57,11 @@ describe('
panel', () => { }); const { container } = render( -
+
); expect(container.firstChild).toMatchSnapshot(); @@ -71,7 +79,11 @@ describe('
panel', () => { }); const { container } = render( -
+
); expect(container.firstChild).toMatchSnapshot(); @@ -89,7 +101,11 @@ describe('
panel', () => { }); const { container } = render( -
+
); expect(container.firstChild).toMatchSnapshot(); @@ -137,7 +153,11 @@ describe('
panel', () => { }); const component = mount( -
+
); await act(() => promise); @@ -188,7 +208,11 @@ describe('
panel', () => { }); const component = mount( -
+
); await act(() => promise); @@ -207,7 +231,11 @@ describe('
panel', () => { }); const component = mount( -
+
); const generate = component.find('button').at(7); try { From 58936859d56aa19cbadde536161e5a12fa8fa1fc Mon Sep 17 00:00:00 2001 From: Adam Tackett Date: Wed, 4 Sep 2024 16:17:57 -0700 Subject: [PATCH 8/8] and more lint Signed-off-by: Adam Tackett --- .../components/main/__tests__/main.test.tsx | 64 +++++++++---------- 1 file changed, 32 insertions(+), 32 deletions(-) diff --git a/public/components/main/__tests__/main.test.tsx b/public/components/main/__tests__/main.test.tsx index 633ca3d8..5f7135fc 100644 --- a/public/components/main/__tests__/main.test.tsx +++ b/public/components/main/__tests__/main.test.tsx @@ -11,7 +11,7 @@ import { configure, mount } from 'enzyme'; import Adapter from 'enzyme-adapter-react-16'; import { act } from 'react-dom/test-utils'; -function setBreadcrumbs(array: []) { +function setBreadcrumbs(_array: []) { jest.fn(); } @@ -34,10 +34,10 @@ describe('
panel', () => { }); const { container } = render( -
); @@ -57,10 +57,10 @@ describe('
panel', () => { }); const { container } = render( -
); @@ -79,10 +79,10 @@ describe('
panel', () => { }); const { container } = render( -
); @@ -90,7 +90,7 @@ describe('
panel', () => { }); test('render component after delete success', async () => { - delete window.location; + delete window.location; Object.defineProperty(window, 'location', { configurable: true, @@ -101,15 +101,15 @@ describe('
panel', () => { }); const { container } = render( -
); expect(container.firstChild).toMatchSnapshot(); - }) + }); test('test refresh reports definitions button', async () => { const promise = Promise.resolve(); @@ -153,10 +153,10 @@ describe('
panel', () => { }); const component = mount( -
); await act(() => promise); @@ -208,10 +208,10 @@ describe('
panel', () => { }); const component = mount( -
); await act(() => promise); @@ -223,7 +223,7 @@ describe('
panel', () => { // TODO: mock catch() error response to contain status code test.skip('test error toasts posted', async () => { - jest.spyOn(console, 'log').mockImplementation(() => {}); // silence console log error from main + jest.spyOn(console, 'log').mockImplementation(() => { }); // silence console log error from main const promise = Promise.resolve(); httpClientMock.get = jest.fn().mockResolvedValue({ @@ -231,10 +231,10 @@ describe('
panel', () => { }); const component = mount( -
); const generate = component.find('button').at(7);