[7.6] Upgrade EUI to v18.2.2 (#56206)

* eui to 18.2.2 * Homepage adjustment to match new icons * Homepage adjustment to match new icons * i18n fix * i18n fix Co-authored-by: dave.snider@gmail.com <dave.snider@gmail.com>
2025-04-23 17:28:26 -04:00 · 2020-01-29 09:43:02 -06:00 · 2020-01-29 09:43:02 -06:00 · 8481b8fb62
commit 8481b8fb62
parent a0529f7074
14 changed files with 801 additions and 535 deletions
--- a/package.json
+++ b/package.json
@ -116,7 +116,7 @@
    "@elastic/charts": "^16.1.0",
    "@elastic/datemath": "5.0.2",
    "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.2.2",
    "@elastic/filesaver": "1.1.2",
    "@elastic/good": "8.1.1-kibana2",
    "@elastic/numeral": "2.3.3",
--- a/packages/kbn-ui-shared-deps/package.json
+++ b/packages/kbn-ui-shared-deps/package.json
@ -9,7 +9,7 @@
    "kbn:watch": "node scripts/build --watch"
  },
  "devDependencies": {
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.2.2",
    "@elastic/charts": "^16.1.0",
    "@kbn/dev-utils": "1.0.0",
    "@kbn/i18n": "1.0.0",
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/snapshots/add_data.test.js.snap
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/snapshots/add_data.test.js.snap
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/_add_data.scss
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/_add_data.scss
@ -1,9 +1,23 @@
 .homAddData__card {
-  max-width: 250px;
+  max-width: 225px;
  border: none;
  box-shadow: none;
 }

+.homAddData__cardDivider {
+  position: relative;
+
+  &:after {
+    position: absolute;
+    content: '';
+    width: 1px;
+    right: -$euiSizeS;
+    top: 0;
+    bottom: 0;
+    background: $euiBorderColor;
+  }
+}
+
 .homAddData__icon {
  width: $euiSizeXL * 2;
  height: $euiSizeXL * 2;
@ -30,6 +44,20 @@
  }
 }

