fix: replace manage pushes; close sidebar without back reopening bug

Fix media manage sidebar history handling so closing it does not create extra browser history
entries that reopen the panel on Back. Use router.replace when dismissing the movie/TV manage
slide-over, add replace support to shared badge links, and have status-badge manage links use
replace only when already on the same media details page. Add a Cypress regression test that
verifies opening ?manage=1, closing the panel, and pressing Back keeps the panel closed instead of
reopening it.

Author: John Fletcher

cypress/e2e/movie-details.cy.ts

@@ -9,4 +9,20 @@ describe('Movie Details', () => {
       'Minions: The Rise of Gru (2022)'
     );
   });
+
+  it('does not reopen the manager panel after closing and going back', () => {
+    cy.loginAsAdmin();
+
+    cy.visit('/movie/438148');
+    cy.visit('/movie/438148?manage=1');
+
+    cy.get('button[aria-label="Close panel"]').should('be.visible').click();
+    cy.location('search').should('eq', '');
+    cy.get('button[aria-label="Close panel"]').should('not.exist');
+
+    cy.go('back');
+
+    cy.location('search').should('eq', '');
+    cy.get('button[aria-label="Close panel"]').should('not.exist');
+  });
 });

src/components/Common/Badge/index.tsx

@@ -12,11 +12,18 @@ interface BadgeProps {
     | 'light';
   className?: string;
   href?: string;
+  replace?: boolean;
   children: React.ReactNode;
 }
 
 const Badge = (
-  { badgeType = 'default', className, href, children }: BadgeProps,
+  {
+    badgeType = 'default',
+    className,
+    href,
+    replace = false,
+    children,
+  }: BadgeProps,
   ref?: React.Ref<HTMLElement>
 ) => {
   const badgeStyle = [
@@ -93,6 +100,7 @@ const Badge = (
     return (
       <Link
         href={href}
+        replace={replace}
         className={badgeStyle.join(' ')}
         ref={ref as React.Ref<HTMLAnchorElement>}
       >

src/components/MovieDetails/index.tsx

@@ -469,7 +469,7 @@ const MovieDetails = ({ movie }: MovieDetailsProps) => {
         mediaType="movie"
         onClose={() => {
           setShowManager(false);
-          router.push({
+          router.replace({
             pathname: router.pathname,
             query: { movieId: router.query.movieId },
           });

src/components/StatusBadge/index.tsx

@@ -9,6 +9,7 @@ import defineMessages from '@app/utils/defineMessages';
 import { MediaStatus } from '@server/constants/media';
 import { MediaServerType } from '@server/constants/server';
 import type { DownloadingItem } from '@server/lib/downloadtracker';
+import { useRouter } from 'next/router';
 import { useIntl } from 'react-intl';
 
 const messages = defineMessages('components.StatusBadge', {
@@ -47,11 +48,13 @@ const StatusBadge = ({
   statusLabelOverride,
 }: StatusBadgeProps) => {
   const intl = useIntl();
+  const router = useRouter();
   const { hasPermission } = useUser();
   const settings = useSettings();
 
   let mediaLink: string | undefined;
   let mediaLinkDescription: string | undefined;
+  let mediaLinkReplace = false;
 
   const calculateDownloadProgress = (media: DownloadingItem) => {
     return Math.round(((media?.size - media?.sizeLeft) / media?.size) * 100);
@@ -95,6 +98,8 @@ const StatusBadge = ({
   } else if (hasPermission(Permission.MANAGE_REQUESTS)) {
     if (mediaType && tmdbId) {
       mediaLink = `/${mediaType}/${tmdbId}?manage=1`;
+      mediaLinkReplace =
+        router.asPath.split('?')[0] === `/${mediaType}/${tmdbId}`;
       mediaLinkDescription = intl.formatMessage(messages.managemedia, {
         mediaType: intl.formatMessage(
           mediaType === 'movie' ? globalMessages.movie : globalMessages.tvshow
@@ -169,6 +174,7 @@ const StatusBadge = ({
           <Badge
             badgeType="success"
             href={mediaLink}
+            replace={mediaLinkReplace}
             className={`${
               inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
@@ -234,6 +240,7 @@ const StatusBadge = ({
           <Badge
             badgeType="success"
             href={mediaLink}
+            replace={mediaLinkReplace}
             className={`${
               inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
@@ -299,6 +306,7 @@ const StatusBadge = ({
           <Badge
             badgeType="primary"
             href={mediaLink}
+            replace={mediaLinkReplace}
             className={`${
               inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}
@@ -353,7 +361,11 @@ const StatusBadge = ({
     case MediaStatus.PENDING:
       return (
         <Tooltip content={mediaLinkDescription}>
-          <Badge badgeType="warning" href={mediaLink}>
+          <Badge
+            badgeType="warning"
+            href={mediaLink}
+            replace={mediaLinkReplace}
+          >
             {intl.formatMessage(is4k ? messages.status4k : messages.status, {
               status: intl.formatMessage(globalMessages.pending),
             })}
@@ -364,7 +376,7 @@ const StatusBadge = ({
     case MediaStatus.BLOCKLISTED:
       return (
         <Tooltip content={mediaLinkDescription}>
-          <Badge badgeType="danger" href={mediaLink}>
+          <Badge badgeType="danger" href={mediaLink} replace={mediaLinkReplace}>
             {intl.formatMessage(is4k ? messages.status4k : messages.status, {
               status:
                 statusLabelOverride ??
@@ -388,6 +400,7 @@ const StatusBadge = ({
           <Badge
             badgeType="danger"
             href={mediaLink}
+            replace={mediaLinkReplace}
             className={`${
               inProgress && 'relative !bg-gray-700/80 !px-0 hover:!bg-gray-700'
             } overflow-hidden`}

src/components/TvDetails/index.tsx

@@ -519,7 +519,7 @@ const TvDetails = ({ tv }: TvDetailsProps) => {
         mediaType="tv"
         onClose={() => {
           setShowManager(false);
-          router.push({
+          router.replace({
             pathname: router.pathname,
             query: { tvId: router.query.tvId },
           });