Improve organization members filter

[gtsiolis]

Description

UX updates for the organization members page, improving the role filter.

Extracting some first ideas from the relevant frame (internal). Cc @loujaybee

Next steps could include:

1. Dropping the table header
2. Removing the joined date information and move that to an audit log
3. Move the role switch to the context menu to avoid accidental changes and arrow element repetition

Summary generated by Copilot

🤖 Generated by Copilot at 23ef648

Improved the organization dashboard UI and added a role filter feature. The changes in Members.tsx enhance the user experience and clarity of managing team members and their permissions.

BEFORE	AFTER

Related Issue(s)

Fixes #

How to test

Documentation

Preview status

Gitpod was successfully deployed to your preview environment.

• 🏷️ Name - gt-improvec57208e64c
• 🔗 URL - gt-improvec57208e64c.preview.gitpod-dev.com/workspaces.
• 📚 Documentation - See our internal documentation for information on how to interact with your preview environment.
• 📦 Version - gt-improve-org-members-filter-gha.15049

Build Options

Build

• /werft with-werft
  Run the build with werft instead of GHA
• leeway-no-cache
• /werft no-test
  Run Leeway with --dont-test

Publish

• /werft publish-to-npm
• /werft publish-to-jb-marketplace

Installer

• analytics=segment
• with-dedicated-emulation
• workspace-feature-flags
  Add desired feature flags to the end of the line above, space separated

Preview Environment / Integration Tests

• /werft with-local-preview
  If enabled this will build install/preview
• /werft with-preview
• /werft with-large-vm
• /werft with-gce-vm
  If enabled this will create the environment on GCE infra
• with-integration-tests=all
  Valid options are all, workspace, webapp, ide, jetbrains, vscode, ssh. If enabled, with-preview and with-large-vm will be enabled.
• with-monitoring

/hold

[mustard-mh]

UX LGTM, but our logic of loading is incorrect it should show only when we're fetching data.

Right now it will show loading when there's no one in the list, and if I'm the only owner filter with members, it will show loading

gitpod/components/dashboard/src/teams/Members.tsx

Line 165 in 23ef648

{filteredMembers.length === 0 ? (

[gtsiolis]

Ah, nice catch, @mustard-mh. ⚾

We did replace that part in #16417 to avoid showing the No members found message during load time, as we do with other pages like access tokens, etc.

Could you approve to merge this as the described issue is unrelated to the changes here and already existed before the changes? 🏓

I've opened EXP-419 to keep track of this.

[mustard-mh]

LGTM

[gtsiolis]

Thanks, @mustard-mh! 🌮