[NEW] Collapsible Message (#3879)

* create new collapsible component

* create collapsible tests and update snapshot

* fix quote :)

* update snapshot

* add support to color

* add collapsed prop

* fix some styles

* fix tests

* wip

* clean

* add CollapsibleQuote story

* better style

* update snapshots

* add better tests

* remove testID

* update storyshot

app/constants/colors.ts

@@ -66,6 +66,8 @@ export const themes: any = {
 		previewTintColor: '#ffffff',
 		backdropOpacity: 0.3,
 		attachmentLoadingOpacity: 0.7,
+		collapsibleQuoteBorder: '#CBCED1',
+		collapsibleChevron: '#6C727A',
 		...mentions
 	},
 	dark: {
@@ -114,6 +116,8 @@ export const themes: any = {
 		previewTintColor: '#ffffff',
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3,
+		collapsibleQuoteBorder: '#CBCED1',
+		collapsibleChevron: '#6C727A',
 		...mentions
 	},
 	black: {
@@ -162,6 +166,8 @@ export const themes: any = {
 		previewTintColor: '#ffffff',
 		backdropOpacity: 0.9,
 		attachmentLoadingOpacity: 0.3,
+		collapsibleQuoteBorder: '#CBCED1',
+		collapsibleChevron: '#6C727A',
 		...mentions
 	}
 };

app/containers/message/Attachments.tsx

@@ -10,6 +10,7 @@ import Reply from './Reply';
 import Button from '../Button';
 import styles from './styles';
 import MessageContext from './Context';
+import CollapsibleQuote from './Components/CollapsibleQuote';
 
 const AttachedActions = ({ attachment, theme }: IMessageAttachedActions) => {
 	const { onAnswerButtonPress } = useContext(MessageContext);
@@ -51,6 +52,10 @@ const Attachments = React.memo(
 			if (file.actions && file.actions.length > 0) {
 				return <AttachedActions attachment={file} theme={theme} />;
 			}
+			if (file.title)
+				return (
+					<CollapsibleQuote key={index} index={index} attachment={file} timeFormat={timeFormat} getCustomEmoji={getCustomEmoji} />
+				);
 
 			return (
 				<Reply

app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories.js

@@ -0,0 +1,34 @@
+import { storiesOf } from '@storybook/react-native';
+import React from 'react';
+import { View } from 'react-native';
+
+import MessageContext from '../../Context';
+import CollapsibleQuote from '.';
+
+const testAttachment = {
+	ts: '1970-01-01T00:00:00.000Z',
+	title: 'Engineering (9 today)',
+	fields: [
+		{
+			title: 'Out Today:\n',
+			value:
+				'Ricardo Mellu, 1 day, until Fri Mar 11\nLoma, 1 day, until Fri Mar 11\nAnitta, 3 hours\nDiego Carlitos, 19 days, until Fri Mar 11\nGabriel Vasconcelos, 5 days, until Fri Mar 11\nJorge Leite, 1 day, until Fri Mar 11\nKevin Aleman, 1 day, until Fri Mar 11\nPierre, 1 day, until Fri Mar 11\nTiago Evangelista Pinto, 1 day, until Fri Mar 11'
+		}
+	],
+	attachments: [],
+	collapsed: true
+};
+
+const stories = storiesOf('Message', module);
+
+stories.add('Item', () => (
+	<View style={{ padding: 10 }}>
+		<MessageContext.Provider
+			value={{
+				onLongPress: () => {},
+				user: { username: 'Marcos' }
+			}}>
+			<CollapsibleQuote key={0} index={0} attachment={testAttachment} getCustomEmoji={() => {}} timeFormat='LT' />
+		</MessageContext.Provider>
+	</View>
+));

app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.test.tsx

@@ -0,0 +1,94 @@
+import { fireEvent, render, within } from '@testing-library/react-native';
+import React from 'react';
+
+import MessageContext from '../../Context';
+import CollapsibleQuote from '.';
+
+// For some reason a general mock didn't work, I have to do a search
+jest.mock('react-native-mmkv-storage', () => ({
+	Loader: jest.fn().mockImplementation(() => ({
+		setProcessingMode: jest.fn().mockImplementation(() => ({
+			withEncryption: jest.fn().mockImplementation(() => ({
+				initialize: jest.fn()
+			}))
+		}))
+	})),
+	create: jest.fn(),
+	MODES: { MULTI_PROCESS: '' }
+}));
+
+const testAttachment = {
+	ts: '1970-01-01T00:00:00.000Z',
+	title: 'Engineering (9 today)',
+	fields: [
+		{
+			title: 'Out Today:\n',
+			value:
+				'Ricardo Mellu, 1 day, until Fri Mar 11\nLoma, 1 day, until Fri Mar 11\nAnitta, 3 hours\nDiego Carlitos, 19 days, until Fri Mar 11\nGabriel Vasconcelos, 5 days, until Fri Mar 11\nJorge Leite, 1 day, until Fri Mar 11\nKevin Aleman, 1 day, until Fri Mar 11\nPierre, 1 day, until Fri Mar 11\nTiago Evangelista Pinto, 1 day, until Fri Mar 11'
+		}
+	],
+	attachments: [],
+	collapsed: true
+};
+
+const mockFn = jest.fn();
+
+const Render = () => (
+	<MessageContext.Provider
+		value={{
+			onLongPress: () => {},
+			user: { username: 'Marcos' }
+		}}>
+		<CollapsibleQuote key={0} index={0} attachment={testAttachment} getCustomEmoji={mockFn} timeFormat='LT' />
+	</MessageContext.Provider>
+);
+
+const touchableTestID = `collapsibleQuoteTouchable-${testAttachment.title}`;
+
+describe('CollapsibleQuote', () => {
+	test('rendered', async () => {
+		const { findByTestId } = render(<Render />);
+		const collapsibleQuoteTouchable = await findByTestId(touchableTestID);
+		expect(collapsibleQuoteTouchable).toBeTruthy();
+	});
+
+	test('title exists and is correct', async () => {
+		const { findByText } = render(<Render />);
+		const collapsibleQuoteTitle = await findByText(testAttachment.title);
+		expect(collapsibleQuoteTitle).toBeTruthy();
+		expect(collapsibleQuoteTitle.props.children).toEqual(testAttachment.title);
+	});
+
+	test('fields render title correctly', async () => {
+		const collapsibleQuote = render(<Render />);
+		const collapsibleQuoteTouchable = await collapsibleQuote.findByTestId(touchableTestID);
+		// open
+		fireEvent.press(collapsibleQuoteTouchable);
+		const open = within(collapsibleQuoteTouchable);
+		const fieldTitleOpen = open.getByTestId('collapsibleQuoteTouchableFieldTitle');
+		expect(fieldTitleOpen).toBeTruthy();
+		expect(fieldTitleOpen.props.children).toEqual(testAttachment.fields[0].title);
+		// close
+		fireEvent.press(collapsibleQuoteTouchable);
+		collapsibleQuote.rerender(<Render />);
+		const close = within(collapsibleQuoteTouchable);
+		const fieldTitleClosed = close.queryByTestId('collapsibleQuoteTouchableFieldTitle');
+		expect(fieldTitleClosed).toBeNull();
+	});
+
+	test('fields render fields correctly', async () => {
+		const collapsibleQuote = render(<Render />);
+		const collapsibleQuoteTouchable = await collapsibleQuote.findByTestId(touchableTestID);
+		// open
+		fireEvent.press(collapsibleQuoteTouchable);
+		const open = within(collapsibleQuoteTouchable);
+		const fieldValueOpen = open.getByLabelText(testAttachment.fields[0].value.split('\n')[0]);
+		expect(fieldValueOpen).toBeTruthy();
+		// close
+		fireEvent.press(collapsibleQuoteTouchable);
+		collapsibleQuote.rerender(<Render />);
+		const close = within(collapsibleQuoteTouchable);
+		const fieldValueClosed = close.queryByTestId(testAttachment.fields[0].value.split('\n')[0]);
+		expect(fieldValueClosed).toBeNull();
+	});
+});

app/containers/message/Components/CollapsibleQuote/__snapshots__/CollapsibleQuote.stories.storyshot

@@ -0,0 +1,3 @@
+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`Storyshots Message Item 1`] = `"{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"padding\\":10}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"accessible\\":true,\\"testID\\":\\"collapsibleQuoteTouchable-Engineering (9 today)\\",\\"hitSlop\\":{\\"top\\":4,\\"right\\":4,\\"bottom\\":4,\\"left\\":4},\\"focusable\\":true,\\"style\\":{\\"flexDirection\\":\\"row\\",\\"alignItems\\":\\"center\\",\\"marginTop\\":6,\\"borderWidth\\":1,\\"borderRadius\\":4,\\"minHeight\\":40,\\"backgroundColor\\":\\"#f3f4f5\\",\\"borderLeftColor\\":\\"#CBCED1\\",\\"borderTopColor\\":\\"#e1e5e8\\",\\"borderRightColor\\":\\"#e1e5e8\\",\\"borderBottomColor\\":\\"#e1e5e8\\",\\"borderLeftWidth\\":2,\\"opacity\\":1}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flex\\":1,\\"borderRadius\\":4,\\"padding\\":8}},\\"children\\":[{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"flexDirection\\":\\"row\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"style\\":[{\\"fontSize\\":16,\\"textAlign\\":\\"left\\",\\"backgroundColor\\":\\"transparent\\",\\"fontFamily\\":\\"System\\",\\"fontWeight\\":\\"500\\"},{\\"color\\":\\"#6C727A\\"}]},\\"children\\":[\\"Engineering (9 today)\\"]}]}]},{\\"type\\":\\"View\\",\\"props\\":{\\"style\\":{\\"width\\":20,\\"height\\":20,\\"right\\":8,\\"top\\":8,\\"justifyContent\\":\\"center\\",\\"alignItems\\":\\"center\\"}},\\"children\\":[{\\"type\\":\\"Text\\",\\"props\\":{\\"allowFontScaling\\":false,\\"style\\":[{\\"fontSize\\":22,\\"color\\":\\"#6C727A\\"},null,{\\"fontFamily\\":\\"custom\\",\\"fontWeight\\":\\"normal\\",\\"fontStyle\\":\\"normal\\"},{}]},\\"children\\":[\\"\\"]}]}]}]}]}"`;

app/containers/message/Components/CollapsibleQuote/index.tsx

@@ -0,0 +1,185 @@
+import { transparentize } from 'color2k';
+import { dequal } from 'dequal';
+import React, { useContext, useState } from 'react';
+import { StyleSheet, Text, View } from 'react-native';
+
+import { themes } from '../../../../constants/colors';
+import { IAttachment } from '../../../../definitions/IAttachment';
+import { TGetCustomEmoji } from '../../../../definitions/IEmoji';
+import { CustomIcon } from '../../../../lib/Icons';
+import { useTheme } from '../../../../theme';
+import sharedStyles from '../../../../views/Styles';
+import Markdown from '../../../markdown';
+import MessageContext from '../../Context';
+import Touchable from '../../Touchable';
+import { BUTTON_HIT_SLOP } from '../../utils';
+
+const styles = StyleSheet.create({
+	button: {
+		flexDirection: 'row',
+		alignItems: 'center',
+		marginTop: 6,
+		borderWidth: 1,
+		borderRadius: 4,
+		minHeight: 40
+	},
+	attachmentContainer: {
+		flex: 1,
+		borderRadius: 4,
+		padding: 8
+	},
+	authorContainer: {
+		flexDirection: 'row'
+	},
+	fieldContainer: {
+		flexDirection: 'column',
+		paddingLeft: 10,
+		paddingTop: 10,
+		paddingBottom: 10
+	},
+	fieldTitle: {
+		fontSize: 15,
+		...sharedStyles.textBold
+	},
+	marginTop: {
+		marginTop: 4
+	},
+	marginBottom: {
+		marginBottom: 4
+	},
+	title: {
+		fontSize: 16,
+		...sharedStyles.textMedium
+	},
+	touchableContainer: {
+		flexDirection: 'row'
+	},
+	markdownFontSize: {
+		fontSize: 15
+	},
+	iconContainer: {
+		width: 20,
+		height: 20,
+		right: 8,
+		top: 8,
+		justifyContent: 'center',
+		alignItems: 'center'
+	}
+});
+
+interface IMessageFields {
+	attachment: IAttachment;
+	getCustomEmoji: TGetCustomEmoji;
+}
+
+interface IMessageReply {
+	attachment: IAttachment;
+	timeFormat?: string;
+	index: number;
+	getCustomEmoji: TGetCustomEmoji;
+}
+
+const Fields = React.memo(
+	({ attachment, getCustomEmoji }: IMessageFields) => {
+		if (!attachment.fields) {
+			return null;
+		}
+		const { baseUrl, user } = useContext(MessageContext);
+		const { theme } = useTheme();
+		return (
+			<>
+				{attachment.fields.map(field => (
+					<View key={field.title} style={[styles.fieldContainer, { width: field.short ? '50%' : '100%' }]}>
+						<Text testID='collapsibleQuoteTouchableFieldTitle' style={[styles.fieldTitle, { color: themes[theme].bodyText }]}>
+							{field.title}
+						</Text>
+						<Markdown
+							msg={field?.value || ''}
+							baseUrl={baseUrl}
+							username={user.username}
+							getCustomEmoji={getCustomEmoji}
+							theme={theme}
+							style={[styles.markdownFontSize]}
+						/>
+					</View>
+				))}
+			</>
+		);
+	},
+	(prevProps, nextProps) => dequal(prevProps.attachment.fields, nextProps.attachment.fields)
+);
+
+const CollapsibleQuote = React.memo(
+	({ attachment, index, getCustomEmoji }: IMessageReply) => {
+		if (!attachment) {
+			return null;
+		}
+		const [collapsed, setCollapsed] = useState(attachment.collapsed);
+		const { theme } = useTheme();
+
+		const onPress = () => {
+			setCollapsed(!collapsed);
+		};
+
+		let {
+			borderColor,
+			chatComponentBackground: backgroundColor,
+			collapsibleQuoteBorder,
+			collapsibleChevron,
+			headerTintColor
+		} = themes[theme];
+
+		try {
+			if (attachment.color) {
+				backgroundColor = transparentize(attachment.color, 0.8);
+				borderColor = attachment.color;
+				collapsibleQuoteBorder = attachment.color;
+				collapsibleChevron = attachment.color;
+				headerTintColor = headerTintColor;
+			}
+		} catch (e) {
+			// fallback to default
+		}
+
+		return (
+			<>
+				<Touchable
+					testID={`collapsibleQuoteTouchable-${attachment.title}`}
+					onPress={onPress}
+					style={[
+						styles.button,
+						index > 0 && styles.marginTop,
+						attachment.description && styles.marginBottom,
+						{
+							backgroundColor,
+							borderLeftColor: collapsibleQuoteBorder,
+							borderTopColor: borderColor,
+							borderRightColor: borderColor,
+							borderBottomColor: borderColor,
+							borderLeftWidth: 2
+						}
+					]}
+					background={Touchable.Ripple(themes[theme].bannerBackground)}
+					hitSlop={BUTTON_HIT_SLOP}>
+					<View style={styles.touchableContainer}>
+						<View style={styles.attachmentContainer}>
+							<View style={styles.authorContainer}>
+								<Text style={[styles.title, { color: headerTintColor }]}>{attachment.title}</Text>
+							</View>
+							{!collapsed && <Fields attachment={attachment} getCustomEmoji={getCustomEmoji} />}
+						</View>
+						<View style={styles.iconContainer}>
+							<CustomIcon name={!collapsed ? 'chevron-up' : 'chevron-down'} size={22} color={collapsibleChevron} />
+						</View>
+					</View>
+				</Touchable>
+			</>
+		);
+	},
+	(prevProps, nextProps) => dequal(prevProps.attachment, nextProps.attachment)
+);
+
+CollapsibleQuote.displayName = 'CollapsibleQuote';
+Fields.displayName = 'CollapsibleQuoteFields';
+
+export default CollapsibleQuote;

app/definitions/IAttachment.ts

@@ -1,10 +1,10 @@
 import { IUser } from './IUser';
 
 export interface IAttachment {
-	ts: string | Date;
+	ts?: string | Date;
 	title: string;
-	type: string;
+	type?: string;
-	description: string;
+	description?: string;
 	title_link?: string;
 	image_url?: string;
 	image_type?: string;
@@ -24,6 +24,8 @@ export interface IAttachment {
 	author_link?: string;
 	color?: string;
 	thumb_url?: string;
+	attachments?: any[];
+	collapsed?: boolean;
 }
 
 export interface IServerAttachment {

package.json

@@ -143,6 +143,7 @@
 		"@rocket.chat/eslint-config": "^0.4.0",
 		"@storybook/addon-storyshots": "5.3.21",
 		"@storybook/react-native": "5.3.25",
+		"@testing-library/jest-native": "^4.0.4",
 		"@testing-library/react-native": "^9.0.0",
 		"@types/bytebuffer": "^5.0.43",
 		"@types/ejson": "^2.1.3",
@@ -205,7 +206,10 @@
 		},
 		"transform": {
 			"^.+\\.js$": "<rootDir>/node_modules/react-native/jest/preprocessor.js"
-		}
+		},
+		"setupFilesAfterEnv": [
+			"@testing-library/jest-native/extend-expect"
+		]
 	},
 	"snyk": true,
 	"engines": {

storybook/stories/index.js

@@ -19,6 +19,7 @@ import '../../app/containers/RoomHeader/RoomHeader.stories.js';
 import '../../app/views/RoomView/LoadMore/LoadMore.stories';
 import '../../app/views/CannedResponsesListView/CannedResponseItem.stories';
 import '../../app/containers/TextInput.stories';
+import '../../app/containers/message/Components/CollapsibleQuote/CollapsibleQuote.stories';
 
 // Change here to see themed storybook
 export const theme = 'light';

yarn.lock

@@ -4143,6 +4143,18 @@
     telejson "^3.2.0"
     util-deprecate "^1.0.2"
 
+"@testing-library/jest-native@^4.0.4":
+  version "4.0.4"
+  resolved "https://registry.yarnpkg.com/@testing-library/jest-native/-/jest-native-4.0.4.tgz#25e2046896118f887683202a6e5fd8a4056131cd"
+  integrity sha512-4q5FeTFyFgPCmQH18uMJsZkVnYvBtK24yhSfbd9hQi0SZzCpbjSeQQcsGXIaX+WjWcMeeip8B7NUvZmLhGHiZw==
+  dependencies:
+    chalk "^2.4.1"
+    jest-diff "^24.0.0"
+    jest-matcher-utils "^24.0.0"
+    pretty-format "^27.3.1"
+    ramda "^0.26.1"
+    redent "^2.0.0"
+
 "@testing-library/react-native@^9.0.0":
   version "9.0.0"
   resolved "https://registry.yarnpkg.com/@testing-library/react-native/-/react-native-9.0.0.tgz#e9c63411e93d2e8e70d744b12aeb78c58025c5fc"
@@ -9993,6 +10005,11 @@ imurmurhash@^0.1.4:
   resolved "https://registry.yarnpkg.com/imurmurhash/-/imurmurhash-0.1.4.tgz#9218b9b2b928a238b13dc4fb6b6d576f231453ea"
   integrity sha1-khi5srkoojixPcT7a21XbyMUU+o=
 
+indent-string@^3.0.0:
+  version "3.2.0"
+  resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-3.2.0.tgz#4a5fd6d27cc332f37e5419a504dbb837105c9289"
+  integrity sha1-Sl/W0nzDMvN+VBmlBNu4NxBckok=
+
 indent-string@^4.0.0:
   version "4.0.0"
   resolved "https://registry.yarnpkg.com/indent-string/-/indent-string-4.0.0.tgz#624f8f4497d619b2d9768531d58f4122854d7251"
@@ -10708,7 +10725,7 @@ jest-config@^27.0.6:
     micromatch "^4.0.4"
     pretty-format "^27.0.6"
 
-jest-diff@^24.3.0, jest-diff@^24.9.0:
+jest-diff@^24.0.0, jest-diff@^24.3.0, jest-diff@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-diff/-/jest-diff-24.9.0.tgz#931b7d0d5778a1baf7452cb816e325e3724055da"
   integrity sha512-qMfrTs8AdJE2iqrTp0hzh7kTd2PQWrsFyj9tORoKmu32xjPjeE4NyjVRDz8ybYwqS2ik8N4hsIpiVTyFeo2lBQ==
@@ -10903,7 +10920,7 @@ jest-leak-detector@^27.0.6:
     jest-get-type "^27.0.6"
     pretty-format "^27.0.6"
 
-jest-matcher-utils@^24.9.0:
+jest-matcher-utils@^24.0.0, jest-matcher-utils@^24.9.0:
   version "24.9.0"
   resolved "https://registry.yarnpkg.com/jest-matcher-utils/-/jest-matcher-utils-24.9.0.tgz#f5b3661d5e628dffe6dd65251dfdae0e87c3a073"
   integrity sha512-OZz2IXsu6eaiMAwe67c1T+5tUAtQyQx27/EMEkbFAGiw52tB9em+uGbzpcgYVpA8wl0hlxKPZxrly4CXU/GjHA==
@@ -13836,6 +13853,15 @@ pretty-format@^27.0.6:
     ansi-styles "^5.0.0"
     react-is "^17.0.1"
 
+pretty-format@^27.3.1:
+  version "27.5.1"
+  resolved "https://registry.yarnpkg.com/pretty-format/-/pretty-format-27.5.1.tgz#2181879fdea51a7a5851fb39d920faa63f01d88e"
+  integrity sha512-Qb1gy5OrP5+zDf2Bvnzdl3jsTf1qXVMazbvCoKhtKqVs4/YK4ozX4gKQJJVyNe+cajNPn0KoC0MC3FUmaHWEmQ==
+  dependencies:
+    ansi-regex "^5.0.1"
+    ansi-styles "^5.0.0"
+    react-is "^17.0.1"
+
 pretty-hrtime@^1.0.3:
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#b7e3ea42435a4c9b2759d99e0f201eb195802ee1"
@@ -14108,6 +14134,11 @@ ramda@^0.21.0:
   resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.21.0.tgz#a001abedb3ff61077d4ff1d577d44de77e8d0a35"
   integrity sha1-oAGr7bP/YQd9T/HVd9RN536NCjU=
 
+ramda@^0.26.1:
+  version "0.26.1"
+  resolved "https://registry.yarnpkg.com/ramda/-/ramda-0.26.1.tgz#8d41351eb8111c55353617fc3bbffad8e4d35d06"
+  integrity sha512-hLWjpy7EnsDBb0p+Z3B7rPi3GDeRG5ZtiI33kJhTt+ORCd38AbAIjB/9zRIUoeTbE/AVX5ZkU7m6bznsvrf8eQ==
+
 random-bytes@~1.0.0:
   version "1.0.0"
   resolved "https://registry.yarnpkg.com/random-bytes/-/random-bytes-1.0.0.tgz#4f68a1dc0ae58bd3fb95848c30324db75d64360b"
@@ -14938,6 +14969,14 @@ recursive-readdir@2.2.2:
   dependencies:
     minimatch "3.0.4"
 
+redent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/redent/-/redent-2.0.0.tgz#c1b2007b42d57eb1389079b3c8333639d5e1ccaa"
+  integrity sha1-wbIAe0LVfrE4kHmzyDM2OdXhzKo=
+  dependencies:
+    indent-string "^3.0.0"
+    strip-indent "^2.0.0"
+
 reduce-flatten@^2.0.0:
   version "2.0.0"
   resolved "https://registry.yarnpkg.com/reduce-flatten/-/reduce-flatten-2.0.0.tgz#734fd84e65f375d7ca4465c69798c25c9d10ae27"
@@ -16262,6 +16301,11 @@ strip-final-newline@^2.0.0:
   resolved "https://registry.yarnpkg.com/strip-final-newline/-/strip-final-newline-2.0.0.tgz#89b852fb2fcbe936f6f4b3187afb0a12c1ab58ad"
   integrity sha512-BrpvfNAE3dcvq7ll3xVumzjKjZQ5tI1sEUIKr3Uoks0XUl45St3FlatVqef9prk4jRDzhW6WZg+3bk93y6pLjA==
 
+strip-indent@^2.0.0:
+  version "2.0.0"
+  resolved "https://registry.yarnpkg.com/strip-indent/-/strip-indent-2.0.0.tgz#5ef8db295d01e6ed6cbf7aab96998d7822527b68"
+  integrity sha1-XvjbKV0B5u1sv3qrlpmNeCJSe2g=
+
 strip-json-comments@3.1.1, strip-json-comments@^3.1.0, strip-json-comments@^3.1.1:
   version "3.1.1"
   resolved "https://registry.yarnpkg.com/strip-json-comments/-/strip-json-comments-3.1.1.tgz#31f1281b3832630434831c310c01cccda8cbe006"