diff --git a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx index ac51c07a8e7e..f846a1f9fd90 100644 --- a/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx +++ b/apps/meteor/client/components/message/toolbar/MessageToolbar.tsx @@ -11,6 +11,7 @@ import React, { memo, useMemo, useRef } from 'react'; import MessageActionMenu from './MessageActionMenu'; import MessageToolbarStarsActionMenu from './MessageToolbarStarsActionMenu'; import { useNewDiscussionMessageAction } from './useNewDiscussionMessageAction'; +import { usePermalinkStar } from './usePermalinkStar'; import { useStarMessageAction } from './useStarMessageAction'; import { useUnstarMessageAction } from './useUnstarMessageAction'; import { useWebDAVMessageAction } from './useWebDAVMessageAction'; @@ -92,6 +93,7 @@ const MessageToolbar = ({ useNewDiscussionMessageAction(); useStarMessageAction(message, { room, user }); useUnstarMessageAction(message, { room, user }); + usePermalinkStar(message, { subscription, user }); const actionsQueryResult = useQuery({ queryKey: roomsQueryKeys.messageActionsWithParameters(room._id, message), diff --git a/apps/meteor/client/components/message/toolbar/usePermalinkStar.tsx b/apps/meteor/client/components/message/toolbar/usePermalinkStar.tsx new file mode 100644 index 000000000000..15e6cc5056a7 --- /dev/null +++ b/apps/meteor/client/components/message/toolbar/usePermalinkStar.tsx @@ -0,0 +1,48 @@ +import type { IMessage, ISubscription, IUser } from '@rocket.chat/core-typings'; +import { isE2EEMessage } from '@rocket.chat/core-typings'; +import { useToastMessageDispatch } from '@rocket.chat/ui-contexts'; +import { useEffect } from 'react'; +import { useTranslation } from 'react-i18next'; + +import { MessageAction } from '../../../../app/ui-utils/client/lib/MessageAction'; +import { getPermaLink } from '../../../lib/getPermaLink'; + +export const usePermalinkStar = ( + message: IMessage, + { user, subscription }: { user: IUser | undefined; subscription: ISubscription | undefined }, +) => { + const { t } = useTranslation(); + + const dispatchToastMessage = useToastMessageDispatch(); + + const encrypted = isE2EEMessage(message); + + useEffect(() => { + if (!subscription) { + return; + } + + MessageAction.addButton({ + id: 'permalink-star', + icon: 'permalink', + label: 'Copy_link', + context: ['starred'], + async action() { + try { + const permalink = await getPermaLink(message._id); + navigator.clipboard.writeText(permalink); + dispatchToastMessage({ type: 'success', message: t('Copied') }); + } catch (e) { + dispatchToastMessage({ type: 'error', message: e }); + } + }, + order: 10, + group: 'menu', + disabled: () => encrypted, + }); + + return () => { + MessageAction.removeButton('permalink-star'); + }; + }, [dispatchToastMessage, encrypted, message._id, message.starred, subscription, t, user?._id]); +}; diff --git a/apps/meteor/client/startup/actionButtons/index.ts b/apps/meteor/client/startup/actionButtons/index.ts index 3b8e8c1407eb..81c8979ae2a9 100644 --- a/apps/meteor/client/startup/actionButtons/index.ts +++ b/apps/meteor/client/startup/actionButtons/index.ts @@ -3,6 +3,5 @@ import './jumpToPinMessage'; import './jumpToSearchMessage'; import './jumpToStarMessage'; import './permalinkPinned'; -import './permalinkStar'; import './pinMessage'; import './unpinMessage'; diff --git a/apps/meteor/client/startup/actionButtons/permalinkStar.ts b/apps/meteor/client/startup/actionButtons/permalinkStar.ts deleted file mode 100644 index e4a235491cb7..000000000000 --- a/apps/meteor/client/startup/actionButtons/permalinkStar.ts +++ /dev/null @@ -1,38 +0,0 @@ -import { isE2EEMessage } from '@rocket.chat/core-typings'; -import { Meteor } from 'meteor/meteor'; - -import { MessageAction } from '../../../app/ui-utils/client'; -import { t } from '../../../app/utils/lib/i18n'; -import { getPermaLink } from '../../lib/getPermaLink'; -import { dispatchToastMessage } from '../../lib/toast'; - -Meteor.startup(() => { - MessageAction.addButton({ - id: 'permalink-star', - icon: 'permalink', - label: 'Copy_link', - // classes: 'clipboard', - context: ['starred', 'threads', 'videoconf-threads'], - async action(_, { message }) { - try { - const permalink = await getPermaLink(message._id); - navigator.clipboard.writeText(permalink); - dispatchToastMessage({ type: 'success', message: t('Copied') }); - } catch (e) { - dispatchToastMessage({ type: 'error', message: e }); - } - }, - condition({ message, subscription, user }) { - if (subscription == null) { - return false; - } - - return Boolean(message.starred?.find((star) => star._id === user?._id)); - }, - order: 10, - group: 'menu', - disabled({ message }) { - return isE2EEMessage(message); - }, - }); -});