ronantakizawa/codereview-bench huggingface dataset:
Repository: directus/directus
File: app/src/composables/use-field-tree.test.ts (TypeScript)

Code before:
import type { Field, Relation } from '@directus/types';
import { createTestingPinia } from '@pinia/testing';
import { setActivePinia } from 'pinia';
import { beforeEach, expect, test, vi } from 'vitest';
import { ref, unref } from 'vue';
import { cryptoStub } from '@/__utils__/crypto';
import { useFieldTree } from '@/composables/use-field-tree';
import { useFieldsStore } from '@/stores/fields';
import { useRelationsStore } from '@/stores/relations';

vi.stubGlobal('crypto', cryptoStub);

vi.mock('vue-i18n', async (importOriginal) => {
	const actual = await importOriginal<typeof import('vue-i18n')>();
	return {
		...actual,
		useI18n: () => ({
			t: (key: string) => (key === 'loading' ? 'Loading...' : key),
		}),
	};
});

beforeEach(() => {
	setActivePinia(
		createTestingPinia({
			createSpy: vi.fn,
			stubActions: false,
		}),
	);
});

test('Returns tree list of same length', () => {
	const fieldsStore = useFieldsStore();

	fieldsStore.fields = [
		{
			collection: 'a',
			field: 'id',
			type: 'integer',
			schema: {},
			meta: {
				id: 1,
				collection: 'a',
				field: 'id',
				special: null,
				readonly: true,

Review comment (refactor):
Let’s simplify the mocking here.

```suggestion
vi.mock('vue-i18n', () => ({
	useI18n: () => ({
		t: vi.fn((key: string) => (key === 'loading' ? 'Loading...' : key)),
	}),
	createI18n: vi.fn(() => ({})),
}));
```

Code after:
import type { Field, Relation } from '@directus/types';
import { createTestingPinia } from '@pinia/testing';
import { setActivePinia } from 'pinia';
import { beforeEach, expect, test, vi } from 'vitest';
import { ref, unref } from 'vue';
import { cryptoStub } from '@/__utils__/crypto';
import { useFieldTree } from '@/composables/use-field-tree';
import { useFieldsStore } from '@/stores/fields';
import { useRelationsStore } from '@/stores/relations';

vi.stubGlobal('crypto', cryptoStub);

vi.mock('vue-i18n', () => ({
	useI18n: () => ({
		t: vi.fn((key: string) => (key === 'loading' ? 'Loading...' : key)),
	}),
	createI18n: vi.fn(() => ({})),
}));

beforeEach(() => {
	setActivePinia(
		createTestingPinia({
			createSpy: vi.fn,
			stubActions: false,
		}),
	);
});

test('Returns tree list of same length', () => {
	const fieldsStore = useFieldsStore();

	fieldsStore.fields = [
		{
			collection: 'a',
			field: 'id',
			type: 'integer',
			schema: {},
			meta: {
				id: 1,
				collection: 'a',
				field: 'id',
				special: null,
				readonly: true,
				hidden: true,

				required: false,
Repository: directus/directus
File: app/src/components/v-form/components/form-field.vue (Vue)

Code before:
		disabledMenu?: boolean;
		direction?: string;
		version?: ContentVersion | null;
	}>(),
	{
		modelValue: undefined,
		initialValue: undefined,
		primaryKey: undefined,
		validationError: undefined,
		badge: undefined,
		direction: undefined,
	},
);

const emit = defineEmits(['toggle-batch', 'toggle-raw', 'unset', 'update:modelValue', 'setFieldValue']);

const { t } = useI18n();

const isDisabled = computed(() => {
	if (props.disabled) return true;
	if (props.field?.meta?.readonly === true) return true;
	if (props.batchMode && props.batchActive === false) return true;
	return false;
});

const computedNonEditable = computed(() => {
	if (props.nonEditable) return true;
	if (props.field?.meta?.non_editable === true) return true;
	return false;
});

const isLabelHidden = computed(() => {
	if ((props.batchMode || !!props.comparison) && !props.field.meta?.special?.includes('no-data')) return false;
	return props.field.hideLabel;
});

const { internalValue, isEdited, defaultValue } = useComputedValues();

const { showRaw, copyRaw, pasteRaw, onRawValueSubmit } = useRaw();

const validationMessage = computed(() => {
	if (!props.validationError) return null;

	if (props.validationError.code === 'RECORD_NOT_UNIQUE') {
		return t('validationError.unique');
	} else {
		return t(`validationError.${props.validationError.type}`, props.validationError);
	}
});

const validationPrefix = computed(() => {

Review comment (suggestion):

```suggestion
const isNonEditable = computed(() => {
```

Code after:
		disabledMenu?: boolean;
		direction?: string;
		version?: ContentVersion | null;
	}>(),
	{
		modelValue: undefined,
		initialValue: undefined,
		primaryKey: undefined,
		validationError: undefined,
		badge: undefined,
		direction: undefined,
	},
);

const emit = defineEmits(['toggle-batch', 'toggle-raw', 'unset', 'update:modelValue', 'setFieldValue']);

const { t } = useI18n();

const isDisabled = computed(() => {
	if (props.disabled) return true;
	if (props.field?.meta?.readonly === true) return true;
	if (props.batchMode && props.batchActive === false) return true;
	return false;
});

const isNonEditable = computed(() => {
	if (props.nonEditable) return true;
	if (props.field?.meta?.non_editable === true) return true;
	return false;
});

const isLabelHidden = computed(() => {
	if ((props.batchMode || !!props.comparison) && !props.field.meta?.special?.includes('no-data')) return false;
	return props.field.hideLabel;
});

const { internalValue, isEdited, defaultValue } = useComputedValues();

const { showRaw, copyRaw, pasteRaw, onRawValueSubmit } = useRaw();

const validationMessage = computed(() => {
	if (!props.validationError) return null;

	if (props.validationError.code === 'RECORD_NOT_UNIQUE') {
		return t('validationError.unique');
	} else {
		return t(`validationError.${props.validationError.type}`, props.validationError);
	}
});

const validationPrefix = computed(() => {
Repository: directus/directus
File: app/src/components/v-form/components/form-field.vue (Vue)

Code before:

			<FormFieldMenu
				:field="field"
				:model-value="internalValue"
				:initial-value="initialValue"
				:restricted="isDisabled"
				:disabled-options="disabledMenuOptions"
				@update:model-value="emitValue($event)"
				@unset="$emit('unset', $event)"
				@edit-raw="showRaw = true"
				@copy-raw="copyRaw"
				@paste-raw="pasteRaw"
			/>
		</VMenu>

		<div v-else-if="['full', 'fill'].includes(field.meta?.width ?? '') === false" class="label-spacer" />

		<FormFieldInterface
			:autofocus="autofocus"
			:model-value="internalValue"
			:field="field"
			:loading="loading"
			:batch-mode="batchMode"
			:batch-active="batchActive"
			:disabled="isDisabled"
			:non-editable="computedNonEditable"
			:primary-key="primaryKey"
			:raw-editor-enabled="rawEditorEnabled"
			:raw-editor-active="rawEditorActive"
			:direction="direction"
			:comparison="comparison"
			:comparison-active="comparisonActive"
			:version
			@update:model-value="emitValue($event)"
			@set-field-value="$emit('setFieldValue', $event)"
		/>

		<FormFieldRawEditor
			:show-modal="showRaw"
			:field="field"
			:current-value="internalValue"
			:disabled="isDisabled"
			@cancel="showRaw = false"
			@set-raw-value="onRawValueSubmit"
		/>

		<small v-if="field.meta && field.meta.note" v-md="{ value: field.meta.note, target: '_blank' }" class="type-note" />

		<small v-if="validationError" class="validation-error">
			<template v-if="showCustomValidationMessage">
				{{ field.meta?.validation_message }}

Review comment (suggestion):

```suggestion
			:non-editable="isNonEditable"
```

Code after:

			<FormFieldMenu
				:field="field"
				:model-value="internalValue"
				:initial-value="initialValue"
				:restricted="isDisabled"
				:disabled-options="disabledMenuOptions"
				@update:model-value="emitValue($event)"
				@unset="$emit('unset', $event)"
				@edit-raw="showRaw = true"
				@copy-raw="copyRaw"
				@paste-raw="pasteRaw"
			/>
		</VMenu>

		<div v-else-if="['full', 'fill'].includes(field.meta?.width ?? '') === false" class="label-spacer" />

		<FormFieldInterface
			:autofocus="autofocus"
			:model-value="internalValue"
			:field="field"
			:loading="loading"
			:batch-mode="batchMode"
			:batch-active="batchActive"
			:disabled="isDisabled"
			:non-editable="isNonEditable"
			:primary-key="primaryKey"
			:raw-editor-enabled="rawEditorEnabled"
			:raw-editor-active="rawEditorActive"
			:direction="direction"
			:comparison="comparison"
			:comparison-active="comparisonActive"
			:version
			@update:model-value="emitValue($event)"
			@set-field-value="$emit('setFieldValue', $event)"
		/>

		<FormFieldRawEditor
			:show-modal="showRaw"
			:field="field"
			:current-value="internalValue"
			:disabled="isDisabled"
			@cancel="showRaw = false"
			@set-raw-value="onRawValueSubmit"
		/>

		<small v-if="field.meta && field.meta.note" v-md="{ value: field.meta.note, target: '_blank' }" class="type-note" />

		<small v-if="validationError" class="validation-error">
			<template v-if="showCustomValidationMessage">
				{{ field.meta?.validation_message }}
Repository: directus/directus
File: api/src/utils/transformations.test.ts (TypeScript)

Code before:
			width: 64,
			height: 64,
			fit: 'contain',
		};

		const output = resolvePreset({ transformationParams }, inputFile);

		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 64,
					height: 64,
					fit: 'contain',
					withoutEnlargement: undefined,
				},
			],
		]);
	});

	test('Add resize transformation: withoutEnlargement clamps dimensions larger than original #22391', () => {
		// Test case from issue #22391:
		// Image is 1920x1080, but we request 2000x1200 with withoutEnlargement=true and a focal point
		// Without the fix, this would cause "bad extract area" error in Sharp
		// because the extraction region is calculated based on target dimensions (2000x1200)
		// but the resize step can't enlarge beyond the original (1920x1080)
		const transformationParams: TransformationParams = {
			key: 'test-larger-than-original',
			width: 2000, // larger than original width (1920)
			height: 1200, // larger than original height (1080)
			fit: 'cover',
			withoutEnlargement: true,
		};

		const output = resolvePreset(
			{ transformationParams },
			{ ...inputFile, focal_point_x: inputFile.width / 2, focal_point_y: inputFile.height / 2 },
		);

		// Dimensions should be clamped to original (1920x1080)
		// Since we're requesting 1920x1080 with a centered focal point on a 1920x1080 image,
		// the intermediate dimensions will be 1920x1080, and the extract will be the full image
		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 1920,
					height: 1080,
					fit: 'cover',
					withoutEnlargement: true,
				},

Review comment (suggestion):
```suggestion
	test('Resize transformation with withoutEnlargement clamps dimensions larger than original', () => {
```
We have git blame so we don't need all this extra context 👍 

Code after:
			width: 64,
			height: 64,
			fit: 'contain',
		};

		const output = resolvePreset({ transformationParams }, inputFile);

		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 64,
					height: 64,
					fit: 'contain',
					withoutEnlargement: undefined,
				},
			],
		]);
	});

	test('Resize transformation with withoutEnlargement clamps dimensions larger than original', () => {
		const transformationParams: TransformationParams = {
			key: 'test-larger-than-original',
			width: 2000, // larger than original width (1920)
			height: 1200, // larger than original height (1080)
			fit: 'cover',
			withoutEnlargement: true,
		};

		const output = resolvePreset(
			{ transformationParams },
			{ ...inputFile, focal_point_x: inputFile.width / 2, focal_point_y: inputFile.height / 2 },
		);

		// Dimensions should be clamped to original (1920x1080)
		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 1920,
					height: 1080,
					fit: 'cover',
					withoutEnlargement: true,
				},
			],
			['extract', { left: 0, top: 0, width: 1920, height: 1080 }],
		]);
	});

	test('Resize transformation with withoutEnlargement clamps only width when height is smaller', () => {
		const transformationParams: TransformationParams = {
Repository: directus/directus
File: api/src/utils/transformations.test.ts (TypeScript)

Code before:
				},
			],
			['extract', { left: 0, top: 0, width: 1920, height: 1080 }],
		]);
	});

	test('Add resize transformation: withoutEnlargement clamps only width when height is smaller #22391', () => {
		// Width is larger, height is smaller - only width should be clamped
		const transformationParams: TransformationParams = {
			key: 'test-width-larger',
			width: 2000, // larger than original width (1920)
			height: 500, // smaller than original height (1080)
			fit: 'cover',
			withoutEnlargement: true,
		};

		const output = resolvePreset(
			{ transformationParams },
			{ ...inputFile, focal_point_x: inputFile.width / 2, focal_point_y: inputFile.height / 2 },
		);

		// Width should be clamped to 1920, height stays at 500
		// With 1920x500 target and centered focal point on 1920x1080 image:
		// hRatio = 1080/500 = 2.16, wRatio = 1920/1920 = 1
		// wRatio < hRatio, so factor = 1, width = 1920, height = 1080/1 = 1080
		// Extract region: left = 0, top = (1080/2 - 500/2) = 290
		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 1920,
					height: 1080,
					fit: 'cover',
					withoutEnlargement: true,
				},
			],
			['extract', { left: 0, top: 290, width: 1920, height: 500 }],
		]);
	});

	test('Add resize transformation: withoutEnlargement with smaller dimensions unchanged', () => {
		// Both dimensions are smaller than original - should work normally
		const transformationParams: TransformationParams = {
			key: 'test-smaller',
			width: 800,
			height: 600,
			fit: 'cover',
			withoutEnlargement: true,
		};

		const output = resolvePreset(

Review comment (suggestion):
```suggestion
		// With 1920x500 target and centered focal point on 1920x1080 image
```

Code after:
		const transformationParams: TransformationParams = {
			key: 'test-width-larger',
			width: 2000, // larger than original width (1920)
			height: 500, // smaller than original height (1080)
			fit: 'cover',
			withoutEnlargement: true,
		};

		const output = resolvePreset(
			{ transformationParams },
			{ ...inputFile, focal_point_x: inputFile.width / 2, focal_point_y: inputFile.height / 2 },
		);

		// Width should be clamped to 1920, height stays at 500
		// With 1920x500 target and centered focal point on 1920x1080 image
		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 1920,
					height: 1080,
					fit: 'cover',
					withoutEnlargement: true,
				},
			],
			['extract', { left: 0, top: 290, width: 1920, height: 500 }],
		]);
	});

	test('Resize transformation with withoutEnlargement with smaller dimensions is unchanged', () => {
		const transformationParams: TransformationParams = {
			key: 'test-smaller',
			width: 800,
			height: 600,
			fit: 'cover',
			withoutEnlargement: true,
		};

		const output = resolvePreset(
			{ transformationParams },
			{ ...inputFile, focal_point_x: inputFile.width / 2, focal_point_y: inputFile.height / 2 },
		);

		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 1067,
					height: 600,
					fit: 'cover',
					withoutEnlargement: true,
Repository: directus/directus
File: api/src/utils/transformations.test.ts (TypeScript)

Code before:
		const output = resolvePreset(
			{ transformationParams },
			{ ...inputFile, focal_point_x: inputFile.width / 2, focal_point_y: inputFile.height / 2 },
		);

		// Width should be clamped to 1920, height stays at 500
		// With 1920x500 target and centered focal point on 1920x1080 image:
		// hRatio = 1080/500 = 2.16, wRatio = 1920/1920 = 1
		// wRatio < hRatio, so factor = 1, width = 1920, height = 1080/1 = 1080
		// Extract region: left = 0, top = (1080/2 - 500/2) = 290
		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 1920,
					height: 1080,
					fit: 'cover',
					withoutEnlargement: true,
				},
			],
			['extract', { left: 0, top: 290, width: 1920, height: 500 }],
		]);
	});

	test('Add resize transformation: withoutEnlargement with smaller dimensions unchanged', () => {
		// Both dimensions are smaller than original - should work normally
		const transformationParams: TransformationParams = {
			key: 'test-smaller',
			width: 800,
			height: 600,
			fit: 'cover',
			withoutEnlargement: true,
		};

		const output = resolvePreset(
			{ transformationParams },
			{ ...inputFile, focal_point_x: inputFile.width / 2, focal_point_y: inputFile.height / 2 },
		);

		// 1920x1080 -> 800x600
		// hRatio = 1080/600 = 1.8, wRatio = 1920/800 = 2.4
		// hRatio < wRatio, so factor = 1.8, height = 600, width = Math.round(1920/1.8) = 1067
		// Extract region: newXCenter = 960/1.8 = 533.33, left = Math.round(533.33 - 400) = 133, top = 0
		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 1067,
					height: 600,
					fit: 'cover',
					withoutEnlargement: true,

Review comment (suggestion):
```suggestion
	test('Resize transformation with withoutEnlargement with smaller dimensions is unchanged', () => {
```

Code after:
			[
				'resize',
				{
					width: 1920,
					height: 1080,
					fit: 'cover',
					withoutEnlargement: true,
				},
			],
			['extract', { left: 0, top: 290, width: 1920, height: 500 }],
		]);
	});

	test('Resize transformation with withoutEnlargement with smaller dimensions is unchanged', () => {
		const transformationParams: TransformationParams = {
			key: 'test-smaller',
			width: 800,
			height: 600,
			fit: 'cover',
			withoutEnlargement: true,
		};

		const output = resolvePreset(
			{ transformationParams },
			{ ...inputFile, focal_point_x: inputFile.width / 2, focal_point_y: inputFile.height / 2 },
		);

		expect(output).toStrictEqual([
			[
				'resize',
				{
					width: 1067,
					height: 600,
					fit: 'cover',
					withoutEnlargement: true,
				},
			],
			['extract', { left: 133, top: 0, width: 800, height: 600 }],
		]);
	});

	test('Resolve auto format (fallback)', () => {
		const transformationParams: TransformationParams = {
			format: 'auto',
		};

		const output = resolvePreset({ transformationParams }, inputFile);

		expect(output).toStrictEqual([['toFormat', 'jpg', { quality: undefined }]]);
	});
