MIgrated index_header to react (#63490)

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.html

@@ -1,11 +1,5 @@
 <kbn-management-app section="kibana/index_patterns">
   <div class="euiPanel euiPanel--paddingLarge">
-    <div class="kuiViewContent">
-      <kbn-management-index-patterns-header
-        index-pattern="fieldSettings.indexPattern"
-      ></kbn-management-index-patterns-header>
-    </div>
-
     <div id="reactFieldEditor"></div>
   </div>
 </kbn-management-app>

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/create_edit_field/create_edit_field.js

@@ -34,6 +34,8 @@ import { FieldEditor } from 'ui/field_editor';
 import { I18nContext } from 'ui/i18n';
 import { i18n } from '@kbn/i18n';
 
+import { IndexHeader } from '../index_header';
+
 const REACT_FIELD_EDITOR_ID = 'reactFieldEditor';
 const renderFieldEditor = (
   $scope,
@@ -49,6 +51,7 @@ const renderFieldEditor = (
 
     render(
       <I18nContext>
+        <IndexHeader indexPattern={indexPattern} />
         <FieldEditor
           indexPattern={indexPattern}
           field={field}

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.html

@@ -7,12 +7,7 @@
       aria-label="{{::'kbn.management.editIndexPattern.detailsAria' | i18n: { defaultMessage: 'Index pattern details' } }}"
     >
       <!-- Header -->
-      <kbn-management-index-patterns-header
-        index-pattern="indexPattern"
-        set-default="setDefaultPattern()"
-        refresh-fields="refreshFields()"
-        delete="removePattern()"
-      ></kbn-management-index-patterns-header>
+      <div id="reactIndexHeader"></div>
 
       <div class="euiSpacer euiSpacer--s"></div>
       <p ng-if="::(indexPattern.timeFieldName || (indexPattern.tags && indexPattern.tags.length))">

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/edit_index_pattern.js

@@ -18,7 +18,7 @@
  */
 
 import _ from 'lodash';
-import './index_header';
+import { IndexHeader } from './index_header';
 import './create_edit_field';
 import { docTitle } from 'ui/doc_title';
 import { KbnUrlProvider } from 'ui/url';
@@ -44,6 +44,7 @@ import { createEditIndexPatternPageStateContainer } from './edit_index_pattern_s
 const REACT_SOURCE_FILTERS_DOM_ELEMENT_ID = 'reactSourceFiltersTable';
 const REACT_INDEXED_FIELDS_DOM_ELEMENT_ID = 'reactIndexedFieldsTable';
 const REACT_SCRIPTED_FIELDS_DOM_ELEMENT_ID = 'reactScriptedFieldsTable';
+const REACT_INDEX_HEADER_DOM_ELEMENT_ID = 'reactIndexHeader';
 
 const TAB_INDEXED_FIELDS = 'indexedFields';
 const TAB_SCRIPTED_FIELDS = 'scriptedFields';
@@ -160,6 +161,33 @@ function destroyIndexedFieldsTable() {
   node && unmountComponentAtNode(node);
 }
 
+function destroyIndexHeader() {
+  const node = document.getElementById(REACT_INDEX_HEADER_DOM_ELEMENT_ID);
+  node && unmountComponentAtNode(node);
+}
+
+function renderIndexHeader($scope, config) {
+  $scope.$$postDigest(() => {
+    const node = document.getElementById(REACT_INDEX_HEADER_DOM_ELEMENT_ID);
+    if (!node) {
+      return;
+    }
+
+    render(
+      <I18nContext>
+        <IndexHeader
+          indexPattern={$scope.indexPattern}
+          setDefault={$scope.setDefaultPattern}
+          refreshFields={$scope.refreshFields}
+          deleteIndexPattern={$scope.removePattern}
+          defaultIndex={config.get('defaultIndex')}
+        />
+      </I18nContext>,
+      node
+    );
+  });
+}
+
 function handleTabChange($scope, newTab) {
   destroyIndexedFieldsTable();
   destroySourceFiltersTable();
@@ -391,6 +419,9 @@ uiModules
       destroyIndexedFieldsTable();
       destroyScriptedFieldsTable();
       destroySourceFiltersTable();
+      destroyIndexHeader();
       destroyState();
     });
+
+    renderIndexHeader($scope, config);
   });

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index.ts

@@ -17,4 +17,4 @@
  * under the License.
  */
 
-import './index_header';
+export { IndexHeader } from './index_header';

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.html

@@ -1,59 +0,0 @@
-<div class="kuiBar kuiVerticalRhythm">
-  <div class="kuiBarSection">
-    <!-- Index pattern name -->
-    <h1
-      class="euiTitle euiTitle--medium"
-      data-test-subj="indexPatternTitle"
-    >
-      <span
-        aria-hidden="true"
-        ng-if="defaultIndex === indexPattern.id"
-        class="kuiIcon fa-star"
-      ></span>
-      {{indexPattern.title}}
-    </h1>
-  </div>
-
-  <div class="kuiBarSection">
-    <button
-      ng-if="setDefault"
-      ng-click="setDefault()"
-      aria-label="{{::'kbn.management.editIndexPattern.setDefaultAria' | i18n: { defaultMessage: 'Set as default index' } }}"
-      tooltip="{{::'kbn.management.editIndexPattern.setDefaultTooltip' | i18n: { defaultMessage: 'Set as default index' } }}"
-      class="kuiButton kuiButton--basic"
-      data-test-subj="setDefaultIndexPatternButton"
-    >
-      <span
-        aria-hidden="true"
-        class="kuiIcon fa-star"
-      ></span>
-    </button>
-
-    <button
-      ng-if="refreshFields"
-      ng-click="refreshFields()"
-      aria-label="{{::'kbn.management.editIndexPattern.refreshAria' | i18n: { defaultMessage: 'Reload field list' } }}"
-      tooltip="{{::'kbn.management.editIndexPattern.refreshTooltip' | i18n: { defaultMessage: 'Refresh field list' } }}"
-      class="kuiButton kuiButton--basic"
-    >
-      <span
-        aria-hidden="true"
-        class="kuiIcon fa-refresh"
-      ></span>
-    </button>
-
-    <button
-      ng-if="delete"
-      ng-click="delete()"
-      aria-label="{{::'kbn.management.editIndexPattern.removeAria' | i18n: { defaultMessage: 'Remove index pattern' } }}"
-      tooltip="{{::'kbn.management.editIndexPattern.removeTooltip' | i18n: { defaultMessage: 'Remove index pattern' } }}"
-      class="kuiButton kuiButton--danger"
-      data-test-subj="deleteIndexPatternButton"
-    >
-      <span
-        aria-hidden="true"
-        class="kuiIcon fa-trash"
-      ></span>
-    </button>
-  </div>
-</div>

src/legacy/core_plugins/kibana/public/management/sections/index_patterns/edit_index_pattern/index_header/index_header.js

@@ -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');
-    },
-  };
-});

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 (
+    <EuiFlexGroup justifyContent="spaceBetween" alignItems="center">
+      <EuiFlexItem>
+        <EuiFlexGroup alignItems="center">
+          {defaultIndex === indexPattern.id && (
+            <EuiFlexItem grow={false} style={{ marginRight: 0 }}>
+              <EuiIcon size="xl" type="starFilled" />
+            </EuiFlexItem>
+          )}
+          <EuiFlexItem style={{ marginLeft: 0 }}>
+            <EuiTitle>
+              <h1 data-test-subj="indexPatternTitle">{indexPattern.title}</h1>
+            </EuiTitle>
+          </EuiFlexItem>
+        </EuiFlexGroup>
+      </EuiFlexItem>
+      <EuiFlexItem grow={false}>
+        <EuiFlexGroup>
+          {setDefault && (
+            <EuiFlexItem>
+              <EuiToolTip content={setDefaultTooltip}>
+                <EuiButtonIcon
+                  color="text"
+                  onClick={setDefault}
+                  iconType="starFilledSpace"
+                  aria-label={setDefaultAriaLabel}
+                  data-test-subj="setDefaultIndexPatternButton"
+                />
+              </EuiToolTip>
+            </EuiFlexItem>
+          )}
+
+          {refreshFields && (
+            <EuiFlexItem>
+              <EuiToolTip content={refreshTooltip}>
+                <EuiButtonIcon
+                  color="text"
+                  onClick={refreshFields}
+                  iconType="refresh"
+                  aria-label={refreshAriaLabel}
+                  data-test-subj="refreshFieldsIndexPatternButton"
+                />
+              </EuiToolTip>
+            </EuiFlexItem>
+          )}
+
+          {deleteIndexPattern && (
+            <EuiFlexItem>
+              <EuiToolTip content={removeTooltip}>
+                <EuiButtonIcon
+                  color="danger"
+                  onClick={deleteIndexPattern}
+                  iconType="trash"
+                  aria-label={removeAriaLabel}
+                  data-test-subj="deleteIndexPatternButton"
+                />
+              </EuiToolTip>
+            </EuiFlexItem>
+          )}
+        </EuiFlexGroup>
+      </EuiFlexItem>
+    </EuiFlexGroup>
+  );
+}