[i18n] Add tests to @elastic/eui tokens #99613

afharo · 2021-05-10T11:12:19Z

Summary

Add tests to ensure that the i18n tokens from @elastic/eui and their mapping in Kibana are in sync.

The tests are meant to apply the following checks:

Are we missing any label? Do we have any label that no longer applies?
The labels that require values, are they mapped as functions?
Are the EUI Tokens mapped to core.{EUI Tokens}?
Does the defaultValue match EUI's defString for every token?
Are we using the same values as expected in the props of EuiI18n?

Related issues/PRs

Depends on Upgrade EUI to v33.0.0 #99382: In that PR, the upgrade issues are already handled.
Resolves EUI labels not translating #74657.

⚠️ Keeping it as draft until #99382 is completed

Checklist

Delete any items that are not applicable to this PR.

Unit or functional tests were updated or added to match the most common scenarios

For maintainers

This was checked for breaking API changes and was labeled appropriately

afharo · 2021-05-10T14:11:36Z

src/core/public/i18n/i18n_eui_mapping.test.ts

+/**
+ * List here those EUI tokens which defaultMessages are intentionally changed in Kibana.
+ * Looking at the examples in the list, it looks like this is a workaround
+ * while @elastic/eui fixes the translations on their end.
+ */
+const INTENTIONALLY_OVERRIDDEN_TRANSLATIONS: EuiToken[] = [
+  'euiTourStep.closeTour', // "Close tour" makes more sense for consistency, since we have "Skip tour" and "End tour"
+  'euiTourStepIndicator.ariaLabel', // `@elastic/eui` extracted it as a stringified function
+];


I've changed many inconsistencies in Kibana to match @elastic/eui's guidance. But these 2 keys, I actually think they make more sense how Kibana defines them.

cc'ing @ryankeairns since git blame points to him as the dev that added those two.

Potential fix for euiTourStepIndicator.ariaLabel elastic/eui#4785

Also created the discuss issue elastic/eui#4787 for euiTourStep.closeTour

afharo · 2021-05-10T14:14:53Z

src/core/public/i18n/i18n_eui_mapping.tsx

-        defaultMessage: '${count} ${filterCountLabel} filters',
-        values: { count, filterCountLabel: hasActiveFilters ? 'active' : 'available' },
+        defaultMessage: '{count} {hasActiveFilters} filters',
+        values: { count, hasActiveFilters: hasActiveFilters ? 'active' : 'available' },


I don't think we should be doing that 'active' | 'available' text replacement here. They'll show as-is for any other locales.

Created #99644 to follow that fix.

afharo · 2021-05-26T11:43:10Z

@elasticmachine merge upstream

kibanamachine · 2021-05-26T11:43:12Z

merge conflict between base and head

kibanamachine · 2021-05-26T12:27:58Z

💔 Build Failed

continuous-integration/kibana-ci/pull-request
Commit: d0811bc
Storybooks Preview
Pipeline Steps (look for red circles / failed steps)
Interpreting CI Failures

Failed CI Steps

Test Failures

Kibana Pipeline / jest / Jest Tests.x-pack/plugins/apm/public/components/shared/TransactionActionMenu.TransactionActionMenu component matches the snapshot

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

Stack Trace

Error: expect(received).toMatchSnapshot()

Snapshot name: `TransactionActionMenu component matches the snapshot 1`

- Snapshot  - 0
+ Received  + 1

@@ -13,10 +13,11 @@
          <span
            class="euiButtonContent euiButtonContent--iconRight euiButton__content"
          >
            <span
              class="euiButtonContent__icon"
+             color="inherit"
              data-euiicon-type="arrowDown"
            />
            <span
              class="euiButton__text"
            >
    at Object.<anonymous> (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/x-pack/plugins/apm/public/components/shared/TransactionActionMenu/TransactionActionMenu.test.tsx:259:23)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)

Kibana Pipeline / jest / Jest Tests.x-pack/plugins/reporting/public/components.ReportListing Report job listing with some items

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

