@adyen/eslint-plugin-bento 2.8.0 → 2.9.0

package/rules/deprecation-filter-bar-deprecated-props/__tests__/eslint.config.js

@@ -0,0 +1,25 @@
+// eslint.config.js
+const { defineConfig } = require('eslint/config');
+const vueParser = require('vue-eslint-parser');
+const tsParser = require('@typescript-eslint/parser');
+const adyenBento = require('@adyen/eslint-plugin-bento');
+
+module.exports = defineConfig([
+    {
+        languageOptions: {
+            ecmaVersion: 'latest',
+            sourceType: 'module',
+            parser: vueParser,
+            parserOptions: {
+                parser: tsParser,
+            },
+        },
+        plugins: {
+            '@adyen/bento': adyenBento,
+        },
+        rules: {
+            '@adyen/bento/deprecation-filter-bar-deprecated-props': 'warn',
+        },
+        files: ['**/*.vue'],
+    },
+]);

package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.integration.test.ts

@@ -0,0 +1,22 @@
+import path from 'node:path';
+import { execFileSyncEslintVueFiles } from '../../utils/exec-file-sync-eslint-vue-files';
+
+describe('@adyen/bento/deprecation-filter-bar-deprecated-props', () => {
+    it('should lint with warning', () => {
+        const eslintrc = path.resolve(__dirname, '__tests__', 'eslint.config.js');
+        const vueFile = path.resolve(__dirname, '__tests__', 'deprecation-filter-bar-deprecated-props.vue');
+
+        const result = JSON.parse(execFileSyncEslintVueFiles(eslintrc, vueFile));
+
+        // 3 from direct value prop (static, dynamic, v-model)
+        // + 1 from configWithValue (value on config item)
+        // + 3 from configWithOptions (messages + 2 keys)
+        // + 1 from inline template (messages)
+        expect(result[0].warningCount).toBe(8);
+
+        expect(result[0].messages[0]).toMatchObject({
+            ruleId: '@adyen/bento/deprecation-filter-bar-deprecated-props',
+            severity: 1,
+        });
+    });
+});

package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.js

