admin/n8n-enterprise-unlocked
1
0
Fork 0
mirror of https://github.com/Abdulazizzn/n8n-enterprise-unlocked.git synced 2025-12-18 02:21:13 +00:00
Code Issues Packages Projects Releases Wiki Activity

feat(cli): User Management and Credentials sharing (#3602)

Browse Source 
* 🎉 starting feature development

* ✨ sharing/unsharing a credential (#3601)

* 🎉 initial design

* ✨ sharing/unsharing of credentials

* ✅ add tests for EE credentials controller

* 💪 implement review comments

* 🛠 refactor agent creation and credential role locking

* 👕 linting adjustments (#3691)

* 👕 Adjust rule `naming-convention`

* 👕 Fix `naming-convention` config value

* 👕 Disregard casing for EE-prefixed vars

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

* 🛠 refactor authAgents in tests (#3725)

* 🛠 refactor authAgent

* 🛠 refactor authAgent

* 🛠 refactor authAgent

* 🛠 refactor authAgent

* 👕 fix ts issue

* 🐘 add migration for mysql and postgres + add AuthAgent type

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>

* ⚡️ refactor existing credentials routes (#3672)

* 🎉 initial design

* ✨ sharing/unsharing of credentials

* ♻️ split credential update route into controller and service

* 🔥 remove credentials test that is no longer applicable

* ♻️ split credential creation route into controller and service

* ♻️ split single credential get

* ♻️ split delete credentials route

* ♻️ split get all credentials route

* 🔥 remove unused imports in credentials contoller

* 🔥 remove console.log

* :refactor: changes to credentials controller and service from review

 - removed credentials from service function names
 - made relations list optional
 - put allowGlobalOwner in options objects
 - check length of relations array so join doesn't happen if empty
 - update some comments to further explain rationale
 - remove unneeded `Object.assign`
 - remove non-null assertion from test

* ♻️ move filtered credentials selected fields to variable

* ♻️ remove unneeded merges in credentials service

Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>
Co-authored-by: Ben Hesseldieck <1849459+BHesseldieck@users.noreply.github.com>

* ✅ fix test

* 🐛 fix imports

* 👕 fix lint issue

* User Management: switch over to decorators to define routes (#3827)

* Add permissions details to credentials for User Management (#3863)

* ⚡ Open `GET /users`

* ⚡ Add permissions to cred service

* 🚚 Rename method

* ⚡ Refactor cred controller

* 🧪 Adjust test

* ✏️ Improve comment

* ✏️ Improve another comment

* ⚡ Account for multiple sharings

* 🐛 Fix access when user is editor

* 📘 Expand interface

* 📘 Relocate types

* 📘 Exempt cred entity with service-injected fields

* 📘 Adjust interface

* ♻️ Add permissions only in `GET /credentials`

* 🧪 Add expectations for `ownedBy`

* 🧪 Add sharing details test

* 🧪 Make `ownedBy` checks more granular

* 📘 Adjust interface

* 🚚 Rename cred getter

* ♻️ Refactor cred getter

* 🧪 Expand tests

* ♻️ Refactor to use guard

* 👕 Remove unneeded lint exception

* 🔥 Remove unneeded relation

* 🚚 Move relation to `GET /credentials/:id`

* 📘 Consolidate typings

* 🎨 Add multiline for readability

* 🔥 Remove unneeded type

* ✏️ Clarity comment

* ✏️ Make comments consistent

* 👕 Add exception to fix build

* 👕 Add more lint exceptions to fix build

* 🐛 Check for non-owner

* 📘 Improve typings

* 🧪 Temporarily skip tests

* 🔥 Remove `@ts-ignore`

* 👕 Move lint exceptions

* ♻️ Refactor cred service and controller

* ⚡ Simplify check

* ✏️ adjust naming to experimental

* ⚡️ add credentialsSharing flag to settings

* 🛠 add helper to check if UM is also enabled as dependency for CredentialsSharing

* 👕 fix lint error

* 🐘 change name of credential role

* 🚧 WIP batch sharing

* 🚧 WIP use put for sharing

* ✅ add tests for batch sharing, 🛠 implement review suggestions

* ✅ expand credential sharing tests for User Management (#3931)

* 🧪 Expand cred sharing tests

* ⚡ Add recently added flags

* ✅ fix and adjust tests for /credentials

Co-authored-by: Ben Hesseldieck <b.hesseldieck@gmail.com>

* ✨ User management v2 Front End (#3795)

* feat: Added responsive generic page view layout.

* feat: Added empty state.

* feat: Added credentials view empty state.

* test: Added unit tests for N8nActionBox

* feat: Added credentials list initial design.

* feat: Added credential actions. Started working on filters.

* feat: Updated InfoTip markup, added tests and changed stories to typescript.

* feat: Added credentials filtering by type. Added support for apply/reset filters.

* feat: Added credential sharing user select and user list. Added paywall component.

* feat: Updated credentials view permissions.

* feat: Added support for temporary sharing config for unsaved credentials.

* test: Fixed broken snapshots.

* feat: Added overflow styles to page-view-layout list.

* feat: Handled sharee specific views.

* feat: Integration between FE and BE to support real-world credential sharing scenario.

* feat: Added front end permissions table.

* feat: Refactored credential sharing flow. Updated design elements.

* feat: Added margin and padding auto spacer utilities.

* feat: Rehauled permissions to support instanceOwner role and action inheritance.

* feat: Updated credentials view to apply filters automatically.

* feat: Removed apply filters button and added active button state.

* test: Updated component snapshots.

* refactor: Renamed ResourceSharee to ResourceReader.

* feat: Credential sharing error handling, permissions improvement.

* feat: Updated permissions and error handling.

* chore: Removed console.log.

* 🛠 refactor enabling of credentialsSharing

* feat: Removed owner menu selector from credentials when sharing is disabled.

* refactor: Moved EE features into ee store module file.

* 🛠 add sharing info to GET credentials/:id

* fix: Fixed initial credential data loading for sharing.

* chore: Removed console.log.

* 🐛 owner can fetch any credential

* 🛠 refactor users test

* 👕 fix build type issue

* fix: Removed owner tag when credential sharing is disabled. Fixed small reactivity issue.

* chore: Removed console.log.

* 🚧 separate fetching credentials between EE and open

* fix: Fixed empty dropdown in users list.

* fix: Fixed error message and initialization when credential gets unshared.

* ✅ add tests for fetching single credential

* Revert decorators based controllers

* ⚡️ adjust credentials test route to also allow testing for sharees (#3999)

* ⚡️ pull data if user is sharee

* fix: Removed sharedWith and ownedBy from credentialData on testing credentials.

Co-authored-by: Alex Grozav <alex@grozav.com>

* 📈 add BE analytics

* 💪 improve credential test

* ⚡️ adjust tracking properties

* ⚡️ removed roles from tracking

* 🐛 fix build by removing imports

* 🐛 fix missed merge conflict

* feat: User management P2 Front End bug bash and improvements (#4014)

* fix: Fixed type select size after reopening dropdown.

* fix: Fixed template cards.

* fix: Fixed card content size and copy input.

* fix: Fixed horizontal overflow.

* fix: Hiding el-tags scrollbar in select.

* fix: Added fallback credential icon. Added oAuth credential owner check.

* feat: Added disabled state to user select.

* feat: Added fallback scenario for non-existent credential types.

* feat: Adjusted credentials empty state to show that there are shared credentials.

* fix: Fixed time title.

* feat: Added actionable empty state when shared credentials are present.

* fix: Made action box x padding smaller

* feat: Repositioned owner tag for credential card.

* feat: Updated message box styling to use n8n css variables.

* feat: Added confirmation for deleting sharee.

* fix: Fixed deleted credential types. Fixed select in dropdown bug.

* fix: Various code improvements. Addressed PR review comments.

* fix: Fixed credential deletion errors.

* fix: Various code quality improvements.

* feat: N8N-4531 update cloud coming soon features (#4025)

* feat: Showing different upcoming feature messages and format for cloud.

* fix: Changed url format.

* fix: Updated how cloud deployment is determined.

* feat: N8N-4527 implementing credential sharing FE telemetry (#4023)

* feat: Added credential sharing telemetry.

* chore: Renamed computed function for consistency.

* refactor: Simplified subview telemetry sending.

* fix: Changed to callDebounced() helper.

* 📧 update email text

* fix: Adjusted feature coming soon margin.

* chore: Fixed type and line height for delete sharee confirmation modal.

* refactor(editor-ui): Update telemetry (#4040)

* 🔥 Remove `identify` from BE

* ⚡ Add `versionCli`

* ⚡ Add node creator ignore input

* ⚡ Move obfuscators to editor-ui

* ⚡ Refactor `ph-no-capture`

* ⚡ Pass `user_id` to manual exec props

* 🚚 Relocate class in `SettingsApiView`

* ⚡ Add `userId` to BE PH `identify` call

* ⏪ Revert "⚡ Add `userId` to BE PH `identify` call"

This reverts commit 895aaa45e51506d5dbdcbdabe249a2c743d8e468.

* Revert "⏪ Revert "⚡ Add `userId` to BE PH `identify` call""

This reverts commit b86a098c202155742c927c88c04c971a5d34dce5.

* 🐛 Fix `Promise` handling in `track()` call

* ⏪ Restore `Db.collections` call

* ⚡ Set up PH payload to mirror RS

* 🔥 Remove excess `userId`

* 📘 Remove `userId` from interface

* 🔥 Remove unused ref and method

* fix: Fixed bug causing instanceOwner to become credential owner on update. (#4079)

* 🐛 fix test for credential shared with member

* 👕 fix lint issues

* delete conflicting migration. this data is already seeded in CreateUserManagement

* feat: Expand obfuscation to User Management credential sharing (#4070)

⚡ Expand obfuscation

* feat: Added credential sharing infotip for instance owner.

* bring back the migration. add a check to avoid conflicts on inserts

* fix(cli): use a non-env config flag to detect of enterprise features are enabled (#4105)

* chore: Changed ampersand to and in translation.

* refactor(telemetry): Obfuscate code and JSON editors (#4118)

⚡ Obfuscate code and JSON editors

* feat(editor): improve design and functionality of coming soon features (#4116)

* feat: Improved coming soon feature design and functionality.

* style: Removed empty line.

* chore: Removed unused translation.

* fix: fix telemetry for credential creates and updates (#4125)

fix telemetry for credential creates and updates

* feat: Display errors due to missing credentials in the correct node (#4124)

feat: Display errors due to invalid credentials in the correct node when missing permissions

* fix: remove duplicate header for coming soon features in cloud deployment

* telemetry: fix the payload for `User viewed credential tab`

* telemetry: add credential_id to 'User selected credential from node modal'

* feat: update empty states for coming soon features

* Update ActionBox.spec.ts.snap

* replace UserSharingsDetails with a subset of User properties

* rename the CreateCredentialsEditorRole to CreateCredentialsUserRole

* move IUser to the workflow package

* use IUser in the frontend as well

Co-authored-by: Iván Ovejero <ivov.src@gmail.com>
Co-authored-by: Valya <68596159+valya@users.noreply.github.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <netroy@users.noreply.github.com>
Co-authored-by: Alex Grozav <alex@grozav.com>
Co-authored-by: कारतोफ्फेलस्क्रिप्ट™ <aditya@netroy.in>
Co-authored-by: Omar Ajoue <krynble@gmail.com>
This commit is contained in:
Ben Hesseldieck
2022-09-21 10:20:29 +02:00
committed by GitHub
parent 4d8c380bef
commit 97cd564f7b
159 changed files with 4569 additions and 1269 deletions
Download Patch File Download Diff File Expand all files Collapse all files

547
packages/editor-ui/src/views/CredentialsView.vue Normal file
View File

@@ -0,0 +1,547 @@
<template>
<page-view-layout>
<template #aside>
<div :class="[$style['heading-wrapper'], 'mb-xs']">
<n8n-heading size="2xlarge">
{{ $locale.baseText('credentials.heading') }}
</n8n-heading>
</div>
<div class="mt-xs mb-l">
<n8n-button size="large" block @click="addCredential">
{{ $locale.baseText('credentials.add') }}
</n8n-button>
</div>
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
<n8n-menu default-active="owner" type="secondary" @select="onSelectOwner" ref="selectOwnerMenu">
<n8n-menu-item index="owner">
<template #title>
<n8n-icon icon="user"/>
<span class="ml-xs">
{{ $locale.baseText('credentials.menu.myCredentials') }}
</span>
</template>
</n8n-menu-item>
<n8n-menu-item index="all">
<template #title>
<n8n-icon icon="globe-americas"/>
<span class="ml-xs">
{{ $locale.baseText('credentials.menu.allCredentials') }}
</span>
</template>
</n8n-menu-item>
</n8n-menu>
</enterprise-edition>
</template>
<div v-if="loading">
<n8n-loading :class="[$style['header-loading'], 'mb-l']" variant="custom"/>
<n8n-loading :class="[$style['card-loading'], 'mb-2xs']" variant="custom"/>
<n8n-loading :class="$style['card-loading']" variant="custom"/>
</div>
<template v-else>
<div class="ph-no-capture" v-if="allCredentials.length === 0">
<n8n-action-box
emoji="👋"
:heading="$locale.baseText(currentUser.firstName ? 'credentials.empty.heading' : 'credentials.empty.heading.userNotSetup', {
interpolate: { name: currentUser.firstName }
})"
:description="$locale.baseText('credentials.empty.description')"
:buttonText="$locale.baseText('credentials.empty.button')"
buttonType="secondary"
@click="addCredential"
/>
</div>
<page-view-layout-list v-else>
<template #header>
<div class="mb-xs">
<div :class="$style['filters-row']">
<n8n-input
:class="[$style['search'], 'mr-2xs']"
:placeholder="$locale.baseText('credentials.search.placeholder')"
v-model="filters.search"
size="medium"
clearable
ref="search"
>
<n8n-icon icon="search" slot="prefix"/>
</n8n-input>
<div :class="$style['sort-and-filter']">
<n8n-select
v-model="filters.sortBy"
size="medium"
>
<n8n-option value="lastUpdated" :label="$locale.baseText('credentials.sort.lastUpdated')"/>
<n8n-option value="lastCreated" :label="$locale.baseText('credentials.sort.lastCreated')"/>
<n8n-option value="nameAsc" :label="$locale.baseText('credentials.sort.nameAsc')"/>
<n8n-option value="nameDesc" :label="$locale.baseText('credentials.sort.nameDesc')"/>
</n8n-select>
<n8n-popover
trigger="click"
>
<template slot="reference">
<n8n-button
icon="filter"
type="tertiary"
size="medium"
:active="hasFilters"
:class="[$style['filter-button'], 'ml-2xs']"
>
<n8n-badge
v-show="filtersLength > 0"
theme="primary"
class="mr-4xs"
>
{{ filtersLength }}
</n8n-badge>
{{ $locale.baseText('credentials.filters') }}
</n8n-button>
</template>
<div :class="$style['filters-dropdown']">
<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
v-model="filters.type"
size="small"
multiple
filterable
ref="typeInput"
:class="$style['type-input']"
>
<n8n-option
v-for="credentialType in allCredentialTypes"
:key="credentialType.name"
:value="credentialType.name"
:label="credentialType.displayName"
/>
</n8n-select>
</div>
<enterprise-edition class="mb-s" :features="[EnterpriseEditionFeature.Sharing]">
<n8n-input-label
:label="$locale.baseText('credentials.filters.ownedBy')"
:bold="false"
size="small"
color="text-base"
class="mb-3xs"
/>
<n8n-select
v-model="filters.ownedBy"
class="ph-no-capture"
:class="$style['user-select']"
size="small"
filterable
>
<template
v-for="user in allUsers"
>
<n8n-option
v-if="!user.isPending"
:key="user.id"
:value="user.id"
:label="user.fullName"
:disabled="user.id === filters.sharedWith"
>
<n8n-user-info
v-bind="user"
:class="$style['user-info']"
:isCurrentUser="user.id === currentUser.id"
:disabled="user.id === filters.sharedWith"
/>
</n8n-option>
</template>
</n8n-select>
</enterprise-edition>
<enterprise-edition :features="[EnterpriseEditionFeature.Sharing]">
<n8n-input-label
:label="$locale.baseText('credentials.filters.sharedWith')"
:bold="false"
size="small"
color="text-base"
class="mb-3xs"
/>
<n8n-select
v-model="filters.sharedWith"
class="ph-no-capture"
:class="$style['user-select']"
size="small"
filterable
>
<template v-for="user in allUsers">
<n8n-option
v-if="!user.isPending"
:key="user.id"
:value="user.id"
:label="user.fullName"
:disabled="user.id === filters.ownedBy"
>
<n8n-user-info
v-bind="user"
:class="$style['user-info']"
:isCurrentUser="user.id === currentUser.id"
:disabled="user.id === filters.ownedBy"
/>
</n8n-option>
</template>
</n8n-select>
</enterprise-edition>
<div :class="[$style['filters-dropdown-footer'], 'mt-s']" v-if="hasFilters">
<n8n-link @click="resetFilters">
{{ $locale.baseText('credentials.filters.reset') }}
</n8n-link>
</div>
</div>
</n8n-popover>
</div>
</div>
</div>
</template>
<div v-show="hasFilters" class="mt-xs">
<n8n-info-tip :bold="false">
{{ $locale.baseText('credentials.filters.active') }}
<n8n-link @click="resetFilters" size="small">
{{ $locale.baseText('credentials.filters.active.reset') }}
</n8n-link>
</n8n-info-tip>
</div>
<div class="mt-xs mb-l">
<ul class="list-style-none" v-if="filteredAndSortedSubviewCredentials.length > 0">
<li v-for="credential in filteredAndSortedSubviewCredentials" :key="credential.id" class="mb-2xs">
<credential-card :data="credential"/>
</li>
</ul>
<n8n-text color="text-base" size="medium" v-else>
{{ $locale.baseText('credentials.noResults') }}
<template v-if="!hasFilters && filters.owner && credentialsNotOwned.length > 0">
<span v-if="!filters.search">
({{ $locale.baseText('credentials.noResults.switchToShared.preamble') }}
<n8n-link @click="setOwnerFilter(false)">{{
$locale.baseText('credentials.noResults.switchToShared.link')
}}</n8n-link>)
</span>
<span v-else>
({{ $locale.baseText('credentials.noResults.withSearch.switchToShared.preamble') }}
<n8n-link @click="setOwnerFilter(false)">{{
$locale.baseText('credentials.noResults.withSearch.switchToShared.link')
}}</n8n-link>)
</span>
</template>
</n8n-text>
</div>
</page-view-layout-list>
</template>
</page-view-layout>
</template>
<script lang="ts">
import {showMessage} from '@/components/mixins/showMessage';
import {ICredentialsResponse, IUser} from '@/Interface';
import mixins from 'vue-typed-mixins';
import SettingsView from './SettingsView.vue';
import PageViewLayout from "@/components/layouts/PageViewLayout.vue";
import PageViewLayoutList from "@/components/layouts/PageViewLayoutList.vue";
import CredentialCard from "@/components/CredentialCard.vue";
import {CREDENTIAL_SELECT_MODAL_KEY} from "@/constants";
import {ICredentialType} from "n8n-workflow";
import {EnterpriseEditionFeature} from "@/constants";
import TemplateCard from "@/components/TemplateCard.vue";
import Vue from "vue";
import { debounce } from 'lodash';
import {genericHelpers} from "@/components/mixins/genericHelpers";
export default mixins(
showMessage,
genericHelpers,
).extend({
name: 'SettingsPersonalView',
components: {
TemplateCard,
PageViewLayout,
PageViewLayoutList,
SettingsView,
CredentialCard,
},
data() {
return {
loading: true,
filters: {
owner: true,
sortBy: 'lastUpdated',
search: '',
type: [] as string[],
ownedBy: '',
sharedWith: '',
},
filtersInput: {
type: [] as string[],
ownedBy: '',
sharedWith: '',
},
EnterpriseEditionFeature,
};
},
computed: {
currentUser(): IUser {
return this.$store.getters['users/currentUser'];
},
allUsers(): IUser[] {
return this.$store.getters['users/allUsers'];
},
allCredentials(): ICredentialsResponse[] {
return this.$store.getters['credentials/allCredentials'];
},
allCredentialTypes(): ICredentialType[] {
return this.$store.getters['credentials/allCredentialTypes'];
},
credentialTypesById(): Record<ICredentialType['name'], ICredentialType> {
return this.$store.getters['credentials/credentialTypesById'];
},
filtersLength(): number {
let length = 0;
if (this.filters.ownedBy) {
length += 1;
}
if (this.filters.sharedWith) {
length += 1;
}
if (this.filters.type.length > 0) {
length += 1;
}
return length;
},
subviewCredentials(): ICredentialsResponse[] {
return this.allCredentials.filter((credential: ICredentialsResponse) => {
if (this.filters.owner && this.$store.getters['settings/isEnterpriseFeatureEnabled'](EnterpriseEditionFeature.Sharing)) {
return !!(credential.ownedBy && credential.ownedBy.id === this.currentUser.id);
}
return true;
});
},
filteredAndSortedSubviewCredentials(): ICredentialsResponse[] {
const filtered: ICredentialsResponse[] = this.subviewCredentials.filter((credential: ICredentialsResponse) => {
let matches = true;
if (this.filters.ownedBy) {
matches = matches && !!(credential.ownedBy && credential.ownedBy.id === this.filters.ownedBy);
}
if (this.filters.sharedWith) {
matches = matches && !!(credential.sharedWith && credential.sharedWith.find((sharee) => sharee.id === this.filters.sharedWith));
}
if (this.filters.type.length > 0) {
matches = matches && this.filters.type.includes(credential.type);
}
if (this.filters.search) {
const searchString = this.filters.search.toLowerCase();
matches = matches && (
credential.name.toLowerCase().includes(searchString) ||
this.credentialTypesById[credential.type] && this.credentialTypesById[credential.type].displayName.toLowerCase().includes(searchString)
);
}
return matches;
});
return filtered.sort((a, b) => {
switch (this.filters.sortBy) {
case 'lastUpdated':
return (new Date(b.updatedAt)).valueOf() - (new Date(a.updatedAt)).valueOf();
case 'lastCreated':
return (new Date(b.createdAt)).valueOf() - (new Date(a.createdAt)).valueOf();
case 'nameAsc':
return a.name.localeCompare(b.name);
case 'nameDesc':
return b.name.localeCompare(a.name);
default:
return 0;
}
});
},
credentialsNotOwned(): ICredentialsResponse[] {
return this.allCredentials.filter((credential: ICredentialsResponse) => {
return credential.ownedBy && credential.ownedBy.id !== this.currentUser.id;
});
},
hasFilters(): boolean {
return this.filters.type.length > 0 ||
this.filters.ownedBy !== '' ||
this.filters.sharedWith !== '';
},
},
methods: {
addCredential() {
this.$store.dispatch('ui/openModal', CREDENTIAL_SELECT_MODAL_KEY);
this.resetFilters();
this.$telemetry.track('User clicked add cred button', {
source: 'Creds list',
});
},
async initialize() {
await Promise.all([
this.$store.dispatch('credentials/fetchAllCredentials'),
this.$store.dispatch('credentials/fetchCredentialTypes'),
this.$store.dispatch('nodeTypes/getNodeTypes'),
]);
this.loading = false;
this.$nextTick(this.focusSearchInput);
this.$store.dispatch('users/fetchUsers'); // Can be loaded in the background, used for filtering
},
resetFilters() {
this.filters.search = '';
this.filters.type = [];
this.filters.ownedBy = '';
this.filters.sharedWith = '';
this.filtersInput.type = [];
this.filtersInput.ownedBy = '';
this.filtersInput.sharedWith = '';
},
focusSearchInput() {
if (this.$refs.search) {
(this.$refs.search as Vue & { focus: () => void }).focus();
}
},
setOwnerFilter(active: boolean) {
(this.$refs.selectOwnerMenu as Vue & { $children: Array<{ activeIndex: string; }> }).$children[0].activeIndex = active ? 'owner' : 'all';
this.filters.owner = active;
},
onSelectOwner(type: string) {
this.filters.owner = type === 'owner';
},
sendSubviewTelemetry() {
this.$telemetry.track('User changed credentials sub view', {
sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
});
},
sendSortingTelemetry() {
this.$telemetry.track('User changed sorting in cred list', {
sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
sorting: this.filters.sortBy,
});
},
sendFiltersTelemetry() {
const filters = this.filters as Record<string, string[] | string | boolean>;
const filtersSet: string[] = [];
const filterValues: Array<string[] | string | boolean | null> = [];
['ownedBy', 'sharedWith', 'type', 'search'].forEach((key) => {
if (filters[key]) {
filtersSet.push(key);
filterValues.push(key === 'search' ? null : filters[key]);
}
});
this.$telemetry.track('User set filters in cred list', {
filters_set: filtersSet,
filter_values: filterValues,
sub_view: this.filters.owner ? 'My credentials' : 'All credentials',
creds_total_in_view: this.subviewCredentials.length,
creds_after_filtering: this.filteredAndSortedSubviewCredentials.length,
});
},
},
mounted() {
this.initialize();
},
watch: {
'filters.owner'() {
this.sendSubviewTelemetry();
},
'filters.ownedBy'(value) {
if (value) {
this.setOwnerFilter(false);
}
this.sendFiltersTelemetry();
},
'filters.sharedWith'() {
this.sendFiltersTelemetry();
},
'filters.type'() {
this.sendFiltersTelemetry();
},
'filters.search'() {
this.callDebounced('sendFiltersTelemetry', { debounceTime: 1000, trailing: true });
},
'filters.sortBy'() {
this.sendSortingTelemetry();
},
},
});
</script>
<style lang="scss" module>
.heading-wrapper {
padding-bottom: 1px; // Match input height
}
.filters-row {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.search {
max-width: 240px;
}
.sort-and-filter {
display: flex;
flex-direction: row;
align-items: center;
justify-content: space-between;
}
.filter-button {
height: 36px;
align-items: center;
}
.filters-dropdown {
width: 280px;
}
.filters-dropdown-footer {
display: flex;
justify-content: space-between;
align-items: center;
}
.header-loading {
height: 36px;
}
.card-loading {
height: 69px;
}
.user-select {
--select-option-line-height: auto;
}
.user-info {
margin: var(--spacing-2xs) 0;
}
.type-input {
--max-width: 265px;
}
</style>