Stack Trace

Error: expect(received).toMatchSnapshot()

Snapshot name: `ReportListing Report job listing with some items 1`

- Snapshot  -  16
+ Received  + 144

@@ -215,22 +215,38 @@
                          Object {
                            "width": undefined,
                          }
                        }
                      >
-                       <div
+                       <CellContents
+                         className="euiTableCellContent"
+                         showSortMsg={false}
+                       >
+                         <span
                            className="euiTableCellContent"
                          >
                            <EuiInnerText>
+                             <EuiI18n
+                               default="{innerText}; {description}"
+                               token="euiTableHeaderCell.titleTextWithDesc"
+                               values={
+                                 Object {
+                                   "description": undefined,
+                                   "innerText": "Report",
+                                 }
+                               }
+                             >
                                <span
                                  className="euiTableCellContent__text"
                                  title="Report"
                                >
                                  Report
                                </span>
+                             </EuiI18n>
                            </EuiInnerText>
-                       </div>
+                         </span>
+                       </CellContents>
                      </th>
                    </EuiTableHeaderCell>
                    <EuiTableHeaderCell
                      align="left"
                      data-test-subj="tableHeaderCell_created_at_1"
@@ -244,23 +260,39 @@
                        style={
                          Object {
                            "width": undefined,
                          }
                        }
+                     >
+                       <CellContents
+                         className="euiTableCellContent"
+                         showSortMsg={false}
                        >
-                       <div
+                         <span
                            className="euiTableCellContent"
                          >
                            <EuiInnerText>
+                             <EuiI18n
+                               default="{innerText}; {description}"
+                               token="euiTableHeaderCell.titleTextWithDesc"
+                               values={
+                                 Object {
+                                   "description": undefined,
+                                   "innerText": "Created at",
+                                 }
+                               }
+                             >
                                <span
                                  className="euiTableCellContent__text"
                                  title="Created at"
                                >
                                  Created at
                                </span>
+                             </EuiI18n>
                            </EuiInnerText>
-                       </div>
+                         </span>
+                       </CellContents>
                      </th>
                    </EuiTableHeaderCell>
                    <EuiTableHeaderCell
                      align="left"
                      data-test-subj="tableHeaderCell_status_2"
@@ -274,23 +306,39 @@
                        style={
                          Object {
                            "width": undefined,
                          }
                        }
+                     >
+                       <CellContents
+                         className="euiTableCellContent"
+                         showSortMsg={false}
                        >
-                       <div
+                         <span
                            className="euiTableCellContent"
                          >
                            <EuiInnerText>
+                             <EuiI18n
+                               default="{innerText}; {description}"
+                               token="euiTableHeaderCell.titleTextWithDesc"
+                               values={
+                                 Object {
+                                   "description": undefined,
+                                   "innerText": "Status",
+                                 }
+                               }
+                             >
                                <span
                                  className="euiTableCellContent__text"
                                  title="Status"
                                >
                                  Status
                                </span>
+                             </EuiI18n>
                            </EuiInnerText>
-                       </div>
+                         </span>
+                       </CellContents>
                      </th>
                    </EuiTableHeaderCell>
                    <EuiTableHeaderCell
                      align="right"
                      key="_actions_h_3"
@@ -303,22 +351,38 @@
                          Object {
                            "width": undefined,
                          }
                        }
                      >
-                       <div
+                       <CellContents
                          className="euiTableCellContent euiTableCellContent--alignRight"
+                         showSortMsg={false}
                        >
+                         <span
+                           className="euiTableCellContent euiTableCellContent--alignRight"
+                         >
                            <EuiInnerText>
+                             <EuiI18n
+                               default="{innerText}; {description}"
+                               token="euiTableHeaderCell.titleTextWithDesc"
+                               values={
+                                 Object {
+                                   "description": undefined,
+                                   "innerText": "Actions",
+                                 }
+                               }
+                             >
                                <span
                                  className="euiTableCellContent__text"
                                  title="Actions"
                                >
                                  Actions
                                </span>
