From a48bff2eee9fc786744ecedb122507e0ca76b729 Mon Sep 17 00:00:00 2001
From: Elvina Valieva <tilitidam@gmail.com>
Date: Fri, 3 Dec 2021 13:19:23 +0100
Subject: [PATCH] :zap: Survey updates (#2495)

* feat: update survey

* feat: appearance tweaks

* chore: hardcode survey showing

* chore: fix survey options

* feat: show survey for users with workflows

* chore: take personalization into account

* chore: revert survey conditions

* chore: remove select override

* chore: remove transfer component from editor

* chore: more expressive flag name

* :zap: Minor improvements

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
---
 packages/editor-ui/src/Interface.ts           |   3 +-
 .../src/components/PersonalizationModal.vue   | 174 ++++++++++++------
 packages/editor-ui/src/constants.ts           |  16 +-
 packages/editor-ui/src/modules/helper.ts      |   4 +-
 packages/editor-ui/src/modules/settings.ts    |   1 +
 packages/editor-ui/src/n8n-theme.scss         |  23 ---
 packages/editor-ui/src/plugins/components.ts  |   2 -
 7 files changed, 140 insertions(+), 83 deletions(-)

diff --git a/packages/editor-ui/src/Interface.ts b/packages/editor-ui/src/Interface.ts
index 7332f35480..cef30c8f98 100644
--- a/packages/editor-ui/src/Interface.ts
+++ b/packages/editor-ui/src/Interface.ts
@@ -458,7 +458,7 @@ export interface IVersionNotificationSettings {
 	infoUrl: string;
 }
 
-export type IPersonalizationSurveyKeys = 'companySize' | 'codingSkill' | 'workArea' | 'otherWorkArea';
+export type IPersonalizationSurveyKeys = 'codingSkill' | 'companyIndustry' | 'companySize' | 'otherCompanyIndustry' | 'otherWorkArea' | 'workArea';
 
 export type IPersonalizationSurveyAnswers = {
 	[key in IPersonalizationSurveyKeys]: string | null
@@ -700,4 +700,3 @@ export interface IBounds {
 	maxX: number;
 	maxY: number;
 }
-
diff --git a/packages/editor-ui/src/components/PersonalizationModal.vue b/packages/editor-ui/src/components/PersonalizationModal.vue
index dc4be6efbf..37727a4ccc 100644
--- a/packages/editor-ui/src/components/PersonalizationModal.vue
+++ b/packages/editor-ui/src/components/PersonalizationModal.vue
@@ -18,23 +18,52 @@
 				<n8n-text>Look out for things marked with a ✨. They are personalized to make n8n more relevant to you.</n8n-text>
 			</div>
 			<div :class="$style.container" v-else>
-				<n8n-input-label label="Which of these areas do you mainly work in?">
-					<n8n-select :value="values[WORK_AREA_KEY]" placeholder="Select..." @change="(value) => onInput(WORK_AREA_KEY, value)">
-						<n8n-option :value="AUTOMATION_CONSULTING_WORK_AREA" label="Automation consulting" />
+				<n8n-input-label label="How are your coding skills?">
+					<n8n-select :value="values[CODING_SKILL_KEY]" placeholder="Select..." @change="(value) => onInput(CODING_SKILL_KEY, value)">
+						<n8n-option
+							label="0. Never coded"
+							value="0"
+						/>
+						<n8n-option
+							label="1. I get stuck too quickly to achieve much"
+							value="1"
+						/>
+						<n8n-option
+							label="2. I can code some useful things, but I spend a lot of time stuck"
+							value="2"
+						/>
+						<n8n-option
+							label="3. I know enough to be dangerous, but I'm no expert"
+							value="3"
+						/>
+						<n8n-option
+							label="4. I can figure most things out"
+							value="4"
+						/>
+						<n8n-option
+							label="5. I can do almost anything I want, easily (pro coder)"
+							value="5"
+						/>
+					</n8n-select>
+				</n8n-input-label>
+
+				<n8n-input-label label="Which areas do you mainly work in?">
+					<n8n-select :value="values[WORK_AREA_KEY]" multiple placeholder="Select..." @change="(value) => onInput(WORK_AREA_KEY, value)">
 						<n8n-option :value="FINANCE_WORK_AREA" label="Finance" />
 						<n8n-option :value="HR_WORK_AREA" label="HR" />
 						<n8n-option :value="IT_ENGINEERING_WORK_AREA" label="IT / Engineering" />
 						<n8n-option :value="LEGAL_WORK_AREA" label="Legal" />
-						<n8n-option :value="MARKETING_WORK_AREA" label="Marketing / Growth" />
+						<n8n-option :value="MARKETING_WORK_AREA" label="Marketing" />
 						<n8n-option :value="OPS_WORK_AREA" label="Operations" />
 						<n8n-option :value="PRODUCT_WORK_AREA" label="Product" />
-						<n8n-option :value="SALES_BUSINESSDEV_WORK_AREA" label="Sales / Business Development" />
+						<n8n-option :value="SALES_BUSINESSDEV_WORK_AREA" label="Sales / Bizdev" />
 						<n8n-option :value="SECURITY_WORK_AREA" label="Security" />
 						<n8n-option :value="SUPPORT_WORK_AREA" label="Support" />
+						<n8n-option :value="EXECUTIVE_WORK_AREA" label="Executive team" />
 						<n8n-option :value="OTHER_WORK_AREA_OPTION" label="Other (please specify)" />
+						<n8n-option :value="NOT_APPLICABLE_WORK_AREA" label="I'm not using n8n for work" />
 					</n8n-select>
 				</n8n-input-label>
-
 				<n8n-input
 					v-if="otherWorkAreaFieldVisible"
 					:value="values[OTHER_WORK_AREA_KEY]"
@@ -42,34 +71,28 @@
 					@input="(value) => onInput(OTHER_WORK_AREA_KEY, value)"
 				/>
 
-				<n8n-input-label label="How are your coding skills?">
-					<n8n-select :value="values[CODING_SKILL_KEY]" placeholder="Select..." @change="(value) => onInput(CODING_SKILL_KEY, value)">
-						<n8n-option
-							label="0 (Never coded)"
-							value="0"
-						/>
-						<n8n-option
-							label="1"
-							value="1"
-						/>
-						<n8n-option
-							label="2"
-							value="2"
-						/>
-						<n8n-option
-							label="3"
-							value="3"
-						/>
-						<n8n-option
-							label="4"
-							value="4"
-						/>
-						<n8n-option
-							label="5 (Pro coder)"
-							value="5"
-						/>
+				<section v-if="showAllIndustryQuestions">
+					<n8n-input-label label="Which industries is your company in?">
+					<n8n-select :value="values[COMPANY_INDUSTRY_KEY]" multiple placeholder="Select..." @change="(value) => onInput(COMPANY_INDUSTRY_KEY, value)">
+						<n8n-option :value="E_COMMERCE_INDUSTRY" label="eCommerce" />
+						<n8n-option :value="AUTOMATION_CONSULTING_INDUSTRY" label="Automation consulting" />
+						<n8n-option :value="SYSTEM_INTEGRATION_INDUSTRY" label="Systems integration" />
+						<n8n-option :value="GOVERNMENT_INDUSTRY" label="Government" />
+						<n8n-option :value="LEGAL_INDUSTRY" label="Legal" />
+						<n8n-option :value="HEALTHCARE_INDUSTRY" label="Healthcare" />
+						<n8n-option :value="FINANCE_INDUSTRY" label="Finance" />
+						<n8n-option :value="SECURITY_INDUSTRY" label="Security" />
+						<n8n-option :value="SAAS_INDUSTRY" label="SaaS" />
+						<n8n-option :value="OTHER_INDUSTRY_OPTION" label="Other (please specify)" />
 					</n8n-select>
 				</n8n-input-label>
+				<n8n-input
+					v-if="otherCompanyIndustryFieldVisible"
+					:value="values[OTHER_COMPANY_INDUSTRY_KEY]"
+					placeholder="Specify your company's industry"
+					@input="(value) => onInput(OTHER_COMPANY_INDUSTRY_KEY, value)"
+				/>
+
 
 				<n8n-input-label label="How big is your company?">
 					<n8n-select :value="values[COMPANY_SIZE_KEY]" placeholder="Select..." @change="(value) => onInput(COMPANY_SIZE_KEY, value)">
@@ -99,6 +122,8 @@
 						/>
 					</n8n-select>
 				</n8n-input-label>
+
+				</section>
 			</div>
 		</template>
 		<template v-slot:footer>
@@ -114,29 +139,42 @@
 import mixins from "vue-typed-mixins";
 
 import {
-	PERSONALIZATION_MODAL_KEY,
-	AUTOMATION_CONSULTING_WORK_AREA,
-	FINANCE_WORK_AREA,
-	HR_WORK_AREA,
-	IT_ENGINEERING_WORK_AREA,
-	LEGAL_WORK_AREA,
-	MARKETING_WORK_AREA,
-	PRODUCT_WORK_AREA,
-	SALES_BUSINESSDEV_WORK_AREA,
-	SECURITY_WORK_AREA,
-	SUPPORT_WORK_AREA,
-	OPS_WORK_AREA,
-	OTHER_WORK_AREA_OPTION,
+	AUTOMATION_CONSULTING_INDUSTRY,
+	CODING_SKILL_KEY,
+	COMPANY_INDUSTRY_KEY,
+	COMPANY_SIZE_100_499,
+	COMPANY_SIZE_1000_OR_MORE,
 	COMPANY_SIZE_20_OR_LESS,
 	COMPANY_SIZE_20_99,
-	COMPANY_SIZE_100_499,
 	COMPANY_SIZE_500_999,
-	COMPANY_SIZE_1000_OR_MORE,
-	COMPANY_SIZE_PERSONAL_USE,
-	WORK_AREA_KEY,
 	COMPANY_SIZE_KEY,
-	CODING_SKILL_KEY,
+	COMPANY_SIZE_PERSONAL_USE,
+	E_COMMERCE_INDUSTRY,
+	EXECUTIVE_WORK_AREA,
+	FINANCE_INDUSTRY,
+	FINANCE_WORK_AREA,
+	GOVERNMENT_INDUSTRY,
+	HEALTHCARE_INDUSTRY,
+	HR_WORK_AREA,
+	IT_ENGINEERING_WORK_AREA,
+	LEGAL_INDUSTRY,
+	LEGAL_WORK_AREA,
+	MARKETING_WORK_AREA,
+	NOT_APPLICABLE_WORK_AREA,
+	OPS_WORK_AREA,
+	OTHER_COMPANY_INDUSTRY_KEY,
+	OTHER_INDUSTRY_OPTION,
 	OTHER_WORK_AREA_KEY,
+	OTHER_WORK_AREA_OPTION,
+	PERSONALIZATION_MODAL_KEY,
+	PRODUCT_WORK_AREA,
+	SAAS_INDUSTRY,
+	SALES_BUSINESSDEV_WORK_AREA,
+	SECURITY_INDUSTRY,
+	SECURITY_WORK_AREA,
+	SUPPORT_WORK_AREA,
+	SYSTEM_INTEGRATION_INDUSTRY,
+	WORK_AREA_KEY,
 } from "../constants";
 import { workflowHelpers } from "@/components/mixins/workflowHelpers";
 import { showMessage } from "@/components/mixins/showMessage";
@@ -154,14 +192,17 @@ export default mixins(showMessage, workflowHelpers).extend({
 			isSaving: false,
 			PERSONALIZATION_MODAL_KEY,
 			otherWorkAreaFieldVisible: false,
+			otherCompanyIndustryFieldVisible: false,
+			showAllIndustryQuestions: true,
 			modalBus: new Vue(),
 			values: {
 				[WORK_AREA_KEY]: null,
 				[COMPANY_SIZE_KEY]: null,
 				[CODING_SKILL_KEY]: null,
 				[OTHER_WORK_AREA_KEY]: null,
+				[COMPANY_INDUSTRY_KEY]: null,
+				[OTHER_COMPANY_INDUSTRY_KEY]: null,
 			} as IPersonalizationSurveyAnswers,
-			AUTOMATION_CONSULTING_WORK_AREA,
 			FINANCE_WORK_AREA,
 			HR_WORK_AREA,
 			IT_ENGINEERING_WORK_AREA,
@@ -170,19 +211,33 @@ export default mixins(showMessage, workflowHelpers).extend({
 			PRODUCT_WORK_AREA,
 			SALES_BUSINESSDEV_WORK_AREA,
 			SECURITY_WORK_AREA,
+			EXECUTIVE_WORK_AREA,
 			SUPPORT_WORK_AREA,
 			OPS_WORK_AREA,
 			OTHER_WORK_AREA_OPTION,
+			NOT_APPLICABLE_WORK_AREA,
 			COMPANY_SIZE_20_OR_LESS,
 			COMPANY_SIZE_20_99,
 			COMPANY_SIZE_100_499,
 			COMPANY_SIZE_500_999,
 			COMPANY_SIZE_1000_OR_MORE,
 			COMPANY_SIZE_PERSONAL_USE,
+			E_COMMERCE_INDUSTRY,
+			AUTOMATION_CONSULTING_INDUSTRY,
+			SYSTEM_INTEGRATION_INDUSTRY,
+			GOVERNMENT_INDUSTRY,
+			LEGAL_INDUSTRY,
+			HEALTHCARE_INDUSTRY,
+			FINANCE_INDUSTRY,
+			SECURITY_INDUSTRY,
+			SAAS_INDUSTRY,
+			OTHER_INDUSTRY_OPTION,
 			WORK_AREA_KEY,
 			COMPANY_SIZE_KEY,
 			CODING_SKILL_KEY,
+			COMPANY_INDUSTRY_KEY,
 			OTHER_WORK_AREA_KEY,
+			OTHER_COMPANY_INDUSTRY_KEY,
 		};
 	},
 	computed: {
@@ -195,14 +250,26 @@ export default mixins(showMessage, workflowHelpers).extend({
 			this.modalBus.$emit('close');
 		},
 		onInput(name: IPersonalizationSurveyKeys, value: string) {
-			if (name === WORK_AREA_KEY && value === OTHER_WORK_AREA_OPTION) {
+			if (name === WORK_AREA_KEY && value.includes(OTHER_WORK_AREA_OPTION)) {
 				this.otherWorkAreaFieldVisible = true;
 			}
+			else if (name === WORK_AREA_KEY && value.includes(NOT_APPLICABLE_WORK_AREA)) {
+				this.showAllIndustryQuestions = false;
+			}
 			else if (name === WORK_AREA_KEY) {
 				this.otherWorkAreaFieldVisible = false;
+				this.showAllIndustryQuestions = true;
 				this.values[OTHER_WORK_AREA_KEY] = null;
 			}
 
+			if (name === COMPANY_INDUSTRY_KEY && value.includes(OTHER_INDUSTRY_OPTION)) {
+				this.otherCompanyIndustryFieldVisible = true;
+			}
+			else if (name === COMPANY_INDUSTRY_KEY) {
+				this.otherCompanyIndustryFieldVisible = false;
+				this.values[OTHER_COMPANY_INDUSTRY_KEY] = null;
+			}
+
 			this.values[name] = value;
 		},
 		async save(): Promise<void> {
@@ -228,7 +295,7 @@ export default mixins(showMessage, workflowHelpers).extend({
 
 <style lang="scss" module>
 .container {
-	> div:not(:last-child) {
+	> div, section > div:not(:last-child) {
 		margin-bottom: var(--spacing-m);
 	}
 }
@@ -246,4 +313,5 @@ export default mixins(showMessage, workflowHelpers).extend({
 	height: 140px;
 }
 
+
 </style>
diff --git a/packages/editor-ui/src/constants.ts b/packages/editor-ui/src/constants.ts
index fa1ab10baa..41d6407d1e 100644
--- a/packages/editor-ui/src/constants.ts
+++ b/packages/editor-ui/src/constants.ts
@@ -93,7 +93,6 @@ export const INSTANCE_ID_HEADER = 'n8n-instance-id';
 export const WAIT_TIME_UNLIMITED = '3000-01-01T00:00:00.000Z';
 
 export const WORK_AREA_KEY = 'workArea';
-export const AUTOMATION_CONSULTING_WORK_AREA = 'automationConsulting';
 export const FINANCE_WORK_AREA = 'finance';
 export const HR_WORK_AREA = 'HR';
 export const IT_ENGINEERING_WORK_AREA = 'IT-Engineering';
@@ -104,7 +103,21 @@ export const SALES_BUSINESSDEV_WORK_AREA = 'sales-businessDevelopment';
 export const SECURITY_WORK_AREA = 'security';
 export const SUPPORT_WORK_AREA = 'support';
 export const OPS_WORK_AREA = 'ops';
+export const EXECUTIVE_WORK_AREA = 'executive';
 export const OTHER_WORK_AREA_OPTION = 'other';
+export const NOT_APPLICABLE_WORK_AREA = 'n/a';
+
+export const COMPANY_INDUSTRY_KEY = 'companyIndustry';
+export const E_COMMERCE_INDUSTRY = 'e-commerce';
+export const AUTOMATION_CONSULTING_INDUSTRY = 'automation-consulting';
+export const SYSTEM_INTEGRATION_INDUSTRY = 'systems-integration';
+export const GOVERNMENT_INDUSTRY = 'government';
+export const LEGAL_INDUSTRY = 'legal-industry';
+export const HEALTHCARE_INDUSTRY= 'healthcare';
+export const FINANCE_INDUSTRY = 'finance-industry';
+export const SECURITY_INDUSTRY = 'security-industry';
+export const SAAS_INDUSTRY = 'saas';
+export const OTHER_INDUSTRY_OPTION= 'other';
 
 export const COMPANY_SIZE_KEY = 'companySize';
 export const COMPANY_SIZE_20_OR_LESS = '<20';
@@ -116,4 +129,5 @@ export const COMPANY_SIZE_PERSONAL_USE = 'personalUser';
 
 export const CODING_SKILL_KEY = 'codingSkill';
 export const OTHER_WORK_AREA_KEY = 'otherWorkArea';
+export const OTHER_COMPANY_INDUSTRY_KEY = 'otherCompanyIndustry';
 
diff --git a/packages/editor-ui/src/modules/helper.ts b/packages/editor-ui/src/modules/helper.ts
index 7c4b4d4a00..5e92bf0976 100644
--- a/packages/editor-ui/src/modules/helper.ts
+++ b/packages/editor-ui/src/modules/helper.ts
@@ -1,5 +1,5 @@
 
-import { AUTOMATION_CONSULTING_WORK_AREA, CALENDLY_TRIGGER_NODE_TYPE, CLEARBIT_NODE_TYPE, COMPANY_SIZE_1000_OR_MORE, COMPANY_SIZE_500_999, CRON_NODE_TYPE, ELASTIC_SECURITY_NODE_TYPE, EMAIL_SEND_NODE_TYPE, EXECUTE_COMMAND_NODE_TYPE, FINANCE_WORK_AREA, FUNCTION_NODE_TYPE, GITHUB_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE, IF_NODE_TYPE, ITEM_LISTS_NODE_TYPE, IT_ENGINEERING_WORK_AREA, JIRA_TRIGGER_NODE_TYPE, MICROSOFT_EXCEL_NODE_TYPE, MICROSOFT_TEAMS_NODE_TYPE, PERSONALIZATION_MODAL_KEY, PAGERDUTY_NODE_TYPE, PRODUCT_WORK_AREA, QUICKBOOKS_NODE_TYPE, SALESFORCE_NODE_TYPE, SALES_BUSINESSDEV_WORK_AREA, SECURITY_WORK_AREA, SEGMENT_NODE_TYPE, SET_NODE_TYPE, SLACK_NODE_TYPE, SPREADSHEET_FILE_NODE_TYPE, SWITCH_NODE_TYPE, WEBHOOK_NODE_TYPE, XERO_NODE_TYPE, COMPANY_SIZE_KEY, WORK_AREA_KEY, CODING_SKILL_KEY } from '@/constants';
+import { CALENDLY_TRIGGER_NODE_TYPE, CLEARBIT_NODE_TYPE, COMPANY_SIZE_1000_OR_MORE, COMPANY_SIZE_500_999, CRON_NODE_TYPE, ELASTIC_SECURITY_NODE_TYPE, EMAIL_SEND_NODE_TYPE, EXECUTE_COMMAND_NODE_TYPE, FINANCE_WORK_AREA, FUNCTION_NODE_TYPE, GITHUB_TRIGGER_NODE_TYPE, HTTP_REQUEST_NODE_TYPE, IF_NODE_TYPE, ITEM_LISTS_NODE_TYPE, IT_ENGINEERING_WORK_AREA, JIRA_TRIGGER_NODE_TYPE, MICROSOFT_EXCEL_NODE_TYPE, MICROSOFT_TEAMS_NODE_TYPE, PERSONALIZATION_MODAL_KEY, PAGERDUTY_NODE_TYPE, PRODUCT_WORK_AREA, QUICKBOOKS_NODE_TYPE, SALESFORCE_NODE_TYPE, SALES_BUSINESSDEV_WORK_AREA, SECURITY_WORK_AREA, SEGMENT_NODE_TYPE, SET_NODE_TYPE, SLACK_NODE_TYPE, SPREADSHEET_FILE_NODE_TYPE, SWITCH_NODE_TYPE, WEBHOOK_NODE_TYPE, XERO_NODE_TYPE, COMPANY_SIZE_KEY, WORK_AREA_KEY, CODING_SKILL_KEY } from '@/constants';
 import { IPersonalizationSurveyAnswers } from '@/Interface';
 
 export function getPersonalizedNodeTypes(answers: IPersonalizationSurveyAnswers) {
@@ -17,7 +17,7 @@ export function getPersonalizedNodeTypes(answers: IPersonalizationSurveyAnswers)
 	}
 
 	let nodeTypes = [] as string[];
-	if (workArea === IT_ENGINEERING_WORK_AREA || workArea === AUTOMATION_CONSULTING_WORK_AREA) {
+	if (workArea === IT_ENGINEERING_WORK_AREA) {
 		nodeTypes = nodeTypes.concat(WEBHOOK_NODE_TYPE);
 	}
 	else {
diff --git a/packages/editor-ui/src/modules/settings.ts b/packages/editor-ui/src/modules/settings.ts
index 0e1dcbf470..22311ad077 100644
--- a/packages/editor-ui/src/modules/settings.ts
+++ b/packages/editor-ui/src/modules/settings.ts
@@ -59,6 +59,7 @@ const module: Module<ISettingsState, IRootState> = {
 			context.commit('setTelemetry', settings.telemetry, {root: true});
 
 			const showPersonalizationsModal = settings.personalizationSurvey && settings.personalizationSurvey.shouldShow && !settings.personalizationSurvey.answers;
+
 			if (showPersonalizationsModal) {
 				context.commit('ui/openModal', PERSONALIZATION_MODAL_KEY, {root: true});
 			}
diff --git a/packages/editor-ui/src/n8n-theme.scss b/packages/editor-ui/src/n8n-theme.scss
index 9afa036f2f..16b5d7b9e8 100644
--- a/packages/editor-ui/src/n8n-theme.scss
+++ b/packages/editor-ui/src/n8n-theme.scss
@@ -117,28 +117,6 @@ body {
 	}
 }
 
-// Transfer list (nodes)
-.el-transfer {
-	.el-transfer-panel {
-		background-color: $--custom-input-background;
-		// border: 1px solid #404040;
-		border: none;
-		border-radius: 10px;
-		padding: 1em;
-
-		.el-transfer-panel__header {
-			background: none;
-		}
-	}
-	.el-transfer__buttons button {
-		border: 2px solid $--color-primary;
-	}
-	.el-transfer__buttons button.is-disabled {
-		border: 2px solid #aaa;
-		background-color: #fff;
-	}
-}
-
 // Tabs
 .type-selector:focus,
 .el-tabs__header:focus,
@@ -212,4 +190,3 @@ body {
 		}
 	}
 }
-
diff --git a/packages/editor-ui/src/plugins/components.ts b/packages/editor-ui/src/plugins/components.ts
index 6fec42146e..b1a3750150 100644
--- a/packages/editor-ui/src/plugins/components.ts
+++ b/packages/editor-ui/src/plugins/components.ts
@@ -31,7 +31,6 @@ import Col from 'element-ui/lib/col';
 import Badge from 'element-ui/lib/badge';
 import Card from 'element-ui/lib/card';
 import ColorPicker from 'element-ui/lib/color-picker';
-import Transfer from 'element-ui/lib/transfer';
 import Container from 'element-ui/lib/container';
 import Loading from 'element-ui/lib/loading';
 import MessageBox from 'element-ui/lib/message-box';
@@ -109,7 +108,6 @@ Vue.use(Col);
 Vue.use(Badge);
 Vue.use(Card);
 Vue.use(ColorPicker);
-Vue.use(Transfer);
 Vue.use(Container);
 
 Vue.component(CollapseTransition.name, CollapseTransition);