refactor(editor): Fix TypeScript issues in template code (no-changelog) (#9574)

This commit is contained in:
Elias Meire 2024-05-31 15:07:49 +02:00 committed by GitHub
parent d361b42c70
commit 1cefd488fe
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
11 changed files with 94 additions and 44 deletions

View file

@ -12,7 +12,7 @@
<div v-if="loading" :class="$style.loading">
<n8n-loading :rows="2" :shrink-last="false" :loading="loading" />
</div>
<div v-else>
<div v-else-if="workflow">
<n8n-heading :bold="true" size="small">{{ workflow.name }}</n8n-heading>
<div v-if="!simpleView" :class="$style.content">
<span v-if="workflow.totalViews">
@ -31,7 +31,10 @@
>
</div>
</div>
<div v-if="!loading" :class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]">
<div
v-if="!loading && workflow"
:class="[$style.nodesContainer, useWorkflowButton && $style.hideOnHover]"
>
<NodeList v-if="workflow.nodes" :nodes="workflow.nodes" :limit="nodesToBeShown" size="md" />
</div>
<div v-if="useWorkflowButton" :class="$style.buttonContainer">
@ -47,11 +50,12 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { type PropType, defineComponent } from 'vue';
import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
import { abbreviateNumber } from '@/utils/typesUtils';
import NodeList from './NodeList.vue';
import TimeAgo from '@/components/TimeAgo.vue';
import type { ITemplatesWorkflow } from '@/Interface';
export default defineComponent({
name: 'TemplateCard',
@ -60,6 +64,9 @@ export default defineComponent({
NodeList,
},
props: {
workflow: {
type: Object as PropType<ITemplatesWorkflow>,
},
lastItem: {
type: Boolean,
default: false,
@ -68,9 +75,6 @@ export default defineComponent({
type: Boolean,
default: false,
},
workflow: {
type: Object,
},
useWorkflowButton: {
type: Boolean,
},

View file

@ -2,7 +2,10 @@
<div>
<n8n-loading :loading="loading" :rows="5" variant="p" />
<TemplateDetailsBlock v-if="!loading && template.nodes.length > 0" :title="blockTitle">
<TemplateDetailsBlock
v-if="!loading && template && template.nodes.length > 0"
:title="blockTitle"
>
<div :class="$style.icons">
<div
v-for="node in filterTemplateNodes(template.nodes)"
@ -20,15 +23,18 @@
</TemplateDetailsBlock>
<TemplateDetailsBlock
v-if="!loading && template?.categories.length > 0"
v-if="!loading && isFullTemplatesCollection(template) && template.categories.length > 0"
:title="$locale.baseText('template.details.categories')"
>
<n8n-tags :tags="template.categories" @click:tag="redirectToCategory" />
</TemplateDetailsBlock>
<TemplateDetailsBlock v-if="!loading" :title="$locale.baseText('template.details.details')">
<TemplateDetailsBlock
v-if="!loading && template"
:title="$locale.baseText('template.details.details')"
>
<div :class="$style.text">
<n8n-text size="small" color="text-base">
<n8n-text v-if="isTemplatesWorkflow(template)" size="small" color="text-base">
{{ $locale.baseText('template.details.created') }}
<TimeAgo :date="template.createdAt" />
{{ $locale.baseText('template.details.by') }}
@ -36,7 +42,11 @@
</n8n-text>
</div>
<div :class="$style.text">
<n8n-text v-if="template.totalViews !== 0" size="small" color="text-base">
<n8n-text
v-if="isTemplatesWorkflow(template) && template.totalViews !== 0"
size="small"
color="text-base"
>
{{ $locale.baseText('template.details.viewed') }}
{{ abbreviateNumber(template.totalViews) }}
{{ $locale.baseText('template.details.times') }}
@ -53,10 +63,16 @@ import TemplateDetailsBlock from '@/components/TemplateDetailsBlock.vue';
import NodeIcon from '@/components/NodeIcon.vue';
import { filterTemplateNodes } from '@/utils/nodeTypesUtils';
import { abbreviateNumber } from '@/utils/typesUtils';
import type { ITemplatesNode, ITemplatesWorkflow, ITemplatesWorkflowFull } from '@/Interface';
import type {
ITemplatesCollection,
ITemplatesCollectionFull,
ITemplatesNode,
ITemplatesWorkflow,
} from '@/Interface';
import { mapStores } from 'pinia';
import { useTemplatesStore } from '@/stores/templates.store';
import TimeAgo from '@/components/TimeAgo.vue';
import { isFullTemplatesCollection, isTemplatesWorkflow } from '@/utils/templates/typeGuards';
export default defineComponent({
name: 'TemplateDetails',
@ -66,15 +82,19 @@ export default defineComponent({
TimeAgo,
},
props: {
template: {
type: Object as PropType<
ITemplatesWorkflow | ITemplatesCollection | ITemplatesCollectionFull | null
>,
required: true,
},
blockTitle: {
type: String,
required: true,
},
loading: {
type: Boolean,
},
template: {
type: Object as PropType<ITemplatesWorkflow | ITemplatesWorkflowFull>,
},
},
computed: {
...mapStores(useTemplatesStore),
@ -90,6 +110,8 @@ export default defineComponent({
this.templatesStore.resetSessionId();
void this.$router.push(`/templates?search=${node.displayName}`);
},
isFullTemplatesCollection,
isTemplatesWorkflow,
},
});
</script>

View file

@ -34,8 +34,9 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { type PropType, defineComponent } from 'vue';
import TemplateCard from './TemplateCard.vue';
import type { ITemplatesWorkflow } from '@/Interface';
export default defineComponent({
name: 'TemplateList',
@ -55,7 +56,7 @@ export default defineComponent({
default: false,
},
workflows: {
type: Array,
type: Array as PropType<ITemplatesWorkflow[]>,
default: () => [],
},
totalWorkflows: {
@ -103,10 +104,10 @@ export default defineComponent({
this.$emit('loadMore');
}
},
onCardClick(event: MouseEvent, id: string) {
onCardClick(event: MouseEvent, id: number) {
this.$emit('openTemplate', { event, id });
},
onUseWorkflow(event: MouseEvent, id: string) {
onUseWorkflow(event: MouseEvent, id: number) {
this.$emit('useWorkflow', { event, id });
},
},

View file

@ -13,9 +13,10 @@
</template>
<script lang="ts">
import { defineComponent } from 'vue';
import { type PropType, defineComponent } from 'vue';
import Card from '@/components/CollectionWorkflowCard.vue';
import NodeList from '@/components/NodeList.vue';
import type { ITemplatesCollection } from '@/Interface';
export default defineComponent({
name: 'TemplatesInfoCard',
@ -24,12 +25,13 @@ export default defineComponent({
NodeList,
},
props: {
collection: {
type: Object as PropType<ITemplatesCollection>,
required: true,
},
loading: {
type: Boolean,
},
collection: {
type: Object,
},
showItemCount: {
type: Boolean,
default: true,

View file

@ -56,6 +56,7 @@ export default defineComponent({
props: {
collections: {
type: Array as PropType<ITemplatesCollection[]>,
required: true,
},
loading: {
type: Boolean,
@ -125,7 +126,7 @@ export default defineComponent({
this.scrollEnd = scrollWidth - width <= scrollLeft + 7;
}
},
onCardClick(event: MouseEvent, id: string) {
onCardClick(event: MouseEvent, id: number) {
this.$emit('openCollection', { event, id });
},
scrollLeft() {

View file

@ -26,7 +26,7 @@
import { onMounted, onBeforeUnmount, ref, computed, watch } from 'vue';
import { useI18n } from '@/composables/useI18n';
import { useToast } from '@/composables/useToast';
import type { IWorkflowDb } from '@/Interface';
import type { IWorkflowDb, IWorkflowTemplate } from '@/Interface';
import { useRootStore } from '@/stores/n8nRoot.store';
import { useExecutionsStore } from '@/stores/executions.store';
@ -34,7 +34,7 @@ const props = withDefaults(
defineProps<{
loading?: boolean;
mode?: 'workflow' | 'execution';
workflow?: IWorkflowDb;
workflow?: IWorkflowDb | IWorkflowTemplate['workflow'];
executionId?: string;
executionMode?: string;
loaderType?: 'image' | 'spinner';

View file

@ -5,6 +5,7 @@ import { ExternalHooks } from '@/types/externalHooks';
declare module 'markdown-it-link-attributes';
declare module 'markdown-it-emoji';
declare module 'markdown-it-task-lists';
declare module 'vue-agile';
declare global {
interface ImportMeta {

View file

@ -0,0 +1,17 @@
import type {
ITemplatesCollection,
ITemplatesCollectionFull,
ITemplatesWorkflow,
} from '@/Interface';
export function isTemplatesWorkflow(
template: ITemplatesWorkflow | ITemplatesCollection | ITemplatesCollectionFull | null,
): template is ITemplatesWorkflow {
return !!template && 'totalViews' in template;
}
export function isFullTemplatesCollection(
template: ITemplatesWorkflow | ITemplatesCollectionFull | ITemplatesCollection | null,
): template is ITemplatesCollectionFull {
return !!template && 'description' in template && 'categories' in template;
}

View file

@ -21,10 +21,10 @@
<template v-if="!notFoundError" #content>
<div :class="$style.wrapper">
<div :class="$style.mainContent">
<div v-if="loading || (collection && collection.description)" :class="$style.markdown">
<div v-if="loading || isFullTemplatesCollection(collection)" :class="$style.markdown">
<n8n-markdown
:content="collection && collection.description"
:images="collection && collection.image"
:content="isFullTemplatesCollection(collection) && collection.description"
:images="isFullTemplatesCollection(collection) && collection.image"
:loading="loading"
/>
</div>
@ -32,7 +32,7 @@
:infinite-scroll-enabled="false"
:loading="loading"
:use-workflow-button="true"
:workflows="loading ? [] : collectionWorkflows"
:workflows="collectionWorkflows"
@use-workflow="onUseWorkflow"
@open-template="onOpenTemplate"
/>
@ -61,7 +61,6 @@ import type {
ITemplatesCollection,
ITemplatesCollectionFull,
ITemplatesWorkflow,
ITemplatesWorkflowFull,
} from '@/Interface';
import { setPageTitle } from '@/utils/htmlUtils';
@ -71,6 +70,7 @@ import { usePostHog } from '@/stores/posthog.store';
import { useTemplateWorkflow } from '@/utils/templates/templateActions';
import { useExternalHooks } from '@/composables/useExternalHooks';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { isFullTemplatesCollection } from '@/utils/templates/typeGuards';
export default defineComponent({
name: 'TemplatesCollectionView',
@ -88,7 +88,7 @@ export default defineComponent({
},
computed: {
...mapStores(useTemplatesStore, usePostHog),
collection(): ITemplatesCollectionFull | null {
collection(): ITemplatesCollectionFull | ITemplatesCollection | null {
return this.templatesStore.getCollectionById(this.collectionId);
},
collectionId(): string {
@ -96,13 +96,13 @@ export default defineComponent({
? this.$route.params.id[0]
: this.$route.params.id;
},
collectionWorkflows(): Array<ITemplatesWorkflow | ITemplatesWorkflowFull | null> | null {
if (!this.collection) {
return null;
collectionWorkflows(): ITemplatesWorkflow[] {
if (!this.collection || this.loading) {
return [];
}
return this.collection.workflows.map(({ id }) => {
return this.templatesStore.getTemplateById(id.toString());
});
return this.collection.workflows
.map(({ id }) => this.templatesStore.getTemplateById(id.toString()))
.filter((workflow): workflow is ITemplatesWorkflow => !!workflow);
},
},
data() {
@ -123,7 +123,7 @@ export default defineComponent({
async mounted() {
this.scrollToTop();
if (this.collection && this.collection.full) {
if (this.collection && 'full' in this.collection && this.collection.full) {
this.loading = false;
return;
}
@ -172,6 +172,7 @@ export default defineComponent({
void this.$router.push({ name: page, params: { id } });
}
},
isFullTemplatesCollection,
},
});
</script>

View file

@ -198,8 +198,9 @@ export default defineComponent({
setTimeout(() => {
// Check if there is scroll position saved in route and scroll to it
if (this.$route.meta && this.$route.meta.scrollOffset > 0) {
this.scrollTo(this.$route.meta.scrollOffset, 'auto');
const scrollOffset = this.$route.meta?.scrollOffset;
if (typeof scrollOffset === 'number' && scrollOffset > 0) {
this.scrollTo(scrollOffset, 'auto');
}
}, 100);
},

View file

@ -31,15 +31,15 @@
<WorkflowPreview
v-if="showPreview"
:loading="loading"
:workflow="template && template.workflow"
:workflow="template?.workflow"
@close="onHidePreview"
/>
</div>
<div :class="$style.content">
<div :class="$style.markdown" data-test-id="template-description">
<n8n-markdown
:content="template && template.description"
:images="template && template.image"
:content="template?.description"
:images="template?.image"
:loading="loading"
/>
</div>