Conversation
…tring' to 'ReactNode'
…pload buttons with new tooltip - Add support for 'webStudioDisableDistributionAndSales' flag. - Disable 'Distribute & Mint Song' toggle when flag is enabled. - Disable 'Upload' button when flag is enabled. - Show 'OfficialStatementCTA' tooltip for new flag (takes precedence over old flag). - Maintain backward compatibility with 'webStudioDisableTrackDistributionAndMinting'.
|
Visit the studio preview URL for this PR 🚀 : https://952.artist.preview.newm.io/ |
There was a problem hiding this comment.
Pull request overview
This PR implements UI-level blocking for the song upload flow when the webStudioDisableDistributionAndSales feature flag is enabled, as part of NEWM Studio's service sunset. The changes disable the "Distribute & Mint Song" toggle and "Upload" button, displaying tooltips with an official statement when users hover over these disabled controls.
Changes:
- Updated
SwitchInputandSwitchInputFieldto acceptReactNodefortoggleTooltipTextprop (instead of juststring) to support richer tooltip content - Modified
BasicSongDetailsto check both feature flags and display appropriate tooltip content, with the new flag taking precedence - Added
OfficialStatementCTAcomponent to barrel exports
Reviewed changes
Copilot reviewed 4 out of 4 changed files in this pull request and generated 2 comments.
| File | Description |
|---|---|
packages/elements/src/lib/SwitchInput.tsx |
Updated toggleTooltipText prop type from string to ReactNode; reorganized imports |
packages/elements/src/lib/form/SwitchInputField.tsx |
Updated toggleTooltipText prop type to match SwitchInput interface; reorganized imports |
apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsx |
Added feature flag logic, disabled toggle and button when distribution is disabled, wrapped Upload button with Tooltip, implemented tooltip content with precedence logic |
apps/studio/src/components/index.ts |
Added OfficialStatementCTA to exports |
💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.
| <Tooltip title={ tooltipContent }> | ||
| <span> | ||
| <Button | ||
| disabled={ isSubmitDisabled } | ||
| isLoading={ isSubmitting } | ||
| type="submit" | ||
| width={ | ||
| windowWidth && windowWidth > theme.breakpoints.values.md | ||
| ? "compact" | ||
| : "default" | ||
| } | ||
| > | ||
| { isMintingVisible ? "Next" : isInEditMode ? "Save" : "Upload" } | ||
| </Button> | ||
| </span> | ||
| </Tooltip> |
There was a problem hiding this comment.
The tooltip appears on the Upload/Save button whenever a distribution flag is enabled, even when the button itself is not disabled. This can occur when editing an existing song with isMinting: false after agreeing to cover art guidelines. In this scenario, the button is clickable but shows a tooltip about distribution being disabled, which may confuse users. Consider only displaying the tooltip on the button when it's actually disabled due to distribution restrictions by checking if isSubmitDisabled is true and the disabled state is caused by isDistributionDisabled.
| <Tooltip title={ tooltipContent }> | |
| <span> | |
| <Button | |
| disabled={ isSubmitDisabled } | |
| isLoading={ isSubmitting } | |
| type="submit" | |
| width={ | |
| windowWidth && windowWidth > theme.breakpoints.values.md | |
| ? "compact" | |
| : "default" | |
| } | |
| > | |
| { isMintingVisible ? "Next" : isInEditMode ? "Save" : "Upload" } | |
| </Button> | |
| </span> | |
| </Tooltip> | |
| { isSubmitDisabled && isDistributionDisabled ? ( | |
| <Tooltip title={ tooltipContent }> | |
| <span> | |
| <Button | |
| disabled={ isSubmitDisabled } | |
| isLoading={ isSubmitting } | |
| type="submit" | |
| width={ | |
| windowWidth && windowWidth > theme.breakpoints.values.md | |
| ? "compact" | |
| : "default" | |
| } | |
| > | |
| { isMintingVisible ? "Next" : isInEditMode ? "Save" : "Upload" } | |
| </Button> | |
| </span> | |
| </Tooltip> | |
| ) : ( | |
| <Button | |
| disabled={ isSubmitDisabled } | |
| isLoading={ isSubmitting } | |
| type="submit" | |
| width={ | |
| windowWidth && windowWidth > theme.breakpoints.values.md | |
| ? "compact" | |
| : "default" | |
| } | |
| > | |
| { isMintingVisible ? "Next" : isInEditMode ? "Save" : "Upload" } | |
| </Button> | |
| ) } |
apps/studio/src/components/index.ts
Outdated
| export { default as ViewPDF } from "./ViewPDF"; | ||
| export { default as WalletEnvMismatchModal } from "./WalletEnvMismatchModal"; | ||
| export { default as InfoBanner } from "./InfoBanner"; | ||
| export { default as OfficialStatementCTA } from "./OfficialStatementCTA"; |
There was a problem hiding this comment.
The export for OfficialStatementCTA is added at the end of the file, but according to the comment on line 1, exports should be in alphabetical order by component name. OfficialStatementCTA should be placed between NEWMLogo (line 19) and Owners (line 20). Note that there are other exports that are also out of alphabetical order in this file (e.g., AppleLogin and GoogleLogin after DistributionPricingDialog), but those are pre-existing issues.
Circular Dependency Issue Discovered @dmkirshonDuring development, reordering exports in
|
1 participant
Pull Request — Issue STUD-577
Overview
Files Summary
Modified (4)
apps/studio/src/pages/home/uploadSong/BasicSongDetails.tsxwebStudioDisableDistributionAndSalesfeature flagisDistributionDisabled)isSubmitDisabledlogic)OfficialStatementCTAcomponent over old flag's string tooltippackages/elements/src/lib/SwitchInput.tsxtoggleTooltipTextprop type fromstringtoReactNodeto support JSX tooltip contentpackages/elements/src/lib/form/SwitchInputField.tsxtoggleTooltipTextprop type fromstringtoReactNodeto matchSwitchInputinterfaceFapps/studio/src/components/index.tsOfficialStatementCTAcomponent to barrel exportsImpact
webStudioDisableDistributionAndSalesis enabled, users cannot toggle on distribution/minting or submit the upload form. Tooltips provide clear messaging about the service discontinuation with a link to the official statement.webStudioDisableTrackDistributionAndMintingflag continues to work as before. When both flags are enabled, the new flag's tooltip takes precedence.toggleTooltipTextprop inSwitchInputandSwitchInputFieldnow acceptsReactNodeinstead of juststring, enabling richer tooltip content (backward compatible sinceReactNodeincludesstring)./home/upload-song) is blocked as part of STUD-576 changes, so users won't be able to reach this page. However, sinceUploadSongcomponent usesBasicSongDetails, the switch/toggle and buttons will still be disabled and show tooltips as a defense-in-depth measure.Testing
Manual Testing:
webStudioDisableDistributionAndSalesis enabledOfficialStatementCTAtooltip on hover when new flag is enabledwebStudioDisableTrackDistributionAndMintingis enabledwebStudioDisableTrackDistributionAndMintingflagComponent Testing:
SwitchInputandSwitchInputFieldaccept both string and ReactNode fortoggleTooltipTextpropRelated Issues
Dependencies
OfficialStatementCTAcomponent (already implemented in previous PRs)NEWM_STUDIO_OFFICIAL_STATEMENT_URLconstant fromcommon/constants.tsDemo
webStudioDisableDistributionAndSalesis enabled:https://newm.io/sunset/for official statementSTUD-577-demo.mp4
Additional Notes
webStudioDisableDistributionAndSalesflag takes precedence overwebStudioDisableTrackDistributionAndMintingfor tooltip content, but both flags contribute to disabling the controls (OR logic)./home/upload-song) is blocked as part of STUD-576 changes, preventing users from accessing the page. This PR implements UI-level disabling as defense in depth—sinceUploadSongcomponent usesBasicSongDetails, the switch/toggle and buttons will be disabled and show tooltips even if users somehow access the page (e.g., cached page, or edge cases).stringtoReactNodefortoggleTooltipTextis backward compatible sinceReactNodeincludesstringin its type definition.webStudioDisableTrackDistributionAndMintingflag is disabled, only the new flag will be active for this functionality.Other Issues
Circular Dependency Issue Discovered: During development, reordering exports in
apps/studio/src/components/index.ts(alphabetically) exposed a pre-existing circular dependency:store.ts→modules/session→slice.ts→api/actions.ts→modules/session(barrel), causing "Cannot access 'sessionReducer' before initialization" errors. The reorder was rolled back to keep this PR scoped.api/actions.tsandapi/utils.tsto importNewmAuthResponsefrom../modules/session/typesinstead of../modules/session(barrel) to break the cycle. Action Item: Open a new ticket to fix this circular dependency properly so barrel exports can be safely reordered in the future. --> Stop the dev server -> Delete .nx cache folder (or run nx reset) -> Restart the dev server--END--