Add some components of admin/info to Storybook

.storybook/config.js

@@ -1,3 +1,37 @@
-import { configure } from '@storybook/react';
+import { action } from '@storybook/addon-actions';
+import { addDecorator, configure } from '@storybook/react';
+import React from 'react';
+
+import { ConnectionStatusProvider } from '../client/components/providers/ConnectionStatusProvider.mock';
+import { TranslationProvider } from '../client/components/providers/TranslationProvider.mock';
+
+addDecorator(function RocketChatDecorator(fn) {
+	require('@rocket.chat/icons/dist/font/RocketChat.minimal.css');
+	require('../app/theme/client/main.css');
+
+	const linkElement = document.getElementById('theme-styles') || document.createElement('link');
+	if (linkElement.id !== 'theme-styles') {
+		linkElement.setAttribute('id', 'theme-styles');
+		linkElement.setAttribute('rel', 'stylesheet');
+		linkElement.setAttribute('href', 'https://open.rocket.chat/theme.css');
+		document.head.appendChild(linkElement);
+	}
+
+	return <ConnectionStatusProvider connected status='connected' reconnect={action('reconnect')}>
+		<TranslationProvider>
+			<style>{`
+				body {
+					background-color: white;
+				}
+			`}</style>
+			<div className='rc-old'>
+				<div dangerouslySetInnerHTML={{__html: require('!!raw-loader!../private/public/icons.svg').default}} />
+				<div className='global-font-family color-primary-font-color'>
+					{fn()}
+				</div>
+			</div>
+		</TranslationProvider>
+	</ConnectionStatusProvider>;
+});
 
 configure(require.context('../client', true, /\.stories\.js$/), module);

.storybook/helpers.js

@@ -1,44 +1 @@
-import { action } from '@storybook/addon-actions';
-import '@rocket.chat/icons/dist/font/RocketChat.minimal.css';
-import React from 'react';
-
-import '../app/theme/client/main.css';
-import { ConnectionStatusProvider } from '../client/components/providers/ConnectionStatusProvider.mock';
-import { TranslationProvider } from '../client/components/providers/TranslationProvider.mock';
-
-export const rocketChatWrapper = (fn) =>
-	<ConnectionStatusProvider connected status='connected' reconnect={action('reconnect')}>
-		<TranslationProvider>
-			<style>{`
-				body {
-					background-color: white;
-				}
-
-				.global-font-family {
-					font-family:
-						-apple-system,
-						BlinkMacSystemFont,
-						'Segoe UI',
-						Roboto,
-						Oxygen,
-						Ubuntu,
-						Cantarell,
-						'Helvetica Neue',
-						'Apple Color Emoji',
-						'Segoe UI Emoji',
-						'Segoe UI Symbol',
-						'Meiryo UI',
-						Arial,
-						sans-serif;
-				}
-
-				.color-primary-font-color {
-					color: #444;
-				}
-			`}</style>
-			<div dangerouslySetInnerHTML={{__html: require('!!raw-loader!../private/public/icons.svg').default}} />
-			<div className='global-font-family color-primary-font-color'>
-				{fn()}
-			</div>
-		</TranslationProvider>
-</ConnectionStatusProvider>;
+export const dummyDate = new Date(2015, 4, 19);

client/components/admin/info/BuildEnvironmentSection.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { InformationList } from './InformationList';
 import { InformationEntry } from './InformationEntry';
 import { formatDate } from './formatters';

client/components/admin/info/BuildEnvironmentSection.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { dummyDate } from '../../../../.storybook/helpers';
+import { BuildEnvironmentSection } from './BuildEnvironmentSection';
+
+export default {
+	title: 'admin/info/BuildEnvironmentSection',
+	component: BuildEnvironmentSection,
+};
+
+const info = {
+	compile: {
+		platform: 'info.compile.platform',
+		arch: 'info.compile.arch',
+		osRelease: 'info.compile.osRelease',
+		nodeVersion: 'info.compile.nodeVersion',
+		date: dummyDate,
+	},
+};
+
+export const _default = () => <BuildEnvironmentSection info={info} />;

client/components/admin/info/CommitSection.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { InformationList } from './InformationList';
 import { InformationEntry } from './InformationEntry';
 

client/components/admin/info/CommitSection.stories.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { CommitSection } from './CommitSection';
+
+export default {
+	title: 'admin/info/CommitSection',
+	component: CommitSection,
+};
+
+const info = {
+	commit: {
+		hash: 'info.commit.hash',
+		date: 'info.commit.date',
+		branch: 'info.commit.branch',
+		tag: 'info.commit.tag',
+		author: 'info.commit.author',
+		subject: 'info.commit.subject',
+	},
+};
+
+export const _default = () => <CommitSection info={info} />;

