Skip to content

Improve Player View Edit Form UX and Fix Application Settings#689

Merged
sei-tspencer merged 5 commits intomainfrom
chore/improve-view-edit-field-labels
Mar 17, 2026
Merged

Improve Player View Edit Form UX and Fix Application Settings#689
sei-tspencer merged 5 commits intomainfrom
chore/improve-view-edit-field-labels

Conversation

@sei-awelle
Copy link
Copy Markdown
Contributor

@sei-awelle sei-awelle commented Mar 16, 2026

This PR improves the user experience in the Player view edit form by simplifying field labels, adding better validation and feedback for file uploads, and fixing a long-standing bug with application settings dropdowns.

Changes

Simplified Field Labels

  • Changed all form field labels to simple, clear titles:
    • View Information: "Name (required)", "Description (required)", "Status"
    • Applications: "Application Name", "Application URL", "Icon Path", "Embeddable", "Load in Background", "Application Template"
  • Removed verbose, complex descriptions from labels
  • Labels now float to the top when focused, consistent with Material Design patterns

Default Team Badge

  • Added "DEFAULT" badge to the team that is set as the view's default team
  • Badge styled to match the template badge on the views page
  • Uses Material theme colors (--mat-sys-primary-container)

File Upload Team Selection Improvements

  • Visual Feedback: Added red warning message "At least one team must be selected" when no teams are selected
  • Button Clarity: Changed button text from "Upload File" to "Save Changes and Upload File" to make it clear that clicking is required
  • Validation: Upload button is disabled when no teams are selected
  • Better UX: Users can now clear all teams in the UI without triggering 500 errors
  • Smart Saving: Changes are only saved to the server when at least one team is selected

Fixed Application Settings Dropdowns Toggling Bug

  • Fixed 5+ year old bug: Removed [(value)]="selected" binding that caused all dropdowns to be linked together
  • Previously, changing "Embeddable" would incorrectly update "Load in Background" and vice versa
  • Each dropdown now only uses [(ngModel)] for its specific property
  • Also fixes NG0100 ExpressionChangedAfterItHasBeenCheckedError

Testing

  • Test selecting and deselecting teams for file uploads
  • Verify warning message appears when no teams selected
  • Verify upload button is disabled when no teams selected
  • Test "Select All Teams" checkbox functionality
  • Verify DEFAULT badge appears on default team in team list
  • Test changing Embeddable, Load in Background, and Application Template settings independently
  • Verify settings no longer affect each other when changed

