feat(perms): add new permission for viewing recently added media (#2129)

* feat(perms): add new permission for viewing recently added media

* test: update login test to check for Trending instead of Recently Added

* fix: avoid conflict with new watchlist perms

cypress/e2e/login.cy.ts

@@ -2,12 +2,12 @@ describe('Login Page', () => {
   it('succesfully logs in as an admin', () => {
     cy.login(Cypress.env('ADMIN_EMAIL'), Cypress.env('ADMIN_PASSWORD'));
     cy.visit('/');
-    cy.contains('Recently Added');
+    cy.contains('Trending');
   });
 
   it('succesfully logs in as a local user', () => {
     cy.login(Cypress.env('USER_EMAIL'), Cypress.env('USER_PASSWORD'));
     cy.visit('/');
-    cy.contains('Recently Added');
+    cy.contains('Trending');
   });
 });

server/lib/permissions.ts

@@ -21,6 +21,7 @@ export enum Permission {
   MANAGE_ISSUES = 1048576,
   VIEW_ISSUES = 2097152,
   CREATE_ISSUES = 4194304,
+  RECENT_VIEW = 67108864,
 }
 
 export interface PermissionCheckOptions {

src/components/Discover/index.tsx

@@ -4,6 +4,7 @@ import { defineMessages, useIntl } from 'react-intl';
 import useSWR from 'swr';
 import type { MediaResultsResponse } from '../../../server/interfaces/api/mediaInterfaces';
 import type { RequestResultsResponse } from '../../../server/interfaces/api/requestInterfaces';
+import { Permission, useUser } from '../../hooks/useUser';
 import PageTitle from '../Common/PageTitle';
 import MediaSlider from '../MediaSlider';
 import RequestCard from '../RequestCard';
@@ -28,6 +29,7 @@ const messages = defineMessages({
 
 const Discover = () => {
   const intl = useIntl();
+  const { hasPermission } = useUser();
 
   const { data: media, error: mediaError } = useSWR<MediaResultsResponse>(
     '/api/v1/media?filter=allavailable&take=20&sort=mediaAdded',
@@ -43,23 +45,29 @@ const Discover = () => {
   return (
     <>
       <PageTitle title={intl.formatMessage(messages.discover)} />
-      <div className="slider-header">
-        <div className="slider-title">
-          <span>{intl.formatMessage(messages.recentlyAdded)}</span>
-        </div>
-      </div>
-      <Slider
-        sliderKey="media"
-        isLoading={!media && !mediaError}
-        isEmpty={!!media && !mediaError && media.results.length === 0}
-        items={media?.results?.map((item) => (
-          <TmdbTitleCard
-            key={`media-slider-item-${item.id}`}
-            tmdbId={item.tmdbId}
-            type={item.mediaType}
+      {hasPermission([Permission.MANAGE_REQUESTS, Permission.RECENT_VIEW], {
+        type: 'or',
+      }) && (
+        <>
+          <div className="slider-header">
+            <div className="slider-title">
+              <span>{intl.formatMessage(messages.recentlyAdded)}</span>
+            </div>
+          </div>
+          <Slider
+            sliderKey="media"
+            isLoading={!media && !mediaError}
+            isEmpty={!!media && !mediaError && media.results.length === 0}
+            items={media?.results?.map((item) => (
+              <TmdbTitleCard
+                key={`media-slider-item-${item.id}`}
+                tmdbId={item.tmdbId}
+                type={item.mediaType}
+              />
+            ))}
           />
-        ))}
-      />
+        </>
+      )}
       <div className="slider-header">
         <Link href="/requests?filter=all">
           <a className="slider-title">

src/components/PermissionEdit/index.tsx

@@ -60,6 +60,9 @@ export const messages = defineMessages({
   viewissues: 'View Issues',
   viewissuesDescription:
     'Grant permission to view media issues reported by other users.',
+  viewrecent: 'View Recently Added',
+  viewrecentDescription:
+    'Grant permission to view the list of recently added media.',
 });
 
 interface PermissionEditProps {
@@ -108,6 +111,12 @@ export const PermissionEdit = ({
           description: intl.formatMessage(messages.viewrequestsDescription),
           permission: Permission.REQUEST_VIEW,
         },
+        {
+          id: 'viewrecent',
+          name: intl.formatMessage(messages.viewrecent),
+          description: intl.formatMessage(messages.viewrecentDescription),
+          permission: Permission.RECENT_VIEW,
+        },
       ],
     },
     {

src/i18n/locale/en.json

@@ -252,6 +252,8 @@
   "components.PermissionEdit.usersDescription": "Grant permission to manage users. Users with this permission cannot modify users with or grant the Admin privilege.",
   "components.PermissionEdit.viewissues": "View Issues",
   "components.PermissionEdit.viewissuesDescription": "Grant permission to view media issues reported by other users.",
+  "components.PermissionEdit.viewrecent": "View Recently Added",
+  "components.PermissionEdit.viewrecentDescription": "Grant permission to view the list of recently added media.",
   "components.PermissionEdit.viewrequests": "View Requests",
   "components.PermissionEdit.viewrequestsDescription": "Grant permission to view media requests submitted by other users.",
   "components.PersonDetails.alsoknownas": "Also Known As: {names}",