From bdfc38d954a3c5548fb7f9ee6f80f741eff8cb67 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=C3=81d=C3=A1m=20Kov=C3=A1cs?=
 <43071496+adam-kov@users.noreply.github.com>
Date: Wed, 11 Jan 2023 16:05:19 +0100
Subject: [PATCH] feat(frontend): Add copy button option to app text display
 component (#1090)

* feat(frontend): Add copy button to app text

* feat(frontend): Add tooltip to component configs

* fix(frontend): Remove copy button text
---
 .../components/dataDisplay/AppText.svelte     | 38 +++++++++++++++----
 .../apps/components/helpers/InputValue.svelte |  1 -
 .../apps/editor/componentsPanel/data.ts       | 12 ++++--
 .../settingsPanel/ComponentPanel.svelte       |  2 +-
 .../settingsPanel/InputsSpecsEditor.svelte    | 25 +++++-------
 frontend/src/lib/components/apps/types.ts     |  5 ++-
 frontend/src/lib/utils.ts                     |  9 ++++-
 7 files changed, 61 insertions(+), 31 deletions(-)

diff --git a/frontend/src/lib/components/apps/components/dataDisplay/AppText.svelte b/frontend/src/lib/components/apps/components/dataDisplay/AppText.svelte
index e1e1efc6c7..65b5b9096f 100644
--- a/frontend/src/lib/components/apps/components/dataDisplay/AppText.svelte
+++ b/frontend/src/lib/components/apps/components/dataDisplay/AppText.svelte
@@ -1,4 +1,8 @@
 <script lang="ts">
+	import { Clipboard } from 'lucide-svelte'
+import { copyToClipboard } from '../../../../utils'
+	import Button from '../../../common/button/Button.svelte'
+	import Popover from '../../../Popover.svelte'
 	import type { AppInput } from '../../inputType'
 	import AlignWrapper from '../helpers/AlignWrapper.svelte'
 	import InputValue from '../helpers/InputValue.svelte'
@@ -14,8 +18,8 @@
 
 	let extraStyle: string | undefined = undefined
 	let result: string | undefined = undefined
-
 	let style: 'Title' | 'Subtitle' | 'Body' | 'Caption' | 'Label' | undefined = undefined
+	let copyButton: boolean
 
 	function getComponent() {
 		switch (style) {
@@ -53,6 +57,7 @@
 
 <InputValue {id} input={configuration.extraStyle} bind:value={extraStyle} />
 <InputValue {id} input={configuration.style} bind:value={style} />
+<InputValue {id} input={configuration.copyButton} bind:value={copyButton} />
 
 <RunnableWrapper flexWrap bind:componentInput {id} bind:result>
 	<AlignWrapper {horizontalAlignment} {verticalAlignment}>
@@ -60,13 +65,30 @@
 			<div class="text-gray-400 bg-gray-100 flex justify-center items-center h-full w-full">
 				No text
 			</div>
-		{:else}<svelte:element
-				this={component}
-				class="whitespace-pre-wrap {classes}"
-				style={extraStyle}
-			>
-				{String(result)}
-			</svelte:element>
+		{:else}
+			<div class="flex flex-wrap gap-2">
+				<svelte:element
+					this={component}
+					class="whitespace-pre-wrap {classes}"
+					style={extraStyle}
+				>
+					{String(result)}
+				</svelte:element>
+				{#if copyButton && result}
+					<Popover notClickable>
+						<Button
+							size="xs"
+							btnClasses="!px-2"
+							on:click={() => copyToClipboard(result)}
+						>
+							<Clipboard size={14} strokeWidth={2} />
+						</Button>
+						<svelte:fragment slot="text">
+							Copy to clipboard
+						</svelte:fragment>
+					</Popover>
+				{/if}
+			</div>
 		{/if}
 	</AlignWrapper>
 </RunnableWrapper>
diff --git a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
index 544e5594c9..7511e7b0f4 100644
--- a/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
+++ b/frontend/src/lib/components/apps/components/helpers/InputValue.svelte
@@ -45,7 +45,6 @@
 
 	export function getValue(input: AppInput) {
 		if (input.type === 'template' && isCodeInjection(input.eval)) {
-			console.log(computeGlobalContext())
 			try {
 				return eval_like('`' + input.eval + '`', computeGlobalContext())
 			} catch (e) {
diff --git a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
index a262c68bf8..514dbc81db 100644
--- a/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
+++ b/frontend/src/lib/components/apps/editor/componentsPanel/data.ts
@@ -255,14 +255,18 @@ const display: ComponentSet = {
 					optionValuesKey: 'textStyleOptions',
 					value: 'Body'
 				},
-				extraStyle:
-				{
+				extraStyle: {
 					type: 'static',
 					fieldType: 'text',
 					value: '',
-
+					tooltip: 'CSS rules like "color: blue;"',
+				},
+				copyButton: {
+					type: 'static',
+					value: false,
+					fieldType: 'boolean',
+					onlyStatic: true,
 				},
-
 			},
 			card: false
 		},
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
index 0f6c009631..be6995ecca 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/ComponentPanel.svelte
@@ -151,7 +151,7 @@ declare const ${k} = ${JSON.stringify(v)};
 
 							<InputsSpecsEditor
 								shouldCapitalize={false}
-								bind:inputSpecs={component.componentInput.fields}
+								bind:inputSpecs={component.configuration}
 								userInputEnabled={component.type !== 'buttoncomponent'}
 								{rowColumns}
 							/>
diff --git a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
index 0b43bbc5ef..c55819a56f 100644
--- a/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
+++ b/frontend/src/lib/components/apps/editor/settingsPanel/InputsSpecsEditor.svelte
@@ -1,25 +1,15 @@
 <script lang="ts">
 	import { Badge, ToggleButton, ToggleButtonGroup } from '$lib/components/common'
-	import { capitalize } from '$lib/utils'
+	import { addWhitespaceBeforeCapitals, capitalize } from '$lib/utils'
 	import { faArrowRight, faPen, faTableCells, faUser } from '@fortawesome/free-solid-svg-icons'
 	import { fieldTypeToTsType } from '../../utils'
 	import InputsSpecEditor from './InputsSpecEditor.svelte'
-	import type {
-		ConnectedAppInput,
-		RowAppInput,
-		StaticAppInput,
-		UserAppInput
-	} from '../../inputType'
 	import { getContext } from 'svelte'
-	import type { AppEditorContext } from '../../types'
+	import type { AppEditorContext, BaseAppComponent } from '../../types'
 	import Tooltip from '$lib/components/Tooltip.svelte'
-	import Popup from '../../../common/popup/Popup.svelte'
-	import Popover from '../../../Popover.svelte'
+	import Popover from '$lib/components/Popover.svelte'
 
-	export let inputSpecs: Record<
-		string,
-		(StaticAppInput | ConnectedAppInput | UserAppInput | RowAppInput) & { onlyStatic?: boolean }
-	>
+	export let inputSpecs: BaseAppComponent['configuration']
 	export let userInputEnabled: boolean = true
 	export let staticOnly: boolean = false
 	export let shouldCapitalize: boolean = true
@@ -35,7 +25,12 @@
 			<div class="flex flex-col gap-1">
 				<div class="flex justify-between items-end gap-1">
 					<span class="text-sm font-semibold truncate">
-						{shouldCapitalize ? capitalize(inputSpecKey) : inputSpecKey}
+						{shouldCapitalize ? capitalize(addWhitespaceBeforeCapitals(inputSpecKey)) : inputSpecKey}
+						{#if input.tooltip}
+							<Tooltip>
+								{input.tooltip}
+							</Tooltip>
+						{/if}
 					</span>
 
 					<div class="flex gap-x-2 gap-y-1 flex-wrap justify-end items-center">
diff --git a/frontend/src/lib/components/apps/types.ts b/frontend/src/lib/components/apps/types.ts
index 0e17e8f553..e7ddb85af3 100644
--- a/frontend/src/lib/components/apps/types.ts
+++ b/frontend/src/lib/components/apps/types.ts
@@ -57,7 +57,10 @@ export type Aligned = {
 export interface BaseAppComponent extends Partial<Aligned> {
 	id: ComponentID
 	componentInput: AppInput | undefined
-	configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput) & { onlyStatic?: boolean }>
+	configuration: Record<string, (StaticAppInput | ConnectedAppInput | UserAppInput) & {
+		onlyStatic?: boolean,
+		tooltip?: string
+	}>
 	card: boolean | undefined
 	/**
 	 * If `true` then the wrapper will allow items to flow outside of it's borders.
diff --git a/frontend/src/lib/utils.ts b/frontend/src/lib/utils.ts
index 29b7707b54..67e885f29f 100644
--- a/frontend/src/lib/utils.ts
+++ b/frontend/src/lib/utils.ts
@@ -620,7 +620,9 @@ export function scriptLangToEditorLang(
 	}
 }
 
-export async function copyToClipboard(value: string, sendToast = true): Promise<boolean> {
+export async function copyToClipboard(value?: string, sendToast = true): Promise<boolean> {
+	if(!value) { return false }
+
 	let success = false
 	if (navigator?.clipboard) {
 		success = await navigator.clipboard
@@ -647,6 +649,11 @@ export function capitalize(word: string): string {
 	return word ? word.charAt(0).toUpperCase() + word.slice(1) : ''
 }
 
+export function addWhitespaceBeforeCapitals(word?: string): string {
+	if (!word) { return '' }
+	return word.replace(/([A-Z])/g, ' $1').trim()
+}
+
 export function isCloudHosted(): boolean {
 	return get(page).url.hostname == 'app.windmill.dev'
 }