Bumping EUI to v41.2.2 (#119205)

* Bumping EUI to v41.2.0

* Updating translations for EUI Super Select.

* Bumping to v41.2.1 for an EUI fix.

* Updating ten Jest snapshots

* Removing reference to packaged datepicker now in EUI.

* Final removal of packaged Datepicker reference.

* Updating snapshots and datagrid test defaults.

* Fixing last functional test for data grid

* Reverting data source to upstream example for one test.

* Adding a fix for _data_table.ts test.

* Adding a fix for _data_table)notimeindex_filters.ts

* Bumping to 41.2.2 patch fix

* Removing unneeded test code and updating comment

* Bumping to 41.2.3 for bug fix.

* Adding a missed file.

* Adjusting test for tooltip overlap assertion.

* Updating two tests in Security Solution Platform.

Co-authored-by: Kibana Machine <42973632+kibanamachine@users.noreply.github.com>

package.json

@@ -107,7 +107,7 @@
     "@elastic/datemath": "link:bazel-bin/packages/elastic-datemath",
     "@elastic/elasticsearch": "npm:@elastic/elasticsearch-canary@^8.0.0-canary.35",
     "@elastic/ems-client": "8.0.0",
-    "@elastic/eui": "41.0.0",
+    "@elastic/eui": "41.2.3",
     "@elastic/filesaver": "1.1.2",
     "@elastic/node-crypto": "1.2.1",
     "@elastic/numeral": "^2.5.1",

src/core/public/i18n/__snapshots__/i18n_service.test.tsx.snap

@@ -98,6 +98,7 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiDataGridToolbar.fullScreenButtonActive": "Exit full screen",
           "euiDatePopoverButton.invalidTitle": [Function],
           "euiDatePopoverButton.outdatedTitle": [Function],
+          "euiErrorBoundary.error": "Error",
           "euiFieldPassword.maskPassword": "Mask password",
           "euiFieldPassword.showPassword": "Show password as plain text. Note: this will visually expose your password on the screen.",
           "euiFilePicker.clearSelectedFiles": "Clear selected files",
@@ -218,7 +219,7 @@ exports[`#start() returns \`Context\` component 1`] = `
           "euiStyleSelector.labelExpanded": "Expanded density",
           "euiStyleSelector.labelNormal": "Normal density",
           "euiSuperDatePicker.showDatesButtonLabel": "Show dates",
-          "euiSuperSelect.screenReaderAnnouncement": [Function],
+          "euiSuperSelect.screenReaderAnnouncement": "You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.",
           "euiSuperSelectControl.selectAnOption": [Function],
           "euiSuperUpdateButton.cannotUpdateTooltip": "Cannot update",
           "euiSuperUpdateButton.clickToApplyTooltip": "Click to apply",

src/core/public/i18n/i18n_eui_mapping.tsx

@@ -663,6 +663,10 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         defaultMessage: '+ {messagesLength} more',
         values: { messagesLength },
       }),
+    'euiErrorBoundary.error': i18n.translate('core.euiErrorBoundary.error', {
+      defaultMessage: 'Error',
+      description: 'Error boundary for uncaught exceptions when rendering part of the application',
+    }),
     'euiNotificationEventMessages.accordionAriaLabelButtonText': ({
       messagesLength,
       eventName,
@@ -1046,12 +1050,13 @@ export const getEuiContextMapping = (): EuiTokensObject => {
         description: 'Displayed in a button that shows date picker',
       }
     ),
-    'euiSuperSelect.screenReaderAnnouncement': ({ optionsCount }: EuiValues) =>
-      i18n.translate('core.euiSuperSelect.screenReaderAnnouncement', {
+    'euiSuperSelect.screenReaderAnnouncement': i18n.translate(
+      'core.euiSuperSelect.screenReaderAnnouncement',
+      {
         defaultMessage:
-          'You are in a form selector of {optionsCount} items and must select a single option. Use the up and down keys to navigate or escape to close.',
-        values: { optionsCount },
-      }),
+          'You are in a form selector and must select a single option. Use the up and down keys to navigate or escape to close.',
+      }
+    ),
     'euiSuperSelectControl.selectAnOption': ({ selectedValue }: EuiValues) =>
       i18n.translate('core.euiSuperSelectControl.selectAnOption', {
         defaultMessage: 'Select an option: {selectedValue}, is selected',

src/dev/license_checker/config.ts

@@ -76,6 +76,6 @@ export const LICENSE_OVERRIDES = {
   'jsts@1.6.2': ['Eclipse Distribution License - v 1.0'], // cf. https://github.com/bjornharrtell/jsts
   '@mapbox/jsonlint-lines-primitives@2.0.2': ['MIT'], // license in readme https://github.com/tmcw/jsonlint
   '@elastic/ems-client@8.0.0': ['Elastic License 2.0'],
-  '@elastic/eui@41.0.0': ['SSPL-1.0 OR Elastic License 2.0'],
+  '@elastic/eui@41.2.3': ['SSPL-1.0 OR Elastic License 2.0'],
   'language-subtag-registry@0.3.21': ['CC-BY-4.0'], // retired ODC‑By license https://github.com/mattcg/language-subtag-registry
 };

src/plugins/data/public/utils/table_inspector_view/components/__snapshots__/data_view.test.tsx.snap

@@ -173,56 +173,74 @@ exports[`Inspector Data View component should render empty state 1`] = `
         </h2>
       }
     >
-      <div
-        className="euiEmptyPrompt"
+      <EuiPanel
+        className="euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+        color="transparent"
+        paddingSize="none"
       >
-        <EuiTitle
-          size="m"
+        <div
+          className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
         >
-          <h2
-            className="euiTitle euiTitle--medium"
+          <div
+            className="euiEmptyPrompt__main"
           >
