[C-2679] Track Availability Modal Form #3720

amendelsohn · 2023-07-07T23:32:58Z

Description

Track availability subform
Piping logic working to submit values to the final upload
Defaults for each category's expanded sub-fields when selected
Hooked up submit logic for hide remix field (from RemixModalForm)
Moved some files around

Future work:

Collectible gated not thoroughly tested. Need to make wallet with collectible to test with.
Rich preview on main form not implemented. Should be easy.

Note: Apologies for the big review. This turned out to be hairy

Dragons

Lots of logic encapsulated in these fields. Special cases are mostly covered and copied from previous code, but could use a review.

How Has This Been Tested?

Local web

Feature Flags

UPLOAD_REDESIGN_ENABLED

amendelsohn · 2023-07-07T23:35:27Z

packages/web/src/pages/upload-page/fields/CollectibleGatedFields.tsx

+
+  return (
+    <div className={styles.root}>
+      <DropdownInput


Probably need to replace this with a field now that I think of it. Haven't tested this part yet.

The onSelect below might be good enough, but I think I'll need to change the defaultValue at least

yeah ideally we have the input wrapped in the formik setup :) before the end of this epic id like to see us have a canonical DropdownField

audius-infra · 2023-07-07T23:49:20Z

Preview this change https://demo.audius.co/amendel-upload-availability-modal

sliptype

Soooo clean! Nice work, love all the types

sliptype · 2023-07-10T15:34:20Z

packages/web/src/pages/upload-page/fields/HiddenAvailabilityFields.tsx

