Enhance ObjectList and ObjectProperty components with hyperlink support

- Updated ObjectList to accept a new prop, showHyperlink, allowing for conditional rendering of hyperlinks for object items. - Modified ObjectProperty to pass the showHyperlink prop to ObjectList and ObjectSelect components, enhancing their functionality. - Improved error handling in ApiServerContext by adding detailed logging for error responses. - Updated various database models to include showHyperlink attribute for object lists, improving user navigation and interaction. - Enhanced CSS styles for the permissions matrix table to improve visual clarity and user experience.
Enhance PermissionsMatrix with sidebar integration and state management
2026-08-20 17:26:36 +01:00 · 2026-08-20 17:20:22 +01:00
13 changed files with 496 additions and 63 deletions
--- a/assets/stylesheets/App.css
+++ b/assets/stylesheets/App.css
@ -1337,6 +1337,64 @@ span.ant-skeleton-input.ant-skeleton-input-sm.text-skeleton {
  vertical-align: middle;
 }

+.permissions-matrix-table .permissions-matrix-group-row > .ant-table-cell {
+  font-weight: 600;
+  background-color: color-mix(
+    in srgb,
+    var(--color-text) 6%,
+    var(--layout-header-bg)
+  );
+}
+
+.permissions-matrix-table
+  .permissions-matrix-group-row
+  > .ant-table-cell.ant-table-cell-row-hover {
+  background: color-mix(
+    in srgb,
+    var(--color-text) 10%,
+    var(--layout-header-bg)
+  );
+}
+
+.permissions-matrix-table .ant-table-row-expand-icon,
+.permissions-matrix-table .ant-table-row-indent {
+  display: none;
+}
+
+.permissions-matrix-expand-button.ant-btn {
+  width: 22px;
+  min-width: 22px;
+  height: 22px;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: inherit;
+}
+
+.permissions-matrix-expand-button.ant-btn:hover,
+.permissions-matrix-expand-button.ant-btn:focus,
+.permissions-matrix-expand-button.ant-btn:focus-visible {
+  color: inherit;
+}
+
+.permissions-matrix-expand-spacer {
+  display: inline-block;
+  width: 18px;
+  height: 22px;
+  flex-shrink: 0;
+}
+
+.permissions-matrix-expand-icon {
+  font-size: 12px !important;
+  color: inherit;
+  transition: transform 0.2s ease;
+}
+
+.permissions-matrix-expand-icon-open {
+  transform: rotate(90deg);
+}
+
 .permissions-matrix-table .ant-table-thead > tr > th {
  vertical-align: bottom;
  padding-top: 12px;
--- a/src/components/Dashboard/common/ObjectList.jsx
+++ b/src/components/Dashboard/common/ObjectList.jsx
@ -4,7 +4,7 @@ import { Space, Typography } from 'antd'

 const { Text } = Typography

-const ObjectList = ({ value, objectType, style }) => {
+const ObjectList = ({ value, objectType, style, showHyperlink = false }) => {
  if (!value || !Array.isArray(value) || value.length === 0) {
    return <Text type='secondary'>n/a</Text>
  }
@ -12,7 +12,12 @@ const ObjectList = ({ value, objectType, style }) => {
  return (
    <Space size={'small'} wrap style={style}>
      {value.map((item) => (
-        <ObjectDisplay object={item} objectType={objectType} key={item._id} />
+        <ObjectDisplay
+          object={item}
+          objectType={objectType}
+          key={item._id}
+          showHyperlink={showHyperlink}
+        />
      ))}
    </Space>
  )
@ -21,7 +26,8 @@ const ObjectList = ({ value, objectType, style }) => {
 ObjectList.propTypes = {
  value: PropTypes.array,
  objectType: PropTypes.string,
-  style: PropTypes.object
+  style: PropTypes.object,
+  showHyperlink: PropTypes.bool
 }

 export default ObjectList
--- a/src/components/Dashboard/common/ObjectProperty.jsx
+++ b/src/components/Dashboard/common/ObjectProperty.jsx
@ -475,7 +475,13 @@ const ObjectProperty = ({
          }
        }
        case 'objectList': {
-          return <ObjectList value={value} objectType={objectType} />
+          return (
+            <ObjectList
+              value={value}
+              objectType={objectType}
+              showHyperlink={showHyperlink}
+            />
+          )
        }
        case 'objectChildren': {
          return (
@ -958,7 +964,14 @@ const ObjectProperty = ({
            <ObjectTypeSelect masterFilter={masterFilter} {...inputProps} />
          )
        case 'objectList':
-          return <ObjectSelect type={objectType} multiple {...inputProps} />
+          return (
+            <ObjectSelect
+              type={objectType}
+              multiple
+              showHyperlink={showHyperlink}
+              {...inputProps}
+            />
+          )
        case 'tags':
          return (
            <TagsInput
--- a/src/components/Dashboard/common/PermissionsMatrix.jsx
+++ b/src/components/Dashboard/common/PermissionsMatrix.jsx
@ -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>
  )
 }

--- a/src/components/Dashboard/context/ApiServerContext.jsx
+++ b/src/components/Dashboard/context/ApiServerContext.jsx
@ -1015,6 +1015,16 @@ const ApiServerProvider = ({ children }) => {

  const showError = useCallback(
    (error, callback = null) => {
+      console.error(error)
+      console.error(error.response)
+      console.error(error.response.data)
+      console.error(error.response.data.code)
+      console.error(error.response.data.error)
+      console.error(error.response.data.message)
+      console.error(error.response.data.status)
+      console.error(error.response.data.timestamp)
+      console.error(error.response.data.path)
+      console.error(error.response.data.method)
      const code = error.response.data.code || 'UNKNOWN'
      if (code == 'UNAUTHORIZED') {
        setUnauthenticated()
--- a/src/database/models/DocumentTemplate.js
+++ b/src/database/models/DocumentTemplate.js
@ -208,7 +208,8 @@ export const DocumentTemplate = {
      label: 'Document Printers',
      required: false,
      type: 'objectList',
-      objectType: 'documentPrinter'
+      objectType: 'documentPrinter',
+      showHyperlink: true
    },
    {
      name: 'content',
--- a/src/database/models/FilamentProfile.js
+++ b/src/database/models/FilamentProfile.js
@ -1,7 +1,8 @@
 import { createElement, lazy } from 'react'

 const FilamentProfileInfo = lazy(
-  () => import('../../components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo')
+  () =>
+    import('../../components/Dashboard/Production/FilamentProfiles/FilamentProfileInfo')
 )
 import FilamentProfileIcon from '../../components/Icons/FilamentProfileIcon'
 import InfoCircleIcon from '../../components/Icons/InfoCircleIcon'
@ -75,8 +76,15 @@ export const FilamentProfile = {
      content: () => createElement(FilamentProfileInfo)
    }
  ],
-  columns: ['_reference', 'name', 'filamentType', 'filament', 'createdAt', 'updatedAt'],
-  filters: ['_id','name','createdAt','updatedAt','_reference'],
+  columns: [
+    '_reference',
+    'name',
+    'filamentType',
+    'filament',
+    'createdAt',
+    'updatedAt'
+  ],
+  filters: ['_id', 'name', 'createdAt', 'updatedAt', '_reference'],
  sorters: ['name', 'createdAt', 'updatedAt'],
  properties: [
    {
@ -1203,7 +1211,8 @@ export const FilamentProfile = {
      type: 'objectList',
      objectType: 'printerProfile',
      span: 2,
-      columnWidth: 220
+      columnWidth: 220,
+      showHyperlink: true
    },
    {
      name: 'compatiblePrintersCondition',
--- a/src/database/models/Host.js
+++ b/src/database/models/Host.js
@ -270,7 +270,8 @@ export const Host = {
      objectType: 'file',
      required: false,
      readOnly: true,
-      columnWidth: 200
+      columnWidth: 200,
+      showHyperlink: true
    }
  ]
 }
--- a/src/database/models/Job.js
+++ b/src/database/models/Job.js
@ -245,7 +245,8 @@ export const Job = {
      type: 'objectList',
      objectType: 'printer',
      required: true,
-      columnWidth: 200
+      columnWidth: 200,
+      showHyperlink: true
    }
  ],
  stats: [
--- a/src/database/models/Listing.js
+++ b/src/database/models/Listing.js
@ -4,7 +4,8 @@ const ListingInfo = lazy(
  () => import('../../components/Dashboard/Sales/Listings/ListingInfo')
 )
 const NewListingVarient = lazy(
-  () => import('../../components/Dashboard/Sales/ListingVarients/NewListingVarient')
+  () =>
+    import('../../components/Dashboard/Sales/ListingVarients/NewListingVarient')
 )
 const PublishListing = lazy(
  () => import('../../components/Dashboard/Sales/Listings/PublishListing')
@ -76,7 +77,11 @@ export const Listing = {
      label: 'New Listing Varient',
      icon: PlusIcon,
      content: (objectData, { onOk } = {}) => {
-        return createElement(NewListingVarient, { defaultValues: { listing: objectData }, onOk, reset: true })
+        return createElement(NewListingVarient, {
+          defaultValues: { listing: objectData },
+          onOk,
+          reset: true
+        })
      }
    },
    { type: 'divider' },
@ -308,7 +313,7 @@ export const Listing = {
      name: 'courierServices',
      label: 'Courier Services',
      type: 'objectList',
-      multiple: true,
+      showHyperlink: true,
      objectType: 'courierService',
      readOnly: false,
      required: true,
--- a/src/database/models/Printer.js
+++ b/src/database/models/Printer.js
@ -482,6 +482,7 @@ export const Printer = {
      name: 'queue',
      label: 'Queue',
      type: 'objectList',
+      showHyperlink: true,
      objectType: 'subJob',
      required: false,
      readOnly: true,
--- a/src/database/models/User.js
+++ b/src/database/models/User.js
@ -185,6 +185,7 @@ export const User = {
      name: 'groups',
      label: 'Groups',
      type: 'objectList',
+      showHyperlink: true,
      objectType: 'userGroup',
      span: 2,
      columnWidth: 250
--- a/src/database/models/UserGroup.js
+++ b/src/database/models/UserGroup.js
@ -75,8 +75,20 @@ export const UserGroup = {
      content: () => createElement(UserGroupInfo)
    }
  ],
-  columns: ['_reference', 'name', 'permissionSettings', 'createdAt', 'updatedAt'],
-  filters: ['name', 'permissionSettings', 'createdAt', 'updatedAt', '_reference'],
+  columns: [
+    '_reference',
+    'name',
+    'permissionSettings',
+    'createdAt',
+    'updatedAt'
+  ],
+  filters: [
+    'name',
+    'permissionSettings',
+    'createdAt',
+    'updatedAt',
+    '_reference'
+  ],
  sorters: ['name', 'createdAt', '_id', 'updatedAt'],
  properties: [
    {
@ -126,7 +138,8 @@ export const UserGroup = {
      type: 'objectList',
      objectType: 'permissionSetting',
      span: 2,
-      columnWidth: 250
+      columnWidth: 250,
+      showHyperlink: true
    },
    {
      name: 'permissions',