[7.x] Upgrade EUI to v10.0.1 (#35112) (#40533)

* Upgrade EUI to v10.0.1 (#35112)

* eui@10.0.0; tsconfig update

* limit key lookups to strings

* Search Profiler hightlight details flyout classes

* bump

* snapshot updates

* x-pack snapshot updates

* keyofstringsonly update

packages/kbn-test/types/ftr.d.ts

@@ -58,7 +58,7 @@ export interface GenericFtrProviderContext<
    */
   hasService(serviceName: 'config' | 'log' | 'lifecycle'): true;
   hasService<K extends keyof ServiceMap>(serviceName: K): serviceName is K;
-  hasService(serviceName: string): serviceName is keyof ServiceMap;
+  hasService(serviceName: string): serviceName is Extract<keyof ServiceMap, string>;
 
   /**
    * Get the instance of a service, if the service is loaded async and the service needs to be used

tsconfig.json

@@ -42,8 +42,6 @@
     "moduleResolution": "node",
     // Disallow inconsistently-cased references to the same file.
     "forceConsistentCasingInFileNames": true,
-    // Disable the breaking keyof behaviour introduced in TS 2.9.2 until EUI is updated to support that too
-    "keyofStringsOnly": true,
     // Forbid unused local variables as the rule was deprecated by ts-lint
     "noUnusedLocals": true,
     // Provide full support for iterables in for..of, spread and destructuring when targeting ES5 or ES3.

x-pack/legacy/plugins/canvas/common/lib/pivot_object_array.ts

@@ -10,7 +10,7 @@ const isString = (val: any): boolean => typeof val === 'string';
 
 export function pivotObjectArray<
   RowType extends { [key: string]: any },
-  ReturnColumns extends string = keyof RowType
+  ReturnColumns extends string = Extract<keyof RowType, string>
 >(
   rows: RowType[],
   columns?: string[]

x-pack/legacy/plugins/searchprofiler/public/directives/highlight_details/index.html

@@ -6,58 +6,60 @@
 </div>
 
 <div class="euiFlyoutBody">
-  <div class="euiText">
-    <dl>
-      <dt
-        i18n-id="xpack.searchProfiler.highlightDetails.typeTitle"
-        i18n-default-message="Type"
-      ></dt>
-      <dd>{{detailRow.query_type}}</dd>
-      <dt
-        i18n-id="xpack.searchProfiler.highlightDetails.descriptionTitle"
-        i18n-default-message="Description"
-      ></dt>
-      <dd><code>{{detailRow.lucene}}</code></dd>
-      <dt>
-        <span
-          tooltip="{{:: 'xpack.searchProfiler.highlightDetails.totalTimeTooltip' | i18n: { defaultMessage: 'The total time spent at this query component, inclusive of children' } }}"
-          tooltip-placement="left"
-          i18n-id="xpack.searchProfiler.highlightDetails.totalTimeTitle"
-          i18n-default-message="Total Time"
-        ></span>
-      </dt>
-      <dd>{{detailRow.time | msToPretty:3 }}</dd>
-      <dt>
-        <span
-          tooltip="{{:: 'xpack.searchProfiler.highlightDetails.selfTimeTooltip' | i18n: { defaultMessage: 'The time spent by this query component alone, exclusive of children' } }}"
-          tooltip-placement="left"
-          i18n-id="xpack.searchProfiler.highlightDetails.selfTimeTitle"
-          i18n-default-message="Self Time"
-        ></span>
-      </dt>
-      <dd>{{detailRow.selfTime | msToPretty:3 }}</dd>
-    </dl>
+  <div class="euiFlyoutBody__overflow">
+    <div class="euiText">
+      <dl>
+        <dt
+          i18n-id="xpack.searchProfiler.highlightDetails.typeTitle"
+          i18n-default-message="Type"
+        ></dt>
+        <dd>{{detailRow.query_type}}</dd>
+        <dt
+          i18n-id="xpack.searchProfiler.highlightDetails.descriptionTitle"
+          i18n-default-message="Description"
+        ></dt>
+        <dd><code>{{detailRow.lucene}}</code></dd>
+        <dt>
+          <span
+            tooltip="{{:: 'xpack.searchProfiler.highlightDetails.totalTimeTooltip' | i18n: { defaultMessage: 'The total time spent at this query component, inclusive of children' } }}"
+            tooltip-placement="left"
+            i18n-id="xpack.searchProfiler.highlightDetails.totalTimeTitle"
+            i18n-default-message="Total Time"
+          ></span>
+        </dt>
+        <dd>{{detailRow.time | msToPretty:3 }}</dd>
+        <dt>
+          <span
+            tooltip="{{:: 'xpack.searchProfiler.highlightDetails.selfTimeTooltip' | i18n: { defaultMessage: 'The time spent by this query component alone, exclusive of children' } }}"
+            tooltip-placement="left"
+            i18n-id="xpack.searchProfiler.highlightDetails.selfTimeTitle"
+            i18n-default-message="Self Time"
+          ></span>
+        </dt>
+        <dd>{{detailRow.selfTime | msToPretty:3 }}</dd>
+      </dl>
+    </div>
+    <br>
+    <h3><strong
+    i18n-id="xpack.searchProfiler.highlightDetails.timingBreakdownTitle"
+    i18n-default-message="Timing Breakdown"
+    ></strong></h3>
+    <br>
+    <table class="prfDevTool__breakdown" width="100%">
+      <tr ng-repeat="breakdown in detailRow.breakdown">
+        <td class="prfDevTool__cell prfDevTool__description"><span tooltip="{{breakdown.tip}}" tooltip-placement="left">{{breakdown.key}}</span></td>
+        <td class="prfDevTool__cell prfDevTool__time">
+          <span class="euiBadge prfDevTool__badge" ng-style="{'background-color': breakdown.color}">
+            {{breakdown.time | nsToPretty: 1}}
+          </span>
+        </td>
+        <td class="prfDevTool__cell prfDevTool__percentage">
+          <span class="euiBadge euiBadge--default prfDevTool__progress--percent" style="--prfDevToolProgressPercentage: {{breakdown.relative}}%">
+            <span class="prfDevTool__progress--percent-ie" ng-style="{'width': breakdown.relative + '%'}"></span>
+            <span class="prfDevTool__progressText">{{breakdown.relative}}%</span>
+          </span>
+        </td>
+      </tr>
+    </table>
   </div>
-  <br>
-  <h3><strong
-  i18n-id="xpack.searchProfiler.highlightDetails.timingBreakdownTitle"
-  i18n-default-message="Timing Breakdown"
-  ></strong></h3>
-  <br>
-  <table class="prfDevTool__breakdown" width="100%">
-    <tr ng-repeat="breakdown in detailRow.breakdown">
-      <td class="prfDevTool__cell prfDevTool__description"><span tooltip="{{breakdown.tip}}" tooltip-placement="left">{{breakdown.key}}</span></td>
-      <td class="prfDevTool__cell prfDevTool__time">
-        <span class="euiBadge prfDevTool__badge" ng-style="{'background-color': breakdown.color}">
-          {{breakdown.time | nsToPretty: 1}}
-        </span>
-      </td>
-      <td class="prfDevTool__cell prfDevTool__percentage">
-        <span class="euiBadge euiBadge--default prfDevTool__progress--percent" style="--prfDevToolProgressPercentage: {{breakdown.relative}}%">
-          <span class="prfDevTool__progress--percent-ie" ng-style="{'width': breakdown.relative + '%'}"></span>
-          <span class="prfDevTool__progressText">{{breakdown.relative}}%</span>
-        </span>
-      </td>
-    </tr>
-  </table>
 </div>