Repository: directus/directus
File: app/src/views/private/components/notifications-group.vue (Vue)

Code before:
	transform: translateX(0) scaleY(1) scaleX(1);
	opacity: 1;
}

.slide-fade-enter-from {
	transform: translateX(50px) scaleY(0) scaleX(0);
	transform-origin: right bottom;
	opacity: 0;
}

.slide-fade-leave-to {
	transform: translateX(50px) scaleX(0);
	transform-origin: right;
	opacity: 0;
	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
	transition-duration: 200ms;
}
</style>

<style lang="scss">
// relocate to fixed position when dialog is open to prevent it from being covered by the dialog
body:has(#dialog-outlet > .container.right) .notifications-group {
	position: fixed;
	z-index: 700;
}
</style>


Review comment (bug):
Let's avoid using global styles within components, they're really hard to debug. The better solution here is to use a flag in the notification store to indicate that a dialogue is currently present, and then make it fixed, or just make it fixed all the time if that would work. 

Code after:
}

.notification-item {
	transition: all 400ms cubic-bezier(0, 0, 0.2, 1.25);
}

.slide-fade-enter-active {
	transform: translateX(0) scaleY(1) scaleX(1);
	opacity: 1;
}

.slide-fade-enter-from {
	transform: translateX(50px) scaleY(0) scaleX(0);
	transform-origin: right bottom;
	opacity: 0;
}

