WIP: Implement first part of analytics tab "Header"

Implemented almost all of the analytics tab header, theres a problem with the icon color that has to be solved with fuselage and design.

apps/meteor/client/views/admin/viewLogs/AnalyticsReports.tsx

@@ -1,15 +1,40 @@
-import { Box } from '@rocket.chat/fuselage';
+import { Box, Icon } from '@rocket.chat/fuselage';
+import { Link } from '@rocket.chat/layout';
+import { useTranslation } from '@rocket.chat/ui-contexts';
 import React from 'react';
+import { Trans } from 'react-i18next';
 
 import { useAnalyticsObject } from './hooks/useAnalyticsObject';
 
 const AnalyticsReports = () => {
+	const t = useTranslation();
 	const analytics = useAnalyticsObject();
 
 	return (
-		<Box display='flex' flexDirection='column' padding={8} flexGrow={1} color='default' bg='neutral' borderRadius='x4' overflow='scroll'>
-			<pre>{JSON.stringify(analytics, null, '\t')}</pre>
-		</Box>
+		<>
+			<Box p={20} pbe={28} mbe={24}>
+				<Box display='flex' flexDirection='row' alignItems='center' mbe={20}>
+					<Box display='flex' justifyContent='center' alignItems='center' borderRadius={2} p={4} mie={8} bg='status-background-info'>
+						<Icon name='info' size={20} color='info' />
+					</Box>
+					<Box fontScale='h4'>{t('How_and_why_we_collect_usage_data')}</Box>
+				</Box>
+				<Box>
+					<Trans i18nKey='analytics.page.bySending'>
+						{"By sending your statistics, you'll help us identify how many instances of "}
+						<Link href='https://rocket.chat/' target='_blank' rel='noopener noreferrer'>
+							Rocket.Chat
+						</Link>
+						{
+							"are deployed, as well as how good the system is behaving, so we can further improve it. Don'\t worry, as no user information is sent and all the information we receive is kept confidential."
+						}
+					</Trans>
+				</Box>
+			</Box>
+			<Box display='flex' flexDirection='column' padding={8} flexGrow={1} color='default' bg='neutral' borderRadius='x4' overflow='scroll'>
+				<pre>{JSON.stringify(analytics, null, '\t')}</pre>
+			</Box>
+		</>
 	);
 };
 

apps/meteor/packages/rocketchat-i18n/i18n/en.i18n.json

@@ -424,6 +424,7 @@
   "Analytics_features_users_Description": "Tracks custom events related to actions related to users (password reset times, profile picture change, etc).",
   "Analytics_Google": "Google Analytics",
   "Analytics_Google_id": "Tracking ID",
+  "analytics.page.bySending": "By sending your statistics, you'll help us identify how many instances of <1>Rocket.Chat</1> are deployed, as well as how good the system is behaving, so we can further improve it. Don't worry, as no user information is sent and all the information we receive is kept confidential.",
   "Analyze_practical_usage": "Analyze practical usage statistics about users, messages and channels",
   "and": "and",
   "And_more": "And {{length}} more",
@@ -2472,6 +2473,7 @@
   "Hospitality_Businness": "Hospitality Business",
   "hours": "hours",
   "Hours": "Hours",
+  "How_and_why_we_collect_usage_data": "How and why we collect usage data",
   "How_friendly_was_the_chat_agent": "How friendly was the chat agent?",
   "How_knowledgeable_was_the_chat_agent": "How knowledgeable was the chat agent?",
   "How_long_to_wait_after_agent_goes_offline": "How Long to Wait After Agent Goes Offline",