feat: update workspace settings page UI

[yuye-aws]

Description

Update the UI for workspace update page.

Issues Resolved

Screenshot

Testing the changes

Check List

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

[codecov-commenter]

Codecov Report

Merging #237 (00502b9) into workspace (dc240eb) will decrease coverage by 5.85%.
The diff coverage is n/a.

@@              Coverage Diff              @@
##           workspace     #237      +/-   ##
=============================================
- Coverage      66.24%   60.40%   -5.85%     
=============================================
  Files           3438     2162    -1276     
  Lines          66264    42118   -24146     
  Branches       10694     7731    -2963     
=============================================
- Hits           43899    25440   -18459     
+ Misses         19757    14988    -4769     
+ Partials        2608     1690     -918     

Flag	Coverage Δ
Linux_1	?
Linux_2	55.42% <ø> (ø)
Linux_3	42.78% <ø> (+<0.01%)	⬆️
Linux_4	?

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

see 1579 files with indirect coverage changes

📣 We’re building smart automated test selection to slash your CI/CD build times. Learn more

[ruanyl]

I'd rename it to PermissionFieldData, that becomes

export type PermissionFieldData = {
  id?: string; 
  modes?: WorkspacePermissionMode[]
}

And in getUserAndGroupPermissions function, I will do

  const userPermissions: PermissionFieldData[] = [];
  const groupPermissions: PermissionFieldData[] = [];

[yuye-aws]

How about declaring both variables in PermissionFieldData and create a new type for editing permission data:
type PermissionEditingData = Array<Partial<PermissionFieldData>>;

[ruanyl]

I'd rename getUnsavedPermissionsCount

[ruanyl]

I will simplify it in this way:

Convert the original form data: initialFormData.permissions which type is UserPermissionSetting to a data structure:

Map<string, string>

The key is ${type}/${userId} or ${type}/${groupName}, for example:

user key: "user/u123"
group key: "group/g123"

The value is a merge of modes: modes.join('/'), for example read/library_read

Then I can simply iterate currentFormData.groupPermissions and currentFormData.userPermissions to find those changed/added/deleted

[yuye-aws]

Thanks, I will implement your idea. I just have two thoughts:

1. Since I treat user permissions and group permissions separately, the key for the map only needs the id.
2. Given that read/library_read and library_read/read should be considered equal, I will use getPermissionModeId as the value for the map.