[Research] OUI Compliance Audit of `dev_tools` plugin

[sayuree]

Audit of #4078

The dev_tools plugin has 1 Sass file: index.scss: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/bd7d70731eb56372aa2a360e85207a1e6396091f/src/plugins/dev_tools/public/index.scss#L8-L34

1. The plugin does not contain img, span HTML tags, but uses main, div tags. https://github.com/opensearch-project/OpenSearch-Dashboards/blob/bd7d70731eb56372aa2a360e85207a1e6396091f/src/plugins/dev_tools/public/application.tsx#L156-L209

2. The plugin has a component DevToolsWrapper, which mostly uses OUI library components and occasionally uses HTML tags for wrapping: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/bd7d70731eb56372aa2a360e85207a1e6396091f/src/plugins/dev_tools/public/application.tsx#L81-L88

• devApp__container, devApp classes are identical: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/bd7d70731eb56372aa2a360e85207a1e6396091f/src/plugins/dev_tools/public/index.scss#L8-L17 These could be replaced by adding some properties to EuiFlexGroup and EuiFlexItem, however, OUI doesn't allow editing flex-shrink or flex-basis on EuiFlexItem.
• devAppWrapper can be easily replaced by EuiFlexGroup and EuiFlexItems using their corresponding properties like display, direction, grow: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/bd7d70731eb56372aa2a360e85207a1e6396091f/src/plugins/dev_tools/public/index.scss#L19-L23
• devAppTabs can also be replaced by EuiFlexGroup and EuiFlexItem. Although EuiFlexGroup does not have flex-flow property it can be replaced by using both direction and wrap properties, since

  The flex-flow property is a shorthand property for the flex-direction and the flex-wrap properties.

https://github.com/opensearch-project/OpenSearch-Dashboards/blob/bd7d70731eb56372aa2a360e85207a1e6396091f/src/plugins/dev_tools/public/index.scss#L30-L34

• devAppDataSourcePicker is used to add margin and min-width: https://github.com/opensearch-project/OpenSearch-Dashboards/blob/bd7d70731eb56372aa2a360e85207a1e6396091f/src/plugins/dev_tools/public/index.scss#L25-L28 I found EuiPanel with padding-related property, but could not find margin-related property in components. We could use logicalShorthandCSS, but suppose it might still require HTML tag: https://elastic.github.io/eui/#/theming/sizing/utilities#logical

  Conclusion

  1. Allow EuiFlexItem to modify flex-shrink and flex-basis;
  2. Replace devAppWrapper, devAppTabs with OUI library items;

[joshuarrrr]

Thanks @sayuree, this is a helpful start. I think the primary issue to address here is the fact that this plugin doesn't use https://oui.opensearch.org/1.0/#/layout/page for handling the page layout (the use of <main> is a really important hint/finding here). Note that, if we were using OuiPage* components for layout, the tab structure could easily be handled by https://oui.opensearch.org/1.0/#/layout/page-header#tabs-in-the-page-header (rather than the more generic EuiTabs), which would also mean there's no need for the spacing hacks of devAppDataSourcePicker.