feat: Move quick reactions out of feature preview

.changeset/purple-mayflies-approve.md

@@ -0,0 +1,7 @@
+---
+'@rocket.chat/ui-client': major
+'@rocket.chat/i18n': major
+'@rocket.chat/meteor': major
+---
+
+Promotes quick reactions from preview state to stable

apps/meteor/client/components/message/toolbar/items/actions/ReactionMessageAction.tsx

@@ -1,5 +1,4 @@
 import { isOmnichannelRoom, type IMessage, type IRoom, type ISubscription } from '@rocket.chat/core-typings';
-import { useFeaturePreview } from '@rocket.chat/ui-client';
 import { useUser, useEndpoint } from '@rocket.chat/ui-contexts';
 import { useCallback } from 'react';
 import { useTranslation } from 'react-i18next';
@@ -21,7 +20,6 @@ const ReactionMessageAction = ({ message, room, subscription }: ReactionMessageA
 	const chat = useChat();
 	const user = useUser();
 	const setReaction = useEndpoint('POST', '/v1/chat.react');
-	const quickReactionsEnabled = useFeaturePreview('quickReactions');
 	const { quickReactions, addRecentEmoji } = useEmojiPickerData();
 	const { t } = useTranslation();
 
@@ -53,10 +51,9 @@ const ReactionMessageAction = ({ message, room, subscription }: ReactionMessageA
 
 	return (
 		<>
-			{quickReactionsEnabled &&
-				quickReactions.slice(0, 3).map(({ emoji, image }) => {
-					return <EmojiElement key={emoji} small title={emoji} emoji={emoji} image={image} onClick={() => toggleReaction(emoji)} />;
-				})}
+			{quickReactions.slice(0, 3).map(({ emoji, image }) => {
+				return <EmojiElement key={emoji} small title={emoji} emoji={emoji} image={image} onClick={() => toggleReaction(emoji)} />;
+			})}
 			<MessageToolbarItem
 				id='reaction-message'
 				icon='add-reaction'

apps/meteor/tests/e2e/feature-preview.spec.ts

@@ -60,11 +60,10 @@ test.describe.serial('feature preview', () => {
 		poAccountProfile = new AccountProfile(page);
 	});
 
-	test('should show "Message" and "Navigation" feature sections', async ({ page }) => {
+	test('should show "Navigation" feature section', async ({ page }) => {
 		await page.goto('/account/feature-preview');
 		await page.waitForSelector('#main-content');
 
-		await expect(page.getByRole('main').getByRole('button', { name: 'Message' })).toBeVisible();
 		await expect(page.getByRole('main').getByRole('button', { name: 'Navigation' })).toBeVisible();
 	});
 

packages/i18n/src/locales/en.i18n.json

@@ -2243,7 +2243,7 @@
   "Filter_by_visibility": "Filter by visibility",
   "Filters": "Filters",
   "Filters_and_secondary_sidebar": "Filters and secondary sidebar",
-  "Filters_and_secondary_sidebar_description": "Reduce noise and increase focus using sidebar filters and a secondary navigation layer. Filter your mentions, favorite rooms, discussions or filter by a specific room to see its associated channels and discussions.", 
+  "Filters_and_secondary_sidebar_description": "Reduce noise and increase focus using sidebar filters and a secondary navigation layer. Filter your mentions, favorite rooms, discussions or filter by a specific room to see its associated channels and discussions.",
   "Filters_applied": "Filters applied",
   "Financial_Services": "Financial Services",
   "Finish": "Finish",
@@ -4121,8 +4121,6 @@
   "Queue_management": "Queue Management",
   "Queued": "Queued",
   "Queues": "Queues",
-  "Quick_reactions": "Quick reactions",
-  "Quick_reactions_description": "Easily access your most used and most recent emoji message reactions by hovering on a message.",
   "Quote": "Quote",
   "Random": "Random",
   "Rate Limiter": "Rate Limiter",

packages/i18n/src/locales/hi-IN.i18n.json

@@ -3633,8 +3633,6 @@
   "Queue_management": "कतार प्रबंधन",
   "Queued": "कतारबद्ध",
   "Queues": "पूंछ",
-  "Quick_reactions": "त्वरित प्रतिक्रियाएँ",
-  "Quick_reactions_description": "जब आपका माउस संदेश पर होता है तो सबसे अधिक उपयोग की जाने वाली तीन प्रतिक्रियाओं तक आसान पहुंच मिलती है",
   "Quote": "उद्धरण",
   "Random": "Random",
   "Rate Limiter": "दर सीमक",

packages/i18n/src/locales/nb.i18n.json

@@ -4102,8 +4102,6 @@
   "Queue_management": "Køstyring",
   "Queued": "Satt i kø",
   "Queues": "Køer",
-  "Quick_reactions": "Hurtigreaksjoner",
-  "Quick_reactions_description": "Få enkelt tilgang til de mest brukte og siste emoji-reaksjonene dine ved å holde musepekeren over en melding.",
   "Quote": "Sitat",
   "Random": "Tilfeldig",
   "Rate Limiter": "Frekvensbegrensning ",

packages/i18n/src/locales/nn.i18n.json

@@ -3975,8 +3975,6 @@
   "Queue_management": "Køstyring",
   "Queued": "Satt i kø",
   "Queues": "Køer",
-  "Quick_reactions": "Hurtigreaksjoner",
-  "Quick_reactions_description": "Få enkelt tilgang til de mest brukte og siste emoji-reaksjonene dine ved å holde musepekeren over en melding.",
   "Quote": "Sitat",
   "Random": "Tilfeldig",
   "Rate Limiter": "Frekvensbegrensning ",

packages/i18n/src/locales/pt-BR.i18n.json

@@ -4064,8 +4064,6 @@
   "Queue_management": "Gerenciamento de fila",
   "Queued": "Em fila",
   "Queues": "Filas",
-  "Quick_reactions": "Reações rápidas",
-  "Quick_reactions_description": "Acesse facilmente suas reações de mensagens de emoji mais usadas e mais recentes passando o mouse sobre uma mensagem.",
   "Quote": "Citar",
   "Random": "Aleatória",
   "Rate Limiter": "Limitador de taxa",

packages/i18n/src/locales/sv.i18n.json

@@ -4083,8 +4083,6 @@
   "Queue_management": "Köhantering",
   "Queued": "I kö",
   "Queues": "Köer",
-  "Quick_reactions": "Snabb reaktioner",
-  "Quick_reactions_description": "Få enkel åtkomst till dina mest använda och senaste emoji-reaktioner genom att hålla muspekaren över ett meddelande.",
   "Quote": "Citera inlägg",
   "Random": "Slumpmässig",
   "Rate Limiter": "Begränsning",

packages/ui-client/src/components/FeaturePreview/FeaturePreview.spec.tsx

@@ -5,7 +5,7 @@ import { FeaturePreview, FeaturePreviewOff, FeaturePreviewOn } from './FeaturePr
 
 test('should renders off if the feature is disabled', async () => {
 	render(
-		<FeaturePreview feature='quickReactions'>
+		<FeaturePreview feature='secondarySidebar'>
 			<FeaturePreviewOn>on</FeaturePreviewOn>
 			<FeaturePreviewOff>off</FeaturePreviewOff>
 		</FeaturePreview>,
@@ -19,14 +19,14 @@ test('should renders off if the feature is disabled', async () => {
 
 test('should renders on if the feature is enabled', async () => {
 	render(
-		<FeaturePreview feature='quickReactions'>
+		<FeaturePreview feature='secondarySidebar'>
 			<FeaturePreviewOn>on</FeaturePreviewOn>
 			<FeaturePreviewOff>off</FeaturePreviewOff>
 		</FeaturePreview>,
 		{
 			wrapper: mockAppRoot()
 				.withSetting('Accounts_AllowFeaturePreview', true)
-				.withUserPreference('featuresPreview', [{ name: 'quickReactions', value: true }])
+				.withUserPreference('featuresPreview', [{ name: 'secondarySidebar', value: true }])
 				.build(),
 		},
 	);

packages/ui-client/src/hooks/useFeaturePreview.spec.tsx

@@ -4,7 +4,7 @@ import { renderHook } from '@testing-library/react';
 import { useFeaturePreview } from './useFeaturePreview';
 
 it('should return false if featurePreviewEnabled is false', () => {
-	const { result } = renderHook(() => useFeaturePreview('quickReactions'), {
+	const { result } = renderHook(() => useFeaturePreview('secondarySidebar'), {
 		wrapper: mockAppRoot().withSetting('Accounts_AllowFeaturePreview', false).build(),
 	});
 
@@ -13,21 +13,21 @@ it('should return false if featurePreviewEnabled is false', () => {
 
 // TODO: fix this test
 it('should return false if featurePreviewEnabled is true but feature is not in userPreferences', () => {
-	const { result } = renderHook(() => useFeaturePreview('quickReactions'), {
+	const { result } = renderHook(() => useFeaturePreview('secondarySidebar'), {
 		wrapper: mockAppRoot()
 			.withSetting('Accounts_AllowFeaturePreview', false)
-			.withUserPreference('featuresPreview', [{ name: 'quickReactions', value: true }])
+			.withUserPreference('featuresPreview', [{ name: 'secondarySidebar', value: true }])
 			.build(),
 	});
 
 	expect(result.current).toBe(false);
 });
 
 it('should return true if featurePreviewEnabled is true and feature is in userPreferences', () => {
-	const { result } = renderHook(() => useFeaturePreview('quickReactions'), {
+	const { result } = renderHook(() => useFeaturePreview('secondarySidebar'), {
 		wrapper: mockAppRoot()
 			.withSetting('Accounts_AllowFeaturePreview', true)
-			.withUserPreference('featuresPreview', [{ name: 'quickReactions', value: true }])
+			.withUserPreference('featuresPreview', [{ name: 'secondarySidebar', value: true }])
 			.build(),
 	});
 

packages/ui-client/src/hooks/useFeaturePreviewList.ts

@@ -1,6 +1,6 @@
 import type { TranslationKey } from '@rocket.chat/ui-contexts';
 
-export type FeaturesAvailable = 'quickReactions' | 'contextualbarResizable' | 'newNavigation' | 'secondarySidebar';
+export type FeaturesAvailable = 'contextualbarResizable' | 'newNavigation' | 'secondarySidebar';
 
 export type FeaturePreviewProps = {
 	name: FeaturesAvailable;
@@ -19,15 +19,6 @@ export type FeaturePreviewProps = {
 
 // TODO: Move the features preview array to another directory to be accessed from both BE and FE.
 export const defaultFeaturesPreview: FeaturePreviewProps[] = [
-	{
-		name: 'quickReactions',
-		i18n: 'Quick_reactions',
-		description: 'Quick_reactions_description',
-		group: 'Message',
-		imageUrl: 'images/featurePreview/quick-reactions.png',
-		value: false,
-		enabled: true,
-	},
 	{
 		name: 'contextualbarResizable',
 		i18n: 'Contextualbar_resizable',