feat: Add credential help to Assistant (no-changelog) (#10736)

This commit is contained in:
Mutasem Aldmour
2024-09-11 16:38:39 +02:00
committed by GitHub
parent 50459bacab
commit 2bc983ba32
11 changed files with 284 additions and 80 deletions

View File

@@ -18,6 +18,7 @@ import {
CREDENTIAL_DOCS_EXPERIMENT,
DOCS_DOMAIN,
EnterpriseEditionFeature,
NEW_ASSISTANT_SESSION_MODAL,
} from '@/constants';
import type { PermissionsRecord } from '@/permissions';
import { addCredentialTranslation } from '@/plugins/i18n';
@@ -34,6 +35,8 @@ import OauthButton from './OauthButton.vue';
import CredentialDocs from './CredentialDocs.vue';
import { CREDENTIAL_MARKDOWN_DOCS } from './docs';
import { usePostHog } from '@/stores/posthog.store';
import { useAssistantStore } from '@/stores/assistant.store';
import InlineAskAssistantButton from 'n8n-design-system/components/InlineAskAssistantButton/InlineAskAssistantButton.vue';
type Props = {
mode: string;
@@ -74,6 +77,7 @@ const ndvStore = useNDVStore();
const rootStore = useRootStore();
const uiStore = useUIStore();
const workflowsStore = useWorkflowsStore();
const assistantStore = useAssistantStore();
const i18n = useI18n();
const telemetry = useTelemetry();
@@ -167,6 +171,19 @@ const isMissingCredentials = computed(() => props.credentialType === null);
const isNewCredential = computed(() => props.mode === 'new' && !props.credentialId);
const isAskAssistantAvailable = computed(
() =>
documentationUrl.value &&
documentationUrl.value.includes(DOCS_DOMAIN) &&
props.credentialProperties.length &&
props.credentialPermissions.update &&
assistantStore.isAssistantEnabled,
);
const assistantAlreadyAsked = computed<boolean>(() => {
return assistantStore.isCredTypeActive(props.credentialType);
});
const docs = computed(() => CREDENTIAL_MARKDOWN_DOCS[props.credentialType.name]);
const showCredentialDocs = computed(
() =>
@@ -191,6 +208,24 @@ function onAuthTypeChange(newType: string): void {
emit('authTypeChanged', newType);
}
async function onAskAssistantClick() {
const sessionInProgress = !assistantStore.isSessionEnded;
if (sessionInProgress) {
uiStore.openModalWithData({
name: NEW_ASSISTANT_SESSION_MODAL,
data: {
context: {
credHelp: {
credType: props.credentialType,
},
},
},
});
return;
}
await assistantStore.initCredHelp(props.credentialType);
}
watch(showOAuthSuccessBanner, (newValue, oldValue) => {
if (newValue && !oldValue) {
emit('scrollToTop');
@@ -284,6 +319,15 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
@auth-type-changed="onAuthTypeChange"
/>
<div
v-if="isAskAssistantAvailable"
:class="$style.askAssistantButton"
data-test-id="credentail-edit-ask-assistant-button"
>
<InlineAskAssistantButton :asked="assistantAlreadyAsked" @click="onAskAssistantClick" />
<span>for setup instructions</span>
</div>
<CopyInput
v-if="isOAuthType && !allOAuth2BasePropertiesOverridden"
:label="$locale.baseText('credentialEdit.credentialConfig.oAuthRedirectUrl')"
@@ -384,4 +428,13 @@ watch(showOAuthSuccessBanner, (newValue, oldValue) => {
.googleReconnectLabel {
margin-right: var(--spacing-3xs);
}
.askAssistantButton {
display: flex;
align-items: center;
> span {
margin-left: var(--spacing-3xs);
font-size: var(--font-size-s);
}
}
</style>