mudhorn/n8n
1
0
Fork 0
mirror of https://github.com/n8n-io/n8n.git synced 2024-12-23 11:44:06 -08:00
Code Issues Actions 2 Packages Projects Releases Wiki Activity

⚡ Survey updates (#2495)

Browse source 
* 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

* ⚡ Minor improvements

Co-authored-by: Jan Oberhauser <jan.oberhauser@gmail.com>
This commit is contained in:
Elvina Valieva 2021-12-03 13:19:23 +01:00 committed by GitHub
parent a783288338
commit a48bff2eee
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 140 additions and 83 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

3
packages/editor-ui/src/Interface.ts
View file

@ -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;
}

174
packages/editor-ui/src/components/PersonalizationModal.vue
View file

@ -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>

16
packages/editor-ui/src/constants.ts
View file

@ -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';

4
packages/editor-ui/src/modules/helper.ts
View file

@ -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 {

1
packages/editor-ui/src/modules/settings.ts
View file

@ -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});
}

23
packages/editor-ui/src/n8n-theme.scss
View file

@ -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 {
}
}
}

2
packages/editor-ui/src/plugins/components.ts
View file

@ -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);