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('<ComponentTemplateDetails />', () => {
     });
 
     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<ComponentTemplateDetailsTestSubjects>) =
     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<Props> = ({
     componentTemplateName
   );
 
-  const [activeTab, setActiveTab] = useState<Tab>(TabType.Summary);
+  const [activeTab, setActiveTab] = useState<TabType>('summary');
 
   let content: React.ReactNode | undefined;
 
@@ -77,13 +77,11 @@ export const ComponentTemplateDetailsFlyout: React.FunctionComponent<Props> = ({
       template: { settings, mappings, aliases },
     } = componentTemplateDetails;
 
-    const tabToComponentMap: {
-      [key: string]: React.ReactNode;
-    } = {
-      [TabType.Summary]: <TabSummary componentTemplateDetails={componentTemplateDetails} />,
-      [TabType.Settings]: <TabSettings settings={settings} />,
-      [TabType.Mappings]: <TabMappings mappings={mappings} />,
-      [TabType.Aliases]: <TabAliases aliases={aliases} />,
+    const tabToComponentMap: Record<TabType, React.ReactNode> = {
+      summary: <TabSummary componentTemplateDetails={componentTemplateDetails} />,
+      settings: <TabSettings settings={settings} />,
+      mappings: <TabMappings mappings={mappings} />,
+      aliases: <TabAliases aliases={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<Props> = ({
 
   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 ? (
+          <FormattedMessage
+            id="xpack.idxMgmt.componentTemplateDetails.manageButtonDisabledTooltipLabel"
+            defaultMessage="Template is in use and cannot be deleted"
+          />
+        ) : null,
         onClick: () => {
           handleActionClick();
 
@@ -47,6 +55,7 @@ export const ManageButton: React.FunctionComponent<Props> = ({
             setIsPopOverOpen(false);
           }
         },
+        'data-test-subj': 'action',
       };
     }
   );
@@ -77,6 +86,7 @@ export const ManageButton: React.FunctionComponent<Props> = ({
     >
       <EuiContextMenu
         initialPanelId={0}
+        data-test-subj="manageComponentTemplateContextMenu"
         panels={[
           {
             id: 0,
diff --git a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/tabs.tsx b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/tabs.tsx
index d4fc75555ffe3..89370e3f6f1b8 100644
--- a/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/tabs.tsx
+++ b/x-pack/plugins/index_management/public/application/components/component_templates/component_template_details/tabs.tsx
@@ -8,41 +8,39 @@ import React from 'react';
 import { i18n } from '@kbn/i18n';
 import { EuiTab, EuiTabs } from '@elastic/eui';
 
-export type Tab = TabType.Summary | TabType.Mappings | TabType.Aliases | TabType.Settings;
+export type TabType = 'summary' | 'mappings' | 'aliases' | 'settings';
 
-export enum TabType {
-  Summary = 'summary',
-  Mappings = 'mappings',
-  Aliases = 'aliases',
-  Settings = 'settings',
+interface Props {
+  setActiveTab: (id: TabType) => 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';