refactor: remove TemplateOption component usage and simplify dropdown options in multiple components

frontend/src/components/ConditionsFilter/CFCondition.vue

@@ -110,7 +110,6 @@
 </template>
 
 <script setup>
-import { TemplateOption } from '@/utils'
 import {
   Autocomplete,
   Button,
@@ -191,31 +190,17 @@ const dropdownOptions = computed(() => {
 
   options.push({
     label: __('Remove'),
-    component: (props) =>
+    icon: 'trash-2',
-      TemplateOption({
+    variant: 'red',
-        option: __('Remove'),
+    onClick: () => emit('remove'),
-        icon: 'trash-2',
-        active: props.active,
-        variant: 'danger',
-        onClick: () => {
-          emit('remove')
-        },
-      }),
     condition: () => !props.isGroup,
   })
 
   options.push({
     label: __('Remove group'),
-    component: (props) =>
+    icon: 'trash-2',
-      TemplateOption({
+    variant: 'red',
-        option: __('Remove group'),
+    onClick: () => emit('remove'),
-        icon: 'trash-2',
-        active: props.active,
-        variant: 'danger',
-        onClick: () => {
-          emit('remove')
-        },
-      }),
     condition: () => props.isGroup,
   })
 

frontend/src/components/Settings/AssignmentRules/AssignmentRuleListItem.vue

@@ -72,7 +72,6 @@ import {
   toast,
 } from 'frappe-ui'
 import { inject, ref } from 'vue'
-import { TemplateOption } from '@/utils'
 
 const assignmentRulesList = inject('assignmentRulesList')
 const updateStep = inject('updateStep')
@@ -128,29 +127,19 @@ const dropdownOptions = [
   },
   {
     label: __('Delete'),
-    component: (props) =>
+    icon: 'trash-2',
-      TemplateOption({
+    onClick: (e) => {
-        option: __('Delete'),
+      e.preventDefault()
-        icon: 'trash-2',
+      e.stopImmediatePropagation()
-        active: props.active,
+      isConfirmingDelete.value = true
-        onClick: (e) => {
+    },
-          e.preventDefault()
-          e.stopImmediatePropagation()
-          isConfirmingDelete.value = true
-        },
-      }),
     condition: () => !isConfirmingDelete.value,
   },
   {
     label: __('Confirm Delete'),
-    component: (props) =>
+    icon: 'trash-2',
-      TemplateOption({
+    theme: 'red',
-        option: __('Confirm Delete'),
+    onClick: () => deleteAssignmentRule(),
-        icon: 'trash-2',
-        active: props.active,
-        theme: 'danger',
-        onClick: () => deleteAssignmentRule(),
-      }),
     condition: () => isConfirmingDelete.value,
   },
 ]

frontend/src/components/Settings/EmailTemplate/EmailTemplates.vue

@@ -148,7 +148,6 @@
   </div>
 </template>
 <script setup>
-import { TemplateOption } from '@/utils'
 import {
   TextInput,
   FormControl,
@@ -223,43 +222,28 @@ function getDropdownOptions(template) {
   let options = [
     {
       label: __('Duplicate'),
-      component: (props) =>
+      icon: 'copy',
-        TemplateOption({
+      onClick: () => emit('updateStep', 'new-template', { ...template }),
-          option: __('Duplicate'),
-          icon: 'copy',
-          active: props.active,
-          onClick: () => emit('updateStep', 'new-template', { ...template }),
-        }),
     },
     {
       label: __('Delete'),
-      component: (props) =>
+      icon: 'trash-2',
-        TemplateOption({
+      onClick: (e) => {
-          option: __('Delete'),
+        e.preventDefault()
-          icon: 'trash-2',
+        e.stopPropagation()
-          active: props.active,
+        confirmDelete.value = true
-          onClick: (e) => {
+      },
-            e.preventDefault()
-            e.stopPropagation()
-            confirmDelete.value = true
-          },
-        }),
       condition: () => !confirmDelete.value,
     },
     {
       label: __('Confirm Delete'),
-      component: (props) =>
+      icon: 'trash-2',
-        TemplateOption({
+      theme: 'red',
-          option: __('Confirm Delete'),
+      onClick: () => deleteTemplate(template),
-          icon: 'trash-2',
-          active: props.active,
-          theme: 'danger',
-          onClick: () => deleteTemplate(template),
-        }),
       condition: () => confirmDelete.value,
     },
   ]
 
-  return options.filter((option) => option.condition?.() || true)
+  return options
 }
 </script>

frontend/src/components/Settings/Users.vue

@@ -169,7 +169,7 @@
 import AddExistingUserModal from '@/components/Modals/AddExistingUserModal.vue'
 import { activeSettingsPage } from '@/composables/settings'
 import { usersStore } from '@/stores/users'
-import { TemplateOption, DropdownOption } from '@/utils'
+import { DropdownOption } from '@/utils'
 import {
   Dropdown,
   Avatar,
@@ -216,29 +216,19 @@ function getMoreOptions(user) {
   let options = [
     {
       label: __('Remove'),
-      component: (props) =>
+      icon: 'trash-2',
-        TemplateOption({
+      onClick: (e) => {
-          option: __('Remove'),
+        e.preventDefault()
-          icon: 'trash-2',
+        e.stopPropagation()
-          active: props.active,
+        confirmRemove.value = true
-          onClick: (e) => {
+      },
-            e.preventDefault()
-            e.stopPropagation()
-            confirmRemove.value = true
-          },
-        }),
       condition: () => !confirmRemove.value,
     },
     {
       label: __('Confirm Remove'),
-      component: (props) =>
+      icon: 'trash-2',
-        TemplateOption({
+      theme: 'red',
-          option: __('Confirm Remove'),
+      onClick: () => removeUser(user, true),
-          icon: 'trash-2',
-          active: props.active,
-          theme: 'danger',
-          onClick: () => removeUser(user, true),
-        }),
       condition: () => confirmRemove.value,
     },
   ]
@@ -250,38 +240,35 @@ function getDropdownOptions(user) {
   let options = [
     {
       label: __('Admin'),
-      component: (props) =>
+      component: () =>
         DropdownOption({
           option: __('Admin'),
           icon: 'shield',
-          active: props.active,
           selected: user.role === 'System Manager',
-          onClick: () => updateRole(user, 'System Manager'),
         }),
+      onClick: () => updateRole(user, 'System Manager'),
       condition: () => isAdmin(),
     },
     {
       label: __('Manager'),
-      component: (props) =>
+      component: () =>
         DropdownOption({
           option: __('Manager'),
           icon: 'briefcase',
-          active: props.active,
           selected: user.role === 'Sales Manager',
-          onClick: () => updateRole(user, 'Sales Manager'),
         }),
+      onClick: () => updateRole(user, 'Sales Manager'),
       condition: () => isManager(),
     },
     {
       label: __('Sales User'),
-      component: (props) =>
+      component: () =>
         DropdownOption({
           option: __('Sales User'),
           icon: 'user-check',
-          active: props.active,
           selected: user.role === 'Sales User',
-          onClick: () => updateRole(user, 'Sales User'),
         }),
+      onClick: () => updateRole(user, 'Sales User'),
     },
   ]
 

frontend/src/utils/index.js

@@ -462,23 +462,12 @@ export function runSequentially(functions) {
   }, Promise.resolve())
 }
 
-export function DropdownOption({
+export function DropdownOption({ option, icon, selected }) {
-  active,
-  option,
-  theme,
-  icon,
-  onClick,
-  selected,
-}) {
   return h(
     'button',
     {
-      class: [
+      class:
-        active ? 'bg-surface-gray-2' : 'text-ink-gray-8',
+        'group flex w-full text-ink-gray-8 justify-between items-center rounded-md px-2 py-2 text-sm hover:bg-surface-gray-2',
-        'group flex w-full justify-between items-center rounded-md px-2 py-2 text-sm',
-        theme == 'danger' ? 'text-ink-red-3 hover:bg-ink-red-1' : '',
-      ],
-      onClick: !selected ? onClick : null,
     },
     [
       h('div', { class: 'flex gap-2' }, [
@@ -501,30 +490,6 @@ export function DropdownOption({
   )
 }
 
-export function TemplateOption({ active, option, theme, icon, onClick }) {
-  return h(
-    'button',
-    {
-      class: [
-        active ? 'bg-surface-gray-2 text-ink-gray-8' : 'text-ink-gray-7',
-        'group flex w-full gap-2 items-center rounded-md px-2 py-2 text-sm',
-        theme == 'danger' ? 'text-ink-red-3 hover:bg-ink-red-1' : '',
-      ],
-      onClick: onClick,
-    },
-    [
-      icon
-        ? h(FeatherIcon, {
-            name: icon,
-            class: ['h-4 w-4 shrink-0'],
-            'aria-hidden': true,
-          })
-        : null,
-      h('span', { class: 'whitespace-nowrap' }, option),
-    ],
-  )
-}
-
 export function copy(obj) {
   if (!obj) return obj
   return JSON.parse(JSON.stringify(obj))