-            <FormattedMessage
-              defaultMessage="No data available"
-              id="data.inspector.table.noDataAvailableTitle"
-              values={Object {}}
-            >
-              No data available
-            </FormattedMessage>
-          </h2>
-        </EuiTitle>
-        <EuiTextColor
-          color="subdued"
-        >
-          <span
-            className="euiTextColor euiTextColor--subdued"
-            style={Object {}}
-          >
-            <EuiSpacer
-              size="m"
+            <div
+              className="euiEmptyPrompt__content"
             >
               <div
-                className="euiSpacer euiSpacer--m"
-              />
-            </EuiSpacer>
-            <EuiText>
-              <div
-                className="euiText euiText--medium"
+                className="euiEmptyPrompt__contentInner"
               >
-                <p>
-                  <FormattedMessage
-                    defaultMessage="The element did not provide any data."
-                    id="data.inspector.table.noDataAvailableDescription"
-                    values={Object {}}
+                <EuiTitle
+                  size="m"
+                >
+                  <h2
+                    className="euiTitle euiTitle--medium"
                   >
-                    The element did not provide any data.
-                  </FormattedMessage>
-                </p>
+                    <FormattedMessage
+                      defaultMessage="No data available"
+                      id="data.inspector.table.noDataAvailableTitle"
+                      values={Object {}}
+                    >
+                      No data available
+                    </FormattedMessage>
+                  </h2>
+                </EuiTitle>
+                <EuiTextColor
+                  color="subdued"
+                >
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
+                  >
+                    <EuiSpacer
+                      size="m"
+                    >
+                      <div
+                        className="euiSpacer euiSpacer--m"
+                      />
+                    </EuiSpacer>
+                    <EuiText>
+                      <div
+                        className="euiText euiText--medium"
+                      >
+                        <p>
+                          <FormattedMessage
+                            defaultMessage="The element did not provide any data."
+                            id="data.inspector.table.noDataAvailableDescription"
+                            values={Object {}}
+                          >
+                            The element did not provide any data.
+                          </FormattedMessage>
+                        </p>
+                      </div>
+                    </EuiText>
+                  </span>
+                </EuiTextColor>
               </div>
-            </EuiText>
-          </span>
-        </EuiTextColor>
-      </div>
+            </div>
+          </div>
+        </div>
+      </EuiPanel>
     </EuiEmptyPrompt>
   </DataViewComponent>
 </Component>

src/plugins/discover/public/services/doc_views/components/doc_viewer_source/__snapshots__/source.test.tsx.snap

@@ -136,129 +136,144 @@ exports[`Source Viewer component renders error state 1`] = `
       </h2>
     }
   >
-    <div
-      className="euiEmptyPrompt"
+    <EuiPanel
+      className="euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+      color="transparent"
+      paddingSize="none"
     >
-      <EuiIcon
-        color="subdued"
-        size="xxl"
-        type="alert"
-      >
-        <span
-          color="subdued"
-          data-euiicon-type="alert"
-          size="xxl"
-        />
-      </EuiIcon>
-      <EuiSpacer
-        size="m"
+      <div
+        className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
       >
         <div
-          className="euiSpacer euiSpacer--m"
-        />
-      </EuiSpacer>
-      <EuiTitle
-        size="m"
-      >
-        <h2
-          className="euiTitle euiTitle--medium"
+          className="euiEmptyPrompt__main"
         >
-          An Error Occurred
-        </h2>
-      </EuiTitle>
-      <EuiTextColor
-        color="subdued"
-      >
-        <span
-          className="euiTextColor euiTextColor--subdued"
-          style={Object {}}
-        >
-          <EuiSpacer
-            size="m"
+          <div
+            className="euiEmptyPrompt__icon"
+          >
+            <EuiIcon
+              color="subdued"
+              size="xxl"
+              type="alert"
+            >
+              <span
+                color="subdued"
+                data-euiicon-type="alert"
+                size="xxl"
+              />
+            </EuiIcon>
+          </div>
+          <div
+            className="euiEmptyPrompt__content"
           >
             <div
-              className="euiSpacer euiSpacer--m"
-            />
-          </EuiSpacer>
-          <EuiText>
-            <div
-              className="euiText euiText--medium"
+              className="euiEmptyPrompt__contentInner"
             >
-              <div>
-                Could not fetch data at this time. Refresh the tab to try again.
-                <EuiSpacer
-                  size="s"
+              <EuiTitle
+                size="m"
+              >
+                <h2
+                  className="euiTitle euiTitle--medium"
                 >
-                  <div
-                    className="euiSpacer euiSpacer--s"
-                  />
-                </EuiSpacer>
-                <EuiButton
-                  iconType="refresh"
-                  onClick={[Function]}
+                  An Error Occurred
+                </h2>
+              </EuiTitle>
+              <EuiTextColor
+                color="subdued"
+              >
+                <span
+                  className="euiTextColor euiTextColor--subdued"
+                  style={Object {}}
                 >
-                  <EuiButtonDisplay
-                    baseClassName="euiButton"
-                    disabled={false}
-                    element="button"
-                    iconType="refresh"
-                    isDisabled={false}
-                    onClick={[Function]}
-                    type="button"
+                  <EuiSpacer
+                    size="m"
                   >
-                    <button
-                      className="euiButton euiButton--primary"
-                      disabled={false}
-                      onClick={[Function]}
-                      style={
-                        Object {
-                          "minWidth": undefined,
-                        }
-                      }
-                      type="button"
+                    <div
+                      className="euiSpacer euiSpacer--m"
+                    />
+                  </EuiSpacer>
+                  <EuiText>
+                    <div
+                      className="euiText euiText--medium"
                     >
-                      <EuiButtonContent
-                        className="euiButton__content"
-                        iconSide="left"
-                        iconType="refresh"
-                        textProps={
-                          Object {
-                            "className": "euiButton__text",
-                          }
-                        }
-                      >
-                        <span
-                          className="euiButtonContent euiButton__content"
+                      <div>
+                        Could not fetch data at this time. Refresh the tab to try again.
+                        <EuiSpacer
+                          size="s"
                         >
-                          <EuiIcon
-                            className="euiButtonContent__icon"
-                            color="inherit"
-                            size="m"
-                            type="refresh"
+                          <div
+                            className="euiSpacer euiSpacer--s"
+                          />
+                        </EuiSpacer>
+                        <EuiButton
+                          iconType="refresh"
+                          onClick={[Function]}
+                        >
+                          <EuiButtonDisplay
+                            baseClassName="euiButton"
+                            disabled={false}
+                            element="button"
+                            iconType="refresh"
+                            isDisabled={false}
+                            onClick={[Function]}
+                            type="button"
                           >
-                            <span
-                              className="euiButtonContent__icon"
-                              color="inherit"
-                              data-euiicon-type="refresh"
-                              size="m"
-                            />
-                          </EuiIcon>
-                          <span
-                            className="euiButton__text"
-                          >
-                            Refresh
-                          </span>
-                        </span>
-                      </EuiButtonContent>
-                    </button>
-                  </EuiButtonDisplay>
-                </EuiButton>
-              </div>
+                            <button
+                              className="euiButton euiButton--primary"
+                              disabled={false}
+                              onClick={[Function]}
+                              style={
+                                Object {
+                                  "minWidth": undefined,
+                                }
+                              }
+                              type="button"
+                            >
+                              <EuiButtonContent
+                                className="euiButton__content"
+                                iconSide="left"
+                                iconType="refresh"
+                                textProps={
+                                  Object {
+                                    "className": "euiButton__text",
+                                  }
+                                }
+                              >
+                                <span
+                                  className="euiButtonContent euiButton__content"
+                                >
+                                  <EuiIcon
+                                    className="euiButtonContent__icon"
+                                    color="inherit"
+                                    size="m"
+                                    type="refresh"
+                                  >
+                                    <span
+                                      className="euiButtonContent__icon"
+                                      color="inherit"
+                                      data-euiicon-type="refresh"
+                                      size="m"
+                                    />
+                                  </EuiIcon>
+                                  <span
+                                    className="euiButton__text"
+                                  >
+                                    Refresh
+                                  </span>
+                                </span>
+                              </EuiButtonContent>
+                            </button>
+                          </EuiButtonDisplay>
+                        </EuiButton>
+                      </div>
+                    </div>
+                  </EuiText>
+                </span>
+              </EuiTextColor>
             </div>
-          </EuiText>
-        </span>
-      </EuiTextColor>
-    </div>
+          </div>
+        </div>
+      </div>
+    </EuiPanel>
   </EuiEmptyPrompt>
 </DocViewerSource>
 `;

