Merge pull request #1079 from writer/AB-196

feat(ui): implement a new WdsCopyClipboardButton component - AB-196

Author: VladKrasny

package-lock.json

@@ -30,6 +30,7 @@
 		"@tiptap/extension-text": "^3.0.7",
 		"@tiptap/extensions": "^3.0.7",
 		"@tiptap/vue-3": "^3.0.7",
+		"@vueuse/core": "^13.6.0",
 		"ajv": "^8.17.1",
 		"ajv-errors": "^3.0.0",
 		"arquero": "^5.2.0",

src/ui/package.json

@@ -96,7 +96,7 @@ import BuilderSettingsMain from "./BuilderSettingsMain.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsIcon from "@/wds/WdsIcon.vue";
 import { SelectionStatus } from "../builderManager";
-import { useButtonClipboard } from "../useButtonClipboard";
+import { useClipboard } from "@vueuse/core";
 import SharedMoreDropdown from "@/components/shared/SharedMoreDropdown.vue";
 import { useWriterTracking } from "@/composables/useWriterTracking";
 import BuilderSettingsActions from "./BuilderSettingsActions.vue";
@@ -117,8 +117,11 @@ const { component, definition: componentDefinition } = useComponentInformation(
 );
 const resultId = useBlueprintComponentResultId(component, componentDefinition);
 
-const { copyText: copyComponentId, isCopied: isComponentIdCopied } =
-	useButtonClipboard(resultId);
+const { copy, copied: isComponentIdCopied } = useClipboard();
+
+function copyComponentId() {
+	copy(resultId.value);
+}
 
 const tracking = useWriterTracking(wf);
 

src/ui/src/builder/settings/BuilderSettings.vue

@@ -46,7 +46,7 @@
 					<WdsButton
 						variant="tertiary"
 						size="small"
-						@click="copyCreate"
+						@click="copyCreate()"
 					>
 						<WdsIcon
 							:name="isCreateCopied ? 'check' : 'clipboard'"
@@ -83,7 +83,7 @@
 						variant="tertiary"
 						size="small"
 						:disabled="isPollDisabled"
-						@click="copyPoll"
+						@click="copyPoll()"
 					>
 						<WdsIcon :name="isPollCopied ? 'check' : 'clipboard'" />
 						Copy poll async
@@ -103,7 +103,7 @@ import WdsTabs, { WdsTabOptions } from "@/wds/WdsTabs.vue";
 import WdsTextareaInput from "@/wds/WdsTextareaInput.vue";
 import WdsFieldWrapper from "@/wds/WdsFieldWrapper.vue";
 import BuilderFieldsCode from "./BuilderFieldsCode.vue";
-import { useButtonClipboard } from "../useButtonClipboard";
+import { useClipboard } from "@vueuse/core";
 import WdsTitle2 from "@/wds/WdsTitle2.vue";
 import { FieldType } from "@/writerTypes";
 
@@ -153,8 +153,9 @@ const parsedOutput = computed(() => {
 	}
 });
 
