[Workspace]Add WorkspaceCollaboratorTypesService and AddCollaboratorsModal #8486

wanglam · 2024-10-04T04:39:13Z

Description

This PR is for adding WorkspaceCollaboratorTypesService to allow set customized collaborator types. These types will be used in the workspace settings refactor PR. It allow customized different UI when adding collaborators in workspace detail page. This PR added a setCollaboratorTypes method in workspace setup return value to customize the collaborator using interface below.

export interface WorkspaceCollaboratorType {
  id: string;
  name: string;
  buttonLabel: string;
  getDisplayedType?: (collaborator: WorkspaceCollaborator) => boolean;
  onAdd: ({ onAddCollaborators }: OnAddOptions) => Promise<void>;
}

export interface WorkspacePluginSetup {
  setCollaboratorTypes: (collaboratorTypes: WorkspaceCollaboratorType[]) => void;
  getAddCollaboratorsModal: () => typeof AddCollaboratorsModal;
}

Here are some examples to register collaborator types:
https://github.com/opensearch-project/OpenSearch-Dashboards/blob/0ea1c3462f20099b4f02c61c7092d2118262f8ea/src/plugins/workspace/public/register_default_collaborator_types.tsx

Screenshot

AddCollaboratorsModal for adding user
AddCollaboratorsModal for adding group

Testing the changes

Can refer new added testing cases in files below:

src/plugins/workspace/public/plugin.test.ts
src/plugins/workspace/public/services/workspace_collaborator_types_service.test.ts
src/plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.test.tsx
src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborator_input.test.tsx
src/plugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.test.tsx

Changelog

feat: [Workspace]Add WorkspaceCollaboratorTypesService and AddCollaboratorsModal

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 <[email protected]>

codecov · 2024-10-04T05:06:02Z

Codecov Report

Attention: Patch coverage is 96.61017% with 2 lines in your changes missing coverage. Please review.

Project coverage is 60.95%. Comparing base (57eea79) to head (e9c7f62).
Report is 103 commits behind head on main.

Files with missing lines	Patch %	Lines
...llaborators_modal/workspace_collaborator_input.tsx	92.85%	0 Missing and 1 partial ⚠️
...laborators_modal/workspace_collaborators_panel.tsx	93.75%	0 Missing and 1 partial ⚠️

Additional details and impacted files

@@           Coverage Diff           @@
##             main    #8486   +/-   ##
=======================================
  Coverage   60.94%   60.95%           
=======================================
  Files        3760     3766    +6     
  Lines       89301    89359   +58     
  Branches    13969    13977    +8     
=======================================
+ Hits        54426    54468   +42     
- Misses      31480    31493   +13     
- Partials     3395     3398    +3

Flag	Coverage Δ
Linux_1	`28.96% <96.61%> (+0.05%)`	⬆️
Linux_2	`56.30% <ø> (ø)`
Linux_3	`37.76% <ø> (-0.01%)`	⬇️
Linux_4	`29.93% <ø> (ø)`
Windows_1	`28.98% <96.61%> (+0.04%)`	⬆️
Windows_2	`56.25% <ø> (ø)`
Windows_3	`37.76% <ø> (ø)`
Windows_4	`29.93% <ø> (ø)`

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.

Signed-off-by: Lin Wang <[email protected]>

ruanyl · 2024-10-04T06:33:09Z

src/plugins/workspace/public/services/workspace_collaborator_types_service.ts

+export interface WorkspaceCollaboratorType {
+  id: string;
+  name: string;
+  pluralName: string;
+  // Will be assigned to this type in the final ACL permissions object
+  permissionSettingType: WorkspaceCollaboratorPermissionSettingType;
+  modal: {
+    title: string;
+    description?: string;
+    // Will use name with ID suffix for fallback
+    inputLabel?: string;
+    inputDescription?: string;
+    // Will use name with ID suffix for fallback
+    inputPlaceholder?: string;
+  };
+  instruction?: {
+    title: string;
+    detail: string;
+    link?: string;
+  };
+  // To match wether passed collaborator match this collaborator type
+  collaboratorMatcher?: (collaborator: {
+    type: WorkspaceCollaboratorPermissionSettingType;
+    userOrGroupId: string;
+  }) => boolean;
+}


Suggested change