client/components/admin/info/InformationList.stories.js

@@ -0,0 +1,20 @@
+import React from 'react';
+
+import { InformationList } from './InformationList';
+import { InformationEntry } from './InformationEntry';
+
+export default {
+	title: 'admin/info/InformationList',
+	component: InformationList,
+	decorators: [
+		(fn) => <section className='page-container page-list'>
+			<div className='content'>
+				{fn()}
+			</div>
+		</section>,
+	],
+};
+
+export const _default = () => <InformationList>
+	<InformationEntry label='Key'>Value</InformationEntry>
+</InformationList>;

client/components/admin/info/InformationPage.js

@@ -9,7 +9,7 @@ import { SideNav } from '../../../../app/ui-utils/client/lib/SideNav';
 import { Header } from '../../header/Header';
 import { Link } from '../../basic/Link';
 import { ErrorAlert } from '../../basic/ErrorAlert';
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { RocketChatSection } from './RocketChatSection';
 import { CommitSection } from './CommitSection';
 import { RuntimeEnvironmentSection } from './RuntimeEnvironmentSection';

client/components/admin/info/InstancesSection.js

@@ -1,7 +1,7 @@
 import React from 'react';
 
 import { formatDate } from './formatters';
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { InformationList } from './InformationList';
 import { InformationEntry } from './InformationEntry';
 

client/components/admin/info/InstancesSection.stories.js

@@ -0,0 +1,29 @@
+import React from 'react';
+
+import { dummyDate } from '../../../../.storybook/helpers';
+import { InstancesSection } from './InstancesSection';
+
+export default {
+	title: 'admin/info/InstancesSection',
+	component: InstancesSection,
+};
+
+const instances = [
+	{
+		address: 'instances[].address',
+		broadcastAuth: 'instances[].broadcastAuth',
+		currentStatus: {
+			connected: 'instances[].currentStatus.connected',
+			retryCount: 'instances[].currentStatus.retryCount',
+			status: 'instances[].currentStatus.status',
+		},
+		instanceRecord: {
+			_id: 'instances[].instanceRecord._id',
+			pid: 'instances[].instanceRecord.pid',
+			_createdAt: dummyDate,
+			_updatedAt: dummyDate,
+		},
+	},
+];
+
+export const _default = () => <InstancesSection instances={instances} />;

client/components/admin/info/RocketChatSection.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { SkeletonText } from './SkeletonText';
 import { formatDate, formatHumanReadableTime } from './formatters';
 import { InformationList } from './InformationList';

client/components/admin/info/RocketChatSection.stories.js

@@ -0,0 +1,33 @@
+import React from 'react';
+
+import { dummyDate } from '../../../../.storybook/helpers';
+import { RocketChatSection } from './RocketChatSection';
+
+export default {
+	title: 'admin/info/RocketChatSection',
+	component: RocketChatSection,
+};
+
+const info = {
+	marketplaceApiVersion: 'info.marketplaceApiVersion',
+};
+
+const statistics = {
+	version: 'statistics.version',
+	migration: {
+		version: 'statistics.migration.version',
+		lockedAt: dummyDate,
+	},
+	installedAt: dummyDate,
+	process: {
+		uptime: 10 * 24 * 60 * 60,
+		pid: 'statistics.process.pid',
+	},
+	uniqueId: 'statistics.uniqueId',
+	instanceCount: 1,
+	oplogEnabled: true,
+};
+
+export const _default = () => <RocketChatSection info={info} statistics={statistics} />;
+
+export const loading = () => <RocketChatSection info={{}} statistics={{}} isLoading />;

client/components/admin/info/RuntimeEnvironmentSection.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { SkeletonText } from './SkeletonText';
 import { formatMemorySize, formatHumanReadableTime, formatCPULoad } from './formatters';
 import { InformationList } from './InformationList';

client/components/admin/info/RuntimeEnvironmentSection.stories.js

@@ -0,0 +1,31 @@
+import React from 'react';
+
+import { RuntimeEnvironmentSection } from './RuntimeEnvironmentSection';
+
+export default {
+	title: 'admin/info/RuntimeEnvironmentSection',
+	component: RuntimeEnvironmentSection,
+};
+
+const statistics = {
+	os: {
+		type: 'statistics.os.type',
+		platform: 'statistics.os.platform',
+		arch: 'statistics.os.arch',
+		release: 'statistics.os.release',
+		uptime: 10 * 24 * 60 * 60,
+		loadavg: [1.1, 1.5, 1.15],
+		totalmem: 1024,
+		freemem: 1024,
+		cpus: [{}],
+	},
+	process: {
+		nodeVersion: 'statistics.process.nodeVersion',
+	},
+	mongoVersion: 'statistics.mongoVersion',
+	mongoStorageEngine: 'statistics.mongoStorageEngine',
+};
+
+export const _default = () => <RuntimeEnvironmentSection statistics={statistics} />;
+
+export const loading = () => <RuntimeEnvironmentSection statistics={{}} isLoading />;

