diff --git a/common/utils/set_nav_bread_crumbs.ts b/common/utils/set_nav_bread_crumbs.ts index 908e0af30..4b321e421 100644 --- a/common/utils/set_nav_bread_crumbs.ts +++ b/common/utils/set_nav_bread_crumbs.ts @@ -8,12 +8,19 @@ import { coreRefs } from '../../public/framework/core_refs'; export const setNavBreadCrumbs = ( parentBreadCrumb: EuiBreadcrumb[], - pageBreadCrumb: EuiBreadcrumb[] + pageBreadCrumb: EuiBreadcrumb[], + counter?: number ) => { const isNavGroupEnabled = coreRefs?.chrome?.navGroup.getNavGroupEnabled(); + + const updatedPageBreadCrumb = pageBreadCrumb.map((crumb) => ({ + ...crumb, + text: isNavGroupEnabled && counter !== undefined ? `${crumb.text} (${counter})` : crumb.text, + })); + if (isNavGroupEnabled) { - coreRefs?.chrome?.setBreadcrumbs([...pageBreadCrumb]); + coreRefs?.chrome?.setBreadcrumbs([...updatedPageBreadCrumb]); } else { - coreRefs?.chrome?.setBreadcrumbs([...parentBreadCrumb, ...pageBreadCrumb]); + coreRefs?.chrome?.setBreadcrumbs([...parentBreadCrumb, ...updatedPageBreadCrumb]); } }; diff --git a/public/components/application_analytics/components/app_table.tsx b/public/components/application_analytics/components/app_table.tsx index 2fd67a6c5..3c9fc3f9b 100644 --- a/public/components/application_analytics/components/app_table.tsx +++ b/public/components/application_analytics/components/app_table.tsx @@ -81,11 +81,12 @@ export function AppTable(props: AppTableProps) { text: 'Applications', href: '#/', }, - ] + ], + applications.length ); clear(); fetchApplications(); - }, []); + }, [applications.length]); const clear = () => { setFilters([]); @@ -256,7 +257,6 @@ export function AppTable(props: AppTableProps) { {createButtonText} , ]} - badgeContent={applications.length} /> diff --git a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap index 819328a9b..ddff08348 100644 --- a/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap +++ b/public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap @@ -146,6 +146,9 @@ exports[` spec renders the component 1`] = `
+
@@ -186,47 +189,6 @@ exports[` spec renders the component 1`] = `
-
-
-
- -
-
-
spec', () => { dateCreated: '2023-01-01 12:00:00', dateModified: '2023-01-02 12:00:00', })); - const utils = renderNoteTable({ notebooks }); + const { getByTestId, getAllByText, ...utils } = renderNoteTable({ notebooks }); expect(utils.container.firstChild).toMatchSnapshot(); - fireEvent.click(utils.getByText('Add sample notebooks')); fireEvent.click(utils.getAllByLabelText('Select this row')[0]); - fireEvent.click(utils.getByText('Actions')); - fireEvent.click(utils.getByText('Delete')); + fireEvent.click(getByTestId('deleteSelectedNotebooks')); + expect(getAllByText('Delete 1 notebook')).toHaveLength(2); fireEvent.click(utils.getByText('Cancel')); fireEvent.click(utils.getAllByLabelText('Select this row')[0]); - fireEvent.click(utils.getByText('Actions')); }); it('create notebook modal', async () => { @@ -130,17 +128,16 @@ describe(' spec', () => { dateModified: 'date-modified', }, ]; - const { getByText, getByLabelText, getAllByText, getByTestId } = renderNoteTable({ notebooks }); + const { getByLabelText, getAllByText, getByTestId } = renderNoteTable({ notebooks }); // Select a notebook fireEvent.click(getByLabelText('Select this row')); - // Open Actions dropdown and click Delete - fireEvent.click(getByText('Actions')); - fireEvent.click(getByText('Delete')); + // Click the delete button + fireEvent.click(getByTestId('deleteSelectedNotebooks')); // Ensure the modal is open (you may need to adjust based on your modal implementation) - expect(getAllByText('Delete 1 notebook')).toHaveLength(1); + expect(getAllByText('Delete 1 notebook')).toHaveLength(2); // Mock user confirmation and submit fireEvent.input(getByTestId('delete-notebook-modal-input'), { @@ -178,22 +175,21 @@ describe(' spec', () => { dateModified: 'date-modified', }, ]; - const { getByText, getByLabelText, queryByText } = renderNoteTable({ notebooks }); + const { getByText, getByLabelText, getAllByText, getByTestId } = renderNoteTable({ notebooks }); // Select a notebook fireEvent.click(getByLabelText('Select this row')); - // Open Actions dropdown and click Delete - fireEvent.click(getByText('Actions')); - fireEvent.click(getByText('Delete')); + // Click the delete button + fireEvent.click(getByTestId('deleteSelectedNotebooks')); // Ensure the modal is open - expect(getByText('Delete 1 notebook')).toBeInTheDocument(); + expect(getAllByText('Delete 1 notebook')).toHaveLength(2); // Close the delete modal fireEvent.click(getByText('Cancel')); // Ensure the delete modal is closed - expect(queryByText('Delete 1 notebook')).toBeNull(); + expect(getAllByText('Delete 1 notebook')).toHaveLength(1); }); }); diff --git a/public/components/notebooks/components/note_table.tsx b/public/components/notebooks/components/note_table.tsx index 9cf7823ed..5f42219b2 100644 --- a/public/components/notebooks/components/note_table.tsx +++ b/public/components/notebooks/components/note_table.tsx @@ -5,8 +5,6 @@ import { EuiSmallButton, - EuiContextMenuItem, - EuiContextMenuPanel, EuiCompressedFieldSearch, EuiFlexGroup, EuiFlexItem, @@ -21,7 +19,6 @@ import { EuiPageContentHeaderSection, EuiPageHeader, EuiPageHeaderSection, - EuiPopover, EuiSpacer, EuiTableFieldDataColumnType, EuiText, @@ -29,7 +26,7 @@ import { } from '@elastic/eui'; import truncate from 'lodash/truncate'; import moment from 'moment'; -import React, { ReactElement, useEffect, useState } from 'react'; +import React, { useEffect, useState } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; import { ChromeBreadcrumb } from '../../../../../../src/core/public'; import { @@ -75,7 +72,6 @@ export function NoteTable({ }: NoteTableProps) { const [isModalVisible, setIsModalVisible] = useState(false); // Modal Toggle const [modalLayout, setModalLayout] = useState(); // Modal Layout - const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false); const [selectedNotebooks, setSelectedNotebooks] = useState([]); const [searchQuery, setSearchQuery] = useState(''); const location = useLocation(); @@ -89,10 +85,11 @@ export function NoteTable({ text: 'Notebooks', href: '#/', }, - ] + ], + notebooks.length ); fetchNotebooks(); - }, [setBreadcrumbs, parentBreadcrumb, fetchNotebooks]); + }, [setBreadcrumbs, parentBreadcrumb, fetchNotebooks, notebooks.length]); useEffect(() => { const url = window.location.hash.split('/'); @@ -166,31 +163,6 @@ export function NoteTable({ showModal(); }; - const popoverButton = ( - setIsActionsPopoverOpen(!isActionsPopoverOpen)} - > - Actions - - ); - - const popoverItems: ReactElement[] = [ - { - setIsActionsPopoverOpen(false); - deleteNote(); - }} - data-test-subj="deleteNotebookBtn" - > - Delete - , - ]; - const tableColumns = [ { field: 'path', @@ -238,7 +210,6 @@ export function NoteTable({ {newNavigation ? ( 0 ? notebooks.length : '0'} description={ <> Use Notebooks to interactively and collaboratively develop rich reports backed @@ -323,6 +294,19 @@ export function NoteTable({ {notebooks.length > 0 ? ( <> + + {selectedNotebooks.length > 0 && ( + + Delete {selectedNotebooks.length} notebook + {selectedNotebooks.length > 1 ? 's' : ''} + + )} + setSearchQuery(e.target.value)} /> - - setIsActionsPopoverOpen(false)} - > - - -