+                             </EuiI18n>
                            </EuiInnerText>
-                       </div>
+                         </span>
+                       </CellContents>
                      </th>
                    </EuiTableHeaderCell>
                  </tr>
                </thead>
              </EuiTableHeader>
@@ -524,23 +588,39 @@
                      style={
                        Object {
                          "width": undefined,
                        }
                      }
+                   >
+                     <CellContents
+                       className="euiTableCellContent"
+                       showSortMsg={false}
                      >
-                     <div
+                       <span
                          className="euiTableCellContent"
                        >
                          <EuiInnerText>
+                           <EuiI18n
+                             default="{innerText}; {description}"
+                             token="euiTableHeaderCell.titleTextWithDesc"
+                             values={
+                               Object {
+                                 "description": undefined,
+                                 "innerText": "Report",
+                               }
+                             }
+                           >
                              <span
                                className="euiTableCellContent__text"
                                title="Report"
                              >
                                Report
                              </span>
+                           </EuiI18n>
                          </EuiInnerText>
-                     </div>
+                       </span>
+                     </CellContents>
                    </th>
                  </EuiTableHeaderCell>
                  <EuiTableHeaderCell
                    align="left"
                    data-test-subj="tableHeaderCell_created_at_1"
@@ -555,22 +635,38 @@
                        Object {
                          "width": undefined,
                        }
                      }
                    >
-                     <div
+                     <CellContents
                        className="euiTableCellContent"
+                       showSortMsg={false}
                      >
+                       <span
+                         className="euiTableCellContent"
+                       >
                          <EuiInnerText>
+                           <EuiI18n
+                             default="{innerText}; {description}"
+                             token="euiTableHeaderCell.titleTextWithDesc"
+                             values={
+                               Object {
+                                 "description": undefined,
+                                 "innerText": "Created at",
+                               }
+                             }
+                           >
                              <span
                                className="euiTableCellContent__text"
                                title="Created at"
                              >
                                Created at
                              </span>
+                           </EuiI18n>
                          </EuiInnerText>
-                     </div>
+                       </span>
+                     </CellContents>
                    </th>
                  </EuiTableHeaderCell>
                  <EuiTableHeaderCell
                    align="left"
                    data-test-subj="tableHeaderCell_status_2"
@@ -585,22 +681,38 @@
                        Object {
                          "width": undefined,
                        }
                      }
                    >
-                     <div
+                     <CellContents
                        className="euiTableCellContent"
+                       showSortMsg={false}
                      >
+                       <span
+                         className="euiTableCellContent"
+                       >
                          <EuiInnerText>
+                           <EuiI18n
+                             default="{innerText}; {description}"
+                             token="euiTableHeaderCell.titleTextWithDesc"
+                             values={
+                               Object {
+                                 "description": undefined,
+                                 "innerText": "Status",
+                               }
+                             }
+                           >
                              <span
                                className="euiTableCellContent__text"
                                title="Status"
                              >
                                Status
                              </span>
+                           </EuiI18n>
                          </EuiInnerText>
-                     </div>
+                       </span>
+                     </CellContents>
                    </th>
                  </EuiTableHeaderCell>
                  <EuiTableHeaderCell
                    align="right"
                    key="_actions_h_3"
@@ -613,22 +725,38 @@
                        Object {
                          "width": undefined,
                        }
                      }
                    >
-                     <div
+                     <CellContents
                        className="euiTableCellContent euiTableCellContent--alignRight"
+                       showSortMsg={false}
                      >
+                       <span
+                         className="euiTableCellContent euiTableCellContent--alignRight"
+                       >
                          <EuiInnerText>
+                           <EuiI18n
+                             default="{innerText}; {description}"
+                             token="euiTableHeaderCell.titleTextWithDesc"
+                             values={
+                               Object {
+                                 "description": undefined,
+                                 "innerText": "Actions",
+                               }
+                             }
+                           >
                              <span
                                className="euiTableCellContent__text"
                                title="Actions"
                              >
                                Actions
                              </span>