client/components/admin/info/SkeletonText.css

@@ -4,15 +4,15 @@
 	min-width: 10em;
 	height: 1em;
 
-	animation: Admin__InformationPage__SkeletonText__animation 1s linear 1s infinite running;
+	animation: Admin__InformationPage__SkeletonText__animation 1s linear 0s infinite running;
 
 	opacity: 0.25;
 	background:
 		linear-gradient(
 			to right,
-			transparent,
-			currentColor 50%,
-			transparent 100%
+			currentColor,
+			transparent 10%,
+			currentColor 20%
 		);
 	background-size: 100vw 100vh;
 }

client/components/admin/info/SkeletonText.stories.js

@@ -0,0 +1,10 @@
+import React from 'react';
+
+import { SkeletonText } from './SkeletonText';
+
+export default {
+	title: 'admin/info/SkeletonText',
+	component: SkeletonText,
+};
+
+export const _default = () => <SkeletonText />;

client/components/admin/info/UsageSection.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { SkeletonText } from './SkeletonText';
 import { formatMemorySize } from './formatters';
 import { InformationList } from './InformationList';

client/components/admin/info/UsageSection.stories.js

@@ -0,0 +1,51 @@
+import React from 'react';
+
+import { UsageSection } from './UsageSection';
+
+export default {
+	title: 'admin/info/UsageSection',
+	component: UsageSection,
+};
+
+const statistics = {
+	totalUsers: 'statistics.totalUsers',
+	nonActiveUsers: 'nonActiveUsers',
+	activeUsers: 'statistics.activeUsers',
+	totalConnectedUsers: 'statistics.totalConnectedUsers',
+	onlineUsers: 'statistics.onlineUsers',
+	awayUsers: 'statistics.awayUsers',
+	offlineUsers: 'statistics.offlineUsers',
+	totalRooms: 'statistics.totalRooms',
+	totalChannels: 'statistics.totalChannels',
+	totalPrivateGroups: 'statistics.totalPrivateGroups',
+	totalDirect: 'statistics.totalDirect',
+	totalLivechat: 'statistics.totalLivechat',
+	totalDiscussions: 'statistics.totalDiscussions',
+	totalThreads: 'statistics.totalThreads',
+	totalMessages: 'statistics.totalMessages',
+	totalChannelMessages: 'statistics.totalChannelMessages',
+	totalPrivateGroupMessages: 'statistics.totalPrivateGroupMessages',
+	totalDirectMessages: 'statistics.totalDirectMessages',
+	totalLivechatMessages: 'statistics.totalLivechatMessages',
+	uploadsTotal: 'statistics.uploadsTotal',
+	uploadsTotalSize: 1024,
+	integrations: {
+		totalIntegrations: 'statistics.integrations.totalIntegrations',
+		totalIncoming: 'statistics.integrations.totalIncoming',
+		totalIncomingActive: 'statistics.integrations.totalIncomingActive',
+		totalOutgoing: 'statistics.integrations.totalOutgoing',
+		totalOutgoingActive: 'statistics.integrations.totalOutgoingActive',
+		totalWithScriptEnabled: 'statistics.integrations.totalWithScriptEnabled',
+	},
+};
+
+const apps = {
+	totalInstalled: 'statistics.apps.totalInstalled',
+	totalActive: 'statistics.apps.totalActive',
+};
+
+export const _default = () => <UsageSection statistics={statistics} />;
+
+export const withApps = () => <UsageSection statistics={{ ...statistics, apps }} />;
+
+export const loading = () => <UsageSection statistics={{}} isLoading />;

client/components/basic/Button.stories.js

@@ -1,14 +1,10 @@
 import React from 'react';
 
-import { rocketChatWrapper } from '../../../.storybook/helpers';
 import { Button } from './Button';
 
 export default {
 	title: 'basic/Button',
 	component: Button,
-	decorators: [
-		rocketChatWrapper,
-	],
 };
 
 export const _default = () => <Button>Button</Button>;

client/components/basic/ErrorAlert.stories.js

@@ -1,14 +1,10 @@
 import React from 'react';
 
