Use setStateToKbnUrl to generate conflict fields URL, and create tabs…

…Api to allow updating tabs state
jughosta · Oct 20, 2023 · e67172d · e67172d
1 parent 4f9afbe
commit e67172d
Show file tree

Hide file tree

Showing 3 changed files with 536 additions and 469 deletions.
diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/edit_index_pattern.tsx b/src/plugins/data_view_management/public/components/edit_index_pattern/edit_index_pattern.tsx
@@ -6,7 +6,7 @@
  * Side Public License, v 1.
  */
 
-import React, { useEffect, useState, useCallback } from 'react';
+import React, { useEffect, useState, useCallback, useMemo } from 'react';
 import { withRouter, RouteComponentProps, useLocation } from 'react-router-dom';
 import {
   EuiFlexGroup,
@@ -29,11 +29,14 @@ import {
   SavedObjectManagementTypeInfo,
 } from '@kbn/saved-objects-management-plugin/public';
 import { pickBy } from 'lodash';
+import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public';
 import { IndexPatternManagmentContext } from '../../types';
 import { Tabs } from './tabs';
 import { IndexHeader } from './index_header';
 import { getTags } from '../utils';
 import { removeDataView, RemoveDataViewProps } from './remove_data_view';
+import { TabsApi } from './tabs/tabs';
+import { APP_STATE_STORAGE_KEY } from './edit_index_pattern_state_container';
 
 const codeStyle = {
   marginLeft: '8px',
@@ -91,6 +94,20 @@ export const EditIndexPattern = withRouter(
     const [showEditDialog, setShowEditDialog] = useState<boolean>(false);
     const [relationships, setRelationships] = useState<SavedObjectRelationWithTitle[]>([]);
     const [allowedTypes, setAllowedTypes] = useState<SavedObjectManagementTypeInfo[]>([]);
+    const [tabsApi, setTabsApi] = useState<TabsApi | null>(null);
+    const conflictFieldsUrl = useMemo(() => {
+      return setStateToKbnUrl(
+        APP_STATE_STORAGE_KEY,
+        {
+          fieldTypes: ['conflict'],
+          tab: 'indexedFields',
+        },
+        undefined,
+        application.getUrlForApp('management', {
+          path: `/kibana/dataViews/dataView/${encodeURIComponent(indexPattern.id!)}`,
+        })
+      );
+    }, [application, indexPattern.id]);
 
     useEffect(() => {
       savedObjectsManagement.getAllowedTypes().then((resp) => {
@@ -269,26 +286,33 @@ export const EditIndexPattern = withRouter(
               <EuiSpacer />
               <EuiCallOut title={mappingConflictHeader} color="warning" iconType="warning">
                 <p>{mappingConflictLabel}</p>
-                <EuiLink
-                  href={application.getUrlForApp('management', {
-                    path: `/kibana/dataViews/dataView/${encodeURIComponent(
-                      indexPattern.id!
-                    )}#/?_a=(fieldTypes:!(conflict),tab:indexedFields)`,
-                  })}
-                >
-                  {i18n.translate(
-                    'indexPatternManagement.editIndexPattern.viewMappingConflictButton',
-                    {
-                      defaultMessage: 'View fields',
-                    }
-                  )}
-                </EuiLink>
+                {
+                  // eslint-disable-next-line @elastic/eui/href-or-on-click
+                  <EuiLink
+                    href={conflictFieldsUrl}
+                    onClick={(e: React.MouseEvent<HTMLAnchorElement>) => {
+                      e.preventDefault();
+                      e.stopPropagation();
+                      tabsApi?.updateTab({ id: 'indexedFields' });
+                      tabsApi?.updateFieldTypeFilter(['conflict']);
+                      tabsApi?.updateFieldFilter('');
+                    }}
+                  >
+                    {i18n.translate(
+                      'indexPatternManagement.editIndexPattern.viewMappingConflictButton',
+                      {
+                        defaultMessage: 'View fields',
+                      }
+                    )}
+                  </EuiLink>
+                }
               </EuiCallOut>
             </>
           )}
         </IndexHeader>
         <EuiSpacer size="xl" />
         <Tabs
+          ref={setTabsApi}
           indexPattern={indexPattern}
           saveIndexPattern={dataViews.updateSavedObject.bind(dataViews)}
           fields={fields}

diff --git a/...iew_management/public/components/edit_index_pattern/edit_index_pattern_state_container.ts b/...iew_management/public/components/edit_index_pattern/edit_index_pattern_state_container.ts
@@ -18,6 +18,9 @@ interface IEditIndexPatternState {
   fieldTypes?: string[];
 }
 
+// query param to store app state at
+export const APP_STATE_STORAGE_KEY = '_a';
+
 /**
  * Create state container with sync config for tab navigation specific for edit_index_pattern page
  */
@@ -29,8 +32,6 @@ export function createEditIndexPatternPageStateContainer({
   useHashedUrl: boolean;
 }) {
   const history = createHashHistory();
-  // query param to store app state at
-  const stateStorageKey = '_a';
   // default app state, when there is no initial state in the url
   const defaultState = {
     tab: defaultTab,
@@ -40,7 +41,7 @@ export function createEditIndexPatternPageStateContainer({
     history,
   });
   // extract starting app state from URL and use it as starting app state in state container
-  const initialStateFromUrl = kbnUrlStateStorage.get<IEditIndexPatternState>(stateStorageKey);
+  const initialStateFromUrl = kbnUrlStateStorage.get<IEditIndexPatternState>(APP_STATE_STORAGE_KEY);
   const stateContainer = createStateContainer(
     {
       ...defaultState,
@@ -60,7 +61,7 @@ export function createEditIndexPatternPageStateContainer({
   );
 
   const { start, stop } = syncState({
-    storageKey: stateStorageKey,
+    storageKey: APP_STATE_STORAGE_KEY,
     stateContainer: {
       ...stateContainer,
       // state syncing utility requires state containers to handle "null"
@@ -70,7 +71,7 @@ export function createEditIndexPatternPageStateContainer({
   });
 
   // makes sure initial url is the same as initial state (this is not really required)
-  kbnUrlStateStorage.set(stateStorageKey, stateContainer.getState(), { replace: true });
+  kbnUrlStateStorage.set(APP_STATE_STORAGE_KEY, stateContainer.getState(), { replace: true });
 
   return {
     startSyncingState: start,