+  )
+}
+
+const hiddenTrackMetadataMap = {


Maybe:

Suggested change

const hiddenTrackMetadataMap = {

const unlistedTrackMetadataMap = {

for consistency?

Although a more descriptive name might be something like messageByFieldName. Then 76 would look like messageByFieldName[fieldName]

sliptype · 2023-07-10T15:35:13Z

packages/web/src/pages/upload-page/fields/RemixModalForm.tsx

@@ -73,8 +73,8 @@ export type RemixFormValues = {
 */
 export const RemixModalForm = () => {
  // These refer to the field in the outer EditForm
-  const [{ value: hideRemixesValue }, , { setValue: setHideRemixesValue }] =
-    useField(HIDE_REMIXES)
+  const [{ value: showRemixesValue }, , { setValue: setshowRemixesValue }] =


Suggested change

const [{ value: showRemixesValue }, , { setValue: setshowRemixesValue }] =

const [{ value: showRemixesValue }, , { setValue: setShowRemixesValue }] =

sliptype · 2023-07-10T15:40:41Z

packages/web/src/pages/upload-page/fields/TrackAvailabilityModalForm.tsx

+  [FIELD_VISIBILITY]: Nullable<FieldVisibility>
+}
+
+// A modal that allows you to set a track as collectible-gated, special access, or unlisted,


Could make this a jsdoc comment so this description shows up in intellisense

sliptype · 2023-07-10T15:43:03Z

packages/web/src/pages/upload-page/fields/TrackAvailabilityModalForm.tsx

+  )
+
+  return (
+    <Formik<TrackAvailabilityFormValues>


Love that type parameters and react components have the same syntax 🫠

dylanjeffers

next level stuff right here!

dylanjeffers · 2023-07-10T18:23:05Z

packages/web/src/pages/upload-page/fields/CollectibleGatedDescription.tsx

@@ -0,0 +1,64 @@
+import { useCallback } from 'react'


since this isnt a field, would it make sense to have the collectiblegatedfield be a folder to encapsulate the extra logic?

dylanjeffers · 2023-07-10T18:23:18Z

packages/web/src/pages/upload-page/fields/CollectibleGatedDescription.tsx

+
+  const renderContent = useCallback(() => {
+    return hasUnsupportedCollection ? (
+      <div>


nit but probably spans + maybe headings?

oh als, can just make this a computed function, and then dont need to useCallback it since it is called in the render. useCallback only necessary when passing the function in as a prop to keep it stable

dylanjeffers · 2023-07-10T18:24:46Z

packages/web/src/pages/upload-page/fields/CollectibleGatedDescription.tsx

+  learnMore: 'Learn More'
+}
+
+const LEARN_MORE_URL =


we have a file with a bunch of urls, maybe chuck it with those?

dylanjeffers · 2023-07-10T18:26:10Z

packages/web/src/pages/upload-page/fields/CollectibleGatedDescription.tsx

+        type={ButtonType.TEXT}
+        className={styles.learnMoreButton}
+        text={messages.learnMore}
+        onClick={() => window.open(LEARN_MORE_URL, '_blank')}


so youre aware, for the future we have to update our button component to act like a link for a11y and to avoid the window.open

dylanjeffers · 2023-07-10T18:27:13Z

packages/web/src/pages/upload-page/fields/CollectibleGatedFields.tsx

+
+  return (
+    <div className={styles.root}>
+      <DropdownInput


yeah ideally we have the input wrapped in the formik setup :) before the end of this epic id like to see us have a canonical DropdownField

dylanjeffers · 2023-07-10T18:30:07Z

packages/web/src/pages/upload-page/fields/HiddenAvailabilityFields.tsx

+      <span className={styles.switchLabel}>
+        {hiddenTrackMetadataMap[fieldName]}
+      </span>
+      <Switch {...field} />


long term, thinking we should also have a SwitchField that you just have to pass a name into

dylanjeffers · 2023-07-10T18:31:08Z

packages/web/src/pages/upload-page/fields/SpecialAccessFields.module.css

+  fill: var(--neutral-light-4);
+}
+
+.tooltip :global(.ant-tooltip-inner) {


it does feel sad having to hard-code all these random values into .ant tooltip :/

dylanjeffers · 2023-07-10T18:32:08Z

packages/web/src/pages/upload-page/fields/SpecialAccessFields.tsx

+      PREMIUM_CONDITIONS
+    )
+
+  const handleChange = useCallback(


dylanjeffers · 2023-07-10T18:34:11Z

packages/web/src/pages/upload-page/fields/ToggleRowField.tsx

@@ -1,4 +1,4 @@
-import { ComponentProps, PropsWithChildren } from 'react'
+import { ChangeEvent, ComponentProps, PropsWithChildren } from 'react'


the name is a little strange here, usually i name something based off of the semantic html, which in this case seems like a switch? so maybe SwitchRowField?

dylanjeffers · 2023-07-10T18:37:39Z

packages/web/src/pages/upload-page/fields/TrackAvailabilityModalForm.tsx

+    ]
+  )
+
+  return (


gitguardian · 2023-07-10T22:07:20Z

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

Please consider investigating the findings and remediating the incidents. Failure to do so may lead to compromising the associated services or software components.

🔎 Detected hardcoded secret in your pull request

GitGuardian id	Secret	Commit	Filename
1606949	Generic High Entropy Secret	`0014064`	packages/web/.env/.env.prod	View secret

🛠 Guidelines to remediate hardcoded secrets

Understand the implications of revoking this secret by investigating where it is used in your code.
Replace and store your secret safely. Learn here the best practices.
Revoke and rotate this secret.
If possible, rewrite git history. Rewriting git history is not a trivial act. You might completely break other contributing developers' workflow and you risk accidentally deleting legitimate data.

To avoid such incidents in the future consider

following these best practices for managing and storing secrets including API keys and other credentials
install secret detection on pre-commit to catch secret before it leaves your machine and ease remediation.

^{🦉 GitGuardian detects secrets in your source code to help developers and security teams secure the modern development process. You are seeing this because you or someone else with access to this repository has authorized GitGuardian to scan your pull request.

Our GitHub checks need improvements? Share your feedbacks!}

audius-infra · 2023-07-10T22:38:57Z

Preview this change https://demo.audius.co/amendel-upload-availability-modal

* origin/main: (26 commits) [C-1608 C-2750] Fix edit profile/cover photo (#3735) [C-2711] Remove app-store link in force-upgrade for saga (#3737) Pin lerna version (#3738) Update announcement notification style and hover behavior retry (#3736) [CON-765] Default v2 signup and fix local EM (#3730) Update announcement notification style and hover behavior (#3733) Update announcement notification style and hover behavior (#3733) [C-2844] Ensure all tracks fetched on collection page (#3734) Add dev storage bootstrap nodes (#3731) [QA-565] Fix notification overflow bug (#3732) [C-2547] Lineup pagination fixes (#3728) [C-2679] Track Availability Modal Form (#3720) [C-2785] Update collection screen focus effect to fetch lineup (#3722) Make embed not fetch metadata from CN (#3710) [C-2809] Remove user from image hooks (#3723) [C-2834] Remove replica set usage in web (#3721) [C-2829] Finalize SuggestedTracks (#3706) [PAY-1569] Update blog post link (#3719) Call the DN selection callback in AudiusBackend if using a cached DN (#3718) DMs: Add space to learn more text (#3714) ...

[cd49430] Manually set the libs state to prevent retry storm (#3753) Michael Piazza [83feb57] Fix android announcement notifs (#3750) Michael Piazza [e375a3f] [PAY-1599] Fix font in Start Conversation prompt (#3748) Reed [9468b70] [C-2851] Add privacy policy to settings page (#3741) Dylan Jeffers [bb67f44] [PAY-1595] Hide chat textinput until chat exists (#3746) Reed [a11cbf1] [PAY-1597] Fix mobile chat screen empty state font (#3744) Reed [f9e5afa] Bump Android again (#3745) Michael Piazza [6d009ae] Get the first storage node for o-auth not all of them (#3743) Andrew Mendelsohn [84bddc0] Bump app versions (#3742) Michael Piazza [c31a97d] Notification cursor reflects clickability (#3740) Reed [de56d62] [C-2823] Improve autogenerated image logic (#3729) Dylan Jeffers [37d76af] [C-1608 C-2750] Fix edit profile/cover photo (#3735) Dylan Jeffers [97368b1] [C-2711] Remove app-store link in force-upgrade for saga (#3737) Dylan Jeffers [9c30287] Pin lerna version (#3738) Sebastian Klingler [21eafd7] Update announcement notification style and hover behavior retry (#3736) Reed [1aca4db] [CON-765] Default v2 signup and fix local EM (#3730) Theo Ilie [b458446] Update announcement notification style and hover behavior (#3733) Reed [c097955] Update announcement notification style and hover behavior (#3733) Reed [e6e59f6] [C-2844] Ensure all tracks fetched on collection page (#3734) Andrew Mendelsohn [be5a951] Add dev storage bootstrap nodes (#3731) Sebastian Klingler [a71526d] [QA-565] Fix notification overflow bug (#3732) Reed [ddb558e] [C-2547] Lineup pagination fixes (#3728) Andrew Mendelsohn [c341156] [C-2679] Track Availability Modal Form (#3720) Andrew Mendelsohn [bacde06] [C-2785] Update collection screen focus effect to fetch lineup (#3722) Kyle Shanks [f870bd2] Make embed not fetch metadata from CN (#3710) Theo Ilie [0fa16c6] [C-2809] Remove user from image hooks (#3723) Dylan Jeffers [ca163ef] [C-2834] Remove replica set usage in web (#3721) Dylan Jeffers [46f2974] [C-2829] Finalize SuggestedTracks (#3706) Dylan Jeffers [8a4b7e8] [PAY-1569] Update blog post link (#3719) Michael Piazza [58070df] Call the DN selection callback in AudiusBackend if using a cached DN (#3718) Marcus Pasell [5e5fdd3] DMs: Add space to learn more text (#3714) Marcus Pasell [1430c7e] DMs: Ensure every permission action has a CTA (#3716) Marcus Pasell [6def75a] Revert "[PAY-1534] Allow Popup to be mounted inside a container (#3669)" (#3715) Marcus Pasell [aa9f49f] DMs: Make links noreferrer noopener (#3713) Marcus Pasell [8bc0a02] [PAY-1463] Fix d to set discovery node (#3690) Marcus Pasell [12fe88d] [PAY-1534] Allow Popup to be mounted inside a container (#3669) Marcus Pasell [a51c83e] [C-2341] Update tracks table to display tracks marked as deleted as deleted (#3712) Kyle Shanks [23ad32e] [PAY-1566] Adds support for passing color directly to primary button (#3709) Randy Schott [79da3ee] [C-2825] Fix push notification registration (#3672) Michelle Brier [475e14e] [C-2827] Fix hidden dog ear on search results (#3708) Dylan Jeffers [946732b] [C-2830] Move storage node selector to common (#3707) Dylan Jeffers [cd0b911] [C-1379] Add link to playlist in mobile toast (#3702) Dylan Jeffers [4059fe8] [C-2821] Add hidden dog tag to mobile card (#3701) Dylan Jeffers [61927c4] [C-2587] Fix playlist update tooltip (#3700) Dylan Jeffers [597f21c] [QA-560][PAY-1564] Fix hot and new bug (#3703) Saliou Diallo [80f72a0] [PAY-1563] Fix loading into a chat from a push notification (#3699) Michael Piazza [ea7e3b1] [C-2478 C-2480] Add suggestedTracks (#3689) Dylan Jeffers [5bb451a] Attach ulid package to window (#3697) Michael Piazza [23e5b24] Fix track screen artist name font weight (#3695) Reed [7de914e] [C-2416] Fix missing hidden playlists on own profile (#3694) Dylan Jeffers [210113d] Fetch chats on app foreground (#3693) Michael Piazza [16ca56a] [C-2718] Fix mobile sign-up environment issues (#3691) Dylan Jeffers [65aa97c] Update SDK to v3.0.3-beta.63 (#3688) Michael Piazza [e8a7c04] OAuth and Developer Apps QA C-2816 C-2815 C-2794 C-2793 C-2795 C-2797 (#3681) nicoback2 [dcd67b9] [C-2465] Improve audius-query cache selection performance (#3687) Dylan Jeffers [05b1940] [C-2799] Disallow protected m4p file uploads (#3686) Andrew Mendelsohn [c099918] [PAY-1535] Refresh chat messages on render and pull to refresh on chats list (#3673) Marcus Pasell [2fccb0b] [CON-765] Default uploads to v2 and remove feature flag (#3679) Theo Ilie

amendelsohn added 9 commits June 30, 2023 17:22

TrackAvailabilityModalForm structure no form logic

72cd9eb

Merge branch 'main' into amendel-upload-availability-modal

07d640b

wip

9cbed43

Merge branch 'main' into amendel-upload-availability-modal

e214d33

Merge branch 'main' into amendel-upload-availability-modal

34c32f3

add collectible gated fields

8bcccdc

working availability fields

0f17901

move files; final form logic

99264db

preview styling

433390a

amendelsohn requested review from a team and sliptype and removed request for a team July 7, 2023 23:32

pull-request-size bot added the size/XL label Jul 7, 2023

amendelsohn requested a review from a team July 7, 2023 23:33

amendelsohn commented Jul 7, 2023

View reviewed changes

sliptype approved these changes Jul 10, 2023

View reviewed changes

dylanjeffers approved these changes Jul 10, 2023

View reviewed changes

amendelsohn added 2 commits July 10, 2023 15:48

Merge branch 'main' into amendel-upload-availability-modal

0014064

reorganize files

ce2e411

pull-request-size bot removed the size/XL label Jul 10, 2023

pull-request-size bot added the size/XXL label Jul 10, 2023

pr feedback

21d81cb

amendelsohn merged commit c341156 into main Jul 10, 2023

amendelsohn deleted the amendel-upload-availability-modal branch July 10, 2023 22:44

AudiusProject deleted a comment from linear bot Sep 11, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[C-2679] Track Availability Modal Form #3720

[C-2679] Track Availability Modal Form #3720

amendelsohn commented Jul 7, 2023

amendelsohn Jul 7, 2023

amendelsohn Jul 7, 2023

dylanjeffers Jul 10, 2023

audius-infra commented Jul 7, 2023

sliptype left a comment

sliptype Jul 10, 2023

sliptype Jul 10, 2023

sliptype Jul 10, 2023

sliptype Jul 10, 2023

dylanjeffers left a comment

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

dylanjeffers Jul 10, 2023

gitguardian bot commented Jul 10, 2023 •

edited

Loading

audius-infra commented Jul 10, 2023

	const hiddenTrackMetadataMap = {
	const unlistedTrackMetadataMap = {

	const [{ value: showRemixesValue }, , { setValue: setshowRemixesValue }] =
	const [{ value: showRemixesValue }, , { setValue: setShowRemixesValue }] =

		@@ -1,4 +1,4 @@
		import { ComponentProps, PropsWithChildren } from 'react'
		import { ChangeEvent, ComponentProps, PropsWithChildren } from 'react'

[C-2679] Track Availability Modal Form #3720

[C-2679] Track Availability Modal Form #3720

Conversation

amendelsohn commented Jul 7, 2023

Description

Dragons

How Has This Been Tested?

Feature Flags

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

audius-infra commented Jul 7, 2023

sliptype left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

dylanjeffers left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

gitguardian bot commented Jul 10, 2023 • edited Loading

⚠️ GitGuardian has uncovered 1 secret following the scan of your pull request.

audius-infra commented Jul 10, 2023

gitguardian bot commented Jul 10, 2023 •

edited

Loading