+@include euiBreakpoint('xs', 's', 'm') {
+  .homAddData__flexTablet {
+    flex-direction: column;
+  }
+
+  .homAddData__card {
+    max-width: none;
+  }
+
+  .homAddData__cardDivider:after {
+    display: none;
+  }
+}
+
@include euiBreakpoint('l', 'xl') {
  .homeAddData__flexGroup {
    flex-wrap: nowrap;
--- a/src/legacy/core_plugins/kibana/public/home/np_ready/components/add_data.js
+++ b/src/legacy/core_plugins/kibana/public/home/np_ready/components/add_data.js
@ -94,7 +94,7 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
      <EuiFlexItem grow={false}>
        <EuiCard
          className="homAddData__card"
-          icon={<EuiIcon className="homAddData__icon" type="logoAPM" />}
+          titleSize="xs"
          title={apmData.title}
          description={<span id={apmData.ariaDescribedby}>{apmData.description}</span>}
          footer={
@ -115,60 +115,115 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {

    return (
      <EuiFlexGroup
-        className="homeAddData__flexGroup"
+        className="homeAddData__flexGroup homAddData__flexTablet"
        wrap={apmUiEnabled}
        gutterSize="l"
        justifyContent="spaceAround"
        responsive={false}
      >
-        {apmUiEnabled !== false && getApmCard()}
+        <EuiFlexItem className="homAddData__cardDivider">
+          <EuiSpacer size="m" />
+          <EuiFlexGroup justifyContent="spaceAround" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <EuiIcon size="xxl" type="logoObservability" />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiTitle size="s">
+                    <h2>
+                      <FormattedMessage
+                        id="kbn.home.addData.title.observability"
+                        defaultMessage="Observability"
+                      />
+                    </h2>
+                  </EuiTitle>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer />
+          <EuiFlexGroup
+            className="homeAddData__flexGroup"
+            wrap={apmUiEnabled}
+            gutterSize="l"
+            justifyContent="spaceAround"
+            responsive={false}
+          >
+            {apmUiEnabled !== false && getApmCard()}

-        <EuiFlexItem grow={false}>
-          <EuiCard
-            className="homAddData__card"
-            icon={<EuiIcon className="homAddData__icon" type="logoLogging" />}
-            title={loggingData.title}
-            description={<span id={loggingData.ariaDescribedby}>{loggingData.description}</span>}
-            footer={
-              <EuiButton
-                className="homAddData__button"
-                href="#/home/tutorial_directory/logging"
-                aria-describedby={loggingData.ariaDescribedby}
-              >
-                <FormattedMessage
-                  id="kbn.home.addData.logging.addLogDataButtonLabel"
-                  defaultMessage="Add log data"
-                />
-              </EuiButton>
-            }
-          />
+            <EuiFlexItem grow={false}>
+              <EuiCard
+                className="homAddData__card"
+                title={loggingData.title}
+                titleSize="xs"
+                description={
+                  <span id={loggingData.ariaDescribedby}>{loggingData.description}</span>
+                }
+                footer={
+                  <EuiButton
+                    className="homAddData__button"
+                    href="#/home/tutorial_directory/logging"
+                    aria-describedby={loggingData.ariaDescribedby}
+                  >
+                    <FormattedMessage
+                      id="kbn.home.addData.logging.addLogDataButtonLabel"
+                      defaultMessage="Add log data"
+                    />
+                  </EuiButton>
+                }
+              />
+            </EuiFlexItem>
+
+            <EuiFlexItem grow={false}>
+              <EuiCard
+                className="homAddData__card"
+                title={metricsData.title}
+                titleSize="xs"
+                description={
+                  <span id={metricsData.ariaDescribedby}>{metricsData.description}</span>
+                }
+                footer={
+                  <EuiButton
+                    className="homAddData__button"
+                    href="#/home/tutorial_directory/metrics"
+                    aria-describedby={metricsData.ariaDescribedby}
+                  >
+                    <FormattedMessage
+                      id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
+                      defaultMessage="Add metric data"
+                    />
+                  </EuiButton>
+                }
+              />
+            </EuiFlexItem>
+          </EuiFlexGroup>
        </EuiFlexItem>

        <EuiFlexItem grow={false}>
+          <EuiFlexGroup justifyContent="spaceAround" responsive={false}>
+            <EuiFlexItem grow={false}>
+              <EuiFlexGroup alignItems="center" gutterSize="m" responsive={false}>
+                <EuiFlexItem grow={false}>
+                  <EuiIcon size="xxl" type="logoSecurity" />
+                </EuiFlexItem>
+                <EuiFlexItem grow={false}>
+                  <EuiTitle size="s">
+                    <h2>
+                      <FormattedMessage
+                        id="kbn.home.addData.title.security"
+                        defaultMessage="Security"
+                      />
+                    </h2>
+                  </EuiTitle>
+                </EuiFlexItem>
+              </EuiFlexGroup>
+            </EuiFlexItem>
+          </EuiFlexGroup>
+          <EuiSpacer size="s" />
          <EuiCard
+            titleSize="xs"
            className="homAddData__card"
-            icon={<EuiIcon className="homAddData__icon" type="logoMetrics" />}
-            title={metricsData.title}
-            description={<span id={metricsData.ariaDescribedby}>{metricsData.description}</span>}
-            footer={
-              <EuiButton
-                className="homAddData__button"
-                href="#/home/tutorial_directory/metrics"
-                aria-describedby={metricsData.ariaDescribedby}
-              >
-                <FormattedMessage
-                  id="kbn.home.addData.metrics.addMetricsDataButtonLabel"
-                  defaultMessage="Add metric data"
-                />
-              </EuiButton>
-            }
-          />
-        </EuiFlexItem>
-
-        <EuiFlexItem grow={false}>
-          <EuiCard
-            className="homAddData__card"
-            icon={<EuiIcon className="homAddData__icon" type="logoSecurity" />}
            title={siemData.title}
            description={<span id={siemData.ariaDescribedby}>{siemData.description}</span>}
            footer={
@ -179,7 +234,7 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {
              >
                <FormattedMessage
                  id="kbn.home.addData.siem.addSiemEventsButtonLabel"
-                  defaultMessage="Add security events"
+                  defaultMessage="Add events"
                />
              </EuiButton>
            }
@ -195,29 +250,6 @@ const AddDataUi = ({ apmUiEnabled, isNewKibanaInstance, intl, mlEnabled }) => {

  return (
    <EuiPanel paddingSize="l">
-      <EuiFlexGroup>
-        <EuiFlexItem>
-          <EuiTitle>
-            <h2>
-              <FormattedMessage
-                id="kbn.home.addData.addDataToKibanaTitle"
-                defaultMessage="Add Data to Kibana"
-              />
-            </h2>
-          </EuiTitle>
-          <EuiText size="s">
-            <p>
-              <FormattedMessage
-                id="kbn.home.addData.addDataToKibanaDescription"
-                defaultMessage="Use these solutions to quickly turn your data into pre-built dashboards and monitoring systems."
-              />
-            </p>
-          </EuiText>
-        </EuiFlexItem>
-      </EuiFlexGroup>
-
-      <EuiSpacer />
-
      {renderCards()}

      <EuiHorizontalRule />
--- a/src/legacy/core_plugins/kibana/server/tutorials/apm/index.js
+++ b/src/legacy/core_plugins/kibana/server/tutorials/apm/index.js
@ -93,7 +93,7 @@ It allows you to monitor the performance of thousands of applications in real ti
          '{config.docs.base_url}guide/en/apm/get-started/{config.docs.version}/index.html',
      },
    }),
-    euiIconType: 'logoAPM',
+    euiIconType: 'apmApp',
    artifacts,
    onPrem: onPremInstructions(apmIndexPatternTitle),
    elasticCloud: createElasticCloudInstructions(cloud),
--- a/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
+++ b/test/interpreter_functional/plugins/kbn_tp_run_pipeline/package.json
@ -7,7 +7,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.2.2",
    "react": "^16.12.0",
    "react-dom": "^16.12.0"
  }
--- a/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_custom_visualizations/package.json
@ -7,7 +7,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.2.2",
    "react": "^16.12.0"
  }
 }
--- a/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_embeddable_explorer/package.json
@ -8,7 +8,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.2.2",
    "react": "^16.12.0"
  },
  "scripts": {
--- a/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
+++ b/test/plugin_functional/plugins/kbn_tp_sample_panel_action/package.json
@ -8,7 +8,7 @@
  },
  "license": "Apache-2.0",
  "dependencies": {
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.2.2",
    "react": "^16.12.0"
  },
  "scripts": {
--- a/x-pack/package.json
+++ b/x-pack/package.json
@ -176,7 +176,7 @@
    "@babel/runtime": "^7.5.5",
    "@elastic/datemath": "5.0.2",
    "@elastic/ems-client": "7.6.0",
-    "@elastic/eui": "18.2.1",
+    "@elastic/eui": "18.2.2",
    "@elastic/filesaver": "1.1.2",
    "@elastic/maki": "6.1.0",
    "@elastic/node-crypto": "^1.0.0",
--- a/x-pack/plugins/translations/translations/ja-JP.json
+++ b/x-pack/plugins/translations/translations/ja-JP.json
@ -1913,8 +1913,6 @@
    "kbn.embeddable.inspectorRequestDescription": "このリクエストは Elasticsearch にクエリをかけ、検索データを取得します。",
    "kbn.embeddable.search.displayName": "検索",
    "kbn.embeddable.visualizations.displayName": "ビジュアライゼーション",
-    "kbn.home.addData.addDataToKibanaDescription": "これらのソリューションで、データを作成済みのダッシュボードと監視システムへとすぐに変えることができます。",
-    "kbn.home.addData.addDataToKibanaTitle": "Kibana にデータを追加",
    "kbn.home.addData.apm.addApmButtonLabel": "APM を追加",
    "kbn.home.addData.apm.nameDescription": "APM は、集約内から自動的に詳細なパフォーマンスメトリックやエラーを集めます。",
    "kbn.home.addData.apm.nameTitle": "APM",
@ -15308,4 +15306,4 @@
    "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "フィールドを選択してください。",
    "xpack.watcher.watcherDescription": "アラートの作成、管理、監視によりデータへの変更を検知します。"
  }
-}
+}
--- a/x-pack/plugins/translations/translations/zh-CN.json
+++ b/x-pack/plugins/translations/translations/zh-CN.json
@ -1914,8 +1914,6 @@
    "kbn.embeddable.inspectorRequestDescription": "此请求将查询 Elasticsearch 以获取搜索的数据。",
    "kbn.embeddable.search.displayName": "搜索",
    "kbn.embeddable.visualizations.displayName": "可视化",