-const { copyText: copyCreate, isCopied: isCreateCopied } =
-	useButtonClipboard(curlCreate);
+const { copy: copyCreate, copied: isCreateCopied } = useClipboard({
+	source: curlCreate,
+});
 
 const isPollDisabled = computed(() => {
 	return !parsedOutput.value?.poll_url?.trim();
@@ -168,8 +169,9 @@ const curlPoll = computed(() => {
 	);
 });
 
-const { copyText: copyPoll, isCopied: isPollCopied } =
-	useButtonClipboard(curlPoll);
+const { copy: copyPoll, copied: isPollCopied } = useClipboard({
+	source: curlPoll,
+});
 </script>
 
 <style scoped>

src/ui/src/builder/settings/BuilderSettingsArtifactAPITriggerDetails.vue

@@ -73,7 +73,7 @@ import BuilderSettingsBinding from "./BuilderSettingsBinding.vue";
 import BuilderSettingsVisibility from "./BuilderSettingsVisibility.vue";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsIcon from "@/wds/WdsIcon.vue";
-import { useButtonClipboard } from "../useButtonClipboard";
+import { useClipboard } from "@vueuse/core";
 import { artifactRegistry } from "./artifacts";
 import { defineAsyncComponentWithLoader } from "@/utils/defineAsyncComponentWithLoader";
 
@@ -108,8 +108,11 @@ watch(component, (newComponent) => {
 	if (!newComponent) ssbm.setSelection(null);
 });
 
-const { copyText: copyComponentId, isCopied: isComponentIdCopied } =
-	useButtonClipboard(computed(() => ssbm.firstSelectedId.value));
+const { copy, copied: isComponentIdCopied } = useClipboard();
+
+function copyComponentId() {
+	copy(ssbm.firstSelectedId.value);
+}
 
 const isBindable = computed(() =>
 	Object.values(componentDefinition.value?.events ?? {}).some(

src/ui/src/builder/settings/BuilderSettingsMain.vue

@@ -1,8 +1,5 @@
 <template>
-	<div
-		v-if="ssbm.isSingleSelectionActive && fields"
-		class="BuilderSettingsProperties"
-	>
+	<div v-if="ssbm.isSingleSelectionActive" class="BuilderSettingsProperties">
 		<WdsTabs
 			v-if="fieldCategories.length > 1"
 			v-model="selectedCategoryTab"
@@ -344,24 +341,42 @@ const fieldCategories = computed(() => {
 	].filter((c) => fieldsByCategory.value[c]?.length);
 });
 
-const fieldsByCategory = computed(() => {
-	const entries = Object.entries(fields.value);
-	const result = {
-		[FieldCategory.General]: entries.filter(
-			([_, fieldValue]) =>
-				!fieldValue.category ||
-				fieldValue.category == FieldCategory.General,
-		),
-		[FieldCategory.Style]: entries.filter(
-			([_, fieldValue]) => fieldValue.category == FieldCategory.Style,
-		),
-		[FieldCategory.Tools]: entries.filter(
-			([_, fieldValue]) => fieldValue.category == FieldCategory.Tools,
-		),
+type FieldEntry = [string, WriterComponentDefinitionField];
+
+const fieldsByCategory = computed<Record<FieldCategory, FieldEntry[]>>(() => {
+	const result: Record<FieldCategory, FieldEntry[]> = {
+		[FieldCategory.General]: [],
+		[FieldCategory.Style]: [],
+		[FieldCategory.Tools]: [],
+	};
+
+	Object.entries(fields.value).forEach(([k, v]) => {
+		const category = v.category || FieldCategory.General;
+
+		if (result[category]) {
+			result[category].push([k, v]);
+		}
+	});
+
+	return {
+		[FieldCategory.General]: sortByOrder(result[FieldCategory.General]),
+		[FieldCategory.Style]: sortByOrder(result[FieldCategory.Style]),
+		[FieldCategory.Tools]: sortByOrder(result[FieldCategory.Tools]),
 	};
-	return result;
 });
 
+function sortByOrder(fieldEntries: FieldEntry[]): FieldEntry[] {
+	return fieldEntries
+		.map((item, itemIndex) => [item, itemIndex] as const)
+		.sort(([a, aIndex], [b, bIndex]) => {
+			const aOrder = a[1].order ?? 0;
+			const bOrder = b[1].order ?? 0;
+
+			return bOrder - aOrder || aIndex - bIndex;
+		})
+		.map(([item]) => item);
+}
+
 function handleExpand(fieldKey: string) {
 	expandedFields.value.add(fieldKey);
 }

src/ui/src/builder/settings/BuilderSettingsProperties.vue

@@ -3,7 +3,7 @@ import { computed, inject } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { useComponentInformation } from "@/composables/useComponentInformation";
 import { useBlueprintComponentResultId } from "@/composables/useBlueprintComponentResultId";
-import { useButtonClipboard } from "@/builder/useButtonClipboard";
+import { useClipboard } from "@vueuse/core";
 import WdsButton from "@/wds/WdsButton.vue";
 import WdsIcon from "@/wds/WdsIcon.vue";
 import SharedMoreDropdown from "@/components/shared/SharedMoreDropdown.vue";
@@ -33,8 +33,11 @@ const { component, definition: def } = useComponentInformation(wf, componentId);
 const resultId = useBlueprintComponentResultId(component, def);
 const tracking = useWriterTracking(wf);
 
-const { copyText: copyComponentId, isCopied: isComponentIdCopied } =
-	useButtonClipboard(resultId);
+const { copy, copied: isComponentIdCopied } = useClipboard();
+
+function copyComponentId() {
+	copy(resultId.value);
+}
 
 const settingsActions = useBuilderSettingsActions(
 	wf,

src/ui/src/builder/useButtonClipboard.ts

@@ -4,7 +4,7 @@ import CoreAnnotatedText from "./CoreAnnotatedText.vue";
 import VueDOMPurifyHTML from "vue-dompurify-html";
 import injectionKeys from "@/injectionKeys";
 import { buildMockCore, mockProvides } from "@/tests/mocks";
-import { flushPromises, shallowMount } from "@vue/test-utils";
+import { flushPromises, mount } from "@vue/test-utils";
 import { ref } from "vue";
 import { WdsColor } from "@/wds/tokens";
 
@@ -23,7 +23,7 @@ describe("CoreAnnotatedText", async () => {
 	it("should render in non-markdown mode", async () => {
 		const { core } = buildMockCore();
 
-		const wrapper = shallowMount(CoreAnnotatedText, {
+		const wrapper = mount(CoreAnnotatedText, {
 			global: {
 				plugins: [VueDOMPurifyHTML],
 				provide: {
@@ -37,7 +37,6 @@ describe("CoreAnnotatedText", async () => {
 						rotateHue: ref(true),
 						referenceColor: ref(WdsColor.Blue5),
 						copyButtons: ref(true),
-						quickCopy: ref(false),
 					},
 				},
 			},
@@ -64,7 +63,7 @@ describe("CoreAnnotatedText", async () => {
 	it("should render in markdown mode", async () => {
 		const { core } = buildMockCore();
 
-		const wrapper = shallowMount(CoreAnnotatedText, {
+		const wrapper = mount(CoreAnnotatedText, {
 			global: {
 				plugins: [VueDOMPurifyHTML],
 				provide: {
@@ -78,7 +77,6 @@ describe("CoreAnnotatedText", async () => {
 						rotateHue: ref(true),
 						referenceColor: ref(WdsColor.Blue5),
 						copyButtons: ref(true),
-						quickCopy: ref(false),
 					},
 				},
 			},

src/ui/src/components/blueprints/abstract/BlueprintsNodeActions.vue

@@ -1,5 +1,5 @@
 <template>
-	<div v-if="shouldDisplay" class="CoreAnnotatedText">
+	<SharedControlBar v-if="shouldDisplay" class="CoreAnnotatedText">
 		<BaseMarkdownRaw
 			v-if="useMarkdown"
 			:raw-markdown="markdown"
@@ -26,12 +26,13 @@
 				</span>
 			</span>
 		</template>
-		<SharedControlBar
-			v-if="fields.copyButtons.value"
-			:copy-raw-content="copyRawContent"
-			:copy-structured-content="copyStructuredContent"
-		/>
-	</div>
+		<template #actions>
+			<SharedCopyClipboardButton
+				v-if="fields.copyButtons.value"
+				:options="copyButtonOptions"
+			/>
+		</template>
+	</SharedControlBar>
 </template>
 
 <script lang="ts">
@@ -41,6 +42,7 @@ import {
 	buttonTextColor,
 	cssClasses,
 	primaryTextColor,
+	createEnableCopyButtonField,
 } from "@/renderer/sharedStyleFields";
 import SharedControlBar from "@/components/shared/SharedControlBar.vue";
 import { WdsColor } from "@/wds/tokens";
@@ -83,11 +85,8 @@ export default {
 				desc: "If active, the output will be sanitized; unsafe elements will be removed.",
 				default: "no",
 			}),
-			copyButtons: createBooleanField({
-				name: "Enable copy buttons",
-				desc: "If active, adds a control bar with both copy text and JSON buttons.",
+			copyButtons: createEnableCopyButtonField({
 				default: "no",
-				category: FieldCategory.Style,
 			}),
 			buttonColor,
 			buttonTextColor,
@@ -105,6 +104,11 @@ import { computed, inject, readonly, ref, watch } from "vue";
 import chroma, { Color } from "chroma-js";
 import BaseEmptiness from "../base/BaseEmptiness.vue";
 import BaseMarkdownRaw from "../base/BaseMarkdownRaw.vue";
+import { defineAsyncComponentWithLoader } from "@/utils/defineAsyncComponentWithLoader";
+
+const SharedCopyClipboardButton = defineAsyncComponentWithLoader({
+	loader: () => import("@/components/shared/SharedCopyClipboardButton.vue"),
+});
 
 type AnnotatedTextElementArray = [content: string, tag: string, color?: string];
 type AnnotatedTextElement = string | AnnotatedTextElementArray;
@@ -261,6 +265,11 @@ const copyStructuredContent = computed(() => {
 		return text.value.join("");
 	}
 });
+
+const copyButtonOptions = computed(() => [
+	{ label: "Copy text", value: copyRawContent.value },
+	{ label: "Copy JSON", value: copyStructuredContent.value },
+]);
 </script>
 
 <style scoped>