feat: Persist advanced settings toggle state in FE

src/modules/modals/EditColumn.vue

@@ -13,8 +13,9 @@
 					<MainForm v-model:description="editColumn.description"
 						v-model:mandatory="editColumn.mandatory"
 						v-model:technical-name="editColumn.technicalName"
+						:original-technical-name="column.technicalName || ''"
 						v-model:title="editColumn.title"
 						v-model:custom-settings="editColumn.customSettings"
 						:edit-column="true"
 						:title-missing-error="editErrorTitle"
 						:technical-name-invalid-error="technicalNameInvalidError"

src/modules/modals/ViewSettings.vue

@@ -64,13 +64,18 @@
 
 		<!--advanced settings-->
 		<NcAppSettingsSection v-if="columns != null" id="advanced" :name="t('tables', 'Advanced settings')">
-			<div v-if="!showAdvanced" class="row">
+			<div class="row">
 				<div class="col-4">
-					<NcButton type="tertiary" :aria-label="t('tables', 'Show advanced settings')" @click="showAdvanced = true">
+					<NcButton
+						type="tertiary"
+						:aria-expanded="showAdvanced"
+						:aria-label="advancedToggleLabel"
+						@click="toggleAdvanced">
 						<template #icon>
-							<ChevronDown :size="20" />
+							<ChevronUp v-if="showAdvanced" :size="20" />
+							<ChevronDown v-else :size="20" />
 						</template>
-						{{ t('tables', 'Show advanced settings') }}
+						{{ advancedToggleLabel }}
 					</NcButton>
 				</div>
 			</div>
@@ -118,6 +123,8 @@
 <script>
 import { NcAppSettingsDialog, NcAppSettingsSection, NcEmojiPicker, NcButton, NcNoteCard } from '@nextcloud/vue'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
+import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
+import { useStorage } from '@vueuse/core'
 import { showError } from '@nextcloud/dialogs'
 import '@nextcloud/dialogs/style.css'
 import FilterForm from '../main/partials/editViewPartials/filter/FilterForm.vue'
@@ -141,6 +148,7 @@
 		NcButton,
 		NcNoteCard,
 		ChevronDown,
+		ChevronUp,
 		NotificationsSettings,
 		FilterForm,
 		SelectedViewColumns,
@@ -174,7 +182,6 @@
 	data() {
 		return {
 			open: false,
-			showAdvanced: false,
 			title: '',
 			description: '',
 			icon: '',
@@ -193,7 +200,19 @@
 			generatedView: null,
 		}
 	},
+	created() {
+		this.showAdvancedStorage = useStorage('tables-view-advanced-settings', false)
+	},
 	computed: {
+		showAdvanced: {
+			get() { return this.showAdvancedStorage.value },
+			set(value) { this.showAdvancedStorage.value = value },
+		},
+		advancedToggleLabel() {
+			return this.showAdvanced
+				? t('tables', 'Hide advanced settings')
+				: t('tables', 'Show advanced settings')
+		},
 		mutableFilters: {
 			get() {
 				return this.mutableView.filter
@@ -253,7 +272,7 @@
 			return mergedViewSettings
 		},
 	},
 	watch: {
 		title() {
 			if (this.title.length >= 200) {
 				showError(t('tables', 'The title character limit is 200 characters. Please use a shorter title.'))
@@ -278,6 +297,9 @@
 	methods: {
 		...mapActions(useTablesStore, ['insertNewView', 'updateView']),
 		...mapActions(useDataStore, ['getColumnsFromBE']),
+		toggleAdvanced() {
+			this.showAdvanced = !this.showAdvanced
+		},
 		setIcon(icon) {
 			this.icon = icon
 		},

src/shared/components/ncTable/partials/columnTypePartials/forms/MainForm.vue

@@ -70,7 +70,7 @@
 				data-cy="columnAdvancedSettingsToggle"
 				:aria-expanded="showAdvanced"
 				:aria-label="advancedToggleLabel"
-				@click="showAdvanced = !showAdvanced">
+				@click="toggleAdvanced">
 				<template #icon>
 					<ChevronUp v-if="showAdvanced" :size="20" />
 					<ChevronDown v-else :size="20" />
@@ -93,7 +93,7 @@
 			</div>
 
 			<!-- warning for technical name changes -->
-			<div class="fix-col-4 space-T">
+			<div v-if="showTechnicalNameWarning" class="fix-col-4 space-T">
 				<NcNoteCard type="warning">
 					<p>{{ t('tables', 'Changing the technical name affects integrations and API. Make sure to update your services accordingly.') }}</p>
 				</NcNoteCard>
@@ -120,6 +120,7 @@
 import { NcButton, NcCheckboxRadioSwitch, NcNoteCard, NcSelect } from '@nextcloud/vue'
 import { mapState } from 'pinia'
 import { translate as t } from '@nextcloud/l10n'
+import { useStorage } from '@vueuse/core'
 import ChevronDown from 'vue-material-design-icons/ChevronDown.vue'
 import ChevronUp from 'vue-material-design-icons/ChevronUp.vue'
 import { useTablesStore } from '../../../../../../store/store.js'
@@ -152,6 +153,10 @@
 			type: String,
 			default: null,
 		},
+		originalTechnicalName: {
+			type: String,
+			default: null,
+		},
 		selectedViews: {
 			type: Array,
 			default: null,
@@ -191,16 +196,25 @@
 		return {
 			COLUMN_WIDTH_MIN,
 			COLUMN_WIDTH_MAX,
-			showAdvanced: false,
 		}
 	},
+	created() {
+		this.showAdvancedStorage = useStorage('tables-column-advanced-settings', false)
+	},
 	computed: {
 		...mapState(useTablesStore, ['views', 'activeElement', 'isView']),
+		showAdvanced: {
+			get() { return this.showAdvancedStorage.value },
+			set(value) { this.showAdvancedStorage.value = value },
+		},
 		advancedToggleLabel() {
 			return this.showAdvanced
 				? t('tables', 'Hide advanced settings')
 				: t('tables', 'Show advanced settings')
 		},
+		showTechnicalNameWarning() {
+			return this.editColumn && (this.technicalName ?? '') !== (this.originalTechnicalName ?? '')
+		},
 		localTitle: {
 			get() { return this.title },
 			set(title) { this.$emit('update:title', title) },
@@ -236,16 +250,13 @@
 			return this.views.filter(view => view.tableId === this.activeElement?.id).filter(view => !this.localSelectedViews.includes(view))
 		},
 	},
 	watch: {
 		technicalNameInvalidError: 'expandAdvancedOnError',
 		widthInvalidError: 'expandAdvancedOnError',
 	},
 
 	mounted() {
 		if (this.editColumn) {
-			if (this.technicalName || this.customSettings?.width) {
-				this.showAdvanced = true
-			}
 			return
 		}
 		if (!this.isView) {
@@ -256,6 +267,9 @@
 	},
 	methods: {
 		t,
+		toggleAdvanced() {
+			this.showAdvanced = !this.showAdvanced
+		},
 		expandAdvancedOnError(show) {
 			if (show) {
 				this.showAdvanced = true