@sei-awelle
Simplify application field labels in view edit
5c97a30 
- Change application field labels to simple titles
- Application Name, Application URL, Icon Path, etc.
@sei-awelle
Improve view edit form labels and file upload UX
aa88be1 
- Simplify view information field labels to basic titles
- Add DEFAULT badge to default team in team list
- Add team selection validation for file uploads
- Show red warning when no teams selected for files
- Change upload button to 'Save Changes and Upload File'
- Disable upload button when no teams selected
- Allow clearing teams in UI without server errors
- Only save to server when at least one team is selected
@sei-awelle
Fix application settings dropdowns toggling each other
bb9bce7 
- Remove [(value)]="selected" binding from all dropdowns
- Each dropdown now only uses [(ngModel)] for its specific property
- Fixes issue where changing Embeddable would affect Load in Background
- Simplify save methods to avoid change detection errors
- Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError
@sei-awelle sei-awelle requested a review from a team as a code owner March 16, 2026 19:11
sei-aschlackman
sei-aschlackman requested changes Mar 16, 2026
View reviewed changes
Comment thread src/app/components/admin-app/admin-view-search/admin-view-edit/admin-view-edit.component.html Outdated
@sei-awelle
Improve file upload UX to match team section pattern
a0af3f6 
- Restructure upload section as expansion panel (like teams)
- Add file icon before filename in panel title
- Move 'Add New File' button to always be visible at top
- Match team selection layout to existing uploaded files
- Change label to 'Teams with Access'
- Add validation warning when no teams selected
- Position Cancel and Upload buttons at bottom
@sei-awelle
Convert application template fields to use mat-label
11ca78e 
- Change from placeholder to mat-label for Name, URL, Icon Path
- Consistent with other form fields across the application
@sei-tspencer sei-tspencer merged commit 2eebb71 into main Mar 17, 2026
4 checks passed
@sei-tspencer sei-tspencer deleted the chore/improve-view-edit-field-labels branch March 17, 2026 16:21
sei-tspencer added a commit that referenced this pull request Apr 9, 2026
@sei-tspencer @sei-awelle
@claude @sei-jbooz
Add classification banner 2 (#699)
23cd8fe 
* Improve Player View Edit Form UX and Fix Application Settings (#689)

* Simplify application field labels in view edit

- Change application field labels to simple titles
- Application Name, Application URL, Icon Path, etc.

* Improve view edit form labels and file upload UX

- Simplify view information field labels to basic titles
- Add DEFAULT badge to default team in team list
- Add team selection validation for file uploads
- Show red warning when no teams selected for files
- Change upload button to 'Save Changes and Upload File'
- Disable upload button when no teams selected
- Allow clearing teams in UI without server errors
- Only save to server when at least one team is selected

* Fix application settings dropdowns toggling each other

- Remove [(value)]="selected" binding from all dropdowns
- Each dropdown now only uses [(ngModel)] for its specific property
- Fixes issue where changing Embeddable would affect Load in Background
- Simplify save methods to avoid change detection errors
- Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError

* Improve file upload UX to match team section pattern

- Restructure upload section as expansion panel (like teams)
- Add file icon before filename in panel title
- Move 'Add New File' button to always be visible at top
- Match team selection layout to existing uploaded files
- Change label to 'Teams with Access'
- Add validation warning when no teams selected
- Position Cancel and Upload buttons at bottom

* Convert application template fields to use mat-label

- Change from placeholder to mat-label for Name, URL, Icon Path
- Consistent with other form fields across the application

* labels added (#692)

* Chore/auto version update (#694)

* chore: configure automatic version updates via reusable workflow

Migrate to the cmu-sei/Crucible-Github-Actions docker-build reusable
workflow @docker-v1 and add versionMode/versionFiles inputs to enable
automatic version bumping on release.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* migrate to cmu-sei/Crucible-Github-Actions/.github/workflows/docker-build.yaml@docker-v1.1.2

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Use v1 tag for docker-build action (#695)

* point to 0.6.0

* lock file

---------

Co-authored-by: Adam Welle <arwelle@cert.org>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Jarrett Booz <89405171+sei-jbooz@users.noreply.github.com>
sei-tspencer added a commit that referenced this pull request Apr 9, 2026
@sei-rkemerer @rkcert1
@sei-aschlackman @sei-tspencer @sei-awelle @claude @sei-jbooz
Add classification header (#700)
64999ae 
* Add classification header to player.ui

* Moved common header bar component outside of router outlet

* Added classification header

* layout fixes

* migrate to application builder

* fix dockerfile path

* add localNPM configuration

* update layout

* fix application bar scrolling

* fix admin roles scrollbars

* Added settings.shared.json to gitignore

* Add classification banner 2 (#699)

* Improve Player View Edit Form UX and Fix Application Settings (#689)

* Simplify application field labels in view edit

- Change application field labels to simple titles
- Application Name, Application URL, Icon Path, etc.

* Improve view edit form labels and file upload UX

- Simplify view information field labels to basic titles
- Add DEFAULT badge to default team in team list
- Add team selection validation for file uploads
- Show red warning when no teams selected for files
- Change upload button to 'Save Changes and Upload File'
- Disable upload button when no teams selected
- Allow clearing teams in UI without server errors
- Only save to server when at least one team is selected

* Fix application settings dropdowns toggling each other

- Remove [(value)]="selected" binding from all dropdowns
- Each dropdown now only uses [(ngModel)] for its specific property
- Fixes issue where changing Embeddable would affect Load in Background
- Simplify save methods to avoid change detection errors
- Fix NG0100 ExpressionChangedAfterItHasBeenCheckedError

* Improve file upload UX to match team section pattern

- Restructure upload section as expansion panel (like teams)
- Add file icon before filename in panel title
- Move 'Add New File' button to always be visible at top
- Match team selection layout to existing uploaded files
- Change label to 'Teams with Access'
- Add validation warning when no teams selected
- Position Cancel and Upload buttons at bottom

* Convert application template fields to use mat-label

- Change from placeholder to mat-label for Name, URL, Icon Path
- Consistent with other form fields across the application

* labels added (#692)

* Chore/auto version update (#694)

* chore: configure automatic version updates via reusable workflow

Migrate to the cmu-sei/Crucible-Github-Actions docker-build reusable
workflow @docker-v1 and add versionMode/versionFiles inputs to enable
automatic version bumping on release.

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

* migrate to cmu-sei/Crucible-Github-Actions/.github/workflows/docker-build.yaml@docker-v1.1.2

---------

Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>

* Use v1 tag for docker-build action (#695)

* point to 0.6.0

* lock file

---------

Co-authored-by: Adam Welle <arwelle@cert.org>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Jarrett Booz <89405171+sei-jbooz@users.noreply.github.com>

* remove --resources-output-path=assets/fonts

---------

Co-authored-by: Robert Kemerer <rkemerer@cert.org>
Co-authored-by: Andrew Schlackman <72105194+sei-aschlackman@users.noreply.github.com>
Co-authored-by: Tim Spencer <72101647+sei-tspencer@users.noreply.github.com>
Co-authored-by: Adam Welle <arwelle@cert.org>
Co-authored-by: Claude Opus 4.6 <noreply@anthropic.com>
Co-authored-by: Jarrett Booz <89405171+sei-jbooz@users.noreply.github.com>
Co-authored-by: sei-tspencer <trspencer@sei.cmu.edu>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@sei-aschlackman sei-aschlackman sei-aschlackman requested changes

Assignees

No one assigned

Labels

None yet

Projects

None yet

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

3 participants

@sei-awelle @sei-aschlackman @sei-tspencer
⚡