Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat: Fetch user cloud role and pass it on in website links #8942

Merged
merged 7 commits into from
Mar 22, 2024
Merged

feat: Fetch user cloud role and pass it on in website links #8942

Show file tree
Hide file tree
Changes from 5 commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
693900a
feat: Fetch user cloud role and pass it on in website links
MiloradFilipovic Mar 21, 2024
2be4f7b
✨ Add 'Browse Sales templates' card to empty workflows view
MiloradFilipovic Mar 21, 2024
5f54673
📈 Adding telemetry details
MiloradFilipovic Mar 21, 2024
5a9fbee
Merge branch 'master' into ADO-2073-fetch-cloud-role
MiloradFilipovic Mar 21, 2024
a3ed6af
✅ Adding tests for the new parameter
MiloradFilipovic Mar 22, 2024
76db2c6
Removing leftover test skip
MiloradFilipovic Mar 22, 2024
ba49f5e
👌 Using html links for template cards
MiloradFilipovic Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
10 changes: 6 additions & 4 deletions cypress/e2e/29-templates.cy.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -20,17 +20,19 @@ describe('Workflow templates', () => {
}).as('settingsRequest');
});

it('Opens website when clicking templates sidebar link', () => {
it.only('Opens website when clicking templates sidebar link', () => {
MiloradFilipovic marked this conversation as resolved.
Show resolved Hide resolved
cy.visit(workflowsPage.url);
mainSidebar.getters.menuItem('Templates').should('be.visible');
// Templates should be a link to the website
mainSidebar.getters.templates().parent('a').should('have.attr', 'href').and('include', 'https://n8n.io/workflows');
// Link should contain instance address and n8n version
mainSidebar.getters.templates().parent('a').then(($a) => {
const href = $a.attr('href');
// Link should have current instance address and n8n version
expect(href).to.include(`utm_instance=${window.location.origin}`);
expect(href).to.match(/utm_n8n_version=[0-9]+\.[0-9]+\.[0-9]+/);
const params = new URLSearchParams(href);
// Link should have all mandatory parameters expected on the website
expect(decodeURIComponent(`${params.get('utm_instance')}`)).to.include(window.location.origin);
expect(params.get('utm_n8n_version')).to.match(/[0-9]+\.[0-9]+\.[0-9]+/);
expect(params.get('utm_awc')).to.match(/[0-9]+/);
});
mainSidebar.getters.templates().parent('a').should('have.attr', 'target', '_blank');
});
Expand Down
1 change: 1 addition & 0 deletions packages/editor-ui/src/Interface.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -1758,6 +1758,7 @@ export declare namespace Cloud {
username: string;
email: string;
hasEarlyAccess?: boolean;
role?: string;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

This might be easy to confuse with the new RBAC roles. Where is this data defined? We can either rename the property or add a more strict type for it, e.g. CloudRole or RoleAtCompany

type CloudRole = string;

export type UserAccount = {
  ...
  role?: CloudRole
}

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Makes sense, but this interface is already in the Cloud namespace. Does this make it clearer?

};
}

Expand Down
5 changes: 4 additions & 1 deletion packages/editor-ui/src/components/MainSidebar.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -387,7 +387,10 @@ export default defineComponent({
});
},
trackTemplatesClick() {
this.$telemetry.track('User clicked on templates', {});
this.$telemetry.track('User clicked on templates', {
role: this.usersStore.currentUserCloudInfo?.role,
active_workflow_count: this.workflowsStore.activeWorkflows.length,
});
},
async onUserActionToggle(action: string) {
switch (action) {
Expand Down
5 changes: 4 additions & 1 deletion packages/editor-ui/src/constants.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -750,7 +750,10 @@ export const MOUSE_EVENT_BUTTONS = {
export const TEMPLATES_URLS = {
DEFAULT_API_HOST: 'https://api.n8n.io/api/',
BASE_WEBSITE_URL: 'https://n8n.io/workflows',
UTM_QUERY: 'utm_source=n8n_app&utm_medium=template_library',
UTM_QUERY: {
utm_source: 'n8n_app',
utm_medium: 'template_library',
},
};

export const ROLE = {
Expand Down
1 change: 1 addition & 0 deletions packages/editor-ui/src/plugins/i18n/locales/en.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2091,6 +2091,7 @@
"workflows.empty.description": "Create your first workflow",
"workflows.empty.description.readOnlyEnv": "No workflows here yet",
"workflows.empty.startFromScratch": "Start from scratch",
"workflows.empty.browseTemplates": "Browse {category} templates",
"workflows.shareModal.title": "Share '{name}'",
"workflows.shareModal.select.placeholder": "Add users...",
"workflows.shareModal.list.delete": "Remove access",
Expand Down
2 changes: 2 additions & 0 deletions packages/editor-ui/src/plugins/icons/index.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -74,6 +74,7 @@ import {
faGraduationCap,
faGripLinesVertical,
faGripVertical,
faHandHoldingUsd,
faHandScissors,
faHandPointLeft,
faHashtag,
Expand Down Expand Up @@ -237,6 +238,7 @@ export const FontAwesomePlugin: Plugin<{}> = {
addIcon(faGlobe);
addIcon(faGlobeAmericas);
addIcon(faGraduationCap);
addIcon(faHandHoldingUsd);
addIcon(faHandScissors);
addIcon(faHandPointLeft);
addIcon(faHashtag);
Expand Down
45 changes: 35 additions & 10 deletions packages/editor-ui/src/stores/templates.store.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -22,6 +22,8 @@ import {
} from '@/api/templates';
import { getFixedNodesList } from '@/utils/nodeViewUtils';
import { useRootStore } from '@/stores/n8nRoot.store';
import { useUsersStore } from './users.store';
import { useWorkflowsStore } from './workflows.store';

const TEMPLATES_PAGE_SIZE = 20;

Expand Down Expand Up @@ -115,35 +117,58 @@ export const useTemplatesStore = defineStore(STORES.TEMPLATES, {
const settingsStore = useSettingsStore();
return settingsStore.templatesHost !== TEMPLATES_URLS.DEFAULT_API_HOST;
},
/**
* Constructs URLSearchParams object based on the default parameters for the template repository
* and provided additional parameters
*/
getWebsiteTemplateRepositoryParameters() {
const rootStore = useRootStore();
const userStore = useUsersStore();
const workflowsStore = useWorkflowsStore();
const defaultParameters: Record<string, string> = {
...TEMPLATES_URLS.UTM_QUERY,
utm_instance: this.currentN8nPath,
utm_n8n_version: rootStore.versionCli,
utm_awc: String(workflowsStore.activeWorkflows.length),
};
if (userStore.currentUserCloudInfo?.role) {
defaultParameters.utm_user_role = userStore.currentUserCloudInfo.role;
}
return (additionalParameters: Record<string, string> = {}) => {
return new URLSearchParams({
...defaultParameters,
...additionalParameters,
});
};
},
/**
* Construct the URL for the template repository on the website
* @returns {string}
*/
getWebsiteTemplateRepositoryURL(): string {
return `${TEMPLATES_URLS.BASE_WEBSITE_URL}?${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${
this.currentN8nPath
}&utm_n8n_version=${useRootStore().versionCli}`;
return `${
TEMPLATES_URLS.BASE_WEBSITE_URL
}?${this.getWebsiteTemplateRepositoryParameters().toString()}`;
},
/**
* Construct the URL for the template page on the website for a given template id
* @returns {function(string): string}
*/
getWebsiteTemplatePageURL() {
return (id: string) => {
return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/${id}?${TEMPLATES_URLS.UTM_QUERY}&utm_instance=${
this.currentN8nPath
}&utm_n8n_version=${useRootStore().versionCli}`;
return `${
TEMPLATES_URLS.BASE_WEBSITE_URL
}/${id}?${this.getWebsiteTemplateRepositoryParameters().toString()}`;
};
},
/**
* Construct the URL for the template category page on the website for a given category id
* @returns {function(string): string}
*/
getWebsiteCategoryURL() {
return (id: string) => {
return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?categories=${id}&${
TEMPLATES_URLS.UTM_QUERY
}&utm_instance=${this.currentN8nPath}&utm_n8n_version=${useRootStore().versionCli}`;
return `${TEMPLATES_URLS.BASE_WEBSITE_URL}/?${this.getWebsiteTemplateRepositoryParameters({
categories: id,
}).toString()}`;
};
},
},
Expand Down
30 changes: 30 additions & 0 deletions packages/editor-ui/src/views/WorkflowsView.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -84,6 +84,22 @@
</n8n-text>
</div>
<div v-if="!readOnlyEnv" :class="['text-center', 'mt-2xl', $style.actionsContainer]">
<n8n-card
v-if="userCloudAccount?.role === 'Sales'"
:class="$style.emptyStateCard"
hoverable
data-test-id="browse-sales-templates-card"
@click="openTemplateRepository('Sales')"
>
<n8n-icon :class="$style.emptyStateCardIcon" icon="hand-holding-usd" />
<n8n-text size="large" class="mt-xs" color="text-base">
{{
$locale.baseText('workflows.empty.browseTemplates', {
interpolate: { category: 'Sales' },
})
}}
</n8n-text>
</n8n-card>
<n8n-card
:class="$style.emptyStateCard"
hoverable
Expand Down Expand Up @@ -154,6 +170,7 @@ import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useUsersStore } from '@/stores/users.store';
import { useTemplatesStore } from '@/stores/templates.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useCredentialsStore } from '@/stores/credentials.store';
import { useSourceControlStore } from '@/stores/sourceControl.store';
Expand Down Expand Up @@ -205,6 +222,8 @@ const WorkflowsView = defineComponent({
useCredentialsStore,
useSourceControlStore,
useTagsStore,
useTemplatesStore,
useUsersStore,
),
readOnlyEnv(): boolean {
return this.sourceControlStore.preferences.branchReadOnly;
Expand Down Expand Up @@ -237,6 +256,9 @@ const WorkflowsView = defineComponent({
suggestedTemplates() {
return this.uiStore.suggestedTemplates;
},
userCloudAccount() {
return this.usersStore.currentUserCloudInfo;
},
},
watch: {
'filters.tags'() {
Expand Down Expand Up @@ -272,6 +294,14 @@ const WorkflowsView = defineComponent({
source: 'Workflows list',
});
},
openTemplateRepository(category: string) {
const url = this.templatesStore.getWebsiteCategoryURL(category);
this.$telemetry.track('User clicked Browse Sales Templates', {
role: this.usersStore.currentUserCloudInfo?.role,
active_workflow_count: this.workflowsStore.activeWorkflows.length,
});
window.open(url, '_blank');
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

We should use plain <a> tag instead of navigating programmatically. That way all native browser interactions work as well (right click, cmd+click, etc.)

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Yeah, agree. Will update but the requirement is to open this in new tab so the link will have target="_blank"

},
async initialize() {
await Promise.all([
this.usersStore.fetchUsers(),
Expand Down
Loading