+                           </EuiI18n>
                          </EuiInnerText>
-                     </div>
+                       </span>
+                     </CellContents>
                    </th>
                  </EuiTableHeaderCell>
                </tr>
              </thead>
            </EuiTableHeader>
    at Object.<anonymous> (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/x-pack/plugins/reporting/public/components/report_listing.test.tsx:79:19)
    at Promise.then.completed (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/utils.js:276:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/utils.js:216:10)
    at _callCircusTest (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:212:40)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at _runTest (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:149:3)
    at _runTestsForDescribeBlock (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:63:9)
    at _runTestsForDescribeBlock (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:57:9)
    at run (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:176:21)
    at jestAdapter (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:109:19)
    at runTestInternal (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-runner/build/runTest.js:380:16)
    at runTest (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-runner/build/runTest.js:472:34)
    at Object.worker (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-runner/build/testWorker.js:133:12)

Kibana Pipeline / jest / Jest Tests.x-pack/plugins/index_lifecycle_management/__jest__.extend index management ilm summary extension should return extension when index has lifecycle error

Link to Jenkins

Standard Out

Failed Tests Reporter:
  - Test has not failed recently on tracked branches

Stack Trace

Error: expect(received).toMatchSnapshot()

Snapshot name: `extend index management ilm summary extension should return extension when index has lifecycle error 1`

- Snapshot  - 0
+ Received  + 3

@@ -190,16 +190,18 @@
          className="euiCallOutHeader"
        >
          <EuiIcon
            aria-hidden="true"
            className="euiCallOutHeader__icon"
+           color="inherit"
            size="m"
            type="cross"
          >
            <span
              aria-hidden="true"
              className="euiCallOutHeader__icon"
+             color="inherit"
              data-euiicon-type="cross"
              size="m"
            />
          </EuiIcon>
          <span
@@ -268,10 +270,11 @@
                      type="button"
                    >
                      <EuiButtonContent
                        className="euiButtonEmpty__content"
                        iconSide="left"
+                       iconSize="m"
                        textProps={
                          Object {
                            "className": "euiButtonEmpty__text",
                          }
                        }
    at Object.<anonymous> (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/x-pack/plugins/index_lifecycle_management/__jest__/extend_index_management.test.tsx:264:24)
    at Promise.then.completed (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/utils.js:276:28)
    at new Promise (<anonymous>)
    at callAsyncCircusFn (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/utils.js:216:10)
    at _callCircusTest (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:212:40)
    at processTicksAndRejections (internal/process/task_queues.js:95:5)
    at _runTest (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:149:3)
    at _runTestsForDescribeBlock (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:63:9)
    at _runTestsForDescribeBlock (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:57:9)
    at _runTestsForDescribeBlock (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:57:9)
    at run (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/run.js:25:3)
    at runAndTransformResultsToJestFormat (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapterInit.js:176:21)
    at jestAdapter (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-circus/build/legacy-code-todo-rewrite/jestAdapter.js:109:19)
    at runTestInternal (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-runner/build/runTest.js:380:16)
    at runTest (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-runner/build/runTest.js:472:34)
    at Object.worker (/var/lib/jenkins/workspace/elastic+kibana+pipeline-pull-request/kibana/node_modules/jest-runner/build/testWorker.js:133:12)

and 133 more failures, only showing the first 3.

Metrics [docs]

Async chunks

Total size of all lazy-loaded chunks that will be downloaded as the user navigates the app

id	before	after	diff
`securitySolution`	6.9MB	6.9MB	+124.0B
`visTypeTimeseries`	1.7MB	1.7MB	+80.0B
total			+204.0B

Page load bundle

Size of the bundles that are downloaded on every page load. Target size is below 100kb

