[Research] [CCI] OUI usage audit in the vis_type_table plugin

[curq]

Audit for #4099

In this plugin there is only one .scss file with only 4 css classes.

OpenSearch-Dashboards/src/plugins/vis_type_table/public/components/table_vis_app.scss

Lines 1 to 29 in bd7d707

	// Container for the Table Visualization component
	.visTable {
	display: flex;
	flex-direction: column;
	flex: 1 0 0;
	overflow: auto;
	@include euiScrollBar;
	}
	// Group container for table visualization components
	.visTable__group {
	padding: $euiSizeS;
	margin-bottom: $euiSizeL;
	display: flex;
	flex-direction: column;
	flex: 0 0 auto;
	}
	// Style for table component title
	.visTable__component__title {
	text-align: center;
	}
	// Modifier for visTables__group when displayed in columns
	.visTable__groupInColumns {
	flex-direction: row;
	align-items: flex-start;
	}

---

1. .visTable. A class for the div container of Data Table.

   OpenSearch-Dashboards/src/plugins/vis_type_table/public/components/table_vis_app.tsx

   Lines 46 to 64 in bd7d707

   	<I18nProvider>
   	<OpenSearchDashboardsContextProvider services={services}>
   	<div className={className} data-test-subj="visTable">
   	{table ? (
   	<TableVisComponent
   	table={table}
   	visConfig={visConfig}
   	event={handlers.event}
   	uiState={tableUiState}
   	/>
   	) : (
   	<TableVisComponentGroup
   	tableGroups={tableGroups}
   	visConfig={visConfig}
   	event={handlers.event}
   	uiState={tableUiState}
   	/>
   	)}
   	</div>

2. .visTable__group. Class for the container of each separate table, applied in case there are several tables.

   OpenSearch-Dashboards/src/plugins/vis_type_table/public/components/table_vis_component_group.tsx

   Lines 25 to 34 in bd7d707

   	{tableGroups.map(({ table, title }) => (
   	<div key={title} className="visTable__group">
   	<TableVisComponent
   	title={title}
   	table={table}
   	visConfig={visConfig}
   	event={event}
   	uiState={uiState}
   	/>
   	</div>

   
3. .visTable__component__title. Used to center individual table's title.
4. .visTable__groupInColumns. Used to change the direction of visTable container, so instead of multiple table in one column, there will be multiple table in one row.

---

Conclusion

After looking through the plugin files, it seems like overall it is mostly using OUI with almost no native html. The only exceptions are the div containers for that use visTable__group and visTable custom styles. There are other usage of native html, but they are expected ( e.g. h3 in EuiTitle ).

Also, the flex: x y z style is used in both containers. Currently OUI flex component do not support flex-shrink and flex-basis. The same observations were made in other OUI audits. (#4122, #3966). The issue for this was already made opensearch-project/oui#776.

Suggestions.

1. Instead of custom style .visTable__component__title for centering text, use already existing OUI utility class oui-textCenter.
2. Replace div containers with OUI flex components. It will also allow us to get rid of the .visTable__groupInColumns custom styling, because the OuiFlexGroup and OuiFlexItem do support both flex-direction and align-items. Current solution uses classnames to dynamically change the direction by applying .visTable__groupInColumns class to .visTable div container.
3. It is also looks like overflow property is a good candidate for utility class as it is used in several places in OSD. The issue was opened: Add oui-overflow* CSS utilities oui#774.

[joshuarrrr]

1. Instead of custom style .visTable__component__title for centering text, use already existing OUI utility class oui-textCenter.

agree 💯

2. Replace div containers with OUI flex components. It will also allow us to get rid of the .visTable__groupInColumns custom styling, because the OuiFlexGroup and OuiFlexItem do support both flex-direction and align-items. Current solution uses classnames to dynamically change the direction by applying .visTable__groupInColumns class to .visTable div container.

agree - can you create an issue for this change? An additional enhancement I'd love to see here is to add an additional option to wrap items, either by column or row. I'll open a separate issue for it, because it will be easier to do once it's refactored to use OuiFlex* components.

[joshuarrrr]

Leaving open for now until we complete #4255 and see what additional recommendations we may need.