diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.js b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.js
deleted file mode 100644
index 87bce06c1146..000000000000
--- a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.js
+++ /dev/null
@@ -1,40 +0,0 @@
-/*
- * Licensed to Elasticsearch B.V. under one or more contributor
- * license agreements. See the NOTICE file distributed with
- * this work for additional information regarding copyright
- * ownership. Elasticsearch B.V. licenses this file to you under
- * the Apache License, Version 2.0 (the "License"); you may
- * not use this file except in compliance with the License.
- * You may obtain a copy of the License at
- *
- * http://www.apache.org/licenses/LICENSE-2.0
- *
- * Unless required by applicable law or agreed to in writing,
- * software distributed under the License is distributed on an
- * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
- * KIND, either express or implied. See the License for the
- * specific language governing permissions and limitations
- * under the License.
- */
-
-import { uiModules } from 'ui/modules';
-import template from './index_header.html';
-uiModules.get('apps/management').directive('kbnManagementIndexPatternsHeader', function(config) {
- return {
- restrict: 'E',
- template,
- replace: true,
- scope: {
- indexPattern: '=',
- setDefault: '&',
- refreshFields: '&',
- delete: '&',
- },
- link: function($scope, $el, attrs) {
- $scope.delete = attrs.delete ? $scope.delete : null;
- $scope.setDefault = attrs.setDefault ? $scope.setDefault : null;
- $scope.refreshFields = attrs.refreshFields ? $scope.refreshFields : null;
- config.bindToScope($scope, 'defaultIndex');
- },
- };
-});
diff --git a/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.tsx b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.tsx
new file mode 100644
index 000000000000..866d10ecb0e1
--- /dev/null
+++ b/src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.tsx
@@ -0,0 +1,134 @@
+/*
+ * Licensed to Elasticsearch B.V. under one or more contributor
+ * license agreements. See the NOTICE file distributed with
+ * this work for additional information regarding copyright
+ * ownership. Elasticsearch B.V. licenses this file to you under
+ * the Apache License, Version 2.0 (the "License"); you may
+ * not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ * http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied. See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+
+import React from 'react';
+import { i18n } from '@kbn/i18n';
+import {
+ EuiFlexGroup,
+ EuiToolTip,
+ EuiFlexItem,
+ EuiIcon,
+ EuiTitle,
+ EuiButtonIcon,
+} from '@elastic/eui';
+import { IIndexPattern } from '../../../../../../../../../plugins/data/public';
+
+interface IndexHeaderProps {
+ defaultIndex: string;
+ indexPattern: IIndexPattern;
+ setDefault?: () => void;
+ refreshFields?: () => void;
+ deleteIndexPattern?: () => void;
+}
+
+const setDefaultAriaLabel = i18n.translate('kbn.management.editIndexPattern.setDefaultAria', {
+ defaultMessage: 'Set as default index.',
+});
+
+const setDefaultTooltip = i18n.translate('kbn.management.editIndexPattern.setDefaultTooltip', {
+ defaultMessage: 'Set as default index.',
+});
+
+const refreshAriaLabel = i18n.translate('kbn.management.editIndexPattern.refreshAria', {
+ defaultMessage: 'Reload field list.',
+});
+
+const refreshTooltip = i18n.translate('kbn.management.editIndexPattern.refreshTooltip', {
+ defaultMessage: 'Refresh field list.',
+});
+
+const removeAriaLabel = i18n.translate('kbn.management.editIndexPattern.removeAria', {
+ defaultMessage: 'Remove index pattern.',
+});
+
+const removeTooltip = i18n.translate('kbn.management.editIndexPattern.removeTooltip', {
+ defaultMessage: 'Remove index pattern.',
+});
+
+export function IndexHeader({
+ defaultIndex,
+ indexPattern,
+ setDefault,
+ refreshFields,
+ deleteIndexPattern,
+}: IndexHeaderProps) {
+ return (
+
+
+
+ {defaultIndex === indexPattern.id && (
+
+
+
+ )}
+
+
+