[Research] [CCI] OUI Usage Audit in `saved_objects_management` plugin

[SergeyMyssak]

Audit

I performed the OUI Usage audit to the saved_objects_management plugin and got the following results. This plugin consists of two parts: objects_table and object_view.

objects_table part

This part has 7 custom components: table, relationships, overwrite_modal, import_summary, import_mode_control, header, flyout. The images below show all the components listed, where the text in red is the name of the component:

This part also has one scss file - import_summary.scss which is used in import_summary component. The image below shows the use of the classnames written in the file (except .savedObjectsManagementImportSummary__icon), where the text in red is the classname.

objects_table part conclusion

• All listed components are a combination of existing components and do not represent new common components that can be moved to OUI
• scss styles are used for additional placement or to add external effects that do not change the appearance of the components in the OUI
• .savedObjectsManagementImportSummary__icon classname is not used anywhere and can be removed (#4069) https://github.com/opensearch-project/OpenSearch-Dashboards/blob/a8ace28a97f5b178e5e767db03dc8d38046ce14e/src/plugins/saved_objects_management/public/management_section/objects_table/components/import_summary.scss#L18-L20
• namespaceRegistry prop in the table component is never used and can be removed (#3987) https://github.com/opensearch-project/OpenSearch-Dashboards/blob/a8ace28a97f5b178e5e767db03dc8d38046ce14e/src/plugins/saved_objects_management/public/management_section/objects_table/components/table.tsx#L178
• SavedObjectsManagementNamespaceServiceStart interface is not in the import list and needs to be imported (#3987) https://github.com/opensearch-project/OpenSearch-Dashboards/blob/a8ace28a97f5b178e5e767db03dc8d38046ce14e/src/plugins/saved_objects_management/public/management_section/saved_objects_table_page.tsx#L59
• {error} should be wrapped in <p></p>, in order to indicate a paragraph of text (#4069) https://github.com/opensearch-project/OpenSearch-Dashboards/blob/a8ace28a97f5b178e5e767db03dc8d38046ce14e/src/plugins/saved_objects_management/public/management_section/objects_table/components/relationships.tsx#L110-L120
• <span></span> tags are redundant and can be replaced with <></> (#4069) https://github.com/opensearch-project/OpenSearch-Dashboards/blob/a8ace28a97f5b178e5e767db03dc8d38046ce14e/src/plugins/saved_objects_management/public/management_section/objects_table/components/flyout.tsx#L919-L932
• Found a bug when opening the Relationships section, sometimes the icon and object name were not on the same line and the object name exceeded the boundaries of the web page. (#4070)

---

object_view part

This part has 5 custom components: field, form, header, intro, not_found_errors. The images below show all the components listed, where the text in red is the name of the component:

This part does not use scss files.

object_view part conclusion

• All listed components are a combination of existing components and do not represent new common components that can be moved to OUI
• <div></div> should be replaced with <p></p>, in order to indicate a paragraph of text (#4069) https://github.com/opensearch-project/OpenSearch-Dashboards/blob/a8ace28a97f5b178e5e767db03dc8d38046ce14e/src/plugins/saved_objects_management/public/management_section/object_view/components/not_found_errors.tsx#L69-L86
• <div></div> should be replaced with <p></p>, in order to indicate a paragraph of text (#4069) https://github.com/opensearch-project/OpenSearch-Dashboards/blob/a8ace28a97f5b178e5e767db03dc8d38046ce14e/src/plugins/saved_objects_management/public/management_section/object_view/components/intro.tsx#L37-L53
• The Field component from advanced_settings plugin (plugins/advanced_settings/public/management_app/components/field -> renderField function), can somehow be combined with the Field component from saved_object_management plugin (plugins/saved_objects_management/public/management_section/object_view/components/field.tsx) and used as common
• Found a bug where clicking the "View search" button would navigate the user to the wrong path

[BSFishy]

scss styles are used for additional placement or to add external effects that do not change the appearance of the components in the OUI

Does this mark a gap in OUI's layouts? Or can these layouts be achieved with OUI components?

The Field component from advanced_settings plugin (plugins/advanced_settings/public/management_app/components/field -> renderField function), can somehow be combined with the Field component from saved_object_management plugin (plugins/saved_objects_management/public/management_section/object_view/components/field.tsx) and used as common

I think we briefly discussed in @joshuarrrr's office hours that we want to consolidate where custom components are defined? Is there a proposal out do to that? If not, should we make one?

[SergeyMyssak]

The Field component from advanced_settings plugin (plugins/advanced_settings/public/management_app/components/field -> renderField function), can somehow be combined with the Field component from saved_object_management plugin (plugins/saved_objects_management/public/management_section/object_view/components/field.tsx) and used as common

I think we briefly discussed in @joshuarrrr's office hours that we want to consolidate where custom components are defined? Is there a proposal out do to that? If not, should we make one?

Sure, I have described it in https://github.com/opensearch-project/OpenSearch-Dashboards/issues/3963#issuecomment-1568573835, I will create a proposal for it

[SergeyMyssak]

scss styles are used for additional placement or to add external effects that do not change the appearance of the components in the OUI

Does this mark a gap in OUI's layouts? Or can these layouts be achieved with OUI components?

Analysis of css styles:

https://github.com/opensearch-project/OpenSearch-Dashboards/blob/f017eaacd97a7a575bc9b0d34d9e919caf152b32/src/plugins/saved_objects_management/public/management_section/objects_table/components/import_summary.tsx#L228-L250

• savedObjectsManagementImportSummary__row: we use this style to add margin-bottom: 4px to the row because we have -4px on each side due to gutterSize property.

• savedObjectsManagementImportSummary__title: we use this style to add min-width: 0, which allows text to be truncated inside the flex item.

  https://github.com/opensearch-project/OpenSearch-Dashboards/blob/f017eaacd97a7a575bc9b0d34d9e919caf152b32/src/plugins/saved_objects_management/public/management_section/objects_table/components/import_summary.tsx#L111-L151

• .savedObjectsManagementImportSummary__createdCount and .savedObjectsManagementImportSummary__errorCount: we use these styles to change the color of the title.

I don't think the use of these classnames can be achieved with OUI components