implement button to hide view, within each view settings toolbar (#903)

* implement button to hide view, within each view settings toolbar

* adjust test to new code

* apply formatting changes

---------

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

Author: Logende

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

@@ -16,7 +16,8 @@ const props = defineProps<{
 <template>
   <div class="panel-container">
     <PanelSettings
-      panel-name="AI Prompts View"
+      panel-display-name="AI Prompts View"
+      panel-type="aiPrompts"
       :panel-settings-path="['aiIntegration']"
       :sessionMode="props.sessionMode">
       <p>

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

@@ -1,8 +1,9 @@
 <template>
   <div class="panel-container">
     <PanelSettings
-      panel-name="Text View"
-      :panel-settings-path="['codeEditor']"
+      panel-display-name="Text View"
+      panel-type="textEditor"
+      :panel-settings-path="['textEditor']"
       :sessionMode="props.sessionMode">
       <p>
         This panel allows you to view and edit the raw JSON/YAML/XML data of the current document.

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

@@ -96,7 +96,8 @@ onUnmounted(() => docsRef.value?.removeEventListener('click', onAnchorClick));
 <template>
   <div class="panel-container">
     <PanelSettings
-      panel-name="Documentation View"
+      panel-display-name="Documentation View"
+      panel-type="documentation"
       :panel-settings-path="['documentation']"
       :sessionMode="props.sessionMode">
       <p>

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

@@ -28,7 +28,8 @@ const isSchemaBundlingSuggested = computed(() => {
   <div class="panel-container">
     <div class="gui-panel">
       <PanelSettings
-        panel-name="GUI View"
+        panel-display-name="GUI View"
+        panel-type="guiEditor"
         :panel-settings-path="['guiEditor']"
         :sessionMode="props.sessionMode">
         <p>

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

@@ -84,8 +84,9 @@ function exportTableAsCsv() {
 <template>
   <div class="panel-container">
     <PanelSettings
-      panel-name="Table View"
-      :panel-settings-path="['listAnalysis']"
+      panel-display-name="Table View"
+      panel-type="tableView"
+      :panel-settings-path="['tableView']"
       :sessionMode="props.sessionMode">
       <p>
         This panel allows you to analyze object arrays in the current document. Select an object

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

@@ -10,7 +10,8 @@ const props = defineProps<{
 
 <template>
   <PanelSettings
-    panel-name="Diagram View"
+    panel-display-name="Diagram View"
+    panel-type="schemaDiagram"
     :panel-settings-path="['schemaDiagram']"
     :sessionMode="props.sessionMode">
     <p>

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

@@ -11,9 +11,12 @@ 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';
+import {useSettings} from '@/settings/useSettings.ts';
+import {FontAwesomeIcon} from '@fortawesome/vue-fontawesome';
 
 const props = defineProps<{
-  panelName: string;
+  panelDisplayName: string;
+  panelType: string;
   settingsHeader?: string;
   panelSettingsPath: Path;
   sessionMode: SessionMode;
@@ -50,27 +53,46 @@ const copyToClipboard = async () => {
 };
 
 const containsText = computed(() => {
-  return ['Text View'].includes(props.panelName);
+  return props.panelType == 'textEditor';
 });
 
 const settingsName = computed(() => {
   if (props.settingsHeader && props.settingsHeader !== '') {
     return props.settingsHeader;
   }
-  if (!props.panelName || props.panelName === '') {
+  if (!props.panelDisplayName || props.panelDisplayName === '') {
     return 'Settings';
   }
-  if (props.panelName.toLowerCase().includes('settings')) {
-    return props.panelName;
+  if (props.panelDisplayName.toLowerCase().includes('settings')) {
+    return props.panelDisplayName;
   }
-  return props.panelName + ' Settings';
+  return props.panelDisplayName + ' Settings';
 });
+
+function hideView() {
+  const mode = props.sessionMode;
+  const settings = useSettings().value;
+  settings.panels[mode] = settings.panels[mode].filter(
+    panel => panel.panelType !== props.panelType
+  );
+}
 </script>
 
 <template>
-  <Panel :header="panelName" toggleable :collapsed="true" class="panel-settings-scroll">
-    <template v-if="containsText" #icons>
-      <Button icon="pi pi-clone" severity="secondary" @click="copyToClipboard" rounded text />
+  <Panel :header="panelDisplayName" toggleable :collapsed="true" class="panel-settings-scroll">
+    <template #icons>
+      <Button
+        v-if="containsText"
+        text
+        severity="secondary"
+        v-tooltip.left="'Copy text to clipboard'"
+        @click="copyToClipboard()">
+        <FontAwesomeIcon icon="fa-regular fa-clone" />
+      </Button>
+
+      <Button text severity="secondary" v-tooltip.left="'Hide view'" @click="hideView()">
+        <FontAwesomeIcon icon="fa-solid fa-eye-slash" />
+      </Button>
     </template>
     <slot></slot>
     <div class="properties-panel-container">

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

@@ -50,7 +50,8 @@ describe('PanelSettings', () => {
   it('copies panel content to the clipboard when the copy button is clicked', async () => {
     const wrapper = mount(PanelSettings, {
       props: {
-        panelName: 'Text View',
+        panelDisplayName: 'Text View',
+        panelType: 'textEditor',
         panelSettingsPath: [],
         sessionMode: SessionMode.DataEditor,
       },

meta_configurator/src/components/panels/shared-components/aceUtils.ts

@@ -33,13 +33,13 @@ export function setupAceProperties(editor: Editor, settings: SettingsInterfaceRo
     editor.setTheme('ace/theme/clouds');
   }
   editor.setShowPrintMargin(false);
-  editor.getSession().setTabSize(settings.codeEditor.tabSize);
+  editor.getSession().setTabSize(settings.textEditor.tabSize);
 
   // it's not clear why timeout is needed here, but without it the
   // ace editor starts flashing and becomes unusable
   window.setTimeout(() => {
     watchImmediate(
-      () => settings.codeEditor.fontSize,
+      () => settings.textEditor.fontSize,
       fontSize => {
         if (editor && fontSize && fontSize > 6 && fontSize < 65) {
           editor.setFontSize(fontSize.toString() + 'px');

meta_configurator/src/components/toolbar/TopToolbar.vue

@@ -169,7 +169,7 @@ useMagicKeys({
       </div>
 
       <!-- RIGHT side: format selector -->
-      <div class="format-switch-container" v-if="settings.codeEditor.showFormatSelector">
+      <div class="format-switch-container" v-if="settings.textEditor.showFormatSelector">
         <Select
           :options="dataFormatOptions"
           v-model="settings.dataFormat"