snapshot of https://github.com/RocketChat/Rocket.Chat.git (develop, 2026-09-16; blobs > 131072B omitted)

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

@@ -0,0 +1,37 @@
+import { mockAppRoot } from '@rocket.chat/mock-providers';
+import { render, screen } from '@testing-library/react';
+
+import FeaturePreview from './FeaturePreview';
+import FeaturePreviewOff from './FeaturePreviewOff';
+import FeaturePreviewOn from './FeaturePreviewOn';
+
+test('should renders off if the feature is disabled', async () => {
+	render(
+		<FeaturePreview feature='secondarySidebar'>
+			<FeaturePreviewOn>on</FeaturePreviewOn>
+			<FeaturePreviewOff>off</FeaturePreviewOff>
+		</FeaturePreview>,
+		{
+			wrapper: mockAppRoot().withSetting('Accounts_AllowFeaturePreview', true).build(),
+		},
+	);
+
+	expect(screen.getByText('off')).toBeInTheDocument();
+});
+
+test('should renders on if the feature is enabled', async () => {
+	render(
+		<FeaturePreview feature='secondarySidebar'>
+			<FeaturePreviewOn>on</FeaturePreviewOn>
+			<FeaturePreviewOff>off</FeaturePreviewOff>
+		</FeaturePreview>,
+		{
+			wrapper: mockAppRoot()
+				.withSetting('Accounts_AllowFeaturePreview', true)
+				.withUserPreference('featuresPreview', [{ name: 'secondarySidebar', value: true }])
+				.build(),
+		},
+	);
+
+	expect(screen.getByText('on')).toBeInTheDocument();
+});

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

@@ -0,0 +1,25 @@
+import type { ReactElement } from 'react';
+import { Children, Suspense, cloneElement } from 'react';
+
+import { useFeaturePreview } from '../../hooks/useFeaturePreview';
+import type { FeaturesAvailable } from '../../hooks/useFeaturePreviewList';
+
+export type FeaturePreviewProps = {
+	feature: FeaturesAvailable;
+	disabled?: boolean;
+	children: ReactElement<{ featureToggleEnabled?: boolean }>[];
+};
+
+const FeaturePreview = ({ feature, disabled = false, children }: FeaturePreviewProps) => {
+	const featureToggleEnabled = useFeaturePreview(feature) && !disabled;
+
+	const toggledChildren = Children.map(children, (child) =>
+		cloneElement(child, {
+			featureToggleEnabled,
+		}),
+	);
+
+	return <Suspense fallback={null}>{toggledChildren}</Suspense>;
+};
+
+export default FeaturePreview;

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

@@ -0,0 +1,21 @@
+import { Badge } from '@rocket.chat/fuselage';
+import { useTranslation } from 'react-i18next';
+
+import { usePreferenceFeaturePreviewList } from '../../hooks/usePreferenceFeaturePreviewList';
+
+const FeaturePreviewBadge = () => {
+	const { t } = useTranslation();
+	const { unseenFeatures } = usePreferenceFeaturePreviewList();
+
+	if (!unseenFeatures) {
+		return null;
+	}
+
+	return (
+		<Badge variant='primary' aria-label={t('Unseen_features')}>
+			{unseenFeatures}
+		</Badge>
+	);
+};
+
+export default FeaturePreviewBadge;

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type FeaturePreviewOnProps = {
+	children: ReactNode;
+	featureToggleEnabled?: boolean;
+};
+
+const FeaturePreviewOff = ({ children, featureToggleEnabled }: FeaturePreviewOnProps) => <>{!featureToggleEnabled && children}</>;
+
+export default FeaturePreviewOff;

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

@@ -0,0 +1,10 @@
+import type { ReactNode } from 'react';
+
+export type FeaturePreviewOnProps = {
+	children: ReactNode;
+	featureToggleEnabled?: boolean;
+};
+
+const FeaturePreviewOn = ({ children, featureToggleEnabled }: FeaturePreviewOnProps) => <>{featureToggleEnabled && children}</>;
+
+export default FeaturePreviewOn;

packages/ui-client/src/components/FeaturePreview/index.ts

@@ -0,0 +1,4 @@
+export { default as FeaturePreview } from './FeaturePreview';
+export { default as FeaturePreviewBadge } from './FeaturePreviewBadge';
+export { default as FeaturePreviewOn } from './FeaturePreviewOn';
+export { default as FeaturePreviewOff } from './FeaturePreviewOff';