Add copyToClipboard button to Text View and Documentation View (#885)

* Add copyToClipboard button to Text View and Documentation View

* update copy to clipboard button color and remove from documentation view

* apply formatting changes

---------

Co-authored-by: Felix Neubauer <[email protected]>
Co-authored-by: Logende <[email protected]>

Author: M-Jafarkhani

meta_configurator/src/components/panels/ai-prompts/AiPromptsPanel.vue

@@ -15,7 +15,10 @@ const props = defineProps<{
 
 <template>
   <div class="panel-container">
-    <PanelSettings panel-name="AI Prompts View" :panel-settings-path="['aiIntegration']">
+    <PanelSettings
+      panel-name="AI Prompts View"
+      :panel-settings-path="['aiIntegration']"
+      :sessionMode="props.sessionMode">
       <p>
         This panel allows you to manage AI prompts for the current document. You can define prompts
         for schema generation, data manipulation, and other AI-related tasks.

meta_configurator/src/components/panels/code-editor/CodeEditorPanel.vue

@@ -1,6 +1,9 @@
 <template>
   <div class="panel-container">
-    <PanelSettings panel-name="Text View" :panel-settings-path="['codeEditor']">
+    <PanelSettings
+      panel-name="Text View"
+      :panel-settings-path="['codeEditor']"
+      :sessionMode="props.sessionMode">
       <p>
         This panel allows you to view and edit the raw JSON/YAML/XML data of the current document.
         It is useful for advanced users who want to directly manipulate the data structure.

meta_configurator/src/components/panels/documentation/DocumentationPanel.vue

@@ -95,7 +95,10 @@ onUnmounted(() => docsRef.value?.removeEventListener('click', onAnchorClick));
 
 <template>
   <div class="panel-container">
-    <PanelSettings panel-name="Documentation View" :panel-settings-path="['documentation']">
+    <PanelSettings
+      panel-name="Documentation View"
+      :panel-settings-path="['documentation']"
+      :sessionMode="props.sessionMode">
       <p>
         This panel provides documentation for the current schema. It is generated from the schema
         itself and includes details about properties, types, and descriptions.

meta_configurator/src/components/panels/gui-editor/GuiEditorPanel.vue

@@ -17,7 +17,10 @@ const props = defineProps<{
 <template>
   <div class="panel-container">
     <div class="gui-panel">
-      <PanelSettings panel-name="GUI View" :panel-settings-path="['guiEditor']">
+      <PanelSettings
+        panel-name="GUI View"
+        :panel-settings-path="['guiEditor']"
+        :sessionMode="props.sessionMode">
         <p>
           This panel allows you to view and edit the current document in a GUI format. You can
           navigate through the document tree, view properties, and modify data directly.

meta_configurator/src/components/panels/list-analysis/ListAnalysisPanel.vue

@@ -83,7 +83,10 @@ function exportTableAsCsv() {
 
 <template>
   <div class="panel-container">
-    <PanelSettings panel-name="Table View" :panel-settings-path="['listAnalysis']">
+    <PanelSettings
+      panel-name="Table View"
+      :panel-settings-path="['listAnalysis']"
+      :sessionMode="props.sessionMode">
       <p>
         This panel allows you to analyze object arrays in the current document. Select an object
         array to view its contents in a table format.

meta_configurator/src/components/panels/schema-diagram/SchemaDiagramPanel.vue

@@ -9,7 +9,10 @@ const props = defineProps<{
 </script>
 
 <template>
-  <PanelSettings panel-name="Diagram View" :panel-settings-path="['schemaDiagram']">
+  <PanelSettings
+    panel-name="Diagram View"
+    :panel-settings-path="['schemaDiagram']"
+    :sessionMode="props.sessionMode">
     <p>
       This panel provides a visual representation of the current schema as a diagram. You can
       explore the structure of the schema, view relationships between different elements, and

meta_configurator/src/components/panels/shared-components/PanelSettings.vue

@@ -7,6 +7,7 @@ import {computed} from 'vue';
 import type {Path} from '@/utility/path';
 import {SessionMode} from '@/store/sessionMode';
 import Panel from 'primevue/panel';
+import Button from 'primevue/button';
 import PropertiesPanel from '@/components/panels/gui-editor/PropertiesPanel.vue';
 import {JsonSchemaWrapper} from '@/schema/jsonSchemaWrapper';
 import {getDataForMode, getSchemaForMode} from '@/data/useDataLink';
@@ -15,6 +16,7 @@ const props = defineProps<{
   panelName: string;
   settingsHeader?: string;
   panelSettingsPath: Path;
+  sessionMode: SessionMode;
 }>();
 
 const schema = getSchemaForMode(SessionMode.Settings);
@@ -36,6 +38,21 @@ function removeProperty(path: Path) {
   data.removeDataAt(path);
 }
 
+const copyToClipboard = async () => {
+  if (props.sessionMode === SessionMode.Settings) return;
+
+  try {
+    const text = getDataForMode(props.sessionMode).unparsedData.value;
+    await navigator.clipboard.writeText(text);
+  } catch (err) {
+    console.error('Failed to copy: ', err);
+  }
+};
+
+const containsText = computed(() => {
+  return ['Text View'].includes(props.panelName);
+});
+
 const settingsName = computed(() => {
   if (props.settingsHeader && props.settingsHeader !== '') {
     return props.settingsHeader;
@@ -52,8 +69,10 @@ const settingsName = computed(() => {
 
 <template>
   <Panel :header="panelName" toggleable :collapsed="true">
+    <template v-if="containsText" #icons>
+      <Button icon="pi pi-clone" severity="secondary" @click="copyToClipboard" rounded text />
+    </template>
     <slot></slot>
-
     <div class="properties-panel-container">
       <PropertiesPanel
         v-if="currentSchema.jsonSchema"

meta_configurator/src/components/panels/shared-components/__tests__/panelSettings.test.ts

@@ -0,0 +1,72 @@
+import {describe, it, expect, vi, beforeEach} from 'vitest';
+import {mount, flushPromises} from '@vue/test-utils';
+import {defineComponent} from 'vue';
+import PanelSettings from '../PanelSettings.vue';
+import {SessionMode} from '@/store/sessionMode';
+
+vi.mock('@/data/useDataLink', async () => {
+  const vue = await import('vue');
+  const stubData = {
+    setDataAt: vi.fn(),
+    removeDataAt: vi.fn(),
+    dataAt: vi.fn(),
+    unparsedData: vue.ref('clipboard text'),
+  };
+  const stubSchema = {
+    effectiveSchemaAtPath: vi.fn(() => ({
+      schema: {
+        jsonSchema: {},
+      },
+    })),
+  };
+
+  return {
+    getDataForMode: vi.fn(() => stubData),
+    getSchemaForMode: vi.fn(() => stubSchema),
+  };
+});
+
+const PanelStub = defineComponent({
+  template: '<div><slot name="icons" /><slot /></div>',
+});
+
+const ButtonStub = defineComponent({
+  template: '<button type="button" @click="$emit(\'click\')"></button>',
+});
+
+const PropertiesPanelStub = defineComponent({
+  template: '<div />',
+});
+
+describe('PanelSettings', () => {
+  beforeEach(() => {
+    Object.assign(navigator, {
+      clipboard: {
+        writeText: vi.fn().mockResolvedValue(undefined),
+      },
+    });
+  });
+
+  it('copies panel content to the clipboard when the copy button is clicked', async () => {
+    const wrapper = mount(PanelSettings, {
+      props: {
+        panelName: 'Text View',
+        panelSettingsPath: [],
+        sessionMode: SessionMode.DataEditor,
+      },
+      global: {
+        stubs: {
+          Panel: PanelStub,
+          Button: ButtonStub,
+          PropertiesPanel: PropertiesPanelStub,
+        },
+      },
+    });
+
+    await wrapper.get('button').trigger('click');
+    await flushPromises();
+
+    const clipboard = navigator.clipboard as Clipboard;
+    expect(clipboard.writeText).toHaveBeenCalledWith('clipboard text');
+  });
+});

meta_configurator/src/components/toolbar/dialogs/data-export/DataExportDialog.vue

@@ -119,7 +119,8 @@ defineExpose({show: openDialog, close: hideDialog, activateSchemaMode, activateD
         <PanelSettings
           panel-name="API Key and AI Settings"
           settings-header="AI Settings"
-          :panel-settings-path="['aiIntegration']">
+          :panel-settings-path="['aiIntegration']"
+          :sessionMode="SessionMode.DataEditor">
           <ApiKey />
         </PanelSettings>
         <ApiKeyWarning />

meta_configurator/src/components/toolbar/dialogs/data-mapping/DataMappingDialog.vue

@@ -209,7 +209,8 @@ defineExpose({show: openDialog, close: hideDialog});
       <PanelSettings
         panel-name="API Key and AI Settings"
         settings-header="AI Settings"
-        :panel-settings-path="['aiIntegration']">
+        :panel-settings-path="['aiIntegration']"
+        :sessionMode="SessionMode.DataEditor">
         <ApiKey />
       </PanelSettings>
       <ApiKeyWarning />