mohiit1502/Automata
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

fix(editor): Fix External secrets typecheck (no-changelog) (#9434)

Browse Source
This commit is contained in:
Alex Grozav
2024-05-17 14:16:00 +03:00
committed by GitHub
parent 28e3e21177
commit db1a40635d
9 changed files with 100 additions and 63 deletions
Download Patch File Download Diff File Expand all files Collapse all files

30
packages/editor-ui/src/components/ExternalSecretsProviderCard.ee.vue
View File

@@ -1,5 +1,5 @@
<script lang="ts" setup>
import type { PropType, Ref } from 'vue';
import type { PropType } from 'vue';
import type { ExternalSecretsProvider } from '@/Interface';
import ExternalSecretsProviderImage from '@/components/ExternalSecretsProviderImage.ee.vue';
import ExternalSecretsProviderConnectionSwitch from '@/components/ExternalSecretsProviderConnectionSwitch.ee.vue';
@@ -10,7 +10,8 @@ import { useI18n } from '@/composables/useI18n';
import { useExternalSecretsProvider } from '@/composables/useExternalSecretsProvider';
import { EXTERNAL_SECRETS_PROVIDER_MODAL_KEY } from '@/constants';
import { DateTime } from 'luxon';
import { computed, nextTick, onMounted, toRefs } from 'vue';
import { computed, nextTick, onMounted, toRef } from 'vue';
import { isDateObject } from '@/utils/typeGuards';
const props = defineProps({
provider: {
@@ -24,15 +25,12 @@ const i18n = useI18n();
const uiStore = useUIStore();
const toast = useToast();
const { provider } = toRefs(props) as Ref<ExternalSecretsProvider>;
const providerData = computed(() => provider.value.data);
const {
connectionState,
initialConnectionState,
normalizedProviderData,
testConnection,
setConnectionState,
} = useExternalSecretsProvider(provider, providerData);
const provider = toRef(props, 'provider');
const providerData = computed(() => provider.value.data ?? {});
const { connectionState, testConnection, setConnectionState } = useExternalSecretsProvider(
provider,
providerData,
);
const actionDropdownOptions = computed(() => [
{
@@ -50,11 +48,15 @@ const actionDropdownOptions = computed(() => [
]);
const canConnect = computed(() => {
return props.provider.connected || Object.keys(props.provider.data).length > 0;
return props.provider.connected || Object.keys(providerData.value).length > 0;
});
const formattedDate = computed((provider: ExternalSecretsProvider) => {
return DateTime.fromISO(props.provider.connectedAt ?? new Date()).toFormat('dd LLL yyyy');
const formattedDate = computed(() => {
return DateTime.fromISO(
isDateObject(provider.value.connectedAt)
? provider.value.connectedAt.toISOString()
: provider.value.connectedAt || new Date().toISOString(),
).toFormat('dd LLL yyyy');
});
onMounted(() => {

1
packages/editor-ui/src/components/ExternalSecretsProviderImage.ee.vue
View File

@@ -2,6 +2,7 @@
import type { PropType } from 'vue';
import type { ExternalSecretsProvider } from '@/Interface';
import { computed } from 'vue';
import infisical from '../assets/images/infisical.webp';
import doppler from '../assets/images/doppler.webp';
import vault from '../assets/images/hashicorp.webp';

45
packages/editor-ui/src/components/ExternalSecretsProviderModal.ee.vue
View File

@@ -2,7 +2,7 @@
import Modal from './Modal.vue';
import { EXTERNAL_SECRETS_PROVIDER_MODAL_KEY, MODAL_CONFIRM } from '@/constants';
import { computed, onMounted, ref } from 'vue';
import type { PropType, Ref } from 'vue';
import type { PropType } from 'vue';
import type { EventBus } from 'n8n-design-system/utils';
import { useExternalSecretsProvider } from '@/composables/useExternalSecretsProvider';
import { useI18n } from '@/composables/useI18n';
@@ -10,7 +10,6 @@ import { useMessage } from '@/composables/useMessage';
import { useToast } from '@/composables/useToast';
import { useExternalSecretsStore } from '@/stores/externalSecrets.ee.store';
import { useUIStore } from '@/stores/ui.store';
import { useRoute } from 'vue-router';
import ParameterInputExpanded from '@/components/ParameterInputExpanded.vue';
import type {
IUpdateInformation,
@@ -29,7 +28,7 @@ const props = defineProps({
},
});
const defaultProviderData = {
const defaultProviderData: Record<string, Partial<ExternalSecretsProviderData>> = {
infisical: {
siteURL: 'https://app.infisical.com',
},
@@ -39,7 +38,6 @@ const externalSecretsStore = useExternalSecretsStore();
const uiStore = useUIStore();
const toast = useToast();
const i18n = useI18n();
const route = useRoute();
const { confirm } = useMessage();
const saving = ref(false);
@@ -50,7 +48,7 @@ const labelSize: IParameterLabel = { size: 'medium' };
const provider = computed<ExternalSecretsProvider | undefined>(() =>
externalSecretsStore.providers.find((p) => p.name === props.data.name),
) as Ref<ExternalSecretsProvider>;
);
const providerData = ref<ExternalSecretsProviderData>({});
const {
connectionState,
@@ -64,7 +62,7 @@ const {
const providerDataUpdated = computed(() => {
return Object.keys(providerData.value).find((key) => {
const value = providerData.value[key];
const originalValue = provider.value.data[key];
const originalValue = provider.value?.data?.[key];
return value !== originalValue;
});
@@ -72,7 +70,7 @@ const providerDataUpdated = computed(() => {
const canSave = computed(
() =>
provider.value.properties
provider.value?.properties
?.filter((property) => property.required && shouldDisplayProperty(property))
.every((property) => {
const value = providerData.value[property.name];
@@ -82,21 +80,22 @@ const canSave = computed(
onMounted(async () => {
try {
const provider = await externalSecretsStore.getProvider(props.data.name);
const fetchedProvider = await externalSecretsStore.getProvider(props.data.name);
providerData.value = {
...(defaultProviderData[props.data.name] || {}),
...provider.data,
...fetchedProvider.data,
};
setConnectionState(provider.state);
setConnectionState(fetchedProvider.state);
if (provider.connected) {
initialConnectionState.value = provider.state;
} else if (Object.keys(provider.data).length) {
if (fetchedProvider.connected) {
initialConnectionState.value = fetchedProvider.state;
} else if (Object.keys(fetchedProvider.data ?? {}).length) {
await testConnection();
}
if (provider.state === 'connected') {
if (fetchedProvider.state === 'connected') {
void externalSecretsStore.reloadProvider(props.data.name);
}
} catch (error) {
@@ -116,6 +115,10 @@ function onValueChange(updateInformation: IUpdateInformation) {
}
async function save() {
if (!provider.value) {
return;
}
try {
saving.value = true;
await externalSecretsStore.updateProvider(provider.value.name, {
@@ -143,7 +146,7 @@ async function onBeforeClose() {
const confirmModal = await confirm(
i18n.baseText('settings.externalSecrets.provider.closeWithoutSaving.description', {
interpolate: {
provider: provider.value.displayName,
provider: provider.value?.displayName ?? '',
},
}),
{
@@ -162,19 +165,23 @@ async function onBeforeClose() {
return true;
}
async function onConnectionStateChange() {
await testConnection();
}
</script>
<template>
<Modal
id="external-secrets-provider-modal"
width="812px"
:title="provider.displayName"
:title="provider?.displayName"
:event-bus="data.eventBus"
:name="EXTERNAL_SECRETS_PROVIDER_MODAL_KEY"
:before-close="onBeforeClose"
>
<template #header>
<div :class="$style.header">
<div v-if="provider" :class="$style.header">
<div :class="$style.providerTitle">
<ExternalSecretsProviderImage :provider="provider" class="mr-xs" />
<span>{{ provider.displayName }}</span>
@@ -188,7 +195,7 @@ async function onBeforeClose() {
"
:event-bus="eventBus"
:provider="provider"
@change="testConnection"
@change="onConnectionStateChange"
/>
<n8n-button
type="primary"
@@ -207,7 +214,7 @@ async function onBeforeClose() {
</template>
<template #content>
<div :class="$style.container">
<div v-if="provider" :class="$style.container">
<hr class="mb-l" />
<div v-if="connectionState !== 'initializing'" class="mb-l">
<n8n-callout