-import { rocketChatWrapper } from '../../../.storybook/helpers';
 import { ErrorAlert } from './ErrorAlert';
 
 export default {
 	title: 'basic/ErrorAlert',
 	component: ErrorAlert,
-	decorators: [
-		rocketChatWrapper,
-	],
 };
 
 export const _default = () => <ErrorAlert>Content</ErrorAlert>;

client/components/basic/Input.stories.js

@@ -1,14 +1,10 @@
 import React from 'react';
 
-import { rocketChatWrapper } from '../../../.storybook/helpers';
 import { Input } from './Input';
 
 export default {
 	title: 'basic/Input',
 	component: Input,
-	decorators: [
-		rocketChatWrapper,
-	],
 };
 
 export const _default = () => <Input />;

client/components/basic/Link.stories.js

@@ -1,14 +1,10 @@
 import React from 'react';
 
-import { rocketChatWrapper } from '../../../.storybook/helpers';
 import { Link } from './Link';
 
 export default {
 	title: 'basic/Link',
 	component: Link,
-	decorators: [
-		rocketChatWrapper,
-	],
 };
 
 export const _default = () => <Link href='#'>Link</Link>;

client/components/connectionStatus/ConnectionStatusAlert.js

@@ -2,7 +2,7 @@ import { Icon } from '@rocket.chat/fuselage';
 import React, { useEffect, useRef, useState } from 'react';
 
 import { useConnectionStatus, useReconnect } from '../contexts/ConnectionStatusContext';
