diff --git a/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReportContainerHeaderButtons/ReportThreeDotMenu.tsx b/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReportContainerHeaderButtons/ReportThreeDotMenu.tsx index 81bde6e52..377ef19d3 100644 --- a/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReportContainerHeaderButtons/ReportThreeDotMenu.tsx +++ b/apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/ReportContainerHeaderButtons/ReportThreeDotMenu.tsx @@ -6,7 +6,9 @@ import { type DropdownItem, type DropdownItems } from '@/components/ui/dropdown'; -import { Dots, ShareRight, WandSparkle } from '@/components/ui/icons'; +import { Dots, ShareRight, WandSparkle, History, Star } from '@/components/ui/icons'; +import { Refresh3, Duplicate, FileText } from '@/components/ui/icons/NucleoIconOutlined'; +import { Star as StarFilled } from '@/components/ui/icons/NucleoIconFilled'; import { Button } from '@/components/ui/buttons'; import { useGetReport } from '@/api/buster_rest/reports'; import { getIsEffectiveOwner } from '@/lib/share'; @@ -14,6 +16,11 @@ import { ShareMenuContent, getShareAssetConfig } from '@/components/features/Sha import { useBusterNotifications } from '@/context/BusterNotifications'; import { useMemoizedFn } from '@/hooks/useMemoizedFn'; import { ASSET_ICONS } from '@/components/features/config/assetIcons'; +import { useChatLayoutContextSelector } from '@/layouts/ChatLayout/ChatLayoutContext'; +import { useListVersionDropdownItems } from '@/components/features/versionHistory/useListVersionDropdownItems'; +import { useFavoriteStar } from '@/components/features/list/FavoriteStar'; +import { useStatusDropdownContent } from '@/components/features/metrics/StatusBadgeIndicator/useStatusDropdownContent'; +import type { VerificationStatus } from '@buster/server-shared/share'; export const ReportThreeDotMenu = React.memo( ({ @@ -28,10 +35,40 @@ export const ReportThreeDotMenu = React.memo( const editWithAI = useEditWithAI({ reportId }); const shareMenu = useShareMenuSelectMenu({ reportId }); const saveToLibrary = useSaveToLibrary({ reportId }); + const favoriteItem = useFavoriteReportSelectMenu({ reportId }); + const versionHistory = useVersionHistorySelectMenu({ reportId }); + const verificationItem = useReportVerificationSelectMenu(); + const refreshReportItem = useRefreshReportSelectMenu(); + const duplicateReportItem = useDuplicateReportSelectMenu(); + const downloadPdfItem = useDownloadPdfSelectMenu(); const items: DropdownItems = useMemo(() => { - return [editWithAI, { type: 'divider' }, shareMenu, saveToLibrary]; - }, [reportId, reportVersionNumber]); + return [ + editWithAI, + { type: 'divider' }, + shareMenu, + favoriteItem, + { type: 'divider' }, + versionHistory, + verificationItem, + refreshReportItem, + duplicateReportItem, + downloadPdfItem, + saveToLibrary + ]; + }, [ + reportId, + reportVersionNumber, + editWithAI, + shareMenu, + favoriteItem, + versionHistory, + verificationItem, + refreshReportItem, + duplicateReportItem, + downloadPdfItem, + saveToLibrary + ]); return ( @@ -132,3 +169,147 @@ export const useSaveToLibrary = ({ reportId }: { reportId: string }): DropdownIt [CollectionSubMenu] ); }; + +// Favorites for report (toggle add/remove) +const useFavoriteReportSelectMenu = ({ reportId }: { reportId: string }): DropdownItem => { + const { data: name } = useGetReport({ reportId }, { select: (x) => x.name }); + const { isFavorited, onFavoriteClick } = useFavoriteStar({ + id: reportId, + type: 'report', + name: name || '' + }); + + return useMemo( + () => ({ + label: isFavorited ? 'Remove from favorites' : 'Add to favorites', + value: 'toggle-favorite', + icon: isFavorited ? : , + onClick: onFavoriteClick, + closeOnSelect: false + }), + [isFavorited, onFavoriteClick] + ); +}; + +// Version history for report +const useVersionHistorySelectMenu = ({ reportId }: { reportId: string }): DropdownItem => { + const chatId = useChatLayoutContextSelector((x) => x.chatId); + const { data } = useGetReport( + { reportId }, + { + select: (x) => ({ + versions: x.versions, + version_number: x.version_number + }) + } + ); + const { versions = [], version_number } = data || {}; + + const versionHistoryItems: DropdownItems = useListVersionDropdownItems({ + versions, + selectedVersion: version_number, + chatId, + fileId: reportId, + fileType: 'report', + useVersionHistoryMode: true + }); + + const reverseVersionHistoryItems = useMemo(() => { + return [...versionHistoryItems].reverse(); + }, [versionHistoryItems]); + + return useMemo( + () => ({ + label: 'Version history', + value: 'version-history', + icon: , + items: [ + + + + ] + }), + [reverseVersionHistoryItems] + ); +}; + +// Request verification dropdown (stubbed) +const useReportVerificationSelectMenu = (): DropdownItem => { + const onChangeStatus = useMemoizedFn(async (_status: VerificationStatus) => { + // stubbed + return; + }); + + const dropdownProps = useStatusDropdownContent({ + isAdmin: false, + selectedStatus: 'notRequested', + onChangeStatus + }); + + const statusSubMenu = useMemo(() => { + return ; + }, [dropdownProps]); + + return useMemo( + () => ({ + label: 'Request verification', + value: 'request-verification', + items: [{statusSubMenu}] + }), + [statusSubMenu] + ); +}; + +// Refresh report (stubbed) +const useRefreshReportSelectMenu = (): DropdownItem => { + const onClick = useMemoizedFn(async () => { + // stubbed + return; + }); + + return useMemo( + () => ({ + label: 'Refresh report', + value: 'refresh-report', + icon: , + onClick + }), + [onClick] + ); +}; + +// Duplicate report (stubbed) +const useDuplicateReportSelectMenu = (): DropdownItem => { + const onClick = useMemoizedFn(async () => { + // stubbed + return; + }); + + return useMemo( + () => ({ + label: 'Duplicate', + value: 'duplicate-report', + icon: , + onClick + }), + [onClick] + ); +}; + +// Download as PDF (stubbed) +const useDownloadPdfSelectMenu = (): DropdownItem => { + const onClick = useMemoizedFn(async () => { + // stubbed + return; + }); + + return useMemo( + () => ({ + label: 'Download as PDF', + value: 'download-pdf', + icon: , + onClick + }), + [onClick] + ); +};