feat: navigate to workspace create page after button clicked (opensea…

…rch-project#23)

Signed-off-by: Lin Wang <wonglam@amazon.com>

src/plugins/workspace/public/containers/workspace_dropdown_list/workspace_dropdown_list.tsx

@@ -8,12 +8,12 @@ import React, { useState, useCallback, useMemo, useEffect } from 'react';
 import { EuiButton, EuiComboBox, EuiComboBoxOptionOption } from '@elastic/eui';
 import useObservable from 'react-use/lib/useObservable';
 import { CoreStart, WorkspaceAttribute } from '../../../../../core/public';
+import { WORKSPACE_APP_ID, PATHS } from '../../../common/constants';
 
 type WorkspaceOption = EuiComboBoxOptionOption<WorkspaceAttribute>;
 
 interface WorkspaceDropdownListProps {
   coreStart: CoreStart;
-  onCreateWorkspace: () => void;
   onSwitchWorkspace: (workspaceId: string) => Promise<void>;
 }
 
@@ -22,7 +22,7 @@ function workspaceToOption(workspace: WorkspaceAttribute): WorkspaceOption {
 }
 
 export function WorkspaceDropdownList(props: WorkspaceDropdownListProps) {
-  const { coreStart, onCreateWorkspace, onSwitchWorkspace } = props;
+  const { coreStart, onSwitchWorkspace } = props;
   const workspaceList = useObservable(coreStart.workspaces.client.workspaceList$, []);
   const currentWorkspaceId = useObservable(coreStart.workspaces.client.currentWorkspaceId$, '');
 
@@ -62,6 +62,10 @@ export function WorkspaceDropdownList(props: WorkspaceDropdownListProps) {
       });
   };
 
+  const onCreateWorkspaceClick = () => {
+    coreStart.application.navigateToApp(WORKSPACE_APP_ID, { path: PATHS.create });
+  };
+
   useEffect(() => {
     onSearchChange('');
   }, [onSearchChange]);
@@ -76,7 +80,7 @@ export function WorkspaceDropdownList(props: WorkspaceDropdownListProps) {
         selectedOptions={currentWorkspaceOption}
         singleSelection={{ asPlainText: true }}
         onSearchChange={onSearchChange}
-        append={<EuiButton onClick={onCreateWorkspace}>Create workspace</EuiButton>}
+        append={<EuiButton onClick={onCreateWorkspaceClick}>Create workspace</EuiButton>}
       />
     </>
   );

src/plugins/workspace/public/mount.tsx

@@ -15,7 +15,6 @@ export const mountDropdownList = (core: CoreStart) => {
       ReactDOM.render(
         <WorkspaceDropdownList
           coreStart={core}
-          onCreateWorkspace={() => alert('create')}
           onSwitchWorkspace={async (id: string) => {
             await new Promise((resolve) => setTimeout(resolve, 1000));
             alert(`switch to workspace ${id}`);