n8n/packages/editor-ui/src/views/CredentialsView.vue
2023-11-28 12:15:08 +01:00

175 lines
4.4 KiB
Vue

<template>
<resources-list-layout
ref="layout"
resource-key="credentials"
:resources="allCredentials"
:initialize="initialize"
:filters="filters"
:additional-filters-handler="onFilter"
:type-props="{ itemSize: 77 }"
@click:add="addCredential"
@update:filters="filters = $event"
>
<template #default="{ data }">
<credential-card data-test-id="resources-list-item" class="mb-2xs" :data="data" />
</template>
<template #filters="{ setKeyValue }">
<div class="mb-s">
<n8n-input-label
:label="$locale.baseText('credentials.filters.type')"
:bold="false"
size="small"
color="text-base"
class="mb-3xs"
/>
<n8n-select
:modelValue="filters.type"
size="medium"
multiple
filterable
ref="typeInput"
:class="$style['type-input']"
@update:modelValue="setKeyValue('type', $event)"
>
<n8n-option
v-for="credentialType in allCredentialTypes"
:key="credentialType.name"
:value="credentialType.name"
:label="credentialType.displayName"
/>
</n8n-select>
</div>
</template>
</resources-list-layout>
</template>
<script lang="ts">
import type { ICredentialsResponse, ICredentialTypeMap } from '@/Interface';
import { defineComponent } from 'vue';
import ResourcesListLayout from '@/components/layouts/ResourcesListLayout.vue';
import CredentialCard from '@/components/CredentialCard.vue';
import type { ICredentialType } from 'n8n-workflow';
import { CREDENTIAL_SELECT_MODAL_KEY } from '@/constants';
import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui.store';
import { useUsersStore } from '@/stores/users.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useCredentialsStore } from '@/stores/credentials.store';
import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
import { useSourceControlStore } from '@/stores/sourceControl.store';
type IResourcesListLayoutInstance = InstanceType<typeof ResourcesListLayout>;
export default defineComponent({
name: 'CredentialsView',
components: {
ResourcesListLayout,
CredentialCard,
},
data() {
return {
filters: {
search: '',
ownedBy: '',
sharedWith: '',
type: '',
},
sourceControlStoreUnsubscribe: () => {},
};
},
computed: {
...mapStores(
useCredentialsStore,
useNodeTypesStore,
useUIStore,
useUsersStore,
useSourceControlStore,
useExternalSecretsStore,
),
allCredentials(): ICredentialsResponse[] {
return this.credentialsStore.allCredentials;
},
allCredentialTypes(): ICredentialType[] {
return this.credentialsStore.allCredentialTypes;
},
credentialTypesById(): ICredentialTypeMap {
return this.credentialsStore.credentialTypesById;
},
},
methods: {
addCredential() {
this.uiStore.openModal(CREDENTIAL_SELECT_MODAL_KEY);
this.$telemetry.track('User clicked add cred button', {
source: 'Creds list',
});
},
async initialize() {
const loadPromises = [
this.credentialsStore.fetchAllCredentials(),
this.credentialsStore.fetchCredentialTypes(false),
this.externalSecretsStore.fetchAllSecrets(),
this.nodeTypesStore.loadNodeTypesIfNotLoaded(),
];
await Promise.all(loadPromises);
await this.usersStore.fetchUsers(); // Can be loaded in the background, used for filtering
},
onFilter(
resource: ICredentialsResponse,
filters: { type: string[]; search: string },
matches: boolean,
): boolean {
if (filters.type.length > 0) {
matches = matches && filters.type.includes(resource.type);
}
if (filters.search) {
const searchString = filters.search.toLowerCase();
matches =
matches ||
(this.credentialTypesById[resource.type] &&
this.credentialTypesById[resource.type].displayName
.toLowerCase()
.includes(searchString));
}
return matches;
},
sendFiltersTelemetry(source: string) {
(this.$refs.layout as IResourcesListLayoutInstance).sendFiltersTelemetry(source);
},
},
watch: {
'filters.type'() {
this.sendFiltersTelemetry('type');
},
},
mounted() {
this.sourceControlStoreUnsubscribe = this.sourceControlStore.$onAction(({ name, after }) => {
if (name === 'pullWorkfolder' && after) {
after(() => {
void this.initialize();
});
}
});
},
beforeUnmount() {
this.sourceControlStoreUnsubscribe();
},
});
</script>
<style lang="scss" module>
.type-input {
--max-width: 265px;
}
.sidebarContainer ul {
padding: 0 !important;
}
</style>