@@ -492,7 +492,7 @@ export function SetupIntegrationFormInputs(props: IntegrationConfigProps) {
-
+ spec renders the component 1`] = `
-
-
- Notebooks
-
-
+ Notebooks
+
spec renders the component 1`] = `
- Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks includes creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.
+ Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks include creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.
spec renders the component 1`] = `
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
>
-
-
-
-
-
+ Add sample notebooks
+
+
+
spec renders the component 1`] = `
+
@@ -154,42 +143,88 @@ exports[` spec renders the component 1`] = `
-
-
-
-
+
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
@@ -250,7 +285,7 @@ exports[` spec renders the component 1`] = `
>
spec renders the component 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
spec renders the component 1`] = `
>
spec renders the component 1`] = `
xmlns="http://www.w3.org/2000/svg"
>
spec renders the empty component 1`] = `
-
-
- Notebooks
-
-
+ Notebooks
+
spec renders the empty component 1`] = `
- Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks includes creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.
+ Use Notebooks to interactively and collaboratively develop rich reports backed by live data. Common use cases for notebooks include creating postmortem reports, designing run books, building live infrastructure reports, or even documentation.
spec renders the empty component 1`] = `
class="euiFlexGroup euiFlexGroup--gutterSmall euiFlexGroup--directionRow euiFlexGroup--responsive"
>
-
-
- Use Notebooks to interactively and collaboratively develop rich reports backed by
- live data. Common use cases for notebooks includes creating postmortem reports,
- designing run books, building live infrastructure reports, or even documentation.{' '}
-
- Learn more
-
-
-
-
-
+
+
+ )}
+
+ {newNavigation ? (
+ 0 ? notebooks.length : '0'}
+ description={
+ <>
+ Use Notebooks to interactively and collaboratively develop rich reports backed
+ by live data. Common use cases for notebooks include creating postmortem
+ reports, designing run books, building live infrastructure reports, or even
+ documentation.{' '}
+
+ Learn more
+
+
+ }
+ components={[
+
+
+ addSampleNotebooksModal()}
+ >
+ Add sample notebooks
+
+
+
+
+ Create notebook
+
+
+ ,
+ ]}
+ />
+ ) : (
+
+
+
+
+ Notebooks ({notebooks.length})
+
+
+
+
+ Use Notebooks to interactively and collaboratively develop rich reports backed
+ by live data. Common use cases for notebooks include creating postmortem
+ reports, designing run books, building live infrastructure reports, or even
+ documentation.{' '}
+
+ Learn more
+
+
+
+
+
+
+ addSampleNotebooksModal()}
+ >
+ Add sample notebooks
+
+
+
+
+ Create notebook
+
+
+
+
+
+ )}
+ {notebooks.length > 0 ? (
+ <>
+
+ setSearchQuery(e.target.value)}
+ />
+
+
-
-
- Create notebook
-
-
-
-
-
- {notebooks.length > 0 ? (
- <>
- setSearchQuery(e.target.value)}
- />
Create notebook
@@ -345,7 +403,7 @@ export function NoteTable({
fullWidth={false}
onClick={() => addSampleNotebooksModal()}
>
- Add samples
+ Add sample notebooks
diff --git a/public/components/notebooks/components/notebook.tsx b/public/components/notebooks/components/notebook.tsx
index d7d82fabb..3505e4f2b 100644
--- a/public/components/notebooks/components/notebook.tsx
+++ b/public/components/notebooks/components/notebook.tsx
@@ -21,6 +21,8 @@ import {
EuiPopover,
EuiSpacer,
EuiText,
+ EuiButtonIcon,
+ EuiTitle,
} from '@elastic/eui';
import CSS from 'csstype';
import moment from 'moment';
@@ -50,17 +52,13 @@ import {
generateInContextReport,
} from './helpers/reporting_context_menu_helper';
import { Paragraphs } from './paragraph_components/paragraphs';
-const panelStyles: CSS.Properties = {
- float: 'left',
- width: '100%',
- maxWidth: '1130px',
- marginTop: '20px',
-};
+import { HeaderControlledComponentsWrapper } from '../../../../public/plugin_headerControl';
+import { coreRefs } from '../../../framework/core_refs';
-const pageStyles: CSS.Properties = {
- float: 'left',
- width: '100%',
- maxWidth: '1500px',
+const newNavigation = coreRefs.chrome?.navGroup.getNavGroupEnabled();
+
+const panelStyles: CSS.Properties = {
+ marginTop: '10px',
};
/*
@@ -784,13 +782,6 @@ export class Notebook extends Component {
}
render() {
- const createdText = (
-
-
- Created {moment(this.state.dateCreated).format(UI_DATE_FORMAT)}
-