src/plugins/visualizations/public/components/__snapshots__/visualization_noresults.test.js.snap

@@ -6,29 +6,42 @@ exports[`VisualizationNoResults should render according to snapshot 1`] = `
   data-test-subj="visNoResult"
 >
   <div
-    class="euiEmptyPrompt"
+    class="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
     data-test-subj="visualization-error"
   >
-    <span
-      color="default"
-      data-euiicon-type="visualizeApp"
-    />
     <div
-      class="euiSpacer euiSpacer--m"
-    />
-    <span
-      class="euiTextColor euiTextColor--subdued"
+      class="euiEmptyPrompt__main"
     >
       <div
-        class="euiText euiText--medium"
+        class="euiEmptyPrompt__icon"
+      >
+        <span
+          color="default"
+          data-euiicon-type="visualizeApp"
+        />
+      </div>
+      <div
+        class="euiEmptyPrompt__content"
       >
         <div
-          class="euiText euiText--extraSmall"
+          class="euiEmptyPrompt__contentInner"
         >
-          No results found
+          <span
+            class="euiTextColor euiTextColor--subdued"
+          >
+            <div
+              class="euiText euiText--medium"
+            >
+              <div
+                class="euiText euiText--extraSmall"
+              >
+                No results found
+              </div>
+            </div>
+          </span>
         </div>
       </div>
-    </span>
+    </div>
   </div>
 </div>
 `;

test/functional/apps/dashboard/url_field_formatter.ts

@@ -56,7 +56,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       await common.navigateToApp('dashboard');
       await dashboard.loadSavedDashboard('dashboard with table');
       await dashboard.waitForRenderComplete();
-      const fieldLink = await visChart.getFieldLinkInVisTable(`${fieldName}: Descending`, 1);
+      const fieldLink = await visChart.getFieldLinkInVisTable(`${fieldName}: Descending`);
       await clickFieldAndCheckUrl(fieldLink);
     });
 

test/functional/apps/discover/_data_grid_field_data.ts

@@ -71,7 +71,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
         await PageObjects.discover.waitUntilSearchingHasFinished();
 
         await retry.waitFor('first cell contains expected timestamp', async () => {
-          const cell = await dataGrid.getCellElement(1, 3);
+          const cell = await dataGrid.getCellElement(0, 2);
           const text = await cell.getVisibleText();
           return text === expectedTimeStamp;
         });

test/functional/apps/visualize/_data_table.ts

