From 528dd12cda860a6ce2bd3404fd55a5e26aaf5c4c Mon Sep 17 00:00:00 2001
From: lassopicasso <lars.walderhaug@digdir.no>
Date: Fri, 13 Dec 2024 11:08:50 +0100
Subject: [PATCH] toggleable column title

---
 frontend/language/src/nb.json                 |  2 +
 .../EditColumnElement/EditColumnElement.tsx   | 46 +++++++++++++------
 2 files changed, 34 insertions(+), 14 deletions(-)

diff --git a/frontend/language/src/nb.json b/frontend/language/src/nb.json
index 9c19cc6a6fa..947c195fa60 100644
--- a/frontend/language/src/nb.json
+++ b/frontend/language/src/nb.json
@@ -1777,6 +1777,8 @@
   "ux_editor.properties_panel.subform_table_columns.choose_component": "Velg komponenten fra underskjemaet som skal vises her",
   "ux_editor.properties_panel.subform_table_columns.choose_component_description": "Listen viser bare de komponentene der det er lagt til ledetekster",
   "ux_editor.properties_panel.subform_table_columns.column_header": "Kolonne {{columnNumber}}",
+  "ux_editor.properties_panel.subform_table_columns.column_title_edit": "Kolonnetittel",
+  "ux_editor.properties_panel.subform_table_columns.column_title_unedit": "Kolonnetittel:",
   "ux_editor.properties_panel.subform_table_columns.delete_column": "Slett kolonne {{columnNumber}}",
   "ux_editor.properties_panel.subform_table_columns.header_content_label": "Header Content",
   "ux_editor.properties_panel.subform_table_columns.heading": "Valg for tabell",
diff --git a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx
index 374c8d5d8df..e2c1d01ceb8 100644
--- a/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx
+++ b/frontend/packages/ux-editor/src/components/Properties/EditSubformTableColumns/ColumnElement/EditColumnElement/EditColumnElement.tsx
@@ -1,7 +1,7 @@
 import React, { useState, type ReactElement } from 'react';
 import classes from './EditColumnElement.module.css';
 import { type TableColumn } from '../../types/TableColumn';
-import { useTranslation } from 'react-i18next';
+import { Trans, useTranslation } from 'react-i18next';
 import {
   StudioActionCloseButton,
   StudioCard,
@@ -9,15 +9,15 @@ import {
   StudioDeleteButton,
   StudioDivider,
   StudioParagraph,
-  StudioTextfield,
+  StudioToggleableTextfield,
 } from '@studio/components';
 import { useStudioEnvironmentParams } from 'app-shared/hooks/useStudioEnvironmentParams';
 import { useFormLayoutsQuery } from '../../../../../hooks/queries/useFormLayoutsQuery';
 import { getAllLayoutComponents } from '../../../../../utils/formLayoutUtils';
 import type { FormItem } from '../../../../../types/FormItem';
-import { PadlockLockedFillIcon } from '@studio/icons';
 import { useTextResourcesQuery } from 'app-shared/hooks/queries';
 import { textResourceByLanguageAndIdSelector } from '../../../../../selectors/textResourceSelectors';
+import { KeyVerticalIcon } from '@studio/icons';
 
 export type ColumnElementProps = {
   sourceColumn: TableColumn;
@@ -75,17 +75,7 @@ export const EditColumnElement = ({
           components={componentsWithLabelAndDataModel}
           onSelectComponent={selectComponent}
         />
-        <StudioTextfield
-          label={
-            <>
-              <PadlockLockedFillIcon />
-              {t('ux_editor.modal_properties_textResourceBindings_title')}
-            </>
-          }
-          disabled={true}
-          size='sm'
-          value={textKeyValue}
-        />
+        {tableColumn.headerContent && <EditColumnElementTitle textKeyValue={textKeyValue} />}
         <div className={classes.buttons}>
           <StudioActionCloseButton
             variant='secondary'
@@ -147,3 +137,31 @@ export const EditColumnElementComponentSelect = ({
     </StudioCombobox>
   );
 };
+
+type EditColumnElementTitleProps = {
+  textKeyValue: string;
+};
+
+const EditColumnElementTitle = ({ textKeyValue }: EditColumnElementTitleProps) => {
+  const { t } = useTranslation();
+  return (
+    <StudioToggleableTextfield
+      inputProps={{
+        icon: <KeyVerticalIcon />,
+        label: t('ux_editor.properties_panel.subform_table_columns.column_title_edit'),
+        value: textKeyValue,
+        size: 'sm',
+      }}
+      viewProps={{
+        children: (
+          <Trans
+            i18nKey={'ux_editor.properties_panel.subform_table_columns.column_title_unedit'}
+            values={{ item: textKeyValue }}
+          />
+        ),
+        title: textKeyValue,
+        variant: 'tertiary',
+      }}
+    />
+  );
+};