Add new page/route for notebooks create and rename

public/components/notebooks/components/__tests__/__snapshots__/note_table.test.tsx.snap

@@ -132,9 +132,10 @@ exports[`<NoteTable /> spec renders the component 1`] = `
               <div
                 class="euiFlexItem"
               >
-                <button
+                <a
                   class="euiButton euiButton--primary euiButton--fill"
-                  type="button"
+                  href="#/notebooks/create"
+                  rel="noreferrer"
                 >
                   <span
                     class="euiButtonContent euiButton__content"
@@ -145,7 +146,7 @@ exports[`<NoteTable /> spec renders the component 1`] = `
                       Create notebook
                     </span>
                   </span>
-                </button>
+                </a>
               </div>
             </div>
           </div>
@@ -1022,9 +1023,10 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
               <div
                 class="euiFlexItem"
               >
-                <button
+                <a
                   class="euiButton euiButton--primary euiButton--fill"
-                  type="button"
+                  href="#/notebooks/create"
+                  rel="noreferrer"
                 >
                   <span
                     class="euiButtonContent euiButton__content"
@@ -1035,7 +1037,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
                       Create notebook
                     </span>
                   </span>
-                </button>
+                </a>
               </div>
             </div>
           </div>
@@ -1080,10 +1082,11 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"
           >
-            <button
+            <a
               class="euiButton euiButton--primary"
               data-test-subj="note-table-empty-state-create-notebook-button"
-              type="button"
+              href="#/notebooks/create"
+              rel="noreferrer"
             >
               <span
                 class="euiButtonContent euiButton__content"