export interface WorkspaceCollaboratorType {

id: string;

name: string;

pluralName: string;

// Will be assigned to this type in the final ACL permissions object

permissionSettingType: WorkspaceCollaboratorPermissionSettingType;

modal: {

title: string;

description?: string;

// Will use name with ID suffix for fallback

inputLabel?: string;

inputDescription?: string;

// Will use name with ID suffix for fallback

inputPlaceholder?: string;

};

instruction?: {

title: string;

detail: string;

link?: string;

};

// To match wether passed collaborator match this collaborator type

collaboratorMatcher?: (collaborator: {

type: WorkspaceCollaboratorPermissionSettingType;

userOrGroupId: string;

}) => boolean;

}

export interface WorkspaceCollaboratorType {

id: string;

name: string;

onAdd: () => any

}

// `onAdd` function will be called when the dropdown menu been clicked

// It will show a modal, for example something like

{

onAdd: () => coreStart.overlays.openModal(mount(<AddCollaboratorModal permissionType={} title="" {...} />))

}

This way, we maximize the flexibility of how the add collaborator modal should be look like, at the same time, it keeps the API simple. What do you think?

I guess collaboratorMatcher is needed either way because it will be used to populate the type column in collaborator table.

If we are gonna to use onAdd, I guess we need to add some callback functions like

onAdd: (props: { onChange: (value: valueTypeForCollaborator) => void }) => ...

Thanks @SuZhou-Joe what will onChange do?

I think valueTypeForCollaborator should be an array. Will refactor code like this and include the AddCollaboratorModal in this PR.

If we use a modal to maximize the flexibility, we need a callback to tell the parent component that user has added a user id. Or I do not know how we can communicate with parent component.

src/plugins/workspace/public/services/workspace_collaborator_types_service.ts

Signed-off-by: Lin Wang <[email protected]>

wanglam · 2024-10-04T11:32:16Z

Hi @ruanyl @SuZhou-Joe , I've refactor code base our discussions. Could you help me take a look? Thank you.

ruanyl

Thanks for the quick updates! It looks good to me, I left a few minor comments

...plugins/workspace/public/components/add_collaborators_modal/add_collaborators_modal.test.tsx

ruanyl · 2024-10-04T12:25:17Z

...lugins/workspace/public/components/add_collaborators_modal/workspace_collaborators_panel.tsx

