Prevent nested ternary expressions (#18376)

Co-authored-by: Pascal Jufer <pascal-jufer@bluewin.ch>

.changeset/breezy-numbers-brake.md

@@ -0,0 +1,7 @@
+---
+"@directus/app": patch
+"@directus/extensions-sdk": patch
+"tests-blackbox": patch
+---
+
+Added `no-nested-ternary` eslint rule to ensure better readability in the code base

.eslintrc.js

@@ -37,6 +37,7 @@ const defaultRules = {
 		{ blankLine: 'any', prev: ['export', 'import'], next: ['export', 'import'] },
 	],
 	'lines-between-class-members': ['error', 'always', { exceptAfterSingleLine: true }],
+	'no-nested-ternary': 'error',
 };
 
 module.exports = {

app/src/components/v-template-input.vue

@@ -228,8 +228,13 @@ function parseHTML(innerText?: string, isDirectInput = false) {
 	}
 
 	let newHTML = input.value.innerText;
+	let caretPos = 0;
 
-	const caretPos = isDirectInput ? previousCaretPos : window.getSelection()?.rangeCount ? position(input.value).pos : 0;
+	if (isDirectInput) {
+		caretPos = previousCaretPos;
+	} else if (window.getSelection()?.rangeCount) {
+		caretPos = position(input.value).pos;
+	}
 
 	let lastMatchIndex = 0;
 	const matches = newHTML.match(new RegExp(`${props.captureGroup}(?!</mark>)`, 'gi'));

app/src/interfaces/input-rich-text-html/useMedia.ts

@@ -124,7 +124,7 @@ export default function useMedia(editor: Ref<any>, imageToken: Ref<string | unde
 		if (newEmbed === '') {
 			mediaSelection.value = null;
 		} else {
-			const tag = /<(video|audio|iframe)/g.exec(newEmbed)?.[1];
+			const tag = /<(video|audio|iframe)/g.exec(newEmbed)?.[1] as 'video' | 'audio' | 'iframe' | undefined;
 			const sourceUrl = /src="(.*?)"/g.exec(newEmbed)?.[1] || undefined;
 			const width = Number(/width="(.*?)"/g.exec(newEmbed)?.[1]) || undefined;
 			const height = Number(/height="(.*?)"/g.exec(newEmbed)?.[1]) || undefined;
@@ -136,7 +136,7 @@ export default function useMedia(editor: Ref<any>, imageToken: Ref<string | unde
 			const previewUrl = replaceUrlAccessToken(sourceUrl, imageToken.value || getToken());
 
 			mediaSelection.value = {
-				tag: tag === 'audio' ? 'audio' : tag === 'iframe' ? 'iframe' : 'video',
+				tag,
 				sourceUrl,
 				width,
 				height,

app/src/interfaces/select-color/select-color.vue

@@ -304,8 +304,11 @@ function useColor() {
 
 	const rgb = computed<number[]>({
 		get() {
-			const arr = color.value !== null ? color.value.rgb().array() : props.opacity ? [0, 0, 0, 1] : [0, 0, 0];
+			if (color.value !== null) {
-			return arr.length === 4 ? [...arr.slice(0, -1).map(Math.round), arr[3]] : arr.map(Math.round);
+				return roundColorValues(color.value.rgb().array());
+			}
+
+			return roundColorValues(props.opacity ? [0, 0, 0, 1] : [0, 0, 0]);
 		},
 		set(newRGB) {
 			setColor(Color.rgb(newRGB).alpha(newRGB.length === 4 ? newRGB[3] : 1));
@@ -314,8 +317,11 @@ function useColor() {
 
 	const hsl = computed<number[]>({
 		get() {
-			const arr = color.value !== null ? color.value.hsl().array() : props.opacity ? [0, 0, 0, 1] : [0, 0, 0];
+			if (color.value !== null) {
-			return arr.length === 4 ? [...arr.slice(0, -1).map(Math.round), arr[3]] : arr.map(Math.round);
+				return roundColorValues(color.value.hsl().array());
+			}
+
+			return roundColorValues(props.opacity ? [0, 0, 0, 1] : [0, 0, 0]);
 		},
 		set(newHSL) {
 			setColor(Color.hsl(newHSL).alpha(newHSL.length === 4 ? newHSL[3] : 1));
@@ -361,6 +367,15 @@ function useColor() {
 			emit('input', getHexa());
 		}
 	}
+
+	function roundColorValues(arr: number[]): number[] {
+		if (arr.length === 4) {
+			// Do not round the opacity
+			return [...arr.slice(0, -1).map((x) => Math.round(x)), arr[3]];
+		}
+
+		return arr.map((x) => Math.round(x));
+	}
 }
 </script>
 

packages/extensions-sdk/src/cli/commands/helpers/generate-bundle-entrypoint.ts

@@ -9,28 +9,33 @@ export default function generateBundleEntrypoint(mode: 'app' | 'api', entries: E
 
 	const entriesForTypes = entries.filter((entry) => isIn(entry.type, types));
 
-	const imports = entriesForTypes.map(
+	const imports = entriesForTypes.map((entry, index) => {
-		(entry, i) =>
+		let entryPath: string;
-			`import e${i} from './${pathToRelativeUrl(
-				path.resolve(
-					isTypeIn(entry, HYBRID_EXTENSION_TYPES)
-						? mode === 'app'
-							? entry.source.app
-							: entry.source.api
-						: entry.source
-				)
-			)}';`
-	);
 
-	const exports = types.map(
+		if (isTypeIn(entry, HYBRID_EXTENSION_TYPES)) {
-		(type) =>
+			entryPath = mode === 'app' ? entry.source.app : entry.source.api;
-			`export const ${pluralize(type)} = [${entriesForTypes
+		} else {
-				.map((entry, i) =>
+			entryPath = entry.source;
-					entry.type === type ? (mode === 'app' ? `e${i}` : `{name:'${entry.name}',config:e${i}}`) : null
+		}
-				)
+
-				.filter((e): e is string => e !== null)
+		return `import e${index} from './${pathToRelativeUrl(path.resolve(entryPath))}';`;
-				.join(',')}];`
+	});
-	);
+
+	const exports = types.map((type) => {
+		const entries = entriesForTypes.reduce<string[]>((result, entry, index) => {
+			if (entry.type !== type) return result;
+
+			if (mode === 'app') {
+				result.push(`e${index}`);
+			} else {
+				result.push(`{name:'${entry.name}',config:e${index}}`);
+			}
+
+			return result;
+		}, []);
+
+		return `export const ${pluralize(type)} = [${entries.join(',')}];`;
+	});
 
 	return `${imports.join('')}${exports.join('')}`;
 }

tests/blackbox/common/config.ts

@@ -32,11 +32,11 @@ const knexConfig = {
 
 const allowedLogLevels = ['trace', 'debug', 'info', 'warn', 'error', 'fatal'];
 
-const logLevel = process.env.TEST_SAVE_LOGS
+let logLevel = 'error';
-	? allowedLogLevels.includes(process.env.TEST_SAVE_LOGS)
+
-		? process.env.TEST_SAVE_LOGS
+if (process.env.TEST_SAVE_LOGS) {
-		: 'info'
+	logLevel = allowedLogLevels.includes(process.env.TEST_SAVE_LOGS) ? process.env.TEST_SAVE_LOGS : 'info';
-	: 'error';
+}
 
 const directusAuthConfig = {
 	AUTH_PROVIDERS: 'saml',

tests/blackbox/schema/timezone/timezone-changed-node-tz-america.test.ts

@@ -30,13 +30,16 @@ describe('schema', () => {
 	const currentTzOffset = new Date().getTimezoneOffset();
 	const isWindows = ['win32', 'win64'].includes(process.platform);
 	const newTzOffset = currentTzOffset !== 180 ? 180 : 360;
+	let newTz: string;
 
 	// Different timezone format for Windows
-	const newTz = isWindows
+	if (isWindows) {
-		? String(newTzOffset * 60)
+		newTz = String(newTzOffset * 60);
-		: newTzOffset === 180
+	} else if (newTzOffset === 180) {
-		? 'America/Sao_Paulo'
+		newTz = 'America/Sao_Paulo';
-		: 'America/Mexico_City';
+	} else {
+		newTz = 'America/Mexico_City';
+	}
 
 	const sampleDates: SchemaTimezoneTypesObject[] = [];
 

tests/blackbox/schema/timezone/timezone-changed-node-tz-asia.test.ts

@@ -31,9 +31,16 @@ describe('schema', () => {
 	const isWindows = ['win32', 'win64'].includes(process.platform);
 
 	const newTzOffset = currentTzOffset !== -540 ? -540 : -240;
+	let newTz: string;
 
 	// Different timezone format for Windows
-	const newTz = isWindows ? String(newTzOffset * 60) : newTzOffset === -540 ? 'Asia/Seoul' : 'Asia/Dubai';
+	if (isWindows) {
+		newTz = String(newTzOffset * 60);
+	} else if (newTzOffset === -540) {
+		newTz = 'Asia/Seoul';
+	} else {
+		newTz = 'Asia/Dubai';
+	}
 
 	const sampleDates: SchemaTimezoneTypesObject[] = [];