id	before	after	diff
`core`	408.0KB	408.4KB	+347.0B
`kbnUiSharedDeps-css`	501.7KB	503.3KB	+1.6KB
`kbnUiSharedDeps-elastic`	3.3MB	3.0MB	-274.3KB
`kbnUiSharedDeps-js`	6.7MB	5.9MB	-824.9KB
total			-1.1MB

History

💔 Build #125037 failed 51a9250ee54b0c26459173f42e6fb0f05935f6c3
💔 Build #124988 failed 368ba176296ce032948abe964d5767b75e54d9cb

To update your PR or re-run it, just comment with:
@elasticmachine merge upstream

Bamieh · 2021-07-21T12:56:30Z

Closing in favor of #106377

afharo added release_note:skip Skip the PR/issue when compiling release notes v7.14.0 auto-backport Deprecated - use backport:version if exact versions are needed labels May 10, 2021

afharo commented May 10, 2021

View reviewed changes

afharo requested review from thompsongl and Bamieh May 10, 2021 14:39

This was referenced May 10, 2021

[EuiTourStep] euiTourStep.closeTour default token value should be more specific elastic/eui#4787

Closed

EUI labels not translating #74657

Closed

[i18n] Generate EUI tokens mapping automatically from i18ntokens.json #99759

Closed

afharo added Project:i18n Team:Core Core services & architecture: plugins, logging, config, saved objects, http, ES client, i18n, etc Team:Localization v8.0.0 labels May 14, 2021

afharo added 2 commits May 26, 2021 13:46

[i18n] Add tests to @elastic/eui tokens

0692a53

Harden tests

d0811bc

afharo force-pushed the i18n/add-tests-to-eui-tokens branch from 51a9250 to d0811bc Compare May 26, 2021 11:55

Bamieh self-assigned this Jun 2, 2021

spalger added v7.15.0 and removed v7.14.0 labels Jun 30, 2021

Bamieh mentioned this pull request Jul 21, 2021

[i18n] Test EUI i18n tokens coverage #106377

Merged

2 tasks

Bamieh closed this Jul 21, 2021

afharo deleted the i18n/add-tests-to-eui-tokens branch August 2, 2021 09:19

lukeelmers removed the Team:Localization label Oct 1, 2021

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[i18n] Add tests to @elastic/eui tokens #99613

[i18n] Add tests to @elastic/eui tokens #99613

afharo commented May 10, 2021 •

edited

Loading

afharo May 10, 2021

afharo May 10, 2021

afharo May 10, 2021

afharo May 10, 2021

afharo May 10, 2021

afharo May 10, 2021

afharo commented May 26, 2021

kibanamachine commented May 26, 2021

kibanamachine commented May 26, 2021 •

edited

Loading

Standard Out

Stack Trace

Standard Out

Stack Trace

Standard Out

Stack Trace

Bamieh commented Jul 21, 2021

[i18n] Add tests to @elastic/eui tokens #99613

[i18n] Add tests to @elastic/eui tokens #99613

Conversation

afharo commented May 10, 2021 • edited Loading

Summary

Related issues/PRs

Checklist

For maintainers

afharo May 10, 2021

Choose a reason for hiding this comment

afharo May 10, 2021

Choose a reason for hiding this comment

afharo May 10, 2021

Choose a reason for hiding this comment

afharo May 10, 2021

Choose a reason for hiding this comment

afharo May 10, 2021

Choose a reason for hiding this comment

afharo May 10, 2021

Choose a reason for hiding this comment

afharo commented May 26, 2021

kibanamachine commented May 26, 2021

kibanamachine commented May 26, 2021 • edited Loading

💔 Build Failed

Failed CI Steps

Test Failures

Standard Out

Stack Trace

Standard Out

Stack Trace

Standard Out

Stack Trace

Metrics [docs]

Async chunks

Page load bundle

History

Bamieh commented Jul 21, 2021

afharo commented May 10, 2021 •

edited

Loading

kibanamachine commented May 26, 2021 •

edited

Loading