@@ -268,7 +268,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
       });
 
       it('should apply correct filter', async () => {
-        await PageObjects.visChart.filterOnTableCell(1, 3);
+        await PageObjects.visChart.filterOnTableCell(0, 2);
         await PageObjects.visChart.waitForVisualizationRenderingStabilized();
         const data = await PageObjects.visChart.getTableVisContent();
         expect(data).to.be.eql([

test/functional/apps/visualize/_data_table_notimeindex_filters.ts

@@ -70,7 +70,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       await retry.try(async () => {
         // hover and click on cell to filter
-        await PageObjects.visChart.filterOnTableCell(1, 2);
+        await PageObjects.visChart.filterOnTableCell(0, 1);
 
         await PageObjects.header.waitUntilLoadingHasFinished();
         await renderable.waitForRender();

test/functional/apps/visualize/_embedding_chart.ts

@@ -83,7 +83,7 @@ export default function ({ getService, getPageObjects }: FtrProviderContext) {
 
       it('should allow to change timerange from the visualization in embedded mode', async () => {
         await retry.try(async () => {
-          await PageObjects.visChart.filterOnTableCell(1, 7);
+          await PageObjects.visChart.filterOnTableCell(0, 6);
           await PageObjects.header.waitUntilLoadingHasFinished();
           await renderable.waitForRender();
 

test/functional/page_objects/visualize_chart_page.ts

@@ -349,10 +349,12 @@ export class VisualizeChartPageObject extends FtrService {
     return await this.testSubjects.getVisibleText('dataGridHeader');
   }
 
-  public async getFieldLinkInVisTable(fieldName: string, rowIndex: number = 1) {
-    const headers = await this.dataGrid.getHeaders();
-    const fieldColumnIndex = headers.indexOf(fieldName);
-    const cell = await this.dataGrid.getCellElement(rowIndex, fieldColumnIndex + 1);
+  public async getFieldLinkInVisTable(
+    fieldName: string,
+    rowIndex: number = 0,
+    colIndex: number = 0
+  ) {
+    const cell = await this.dataGrid.getCellElement(rowIndex, colIndex);
     return await cell.findByTagName('a');
   }
 

test/functional/services/data_grid.ts

@@ -81,18 +81,12 @@ export class DataGridService extends FtrService {
 
   /**
    * Returns a grid cell element by row & column indexes.
-   * The row offset equals 1 since the first row of data grid is the header row.
-   * @param rowIndex data row index starting from 1 (1 means 1st row)
-   * @param columnIndex column index starting from 1 (1 means 1st column)
+   * @param rowIndex data row index starting from 0 (0 means 1st row)
+   * @param columnIndex column index starting from 0 (0 means 1st column)
    */
-  public async getCellElement(rowIndex: number, columnIndex: number) {
-    const table = await this.find.byCssSelector('.euiDataGrid');
-    const $ = await table.parseDomContent();
-    const columnNumber = $('.euiDataGridHeaderCell__content').length;
+  public async getCellElement(rowIndex: number = 0, columnIndex: number = 0) {
     return await this.find.byCssSelector(
-      `[data-test-subj="dataGridWrapper"] [data-test-subj="dataGridRowCell"]:nth-of-type(${
-        columnNumber * (rowIndex - 1) + columnIndex + 1
-      })`
+      `[data-test-subj="dataGridWrapper"] [data-test-subj="dataGridRowCell"][data-gridcell-id="${rowIndex},${columnIndex}"]`
     );
   }
 

x-pack/plugins/canvas/public/components/asset_manager/__stories__/__snapshots__/asset_manager.stories.storyshot

@@ -109,21 +109,34 @@ exports[`Storyshots components/Assets/AssetManager no assets 1`] = `
             className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow canvasAssetManager__emptyPanel"
           >
             <div
-              className="euiEmptyPrompt"
+              className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
             >
-              <span
-                color="subdued"
-                data-euiicon-type="importAction"
-                size="xxl"
-              />
               <div
-                className="euiSpacer euiSpacer--m"
-              />
-              <h2
-                className="euiTitle euiTitle--xsmall"
+                className="euiEmptyPrompt__main"
               >
-                Import your assets to get started
-              </h2>
+                <div
+                  className="euiEmptyPrompt__icon"
+                >
+                  <span
+                    color="subdued"
+                    data-euiicon-type="importAction"
+                    size="xxl"
+                  />
+                </div>
+                <div
+                  className="euiEmptyPrompt__content"
+                >
+                  <div
+                    className="euiEmptyPrompt__contentInner"
+                  >
+                    <h2
+                      className="euiTitle euiTitle--xsmall"
+                    >
+                      Import your assets to get started
+                    </h2>
+                  </div>
+                </div>
+              </div>
             </div>
           </div>
         </div>

x-pack/plugins/canvas/public/components/home/my_workpads/__snapshots__/empty_prompt.stories.storyshot

@@ -16,49 +16,61 @@ exports[`Storyshots Home/Components/Empty Prompt Empty Prompt 1`] = `
       className="euiPanel euiPanel--paddingMedium euiPanel--borderRadiusNone euiPanel--subdued euiPanel--noShadow euiPanel--noBorder"
     >
       <div
-        className="euiEmptyPrompt"
-        color="subdued"
+        className="euiPanel euiPanel--borderRadiusMedium euiPanel--subdued euiPanel--noShadow euiPanel--noBorder euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
       >
-        <span
-          color="subdued"
-          data-euiicon-type="importAction"
-          size="xxl"
-        />
         <div
-          className="euiSpacer euiSpacer--m"
-        />
-        <h2
-          className="euiTitle euiTitle--medium"
-        >
-          Add your first workpad
-        </h2>
-        <span
-          className="euiTextColor euiTextColor--subdued"
-          style={Object {}}
+          className="euiEmptyPrompt__main"
         >
           <div
-            className="euiSpacer euiSpacer--m"
-          />
-          <div
-            className="euiText euiText--medium"
+            className="euiEmptyPrompt__icon"
           >
-            <p>
-              Create a new workpad, start from a template, or import a workpad JSON file by dropping it here.
-            </p>
-            <p>
-              New to Canvas?
-               
-              <a
-                className="euiLink euiLink--primary"
-                href="home#/tutorial_directory/sampleData"
-                rel="noreferrer"
+            <span
+              color="subdued"
+              data-euiicon-type="importAction"
+              size="xxl"
+            />
+          </div>
+          <div
+            className="euiEmptyPrompt__content"
+          >
+            <div
+              className="euiEmptyPrompt__contentInner"
+            >
+              <h2
+                className="euiTitle euiTitle--medium"
               >
                 Add your first workpad
-              </a>
-              .
-            </p>
+              </h2>
+              <span
+                className="euiTextColor euiTextColor--subdued"
+                style={Object {}}
+              >
+                <div
+                  className="euiSpacer euiSpacer--m"
+                />
+                <div
+                  className="euiText euiText--medium"
+                >
+                  <p>
+                    Create a new workpad, start from a template, or import a workpad JSON file by dropping it here.
+                  </p>
+                  <p>
+                    New to Canvas?
+                     
+                    <a
+                      className="euiLink euiLink--primary"
+                      href="home#/tutorial_directory/sampleData"
+                      rel="noreferrer"
+                    >
+                      Add your first workpad
+                    </a>
+                    .
+                  </p>
+                </div>
+              </span>
+            </div>
           </div>
-        </span>
+        </div>
       </div>
     </div>
   </div>

x-pack/plugins/canvas/public/components/saved_elements_modal/__stories__/__snapshots__/saved_elements_modal.stories.storyshot

@@ -86,36 +86,49 @@ exports[`Storyshots components/SavedElementsModal no custom elements 1`] = `
             className="euiSpacer euiSpacer--l"
           />
           <div
-            className="euiEmptyPrompt"
+            className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
           >
-            <span
-              color="subdued"
-              data-euiicon-type="vector"
-              size="xxl"
-            />
             <div
-              className="euiSpacer euiSpacer--m"
-            />
-            <h2
-              className="euiTitle euiTitle--small"
-            >
-              Add new elements
-            </h2>
-            <span
-              className="euiTextColor euiTextColor--subdued"
-              style={Object {}}
+              className="euiEmptyPrompt__main"
             >
               <div
-                className="euiSpacer euiSpacer--m"
-              />
-              <div
-                className="euiText euiText--medium"
+                className="euiEmptyPrompt__icon"
               >
-                <p>
-                  Group and save workpad elements to create new elements
-                </p>
+                <span
+                  color="subdued"
+                  data-euiicon-type="vector"
+                  size="xxl"
+                />
               </div>
-            </span>
+              <div
+                className="euiEmptyPrompt__content"
+              >
+                <div
+                  className="euiEmptyPrompt__contentInner"
+                >
+                  <h2
+                    className="euiTitle euiTitle--small"
+                  >
+                    Add new elements
+                  </h2>
+                  <span
+                    className="euiTextColor euiTextColor--subdued"
+                    style={Object {}}
+                  >
+                    <div
+                      className="euiSpacer euiSpacer--m"
+                    />
+                    <div
+                      className="euiText euiText--medium"
+                    >
+                      <p>
+                        Group and save workpad elements to create new elements
+                      </p>
+                    </div>
+                  </span>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

x-pack/plugins/canvas/shareable_runtime/webpack.config.js

@@ -188,7 +188,6 @@ module.exports = {
       {
         test: [
           require.resolve('@elastic/eui/es/components/drag_and_drop'),
-          require.resolve('@elastic/eui/packages/react-datepicker'),
           require.resolve('highlight.js'),
         ],
         use: require.resolve('null-loader'),

x-pack/plugins/canvas/storybook/storyshots.test.tsx

@@ -36,14 +36,6 @@ Date.now = jest.fn(() => testTime.getTime());
 // Mock telemetry service
 jest.mock('../public/lib/ui_metric', () => ({ trackCanvasUiMetric: () => {} }));
 
-// Mock react-datepicker dep used by eui to avoid rendering the entire large component
-jest.mock('@elastic/eui/packages/react-datepicker', () => {
-  return {
-    __esModule: true,
-    default: 'ReactDatePicker',
-  };
-});
-
 // Mock React Portal for components that use modals, tooltips, etc
 // @ts-expect-error Portal mocks are notoriously difficult to type
 ReactDOM.createPortal = jest.fn((element) => element);

x-pack/plugins/index_lifecycle_management/__jest__/__snapshots__/policy_table.test.tsx.snap

@@ -42,57 +42,70 @@ exports[`policy table shows empty state when there are no policies 1`] = `
   role="main"
 >
   <div
-    class="euiEmptyPrompt"
+    class="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
   >
-    <span
-      color="subdued"
-      data-euiicon-type="managementApp"
-    />
     <div
-      class="euiSpacer euiSpacer--m"
-    />
-    <h1
-      class="euiTitle euiTitle--medium"
-    >
-      Create your first index lifecycle policy
-    </h1>
-    <span
-      class="euiTextColor euiTextColor--subdued"
+      class="euiEmptyPrompt__main"
     >
       <div
-        class="euiSpacer euiSpacer--m"
-      />
-      <div
-        class="euiText euiText--medium"
-      >
-        <p>
-           An index lifecycle policy helps you manage your indices as they age.
-        </p>
-      </div>
-    </span>
-    <div
-      class="euiSpacer euiSpacer--l"
-    />
-    <button
-      class="euiButton euiButton--primary euiButton--fill"
-      data-test-subj="createPolicyButton"
-      type="button"
-    >
-      <span
-        class="euiButtonContent euiButton__content"
+        class="euiEmptyPrompt__icon"
       >
         <span
-          class="euiButtonContent__icon"
-          color="inherit"
-          data-euiicon-type="plusInCircle"
+          color="subdued"
+          data-euiicon-type="managementApp"
         />
-        <span
-          class="euiButton__text"
+      </div>
+      <div
+        class="euiEmptyPrompt__content"
+      >
+        <div
+          class="euiEmptyPrompt__contentInner"
         >
-          Create policy
-        </span>
-      </span>
-    </button>
+          <h1
+            class="euiTitle euiTitle--medium"
+          >
+            Create your first index lifecycle policy
+          </h1>
+          <span
+            class="euiTextColor euiTextColor--subdued"
+          >
+            <div
+              class="euiSpacer euiSpacer--m"
+            />
+            <div
+              class="euiText euiText--medium"
+            >
+              <p>
+                 An index lifecycle policy helps you manage your indices as they age.
+              </p>
+            </div>
+          </span>
+          <div
+            class="euiSpacer euiSpacer--l"
+          />
+          <button
+            class="euiButton euiButton--primary euiButton--fill"
+            data-test-subj="createPolicyButton"
+            type="button"
+          >
+            <span
+              class="euiButtonContent euiButton__content"
+            >
+              <span
+                class="euiButtonContent__icon"
+                color="inherit"
+                data-euiicon-type="plusInCircle"
+              />
+              <span
+                class="euiButton__text"
+              >
+                Create policy
+              </span>
+            </span>
+          </button>
+        </div>
+      </div>
+    </div>
   </div>
 </div>
 `;

x-pack/plugins/security/public/management/roles/roles_grid/__snapshots__/roles_grid_page.test.tsx.snap

@@ -40,76 +40,91 @@ exports[`<RolesGridPage /> renders permission denied if required 1`] = `
             </h2>
           }
         >
-          <div
-            className="euiEmptyPrompt"
+          <EuiPanel
+            className="euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
+            color="transparent"
+            paddingSize="none"
           >
-            <EuiIcon
-              color="subdued"
-              size="xxl"
-              type="securityApp"
-            >
-              <span
-                color="subdued"
-                data-euiicon-type="securityApp"
-                size="xxl"
-              />
-            </EuiIcon>
-            <EuiSpacer
-              size="m"
+            <div
+              className="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
             >
               <div
-                className="euiSpacer euiSpacer--m"
-              />
-            </EuiSpacer>
-            <EuiTitle
-              size="m"
-            >
-              <h2
-                className="euiTitle euiTitle--medium"
+                className="euiEmptyPrompt__main"
               >
-                <FormattedMessage
-                  defaultMessage="You need permission to manage roles"
-                  id="xpack.security.management.roles.deniedPermissionTitle"
-                  values={Object {}}
+                <div
+                  className="euiEmptyPrompt__icon"
                 >
-                  You need permission to manage roles
-                </FormattedMessage>
-              </h2>
-            </EuiTitle>
-            <EuiTextColor
-              color="subdued"
-            >
-              <span
-                className="euiTextColor euiTextColor--subdued"
-                style={Object {}}
-              >
-                <EuiSpacer
-                  size="m"
-                >
-                  <div
-                    className="euiSpacer euiSpacer--m"
-                  />
-                </EuiSpacer>
-                <EuiText>
-                  <div
-                    className="euiText euiText--medium"
+                  <EuiIcon
+                    color="subdued"
+                    size="xxl"
+                    type="securityApp"
                   >
-                    <p
-                      data-test-subj="permissionDeniedMessage"
+                    <span
+                      color="subdued"
+                      data-euiicon-type="securityApp"
+                      size="xxl"
+                    />
+                  </EuiIcon>
+                </div>
+                <div
+                  className="euiEmptyPrompt__content"
+                >
+                  <div
+                    className="euiEmptyPrompt__contentInner"
+                  >
+                    <EuiTitle
+                      size="m"
                     >
-                      <FormattedMessage
-                        defaultMessage="Contact your system administrator."
-                        id="xpack.security.management.roles.noPermissionToManageRolesDescription"
-                        values={Object {}}
+                      <h2
+                        className="euiTitle euiTitle--medium"
                       >
-                        Contact your system administrator.
-                      </FormattedMessage>
-                    </p>
+                        <FormattedMessage
+                          defaultMessage="You need permission to manage roles"
+                          id="xpack.security.management.roles.deniedPermissionTitle"
+                          values={Object {}}
+                        >
+                          You need permission to manage roles
+                        </FormattedMessage>
+                      </h2>
+                    </EuiTitle>
+                    <EuiTextColor
+                      color="subdued"
+                    >
+                      <span
+                        className="euiTextColor euiTextColor--subdued"
+                        style={Object {}}
+                      >
+                        <EuiSpacer
+                          size="m"
+                        >
+                          <div
+                            className="euiSpacer euiSpacer--m"
+                          />
+                        </EuiSpacer>
+                        <EuiText>
+                          <div
+                            className="euiText euiText--medium"
+                          >
+                            <p
+                              data-test-subj="permissionDeniedMessage"
+                            >
+                              <FormattedMessage
+                                defaultMessage="Contact your system administrator."
+                                id="xpack.security.management.roles.noPermissionToManageRolesDescription"
+                                values={Object {}}
+                              >
+                                Contact your system administrator.
+                              </FormattedMessage>
+                            </p>
+                          </div>
+                        </EuiText>
+                      </span>
+                    </EuiTextColor>
                   </div>
-                </EuiText>
-              </span>
-            </EuiTextColor>
-          </div>
+                </div>
+              </div>
+            </div>
+          </EuiPanel>
         </EuiEmptyPrompt>
       </div>
     </EuiPanel>

x-pack/plugins/security/server/__snapshots__/prompt_page.test.tsx.snap

@@ -1,5 +1,5 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
+exports[`PromptPage renders as expected with additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/some/script1.js\\"></script><script src=\\"/mock-basepath/some/script2.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive euiEmptyPrompt__actions\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></div></div></div></body></html>"`;
 
-exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></body></html>"`;
+exports[`PromptPage renders as expected without additional scripts 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle euiTitle--medium\\">Some Title</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><div>Some Body</div></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive euiEmptyPrompt__actions\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#1</span></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><span>Action#2</span></div></div></div></div></div></div></div></div></div></body></html>"`;

x-pack/plugins/security/server/authentication/__snapshots__/unauthenticated_page.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">We couldn&#x27;t log you in</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>We hit an authentication error. Please check your credentials and try again. If you still can&#x27;t log in, contact your system administrator.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" data-test-subj=\\"logInButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in</span></span></a></div></div></div></div></div></div></body></html>"`;
+exports[`UnauthenticatedPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle euiTitle--medium\\">We couldn&#x27;t log you in</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>We hit an authentication error. Please check your credentials and try again. If you still can&#x27;t log in, contact your system administrator.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive euiEmptyPrompt__actions\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/some/url?some-query=some-value#some-hash\\" rel=\\"noreferrer\\" data-test-subj=\\"logInButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in</span></span></a></div></div></div></div></div></div></div></div></div></body></html>"`;

x-pack/plugins/security/server/authorization/__snapshots__/reset_session_page.test.tsx.snap

@@ -1,3 +1,3 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiEmptyPrompt\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span><div class=\\"euiSpacer euiSpacer--m\\"></div><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></body></html>"`;
+exports[`ResetSessionPage renders as expected 1`] = `"<html lang=\\"en\\"><head><title>Elastic</title><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-src/kbn-ui-shared-deps-src.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/100500/bundles/kbn-ui-shared-deps-npm/kbn-ui-shared-deps-npm.v8.light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/node_modules/@kbn/ui-framework/dist/kui_light.css\\" rel=\\"stylesheet\\"/><link href=\\"/mock-server-basepath/ui/legacy_light_theme.css\\" rel=\\"stylesheet\\"/>MockedFonts<link rel=\\"alternate icon\\" type=\\"image/png\\" href=\\"/mock-server-basepath/ui/favicons/favicon.png\\"/><link rel=\\"icon\\" type=\\"image/svg+xml\\" href=\\"/mock-server-basepath/ui/favicons/favicon.svg\\"/><script src=\\"/mock-basepath/internal/security/reset_session_page.js\\"></script><meta name=\\"theme-color\\" content=\\"#ffffff\\"/><meta name=\\"color-scheme\\" content=\\"light dark\\"/></head><body><div class=\\"euiPage euiPage--grow\\" style=\\"min-height:100vh\\" data-test-subj=\\"promptPage\\"><div class=\\"euiPageBody euiPageBody--borderRadiusNone\\"><div class=\\"euiPanel euiPanel--paddingLarge euiPanel--borderRadiusMedium euiPanel--plain euiPanel--hasShadow euiPageContent euiPageContent--verticalCenter euiPageContent--horizontalCenter\\" role=\\"main\\"><div class=\\"euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge\\"><div class=\\"euiEmptyPrompt__main\\"><div class=\\"euiEmptyPrompt__icon\\"><span data-euiicon-type=\\"alert\\" color=\\"danger\\"></span></div><div class=\\"euiEmptyPrompt__content\\"><div class=\\"euiEmptyPrompt__contentInner\\"><h2 class=\\"euiTitle euiTitle--medium\\">You do not have permission to access the requested page</h2><span class=\\"euiTextColor euiTextColor--subdued\\"><div class=\\"euiSpacer euiSpacer--m\\"></div><div class=\\"euiText euiText--medium\\"><p>Either go back to the previous page or log in as a different user.</p></div></span><div class=\\"euiSpacer euiSpacer--l\\"></div><div class=\\"euiFlexGroup euiFlexGroup--gutterMedium euiFlexGroup--alignItemsCenter euiFlexGroup--justifyContentCenter euiFlexGroup--directionColumn euiFlexGroup--responsive euiEmptyPrompt__actions\\"><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><a class=\\"euiButton euiButton--primary euiButton--fill\\" href=\\"/path/to/logout\\" rel=\\"noreferrer\\" data-test-subj=\\"ResetSessionButton\\"><span class=\\"euiButtonContent euiButton__content\\"><span class=\\"euiButton__text\\">Log in as different user</span></span></a></div><div class=\\"euiFlexItem euiFlexItem--flexGrowZero\\"><button class=\\"euiButtonEmpty euiButtonEmpty--primary\\" type=\\"button\\" id=\\"goBackButton\\"><span class=\\"euiButtonContent euiButtonEmpty__content\\"><span class=\\"euiButtonEmpty__text\\">Go back</span></span></button></div></div></div></div></div></div></div></div></div></body></html>"`;

x-pack/plugins/security_solution/public/management/pages/trusted_apps/view/components/trusted_apps_grid/__snapshots__/index.test.tsx.snap

@@ -32,11 +32,23 @@ exports[`TrustedAppsGrid renders correctly initially 1`] = `
           class="body-content undefined"
         >
           <div
-            class="euiEmptyPrompt"
+            class="euiPanel euiPanel--borderRadiusMedium euiPanel--transparent euiPanel--noShadow euiEmptyPrompt euiEmptyPrompt--vertical euiEmptyPrompt--paddingLarge"
           >
-            <span>
-              No items found
-            </span>
+            <div
+              class="euiEmptyPrompt__main"
+            >
+              <div
+                class="euiEmptyPrompt__content"
+              >
+                <div
+                  class="euiEmptyPrompt__contentInner"
+                >
+                  <span>
+                    No items found
+                  </span>
+                </div>
+              </div>
+            </div>
           </div>
         </div>
       </div>

x-pack/plugins/translations/translations/ja-JP.json

@@ -491,7 +491,6 @@
     "core.euiStyleSelector.labelExpanded": "拡張密度",
     "core.euiStyleSelector.labelNormal": "標準密度",
     "core.euiSuperDatePicker.showDatesButtonLabel": "日付を表示",
-    "core.euiSuperSelect.screenReaderAnnouncement": "{optionsCount} 件のアイテムのフォームセレクターを使用しています。1 つのオプションを選択する必要があります。上下の矢印キーで移動するか、Escキーで閉じます。",
     "core.euiSuperSelectControl.selectAnOption": "オプションの選択：{selectedValue} を選択済み",
     "core.euiSuperUpdateButton.cannotUpdateTooltip": "アップデートできません",
     "core.euiSuperUpdateButton.clickToApplyTooltip": "クリックして適用",

x-pack/plugins/translations/translations/zh-CN.json

@@ -496,7 +496,6 @@
     "core.euiStyleSelector.labelExpanded": "扩展密度",
     "core.euiStyleSelector.labelNormal": "正常密度",
     "core.euiSuperDatePicker.showDatesButtonLabel": "显示日期",
-    "core.euiSuperSelect.screenReaderAnnouncement": "您位于包含 {optionsCount} 个项目的表单选择器中，必须选择单个选项。使用向上和向下箭头键导航，使用 Esc 键关闭。",
     "core.euiSuperSelectControl.selectAnOption": "选择选项：{selectedValue} 已选",
     "core.euiSuperUpdateButton.cannotUpdateTooltip": "无法更新",
     "core.euiSuperUpdateButton.clickToApplyTooltip": "单击以应用",

x-pack/test/functional/page_objects/lens_page.ts

@@ -855,11 +855,8 @@ export function LensPageProvider({ getService, getPageObjects }: FtrProviderCont
     },
 
     async getDatatableCell(rowIndex = 0, colIndex = 0) {
-      const columnNumber = await this.getCountOfDatatableColumns();
       return await find.byCssSelector(
-        `[data-test-subj="lnsDataTable"] [data-test-subj="dataGridRowCell"]:nth-child(${
-          rowIndex * columnNumber + colIndex + 2
-        })`
+        `[data-test-subj="lnsDataTable"] [data-test-subj="dataGridRowCell"][data-gridcell-id="${rowIndex},${colIndex}"]`
       );
     },
 

yarn.lock

@@ -1601,10 +1601,10 @@
   resolved "https://registry.yarnpkg.com/@elastic/eslint-plugin-eui/-/eslint-plugin-eui-0.0.2.tgz#56b9ef03984a05cc213772ae3713ea8ef47b0314"
   integrity sha512-IoxURM5zraoQ7C8f+mJb9HYSENiZGgRVcG4tLQxE61yHNNRDXtGDWTZh8N1KIHcsqN1CEPETjuzBXkJYF/fDiQ==
 
-"@elastic/eui@41.0.0":
-  version "41.0.0"
-  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-41.0.0.tgz#64d7efef5a15d5495f2db1eebd5384e412296e06"
-  integrity sha512-+cExohPqWzahLW6Z6X6dc0voaDkYQ4ruHMSFe0H78YhTECrbu+f9mWDx841C7WDtvKKJVPbCZ/dyTeB2Ogwabw==
+"@elastic/eui@41.2.3":
+  version "41.2.3"
+  resolved "https://registry.yarnpkg.com/@elastic/eui/-/eui-41.2.3.tgz#00f437bf197a809a7092524073174f413ce33f46"
+  integrity sha512-sBPn2O1nn8ZJZncUQf88jzxWtnXcx/X/CubvH8LS7H+GX94PQs1BWXKQtYBI21kUAevSiRdPeX66x3ywZpZliQ==
   dependencies:
     "@types/chroma-js" "^2.0.0"
     "@types/lodash" "^4.14.160"
@@ -1644,6 +1644,7 @@
     url-parse "^1.5.3"
     uuid "^8.3.0"
     vfile "^4.2.0"
+    yargs "^17.2.1"
 
 "@elastic/filesaver@1.1.2":
   version "1.1.2"
@@ -29892,6 +29893,19 @@ yargs@^17.0.1:
     y18n "^5.0.5"
     yargs-parser "^20.2.2"
 
+yargs@^17.2.1, yargs@~17.2.1:
+  version "17.2.1"
+  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.2.1.tgz#e2c95b9796a0e1f7f3bf4427863b42e0418191ea"
+  integrity sha512-XfR8du6ua4K6uLGm5S6fA+FIJom/MdJcFNVY8geLlp2v8GYbOXD4EB1tPNZsRn4vBzKGMgb5DRZMeWuFc2GO8Q==
+  dependencies:
+    cliui "^7.0.2"
+    escalade "^3.1.1"
+    get-caller-file "^2.0.5"
+    require-directory "^2.1.1"
+    string-width "^4.2.0"
+    y18n "^5.0.5"
+    yargs-parser "^20.2.2"
+
 yargs@^3.15.0:
   version "3.32.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.32.0.tgz#03088e9ebf9e756b69751611d2a5ef591482c995"
@@ -29924,19 +29938,6 @@ yargs@^7.1.0:
     y18n "^3.2.1"
     yargs-parser "5.0.0-security.0"
 
-yargs@~17.2.1:
-  version "17.2.1"
-  resolved "https://registry.yarnpkg.com/yargs/-/yargs-17.2.1.tgz#e2c95b9796a0e1f7f3bf4427863b42e0418191ea"
-  integrity sha512-XfR8du6ua4K6uLGm5S6fA+FIJom/MdJcFNVY8geLlp2v8GYbOXD4EB1tPNZsRn4vBzKGMgb5DRZMeWuFc2GO8Q==
-  dependencies:
-    cliui "^7.0.2"
-    escalade "^3.1.1"
-    get-caller-file "^2.0.5"
-    require-directory "^2.1.1"
-    string-width "^4.2.0"
-    y18n "^5.0.5"
-    yargs-parser "^20.2.2"
-
 yargs@~3.10.0:
   version "3.10.0"
   resolved "https://registry.yarnpkg.com/yargs/-/yargs-3.10.0.tgz#f7ee7bd857dd7c1d2d38c0e74efbd681d1431fd1"