+        </>
+      )}
+      {collaborators.map((item, index) => (
+        <React.Fragment key={item.id}>


It looks like this React.Fragment is unnecessary

ruanyl · 2024-10-04T12:34:13Z

src/plugins/workspace/public/register_default_collaborator_types.tsx

+          overlayRef?.close();
+        }}
+        onAddCollaborators={async (collaborators) => {
+          await onAddCollaborators(collaborators);


Shall we try/catch here? perhaps could be a future improvement

What should we do after catch an error? Do we need to prevent the modal close? Add a try catch would be better, but it's up to the collaborator type register. I think we can added it when we need it.

ruanyl · 2024-10-04T12:36:49Z

src/plugins/workspace/public/plugin.ts

+      setCollaboratorTypes: (types: WorkspaceCollaboratorType[]) => {
+        this.collaboratorTypes.setTypes(types);
+      },
+      getAddCollaboratorsModal: () => AddCollaboratorsModal,


Shall we follow this pattern? It looks when plugin expose components, it exposes under ui property

Suggested change

getAddCollaboratorsModal: () => AddCollaboratorsModal,

ui: { AddCollaboratorsModal },

ruanyl · 2024-10-04T12:38:14Z

src/plugins/workspace/public/plugin.ts

+      setCollaboratorTypes: (types: WorkspaceCollaboratorType[]) => {
+        this.collaboratorTypes.setTypes(types);
+      },


I think we can expose the entire collaboratorTypes service.

Suggested change

setCollaboratorTypes: (types: WorkspaceCollaboratorType[]) => {

this.collaboratorTypes.setTypes(types);

},

collaboratorTypes: this.collaboratorTypes;

},

…l/add_collaborators_modal.test.tsx Co-authored-by: Yulong Ruan <[email protected]> Signed-off-by: Lin Wang <[email protected]>

Signed-off-by: Lin Wang <[email protected]>

…Modal (#8486) (cherry picked from commit d3ddf91) Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

…Modal (#8486) (#8499) (cherry picked from commit d3ddf91) 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>

Add WorkspaceCollaboratorTypesService

a1ab782

Signed-off-by: Lin Wang <[email protected]>

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

opensearch-changeset-bot bot and others added 2 commits October 4, 2024 04:39

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

0d8685d

Merge branch 'main' into add-workspace-collaborator-types-service

51b8ffb

wanglam marked this pull request as ready for review October 4, 2024 06:05

wanglam added 2 commits October 4, 2024 14:12

Export WorkspacePluginSetup

9d3f141

Signed-off-by: Lin Wang <[email protected]>

Merge branch 'main' into add-workspace-collaborator-types-service

b995abd

SuZhou-Joe previously approved these changes Oct 4, 2024

View reviewed changes

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

ruanyl reviewed Oct 4, 2024

View reviewed changes

Refactor setCollaboratorTypes and add getAddCollaboratorsModal

15a0e50

Signed-off-by: Lin Wang <[email protected]>

wanglam dismissed SuZhou-Joe’s stale review via 15a0e50 October 4, 2024 11:15

Fix duplicate i18n key

97f0386

Signed-off-by: Lin Wang <[email protected]>

wanglam changed the title ~~[Workspace]Add WorkspaceCollaboratorTypesService~~ [Workspace]Add WorkspaceCollaboratorTypesService and AddCollaboratorsModal Oct 4, 2024

wanglam and others added 3 commits October 4, 2024 19:25

Update return type for getDisplayedType

0ea1c34

Signed-off-by: Lin Wang <[email protected]>

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

685625b

Merge branch 'main' into add-workspace-collaborator-types-service

3a87951

ruanyl reviewed Oct 4, 2024

View reviewed changes

wanglam and others added 2 commits October 4, 2024 22:03

Update src/plugins/workspace/public/components/add_collaborators_moda…

bab3cf9

…l/add_collaborators_modal.test.tsx Co-authored-by: Yulong Ruan <[email protected]> Signed-off-by: Lin Wang <[email protected]>

Merge branch 'main' into add-workspace-collaborator-types-service

ac8aa11

SuZhou-Joe previously approved these changes Oct 4, 2024

View reviewed changes

Address PR comments

e9c7f62

Signed-off-by: Lin Wang <[email protected]>

wanglam dismissed SuZhou-Joe’s stale review via e9c7f62 October 4, 2024 14:34

SuZhou-Joe approved these changes Oct 4, 2024

View reviewed changes

ruanyl approved these changes Oct 4, 2024

View reviewed changes

ruanyl merged commit d3ddf91 into opensearch-project:main Oct 5, 2024
67 checks passed

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

[Backport 2.x] [Workspace]Add WorkspaceCollaboratorTypesService and AddCollaboratorsModal #8499

Merged

ananzh added the v2.18.0 label Oct 30, 2024

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[Workspace]Add WorkspaceCollaboratorTypesService and AddCollaboratorsModal #8486

[Workspace]Add WorkspaceCollaboratorTypesService and AddCollaboratorsModal #8486

wanglam commented Oct 4, 2024 •

edited

Loading

codecov bot commented Oct 4, 2024 •

edited

Loading

ruanyl Oct 4, 2024

SuZhou-Joe Oct 4, 2024

ruanyl Oct 4, 2024

wanglam Oct 4, 2024

SuZhou-Joe Oct 4, 2024

wanglam commented Oct 4, 2024

ruanyl left a comment

ruanyl Oct 4, 2024

ruanyl Oct 4, 2024

wanglam Oct 4, 2024

ruanyl Oct 4, 2024

ruanyl Oct 4, 2024

	getAddCollaboratorsModal: () => AddCollaboratorsModal,
	ui: { AddCollaboratorsModal },

[Workspace]Add WorkspaceCollaboratorTypesService and AddCollaboratorsModal #8486

[Workspace]Add WorkspaceCollaboratorTypesService and AddCollaboratorsModal #8486

Conversation

wanglam commented Oct 4, 2024 • edited Loading

Description

Screenshot

Testing the changes

Changelog

Check List

codecov bot commented Oct 4, 2024 • edited Loading

Codecov Report

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 4, 2024

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

wanglam commented Oct 4, 2024 •

edited

Loading

codecov bot commented Oct 4, 2024 •

edited

Loading