From 7f02d729eadd00709023dfa9cc4e6468eef465be Mon Sep 17 00:00:00 2001 From: Alison Goryachev Date: Tue, 16 Jun 2020 14:05:56 -0400 Subject: [PATCH] address review feedback --- .../component_template_details.test.ts | 12 ++++++++- .../component_template_details.helpers.ts | 9 ++++++- .../component_template_details.tsx | 16 +++++------- .../manage_button.tsx | 12 ++++++++- .../component_template_details/tabs.tsx | 26 +++++++++---------- .../component_template_list.tsx | 3 +-- 6 files changed, 50 insertions(+), 28 deletions(-) diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_details.test.ts b/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_details.test.ts index ba7e4a9547bf5..7c17dde119c42 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_details.test.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/component_template_details.test.ts @@ -182,11 +182,21 @@ describe('', () => { }); test('should render a footer with context menu', () => { - const { exists } = testBed; + const { exists, actions, component, find } = testBed; // Verify footer exists expect(exists('componentTemplateDetails.footer')).toBe(true); expect(exists('manageComponentTemplateButton')).toBe(true); + + // Click manage button and verify actions + act(() => { + actions.clickManageButton(); + }); + + component.update(); + + expect(exists('manageComponentTemplateContextMenu')).toBe(true); + expect(find('manageComponentTemplateContextMenu.action').length).toEqual(1); }); }); diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/component_template_details.helpers.ts b/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/component_template_details.helpers.ts index 4288d3829cc20..25c2d654fd900 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/component_template_details.helpers.ts +++ b/x-pack/plugins/index_management/public/application/components/component_templates/__jest__/client_integration/helpers/component_template_details.helpers.ts @@ -30,10 +30,15 @@ const createActions = (testBed: TestBed) = find('aliasesTab').simulate('click'); }; + const clickManageButton = () => { + find('manageComponentTemplateButton').simulate('click'); + }; + return { clickSettingsTab, clickAliasesTab, clickMappingsTab, + clickManageButton, }; }; @@ -76,4 +81,6 @@ export type ComponentTemplateDetailsTestSubjects = | 'noMappingsCallout' | 'settingsTabContent' | 'noSettingsCallout' - | 'manageComponentTemplateButton'; + | 'manageComponentTemplateButton' + | 'manageComponentTemplateContextMenu' + | 'manageComponentTemplateContextMenu.action'; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/component_template_details.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/component_template_details.tsx index 06307b6930db4..a8007c6363584 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/component_template_details.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/component_template_details.tsx @@ -22,7 +22,7 @@ import { import { SectionLoading, TabSettings, TabAliases, TabMappings } from '../shared_imports'; import { useComponentTemplatesContext } from '../component_templates_context'; import { TabSummary } from './tab_summary'; -import { ComponentTemplateTabs, TabType, Tab } from './tabs'; +import { ComponentTemplateTabs, TabType } from './tabs'; import { ManageButton, ManageAction } from './manage_button'; interface Props { @@ -43,7 +43,7 @@ export const ComponentTemplateDetailsFlyout: React.FunctionComponent = ({ componentTemplateName ); - const [activeTab, setActiveTab] = useState(TabType.Summary); + const [activeTab, setActiveTab] = useState('summary'); let content: React.ReactNode | undefined; @@ -77,13 +77,11 @@ export const ComponentTemplateDetailsFlyout: React.FunctionComponent = ({ template: { settings, mappings, aliases }, } = componentTemplateDetails; - const tabToComponentMap: { - [key: string]: React.ReactNode; - } = { - [TabType.Summary]: , - [TabType.Settings]: , - [TabType.Mappings]: , - [TabType.Aliases]: , + const tabToComponentMap: Record = { + summary: , + settings: , + mappings: , + aliases: , }; const tabContent = tabToComponentMap[activeTab]; diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/manage_button.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/manage_button.tsx index e904b10592e77..c3a4f9b4dce35 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/manage_button.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/manage_button.tsx @@ -36,10 +36,18 @@ export const ManageButton: React.FunctionComponent = ({ const items: EuiContextMenuPanelItemDescriptor[] = actions.map( ({ name, icon, getIsDisabled, closePopoverOnClick, handleActionClick }) => { + const isDisabled = getIsDisabled ? getIsDisabled(componentTemplateDetails) : false; + return { name, icon, - disabled: getIsDisabled ? getIsDisabled(componentTemplateDetails) : false, + disabled: isDisabled, + toolTipContent: isDisabled ? ( + + ) : null, onClick: () => { handleActionClick(); @@ -47,6 +55,7 @@ export const ManageButton: React.FunctionComponent = ({ setIsPopOverOpen(false); } }, + 'data-test-subj': 'action', }; } ); @@ -77,6 +86,7 @@ export const ManageButton: React.FunctionComponent = ({ > void; + activeTab: TabType; } -interface Props { - setActiveTab: (id: Tab) => void; - activeTab: Tab; +interface Tab { + id: TabType; + name: string; } -const TABS = [ +const TABS: Tab[] = [ { - id: TabType.Summary, + id: 'summary', name: i18n.translate('xpack.idxMgmt.componentTemplateDetails.summaryTabTitle', { defaultMessage: 'Summary', }), }, { - id: TabType.Settings, + id: 'settings', name: i18n.translate('xpack.idxMgmt.componentTemplateDetails.settingsTabTitle', { defaultMessage: 'Settings', }), }, { - id: TabType.Mappings, + id: 'mappings', name: i18n.translate('xpack.idxMgmt.componentTemplateDetails.mappingsTabTitle', { defaultMessage: 'Mappings', }), }, { - id: TabType.Aliases, + id: 'aliases', name: i18n.translate('xpack.idxMgmt.componentTemplateDetails.aliasesTabTitle', { defaultMessage: 'Aliases', }), diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/component_template_list.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/component_template_list.tsx index 78cb60a220979..05a5ed462d8f7 100644 --- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/component_template_list.tsx +++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_list/component_template_list.tsx @@ -10,9 +10,8 @@ import { i18n } from '@kbn/i18n'; import { FormattedMessage } from '@kbn/i18n/react'; import { ScopedHistory } from 'kibana/public'; -import { SectionLoading } from '../shared_imports'; +import { SectionLoading, ComponentTemplateDeserialized } from '../shared_imports'; import { UIM_COMPONENT_TEMPLATE_LIST_LOAD } from '../constants'; -import { ComponentTemplateDeserialized } from '../shared_imports'; import { useComponentTemplatesContext } from '../component_templates_context'; import { ComponentTemplateDetailsFlyout } from '../component_template_details'; import { EmptyPrompt } from './empty_prompt';