@@ -1094,7 +1097,7 @@ exports[`<NoteTable /> spec renders the empty component 1`] = `
                   Create notebook
                 </span>
               </span>
-            </button>
+            </a>
           </div>
           <div
             class="euiFlexItem euiFlexItem--flexGrowZero"

public/components/notebooks/components/__tests__/note_table.test.tsx

@@ -3,12 +3,23 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { fireEvent, render } from '@testing-library/react';
+import { fireEvent, render, waitFor } from '@testing-library/react';
 import { configure, mount, shallow } from 'enzyme';
 import Adapter from 'enzyme-adapter-react-16';
 import React from 'react';
 import { NoteTable } from '../note_table';
 
+jest.mock('react-router-dom', () => ({
+  useLocation: jest.fn().mockReturnValue({
+    pathname: '/notebooks',
+    search: '',
+    hash: '',
+    state: null,
+    key: '',
+  }),
+  useHistory: jest.fn()
+}));
+
 describe('<NoteTable /> spec', () => {
   configure({ adapter: new Adapter() });
 
@@ -81,4 +92,40 @@ describe('<NoteTable /> spec', () => {
     utils.getByText('Actions').click();
     utils.getByText('Rename').click();
   });
-});
+
+  it('create notebook', async () => {
+    const fetchNotebooks = jest.fn();
+    const addSampleNotebooks = jest.fn();
+    const createNotebook = jest.fn();
+    const renameNotebook = jest.fn();
+    const cloneNotebook = jest.fn();
+    const deleteNotebook = jest.fn();
+    const setBreadcrumbs = jest.fn();
+    const setToast = jest.fn();
+    const notebooks = Array.from({ length: 5 }, (v, k) => ({
+      path: `path-${k}`,
+      id: `id-${k}`,
+      dateCreated: 'date-created',
+      dateModified: 'date-modified',
+    }));
+    const utils = render(
+      <NoteTable
+        loading={false}
+        fetchNotebooks={fetchNotebooks}
+        addSampleNotebooks={addSampleNotebooks}
+        notebooks={notebooks}
+        createNotebook={createNotebook}
+        renameNotebook={renameNotebook}
+        cloneNotebook={cloneNotebook}
+        deleteNotebook={deleteNotebook}
+        parentBreadcrumb={{ href: 'parent-href', text: 'parent-text' }}
+        setBreadcrumbs={setBreadcrumbs}
+        setToast={setToast}
+      />
+    );
+    utils.getByText('Create notebook').click();
+    await waitFor(() => {
+      expect(global.window.location.href).toContain('/create')
+    });
+  });
+});

public/components/notebooks/components/main.tsx

@@ -308,26 +308,8 @@ export class Main extends React.Component<MainProps, MainState> {
           />
           <Switch>
             <Route
-              path="/notebooks/:id"
-              render={(props) => (
-                <Notebook
-                  pplService={this.props.pplService}
-                  openedNoteId={props.match.params.id}
-                  DashboardContainerByValueRenderer={this.props.DashboardContainerByValueRenderer}
-                  http={this.props.http}
-                  parentBreadcrumb={this.props.parentBreadcrumb}
-                  setBreadcrumbs={this.props.setBreadcrumbs}
-                  renameNotebook={this.renameNotebook}
-                  cloneNotebook={this.cloneNotebook}
-                  deleteNotebook={this.deleteNotebook}
-                  setToast={this.setToast}
-                  location={this.props.location}
-                  history={this.props.history}
-                />
-              )}
-            />
-            <Route
-              path="/notebooks"
+              exact
+              path={['/notebooks/create', '/notebooks']}
               render={(props) => (
                 <ObservabilitySideBar>
                   <NoteTable
@@ -346,6 +328,26 @@ export class Main extends React.Component<MainProps, MainState> {
                 </ObservabilitySideBar>
               )}
             />
+            <Route
+              exact
+              path="/notebooks/:id"
+              render={(props) => (
+                <Notebook
+                  pplService={this.props.pplService}
+                  openedNoteId={props.match.params.id}
+                  DashboardContainerByValueRenderer={this.props.DashboardContainerByValueRenderer}
+                  http={this.props.http}
+                  parentBreadcrumb={this.props.parentBreadcrumb}
+                  setBreadcrumbs={this.props.setBreadcrumbs}
+                  renameNotebook={this.renameNotebook}
+                  cloneNotebook={this.cloneNotebook}
+                  deleteNotebook={this.deleteNotebook}
+                  setToast={this.setToast}
+                  location={this.props.location}
+                  history={this.props.history}
+                />
+              )}
+            />
           </Switch>
         </>
       </HashRouter>

public/components/notebooks/components/note_table.tsx

@@ -43,6 +43,7 @@ import {
 } from './helpers/modal_containers';
 import { NotebookType } from './main';
 import { pageStyles } from '../../../../common/constants/shared';
+import { useHistory, useLocation } from 'react-router-dom';
 
 interface NoteTableProps {
   loading: boolean;
@@ -64,6 +65,8 @@ export function NoteTable(props: NoteTableProps) {
   const [isActionsPopoverOpen, setIsActionsPopoverOpen] = useState(false);
   const [selectedNotebooks, setSelectedNotebooks] = useState<NotebookType[]>([]);
   const [searchQuery, setSearchQuery] = useState('');
+  const location = useLocation();
+  const history = useHistory();
   const { notebooks, createNotebook, renameNotebook, cloneNotebook, deleteNotebook } = props;
 
   useEffect(() => {
@@ -77,6 +80,13 @@ export function NoteTable(props: NoteTableProps) {
     props.fetchNotebooks();
   }, []);
 
+  useEffect(() => {
+    const url = window.location.hash.split('/')
+    if (url[url.length-1] === 'create') { 
+      createNote();
+    }
+  }, [location]);
+
   const closeModal = () => {
     setIsModalVisible(false);
   };
@@ -114,7 +124,10 @@ export function NoteTable(props: NoteTableProps) {
     setModalLayout(
       getCustomModal(
         onCreate,
-        closeModal,
+        () => {
+          closeModal()
+          history.goBack();
+        },
         'Name',
         'Create notebook',
         'Cancel',
@@ -306,7 +319,7 @@ export function NoteTable(props: NoteTableProps) {
                     </EuiPopover>
                   </EuiFlexItem>
                   <EuiFlexItem>
-                    <EuiButton fill onClick={() => createNote()}>
+                    <EuiButton fill href="#/notebooks/create">
                       Create notebook
                     </EuiButton>
                   </EuiFlexItem>
@@ -367,10 +380,9 @@ export function NoteTable(props: NoteTableProps) {
                 <EuiSpacer size="m" />
                 <EuiFlexGroup justifyContent="center">
                   <EuiFlexItem grow={false}>
-                    <EuiButton
+                    <EuiButton href="#/notebooks/create"
                       data-test-subj="note-table-empty-state-create-notebook-button"
                       fullWidth={false}
-                      onClick={() => createNote()}
                     >
                       Create notebook
                     </EuiButton>