@@ -0,0 +1,187 @@
+/**
+ * @typedef {import('eslint').Rule.RuleContext} RuleContext
+ */
+/**
+ * @typedef {import('eslint-plugin-vue/lib/utils').RuleModule} RuleModule
+ */
+
+const VueUtils = require('eslint-plugin-vue/lib/utils');
+
+const DEPRECATED_OPTIONS_KEYS = new Set([
+    'messages',
+    'messagesPersistentButtonLabelPartiallySelectedKey',
+    'messagesPersistentButtonLabelAllSelectedKey',
+]);
+
+function getStaticPropertyName(prop) {
+    if (prop.type !== 'Property' || prop.computed) {
+        return null;
+    }
+    return prop.key.type === 'Identifier' ? prop.key.name : prop.key.type === 'Literal' ? String(prop.key.value) : null;
+}
+
+/** @type {RuleModule} */
+module.exports = {
+    meta: {
+        type: 'suggestion',
+        docs: {
+            description:
+                'Deprecates usage of value prop and messages-related options in bento-filter-bar and bento-data-grid filter configs',
+            category: 'Deprecations',
+            url: 'https://github.com/Adyen/bento/blob/main/packages/eslint/rules/deprecation-filter-bar-deprecated-props/README.md',
+            recommended: true,
+        },
+        messages: {
+            deprecationValue: `The "value" prop is deprecated. Please use "config" and "filter-values" instead.`,
+            deprecationConfigValue: `The "value" property in filter config items is deprecated. Please use "filter-values" instead.`,
+            deprecationOption:
+                'The "{{ key }}" option in filter config is deprecated. The persistent filter label now uses a counter instead of custom strings.',
+        },
+        fixable: 'code',
+        schema: [
+            {
+                type: 'object',
+                properties: {
+                    autofix: {
+                        type: 'boolean',
+                        default: false,
+                    },
+                },
+                additionalProperties: false,
+            },
+        ],
+    },
+
+    /** @param {RuleContext} context */
+    create(context) {
+        const options = context.options[0] || {};
+        const autofix = options.autofix === true;
+
+        function removeProperty(fixer, objectNode, prop) {
+            const properties = objectNode.properties;
+            const index = properties.indexOf(prop);
+            const isLast = index === properties.length - 1;
+
+            if (properties.length === 1) {
+                return fixer.replaceText(objectNode, '{}');
+            }
+            if (isLast) {
+                const prev = properties[index - 1];
+                return fixer.removeRange([prev.range[1], prop.range[1]]);
+            }
+            const next = properties[index + 1];
+            return fixer.removeRange([prop.range[0], next.range[0]]);
+        }
+
+        function checkObjectExpression(node) {
+            const properties = node.properties;
+            const propertyMap = {};
+
+            for (const prop of properties) {
+                const name = getStaticPropertyName(prop);
+                if (name) {
+                    propertyMap[name] = prop;
+                }
+            }
+
+            // Only check objects that look like filter config items (BentoFilterModel)
+            const isFilterConfig = propertyMap.field && propertyMap.type;
+            if (!isFilterConfig) {
+                return;
+            }
+
+            // Check for deprecated "value" on filter config items
+            if (propertyMap.value) {
+                context.report({
+                    node: propertyMap.value.key,
+                    messageId: 'deprecationConfigValue',
+                    ...(autofix && {
+                        fix(fixer) {
+                            return removeProperty(fixer, node, propertyMap.value);
+                        },
+                    }),
+                });
+            }
+
+            // Check for deprecated options keys inside "options" object
+            if (
+                propertyMap.options &&
+                propertyMap.options.value &&
+                propertyMap.options.value.type === 'ObjectExpression'
+            ) {
+                const optionsNode = propertyMap.options.value;
+                for (const optionProp of optionsNode.properties) {
+                    const optionName = getStaticPropertyName(optionProp);
+                    if (optionName && DEPRECATED_OPTIONS_KEYS.has(optionName)) {
+                        context.report({
+                            node: optionProp.key,
+                            messageId: 'deprecationOption',
+                            data: { key: optionName },
+                            ...(autofix && {
+                                fix(fixer) {
+                                    return removeProperty(fixer, optionsNode, optionProp);
+                                },
+                            }),
+                        });
+                    }
+                }
+            }
+        }
+
+        const objectVisitor = {
+            ObjectExpression(node) {
+                checkObjectExpression(node);
+            },
+        };
+
+        return VueUtils.defineTemplateBodyVisitor(
+            context,
+            {
+                // Direct "value" prop on bento-filter-bar (static)
+                [`VElement[name="bento-filter-bar"] > VStartTag > VAttribute[directive=false][key.name="value"]`](
+                    node
+                ) {
+                    context.report({
+                        node,
+                        messageId: 'deprecationValue',
+                        ...(autofix && {
+                            fix(fixer) {
+                                return fixer.remove(node);
+                            },
+                        }),
+                    });
+                },
+                // Direct "value" prop on bento-filter-bar (dynamic)
+                [`VElement[name="bento-filter-bar"] > VStartTag > VAttribute[directive=true][key.name.name="bind"][key.argument.name="value"]`](
+                    node
+                ) {
+                    context.report({
+                        node,
+                        messageId: 'deprecationValue',
+                        ...(autofix && {
+                            fix(fixer) {
+                                return fixer.remove(node);
+                            },
+                        }),
+                    });
+                },
+                // v-model on bento-filter-bar (v-model binds to "value" in Vue 2)
+                [`VElement[name="bento-filter-bar"] > VStartTag > VAttribute[directive=true][key.name.name="model"]`](
+                    node
+                ) {
+                    context.report({
+                        node,
+                        messageId: 'deprecationValue',
+                        ...(autofix && {
+                            fix(fixer) {
+                                return fixer.remove(node);
+                            },
+                        }),
+                    });
+                },
+                ...objectVisitor,
+            },
+            objectVisitor
+        );
+    },
+};

package/rules/deprecation-filter-bar-deprecated-props/deprecation-filter-bar-deprecated-props.test.ts

