From e67172db1306a9273b9d22505f5dfd80f70a4ff3 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Fri, 20 Oct 2023 18:15:23 -0300 Subject: [PATCH 1/2] Use setStateToKbnUrl to generate conflict fields URL, and create tabsApi to allow updating tabs state --- .../edit_index_pattern/edit_index_pattern.tsx | 54 +- .../edit_index_pattern_state_container.ts | 11 +- .../edit_index_pattern/tabs/tabs.tsx | 940 +++++++++--------- 3 files changed, 536 insertions(+), 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 index 156d592935948c..95cffa001a88ab 100644 --- 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(false); const [relationships, setRelationships] = useState([]); const [allowedTypes, setAllowedTypes] = useState([]); + const [tabsApi, setTabsApi] = useState(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(

{mappingConflictLabel}

- - {i18n.translate( - 'indexPatternManagement.editIndexPattern.viewMappingConflictButton', - { - defaultMessage: 'View fields', - } - )} - + { + // eslint-disable-next-line @elastic/eui/href-or-on-click + ) => { + e.preventDefault(); + e.stopPropagation(); + tabsApi?.updateTab({ id: 'indexedFields' }); + tabsApi?.updateFieldTypeFilter(['conflict']); + tabsApi?.updateFieldFilter(''); + }} + > + {i18n.translate( + 'indexPatternManagement.editIndexPattern.viewMappingConflictButton', + { + defaultMessage: 'View fields', + } + )} + + } )} (stateStorageKey); + const initialStateFromUrl = kbnUrlStateStorage.get(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, diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx b/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx index 10e88ab5e6fd17..32ff67271af877 100644 --- a/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx +++ b/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/tabs.tsx @@ -7,7 +7,16 @@ */ import { uniq } from 'lodash'; -import React, { useState, useCallback, useEffect, Fragment, useMemo, useRef } from 'react'; +import React, { + useState, + useCallback, + useEffect, + Fragment, + useMemo, + useRef, + forwardRef, + useImperativeHandle, +} from 'react'; import { RouteComponentProps } from 'react-router-dom'; import { EuiFilterButton, @@ -62,6 +71,12 @@ interface TabsProps extends Pick { compositeRuntimeFields: Record; } +export interface TabsApi { + updateTab: (newTab: Pick) => void; + updateFieldTypeFilter: (newIndexedFieldTypeFilter: string[]) => void; + updateFieldFilter: (newFieldFilter: string) => void; +} + interface FilterItems { value: string; name: string; @@ -139,252 +154,336 @@ const addFieldButtonLabel = i18n.translate( } ); -export function Tabs({ - indexPattern, - saveIndexPattern, - fields, - history, - refreshFields, - relationships, - allowedTypes, - compositeRuntimeFields, -}: TabsProps) { - const { - uiSettings, - docLinks, - dataViewFieldEditor, - overlays, - theme, - dataViews, - http, - application, - savedObjectsManagement, - } = useKibana().services; - const [fieldFilter, setFieldFilter] = useState(''); - const [syncingStateFunc, setSyncingStateFunc] = useState<{ - getCurrentTab: () => string; - setCurrentTab?: (newTab: string) => { tab: string }; - getCurrentFieldTypes: () => string[] | undefined; - setCurrentFieldTypes?: (newFieldTypes: string[]) => { fieldTypes: string[] | undefined }; - }>({ - getCurrentTab: () => TAB_INDEXED_FIELDS, - getCurrentFieldTypes: () => [], - }); - const [scriptedFieldLanguageFilter, setScriptedFieldLanguageFilter] = useState([]); - const [isScriptedFieldFilterOpen, setIsScriptedFieldFilterOpen] = useState(false); - const [scriptedFieldLanguages, setScriptedFieldLanguages] = useState([]); - const [indexedFieldTypeFilter, setIndexedFieldTypeFilter] = useState([]); - const [isIndexedFilterOpen, setIsIndexedFilterOpen] = useState(false); - const [indexedFieldTypes, setIndexedFieldTypes] = useState([]); - const [schemaFieldTypeFilter, setSchemaFieldTypeFilter] = useState([]); - const [isSchemaFilterOpen, setIsSchemaFilterOpen] = useState(false); - const [schemaItems, setSchemaItems] = useState([ +export const Tabs = forwardRef( + ( { - value: 'runtime', - name: schemaOptionRuntime, - }, - { - value: 'indexed', - name: schemaOptionIndexed, + indexPattern, + saveIndexPattern, + fields, + history, + refreshFields, + relationships, + allowedTypes, + compositeRuntimeFields, }, - ]); - const closeEditorHandler = useRef<() => void | undefined>(); - const { DeleteRuntimeFieldProvider } = dataViewFieldEditor; - - const filteredIndexedFieldTypeFilter = useMemo(() => { - return uniq( - indexedFieldTypeFilter.filter((fieldType) => - indexedFieldTypes.some((item) => item.value === fieldType) - ) + ref + ) => { + const { + uiSettings, + docLinks, + dataViewFieldEditor, + overlays, + theme, + dataViews, + http, + application, + savedObjectsManagement, + } = useKibana().services; + const [fieldFilter, setFieldFilter] = useState(''); + const [syncingStateFunc, setSyncingStateFunc] = useState<{ + getCurrentTab: () => string; + setCurrentTab?: (newTab: string) => { tab: string }; + getCurrentFieldTypes: () => string[] | undefined; + setCurrentFieldTypes?: (newFieldTypes: string[]) => { fieldTypes: string[] | undefined }; + }>({ + getCurrentTab: () => TAB_INDEXED_FIELDS, + getCurrentFieldTypes: () => [], + }); + const [scriptedFieldLanguageFilter, setScriptedFieldLanguageFilter] = useState([]); + const [isScriptedFieldFilterOpen, setIsScriptedFieldFilterOpen] = useState(false); + const [scriptedFieldLanguages, setScriptedFieldLanguages] = useState([]); + const [indexedFieldTypeFilter, setIndexedFieldTypeFilter] = useState([]); + const [isIndexedFilterOpen, setIsIndexedFilterOpen] = useState(false); + const [indexedFieldTypes, setIndexedFieldTypes] = useState([]); + const [schemaFieldTypeFilter, setSchemaFieldTypeFilter] = useState([]); + const [isSchemaFilterOpen, setIsSchemaFilterOpen] = useState(false); + const [schemaItems, setSchemaItems] = useState([ + { + value: 'runtime', + name: schemaOptionRuntime, + }, + { + value: 'indexed', + name: schemaOptionIndexed, + }, + ]); + const closeEditorHandler = useRef<() => void | undefined>(); + const { DeleteRuntimeFieldProvider } = dataViewFieldEditor; + + const filteredIndexedFieldTypeFilter = useMemo(() => { + return uniq( + indexedFieldTypeFilter.filter((fieldType) => + indexedFieldTypes.some((item) => item.value === fieldType) + ) + ); + }, [indexedFieldTypeFilter, indexedFieldTypes]); + + const updateTab = useCallback( + (tab: Pick) => { + setSelectedTabId(tab.id); + syncingStateFunc.setCurrentTab?.(tab.id); + }, + [syncingStateFunc] ); - }, [indexedFieldTypeFilter, indexedFieldTypes]); - const updateFieldTypeFilter = useCallback( - (newIndexedFieldTypeFilter: string[]) => { - setIndexedFieldTypeFilter(newIndexedFieldTypeFilter); - syncingStateFunc?.setCurrentFieldTypes?.(newIndexedFieldTypeFilter); - }, - [setIndexedFieldTypeFilter, syncingStateFunc] - ); + const updateFieldTypeFilter = useCallback( + (newIndexedFieldTypeFilter: string[]) => { + setIndexedFieldTypeFilter(newIndexedFieldTypeFilter); + syncingStateFunc?.setCurrentFieldTypes?.(newIndexedFieldTypeFilter); + }, + [setIndexedFieldTypeFilter, syncingStateFunc] + ); - const updateFilterItem = ( - items: FilterItems[], - index: number, - updater: (a: FilterItems[]) => void - ) => { - if (!items[index]) { - return; - } - - const newItems = [...items]; - - switch (newItems[index].checked) { - case 'on': - newItems[index].checked = undefined; - break; - - default: - newItems[index].checked = 'on'; - } - - updater(newItems); - }; - - const refreshFilters = useCallback(() => { - const tempIndexedFieldTypes: string[] = []; - const tempScriptedFieldLanguages: string[] = []; - indexPattern.fields.getAll().forEach((field) => { - if (field.scripted) { - if (field.lang) { - tempScriptedFieldLanguages.push(field.lang); - } - } else { - // for conflicted fields, add conflict as a type - if (field.type === 'conflict') { - tempIndexedFieldTypes.push('conflict'); - } - if (field.esTypes) { - // add all types, may be multiple - field.esTypes.forEach((item) => tempIndexedFieldTypes.push(item)); - } + useImperativeHandle( + ref, + () => ({ + updateTab, + updateFieldTypeFilter, + updateFieldFilter: setFieldFilter, + }), + [updateFieldTypeFilter, updateTab] + ); + + const updateFilterItem = ( + items: FilterItems[], + index: number, + updater: (a: FilterItems[]) => void + ) => { + if (!items[index]) { + return; } - }); - setIndexedFieldTypes(convertToEuiFilterOptions(tempIndexedFieldTypes)); - setScriptedFieldLanguages(convertToEuiFilterOptions(tempScriptedFieldLanguages)); - }, [indexPattern]); - - const closeFieldEditor = useCallback(() => { - if (closeEditorHandler.current) { - closeEditorHandler.current(); - } - }, []); - - const openFieldEditor = useCallback( - (fieldName?: string) => { - closeEditorHandler.current = dataViewFieldEditor.openEditor({ - ctx: { - dataView: indexPattern, - }, - onSave: refreshFields, - fieldName, - }); - }, - [dataViewFieldEditor, indexPattern, refreshFields] - ); + const newItems = [...items]; + + switch (newItems[index].checked) { + case 'on': + newItems[index].checked = undefined; + break; - useEffect(() => { - refreshFilters(); - }, [indexPattern, indexPattern.fields, refreshFilters]); + default: + newItems[index].checked = 'on'; + } - useEffect(() => { - return () => { - // When the component unmounts, make sure to close the field editor - closeFieldEditor(); + updater(newItems); }; - }, [closeFieldEditor]); - - const fieldWildcardMatcherDecorated = useCallback( - (filters: string[] | undefined) => fieldWildcardMatcher(filters, uiSettings.get(META_FIELDS)), - [uiSettings] - ); - - const userEditPermission = dataViews.getCanSaveSync(); - const getFilterSection = useCallback( - (type: string) => { - return ( - - - setFieldFilter(e.target.value)} - data-test-subj="indexPatternFieldFilter" - aria-label={searchAriaLabel} - /> - - {type === TAB_INDEXED_FIELDS && indexedFieldTypes.length > 0 && ( - <> - - - setIsIndexedFilterOpen(!isIndexedFilterOpen)} - isSelected={isIndexedFilterOpen} - numFilters={indexedFieldTypes.length} - hasActiveFilters={filteredIndexedFieldTypeFilter.length > 0} - numActiveFilters={filteredIndexedFieldTypeFilter.length} - > - {filterLabel} - - } - isOpen={isIndexedFilterOpen} - closePopover={() => setIsIndexedFilterOpen(false)} - > - {indexedFieldTypes.map((item, index) => { - const isSelected = filteredIndexedFieldTypeFilter.includes(item.value); - return ( + + const refreshFilters = useCallback(() => { + const tempIndexedFieldTypes: string[] = []; + const tempScriptedFieldLanguages: string[] = []; + indexPattern.fields.getAll().forEach((field) => { + if (field.scripted) { + if (field.lang) { + tempScriptedFieldLanguages.push(field.lang); + } + } else { + // for conflicted fields, add conflict as a type + if (field.type === 'conflict') { + tempIndexedFieldTypes.push('conflict'); + } + if (field.esTypes) { + // add all types, may be multiple + field.esTypes.forEach((item) => tempIndexedFieldTypes.push(item)); + } + } + }); + + setIndexedFieldTypes(convertToEuiFilterOptions(tempIndexedFieldTypes)); + setScriptedFieldLanguages(convertToEuiFilterOptions(tempScriptedFieldLanguages)); + }, [indexPattern]); + + const closeFieldEditor = useCallback(() => { + if (closeEditorHandler.current) { + closeEditorHandler.current(); + } + }, []); + + const openFieldEditor = useCallback( + (fieldName?: string) => { + closeEditorHandler.current = dataViewFieldEditor.openEditor({ + ctx: { + dataView: indexPattern, + }, + onSave: refreshFields, + fieldName, + }); + }, + [dataViewFieldEditor, indexPattern, refreshFields] + ); + + useEffect(() => { + refreshFilters(); + }, [indexPattern, indexPattern.fields, refreshFilters]); + + useEffect(() => { + return () => { + // When the component unmounts, make sure to close the field editor + closeFieldEditor(); + }; + }, [closeFieldEditor]); + + const fieldWildcardMatcherDecorated = useCallback( + (filters: string[] | undefined) => fieldWildcardMatcher(filters, uiSettings.get(META_FIELDS)), + [uiSettings] + ); + + const userEditPermission = dataViews.getCanSaveSync(); + const getFilterSection = useCallback( + (type: string) => { + return ( + + + setFieldFilter(e.target.value)} + data-test-subj="indexPatternFieldFilter" + aria-label={searchAriaLabel} + /> + + {type === TAB_INDEXED_FIELDS && indexedFieldTypes.length > 0 && ( + <> + + + setIsIndexedFilterOpen(!isIndexedFilterOpen)} + isSelected={isIndexedFilterOpen} + numFilters={indexedFieldTypes.length} + hasActiveFilters={filteredIndexedFieldTypeFilter.length > 0} + numActiveFilters={filteredIndexedFieldTypeFilter.length} + > + {filterLabel} + + } + isOpen={isIndexedFilterOpen} + closePopover={() => setIsIndexedFilterOpen(false)} + > + {indexedFieldTypes.map((item, index) => { + const isSelected = filteredIndexedFieldTypeFilter.includes(item.value); + return ( + { + updateFieldTypeFilter( + isSelected + ? filteredIndexedFieldTypeFilter.filter((f) => f !== item.value) + : [...filteredIndexedFieldTypeFilter, item.value] + ); + }} + data-test-subj={`indexedFieldTypeFilterDropdown-option-${item.value}${ + item.checked ? '-checked' : '' + }`} + > + {item.name} + + ); + })} + + setIsSchemaFilterOpen(!isSchemaFilterOpen)} + isSelected={isSchemaFilterOpen} + numFilters={schemaItems.length} + hasActiveFilters={!!schemaItems.find((item) => item.checked === 'on')} + numActiveFilters={ + schemaItems.filter((item) => item.checked === 'on').length + } + > + {schemaFilterLabel} + + } + isOpen={isSchemaFilterOpen} + closePopover={() => setIsSchemaFilterOpen(false)} + > + {schemaItems.map((item, index) => ( { - updateFieldTypeFilter( - isSelected - ? filteredIndexedFieldTypeFilter.filter((f) => f !== item.value) - : [...filteredIndexedFieldTypeFilter, item.value] + setSchemaFieldTypeFilter( + item.checked + ? schemaFieldTypeFilter.filter((f) => f !== item.value) + : [...schemaFieldTypeFilter, item.value] ); + updateFilterItem(schemaItems, index, setSchemaItems); }} - data-test-subj={`indexedFieldTypeFilterDropdown-option-${item.value}${ + data-test-subj={`schemaFieldTypeFilterDropdown-option-${item.value}${ item.checked ? '-checked' : '' }`} > {item.name} - ); - })} - + ))} + + + + {userEditPermission && ( + + openFieldEditor()} data-test-subj="addField"> + {addFieldButtonLabel} + + + )} + + )} + {type === TAB_SCRIPTED_FIELDS && scriptedFieldLanguages.length > 0 && ( + + setIsSchemaFilterOpen(!isSchemaFilterOpen)} - isSelected={isSchemaFilterOpen} - numFilters={schemaItems.length} - hasActiveFilters={!!schemaItems.find((item) => item.checked === 'on')} + onClick={() => setIsScriptedFieldFilterOpen(!isScriptedFieldFilterOpen)} + isSelected={isScriptedFieldFilterOpen} + numFilters={scriptedFieldLanguages.length} + hasActiveFilters={ + !!scriptedFieldLanguages.find((item) => item.checked === 'on') + } numActiveFilters={ - schemaItems.filter((item) => item.checked === 'on').length + scriptedFieldLanguages.filter((item) => item.checked === 'on').length } > - {schemaFilterLabel} + {scriptedFieldFilterLabel} } - isOpen={isSchemaFilterOpen} - closePopover={() => setIsSchemaFilterOpen(false)} + isOpen={isScriptedFieldFilterOpen} + closePopover={() => setIsScriptedFieldFilterOpen(false)} > - {schemaItems.map((item, index) => ( + {scriptedFieldLanguages.map((item, index) => ( { - setSchemaFieldTypeFilter( + setScriptedFieldLanguageFilter( item.checked - ? schemaFieldTypeFilter.filter((f) => f !== item.value) - : [...schemaFieldTypeFilter, item.value] + ? scriptedFieldLanguageFilter.filter((f) => f !== item.value) + : [...scriptedFieldLanguageFilter, item.value] + ); + updateFilterItem( + scriptedFieldLanguages, + index, + setScriptedFieldLanguages ); - updateFilterItem(schemaItems, index, setSchemaItems); }} - data-test-subj={`schemaFieldTypeFilterDropdown-option-${item.value}${ + data-test-subj={`scriptedFieldLanguageFilterDropdown-option-${item.value}${ item.checked ? '-checked' : '' }`} > @@ -394,251 +493,194 @@ export function Tabs({ - {userEditPermission && ( - - openFieldEditor()} data-test-subj="addField"> - {addFieldButtonLabel} - - - )} - - )} - {type === TAB_SCRIPTED_FIELDS && scriptedFieldLanguages.length > 0 && ( - - - setIsScriptedFieldFilterOpen(!isScriptedFieldFilterOpen)} - isSelected={isScriptedFieldFilterOpen} - numFilters={scriptedFieldLanguages.length} - hasActiveFilters={ - !!scriptedFieldLanguages.find((item) => item.checked === 'on') - } - numActiveFilters={ - scriptedFieldLanguages.filter((item) => item.checked === 'on').length - } - > - {scriptedFieldFilterLabel} - - } - isOpen={isScriptedFieldFilterOpen} - closePopover={() => setIsScriptedFieldFilterOpen(false)} - > - {scriptedFieldLanguages.map((item, index) => ( - { - setScriptedFieldLanguageFilter( - item.checked - ? scriptedFieldLanguageFilter.filter((f) => f !== item.value) - : [...scriptedFieldLanguageFilter, item.value] - ); - updateFilterItem(scriptedFieldLanguages, index, setScriptedFieldLanguages); + )} + + ); + }, + [ + fieldFilter, + filteredIndexedFieldTypeFilter, + indexedFieldTypes, + isIndexedFilterOpen, + scriptedFieldLanguageFilter, + scriptedFieldLanguages, + isScriptedFieldFilterOpen, + schemaItems, + schemaFieldTypeFilter, + isSchemaFilterOpen, + openFieldEditor, + userEditPermission, + updateFieldTypeFilter, + ] + ); + + const getContent = useCallback( + (type: string) => { + switch (type) { + case TAB_INDEXED_FIELDS: + return ( + + + {getFilterSection(type)} + + + {(deleteField) => ( + - {item.name} - - ))} - - - - )} - - ); - }, - [ - fieldFilter, - filteredIndexedFieldTypeFilter, - indexedFieldTypes, - isIndexedFilterOpen, - scriptedFieldLanguageFilter, - scriptedFieldLanguages, - isScriptedFieldFilterOpen, - schemaItems, - schemaFieldTypeFilter, - isSchemaFilterOpen, - openFieldEditor, - userEditPermission, - updateFieldTypeFilter, - ] - ); - - const getContent = useCallback( - (type: string) => { - switch (type) { - case TAB_INDEXED_FIELDS: - return ( - - - {getFilterSection(type)} - - - {(deleteField) => ( - - )} - - - ); - case TAB_SCRIPTED_FIELDS: - return ( - - - {getFilterSection(type)} - - { - history.push(getPath(field, indexPattern)); - }, - }} - onRemoveField={refreshFilters} - painlessDocLink={docLinks.links.scriptedFields.painless} - userEditPermission={dataViews.getCanSaveSync()} - /> - - ); - case TAB_SOURCE_FILTERS: - return ( - - - {getFilterSection(type)} - - - - ); - case TAB_RELATIONSHIPS: - return ( - - - - - ); - } - }, - [ - docLinks.links.scriptedFields.painless, - fieldFilter, - fieldWildcardMatcherDecorated, - fields, - getFilterSection, - history, - indexPattern, - filteredIndexedFieldTypeFilter, - schemaFieldTypeFilter, - refreshFilters, - scriptedFieldLanguageFilter, - saveIndexPattern, - openFieldEditor, - DeleteRuntimeFieldProvider, - refreshFields, - overlays, - theme, - dataViews, - compositeRuntimeFields, - http, - application, - savedObjectsManagement, - allowedTypes, - relationships, - ] - ); + openModal={overlays.openModal} + theme={theme} + userEditPermission={dataViews.getCanSaveSync()} + /> + )} + + + ); + case TAB_SCRIPTED_FIELDS: + return ( + + + {getFilterSection(type)} + + { + history.push(getPath(field, indexPattern)); + }, + }} + onRemoveField={refreshFilters} + painlessDocLink={docLinks.links.scriptedFields.painless} + userEditPermission={dataViews.getCanSaveSync()} + /> + + ); + case TAB_SOURCE_FILTERS: + return ( + + + {getFilterSection(type)} + + + + ); + case TAB_RELATIONSHIPS: + return ( + + + + + ); + } + }, + [ + docLinks.links.scriptedFields.painless, + fieldFilter, + fieldWildcardMatcherDecorated, + fields, + getFilterSection, + history, + indexPattern, + filteredIndexedFieldTypeFilter, + schemaFieldTypeFilter, + refreshFilters, + scriptedFieldLanguageFilter, + saveIndexPattern, + openFieldEditor, + DeleteRuntimeFieldProvider, + refreshFields, + overlays, + theme, + dataViews, + compositeRuntimeFields, + http, + application, + savedObjectsManagement, + allowedTypes, + relationships, + ] + ); - const euiTabs: EuiTabbedContentTab[] = useMemo( - () => - getTabs(indexPattern, fieldFilter, relationships.length, dataViews.scriptedFieldsEnabled).map( - (tab: Pick) => { + const euiTabs: EuiTabbedContentTab[] = useMemo( + () => + getTabs( + indexPattern, + fieldFilter, + relationships.length, + dataViews.scriptedFieldsEnabled + ).map((tab: Pick) => { return { ...tab, content: getContent(tab.id), }; - } - ), - [fieldFilter, getContent, indexPattern, relationships, dataViews.scriptedFieldsEnabled] - ); - - const [selectedTabId, setSelectedTabId] = useState(euiTabs[0].id); - - useEffect(() => { - const { - startSyncingState, - stopSyncingState, - setCurrentTab, - getCurrentTab, - setCurrentFieldTypes, - getCurrentFieldTypes, - } = createEditIndexPatternPageStateContainer({ - useHashedUrl: uiSettings.get('state:storeInSessionStorage'), - defaultTab: TAB_INDEXED_FIELDS, - }); - - startSyncingState(); - setSyncingStateFunc({ - setCurrentTab, - getCurrentTab, - setCurrentFieldTypes, - getCurrentFieldTypes, - }); - setSelectedTabId(getCurrentTab()); - setIndexedFieldTypeFilter((currentValue) => getCurrentFieldTypes() || currentValue); + }), + [fieldFilter, getContent, indexPattern, relationships, dataViews.scriptedFieldsEnabled] + ); - return () => { - stopSyncingState(); - }; - }, [uiSettings]); + const [selectedTabId, setSelectedTabId] = useState(euiTabs[0].id); + + useEffect(() => { + const { + startSyncingState, + stopSyncingState, + setCurrentTab, + getCurrentTab, + setCurrentFieldTypes, + getCurrentFieldTypes, + } = createEditIndexPatternPageStateContainer({ + useHashedUrl: uiSettings.get('state:storeInSessionStorage'), + defaultTab: TAB_INDEXED_FIELDS, + }); - return ( - tab.id === selectedTabId)} - onTabClick={(tab) => { - setSelectedTabId(tab.id); - syncingStateFunc.setCurrentTab?.(tab.id); - }} - /> - ); -} + startSyncingState(); + setSyncingStateFunc({ + setCurrentTab, + getCurrentTab, + setCurrentFieldTypes, + getCurrentFieldTypes, + }); + setSelectedTabId(getCurrentTab()); + setIndexedFieldTypeFilter((currentValue) => getCurrentFieldTypes() || currentValue); + + return () => { + stopSyncingState(); + }; + }, [uiSettings]); + + return ( + tab.id === selectedTabId)} + onTabClick={updateTab} + /> + ); + } +); From 1476de52c3cd48bd214e0f5cf70bcc2918807c38 Mon Sep 17 00:00:00 2001 From: Davis McPhee Date: Fri, 20 Oct 2023 18:28:51 -0300 Subject: [PATCH 2/2] Update type export --- .../components/edit_index_pattern/edit_index_pattern.tsx | 3 +-- .../public/components/edit_index_pattern/tabs/index.ts | 2 +- 2 files changed, 2 insertions(+), 3 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 index 95cffa001a88ab..64c7c4ca1a1bc3 100644 --- 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 @@ -31,11 +31,10 @@ import { import { pickBy } from 'lodash'; import { setStateToKbnUrl } from '@kbn/kibana-utils-plugin/public'; import { IndexPatternManagmentContext } from '../../types'; -import { Tabs } from './tabs'; +import { Tabs, type TabsApi } 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 = { diff --git a/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/index.ts b/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/index.ts index 322aadb1a67098..d7698eae90cd07 100644 --- a/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/index.ts +++ b/src/plugins/data_view_management/public/components/edit_index_pattern/tabs/index.ts @@ -6,4 +6,4 @@ * Side Public License, v 1. */ -export { Tabs } from './tabs'; +export { Tabs, type TabsApi } from './tabs';