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

feat(editor): Migrate copyPaste mixin to composables (no-changelog) (#8179)

Browse Source
This commit is contained in:
Alex Grozav
2023-12-29 12:13:24 +02:00
committed by GitHub
parent 216ec079c9
commit f5a4bfe40c
27 changed files with 212 additions and 332 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
packages/editor-ui/src/components/CopyInput.vue
View File

@@ -23,12 +23,11 @@
<script lang="ts">
import { defineComponent } from 'vue';
import { copyPaste } from '@/mixins/copyPaste';
import { useToast } from '@/composables/useToast';
import { i18n } from '@/plugins/i18n';
import { useClipboard } from '@/composables/useClipboard';
export default defineComponent({
mixins: [copyPaste],
props: {
label: {
type: String,
@@ -68,14 +67,17 @@ export default defineComponent({
},
},
setup() {
const clipboard = useClipboard();
return {
clipboard,
...useToast(),
};
},
methods: {
copy(): void {
this.$emit('copy');
this.copyToClipboard(this.value);
void this.clipboard.copy(this.value);
this.showMessage({
title: this.toastTitle,

8
packages/editor-ui/src/components/Error/NodeErrorView.vue
View File

@@ -121,7 +121,6 @@
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import VueJsonPretty from 'vue-json-pretty';
import { copyPaste } from '@/mixins/copyPaste';
import { useToast } from '@/composables/useToast';
import { MAX_DISPLAY_DATA_SIZE } from '@/constants';
@@ -134,16 +133,19 @@ import type {
import { sanitizeHtml } from '@/utils/htmlUtils';
import { useNDVStore } from '@/stores/ndv.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import { useClipboard } from '@/composables/useClipboard';
export default defineComponent({
name: 'NodeErrorView',
components: {
VueJsonPretty,
},
mixins: [copyPaste],
props: ['error'],
setup() {
const clipboard = useClipboard();
return {
clipboard,
...useToast(),
};
},
@@ -283,7 +285,7 @@ export default defineComponent({
return [currentParameter];
},
copyCause() {
this.copyToClipboard(JSON.stringify(this.error.cause));
void this.clipboard.copy(JSON.stringify(this.error.cause));
this.copySuccess();
},
copySuccess() {

10
packages/editor-ui/src/components/InviteUsersModal.vue
View File

@@ -64,7 +64,6 @@
import { defineComponent } from 'vue';
import { mapStores } from 'pinia';
import { useToast } from '@/composables/useToast';
import { copyPaste } from '@/mixins/copyPaste';
import Modal from './Modal.vue';
import type { IFormInputs, IInviteResponse, IUser } from '@/Interface';
import { ROLE } from '@/utils/userUtils';
@@ -73,6 +72,7 @@ import { useUsersStore } from '@/stores/users.store';
import { useSettingsStore } from '@/stores/settings.store';
import { useUIStore } from '@/stores/ui.store';
import { createEventBus } from 'n8n-design-system/utils';
import { useClipboard } from '@/composables/useClipboard';
const NAME_EMAIL_FORMAT_REGEX = /^.* <(.*)>$/;
@@ -90,14 +90,16 @@ function getEmail(email: string): string {
export default defineComponent({
name: 'InviteUsersModal',
components: { Modal },
mixins: [copyPaste],
props: {
modalName: {
type: String,
},
},
setup() {
const clipboard = useClipboard();
return {
clipboard,
...useToast(),
};
},
@@ -258,7 +260,7 @@ export default defineComponent({
if (successfulUrlInvites.length) {
if (successfulUrlInvites.length === 1) {
this.copyToClipboard(successfulUrlInvites[0].user.inviteAcceptUrl);
void this.clipboard.copy(successfulUrlInvites[0].user.inviteAcceptUrl);
}
this.showMessage({
@@ -328,7 +330,7 @@ export default defineComponent({
},
onCopyInviteLink(user: IUser) {
if (user.inviteAcceptUrl && this.showInviteUrls) {
this.copyToClipboard(user.inviteAcceptUrl);
void this.clipboard.copy(user.inviteAcceptUrl);
this.showCopyInviteLinkToast([]);
}
},

8
packages/editor-ui/src/components/MfaSetupModal.vue
View File

@@ -140,20 +140,22 @@ import { mapStores } from 'pinia';
import { useUIStore } from '@/stores/ui.store';
import { useNDVStore } from '@/stores/ndv.store';
import { useUsersStore } from '@/stores/users.store';
import { copyPaste } from '@/mixins/copyPaste';
import { mfaEventBus } from '@/event-bus';
import { useToast } from '@/composables/useToast';
//@ts-ignore
import QrcodeVue from 'qrcode.vue';
import { useClipboard } from '@/composables/useClipboard';
export default defineComponent({
name: 'MfaSetupModal',
components: {
Modal,
QrcodeVue,
},
mixins: [copyPaste],
setup() {
const clipboard = useClipboard();
return {
clipboard,
...useToast(),
};
},
@@ -199,7 +201,7 @@ export default defineComponent({
});
},
onCopySecretToClipboard() {
this.copyToClipboard(this.secret);
void this.clipboard.copy(this.secret);
this.showToast({
title: this.$locale.baseText('mfa.setup.step1.toast.copyToClipboard.title'),
message: this.$locale.baseText('mfa.setup.step1.toast.copyToClipboard.message'),

9
packages/editor-ui/src/components/NodeWebhooks.vue
View File

@@ -66,18 +66,21 @@ import { defineComponent } from 'vue';
import { useToast } from '@/composables/useToast';
import { FORM_TRIGGER_NODE_TYPE, OPEN_URL_PANEL_TRIGGER_NODE_TYPES } from '@/constants';
import { copyPaste } from '@/mixins/copyPaste';
import { workflowHelpers } from '@/mixins/workflowHelpers';
import { useClipboard } from '@/composables/useClipboard';
export default defineComponent({
name: 'NodeWebhooks',
mixins: [copyPaste, workflowHelpers],
mixins: [workflowHelpers],
props: [
'node', // NodeUi
'nodeType', // INodeTypeDescription
],
setup() {
const clipboard = useClipboard();
return {
clipboard,
...useToast(),
};
},
@@ -136,7 +139,7 @@ export default defineComponent({
methods: {
copyWebhookUrl(webhookData: IWebhookDescription): void {
const webhookUrl = this.getWebhookUrlDisplay(webhookData);
this.copyToClipboard(webhookUrl);
void this.clipboard.copy(webhookUrl);
this.showMessage({
title: this.baseText.copyTitle,

15
packages/editor-ui/src/components/RunDataAi/AiRunContentBlock.vue
View File

@@ -51,7 +51,7 @@
type="secondary"
:title="$locale.baseText('nodeErrorView.copyToClipboard')"
icon="copy"
@click="copyToClipboard(raw)"
@click="onCopyToClipboard(raw)"
/>
<VueMarkdown :source="jsonToMarkdown(raw as JsonMarkdown)" :class="$style.markdown" />
</div>
@@ -68,7 +68,7 @@ import { ref, onMounted } from 'vue';
import type { ParsedAiContent } from './useAiContentParsers';
import { useAiContentParsers } from './useAiContentParsers';
import VueMarkdown from 'vue-markdown-render';
import { useCopyToClipboard } from '@/composables/useCopyToClipboard';
import { useClipboard } from '@/composables/useClipboard';
import { useI18n } from '@/composables/useI18n';
import { useToast } from '@/composables/useToast';
import { NodeConnectionType, type IDataObject } from 'n8n-workflow';
@@ -78,13 +78,15 @@ const props = defineProps<{
}>();
const i18n = useI18n();
const clipboard = useClipboard();
const { showMessage } = useToast();
const contentParsers = useAiContentParsers();
// eslint-disable-next-line @typescript-eslint/no-use-before-define
const isExpanded = ref(getInitialExpandedState());
const isShowRaw = ref(false);
const contentParsed = ref(false);
const parsedRun = ref(undefined as ParsedAiContent | undefined);
function getInitialExpandedState() {
const collapsedTypes = {
input: [NodeConnectionType.AiDocument, NodeConnectionType.AiTextSplitter],
@@ -155,12 +157,9 @@ function onBlockHeaderClick() {
isExpanded.value = !isExpanded.value;
}
function copyToClipboard(content: IDataObject | IDataObject[]) {
const copyToClipboardFn = useCopyToClipboard();
const { showMessage } = useToast();
function onCopyToClipboard(content: IDataObject | IDataObject[]) {
try {
copyToClipboardFn(JSON.stringify(content, undefined, 2));
void clipboard.copy(JSON.stringify(content, undefined, 2));
showMessage({
title: i18n.baseText('generic.copiedToClipboard'),
type: 'success',

10
packages/editor-ui/src/components/RunDataJsonActions.vue
View File

@@ -41,7 +41,6 @@ import { mapStores } from 'pinia';
import jp from 'jsonpath';
import type { INodeUi } from '@/Interface';
import type { IDataObject } from 'n8n-workflow';
import { copyPaste } from '@/mixins/copyPaste';
import { pinData } from '@/mixins/pinData';
import { genericHelpers } from '@/mixins/genericHelpers';
import { clearJsonKey, convertPath } from '@/utils/typesUtils';
@@ -52,6 +51,7 @@ import { useNodeHelpers } from '@/composables/useNodeHelpers';
import { useToast } from '@/composables/useToast';
import { useI18n } from '@/composables/useI18n';
import { nonExistingJsonPath } from '@/constants';
import { useClipboard } from '@/composables/useClipboard';
type JsonPathData = {
path: string;
@@ -60,8 +60,7 @@ type JsonPathData = {
export default defineComponent({
name: 'RunDataJsonActions',
mixins: [genericHelpers, pinData, copyPaste],
mixins: [genericHelpers, pinData],
props: {
node: {
type: Object as PropType<INodeUi>,
@@ -96,9 +95,12 @@ export default defineComponent({
setup() {
const i18n = useI18n();
const nodeHelpers = useNodeHelpers();
const clipboard = useClipboard();
return {
i18n,
nodeHelpers,
clipboard,
...useToast(),
};
},
@@ -222,7 +224,7 @@ export default defineComponent({
in_execution_log: this.isReadOnlyRoute,
});
this.copyToClipboard(value);
void this.clipboard.copy(value);
},
},
});

2
packages/editor-ui/src/components/RunDataSchemaItem.vue
View File

@@ -134,7 +134,7 @@ const getIconBySchemaType = (type: Schema['type']): string => {
</template>
<style lang="scss" module>
@import '@/styles/css-animation-helpers.scss';
@import '@/styles/variables';
.item {
display: block;

2
packages/editor-ui/src/components/RunDataSearch.vue
View File

@@ -91,7 +91,7 @@ onUnmounted(() => {
</template>
<style lang="scss" module>
@import '@/styles/css-animation-helpers.scss';
@import '@/styles/variables';
.ioSearch {
margin-right: var(--spacing-s);

6
packages/editor-ui/src/components/TriggerPanel.vue
View File

@@ -117,16 +117,12 @@ import NodeExecuteButton from '@/components/NodeExecuteButton.vue';
import { workflowHelpers } from '@/mixins/workflowHelpers';
import CopyInput from '@/components/CopyInput.vue';
import NodeIcon from '@/components/NodeIcon.vue';
import { copyPaste } from '@/mixins/copyPaste';
import { useUIStore } from '@/stores/ui.store';
import { useWorkflowsStore } from '@/stores/workflows.store';
import { useNDVStore } from '@/stores/ndv.store';
import { useNodeTypesStore } from '@/stores/nodeTypes.store';
import type { N8nInfoAccordion } from 'n8n-design-system';
import { createEventBus } from 'n8n-design-system/utils';
type HelpRef = InstanceType<typeof N8nInfoAccordion>;
export default defineComponent({
name: 'TriggerPanel',
components: {
@@ -134,7 +130,7 @@ export default defineComponent({
CopyInput,
NodeIcon,
},
mixins: [workflowHelpers, copyPaste],
mixins: [workflowHelpers],
props: {
nodeName: {
type: String,

6
packages/editor-ui/src/components/VariablesRow.vue
View File

@@ -4,14 +4,14 @@ import { computed, nextTick, onMounted, ref, watch } from 'vue';
import type { EnvironmentVariable, Rule, RuleGroup } from '@/Interface';
import { useI18n } from '@/composables/useI18n';
import { useToast } from '@/composables/useToast';
import { useCopyToClipboard } from '@/composables/useCopyToClipboard';
import { useClipboard } from '@/composables/useClipboard';
import { EnterpriseEditionFeature } from '@/constants';
import { useSettingsStore } from '@/stores/settings.store';
import { useUsersStore } from '@/stores/users.store';
import { getVariablesPermissions } from '@/permissions';
const i18n = useI18n();
const copyToClipboard = useCopyToClipboard();
const clipboard = useClipboard();
const { showMessage } = useToast();
const settingsStore = useSettingsStore();
const usersStore = useUsersStore();
@@ -120,7 +120,7 @@ function onValidate(key: string, value: boolean) {
}
function onUsageClick() {
copyToClipboard(usage.value);
void clipboard.copy(usage.value);
showMessage({
title: i18n.baseText('variables.row.usage.copiedToClipboard'),
type: 'success',

13
packages/editor-ui/src/components/Workers/WorkerNetAccordion.ee.vue
View File

@@ -9,7 +9,7 @@
v-for="item in props.items"
:key="item.address"
:class="$style.accordionItem"
@click="copyToClipboard(item.address)"
@click="onCopyToClipboard(item.address)"
>
{{ item.family }}: <span :class="$style.clickable">{{ item.address }}</span>
{{ item.internal ? '(internal)' : '' }}
@@ -22,7 +22,7 @@
<script setup lang="ts">
import type { IPushDataWorkerStatusPayload } from '@/Interface';
import WorkerAccordion from './WorkerAccordion.ee.vue';
import { useCopyToClipboard } from '@/composables/useCopyToClipboard';
import { useClipboard } from '@/composables/useClipboard';
import { useI18n } from '@/composables/useI18n';
import { useToast } from '@/composables/useToast';
@@ -31,13 +31,12 @@ const props = defineProps<{
}>();
const i18n = useI18n();
const clipboard = useClipboard();
const { showMessage } = useToast();
function copyToClipboard(content: string) {
const copyToClipboardFn = useCopyToClipboard();
const { showMessage } = useToast();
function onCopyToClipboard(content: string) {
try {
copyToClipboardFn(content);
void clipboard.copy(content);
showMessage({
title: i18n.baseText('workerList.item.copyAddressToClipboard'),
type: 'success',