[RFC][Navigation] Introduce `group` in chrome service to group applications and categories.

[SuZhou-Joe]

OpenSearch Dashboards has used a concept of category to group related applications in left navigation:

But as the number of plugins and applications grow larger and larger, a single level of grouping is not enough and it has become more and more crowded and noisy for left navigation to host such numerous links.

For more context, please refer to the #issue(issue_link of UX RFC of navigation)

Introduction

In order to mitigate the issue described above, OpenSearch Dashboards is going to introduce group, a higher level concept to group related features and categories.

Navigation in home page when no group is selected:

Navigation when group is selected:

What requirements need to meet

1. Decouple applications and categories.

OpenSearch Dashboards used to have the assumption that an application can only belong to one category, but that's not the case in the new version of left navigation. For example, Dashboards belong to:

1. dashboard and report category under Security analytics group.
2. monitor category under observability group.

2. A UX revamp on left navigation.

The left navigation needs a revamp regarding we have group

3. Categories re-org for all the existing applications.

4. Some use cases should be pickable from workspace creation page

5. Customers should be able to visit the application through previous deep link

Users may keep deep link like app/${applicationId} and we need to make sure they can still visit the page even when they use the old url.

Interface design

Previously, plugins use the way below to register their applications:

coreSetup.application.register({
    id: DashboardConstants.DASHBOARDS_ID,
    title: 'Dashboards',
    order: 2500,
    euiIconType: 'inputOutput',
    defaultPath: `#${DashboardConstants.LANDING_PAGE_PATH}`,
    updater$: this.appStateUpdater,
    category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
});

Extend chrome_service interface to support group

After we introduce the group, plugins needs to register their applications as:

/* start -- exactly the same as previous code */
coreSetup.application.register({
    id: DashboardConstants.DASHBOARDS_ID,
    title: 'Dashboards',
    order: 2500,
    euiIconType: 'inputOutput',
    defaultPath: `#${DashboardConstants.LANDING_PAGE_PATH}`,
    updater$: this.appStateUpdater,
    category: DEFAULT_APP_CATEGORIES.opensearchDashboards,
});
/* end -- exactly the same as previous code */

// Register dashboards under the `dashboard and report` category under `Security analytics` use case.
coreSetup.chrome.navGroup.addNavToGroup(DEFAULT_USE_CASES.securityAnalytics, {
    id: DashboardConstants.DASHBOARDS_ID,
    order: 2500,
    category: DEFAULT_APP_CATEGORIES.dashboardAndReport
});

// Register dashboards under the `monitor` category under `observability` use case.
coreSetup.chrome.navGroup.addNavToGroup(DEFAULT_USE_CASES.observability, {
    id: DashboardConstants.DASHBOARDS_ID,
    order: 2500,
    category: DEFAULT_APP_CATEGORIES.monitor,
});