-    "kbn.home.addData.addDataToKibanaDescription": "使用这些解决方案可快速将您的数据转换成预建仪表板和监测系统。",
-    "kbn.home.addData.addDataToKibanaTitle": "将数据添加到 Kibana",
    "kbn.home.addData.apm.addApmButtonLabel": "添加 APM",
    "kbn.home.addData.apm.nameDescription": "APM 自动从您的应用程序内收集深入全面的性能指标和错误。",
    "kbn.home.addData.apm.nameTitle": "APM",
@ -15309,4 +15307,4 @@
    "xpack.watcher.watchEdit.thresholdWatchExpression.aggType.fieldIsRequiredValidationMessage": "此字段必填。",
    "xpack.watcher.watcherDescription": "通过创建、管理和监测警报来检测数据中的更改。"
  }
-}
+}
--- a/yarn.lock
+++ b/yarn.lock
@ -1942,10 +1942,10 @@
    tabbable "^1.1.0"
    uuid "^3.1.0"

-"@elastic/eui@18.2.1":
-  version "18.2.1"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-18.2.1.tgz#6ce6d0bd1d0541052d21f2918305524d71e91678"
-  integrity sha512-6C5tnWJTlBB++475i0vRoCsnz4JaYznb4zMNFLc+z5GY3vA3/E3AXTjmmBwybEicCCi3h1SnpJxZsgMakiZwRA==
+"@elastic/eui@18.2.2":
+  version "18.2.2"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-18.2.2.tgz#24396c8639f6576cf6d4eb904e418c1718460f18"
+  integrity sha512-8G8jnbi6D+HQXtBEm5seXXiehhKgBwXmtXXtV4+VrdjCgJOqmxNdqGdfc78/hXY6eVqlULOmRPhNn2GjHYhKNw==
  dependencies:
    "@types/chroma-js" "^1.4.3"
    "@types/lodash" "^4.14.116"