-import { useTranslation } from '../contexts/TranslationContext';
+import { useTranslation } from '../../hooks/useTranslation';
 import './ConnectionStatusAlert.css';
 
 export function ConnectionStatusAlert() {

client/components/connectionStatus/ConnectionStatusAlert.stories.js

@@ -1,16 +1,12 @@
 import { action } from '@storybook/addon-actions';
 import React from 'react';
 
-import { rocketChatWrapper } from '../../../.storybook/helpers';
 import { ConnectionStatusAlert } from './ConnectionStatusAlert';
 import { ConnectionStatusProvider } from '../providers/ConnectionStatusProvider.mock';
 
 export default {
 	title: 'connectionStatus/ConnectionStatusAlert',
 	component: ConnectionStatusAlert,
-	decorators: [
-		rocketChatWrapper,
-	],
 };
 
 export const connected = () => <ConnectionStatusProvider connected status='connected' reconnect={action('reconnect')}>

client/components/contexts/MeteorContext.js

@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const MeteorContext = createContext({});

client/components/contexts/TranslationContext.js

@@ -1,4 +1,4 @@
-import { createContext, useContext } from 'react';
+import { createContext } from 'react';
 
 const translate = function(key) {
 	return key;
@@ -7,5 +7,3 @@ const translate = function(key) {
 translate.has = () => true;
 
 export const TranslationContext = createContext(translate);
-
-export const useTranslation = () => useContext(TranslationContext);

client/components/header/Header.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from '../contexts/TranslationContext';
+import { useTranslation } from '../../hooks/useTranslation';
 import { BurgerMenuButton } from './BurgerMenuButton';
 
 export function Header({

client/components/pageNotFound/PageNotFound.js

@@ -1,7 +1,7 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { useTranslation } from '../contexts/TranslationContext';
+import { useTranslation } from '../../hooks/useTranslation';
 import { useWipeInitialPageLoading } from '../../hooks/useWipeInitialPageLoading';
 import { ConnectionStatusAlert } from '../connectionStatus/ConnectionStatusAlert';
 import { useRoute } from '../contexts/RouterContext';

client/components/providers/MeteorProvider.js

@@ -1,15 +1,25 @@
+import { Meteor } from 'meteor/meteor';
+import { Tracker } from 'meteor/tracker';
 import React from 'react';
 
+import { MeteorContext } from '../contexts/MeteorContext';
 import { RouterProvider } from './RouterProvider';
 import { ConnectionStatusProvider } from './ConnectionStatusProvider';
 import { TranslationProvider } from './TranslationProvider';
 
+const contextValue = {
+	Meteor,
+	Tracker,
+};
+
 export function MeteorProvider({ children }) {
-	return <ConnectionStatusProvider>
-		<RouterProvider>
-			<TranslationProvider>
-				{children}
-			</TranslationProvider>
-		</RouterProvider>
-	</ConnectionStatusProvider>;
+	return <MeteorContext.Provider value={contextValue}>
+		<ConnectionStatusProvider>
+			<RouterProvider>
+				<TranslationProvider>
+					{children}
+				</TranslationProvider>
+			</RouterProvider>
+		</ConnectionStatusProvider>
+	</MeteorContext.Provider>;
 }

client/components/setupWizard/Epilogue.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Button } from '@rocket.chat/fuselage';
 
-import { useTranslation } from '../contexts/TranslationContext';
+import { useTranslation } from '../../hooks/useTranslation';
 import { useSetting } from '../../hooks/useSetting';
 import { setSetting } from './functions';
 import './Epilogue.css';

client/components/setupWizard/Pager.js

@@ -1,7 +1,7 @@
 import { Button, ButtonGroup } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { useTranslation } from '../contexts/TranslationContext';
+import { useTranslation } from '../../hooks/useTranslation';
 
 export function Pager({ disabled, onBackClick, isContinueEnabled = true }) {
 	const t = useTranslation();

client/components/setupWizard/SideBar.js

@@ -1,6 +1,6 @@
 import React from 'react';
 
-import { useTranslation } from '../contexts/TranslationContext';
+import { useTranslation } from '../../hooks/useTranslation';
 import { useSetupWizardStepsState } from './StepsState';
 import './SideBar.css';
 

client/components/setupWizard/StepHeader.js

@@ -1,7 +1,7 @@
 import { Headline } from '@rocket.chat/fuselage';
 import React from 'react';
 
-import { useTranslation } from '../contexts/TranslationContext';
+import { useTranslation } from '../../hooks/useTranslation';
 import './StepHeader.css';
 
 export function StepHeader({ number, title }) {

client/components/setupWizard/Steps.js

@@ -1,9 +1,9 @@
 import React from 'react';
 
+import { useTranslation } from '../../hooks/useTranslation';
 import { AdminUserInformationStep } from './steps/AdminUserInformationStep';
 import { SettingsBasedStep } from './steps/SettingsBasedStep';
 import { RegisterServerStep } from './steps/RegisterServerStep';
-import { useTranslation } from '../contexts/TranslationContext';
 import { Epilogue } from './Epilogue';
 import { SideBar } from './SideBar';
 import { useSetupWizardStepsState, finalStep } from './StepsState';

client/components/setupWizard/steps/AdminUserInformationStep.js

@@ -8,7 +8,7 @@ import { handleError } from '../../../../app/utils/client';
 import { callbacks } from '../../../../app/callbacks/client';
 import { useFocus } from '../../../hooks/useFocus';
 import { useSetting } from '../../../hooks/useSetting';
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { useSetupWizardStepsState } from '../StepsState';
 import { Step } from '../Step';
 import { StepHeader } from '../StepHeader';

client/components/setupWizard/steps/RegisterServerStep.js

@@ -3,7 +3,7 @@ import React, { useRef, useState } from 'react';
 
 import { call } from '../../../../app/ui-utils/client';
 import { handleError } from '../../../../app/utils/client';
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { Icon } from '../../basic/Icon';
 import { Pager } from '../Pager';
 import { useSetupWizardParameters } from '../ParametersProvider';

client/components/setupWizard/steps/SettingsBasedStep.js

@@ -4,7 +4,7 @@ import React, { useEffect, useReducer, useState } from 'react';
 
 import { handleError } from '../../../../app/utils/client';
 import { useFocus } from '../../../hooks/useFocus';
-import { useTranslation } from '../../contexts/TranslationContext';
+import { useTranslation } from '../../../hooks/useTranslation';
 import { useReactiveValue } from '../../../hooks/useReactiveValue';
 import { Pager } from '../Pager';
 import { useSetupWizardParameters } from '../ParametersProvider';

client/hooks/useMeteor.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { MeteorContext } from '../components/contexts/MeteorContext';
+
+export const useMeteor = () => useContext(MeteorContext).Meteor;

client/hooks/useReactiveValue.js

@@ -1,10 +1,16 @@
-import { Tracker } from 'meteor/tracker';
 import { useEffect, useState } from 'react';
 
+import { useTracker } from './useTracker';
+
 export const useReactiveValue = (getValue, deps = []) => {
+	const Tracker = useTracker();
 	const [value, setValue] = useState(getValue);
 
 	useEffect(() => {
+		if (!Tracker) {
+			return;
+		}
+
 		const computation = Tracker.autorun(() => {
 			const newValue = getValue();
 			setValue(() => newValue);

client/hooks/useTracker.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { MeteorContext } from '../components/contexts/MeteorContext';
+
+export const useTracker = () => useContext(MeteorContext).Tracker;

client/hooks/useTranslation.js

@@ -0,0 +1,5 @@
+import { useContext } from 'react';
+
+import { TranslationContext } from '../components/contexts/TranslationContext';
+
+export const useTranslation = () => useContext(TranslationContext);