[Workspace]Refactor use case selector in workspace creation page #8413

wanglam · 2024-10-01T06:41:57Z

Description

This PR is for refactoring the use case selector in the workspace creation page. It mainly refactors the features displayed in the use case card. The feature descriptions are moved to a separate use case flyout, which will be displayed after clicking the 'Learn more' button.

Screenshot

Testing the changes

Clone branch code and run yarn osd bootstrap --single-version loose
Add below configs in config/opensearch_dashboards.yml

savedObjects.permission.enabled: true
workspace.enabled: true
uiSettings:
  overrides:
    'home:useNewHomePage': true
opensearchDashboards.dashboardAdmin.users: ['admin']

Run yarn start --no-base-path
Login with admin user and go to workspace create page by bottom left menu
The use case selector panel should be displayed like screenshot above
The flyout should be displayed after "Learn more" button clicked

Changelog

feat: [Workspace]Refactor use case selector in workspace creation page

Check List

All tests pass
- yarn test:jest
- yarn test:jest_integration
New functionality includes testing.
New functionality has been documented.
Update CHANGELOG.md
Commits are signed per the DCO using --signoff

Signed-off-by: Lin Wang <wonglam@amazon.com>

codecov · 2024-10-01T07:05:24Z

Codecov Report

Attention: Patch coverage is 97.91667% with 1 line in your changes missing coverage. Please review.

Project coverage is 60.94%. Comparing base (26dca19) to head (0ba9f44).
Report is 133 commits behind head on main.

Files with missing lines	Patch %	Lines
src/plugins/workspace/public/utils.ts	95.45%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@            Coverage Diff             @@
##             main    #8413      +/-   ##
==========================================
+ Coverage   60.93%   60.94%   +0.01%     
==========================================
  Files        3757     3758       +1     
  Lines       89263    89285      +22     
  Branches    13960    13968       +8     
==========================================
+ Hits        54396    54419      +23     
+ Misses      31479    31478       -1     
  Partials     3388     3388

Flag	Coverage Δ
Linux_1	`28.90% <97.91%> (+0.02%)`	⬆️
Linux_2	`56.35% <ø> (ø)`
Linux_3	`37.78% <ø> (+<0.01%)`	⬆️
Linux_4	`29.96% <ø> (ø)`
Windows_1	`28.91% <97.91%> (+0.02%)`	⬆️
Windows_2	`56.30% <ø> (ø)`
Windows_3	`37.78% <ø> (ø)`
Windows_4	`29.96% <ø> (ø)`

Flags with carried forward coverage won't be shown. Click here to find out more.

☔ View full report in Codecov by Sentry.
📢 Have feedback on the report? Share it here.

ruanyl

Left a few minor comment

ruanyl · 2024-10-01T10:57:51Z

src/plugins/workspace/public/components/workspace_form/workspace_use_case.tsx

