This is a meta ticket in support of the greater [META] 7.14 Solution Nav implementation #98359 and is based off/dependent on #101335.

Plugins to migrate

@cchaos

• Logstash Pipelines. [Page layouts] Some light fixes #103197

Stack Management [ @cjcenizal ]

• Stack Management apps (meta issue: Convert Stack Management apps to new Management nav structure #100748)

ML [ @peteharverson ]

ML meta issue #102315

• Transforms
• Machine Learning Jobs

Alerting services [ @YulNaumenko ]

• Rules and Connectors (issue: [Alerting UI] Convert triggersActionsUi plugin to the new Management app structure. #101546)

Security [ @legrego ]

#101660

• Users
• Roles
• API Keys
• Role Mappings
• Spaces

App services [ @Dosant ]

#101625

• Index Patterns
• Search sessions
• Reporting

Kibana App

• Advanced settings (mostly done, just needs bottom bar attention, @cchaos to take a look) [Page layouts] Some light fixes #103197

Core [ @pgayvallet ]

#101605

• Saved Objects
• Tags

Examples of conversions

A couple pages were converted in the setup PR to act as examples. I'm duplicating those examples here as well to help those converting.

Empty states

<EuiPageContent verticalPosition="center" horizontalPosition="center" color="subdued">
  <EuiEmptyPrompt iconType="" title={<h2></h2>} body={<p></p>} actions={[]} />
</EuiPageContent>

Example commit: bbb74b7

Error states

<EuiPageContent verticalPosition="center" horizontalPosition="center" color="danger">
  <EuiEmptyPrompt iconType="" title={<h2></h2>} body={<p></p>} actions={[]} />
</EuiPageContent>

Example commit: 56cf855

If you are having trouble centering your content ensure that any blank divs around your content have the APP_WRAPPER_CLASS.

Normal page with page header

To be sure the page header renders correctly always add bottomBorder and add a l (large) size spacer between it and the content.

<EuiPageHeader
  pageTitle=""
  bottomBorder
  rightSideItems={[
    <EuiButton fill iconType="iconInCircleFilled">
      Create ___
    </EuiButton>,
  ]}
  tabs={[]}
/>

<EuiSpacer size="l" />

Example commit: ebc33a2

Panels & Split panels

Be sure that any internal EuiPanel doesn't contain a shadow. You can turn off shadows with hasShadow={false} or use borders instead with hasBorder={true}.

EuiSplitPanel is a new component that can be used in some of the unique patterns we see throughout management. Mainly the panels that have headings like in Advanced Settings.

Example commit: bc3b85b