.slide-fade-leave-to {
	transform: translateX(50px) scaleX(0);
	transform-origin: right;
	opacity: 0;
	transition-timing-function: cubic-bezier(0.4, 0, 1, 1);
	transition-duration: 200ms;
}
</style>
Repository: directus/directus
File: app/src/stores/server.ts (TypeScript)

Code before:
import { i18n } from '@/lang';
import { AuthProvider } from '@/types/login';

export type Info = {
	project: null | {
		project_name: string | null;
		project_descriptor: string | null;
		project_logo: string | null;
		project_color: string | null;
		default_language: string | null;
		default_appearance: 'light' | 'dark' | 'auto';
		default_theme_light: string | null;
		default_theme_dark: string | null;
		theme_light_overrides: Record<string, unknown> | null;
		theme_dark_overrides: Record<string, unknown> | null;
		public_foreground: string | null;
		public_background: { id: string; type: string } | null;
		public_favicon: string | null;
		public_note: string | null;
		custom_css: string | null;
		public_registration: boolean | null;
		public_registration_verify_email: boolean | null;
	};
	mcp_enabled: boolean;
	ai_enabled: boolean;
	files?: Record<string, unknown>;
	setupCompleted: boolean;
	rateLimit?:
		| false
		| {
				points: number;
				duration: number;
		  };
	rateLimitGlobal?:
		| false
		| {
				points: number;
				duration: number;
		  };
	queryLimit?: {
		default: number;
		max: number;
	};
	websocket?:
		| false
		| {
				logs?:
					| false
					| {
							allowedLogLevels: Record<string, number>;
					  };

Review comment (suggestion):
Could we type it as:
```ts
files?: {
  mimeTypeAllowList: string
}
```
or there is a limitation somewhere? That would allow us to remove the cast in [add-new.vue](https://github.com/directus/directus/pull/26646/changes#diff-40c66eb282645c2e526a94526727b6a6fdacc1dca0b321c7b156b6e007557848R25)

Code after:
import { i18n } from '@/lang';
import { AuthProvider } from '@/types/login';

export type Info = {
	project: null | {
		project_name: string | null;
		project_descriptor: string | null;
		project_logo: string | null;
		project_color: string | null;
		default_language: string | null;
		default_appearance: 'light' | 'dark' | 'auto';
		default_theme_light: string | null;
		default_theme_dark: string | null;
		theme_light_overrides: Record<string, unknown> | null;
		theme_dark_overrides: Record<string, unknown> | null;
		public_foreground: string | null;
		public_background: { id: string; type: string } | null;
		public_favicon: string | null;
		public_note: string | null;
		custom_css: string | null;
		public_registration: boolean | null;
		public_registration_verify_email: boolean | null;
	};
	mcp_enabled: boolean;
	ai_enabled: boolean;
	files?: {
		mimeTypeAllowList: string;
	};
	setupCompleted: boolean;
	rateLimit?:
		| false
		| {
				points: number;
				duration: number;
		  };
	rateLimitGlobal?:
		| false
		| {
				points: number;
				duration: number;
		  };
	queryLimit?: {
		default: number;
		max: number;
	};
	websocket?:
		| false
		| {
				logs?:
					| false
					| {