Rebrand: asset manager - #74185
Conversation
…for delete confirmation
There was a problem hiding this comment.
Pull request overview
Rebrands the legacy asset manager surfaces (general asset manager, image picker, sound picker) by swapping legacy controls and hard-coded styles for MUI components and semantic design tokens, while keeping the underlying dialog/tabs architecture intact.
Changes:
- Converted multiple asset manager UI elements (buttons, typography, icons/spinners) to MUI +
FontAwesomeV6Icon. - Replaced hard-coded colors with semantic CSS variables and moved some row styling into a scoped CSS module.
- Updated unit tests to assert against new component structure (aria-labels, MUI buttons,
FontAwesomeV6Icon).
Reviewed changes
Copilot reviewed 21 out of 21 changed files in this pull request and generated 2 comments.
Show a summary per file
| File | Description |
|---|---|
| apps/test/unit/code-studio/components/SoundListEntryTest.js | Updates assertions to target play/pause via aria-labels. |
| apps/test/unit/code-studio/components/SoundLibraryTest.js | Updates click simulation to find the new MUI “Choose” button. |
| apps/test/unit/code-studio/components/AssetManagerTest.js | Updates spinner assertions to use FontAwesomeV6Icon props instead of <i> classes. |
| apps/style/applab/style.scss | Removes globally-scoped .assetRow styling now handled via a module. |
| apps/src/code-studio/components/SoundPicker.jsx | Moves headings/warnings to MUI Typography and semantic tokens. |
| apps/src/code-studio/components/SoundListEntry.module.scss | Replaces hard-coded colors and removes now-unneeded font sizing. |
| apps/src/code-studio/components/SoundListEntry.jsx | Converts play/pause control + text styling to MUI + FontAwesome v6. |
| apps/src/code-studio/components/SoundLibrary.jsx | Converts “Choose” button to MUI and updates colors to semantic tokens. |
| apps/src/code-studio/components/SoundCategory.jsx | Updates category styling to semantic tokens. |
| apps/src/code-studio/components/ImageURLInput.jsx | Replaces legacy prompt with DS TextField + MUI button/typography. |
| apps/src/code-studio/components/ImagePicker.jsx | Converts title/warning typography and swaps hard-coded colors for semantic tokens. |
| apps/src/code-studio/components/IconListEntry.jsx | Converts text rendering to MUI Typography and uses semantic highlight colors. |
| apps/src/code-studio/components/IconList.jsx | Wraps “no icons found” in MUI Typography. |
| apps/src/code-studio/components/Icon.jsx | Sets semantic icon color. |
| apps/src/code-studio/components/AudioRecorder.jsx | Converts controls to DS TextField + MUI buttons + FontAwesome v6. |
| apps/src/code-studio/components/AssetUploader.jsx | Converts upload button to MUI + FontAwesome v6. |
| apps/src/code-studio/components/AssetThumbnail.jsx | Converts default/audio thumbnails to FontAwesome v6 + MUI IconButton and semantic tokens. |
| apps/src/code-studio/components/AssetRow.module.scss | Introduces scoped row chrome (border/hover/last-child). |
| apps/src/code-studio/components/AssetRow.jsx | Converts row actions/text to MUI, uses scoped row styling module, updates spinner/delete icons. |
| apps/src/code-studio/components/AssetManager.jsx | Converts spinners and empty/error text to MUI Typography + FontAwesome v6. |
| apps/src/code-studio/components/AddAssetButtonRow.jsx | Converts record button/status text to MUI + FontAwesome v6. |
Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
| variant="body2" | ||
| component="span" | ||
| > | ||
| {this.props.statusMessage} |
There was a problem hiding this comment.
It looks like when the status message reaches a certain length, the buttons get squished and tall. Can we limit the width of the status message/mandate the width of the buttons so the buttons always stay 1 line?
There was a problem hiding this comment.
Yeah I saw that, didn't seem overly concerning but I can look into it
| <div style={styles.deleteWarning}> | ||
| <td | ||
| width="250" | ||
| style={{ |
There was a problem hiding this comment.
nit: possible to move this to a css file?
| } | ||
|
|
||
| const styles = { | ||
| root: { |
There was a problem hiding this comment.
nit: since you're changing these inline styles it might be nice to move them into css files (same for other files where you're changing the styles), but totally up to you if you feel like that's in scope!
There was a problem hiding this comment.
If it's ok with you, I'm going to leave these so I don't have to go back and recheck that something regressed from moving these over to css files 😅 . I've got another refactor to do today though so I'll try and move those over!
moshebaricdo
left a comment
moshebaricdo
left a comment
There was a problem hiding this comment.
LGTM! Agree that we can deal (if its even worth the effort) to rework dialogues, tabs, etc at a later time.
Only tiny nit is if we can restrict the width of this text so we don't end up with wrapped-label buttons at times:
|
@moshebaricdo Molly noted the same thing about button squish, fixed! |
Whoops, lol ty!! |
* MuiTypography for dialog title and PII warning * Typography for default upload message, more to do * MUI buttons for upload file and record audio * Use MUI buttons for delete asset and confirmation buttons * Use DSCO colors for hover on row and row divider * Right align delete warning * Use actual Typography header tag for sound picker header * Use typography for various text bits, update spinner * Record audio buttons and input modernized * Moderning "recording" text and icon * Swap file name, size, success message to Typography * Use new purple in play button thumbnail * Fix section dividers, sound category pills, sound category nav * Update header tab colors * Fix up text in "Link to Image" tab * Move image URL input to standard input * Use neutral brand color for icons in icon picker * Bigger trashcan for deleting assets, right padding, vertical padding for delete confirmation * Get row hover for all usages of asset manager * Fix spinner, delete warning color to design system * Use proper button for audio in thumbnail, modernize thumbnail icons * Semantic colors and icons in sound list * Typographic and semantic colors for icon search * Fix colors, spacing of underage warnig, button for choose sound * Fix tests * Use aria-label instead of deep props * Potential fix for pull request finding Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com> * Fix UI tests with class names * Do not shrink buttons * Move confirm delete styling to scss * Fix delete button hover --------- Co-authored-by: Copilot Autofix powered by AI <175728472+Copilot@users.noreply.github.com>
Rebrands our asset manager, which is used across a variety of legacy labs (App Lab, Java Lab, etc.)
It mostly converts buttons to MUI buttons, text to MUI typography, and hard coded colors to semantic ones.
The work is slightly confusing, because the "asset manager" (used across file types when you select "Manage Asset" via the settings cog in App Lab and other labs) also is scoped to images-only for use in App Lab's design tab, and a sound-specific version is used as well.
It does not move the entire dialog off our our legacy component. It also does not convert the bespoke tabs that are used in the component to a more modern equivalent.
I've included three videos of the new experience (one for each of the types of "asset manager" mentioned above) because there are lot of different screens affected here.
General Asset Manager
Asset.Manager.mov
Image Picker
Image.Picker.mov
Sound Picker
Sound.Picker.mov
Links
Testing story
Tested manually (see videos above).