farmcontrol/farmcontrol-ui
farmcontrol/farmcontrol-ui
2
0
Fork 0
Code Issues 2 Pull Requests Actions Packages Projects Releases Wiki Activity

Enhance PermissionsMatrix with sidebar integration and state management

Browse Source 
- Added utility functions for normalizing sidebar paths and collecting metadata from sidebar items.
- Implemented logic to match models with sidebar sections, improving the organization of permissions.
- Enhanced the data source construction for the PermissionsMatrix, allowing for better grouping and display of models.
- Introduced state management for expanded rows and hovered columns to improve user interaction.
- Refactored existing functionality to accommodate new features while maintaining performance and clarity.
This commit is contained in:
Tom Butcher 2026-08-20 17:20:22 +01:00
parent de1bd53f53
commit f07b0d5eef
1 changed files with 359 additions and 45 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

380
src/components/Dashboard/common/PermissionsMatrix.jsx
View File

@ -1,15 +1,23 @@
import { useMemo, useCallback, createElement } from 'react'
import {
useMemo,
useCallback,
useState,
createElement,
useContext
} from 'react'
import PropTypes from 'prop-types'
import { Table, Flex, Tooltip } from 'antd'
import { Table, Flex, Tooltip, Button } from 'antd'
import { useMediaQuery } from 'react-responsive'
import { ElectronContext } from '../context/ElectronContext'
import { useContext } from 'react'
import {
getPermissionMatrixModels,
getPermissionMatrixActions,
modelHasPermissionAction
} from '../../../database/ObjectModels'
import { getSidebar, getSidebarMenuSections } from '../../../database/Sidebars'
import { getSidebarIconNode } from '../../Icons/sidebarIconMap'
import PermissionCheckbox from './PermissionCheckbox'
import { CaretRightOutlined } from '@ant-design/icons'
const DEFAULT_SCROLL_HEIGHT = 'calc(var(--unit-100vh) - 258px)'
@ -124,6 +132,167 @@ const getCheckboxTitle = (state, inherit) => {
return 'Deny'
}
const normalizePath = (path) => {
if (!path || typeof path !== 'string') return ''
return path.split('?')[0].replace(/\/+$/, '')
}
const collectSidebarMeta = (items, acc = { paths: [], iconKeys: [] }) => {
items.forEach((item) => {
if (item?.type === 'divider') return
if (item.path) acc.paths.push(normalizePath(item.path))
if (item.iconKey) acc.iconKeys.push(item.iconKey)
if (item.children?.length) collectSidebarMeta(item.children, acc)
})
return acc
}
const getModelPaths = (model) => {
const paths = []
const addPath = (url) => {
if (typeof url === 'string') {
paths.push(normalizePath(url))
return
}
if (typeof url === 'function') {
try {
const sample = url('')
if (typeof sample === 'string') {
paths.push(normalizePath(sample.split('?')[0]))
}
} catch {
// ignore uncallable url builders
}
}
}
addPath(model?.url)
;(model?.actions || []).forEach((action) => addPath(action?.url))
return [...new Set(paths.filter(Boolean))]
}
const pathMatches = (modelPath, sidebarPath) =>
modelPath === sidebarPath || modelPath.startsWith(`${sidebarPath}/`)
const getModelSectionOrder = (model, section) => {
const modelPaths = getModelPaths(model)
const pathIndex = section.paths.findIndex((sidebarPath) =>
modelPaths.some((modelPath) => pathMatches(modelPath, sidebarPath))
)
if (pathIndex !== -1) return pathIndex
const iconIndex = section.iconKeys.findIndex(
(iconKey) => iconKey === model.name
)
if (iconIndex !== -1) return iconIndex
return Number.MAX_SAFE_INTEGER
}
const modelMatchesSection = (model, section) => {
const modelPaths = getModelPaths(model)
if (
modelPaths.some((modelPath) =>
section.paths.some((sidebarPath) => pathMatches(modelPath, sidebarPath))
)
) {
return true
}
if (section.iconKeys.includes(model.name)) return true
const prefix = `/dashboard/${section.key}`
return modelPaths.some((modelPath) => pathMatches(modelPath, prefix))
}
const getRecordModels = (record) => {
if (record?.isGroup) {
return (record.children || []).map((child) => child.model).filter(Boolean)
}
return record?.model ? [record.model] : []
}
const getModelsRowPermissionStates = (permissions, models, actions, inherit) =>
models.flatMap((model) =>
getRowPermissionStates(permissions, model, actions, inherit)
)
const setModelsRowPermissionState = (permissions, models, actions, next) => {
let nextPermissions = permissions
models.forEach((model) => {
nextPermissions = setRowPermissionState(
nextPermissions,
model,
actions,
next
)
})
return nextPermissions
}
const buildPermissionMatrixDataSource = (models) => {
const assigned = new Set()
const sections = getSidebarMenuSections({ includeDev: false }).map(
(section) => {
const sidebar = getSidebar(section.key)
const meta = collectSidebarMeta(section.items || [])
Object.keys(sidebar?.routeAliases || {}).forEach((path) => {
meta.paths.push(normalizePath(path))
})
return {
key: section.key,
label: section.label,
iconKey: section.iconKey,
paths: meta.paths,
iconKeys: meta.iconKeys
}
}
)
const dataSource = []
sections.forEach((section) => {
const sectionModels = models
.filter(
(model) =>
!assigned.has(model.name) && modelMatchesSection(model, section)
)
.sort(
(a, b) =>
getModelSectionOrder(a, section) - getModelSectionOrder(b, section)
)
sectionModels.forEach((model) => assigned.add(model.name))
if (sectionModels.length === 0) return
dataSource.push({
key: `section-${section.key}`,
isGroup: true,
label: section.label,
iconNode: getSidebarIconNode(section.iconKey),
children: sectionModels.map((model) => ({
key: model.name,
label: model.label,
icon: model.icon,
model
}))
})
})
const leftover = models.filter((model) => !assigned.has(model.name))
if (leftover.length > 0) {
dataSource.push({
key: 'section-other',
isGroup: true,
label: 'Other',
iconNode: null,
children: leftover.map((model) => ({
key: model.name,
label: model.label,
icon: model.icon,
model
}))
})
}
return dataSource
}
const PermissionsMatrix = ({
value,
onChange,
@ -136,7 +305,50 @@ const PermissionsMatrix = ({
const isMobile = useMediaQuery({ maxWidth: 768 })
const models = useMemo(() => getPermissionMatrixModels(), [])
const actions = useMemo(() => getPermissionMatrixActions(), [])
const permissions = value && typeof value === 'object' ? value : {}
const permissions = useMemo(
() => (value && typeof value === 'object' ? value : {}),
[value]
)
const dataSource = useMemo(
() => buildPermissionMatrixDataSource(models),
[models]
)
const [expandedRowKeys, setExpandedRowKeys] = useState(null)
const [hoveredColumnKey, setHoveredColumnKey] = useState(null)
const resolvedExpandedRowKeys = useMemo(
() => expandedRowKeys ?? dataSource.map((row) => row.key),
[dataSource, expandedRowKeys]
)
const isSectionExpanded = useCallback(
(record) => resolvedExpandedRowKeys.includes(record.key),
[resolvedExpandedRowKeys]
)
const handleToggleSection = useCallback(
(record) => {
if (!record.isGroup) return
setExpandedRowKeys((current) => {
const keys = current ?? dataSource.map((row) => row.key)
return keys.includes(record.key)
? keys.filter((key) => key !== record.key)
: [...keys, record.key]
})
},
[dataSource]
)
const getColumnHoverProps = useCallback(
(columnKey, isHeader = false) => ({
onMouseEnter: () => setHoveredColumnKey(columnKey),
className:
!isHeader && hoveredColumnKey === columnKey
? 'ant-table-cell-row-hover'
: undefined
}),
[hoveredColumnKey]
)
var adjustedScrollHeight = scrollHeight
if (isMobile) {
@ -159,21 +371,53 @@ const PermissionsMatrix = ({
[disabled, inherit, onChange, permissions]
)
const handleCycleRow = useCallback(
(model) => {
if (disabled || typeof onChange !== 'function') return
const handleCycleModels = useCallback(
(recordModels) => {
if (
disabled ||
typeof onChange !== 'function' ||
recordModels.length === 0
) {
return
}
const aggregate = getAggregatePermissionState(
getRowPermissionStates(permissions, model, actions, inherit)
getModelsRowPermissionStates(
permissions,
recordModels,
actions,
inherit
)
)
const next = cyclePermissionState(
aggregate === 'mixed' ? null : aggregate,
inherit
)
onChange(setRowPermissionState(permissions, model, actions, next))
onChange(
setModelsRowPermissionState(permissions, recordModels, actions, next)
)
},
[actions, disabled, inherit, onChange, permissions]
)
const handleCycleModelsAction = useCallback(
(recordModels, action) => {
if (disabled || typeof onChange !== 'function') return
const applicable = recordModels.filter((model) =>
modelHasPermissionAction(model, action.name)
)
if (applicable.length === 0) return
const aggregate = getAggregatePermissionState(
getColumnPermissionStates(permissions, applicable, action, inherit)
)
const next = cyclePermissionState(
aggregate === 'mixed' ? null : aggregate,
inherit
)
onChange(setColumnPermissionState(permissions, applicable, action, next))
},
[disabled, inherit, onChange, permissions]
)
const handleCycleColumn = useCallback(
(action) => {
if (disabled || typeof onChange !== 'function') return
@ -218,10 +462,18 @@ const PermissionsMatrix = ({
key: 'model',
dataIndex: 'label',
fixed: isMobile ? undefined : 'left',
width: 248,
width: 280,
onHeaderCell: () => getColumnHoverProps('model', true),
onCell: () => getColumnHoverProps('model'),
render: (label, record) => {
const recordModels = getRecordModels(record)
const aggregate = getAggregatePermissionState(
getRowPermissionStates(permissions, record.model, actions, inherit)
getModelsRowPermissionStates(
permissions,
recordModels,
actions,
inherit
)
)
return (
@ -231,13 +483,52 @@ const PermissionsMatrix = ({
justify='space-between'
style={{ width: '100%', paddingRight: '10px' }}
>
<Flex align='center' gap='small' style={{ marginLeft: '6px' }}>
{record.icon ? createElement(record.icon) : null}
<Flex
align='center'
gap='small'
style={{
marginLeft: record.isGroup ? '0px' : '6px',
fontWeight: record.isGroup ? 600 : undefined
}}
>
{record.isGroup ? (
<Button
type='text'
size='small'
className='permissions-matrix-expand-button'
aria-expanded={isSectionExpanded(record)}
aria-label={
isSectionExpanded(record)
? 'Collapse section'
: 'Expand section'
}
icon={
<CaretRightOutlined
className={
isSectionExpanded(record)
? 'permissions-matrix-expand-icon permissions-matrix-expand-icon-open'
: 'permissions-matrix-expand-icon'
}
/>
}
onClick={(event) => {
event.stopPropagation()
handleToggleSection(record)
}}
/>
) : (
<span className='permissions-matrix-expand-spacer' />
)}
{record.iconNode
? record.iconNode
: record.icon
? createElement(record.icon)
: null}
{label}
</Flex>
<div style={{ paddingBottom: '1px' }}>
{renderCheckbox(aggregate, () => {
handleCycleRow(record.model)
handleCycleModels(recordModels)
})}
</div>
</Flex>
@ -252,7 +543,13 @@ const PermissionsMatrix = ({
return {
title: (
<Flex vertical align='center' gap={12} justify='flex-end'>
<Flex
vertical
align='center'
gap={12}
justify='flex-end'
style={{ paddingTop: '8px' }}
>
<span className='permissions-matrix-header'>{action.label}</span>
<div style={{ paddingBottom: '2px' }}>
{renderCheckbox(columnAggregate, () => {
@ -264,18 +561,31 @@ const PermissionsMatrix = ({
key: action.name,
width: 48,
align: 'center',
onHeaderCell: () => getColumnHoverProps(action.name, true),
onCell: () => getColumnHoverProps(action.name),
render: (_, record) => {
if (!modelHasPermissionAction(record.model, action.name)) {
return null
}
const recordModels = getRecordModels(record)
const applicable = recordModels.filter((model) =>
modelHasPermissionAction(model, action.name)
)
if (applicable.length === 0) return null
if (!record.isGroup && applicable.length === 1) {
const state = getPermissionState(
permissions,
record.model.name,
applicable[0].name,
action.name
)
return renderCheckbox(state, () => {
handleCycle(record.model.name, action.name)
handleCycle(applicable[0].name, action.name)
})
}
const state = getAggregatePermissionState(
getColumnPermissionStates(permissions, applicable, action, inherit)
)
return renderCheckbox(state, () => {
handleCycleModelsAction(applicable, action)
})
}
}
@ -284,28 +594,22 @@ const PermissionsMatrix = ({
return [modelColumn, ...actionColumns]
}, [
actions,
getColumnHoverProps,
handleCycle,
handleCycleColumn,
handleCycleRow,
handleCycleModels,
handleCycleModelsAction,
handleToggleSection,
inherit,
isMobile,
isSectionExpanded,
models,
permissions,
renderCheckbox
])
const dataSource = useMemo(
() =>
models.map((model) => ({
key: model.name,
label: model.label,
icon: model.icon,
model
})),
[models]
)
return (
<div onMouseLeave={() => setHoveredColumnKey(null)}>
<Table
className='dashboard-table permissions-matrix-table'
dataSource={dataSource}
@ -315,7 +619,17 @@ const PermissionsMatrix = ({
bordered={true}
size={size}
scroll={{ x: 'max-content', y: adjustedScrollHeight }}
rowClassName={(record) =>
record.isGroup ? 'permissions-matrix-group-row' : ''
}
expandable={{
expandedRowKeys: resolvedExpandedRowKeys,
onExpandedRowsChange: setExpandedRowKeys,
indentSize: 0,
expandIcon: () => null
}}
/>
</div>
)
}