ronantakizawa/codereview-bench huggingface dataset:
Repository: directus/directus
File: app/src/interfaces/collection-item-multiple-dropdown/index.ts (TypeScript)

Code before:
import { defineInterface } from '@directus/extensions';
import InterfaceSimpleDropdownM2o from './collection-item-multiple-dropdown.vue';
import PreviewSVG from './preview.svg?raw';

export default defineInterface({
	id: 'collection-item-multiple-dropdown',
	name: '$t:interfaces.collection-item-multiple-dropdown.collection-item-multiple-dropdown',
	description: '$t:interfaces.collection-item-multiple-dropdown.description',
	icon: 'arrow_right_alt',
	component: InterfaceSimpleDropdownM2o,
	types: ['json'],
	options: [
		{
			field: 'selectedCollection',
			type: 'string',
			name: '$t:collection',
			meta: {
				required: true,
				interface: 'system-collection',
				options: {
					includeSystem: true,
					includeSingleton: false,
				},
				width: 'half',
			},
		},
		{

Review comment (suggestion):
Let's call it what it is.

```suggestion
import CollectionItemMultipleDropdown from './collection-item-multiple-dropdown.vue';
```

Code after:
import { defineInterface } from '@directus/extensions';
import CollectionItemMultipleDropdown from './collection-item-multiple-dropdown.vue';
import PreviewSVG from './preview.svg?raw';

export default defineInterface({
	id: 'collection-item-multiple-dropdown',
	name: '$t:interfaces.collection-item-multiple-dropdown.collection-item-multiple-dropdown',
	description: '$t:interfaces.collection-item-multiple-dropdown.description',
	icon: 'arrow_right_alt',
	component: CollectionItemMultipleDropdown,
	types: ['json'],
	options: [
		{
			field: 'selectedCollection',
			type: 'string',
			name: '$t:collection',
			meta: {
				required: true,
				interface: 'system-collection',
				options: {
					includeSystem: true,
					includeSingleton: false,
				},
				width: 'half',
			},
		},
		{
Repository: directus/directus
File: app/src/interfaces/collection-item-multiple-dropdown/index.ts (TypeScript)

Code before:
import { defineInterface } from '@directus/extensions';
import InterfaceSimpleDropdownM2o from './collection-item-multiple-dropdown.vue';
import PreviewSVG from './preview.svg?raw';

export default defineInterface({
	id: 'collection-item-multiple-dropdown',
	name: '$t:interfaces.collection-item-multiple-dropdown.collection-item-multiple-dropdown',
	description: '$t:interfaces.collection-item-multiple-dropdown.description',
	icon: 'arrow_right_alt',
	component: InterfaceSimpleDropdownM2o,
	types: ['json'],
	options: [
		{
			field: 'selectedCollection',
			type: 'string',
			name: '$t:collection',
			meta: {
				required: true,
				interface: 'system-collection',
				options: {
					includeSystem: true,
					includeSingleton: false,
				},
				width: 'half',
			},
		},
		{
			field: 'template',
			name: '$t:display_template',
			type: 'string',
			meta: {
				interface: 'system-display-template',
				width: 'full',
				options: {
					collectionField: 'selectedCollection',

Review comment (suggestion):
See https://github.com/directus/directus/pull/26106#discussion_r2494299709

```suggestion
	component: CollectionItemMultipleDropdown,
```

Code after:
import { defineInterface } from '@directus/extensions';
import CollectionItemMultipleDropdown from './collection-item-multiple-dropdown.vue';
import PreviewSVG from './preview.svg?raw';

export default defineInterface({
	id: 'collection-item-multiple-dropdown',
	name: '$t:interfaces.collection-item-multiple-dropdown.collection-item-multiple-dropdown',
	description: '$t:interfaces.collection-item-multiple-dropdown.description',
	icon: 'arrow_right_alt',
	component: CollectionItemMultipleDropdown,
	types: ['json'],
	options: [
		{
			field: 'selectedCollection',
			type: 'string',
			name: '$t:collection',
			meta: {
				required: true,
				interface: 'system-collection',
				options: {
					includeSystem: true,
					includeSingleton: false,
				},
				width: 'half',
			},
		},
		{
			field: 'template',
			name: '$t:display_template',
			type: 'string',
			meta: {
				interface: 'system-display-template',
				width: 'full',
				options: {
					collectionField: 'selectedCollection',
Repository: directus/directus
File: app/src/interfaces/collection-item-multiple-dropdown/collection-item-multiple-dropdown.vue (Vue)

Code before:
<script setup lang="ts">
import api from '@/api';
import { useCollectionsStore } from '@/stores/collections';
import { useFieldsStore } from '@/stores/fields';
import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
import { hideDragImage } from '@/utils/hide-drag-image';
import { unexpectedError } from '@/utils/unexpected-error';
import DrawerCollection from '@/views/private/components/drawer-collection.vue';
import { Filter } from '@directus/types';
import { getEndpoint, getFieldsFromTemplate } from '@directus/utils';
import { computed, ref, toRefs, unref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import Draggable from 'vuedraggable';

type ValueItem = {
	key: string | number;
	collection: string;
};

const props = withDefaults(
	defineProps<{
		value?: ValueItem[] | null;
		selectedCollection: string;
		template?: string | null;
		disabled?: boolean;
		filter?: Filter | null;
	}>(),
	{
		value: () => [],
		template: null,
		filter: null,
	},
);

const { t } = useI18n();

const emit = defineEmits(['input']);

const { selectedCollection, template } = toRefs(props);

const collectionsStore = useCollectionsStore();

Review comment (suggestion):
Let’s use the `PrimaryKey` type, which can be imported from `@directus/types`.

```suggestion
	key: PrimaryKey;
```

Code after:
<script setup lang="ts">
import api from '@/api';
import { useCollectionsStore } from '@/stores/collections';
import { useFieldsStore } from '@/stores/fields';
import { adjustFieldsForDisplays } from '@/utils/adjust-fields-for-displays';
import { hideDragImage } from '@/utils/hide-drag-image';
import { unexpectedError } from '@/utils/unexpected-error';
import DrawerCollection from '@/views/private/components/drawer-collection.vue';
import { Filter, PrimaryKey } from '@directus/types';
import { getEndpoint, getFieldsFromTemplate } from '@directus/utils';
import { computed, ref, toRefs, unref, watch } from 'vue';
import { useI18n } from 'vue-i18n';
import Draggable from 'vuedraggable';

type ValueItem = {
	key: PrimaryKey;
	collection: string;
};

const props = withDefaults(
	defineProps<{
		value?: ValueItem[] | null;
		selectedCollection: string;
		template?: string | null;
		disabled?: boolean;
		filter?: Filter | null;
	}>(),
	{
		value: () => [],
		template: null,
		filter: null,
	},
);

const { t } = useI18n();

const emit = defineEmits(['input']);

const { selectedCollection, template } = toRefs(props);

const collectionsStore = useCollectionsStore();
Repository: directus/directus
File: app/src/interfaces/collection-item-multiple-dropdown/collection-item-multiple-dropdown.vue (Vue)

Code before:
	}

	if (!unref(selectedCollection) || !primaryKey.value) return;

	const fields = new Set(requiredFields.value);
	fields.add(primaryKey.value);

	try {
		const response = await api.get(getEndpoint(unref(selectedCollection)), {
			params: {
				fields: Array.from(fields),
				filter: { [primaryKey.value]: { _in: selectedKeys.value } },
			},
		});

		const fetchedItems = response.data.data ?? [];

		displayItems.value = selectedKeys.value
			.map((key) => fetchedItems.find((item: any) => item[primaryKey.value] === key))
			.filter(Boolean);
	} catch (error) {
		unexpectedError(error);
	}
}

function onSelection(selectedIds: (number | string)[] | null) {
	selectDrawerOpen.value = false;

	if (!selectedIds || selectedIds.length === 0) {
		values.value = [];
		return;
	}

	const newValues = selectedIds.map((key) => ({
		key,
		collection: unref(selectedCollection),
	}));

	values.value = newValues;
}

function removeItem(item: Record<string, any>) {
	const keyToRemove = item[primaryKey.value];
	values.value = values.value.filter((v) => v.key !== keyToRemove);
}

function onSort(sortedItems: Record<string, any>[]) {
	displayItems.value = sortedItems;

	const newValues = sortedItems.map((item) => ({
		key: item[primaryKey.value],

Review comment (suggestion):
Let’s use the PrimaryKey type — see the other [comment](https://github.com/directus/directus/pull/26106#discussion_r2494310292).

```suggestion
function onSelection(selectedIds: PrimaryKey[] | null) {
```

Code after:
		return;
	}

	if (!unref(selectedCollection) || !primaryKey.value) return;

	const fields = new Set(requiredFields.value);
	fields.add(primaryKey.value);

	try {
		loading.value = true;

		const response = await api.get(getEndpoint(unref(selectedCollection)), {
			params: {
				fields: Array.from(fields),
				filter: { [primaryKey.value]: { _in: selectedKeys.value } },
			},
		});

		const fetchedItems = response.data.data ?? [];

		displayItems.value = selectedKeys.value
			.map((key) => fetchedItems.find((item: any) => item[primaryKey.value] === key))
			.filter(Boolean);
	} catch (error) {
		unexpectedError(error);
	} finally {
		loading.value = false;
	}
}

function onSelection(selectedIds: PrimaryKey[] | null) {
	selectDrawerOpen.value = false;

	if (!selectedIds || selectedIds.length === 0) {
		values.value = [];
		return;
	}

	const newValues = selectedIds.map((key) => ({
		key,
		collection: unref(selectedCollection),
	}));

	values.value = newValues;
}

function removeItem(item: Record<string, any>) {
	const keyToRemove = item[primaryKey.value];
	values.value = values.value.filter((v) => v.key !== keyToRemove);
}
Repository: directus/directus
File: app/src/interfaces/collection-item-multiple-dropdown/collection-item-multiple-dropdown.vue (Vue)

Code before:
			:set-data="hideDragImage"
			v-bind="{ 'force-fallback': true }"
			@update:model-value="onSort($event)"
		>
			<template #item="{ element }">
				<v-list-item block :disabled="disabled" :dense="displayItems.length > 4">
					<v-icon v-if="!disabled" name="drag_handle" class="drag-handle" left @click.stop="() => {}" />

					<render-template
						:collection="selectedCollection"
						:item="element"
						:template="displayTemplate"
						class="preview"
					/>

					<div class="spacer" />

					<div class="item-actions">
						<v-remove v-if="!disabled" deselect @action="removeItem(element)" />
					</div>
				</v-list-item>
			</template>
		</draggable>

		<div class="actions">
			<v-button v-if="!disabled" @click="selectDrawerOpen = true">
				{{ t('select_item') }}
			</v-button>
		</div>

		<drawer-collection
			v-model:active="selectDrawerOpen"
			:collection="selectedCollection"
			:selection="selectedKeys"
			:filter="filter!"
			multiple
			@input="onSelection"
			@update:active="selectDrawerOpen = false"
		/>
	</div>
</template>

<style lang="scss" scoped>
@use '@/styles/mixins';

.v-list {
	@include mixins.list-interface($deleteable: true);
}

.v-list-item {
	&:focus-within,

Review comment (suggestion):
Let’s disable the button while keeping it visible, when the interface is disabled.

```suggestion
			<v-button :disabled="disabled" @click="selectDrawerOpen = true">
```

Code after:
				v-for="num in displayItems.length"
				:key="num"
				:type="displayItems.length > 4 ? 'block-list-item-dense' : 'block-list-item'"
			/>
		</template>

		<draggable
			v-else
			:model-value="displayItems"
			tag="v-list"
			:item-key="primaryKey"
			handle=".drag-handle"
			:disabled="disabled"
			:set-data="hideDragImage"
			v-bind="{ 'force-fallback': true }"
			@update:model-value="onSort($event)"
		>
			<template #item="{ element }">
				<v-list-item block :disabled="disabled" :dense="displayItems.length > 4">
					<v-icon v-if="!disabled" name="drag_handle" class="drag-handle" left @click.stop="() => {}" />

					<render-template
						:collection="selectedCollection"
						:item="element"
						:template="displayTemplate"
						class="preview"
					/>

					<div class="spacer" />

					<div class="item-actions">
						<v-remove v-if="!disabled" deselect @action="removeItem(element)" />
					</div>
				</v-list-item>
			</template>
		</draggable>

		<div class="actions">
			<v-button :disabled="disabled" @click="selectDrawerOpen = true">
				{{ t('select_item') }}
			</v-button>
		</div>

		<drawer-collection
			v-model:active="selectDrawerOpen"
			:collection="selectedCollection"
			:selection="selectedKeys"
			:filter="filter!"
			multiple
			@input="onSelection"
			@update:active="selectDrawerOpen = false"
Repository: directus/directus
File: api/src/services/import-export.ts (TypeScript)

Code before:
									break;
								}
							}

							if (errorTracker.shouldStop()) {
								saveQueue.kill();
								destroyStream(stream);
								destroyStream(extractJSON);
								reject();
							}

							return;
						}
					});

					stream.pipe(extractJSON);

					extractJSON.on('data', ({ value }: Record<string, any>) => {
						if (isSingleton && rowNumber > 1) {
							saveQueue.kill();
							destroyStream(stream);
							destroyStream(extractJSON);

							reject(
								new InvalidPayloadError({
									reason: `Cannot import multiple records into singleton collection "${collection}". Only one record is allowed.`,
								}),
							);

							return;
						}

						saveQueue.push({ data: value, rowNumber: rowNumber++ });
					});

					extractJSON.on('error', (err: Error) => {
						destroyStream(stream);
						destroyStream(extractJSON);

						reject(new InvalidPayloadError({ reason: err.message }));
					});

					extractJSON.on('end', () => {
						// In case of empty JSON file
						if (!saveQueue.started) return resolve();

						saveQueue.drain(() => {
							if (errorTracker.hasErrors()) {
								return reject();
							}


Review comment (suggestion):
Serious nitpick here, but we don't have an invalid payloads that are two sentences, thus they never require punctuation. Having two sentences, then requires two fullstops and having two fullstops results in this

<img width="501" height="83" alt="image" src="https://github.com/user-attachments/assets/6f5251e8-57cf-4532-a771-b5b18b912090" />


```suggestion
									reason: `Cannot import multiple records into singleton collection "${collection}". Only one record is allowed`,
```

Code after:
									break;
								}
							}

							if (errorTracker.shouldStop()) {
								saveQueue.kill();
								destroyStream(stream);
								destroyStream(extractJSON);
								reject();
							}

							return;
						}
					});

					stream.pipe(extractJSON);

					extractJSON.on('data', ({ value }: Record<string, any>) => {
						if (isSingleton && rowNumber > 1) {
							saveQueue.kill();
							destroyStream(stream);
							destroyStream(extractJSON);

							reject(
								new InvalidPayloadError({
									reason: `Cannot import multiple records into singleton collection ${collection}`,
								}),
							);

							return;
						}

						saveQueue.push({ data: value, rowNumber: rowNumber++ });
					});

					extractJSON.on('error', (err: Error) => {
						destroyStream(stream);
						destroyStream(extractJSON);

						reject(new InvalidPayloadError({ reason: err.message }));
					});

					extractJSON.on('end', () => {
						// In case of empty JSON file
						if (!saveQueue.started) return resolve();

						saveQueue.drain(() => {
							if (errorTracker.hasErrors()) {
								return reject();
							}
Repository: directus/directus
File: api/src/services/import-export.ts (TypeScript)

Code before:
											if (value.length === 0) return;

											try {
												const parsedJson = parseJSON(value);

												if (typeof parsedJson === 'number') {
													return value;
												}

												return parsedJson;
											} catch {
												return value;
											}
										},
									}),
								)
								.on('data', (obj: Record<string, unknown>) => {
									rowNumber++;

									if (isSingleton && rowNumber > 1) {
										saveQueue.kill();
										cleanup(true);

										reject(
											new InvalidPayloadError({
												reason: `Cannot import multiple records into singleton collection "${collection}". Only one record is allowed.`,
											}),
										);

										return;
									}

									const result: Record<string, unknown> = {};

									for (const field in obj) {
										if (obj[field] !== undefined) {
											set(result, field, obj[field]);
										}
									}

									saveQueue.push({ data: result, rowNumber });
								})
								.on('error', (error: Error) => {
									cleanup();
									reject(new InvalidPayloadError({ reason: error.message }));
								})
								.on('end', () => {
									// In case of empty CSV file
									if (!saveQueue.started) {
										cleanup(false);


Review comment (suggestion):
```suggestion
												reason: `Cannot import multiple records into singleton collection "${collection}"`,
```

Same as above

Code after:
											if (value.length === 0) return;

											try {
												const parsedJson = parseJSON(value);

												if (typeof parsedJson === 'number') {
													return value;
												}

												return parsedJson;
											} catch {
												return value;
											}
										},
									}),
								)
								.on('data', (obj: Record<string, unknown>) => {
									rowNumber++;

									if (isSingleton && rowNumber > 1) {
										saveQueue.kill();
										cleanup(true);

										reject(
											new InvalidPayloadError({
												reason: `Cannot import multiple records into singleton collection ${collection}`,
											}),
										);

										return;
									}

									const result: Record<string, unknown> = {};

									for (const field in obj) {
										if (obj[field] !== undefined) {
											set(result, field, obj[field]);
										}
									}

									saveQueue.push({ data: result, rowNumber });
								})
								.on('error', (error: Error) => {
									cleanup();
									reject(new InvalidPayloadError({ reason: error.message }));
								})
								.on('end', () => {
									// In case of empty CSV file
									if (!saveQueue.started) {
										cleanup(false);
Repository: directus/directus
File: app/src/ai/components/ai-model-selector.vue (Vue)

Code before:
}

.select-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--fast) var(--transition);
}

[data-state='open'] .select-icon {
	transform: rotate(180deg);
}

:deep(.select-content) {
	z-index: 600;
	min-inline-size: 100px;
	background-color: var(--theme--popover--menu--background);
	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
	border-radius: var(--theme--border-radius);
	box-shadow: var(--theme--popover--menu--box-shadow);
	transform-origin: var(--reka-select-content-transform-origin);
	opacity: 1;
	transform: scale(1);
	transition:
		opacity 150ms var(--transition-in),
		transform 150ms var(--transition-in);

	&[data-state='closed'] {
		opacity: 0;
		transform: scale(0.95);
		transition:
			opacity 150ms var(--transition-out),
			transform 150ms var(--transition-out);
	}
}

:deep(.select-item) {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: 40px;
	padding: 8px;
	color: var(--theme--foreground);
	background-color: transparent;
	border-radius: var(--theme--border-radius);
	cursor: pointer;
	outline: none;
	user-select: none;
	transition: background-color var(--fast) var(--transition);

	&:hover {

Review comment (suggestion):
```suggestion
		opacity var(--fast) var(--transition-in),
		transform var(--fast) var(--transition-in);
```

Code after:
}

.select-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	transition: transform var(--fast) var(--transition);
}

[data-state='open'] .select-icon {
	transform: rotate(180deg);
}

:deep(.select-content) {
	z-index: 600;
	min-inline-size: 100px;
	background-color: var(--theme--popover--menu--background);
	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
	border-radius: var(--theme--border-radius);
	box-shadow: var(--theme--popover--menu--box-shadow);
	transform-origin: var(--reka-select-content-transform-origin);
	opacity: 1;
	transform: scale(1);
	transition:
		opacity var(--fast) var(--transition-in),
		transform var(--fast) var(--transition-in);

	&[data-state='closed'] {
		opacity: 0;
		transform: scale(0.95);
		transition:
			opacity var(--fast) var(--transition-out),
			transform var(--fast) var(--transition-out);
	}
}

:deep(.select-item) {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: 40px;
	padding: 8px;
	color: var(--theme--foreground);
	background-color: transparent;
	border-radius: var(--theme--border-radius);
	cursor: pointer;
	outline: none;
	user-select: none;
	transition: background-color var(--fast) var(--transition);

	&:hover {
Repository: directus/directus
File: app/src/ai/components/ai-model-selector.vue (Vue)

Code before:
}

[data-state='open'] .select-icon {
	transform: rotate(180deg);
}

:deep(.select-content) {
	z-index: 600;
	min-inline-size: 100px;
	background-color: var(--theme--popover--menu--background);
	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
	border-radius: var(--theme--border-radius);
	box-shadow: var(--theme--popover--menu--box-shadow);
	transform-origin: var(--reka-select-content-transform-origin);
	opacity: 1;
	transform: scale(1);
	transition:
		opacity 150ms var(--transition-in),
		transform 150ms var(--transition-in);

	&[data-state='closed'] {
		opacity: 0;
		transform: scale(0.95);
		transition:
			opacity 150ms var(--transition-out),
			transform 150ms var(--transition-out);
	}
}

:deep(.select-item) {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: 40px;
	padding: 8px;
	color: var(--theme--foreground);
	background-color: transparent;
	border-radius: var(--theme--border-radius);
	cursor: pointer;
	outline: none;
	user-select: none;
	transition: background-color var(--fast) var(--transition);

	&:hover {
		background-color: var(--theme--background-normal);
	}

	&[data-highlighted] {
		background-color: var(--theme--background-normal);
	}


Review comment (suggestion):
```suggestion
			opacity var(--fast) var(--transition-out),
			transform var(--fast) var(--transition-out);
```

Code after:
}

[data-state='open'] .select-icon {
	transform: rotate(180deg);
}

:deep(.select-content) {
	z-index: 600;
	min-inline-size: 100px;
	background-color: var(--theme--popover--menu--background);
	border: var(--theme--border-width) solid var(--theme--form--field--input--border-color);
	border-radius: var(--theme--border-radius);
	box-shadow: var(--theme--popover--menu--box-shadow);
	transform-origin: var(--reka-select-content-transform-origin);
	opacity: 1;
	transform: scale(1);
	transition:
		opacity var(--fast) var(--transition-in),
		transform var(--fast) var(--transition-in);

	&[data-state='closed'] {
		opacity: 0;
		transform: scale(0.95);
		transition:
			opacity var(--fast) var(--transition-out),
			transform var(--fast) var(--transition-out);
	}
}

:deep(.select-item) {
	position: relative;
	display: flex;
	align-items: center;
	min-block-size: 40px;
	padding: 8px;
	color: var(--theme--foreground);
	background-color: transparent;
	border-radius: var(--theme--border-radius);
	cursor: pointer;
	outline: none;
	user-select: none;
	transition: background-color var(--fast) var(--transition);

	&:hover {
		background-color: var(--theme--background-normal);
	}

	&[data-highlighted] {
		background-color: var(--theme--background-normal);
	}