@@ -0,0 +1,421 @@
+import { RuleTester } from 'eslint';
+import vueParser from 'vue-eslint-parser';
+import tsParser from '@typescript-eslint/parser';
+import deprecationFilterBarDeprecatedProps from './deprecation-filter-bar-deprecated-props';
+
+const ruleTester = new RuleTester({
+    languageOptions: {
+        ecmaVersion: 'latest',
+        sourceType: 'module',
+        parser: vueParser,
+        parserOptions: {
+            parser: tsParser,
+        },
+    },
+});
+
+describe('@adyen/bento/deprecation-filter-bar-deprecated-props', () => {
+    ruleTester.run('deprecation-filter-bar-deprecated-props', deprecationFilterBarDeprecatedProps, {
+        valid: [
+            {
+                name: 'Valid: bento-filter-bar with config prop (no value)',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-filter-bar :config="config" :filter-values="values" />
+                </template>
+                `,
+            },
+            {
+                name: 'Valid: filter config item without deprecated value property',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{ field: 'name', label: 'Name', type: 'BentoInputFilter' }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: filter config options without deprecated messages keys',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    label: 'Status',
+                    type: 'BentoSelectFilter',
+                    options: { listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: computed property key matching deprecated name (no false positive)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const key = 'value';
+                const config = [{ field: 'x', type: 'BentoInputFilter', [key]: 'test' }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: spread in options (no crash)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const defaults = {};
+                const config = [{
+                    field: 'x',
+                    type: 'BentoSelectFilter',
+                    options: { ...defaults, listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+            },
+            {
+                name: 'Valid: bento-data-grid with filters without deprecated props',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const filters = [{ field: 'x', label: 'X', type: 'BentoInputFilter' }];
+                </script>
+                <template><bento-data-grid :filters="filters" /></template>
+                `,
+            },
+            {
+                name: 'Valid: unrelated object with options.messages (no false positive)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const unrelated = { options: { messages: {} } };
+                </script>
+                <template><div /></template>
+                `,
+            },
+            {
+                name: 'Valid: unrelated object with value property (no false positive)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const obj = { value: 'test', options: { messages: {} } };
+                </script>
+                <template><div /></template>
+                `,
+            },
+        ],
+        invalid: [
+            // Direct "value" prop on bento-filter-bar
+            {
+                name: 'Invalid: static value prop on bento-filter-bar',
+                filename: 'test.vue',
+                code: `<template><bento-filter-bar value="val" /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Invalid: dynamic value prop on bento-filter-bar',
+                filename: 'test.vue',
+                code: `<template><bento-filter-bar :value="filters" /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Invalid: v-model on bento-filter-bar',
+                filename: 'test.vue',
+                code: `<template><bento-filter-bar v-model="filters" /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            // "value" inside filter config items (script)
+            {
+                name: 'Invalid: value property in filter config item (script)',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    type: 'BentoInputFilter',
+                    value: 'test',
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationConfigValue' }],
+            },
+            // "value" inside filter config items (inline template)
+            {
+                name: 'Invalid: value property in filter config item (inline template)',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-filter-bar :config="[{ field: 'name', type: 'BentoInputFilter', value: 'test' }]" />
+                </template>
+                `,
+                errors: [{ messageId: 'deprecationConfigValue' }],
+            },
+            // Deprecated messages option
+            {
+                name: 'Invalid: messages option in filter config',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messages: { en: { persistentButtonLabelPartiallySelected: 'x' } }, listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            // Deprecated messagesPersistentButtonLabelPartiallySelectedKey
+            {
+                name: 'Invalid: messagesPersistentButtonLabelPartiallySelectedKey option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messagesPersistentButtonLabelPartiallySelectedKey: 'customKey', listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [
+                    {
+                        messageId: 'deprecationOption',
+                        data: { key: 'messagesPersistentButtonLabelPartiallySelectedKey' },
+                    },
+                ],
+            },
+            // Deprecated messagesPersistentButtonLabelAllSelectedKey
+            {
+                name: 'Invalid: messagesPersistentButtonLabelAllSelectedKey option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messagesPersistentButtonLabelAllSelectedKey: 'customKey', listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [
+                    { messageId: 'deprecationOption', data: { key: 'messagesPersistentButtonLabelAllSelectedKey' } },
+                ],
+            },
+            // All 3 deprecated options together
+            {
+                name: 'Invalid: all deprecated options in one config',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: {
+                        messages: {},
+                        messagesPersistentButtonLabelPartiallySelectedKey: 'k1',
+                        messagesPersistentButtonLabelAllSelectedKey: 'k2',
+                        listboxItems: [],
+                    },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [
+                    { messageId: 'deprecationOption', data: { key: 'messages' } },
+                    {
+                        messageId: 'deprecationOption',
+                        data: { key: 'messagesPersistentButtonLabelPartiallySelectedKey' },
+                    },
+                    { messageId: 'deprecationOption', data: { key: 'messagesPersistentButtonLabelAllSelectedKey' } },
+                ],
+            },
+            // String literal key (edge case)
+            {
+                name: 'Invalid: string literal key for deprecated option',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { 'messages': {} },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            // bento-data-grid filters with deprecated value
+            {
+                name: 'Invalid: value in data-grid filter config item',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const filters = [{
+                    field: 'name',
+                    type: 'BentoInputFilter',
+                    value: 'test',
+                }];
+                </script>
+                <template><bento-data-grid :filters="filters" /></template>
+                `,
+                errors: [{ messageId: 'deprecationConfigValue' }],
+            },
+            // bento-data-grid filters with deprecated options
+            {
+                name: 'Invalid: deprecated options in data-grid filter config',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const filters = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messages: {}, listboxItems: [] },
+                }];
+                </script>
+                <template><bento-data-grid :filters="filters" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            // Inline template with deprecated options
+            {
+                name: 'Invalid: deprecated options in inline template config',
+                filename: 'test.vue',
+                code: `
+                <template>
+                    <bento-filter-bar :config="[{
+                        field: 'status',
+                        type: 'BentoSelectFilter',
+                        options: { messages: {}, listboxItems: [] },
+                    }]" />
+                </template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            // Spread + deprecated key combined
+            {
+                name: 'Invalid: spread + deprecated option combined',
+                filename: 'test.vue',
+                code: `
+                <script setup>
+                const defaults = {};
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { ...defaults, messages: {} },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+        ],
+    });
+
+    /* ------------------------------------------------ */
+    /* AUTOFIX TESTS                                    */
+    /* ------------------------------------------------ */
+    ruleTester.run('deprecation-filter-bar-deprecated-props (autofix enabled)', deprecationFilterBarDeprecatedProps, {
+        valid: [
+            {
+                name: 'Valid: no deprecated props (autofix enabled)',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-filter-bar :config="config" /></template>`,
+            },
+        ],
+        invalid: [
+            {
+                name: 'Autofix: removes static value prop from bento-filter-bar',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-filter-bar value="val" /></template>`,
+                output: `<template><bento-filter-bar  /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Autofix: removes dynamic value prop from bento-filter-bar',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-filter-bar :value="filters" /></template>`,
+                output: `<template><bento-filter-bar  /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Autofix: removes v-model from bento-filter-bar',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `<template><bento-filter-bar v-model="filters" /></template>`,
+                output: `<template><bento-filter-bar  /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+            {
+                name: 'Autofix: removes value from filter config item',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    type: 'BentoInputFilter',
+                    value: 'test',
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                output: `
+                <script setup>
+                const config = [{
+                    field: 'name',
+                    type: 'BentoInputFilter',
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationConfigValue' }],
+            },
+            {
+                name: 'Autofix: removes deprecated messages option from filter config',
+                filename: 'test.vue',
+                options: [{ autofix: true }],
+                code: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { messages: {}, listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                output: `
+                <script setup>
+                const config = [{
+                    field: 'status',
+                    type: 'BentoSelectFilter',
+                    options: { listboxItems: [] },
+                }];
+                </script>
+                <template><bento-filter-bar :config="config" /></template>
+                `,
+                errors: [{ messageId: 'deprecationOption', data: { key: 'messages' } }],
+            },
+            {
+                name: 'Autofix: does not fix when autofix is false',
+                filename: 'test.vue',
+                options: [{ autofix: false }],
+                code: `<template><bento-filter-bar value="val" other="x" /></template>`,
+                errors: [{ messageId: 'deprecationValue' }],
+            },
+        ],
+    });
+});