[PAY-3240] Prevent wrong users from seeing /edit pages (#9298)

packages/harmony/src/components/tag/Tag.tsx

@@ -73,6 +73,7 @@ export const Tag = (props: TagProps) => {
       </Text>
       {Icon ? (
         <IconButton
+          asChild
           icon={Icon}
           color='staticWhite'
           onClick={isDefaultMultiselect ? onClick : undefined}

packages/web/src/components/data-entry/ContextualMenu.tsx

@@ -122,7 +122,7 @@ export const SelectedValue = (props: SelectedValueProps) => {
   const { label, icon: Icon, children, ...rest } = props
   return (
     <label className={styles.selectedValue} {...rest}>
-      <HiddenInput value={label} />
+      <HiddenInput value={label} readOnly />
       {Icon ? <Icon size='s' color='default' /> : null}
       {label ? (
         <Text variant='body' size='s'>

packages/web/src/components/data-entry/DropdownInput.jsx

@@ -157,7 +157,7 @@ class DropdownInput extends Component {
             }
             notFoundContent={''}
             getPopupContainer={popupContainer}
-            onVisibleChange={this.onVisibleChange}
+            onDropdownVisibleChange={this.onVisibleChange}
             {...other}
           >
             {options}

packages/web/src/components/form-fields/TextAreaField.tsx

@@ -12,5 +12,7 @@ export const TextAreaField = (props: TextAreaFieldProps) => {
 
   const hasError = Boolean(meta.touched && meta.error)
 
-  return <TextAreaV2 value={value} {...field} error={hasError} {...other} />
+  return (
+    <TextAreaV2 value={value ?? ''} {...field} error={hasError} {...other} />
+  )
 }

packages/web/src/components/image-selection/ImageSelectionButton.jsx

@@ -141,7 +141,7 @@ ImageSelectionButton.propTypes = {
   hasImage: PropTypes.bool.isRequired,
   // The name of the image (e.g. render the button as Add "Artwork" or Add "Cover Photo")
   imageName: PropTypes.string,
-  showImageName: PropTypes.boolean,
+  showImageName: PropTypes.bool,
   // Whether or not to show the image selection modal. Otherwise, the
   // button itself is the dropzone.
   includePopup: PropTypes.bool,
@@ -150,7 +150,7 @@ ImageSelectionButton.propTypes = {
   onClick: PropTypes.func,
   defaultPopupOpen: PropTypes.bool,
   isImageAutogenerated: PropTypes.bool,
-  onRemoveArtwork: PropTypes.bool,
+  onRemoveArtwork: PropTypes.func,
   ...ImageSelectionProps
 }
 

packages/web/src/components/play-bar/desktop/components/PlayingTrackInfo.tsx

@@ -1,4 +1,4 @@
-import { memo, useEffect } from 'react'
+import { memo } from 'react'
 
 import { useGatedContentAccess } from '@audius/common/hooks'
 import {
@@ -82,21 +82,12 @@ const PlayingTrackInfo = ({
       'usdc_purchase' in track.stream_conditions &&
       !hasStreamAccess)
 
-  const [artistSpringProps, setArtistSpringProps] = useSpring(() => springProps)
-  const [trackSpringProps, setTrackSpringProps] = useSpring(() => springProps)
+  const spring = useSpring(springProps)
   const profileImage = useProfilePicture(
     artistUserId ?? null,
     SquareSizes.SIZE_150_BY_150
   )
 
-  useEffect(() => {
-    setArtistSpringProps(springProps)
-  }, [artistUserId, setArtistSpringProps])
-
-  useEffect(() => {
-    setTrackSpringProps(springProps)
-  }, [trackTitle, setTrackSpringProps])
-
   const boxShadowStyle =
     hasShadow && dominantColor
       ? {
@@ -106,10 +97,7 @@ const PlayingTrackInfo = ({
 
   const renderTrackTitle = () => {
     return (
-      <animated.div
-        style={trackSpringProps}
-        className={styles.trackTitleContainer}
-      >
+      <animated.div style={spring} className={styles.trackTitleContainer}>
         <div
           className={cn(styles.trackTitle, {
             [styles.textShadow]: hasShadow
@@ -159,10 +147,7 @@ const PlayingTrackInfo = ({
             {renderTrackTitle()}
           </Draggable>
         )}
-        <animated.div
-          className={styles.artistNameWrapper}
-          style={artistSpringProps}
-        >
+        <animated.div style={spring} className={styles.artistNameWrapper}>
           <div
             className={cn(styles.artistName, {
               [styles.textShadow]: hasShadow

packages/web/src/hooks/useManagedAccountNotAllowedRedirect.ts

@@ -1,14 +1,19 @@
 import { useContext, useEffect } from 'react'
 
+import { useGetManagedAccounts } from '@audius/common/api'
 import { useIsManagedAccount } from '@audius/common/hooks'
+import { Status } from '@audius/common/models'
+import { accountSelectors } from '@audius/common/store'
+import { useSelector } from 'react-redux'
 
 import { ToastContext } from 'components/toast/ToastContext'
 import { FEED_PAGE } from 'utils/route'
 
 import { useNavigateToPage } from './useNavigateToPage'
 
 const messages = {
-  unauthorized: `You can't do that as a managed user`
+  unauthorized: 'Unauthorized',
+  unauthorizedAsManaged: `You can't do that as a managed user`
 }
 
 /**
@@ -25,7 +30,7 @@ export const useManagedAccountNotAllowedRedirect = (
   useEffect(() => {
     if (isManagedAccount) {
       navigate(route)
-      toast(messages.unauthorized)
+      toast(messages.unauthorizedAsManaged)
     }
   }, [isManagedAccount, navigate, route, toast])
 }
@@ -48,7 +53,46 @@ export const useManagedAccountNotAllowedCallback = ({
   useEffect(() => {
     if (isManagedAccount && trigger) {
       callback()
-      toast(messages.unauthorized)
+      toast(messages.unauthorizedAsManaged)
     }
   }, [isManagedAccount, callback, toast, trigger])
 }
+
+/**
+ * Hook to prevent a managed account from some action if the
+ * managed account does not have access to the provided account
+ * @param handle handle of the user we are doing something on behalf of
+ * @param route route to redirect the user to
+ */
+export const useIsUnauthorizedForHandleRedirect = (
+  handle: string,
+  route: string = FEED_PAGE
+) => {
+  const { handle: actingHandle, user_id: userId } =
+    useSelector(accountSelectors.getAccountUser) || {}
+  const navigate = useNavigateToPage()
+  const { toast } = useContext(ToastContext)
+
+  const { data: managedAccounts = [], status: accountsStatus } =
+    useGetManagedAccounts({ userId: userId! }, { disabled: !userId })
+
+  const isLoading =
+    !actingHandle ||
+    !userId ||
+    accountsStatus === Status.LOADING ||
+    accountsStatus === Status.IDLE
+  const isOwner = actingHandle === handle
+  const isManaged =
+    !!actingHandle &&
+    managedAccounts.find(({ user }) => user.handle.toLowerCase() === handle)
+
+  useEffect(() => {
+    if (isLoading) {
+      return
+    }
+    if (!isOwner && !isManaged) {
+      navigate(route)
+      toast(messages.unauthorized)
+    }
+  }, [isLoading, isOwner, isManaged, navigate, route, toast])
+}

packages/web/src/pages/edit-collection-page/desktop/EditCollectionPage.tsx

@@ -20,6 +20,8 @@ import Header from 'components/header/desktop/Header'
 import LoadingSpinnerFullPage from 'components/loading-spinner-full-page/LoadingSpinnerFullPage'
 import Page from 'components/page/Page'
 import { useCollectionCoverArt2 } from 'hooks/useCollectionCoverArt'
+import { useIsUnauthorizedForHandleRedirect } from 'hooks/useManagedAccountNotAllowedRedirect'
+import { useRequiresAccount } from 'hooks/useRequiresAccount'
 import { track } from 'services/analytics'
 
 import { updatePlaylistContents } from '../utils'
@@ -42,6 +44,8 @@ export const EditCollectionPage = () => {
   const focus = searchParams.get('focus')
   const permalink = `/${handle}/${isAlbum ? 'album' : 'playlist'}/${slug}`
   const dispatch = useDispatch()
+  useRequiresAccount()
+  useIsUnauthorizedForHandleRedirect(handle)
 
   const { data: currentUserId } = useGetCurrentUserId({})
   const { data: collection, status } = useGetPlaylistByPermalink(

packages/web/src/pages/edit-collection-page/mobile/EditCollectionPage.tsx

@@ -31,6 +31,8 @@ import { useTemporaryNavContext } from 'components/nav/mobile/NavContext'
 import TextElement, { Type } from 'components/nav/mobile/TextElement'
 import TrackList from 'components/track/mobile/TrackList'
 import { useCollectionCoverArt2 } from 'hooks/useCollectionCoverArt'
+import { useIsUnauthorizedForHandleRedirect } from 'hooks/useManagedAccountNotAllowedRedirect'
+import { useRequiresAccount } from 'hooks/useRequiresAccount'
 import UploadStub from 'pages/profile-page/components/mobile/UploadStub'
 import { track } from 'services/analytics'
 import { AppState } from 'store/types'
@@ -76,6 +78,8 @@ const EditCollectionPage = g(
     const permalink = `/${handle}/${isAlbum ? 'album' : 'playlist'}/${slug}`
     const dispatch = useDispatch()
     const history = useHistory()
+    useRequiresAccount()
+    useIsUnauthorizedForHandleRedirect(handle)
 
     const { data: currentUserId } = useGetCurrentUserId({})
     const { data: collection } = useGetPlaylistByPermalink(

packages/web/src/pages/edit-page/EditTrackPage.tsx

@@ -26,6 +26,8 @@ import { TrackEditFormValues } from 'components/edit-track/types'
 import Header from 'components/header/desktop/Header'
 import LoadingSpinnerFullPage from 'components/loading-spinner-full-page/LoadingSpinnerFullPage'
 import Page from 'components/page/Page'
+import { useIsUnauthorizedForHandleRedirect } from 'hooks/useManagedAccountNotAllowedRedirect'
+import { useRequiresAccount } from 'hooks/useRequiresAccount'
 import { useTrackCoverArt2 } from 'hooks/useTrackCoverArt'
 
 const { deleteTrack, editTrack } = cacheTracksActions
@@ -47,6 +49,8 @@ export const EditTrackPage = (props: EditPageProps) => {
   const { scrollToTop } = props
   const { handle, slug } = useParams<{ handle: string; slug: string }>()
   const dispatch = useDispatch()
+  useRequiresAccount()
+  useIsUnauthorizedForHandleRedirect(handle)
 
   const { data: currentUserId } = useGetCurrentUserId({})
   const permalink = `/${handle}/${slug}`