feat: implement column settings dialog with drag-and-drop functionality

- Added ColumnSettingsDialog component for managing column visibility and order.
- Integrated Material-UI components for better UI/UX.
- Implemented drag-and-drop for reordering columns.
- Added localization support for column settings.
- Created services for loading and saving column settings to the repository.
- Updated Grid component to support column settings dialog and apply legacy column settings.
- Introduced hooks for managing repository column settings.
- Enhanced error handling and loading states for column settings.

Author: marosvolgyiz

apps/sensenet/cypress/e2e/content/explorer.cy.ts

@@ -1,20 +1,6 @@
 import { pathWithQueryParams } from '../../../src/services/query-string-builder'
 
-const newColumnSettings = {
-  columns: [
-    { field: 'DisplayName', title: 'Test Display' },
-    { field: 'AvailableContentTypeFields', title: 'Test' },
-  ],
-}
-
-const originalColumnSettings = {
-  columns: [
-    { field: 'DisplayName', title: 'Display Name' },
-    { field: 'AvailableContentTypeFields', title: 'Available Content Type Fields' },
-  ],
-}
-
-describe('Add new permission entry', () => {
+describe('Column settings', () => {
   before(() => {
     cy.login('superAdmin')
     cy.visit(pathWithQueryParams({ path: '/', newParams: { repoUrl: Cypress.env('repoUrl') } }))
@@ -24,34 +10,40 @@ describe('Add new permission entry', () => {
   it('It should open Content Explorer and change the Columns', () => {
     cy.get('[data-test="drawer-menu-item-content"]').click()
     cy.get('[data-test="column-settings"]').click()
-
-    cy.get('.react-monaco-editor-container textarea')
-      .type('{ctrl}a', { force: true })
-      .clear({ force: true })
-      .type(JSON.stringify(newColumnSettings), {
-        parseSpecialCharSequences: false,
-      })
-
-    cy.get('[data-test="monaco-editor-submit"]').click()
-
-    cy.get('[data-test="table-header-actions"]').should('be.visible').find('.MuiButtonBase-root').contains('Action')
-    cy.get('[data-test="table-header-availablecontenttypefields"]')
-      .should('be.visible')
-      .find('.MuiButtonBase-root')
-      .contains('Test')
-    cy.get('[data-test="table-header-displayname"]')
-      .should('be.visible')
-      .find('.MuiButtonBase-root')
-      .contains('Test Display')
+    cy.get('[data-test="column-settings-source"]').should('be.visible')
+
+    cy.get('[data-test="column-settings-field-search"]').type('CreationDate')
+    cy.get('[role="option"]').should('contain', 'Creation Date').and('contain', 'CreationDate')
+    cy.get('[data-test="column-settings-field-search"]').type('{esc}').clear()
+
+    const dataTransfer = new DataTransfer()
+    cy.get('[data-test="column-settings-drag-availablecontenttypefields"]').trigger('dragstart', { dataTransfer })
+    cy.get('[data-test="column-settings-row-displayname"]')
+      .trigger('dragover', { dataTransfer })
+      .trigger('drop', { dataTransfer })
+    cy.get('[data-test^="column-settings-row-"]')
+      .first()
+      .should('have.attr', 'data-test', 'column-settings-row-availablecontenttypefields')
+
+    cy.get('[data-test="column-settings-drag-displayname"]').trigger('dragstart', { dataTransfer })
+    cy.get('[data-test="column-settings-row-availablecontenttypefields"]')
+      .trigger('dragover', { dataTransfer })
+      .trigger('drop', { dataTransfer })
+
+    cy.get('[data-test="column-settings-row-displayname"] input').clear().type('Test Display')
+    cy.get('[data-test="column-settings-row-availablecontenttypefields"] input').clear().type('Test')
+    cy.get('[data-test="column-settings-save"]').click()
+
+    cy.get('.ag-header-cell[col-id="Actions"]').should('be.visible').should('not.contain', 'Actions')
+    cy.get('[data-test="column-settings"]').should('be.visible')
+    cy.get('.ag-header-cell[col-id="AvailableContentTypeFields"]').should('be.visible').contains('Test')
+    cy.get('.ag-header-cell[col-id="DisplayName"]').should('be.visible').contains('Test Display')
 
     cy.get('[data-test="column-settings"]').click()
-
-    cy.get('.react-monaco-editor-container textarea')
-      .type('{ctrl}a', { force: true })
-      .clear({ force: true })
-      .type(JSON.stringify(originalColumnSettings), {
-        parseSpecialCharSequences: false,
-      })
-    cy.get('[data-test="monaco-editor-submit"]').click()
+    cy.get('[data-test="column-settings-row-displayname"] input').clear().type('Display Name')
+    cy.get('[data-test="column-settings-row-availablecontenttypefields"] input')
+      .clear()
+      .type('Available Content Type Fields')
+    cy.get('[data-test="column-settings-save"]').click()
   })
 })

apps/sensenet/src/components/content-list/content-list.tsx

@@ -29,7 +29,7 @@ import { TableCellProps } from 'react-virtualized'
 import { ResponsiveContext, ResponsivePersonalSettings } from '../../context'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useLocalization, usePersonalSettings, useSelectionService } from '../../hooks'
-import { isImageContent } from '../../services'
+import { isImageContent, LegacyColumnSettings } from '../../services'
 import { ContentBreadcrumbs } from '../ContentBreadcrumbs'
 import { ContentContextMenu } from '../context-menu/content-context-menu'
 import { useDialog } from '../dialogs'
@@ -660,8 +660,9 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
     })
   }
 
-  const setCostumColumnSettings = async (newSettings: { columns: Array<ColumnSetting<GenericContent>> }) => {
-    ColumnSettingsContainer[props.parentIdOrPath] = { columns: newSettings.columns, lastValidation: new Date() }
+  const setCostumColumnSettings = async (newSettings: LegacyColumnSettings) => {
+    const legacyColumns = newSettings.columns as Array<ColumnSetting<GenericContent>>
+    ColumnSettingsContainer[props.parentIdOrPath] = { columns: legacyColumns, lastValidation: new Date() }
 
     const endpoint = 'WriteSettings'
 
@@ -681,7 +682,7 @@ export const ContentList = <T extends GenericContent = GenericContent>(props: Co
     } catch (error) {
       console.error(error)
     }
-    setColumnSettings(newSettings.columns)
+    setColumnSettings(legacyColumns)
     closeLastDialog()
   }
 

apps/sensenet/src/components/content/Explore.tsx

@@ -20,7 +20,9 @@ import { GridKeyEnum } from '../../../src/components/grid/enums/GridKey.enum'
 import { ResponsiveContext, ResponsivePersonalSettings } from '../../context'
 import { globals, useGlobalStyles } from '../../globalStyles'
 import { useQuery, useSelectionService, useSnRoute } from '../../hooks'
+import { useRepositoryColumnSettings } from '../../hooks/use-repository-column-settings'
 import { getPrimaryActionUrl, navigateToAction } from '../../services'
+import { ColumnSettingsSource, LegacyColumnSetting, LegacyColumnSettings } from '../../services/column-settings-service'
 import { resolveContentLinkTarget } from '../../services/favorites'
 import { ContentBreadcrumbs } from '../ContentBreadcrumbs'
 import { DocumentViewer } from '../document-viewer'
@@ -51,19 +53,33 @@ const requiredGridLoadFields: ODataFieldParameter<GenericContent> = [
   'Locked',
 ]
 
-const getGridLoadChildrenSettings = (colDef: ColDef[]): ODataParams<GenericContent> => {
-  const selectFields = new Set<keyof GenericContent>(requiredGridLoadFields)
+const getGridLoadChildrenSettings = (
+  colDef: ColDef[],
+  columnSettings?: LegacyColumnSetting[],
+): ODataParams<GenericContent> => {
+  const selectFields = new Set<string>(requiredGridLoadFields)
+  const expandFields = new Set<string>(['CreatedBy', 'ModifiedBy'])
 
   colDef.forEach((columnDefinition) => {
     if (columnDefinition.field && columnDefinition.field !== '0') {
-      selectFields.add(columnDefinition.field as keyof GenericContent)
+      selectFields.add(columnDefinition.field)
+    }
+  })
+
+  columnSettings?.forEach(({ field }) => {
+    if (!field || field === 'Actions') {
+      return
+    }
+    selectFields.add(field)
+    if (field.includes('/')) {
+      expandFields.add(field.split('/')[0])
     }
   })
 
   return {
     orderby: [['DisplayName', 'asc']],
-    select: Array.from(selectFields),
-    expand: ['CreatedBy', 'ModifiedBy'],
+    select: Array.from(selectFields) as ODataFieldParameter<GenericContent>,
+    expand: Array.from(expandFields) as ODataFieldParameter<GenericContent>,
     onlyselectList: true,
   }
 }
@@ -222,13 +238,16 @@ export type ExploreProps = {
 
 type ExploreGridOrApplicationProps = {
   currentPath: string
-  fieldsToDisplay?: Array<ColumnSetting<GenericContent>>
+  fieldsToDisplay?: LegacyColumnSetting[]
   schema?: string
   disableColumnSettings?: boolean
   colDef: ColDef[]
   gridKey: GridKeyEnum
   onNavigate: (content: GenericContent) => void
   onActivateItem: (activeItem: GenericContent) => Promise<void>
+  onColumnSettingsChange: (settings: LegacyColumnSettings, targetIdOrPath?: string | number) => Promise<void>
+  columnSettingsSource?: ColumnSettingsSource
+  isColumnSettingsLoading: boolean
 }
 
 const ActiveContentRouteSync: React.FC = () => {
@@ -255,6 +274,9 @@ const ExploreGridOrApplication: React.FC<ExploreGridOrApplicationProps> = ({
   gridKey,
   onNavigate,
   onActivateItem,
+  onColumnSettingsChange,
+  columnSettingsSource,
+  isColumnSettingsLoading,
 }) => {
   const selectionService = useSelectionService()
   const currentContent = useContext(CurrentContentContext)
@@ -269,6 +291,9 @@ const ExploreGridOrApplication: React.FC<ExploreGridOrApplicationProps> = ({
       style={{ flexGrow: 7, flexShrink: 0, maxHeight: '100%' }}
       enableBreadcrumbs={false}
       fieldsToDisplay={fieldsToDisplay}
+      onColumnSettingsChange={onColumnSettingsChange}
+      columnSettingsSource={columnSettingsSource}
+      isColumnSettingsLoading={isColumnSettingsLoading}
       schema={schema}
       onParentChange={onNavigate}
       onActivateItem={onActivateItem}
@@ -358,9 +383,19 @@ export function Explore({
   const pathFromUrl = useQuery().get('path')
   const snRoute = useSnRoute()
   const activeAction = snRoute.match!.params.action
+  const explicitColumnSettings = useMemo(
+    () =>
+      fieldsToDisplay?.map(({ field, title }) => ({
+        field: String(field),
+        title,
+      })),
+    [fieldsToDisplay],
+  )
+  const { columnSettings, columnSettingsSource, isColumnSettingsLoading, saveColumnSettings } =
+    useRepositoryColumnSettings(currentPath, explicitColumnSettings)
   const currentChildrenLoadSettings = useMemo(
-    () => loadChildrenSettings || getGridLoadChildrenSettings(colDef),
-    [colDef, loadChildrenSettings],
+    () => loadChildrenSettings || getGridLoadChildrenSettings(colDef, columnSettings),
+    [colDef, columnSettings, loadChildrenSettings],
   )
   const onActivateItemOverride = async (activeItem: GenericContent) => {
     const contentToOpen = await resolveContentLinkTarget(repository, activeItem)
@@ -434,7 +469,10 @@ export function Explore({
         <ContentInfo />
         <ExploreGridOrApplication
           disableColumnSettings={disableColumnSettings}
-          fieldsToDisplay={fieldsToDisplay}
+          fieldsToDisplay={columnSettings}
+          onColumnSettingsChange={saveColumnSettings}
+          columnSettingsSource={columnSettingsSource}
+          isColumnSettingsLoading={isColumnSettingsLoading}
           schema={schema}
           onNavigate={onNavigate}
           onActivateItem={onActivateItemOverride}