open new tab for editing panel visualization (opensearch-project#430)

Signed-off-by: Eric Wei <[email protected]>

public/components/custom_panels/home.tsx

@@ -3,32 +3,34 @@
  * SPDX-License-Identifier: Apache-2.0
  */
 
-import { EuiBreadcrumb, EuiGlobalToastList, ShortDate } from '@elastic/eui';
+import { EuiBreadcrumb, EuiGlobalToastList, ShortDate, htmlIdGenerator } from '@elastic/eui';
 import { Toast } from '@elastic/eui/src/components/toast/global_toast_list';
 import React, { ReactChild, useState } from 'react';
-import { useDispatch } from 'react-redux';
+import { useDispatch, batch } from 'react-redux';
 // eslint-disable-next-line @osd/eslint/module_migration
 import { StaticContext } from 'react-router';
 import { HashRouter, Route, RouteComponentProps, Switch } from 'react-router-dom';
 import { CoreStart, SavedObjectsStart } from '../../../../../src/core/public';
-import {
-  CUSTOM_PANELS_API_PREFIX,
-  CUSTOM_PANELS_SAVED_OBJECT_TYPE,
-} from '../../../common/constants/custom_panels';
+import { CUSTOM_PANELS_API_PREFIX } from '../../../common/constants/custom_panels';
 import {
   EVENT_ANALYTICS,
   observabilityLogsID,
   observabilityPanelsID,
   OBSERVABILITY_BASE,
   SAVED_OBJECTS,
 } from '../../../common/constants/shared';
-import { coreRefs } from '../../framework/core_refs';
 import DSLService from '../../services/requests/dsl';
 import PPLService from '../../services/requests/ppl';
 import { CustomPanelTable } from './custom_panel_table';
 import { CustomPanelView } from './custom_panel_view';
 import { CustomPanelViewSO } from './custom_panel_view_so';
 import { fetchPanels, uuidRx } from './redux/panel_slice';
+import { REDIRECT_TAB, TAB_CREATED_TYPE, TAB_ID_TXT_PFX } from '../../../common/constants/explorer';
+import { init as initFields } from '../event_analytics/redux/slices/field_slice';
+import { init as initPatterns } from '../event_analytics/redux/slices/patterns_slice';
+import { init as initQueryResult } from '../event_analytics/redux/slices/query_result_slice';
+import { changeQuery, init as initQuery } from '../event_analytics/redux/slices/query_slice';
+import { addTab, setSelectedQueryTab } from '../event_analytics/redux/slices/query_tab_slice';
 
 // import { ObjectFetcher } from '../common/objectFetcher';
 
@@ -87,7 +89,36 @@ export const Home = ({
     setToasts([...toasts, { id: new Date().toISOString(), title, text, color } as Toast]);
   };
 
-  const onEditClick = (savedVisualizationId: string) => {
+  const addNewTab = async () => {
+    // get a new tabId
+    const tabId = htmlIdGenerator(TAB_ID_TXT_PFX)();
+
+    // create a new tab
+    await batch(() => {
+      dispatch(initQuery({ tabId }));
+      dispatch(initQueryResult({ tabId }));
+      dispatch(initFields({ tabId }));
+      dispatch(addTab({ tabId }));
+      dispatch(initPatterns({ tabId }));
+    });
+
+    return tabId;
+  };
+
+  const onEditClick = async (savedVisualizationId: string) => {
+    // open a new tab in explorer for loading this perticular visualization data to edit
+    const newTabId = await addNewTab();
+    batch(() => {
+      dispatch(
+        changeQuery({
+          tabId: newTabId,
+          query: {
+            [TAB_CREATED_TYPE]: REDIRECT_TAB,
+          },
+        })
+      );
+      dispatch(setSelectedQueryTab({ tabId: newTabId }));
+    });
     window.location.assign(`${observabilityLogsID}#/explorer/${savedVisualizationId}`);
   };