+        &nbsp;
+        <EuiLink onClick={handleLearnMoreClick}>
+          {i18n.translate('workspace.form.panels.useCase.learnMore', {
+            defaultMessage: 'Learn more.',


Suggested change

defaultMessage: 'Learn more.',

defaultMessage: 'Learn more',

Add "." to align with UX design.

ruanyl · 2024-10-01T10:59:41Z

src/plugins/workspace/public/components/workspace_form/workspace_use_case_flyout.tsx

+                {features && features.length > 0 && (
+                  <>
+                    {i18n.translate('workspace.forms.useCaseFlyout.featuresIncluded', {
+                      defaultMessage: 'Features included:',


Suggested change

defaultMessage: 'Features included:',

defaultMessage: 'Features included',

This ":" is for align with UX design.

ruanyl · 2024-10-01T11:01:05Z

src/plugins/workspace/public/components/workspace_form/workspace_use_case_flyout.tsx

+                            i18n.translate(
+                              'workspace.forms.useCaseFlyout.featuresDetails.delimiter',
+                              {
+                                defaultMessage: ', ',


Just curious, do we need i18n for this?

I think this delimiter should have an i18n version, for example the comma in English and Chinese is a different symbol and will have different spacing. I think it would be a better idea using i18n.

Hailong-am · 2024-10-01T11:22:21Z

src/core/utils/default_nav_groups.ts

@@ -38,10 +38,11 @@ const defaultNavGroups = {
  all: {
    id: ALL_USE_CASE_ID,
    title: i18n.translate('core.ui.group.all.title', {
-      defaultMessage: 'Analytics (All)',
+      defaultMessage: 'Analytics (all features)',


The use case name might be Analytic

They are using "Analytics (all features)" in the use case card side. Let me customized the use case name here. Will confirm with UX, shall we using different name in other places.

Signed-off-by: Lin Wang <wonglam@amazon.com>

wanglam · 2024-10-02T05:07:05Z

@Hailong-am I've removed the (all features) suffix. Could you help me take a look?

Hailong-am · 2024-10-02T05:12:58Z

src/plugins/workspace/public/components/workspace_form/workspace_use_case.tsx

@@ -133,29 +103,68 @@ export const WorkspaceUseCase = ({
  formErrors,
  availableUseCases,
 }: WorkspaceUseCaseProps) => {
+  const [isFlyoutVisible, setIsFlyoutVisible] = useState(false);


nit: could named as isUseCaseFlyoutVisible

Hailong-am · 2024-10-02T05:16:14Z

src/plugins/workspace/public/components/workspace_form/workspace_use_case_flyout.tsx

+}: WorkspaceUseCaseFlyoutProps) => {
+  return (
+    <EuiFlyout
+      style={{ maxWidth: 431 }}


where does the 431 comes from?

It's from the UX design.

Hailong-am · 2024-10-02T05:23:55Z

src/plugins/workspace/public/utils.ts

+    if (featureId.endsWith('overview')) {
+      continue;
+    }


maybe remove get started as well?

Signed-off-by: Lin Wang <wonglam@amazon.com>

* Refactor use case selector in workspace create Signed-off-by: Lin Wang <wonglam@amazon.com> * Add gap for details panel title Signed-off-by: Lin Wang <wonglam@amazon.com> * Update use case name and description Signed-off-by: Lin Wang <wonglam@amazon.com> * Filter out hidden nav links Signed-off-by: Lin Wang <wonglam@amazon.com> * Changeset file for PR #8413 created/updated * Add test case for different feature details Signed-off-by: Lin Wang <wonglam@amazon.com> * Change back to "Analytics" Signed-off-by: Lin Wang <wonglam@amazon.com> * Add all features suffix for all use case Signed-off-by: Lin Wang <wonglam@amazon.com> * Fix failed unit tests Signed-off-by: Lin Wang <wonglam@amazon.com> * Filter out getting started links Signed-off-by: Lin Wang <wonglam@amazon.com> * Renaming isFlyoutVisible to isUseCaseFlyoutVisible Signed-off-by: Lin Wang <wonglam@amazon.com> --------- Signed-off-by: Lin Wang <wonglam@amazon.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com> (cherry picked from commit 7b5a379) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…) (#8444) * Refactor use case selector in workspace create * Add gap for details panel title * Update use case name and description * Filter out hidden nav links * Changeset file for PR #8413 created/updated * Add test case for different feature details * Change back to "Analytics" * Add all features suffix for all use case * Fix failed unit tests * Filter out getting started links * Renaming isFlyoutVisible to isUseCaseFlyoutVisible --------- (cherry picked from commit 7b5a379) Signed-off-by: Lin Wang <wonglam@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

…nsearch-project#8413) (opensearch-project#8444) * Refactor use case selector in workspace create * Add gap for details panel title * Update use case name and description * Filter out hidden nav links * Changeset file for PR opensearch-project#8413 created/updated * Add test case for different feature details * Change back to "Analytics" * Add all features suffix for all use case * Fix failed unit tests * Filter out getting started links * Renaming isFlyoutVisible to isUseCaseFlyoutVisible --------- (cherry picked from commit 7b5a379) Signed-off-by: Lin Wang <wonglam@amazon.com> Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com> Co-authored-by: opensearch-changeset-bot[bot] <154024398+opensearch-changeset-bot[bot]@users.noreply.github.com>

wanglam added 4 commits October 1, 2024 11:43

Refactor use case selector in workspace create

1c95a58

Signed-off-by: Lin Wang <wonglam@amazon.com>

Add gap for details panel title

f89f2d5

Signed-off-by: Lin Wang <wonglam@amazon.com>

Update use case name and description

dc712fe

Signed-off-by: Lin Wang <wonglam@amazon.com>

Filter out hidden nav links

b123dc2

Signed-off-by: Lin Wang <wonglam@amazon.com>

github-actions bot added the all-star-contributor label Oct 1, 2024

opensearch-changeset-bot bot and others added 2 commits October 1, 2024 06:42

Changeset file for PR opensearch-project#8413 created/updated

ff7730d

Add test case for different feature details

106be2e

Signed-off-by: Lin Wang <wonglam@amazon.com>

wanglam marked this pull request as ready for review October 1, 2024 07:46

wanglam requested review from joshuali925 and huyaboo as code owners October 1, 2024 07:46

ruanyl reviewed Oct 1, 2024

View reviewed changes

Hailong-am reviewed Oct 1, 2024

View reviewed changes

ruanyl previously approved these changes Oct 1, 2024

View reviewed changes

wanglam added 3 commits October 2, 2024 09:45

Merge branch 'main' into refactor-workspace-creation-use-case-selector

a50d335

Change back to "Analytics"

e07c0ee

Signed-off-by: Lin Wang <wonglam@amazon.com>

Add all features suffix for all use case

a220115

Signed-off-by: Lin Wang <wonglam@amazon.com>

wanglam dismissed ruanyl’s stale review via a220115 October 2, 2024 03:00

Merge branch 'main' into refactor-workspace-creation-use-case-selector

27e32ce

SuZhou-Joe added backport 2.x workspace labels Oct 2, 2024

wanglam added 2 commits October 2, 2024 12:05

Merge branch 'main' into refactor-workspace-creation-use-case-selector

178b1ef

Fix failed unit tests

681690d

Signed-off-by: Lin Wang <wonglam@amazon.com>

Hailong-am reviewed Oct 2, 2024

View reviewed changes

Hailong-am previously approved these changes Oct 2, 2024

View reviewed changes

wanglam added 2 commits October 2, 2024 14:20

Filter out getting started links

ebc1e85

Signed-off-by: Lin Wang <wonglam@amazon.com>

Renaming isFlyoutVisible to isUseCaseFlyoutVisible

83bc3cf

Signed-off-by: Lin Wang <wonglam@amazon.com>

wanglam dismissed Hailong-am’s stale review via 83bc3cf October 2, 2024 06:21

Merge branch 'main' into refactor-workspace-creation-use-case-selector

0ba9f44

SuZhou-Joe approved these changes Oct 2, 2024

View reviewed changes

Hailong-am approved these changes Oct 2, 2024

View reviewed changes

SuZhou-Joe merged commit 7b5a379 into opensearch-project:main Oct 2, 2024
66 of 67 checks passed

opensearch-trigger-bot bot mentioned this pull request Oct 2, 2024

[Backport 2.x] [Workspace]Refactor use case selector in workspace creation page #8444

Merged

wanglam mentioned this pull request Oct 2, 2024

[Workspace]Fix use case hidden features not accessible #8445

Merged

7 tasks

ananzh added the v2.18.0 label Oct 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Workspace]Refactor use case selector in workspace creation page #8413

[Workspace]Refactor use case selector in workspace creation page #8413

wanglam commented Oct 1, 2024 •

edited

Loading

codecov bot commented Oct 1, 2024 •

edited

Loading

ruanyl left a comment

ruanyl Oct 1, 2024

wanglam Oct 2, 2024

ruanyl Oct 1, 2024

wanglam Oct 2, 2024

ruanyl Oct 1, 2024

wanglam Oct 2, 2024

Hailong-am Oct 1, 2024

wanglam Oct 2, 2024

wanglam commented Oct 2, 2024

Hailong-am Oct 2, 2024

Hailong-am Oct 2, 2024

wanglam Oct 2, 2024

Hailong-am Oct 2, 2024

	defaultMessage: 'Features included:',
	defaultMessage: 'Features included',

[Workspace]Refactor use case selector in workspace creation page #8413

[Workspace]Refactor use case selector in workspace creation page #8413

Conversation

wanglam commented Oct 1, 2024 • edited Loading

Description

Screenshot

Testing the changes

Changelog

Check List

codecov bot commented Oct 1, 2024 • edited Loading

Codecov Report

ruanyl left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wanglam commented Oct 2, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

wanglam commented Oct 1, 2024 •

edited

Loading

codecov bot commented Oct 1, 2024 •

edited

Loading