From 20d4fe709c66c6be91f721a52e44cfef7edee86b Mon Sep 17 00:00:00 2001
From: Christian Byrne <cbyrne@comfy.org>
Date: Sat, 6 Sep 2025 21:09:35 -0700
Subject: [PATCH] [feat] Add ESLint rule for deprecated PrimeVue components
 (#5389)
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

* [feat] Add ESLint rule for deprecated PrimeVue components

Adds no-restricted-imports rule to catch usage of deprecated PrimeVue 4+ components and guide developers to use their replacements:
- Dropdown → Select
- OverlayPanel → Popover
- Calendar → DatePicker
- InputSwitch → ToggleSwitch
- Sidebar → Drawer

This prevents accidental usage of deprecated components and ensures consistency across the codebase.

* Add ESLint ignore for existing deprecated Dropdown usage

Adds TODO comment for future migration to Select component in SearchFilterDropdown.

* Update eslint.config.js

Co-authored-by: Alexander Brown <drjkl@comfy.org>

---------

Co-authored-by: Alexander Brown <drjkl@comfy.org>
---
 eslint.config.js                              | 33 +++++++++++++++++++
 .../SearchFilterDropdown.vue                  |  1 +
 2 files changed, 34 insertions(+)

diff --git a/eslint.config.js b/eslint.config.js
index fe0f56b3b..7e3248b20 100644
--- a/eslint.config.js
+++ b/eslint.config.js
@@ -64,6 +64,39 @@ export default [
       'vue/no-v-html': 'off',
       // Enforce dark-theme: instead of dark: prefix
       'vue/no-restricted-class': ['error', '/^dark:/'],
+      // Restrict deprecated PrimeVue components
+      'no-restricted-imports': [
+        'error',
+        {
+          paths: [
+            {
+              name: 'primevue/calendar',
+              message:
+                'Calendar is deprecated in PrimeVue 4+. Use DatePicker instead: import DatePicker from "primevue/datepicker"'
+            },
+            {
+              name: 'primevue/dropdown',
+              message:
+                'Dropdown is deprecated in PrimeVue 4+. Use Select instead: import Select from "primevue/select"'
+            },
+            {
+              name: 'primevue/inputswitch',
+              message:
+                'InputSwitch is deprecated in PrimeVue 4+. Use ToggleSwitch instead: import ToggleSwitch from "primevue/toggleswitch"'
+            },
+            {
+              name: 'primevue/overlaypanel',
+              message:
+                'OverlayPanel is deprecated in PrimeVue 4+. Use Popover instead: import Popover from "primevue/popover"'
+            },
+            {
+              name: 'primevue/sidebar',
+              message:
+                'Sidebar is deprecated in PrimeVue 4+. Use Drawer instead: import Drawer from "primevue/drawer"'
+            }
+          ]
+        }
+      ],
       // i18n rules
       '@intlify/vue-i18n/no-raw-text': [
         'error',
diff --git a/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue b/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
index f91035b3c..e9ded729f 100644
--- a/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
+++ b/src/components/dialog/content/manager/registrySearchBar/SearchFilterDropdown.vue
@@ -19,6 +19,7 @@
 </template>
 
 <script setup lang="ts" generic="T">
+// eslint-disable-next-line no-restricted-imports -- TODO: Migrate to Select component
 import Dropdown from 'primevue/dropdown'
 
 import type { SearchOption } from '@/types/comfyManagerTypes'