Ob 5386

.github/workflows/storybook.yml

@@ -0,0 +1,45 @@
+name: Deploy storybook to Pages
+
+on:
+    push:
+        branches: ['develop']
+
+    workflow_dispatch:
+
+permissions:
+    contents: read
+    pages: write
+    id-token: write
+
+concurrency:
+    group: 'pages'
+    cancel-in-progress: false
+
+jobs:
+    deploy:
+        environment:
+            name: github-pages
+            url: ${{ steps.deployment.outputs.page_url }}
+        runs-on: ubuntu-latest
+        steps:
+            - name: Checkout
+              uses: actions/checkout@v3
+            - uses: actions/setup-node@v3
+              with:
+                  node-version: 18
+                  cache: 'npm'
+            - run: npm ci
+            - name: set env
+              run: |
+                  echo REACT_APP_API_URL=https://dev.diakonie.dev.virtual-identity.com >> $GITHUB_ENV
+            - name: Run build
+              run: npm run build-storybook
+            - name: Setup Pages
+              uses: actions/configure-pages@v3
+            - name: Upload artifact
+              uses: actions/upload-pages-artifact@v1
+              with:
+                  path: './storybook-static'
+            - name: Deploy to GitHub Pages
+              id: deployment
+              uses: actions/deploy-pages@v2

.gitignore

@@ -24,6 +24,7 @@
 .env.test.local
 .env.production.local
 .idea
+storybook-static
 .storage
 
 # cypress

.storybook/main.ts

@@ -0,0 +1,73 @@
+import type { StorybookConfig } from '@storybook/react-webpack5';
+import * as webpackConfigFactory from '../config/webpack.config';
+import { Configuration } from 'webpack';
+
+const config: StorybookConfig = {
+	stories: ['../src/**/*.stories.@(js|jsx|ts|tsx)'],
+	addons: [
+		'@storybook/addon-links',
+		'@storybook/addon-essentials',
+		'@storybook/addon-interactions',
+		'storybook-react-i18next'
+	],
+	framework: {
+		name: '@storybook/react-webpack5',
+		options: {}
+	},
+	webpackFinal: async (config, { configType }) => {
+		// @ts-ignore
+		const webpackConfig = webpackConfigFactory.default(
+			configType.toLowerCase()
+		);
+
+		return {
+			...config,
+			resolve: {
+				...config.resolve,
+				modules: [
+					...webpackConfig.resolve.modules,
+					...config.resolve.modules
+				],
+				extensions: [
+					...webpackConfig.resolve.extensions,
+					...config.resolve.extensions
+				],
+				alias: {
+					...webpackConfig.resolve.alias,
+					...config.resolve.alias
+				},
+				plugins: [...webpackConfig.resolve.plugins]
+			},
+			plugins: [...webpackConfig.plugins, ...config.plugins],
+			module: {
+				...config.module,
+				rules: [
+					// Exclude svg from storybook file-loader
+					...config.module.rules.map((r: any) => {
+						if (r.test && /svg/.test(r.test)) {
+							// Silence the Storybook loaders for SVG files
+							return { ...r, exclude: /\.svg$/i };
+						}
+						return r;
+					}),
+					// Filter the last catch all because storybook needs to handle mjs files
+					...webpackConfig.module.rules.map((r) => {
+						if (!r.oneOf) {
+							return r;
+						}
+						return {
+							...r,
+							oneOf: r.oneOf.filter(
+								(o) => o.type !== 'asset/resource'
+							)
+						};
+					})
+				]
+			}
+		} as Configuration;
+	},
+	docs: {
+		autodocs: 'tag'
+	}
+};
+export default config;

.storybook/preview.tsx

@@ -0,0 +1,82 @@
+import '../src/resources/styles/styles.scss';
+import '../src/resources/styles/mui-variables-mapping.scss';
+import i18n from 'i18next';
+import { ThemeProvider } from '@mui/material';
+import { Preview } from '@storybook/react';
+import * as React from 'react';
+import theme from '../src/extensions/theme';
+import { config } from '../src/resources/scripts/config';
+import { LegalLinksProvider } from '../src/globalState/provider/LegalLinksProvider';
+import { init, FALLBACK_LNG } from '../src/i18n';
+import { BrowserRouter as Router } from 'react-router-dom';
+import { Loading } from '../src/components/app/Loading';
+import { Suspense } from 'react';
+import {
+	AppConfigContext,
+	AppConfigProvider,
+	RegistrationContext
+} from '../src/globalState';
+
+export const withMuiTheme = (Story) => (
+	<Router>
+		<Suspense fallback={<Loading />}>
+			<AppConfigContext.Provider value={config}>
+				<RegistrationContext.Provider
+					value={{
+						setDisabledNextButton: () => null,
+						registrationData: {
+							agency: null,
+							agencyId: null,
+							username: null,
+							password: null,
+							zipcode: null,
+							mainTopic: {
+								id: 1,
+								name: 'Topic',
+								slug: 'topic1',
+								description: '',
+								internalIdentifier: 'topic1',
+								status: '',
+								createDate: '',
+								updateDate: ''
+							},
+							mainTopicId: 1
+						}
+					}}
+				>
+					<ThemeProvider theme={theme}>
+						<LegalLinksProvider legalLinks={[]}>
+							<Story />
+						</LegalLinksProvider>
+					</ThemeProvider>
+				</RegistrationContext.Provider>
+			</AppConfigContext.Provider>
+		</Suspense>
+	</Router>
+);
+
+export const decorators = [withMuiTheme];
+init(config.i18n, null);
+
+const preview: Preview = {
+	parameters: {
+		i18n,
+		actions: { argTypesRegex: '^on[A-Z].*' },
+		controls: {
+			matchers: {
+				color: /(background|color)$/i,
+				date: /Date$/
+			}
+		}
+	},
+	globals: {
+		locale: FALLBACK_LNG,
+		locales: {
+			de: { icon: '🇩🇪', title: 'Deutsch', right: 'DE' },
+			en: { icon: '🇺🇸', title: 'Englisch', right: 'EN' }
+		}
+	},
+	decorators: [withMuiTheme]
+};
+
+export default preview;

