4c8fcc636a
* fix(ui): improve team sync UX with base DN display and proper group binding (PROJQUAY-6923) the new React UI had several issues with Team Sync: 1. incorrectly displayed "OIDC Group" labels when enabling Team Sync with LDAP or Keystone 2. didn't show base DN context for LDAP, causing user confusion about relative vs absolute DNs 3. "Bound to group" field was empty for LDAP and Keystone synced teams 4. "Last Updated" timestamp showed raw UTC instead of user's local timezone this fix improves the Team Sync user experience: - service-specific modal titles and field labels (LDAP Group DN, Keystone Group ID, OIDC Group Name/Object Id) - displays base DN in LDAP modal with "Relative to:" label to clarify that users should enter relative DNs - extracts and displays bound group for all services (group_dn for LDAP, group_id for Keystone, group_name for OIDC) - formats "Last Updated" timestamp in user's local timezone for better readability changes: - renamed OIDCTeamSyncModal to DirectoryTeamSyncModal for service-agnostic naming - added getServiceDisplayName() and getGroupFieldLabel() helper functions - added base_dn field to ITeamMembersCanSyncResponse interface - updated DirectoryTeamSyncModal to conditionally display base DN with CodeBlock styling - updated useEffect to extract group identifier from all three service configs - integrated formatDate() utility for timestamp localization - updated TeamSyncResource to handle ldap (group_dn) and keystone (group_id) config - updated ManageMembersToolbar to support all services, not just oidc 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-authored-by: Claude <noreply@anthropic.com> Signed-off-by: Brady Pratt <bpratt@redhat.com> * fix(ui): resolve test failures Signed-off-by: Brady Pratt <bpratt@redhat.com> * fix(ui): allow robot accounts to be added to LDAP-synced teams (PROJQUAY-9611) the new React UI prevented adding any members to LDAP-synced teams by hiding the "Add new member" button when pageInReadOnlyMode was true. however, the old Angular UI and backend both support adding robot accounts to synced teams - only regular user membership is read-only. this fix restores feature parity with the Angular UI: - removed pageInReadOnlyMode check from "Add new member" button visibility in ManageMembersToolbar - updated AddNewTeamMemberDrawer to detect team sync status and show only robot accounts in read-only mode - added informational alert explaining that only robot accounts can be added to synced teams - updated drawer title to "Add robot account to team" when in read-only mode the backend already supported this functionality (robot deletion works in read-only mode), and the Angular UI explicitly allowed it with the message: "To add a robot account to this team, enter them above." Co-authored-by: Claude <noreply@anthropic.com> Signed-off-by: Brady Pratt <bpratt@redhat.com> * feat(ui): add automatic polling for team sync status updates (PROJQUAY-6923) when team sync is enabled but hasn't completed its first sync yet, the UI now automatically polls every 5 seconds to check for status updates. this eliminates the need for users to manually refresh the page to see when the sync completes. the polling: - starts automatically when teamSyncInfo.last_updated is null - polls every 5 seconds using React Query's refetchInterval - stops automatically once a valid timestamp is received - follows the existing polling pattern from UseAuthorizedEmails this provides a seamless UX where users see the spinner "Waiting for first sync..." which automatically updates to "11 minutes ago" once the backend sync completes, without any manual intervention. Co-authored-by: Claude <noreply@anthropic.com> --------- Signed-off-by: Brady Pratt <bpratt@redhat.com> Co-authored-by: Claude <noreply@anthropic.com>
Quay UI
UI for Quay based on React and Patternfly framework
Installation
It is assumed that you have a Quay instance running that you can point the UI to. Run the following commands to get started
git clone https://github.com/quay/quay-ui.git
cd quay-ui
npm install
Development
Start the dev server by running
npm start
Runs the app in the development mode.
Open http://localhost:9000 to view it in the browser.
The page will reload if you make edits.
You will also see any lint errors in the console.
By default the UI connects to the quay backend for API. If you don't have
a backend or want to develop without a backend you can set the environment
variable MOCK_API=true before running npm start.
In order for you to use this with a Quay backend, you need to configure CORS on the Quay side.
Add the following to your config.yaml in Quay
CORS_ORIGIN: "http://localhost:9000"
If you are using docker-compose for local development, you can add this to local-dev/stack/config.yaml
in the Quay repo.
Testing
npm test
Launches the test runner in the interactive watch mode.
See the section about running tests for more information.
Integration Tests
Integration tests are ran via Cypress. The URL under test defaults to http://localhost:9000 and can be overriden with the baseUrl parameter in the cypress.config.ts file.
To run tests locally:
- Start the application with
npm start - When application has started run the tests with
npm run test:integration
Building for Production
npm run build
Builds the app for production to the dist folder.
It correctly bundles React in production mode and optimizes the build for the best performance.
The build is minified and the filenames include the hashes. See the section about deployment for more information.