From 7caa386d2da8936dc2ca1277864d637bb08090fd Mon Sep 17 00:00:00 2001 From: Shekar Siri Date: Tue, 4 Feb 2025 13:22:55 +0100 Subject: [PATCH] change(ui): session_replay permission check for sessions list, highlights and bookmarks/vault --- .../components/Highlights/HighlightsList.tsx | 39 ++++++++++--------- .../SessionsTabOverview.tsx | 7 +++- .../components/Bookmarks/Bookmarks.tsx | 5 ++- .../components/Notes/NoteList.tsx | 5 ++- 4 files changed, 34 insertions(+), 22 deletions(-) diff --git a/frontend/app/components/Highlights/HighlightsList.tsx b/frontend/app/components/Highlights/HighlightsList.tsx index 51b472475..ffb328d10 100644 --- a/frontend/app/components/Highlights/HighlightsList.tsx +++ b/frontend/app/components/Highlights/HighlightsList.tsx @@ -5,14 +5,15 @@ import { useStore } from 'App/mstore'; import { numberWithCommas } from 'App/utils'; import { Pagination, NoContent, Loader } from 'UI'; import cn from 'classnames'; -import { withSiteId, highlights } from "App/routes"; +import { withSiteId, highlights } from 'App/routes'; import HighlightClip from './HighlightClip'; import { useQuery } from '@tanstack/react-query'; -import HighlightPlayer from "./HighlightPlayer"; +import HighlightPlayer from './HighlightPlayer'; import { useLocation, useHistory } from 'react-router-dom'; import { toast } from 'react-toastify'; -import EditHlModal from "./EditHlModal"; -import HighlightsListHeader from './HighlightsListHeader' +import EditHlModal from './EditHlModal'; +import HighlightsListHeader from './HighlightsListHeader'; +import withPermissions from 'HOCs/withPermissions'; function HighlightsList() { const { notesStore, projectsStore } = useStore(); @@ -20,7 +21,7 @@ function HighlightsList() { const [editModalOpen, setEditModalOpen] = React.useState(false); const [editHl, setEditHl] = React.useState>({ message: '', - isPublic: false, + isPublic: false }); const { search } = useLocation(); const highlight = new URLSearchParams(search).get('highlight'); @@ -30,15 +31,15 @@ function HighlightsList() { const listLength = notesStore.notes.length; const activeTags = notesStore.activeTags; const page = notesStore.page; - const ownOnly = notesStore.ownOnly + const ownOnly = notesStore.ownOnly; const { data = { notes: [], total: 0 }, isPending, - refetch, + refetch } = useQuery({ queryKey: ['notes', page, query, activeTags], queryFn: () => notesStore.fetchNotes(), - retry: 3, + retry: 3 }); const { total, notes } = data; @@ -51,7 +52,7 @@ function HighlightsList() { }; const toggleTag = (tag?: iTag) => { - notesStore.toggleTag(tag) + notesStore.toggleTag(tag); }; const onPageChange = (page: number) => { @@ -66,11 +67,11 @@ function HighlightsList() { const onItemClick = (id: string) => { hist.replace(`?highlight=${id}`); - } + }; const onClose = () => { hist.replace(withSiteId(highlights(), projectsStore.active?.id)); - } + }; const onEdit = (id: string) => { const hl = notesStore.getNoteById(id); @@ -78,8 +79,8 @@ function HighlightsList() { return toast.error('Highlight not found in the list'); } setEditHl(hl); - setEditModalOpen(true) - } + setEditModalOpen(true); + }; const onSave = async (noteText: string, visible: boolean) => { if (!editHl) { @@ -88,8 +89,8 @@ function HighlightsList() { const newNote = { ...editHl, message: noteText, - isPublic: visible, - } + isPublic: visible + }; try { await notesStore.updateNote(editHl.noteId, newNote); toast.success('Highlight updated successfully'); @@ -99,12 +100,12 @@ function HighlightsList() { } setEditModalOpen(false); - } + }; const toggleShared = (val: boolean) => { notesStore.toggleShared(val); refetch(); - } + }; const isEmpty = !isPending && total === 0; return ( @@ -189,4 +190,6 @@ function HighlightsList() { ); } -export default observer(HighlightsList); +export default withPermissions( + ['SESSION_REPLAY', 'SERVICE_SESSION_REPLAY'], '', false, false +)(observer(HighlightsList)); diff --git a/frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx b/frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx index 97b806034..c15a9215f 100644 --- a/frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/SessionsTabOverview.tsx @@ -8,8 +8,9 @@ import SessionList from './components/SessionList'; import { observer } from 'mobx-react-lite'; import NoSessionsMessage from 'Shared/NoSessionsMessage/NoSessionsMessage'; import MainSearchBar from 'Shared/MainSearchBar/MainSearchBar'; -import SearchActions from "../SearchActions"; +import SearchActions from '../SearchActions'; import usePageTitle from '@/hooks/usePageTitle'; +import withPermissions from 'HOCs/withPermissions'; function SessionsTabOverview() { const [query, setQuery] = React.useState(''); @@ -53,4 +54,6 @@ function SessionsTabOverview() { ); } -export default observer(SessionsTabOverview); +export default withPermissions( + ['SESSION_REPLAY', 'SERVICE_SESSION_REPLAY'], '', false, false +)(observer(SessionsTabOverview)); diff --git a/frontend/app/components/shared/SessionsTabOverview/components/Bookmarks/Bookmarks.tsx b/frontend/app/components/shared/SessionsTabOverview/components/Bookmarks/Bookmarks.tsx index 760a366b6..5e6cbad89 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/Bookmarks/Bookmarks.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/Bookmarks/Bookmarks.tsx @@ -9,6 +9,7 @@ import { useStore } from '@/mstore'; import { observer } from 'mobx-react-lite'; import SessionItem from 'Shared/SessionItem/SessionItem'; import usePageTitle from '@/hooks/usePageTitle'; +import withPermissions from 'HOCs/withPermissions'; function Bookmarks() { const { projectsStore, sessionStore, customFieldStore, userStore, searchStore } = useStore(); @@ -75,4 +76,6 @@ function Bookmarks() { ); } -export default observer(Bookmarks); +export default withPermissions( + ['SESSION_REPLAY', 'SERVICE_SESSION_REPLAY'], '', false, false +)(observer(Bookmarks)); diff --git a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx index b0b339fac..8bb0915a9 100644 --- a/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx +++ b/frontend/app/components/shared/SessionsTabOverview/components/Notes/NoteList.tsx @@ -7,6 +7,7 @@ import { useStore } from 'App/mstore'; import AnimatedSVG, { ICONS } from 'Shared/AnimatedSVG/AnimatedSVG'; import NoteTags from 'Shared/SessionsTabOverview/components/Notes/NoteTags'; import usePageTitle from '@/hooks/usePageTitle'; +import withPermissions from 'HOCs/withPermissions'; function NotesList() { usePageTitle('Notes - OpenReplay'); @@ -74,4 +75,6 @@ function NotesList() { ); } -export default observer(NotesList); +export default withPermissions( + ['SESSION_REPLAY', 'SERVICE_SESSION_REPLAY'], '', false, false +)(observer(NotesList));