cypress.config.js

@@ -33,6 +33,7 @@ module.exports = defineConfig(
 	_.mergeWith(
 		{
 			e2e: {
+				testIsolation: true,
 				baseUrl: 'http://localhost:9001',
 				supportFile: 'cypress/support/e2e.{js,jsx,ts,tsx}',
 				setupNodeEvents(on, config) {
@@ -47,6 +48,8 @@ module.exports = defineConfig(
 			retries: {
 				runMode: 2
 			},
+			experimentalMemoryManagement: true,
+			numTestsKeptInMemory: 20,
 			video: false,
 			chromeWebSecurity: false,
 			viewportWidth: 1200,

cypress/e2e/messages/attachments/base.cy.ts

@@ -0,0 +1,33 @@
+import { SUB_STREAM_ROOM_MESSAGES } from '../../../../src/components/app/RocketChat';
+import {
+	closeWebSocketServer,
+	mockWebSocket,
+	startWebSocketServer
+} from '../../../support/websocket';
+
+describe('Messages - Attachments', () => {
+	before(() => {
+		startWebSocketServer();
+	});
+
+	after(() => {
+		closeWebSocketServer();
+	});
+
+	beforeEach(() => {
+		mockWebSocket();
+	});
+
+	it('should allow to send a message with attachment', () => {
+		cy.fastLogin();
+
+		cy.get('[data-cy=session-list-item]').click();
+		cy.wait('@sessionRooms');
+		cy.wait('@messages');
+
+		cy.get('.textarea__attachmentInput').attachFile('empty.pdf');
+		cy.get('.textarea__iconWrapper').click();
+
+		cy.wait('@attachmentUpload');
+	});
+});

cypress/e2e/messages/attachments/formal.cy.ts

@@ -0,0 +1,45 @@
+import {
+	closeWebSocketServer,
+	mockWebSocket,
+	startWebSocketServer
+} from '../../../support/websocket';
+
+describe('Messages - Attachments - Formal', () => {
+	before(() => {
+		startWebSocketServer();
+	});
+
+	after(() => {
+		closeWebSocketServer();
+	});
+
+	beforeEach(() => {
+		mockWebSocket();
+	});
+
+	it('should show inline error when quota is reached', () => {
+		cy.willReturn('attachmentUpload', {
+			statusCode: 403,
+			headers: {
+				'X-Reason': 'QUOTA_REACHED'
+			}
+		});
+
+		cy.fastLogin();
+
+		cy.get('[data-cy=session-list-item]').click();
+		cy.wait('@messages');
+
+		cy.get('.textarea__attachmentInput').attachFile('empty.pdf');
+		cy.get('.textarea__iconWrapper').click();
+
+		cy.wait('@attachmentUpload');
+
+		cy.window()
+			.its('i18n')
+			.then((i18n) => {
+				i18n.changeLanguage('cimode');
+				cy.contains('attachments.error.quota.headline');
+			});
+	});
+});

cypress/e2e/messages/attachments/informal.cy.ts

@@ -0,0 +1,49 @@
+import {
+	closeWebSocketServer,
+	mockWebSocket,
+	startWebSocketServer
+} from '../../../support/websocket';
+
+describe('Messages - Attachments - Informal', () => {
+	before(() => {
+		startWebSocketServer();
+	});
+
+	after(() => {
+		closeWebSocketServer();
+	});
+
+	beforeEach(() => {
+		mockWebSocket();
+	});
+
+	it('should show inline error when quota is reached', () => {
+		cy.willReturn('userData', {
+			formalLanguage: false
+		});
+
+		cy.willReturn('attachmentUpload', {
+			statusCode: 403,
+			headers: {
+				'X-Reason': 'QUOTA_REACHED'
+			}
+		});
+
+		cy.fastLogin();
+
+		cy.get('[data-cy=session-list-item]').click();
+		cy.wait('@messages');
+
+		cy.get('.textarea__attachmentInput').attachFile('empty.pdf');
+		cy.get('.textarea__iconWrapper').click();
+
+		cy.wait('@attachmentUpload');
+
+		cy.window()
+			.its('i18n')
+			.then((i18n) => {
+				i18n.changeLanguage('cimode');
+				cy.contains('attachments.error.quota.headline');
+			});
+	});
+});