Merge pull request #57 from smartlabsAT/feature/issue-37-permission-filtering

feat: permission-aware layout (issue #37)

Author: smartlabsAT

.gitignore

@@ -18,3 +18,6 @@ live-test-*.png
 tags-vs-real-tags.png
 status-cell-debug.png
 current-page.png
+issue-37-*.png
+step*.png
+test*-*.png

CHANGELOG.md

@@ -5,6 +5,35 @@ All notable changes to the Super Layout Table Extension will be documented in th
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## v0.4.0 — Permission-aware layout (Issue #37)
+
+### Fixed
+- **Bug A:** Translation language columns the user cannot read are no longer rendered
+- **Bug B:** Inline-edit popover blocked on cells the user cannot update; tooltip explains
+- **Bug C:** `[object Object]` no longer leaks into translation cells when popover open
+- **Bug D:** Hauptcollection field permissions and translations field permissions handled consistently
+- **Bug E:** Filters referencing inaccessible fields are sanitized server-side; user notified
+- **Bug F:** Auto-resolved by Bug A — language code never leaks into header
+- **Bug G:** Bulk-action duplicate button hidden when user lacks create permission
+- **L2 (post-audit):** Asymmetric permissions — when the `languages` collection is unrestricted but the translations junction has a row-level filter on `languages_code`, an aggregate-query probe now resolves the exact accessible languages (instead of `--` placeholder columns).
+- **L5 (post-audit):** File-browser drawer no longer renders empty when the user lacks read on `directus_files`. A clear warning notification fires instead.
+
+### Added
+- `usePermissions` composable as single source of truth for permission checks
+- `sanitizeFilter` utility for permission-aware filter trees
+- `useTranslationLanguages` composable: probes the translations junction collection for accessible languages (covers row-level filters not exposed by `/permissions/me`)
+- 403 errors during inline-save now surface as notifications instead of being swallowed
+
+### Refactor
+- `combinedFilter` no longer mixes side-effects with computed evaluation; the user notification is now emitted from a dedicated watcher.
+- `PermissionAction` union no longer includes the unused `'share'` action.
+- `usePermissions` guards against array-shaped permission stores (legacy / future Directus shape changes) instead of silently failing.
+- `fieldsWithRelational` clarifies its behaviour: the primary key and translation language code path are added BEFORE the permission gate, and sanitize drops them only if the user lacks read permission. This mirrors native Directus's `useCollection.primaryKeyField`, which is itself permission-filtered, so users without PK read access see the same graceful degradation in both layouts (items render with limited interaction) instead of an empty 403 error state.
+- `useTableApi.fetchItems` no longer requests `meta=filter_count,total_count` together with the items. The server resolves that meta block via `countDistinct(<pk>)` and would 403 for users without read on the primary key; the count is now fetched in parallel via `aggregate[count]=*` (`fetchItemCount`), which uses SQL `COUNT(*)` and works regardless of field-level permissions. Users without PK access can now use the layout instead of seeing an empty 403 state.
+
+### Known limitations
+- Bulk-action **Edit / Delete / Add Item** buttons (rendered by Directus Core, not by this extension) remain visible-but-disabled when the user lacks the corresponding permission. A future Directus core PR is required to fully hide them.
+
 ## [0.3.2] - 2026-05-09
 
 ### Fixed

package.json

@@ -1,6 +1,6 @@
 {
   "name": "directus-extension-super-table",
-  "version": "0.3.2",
+  "version": "0.4.0",
   "description": "A powerful and feature-rich table layout extension for Directus 11+ with inline editing, quick filters, and manual sorting",
   "keywords": [
     "directus",

src/actions.vue

@@ -2,9 +2,8 @@
   <div class="action-buttons">
     <!-- Duplicate Button nur anzeigen wenn Items ausgewählt sind -->
     <v-button
-      v-if="hasSelection"
+      v-if="hasSelection && canDuplicate"
       v-tooltip.bottom="duplicateTooltip"
-      :disabled="!canDuplicate"
       icon
       rounded
       secondary
@@ -97,6 +96,7 @@ import { computed, ref } from 'vue';
 import { useStores, useCollection } from '@directus/extensions-sdk';
 import { useI18n } from 'vue-i18n';
 import { useTableApi } from './composables/api';
+import { usePermissions } from './composables/usePermissions';
 
 // Props from layout state
 const props = defineProps<{
@@ -118,6 +118,7 @@ const { t } = useI18n();
 const tableApi = useTableApi();
 const { useNotificationsStore } = useStores();
 const notificationsStore = useNotificationsStore();
+const permissions = usePermissions();
 
 // State for Save Filter Dialog
 const saveDialogActive = ref(false);
@@ -191,12 +192,7 @@ const hasNativeFilter = computed(() => {
   return true;
 });
 
-// Als Admin haben wir immer Create-Rechte, außer es wird explizit verboten
-// In Layout Extensions ist der Permissions-Check anders als in anderen Extensions
-const canDuplicate = computed(() => {
-  // Einfacher Check - wenn wir hier sind, haben wir vermutlich Rechte
-  return true;
-});
+const canDuplicate = computed(() => permissions.canCreate(props.collection));
 
 const duplicateTooltip = computed(() => {
   const count = props.selection?.length || 0;

src/components/EditableCellRelational.vue

@@ -9,6 +9,7 @@
     :interface-type="'tags'"
     :interface-options="interfaceOptions"
     :is-editable="isFieldEditableComputed"
+    :permission-denied="permissionDenied"
     :is-relational="false"
     :auto-save="false"
     :saving="saving"
@@ -55,6 +56,7 @@
     :interface-type="getInterfaceType() || undefined"
     :interface-options="interfaceOptions"
     :is-editable="isFieldEditableComputed"
+    :permission-denied="permissionDenied"
     :is-relational="false"
     :auto-save="false"
     :language-code-field="props.languageCodeField"
@@ -166,10 +168,13 @@ import ColorCell from './CellRenderers/ColorCell.vue';
 import TagCell from './TagCell.vue';
 import { isFieldEditable, getFieldEditWarning, getFieldSupportLevel } from '../utils/fieldSupport';
 import { pickHeuristic } from '../utils/displayHeuristics';
+import { resolveTranslationValue } from '../utils/resolveTranslationValue';
+import { usePermissions } from '../composables/usePermissions';
 
 const { useFieldsStore, useRelationsStore } = useStores();
 const fieldsStore = useFieldsStore();
 const relationsStore = useRelationsStore();
+const permissions = usePermissions();
 
 const props = defineProps<{
   item: Item;
@@ -252,39 +257,20 @@ const displayValue = computed(() => {
     return props.edits;
   }
 
-  // Special handling for translations fields
+  // Translation sub-fields go through the centralised helper so a sibling
+  // re-render during a popover open cannot leak a whole translation row
+  // through as "[object Object]".
   if (actualFieldKey.value.includes('translations.')) {
-    const translationField = actualFieldKey.value.split('.').slice(1).join('.');
-
-    // Check if translations exist and is an array
-    if (Array.isArray(props.item.translations) && props.item.translations.length > 0) {
-      // Use the language from field key (if specified) or the selected language
-      const targetLanguage = fieldLanguage.value;
-
-      if (targetLanguage) {
-        const languageField = props.languageCodeField || 'languages_code';
-        const translation = props.item.translations.find(
-          (t: any) => t[languageField] === targetLanguage
-        );
-
-        // Return the specific field value if translation exists
-        if (translation) {
-          return translation[translationField] || null;
-        }
-      }
-
-      // No translation for this language
-      return null;
-    }
-
-    // No translations available at all
-    return null;
+    return resolveTranslationValue(
+      props.item,
+      actualFieldKey.value,
+      fieldLanguage.value ?? null,
+      props.languageCodeField || 'languages_code'
+    );
   }
 
-  // Handle relational fields with display templates.
-  // Resolved priority: override → field-display → heuristic → none.
-  // Issue #48: layout-level override (columnDisplays) takes priority over the
-  // field-settings display.
+  // Display-template resolution priority: column-display override →
+  // field's own display template → relational heuristic → none.
   const storageKey = props.fieldKey.includes(':') ? props.fieldKey.split(':')[0] : props.fieldKey;
   const override = props.columnDisplays?.[storageKey];
   const fieldTemplate =
@@ -425,16 +411,40 @@ const resolvedDisplay = computed<ResolvedDisplay>(() => {
 const isFieldEditableComputed = computed(() => {
   if (!props.editMode) return false;
 
-  // Special case: translation fields should be editable if the base type is supported
+  // Permission check first — denies independent of field-support
+  const collection = props.field?.collection || props.item?.collection;
+  if (!collection) return false;
+
   if (actualFieldKey.value.startsWith('translations.')) {
-    // For now, allow editing of translation fields if edit mode is on
-    // The actual field support check will be done in the InlineEditPopover
-    return true;
+    // Translation sub-field: resolve the junction collection and check update permission.
+    // `collection` may already be the junction (when called from a translation cell whose
+    // field metadata.collection points at the junction) or the parent collection. Try the
+    // parent → junction lookup first; fall back to treating `collection` as the junction.
+    const subField = actualFieldKey.value.split('.').slice(1).join('.');
+    const parentRels = relationsStore.getRelationsForField(collection, 'translations');
+    const transCollection = parentRels?.[0]?.collection || collection;
+    if (!permissions.canUpdate(transCollection, subField)) return false;
+  } else {
+    if (!permissions.canUpdate(collection, actualFieldKey.value)) return false;
   }
 
-  // Use the field support utility which already handles tags and other partial support fields
-  const editable = isFieldEditable(props.field, actualFieldKey.value);
-  return editable;
+  // Field-support check (unchanged)
+  if (actualFieldKey.value.startsWith('translations.')) return true;
+  return isFieldEditable(props.field, actualFieldKey.value);
+});
+
+const permissionDenied = computed(() => {
+  if (!props.editMode) return false;
+  const collection = props.field?.collection || props.item?.collection;
+  if (!collection) return false;
+
+  if (actualFieldKey.value.startsWith('translations.')) {
+    const subField = actualFieldKey.value.split('.').slice(1).join('.');
+    const parentRels = relationsStore.getRelationsForField(collection, 'translations');
+    const transCollection = parentRels?.[0]?.collection || collection;
+    return !permissions.canUpdate(transCollection, subField);
+  }
+  return !permissions.canUpdate(collection, actualFieldKey.value);
 });
 
 // Get field edit warning message

src/components/InlineEditPopover.vue

@@ -404,10 +404,16 @@
 
 <script setup lang="ts">
 import { ref, computed, watch, nextTick, onMounted, onUnmounted } from 'vue';
+import { useStores } from '@directus/extensions-sdk';
 import { useTableApi } from '../composables/api';
+import { usePermissions } from '../composables/usePermissions';
 import TagEditor from './CellRenderers/TagEditor.vue';
 // Note: useDrawer might not be available in all versions, we'll use alternative approach
 
+const { useNotificationsStore } = useStores();
+const notificationsStore = useNotificationsStore();
+const permissions = usePermissions();
+
 interface Props {
   value: any;
   fieldKey: string;
@@ -427,6 +433,7 @@ interface Props {
   editModeActive?: boolean;
   fieldEditWarning?: string;
   languageCodeField?: string;
+  permissionDenied?: boolean;
 }
 
 const props = withDefaults(defineProps<Props>(), {
@@ -580,9 +587,20 @@ watch(menuActive, (active) => {
       }
     }
 
-    // For file fields, open drawer immediately instead of popover
+    // For file fields, open drawer immediately instead of popover.
+    // Pre-check: the drawer needs read access to directus_files to render.
+    // Without it the drawer would appear empty / broken; surface a clear
+    // notification instead.
     if (isFileField.value) {
       menuActive.value = false; // Close the popover
+      if (!permissions.canRead('directus_files')) {
+        notificationsStore.add({
+          type: 'warning',
+          title: 'No file access',
+          text: "You don't have permission to browse files. Ask an admin to grant read access on directus_files.",
+        });
+        return;
+      }
       // Initialize values before opening file browser
       originalValue.value = props.value;
       localValue.value = props.value;
@@ -631,29 +649,21 @@ watch(menuActive, (active) => {
 
 // Methods
 function getFieldTooltip() {
-  // Only show tooltip in edit mode for non-editable fields
-  if (!props.editModeActive) {
-    return undefined;
-  }
-
-  // Show warning for partially supported or unsupported fields
+  if (!props.editModeActive) return undefined;
+  if (props.permissionDenied) return 'You do not have permission to edit this field';
   if (
     props.fieldSupportLevel === 'partial' ||
     props.fieldSupportLevel === 'none' ||
     props.fieldSupportLevel === 'readonly'
   ) {
     return props.fieldEditWarning || 'This field has limited or no inline editing support';
   }
-
   return undefined;
 }
 
 function shouldShowIcon() {
-  // Only show lock icons when edit mode is active and field is not editable
-  if (!props.editModeActive) {
-    return false;
-  }
-  // Only show icon for non-editable fields (lock indicator)
+  if (!props.editModeActive) return false;
+  if (props.permissionDenied) return true;
   return (
     props.fieldSupportLevel === 'none' ||
     props.fieldSupportLevel === 'readonly' ||
@@ -681,6 +691,19 @@ function handleCellClick(toggle: Function) {
 function formatDisplayValue(value: any): string {
   if (value === null || value === undefined) return '—';
 
+  // Defensive guard: a translation-row object can leak through as the cell
+  // value (e.g. when a sibling re-renders while another cell's popover opens).
+  // Extract `text` so we never render "[object Object]".
+  if (
+    value &&
+    typeof value === 'object' &&
+    !Array.isArray(value) &&
+    'text' in value &&
+    'languages_code' in value
+  ) {
+    return String((value as any).text ?? '—');
+  }
+
   // Handle hash/password fields - show dots instead of actual value
   if (
     props.fieldType === 'hash' ||