refactor to common MoreOptionsDropdown component for shared ui

e2e/time.spec.ts

@@ -307,9 +307,11 @@ test('test that deleting a time entry from the overview works', async ({
     const timeEntryCount = await timeEntryRows.count();
 
     const newTimeEntry = timeEntryRows.first();
-    const actionsDropdown = newTimeEntry.getByTestId('time_entry_actions');
+    const actionsDropdown = newTimeEntry
+        .getByRole('button', { name: 'Actions for the time entry' })
+        .first();
     await actionsDropdown.click();
-    const deleteButton = page.getByTestId('time_entry_delete');
+    const deleteButton = page.getByText('Delete');
     await deleteButton.click();
     await expect(timeEntryRows).toHaveCount(timeEntryCount - 1);
 });

resources/js/Components/Common/Client/ClientMoreOptionsDropdown.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Dropdown from '@/Components/Dropdown.vue';
 import { PencilSquareIcon, TrashIcon } from '@heroicons/vue/20/solid';
 import type { Client } from '@/utils/api';
 import { canDeleteClients, canUpdateClients } from '@/utils/permissions';
+import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
 
 const emit = defineEmits<{
     delete: [];
@@ -14,47 +14,29 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown>
-        <template #trigger>
-            <svg
-                data-testid="client_actions"
-                :aria-label="'Actions for Client ' + props.client.name"
-                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-            </svg>
-        </template>
-        <template #content>
-            <div class="min-w-[150px]">
-                <button
-                    v-if="canUpdateClients()"
-                    @click="emit('edit')"
-                    :aria-label="'Edit Client ' + props.client.name"
-                    data-testid="client_edit"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <PencilSquareIcon
-                        class="w-5 text-icon-active"></PencilSquareIcon>
-                    <span>Edit</span>
-                </button>
-                <button
-                    v-if="canDeleteClients()"
-                    @click="emit('delete')"
-                    :aria-label="'Delete Client ' + props.client.name"
-                    data-testid="client_delete"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                    <span>Delete</span>
-                </button>
-            </div>
-        </template>
-    </Dropdown>
+    <MoreOptionsDropdown :label="'Actions for Client ' + props.client.name">
+        <div class="min-w-[150px]">
+            <button
+                v-if="canUpdateClients()"
+                @click="emit('edit')"
+                :aria-label="'Edit Client ' + props.client.name"
+                data-testid="client_edit"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
+            </button>
+            <button
+                v-if="canDeleteClients()"
+                @click="emit('delete')"
+                :aria-label="'Delete Client ' + props.client.name"
+                data-testid="client_delete"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </div>
+    </MoreOptionsDropdown>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Invitation/InvitationMoreOptionsDropdown.vue

@@ -1,6 +1,6 @@
 <script setup lang="ts">
-import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon, ArrowPathIcon } from '@heroicons/vue/20/solid';
+import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
 const emit = defineEmits<{
     delete: [];
     resend: [];
@@ -8,39 +8,22 @@ const emit = defineEmits<{
 </script>
 
 <template>
-    <Dropdown align="bottom-end">
-        <template #trigger>
-            <svg
-                data-testid="invitation_actions"
-                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-            </svg>
-        </template>
-        <template #content>
-            <button
-                @click="emit('resend')"
-                data-testid="invitation_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                <ArrowPathIcon class="w-5 text-icon-active"></ArrowPathIcon>
-                <span>Resend Invitation</span>
-            </button>
-            <button
-                @click="emit('delete')"
-                data-testid="invitation_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                <span>Delete</span>
-            </button>
-        </template>
-    </Dropdown>
+    <MoreOptionsDropdown label="Actions for the invitation">
+        <button
+            @click="emit('resend')"
+            data-testid="invitation_delete"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            <ArrowPathIcon class="w-5 text-icon-active"></ArrowPathIcon>
+            <span>Resend Invitation</span>
+        </button>
+        <button
+            @click="emit('delete')"
+            data-testid="invitation_delete"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+            <span>Delete</span>
+        </button>
+    </MoreOptionsDropdown>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Member/MemberMoreOptionsDropdown.vue

@@ -1,8 +1,8 @@
 <script setup lang="ts">
-import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
 import type { Member } from '@/utils/api';
 import { canDeleteMembers, canUpdateMembers } from '@/utils/permissions';
+import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
 
 const emit = defineEmits<{
     delete: [];
@@ -14,50 +14,30 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown
+    <MoreOptionsDropdown
         v-if="canUpdateMembers() || canDeleteMembers()"
-        align="bottom-end">
-        <template #trigger>
+        :label="'Actions for Member ' + props.member.name">
+        <div class="min-w-[150px]">
             <button
-                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity"
-                :aria-label="'Actions for Member ' + props.member.name">
-                <svg
-                    class="h-10 w-10 p-2 rounded-full"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-                </svg>
+                v-if="canUpdateMembers()"
+                @click="emit('edit')"
+                :aria-label="'Edit Member ' + props.member.name"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
             </button>
-        </template>
-        <template #content>
-            <div class="min-w-[150px]">
-                <button
-                    v-if="canUpdateMembers()"
-                    @click="emit('edit')"
-                    :aria-label="'Edit Member ' + props.member.name"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <PencilSquareIcon
-                        class="w-5 text-icon-active"></PencilSquareIcon>
-                    <span>Edit</span>
-                </button>
-                <button
-                    v-if="canDeleteMembers()"
-                    @click="emit('delete')"
-                    :aria-label="'Delete Member ' + props.member.name"
-                    data-testid="member_delete"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                    <span>Delete</span>
-                </button>
-            </div>
-        </template>
-    </Dropdown>
+            <button
+                v-if="canDeleteMembers()"
+                @click="emit('delete')"
+                :aria-label="'Delete Member ' + props.member.name"
+                data-testid="member_delete"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </div>
+    </MoreOptionsDropdown>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Project/ProjectMoreOptionsDropdown.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import Dropdown from '@/Components/Dropdown.vue';
 import {
     TrashIcon,
     PencilSquareIcon,
@@ -7,6 +6,7 @@ import {
 } from '@heroicons/vue/20/solid';
 import type { Project } from '@/utils/api';
 import { canDeleteProjects, canUpdateProjects } from '@/utils/permissions';
+import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
 const emit = defineEmits<{
     delete: [];
     edit: [];
@@ -18,61 +18,37 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown>
-        <template #trigger>
+    <MoreOptionsDropdown :label="'Actions for Project ' + props.project.name">
+        <div class="min-w-[150px]">
             <button
-                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity"
-                data-testid="project_actions"
-                :aria-label="'Actions for Project ' + props.project.name">
-                <svg
-                    class="h-10 w-10 p-2 rounded-full"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-                </svg>
+                @click.prevent="emit('edit')"
+                v-if="canUpdateProjects()"
+                :aria-label="'Edit Project ' + props.project.name"
+                data-testid="project_edit"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
             </button>
-        </template>
-        <template #content>
-            <div class="min-w-[150px]">
-                <button
-                    @click.prevent="emit('edit')"
-                    v-if="canUpdateProjects()"
-                    :aria-label="'Edit Project ' + props.project.name"
-                    data-testid="project_edit"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <PencilSquareIcon
-                        class="w-5 text-icon-active"></PencilSquareIcon>
-                    <span>Edit</span>
-                </button>
-                <button
-                    @click.prevent="emit('archive')"
-                    v-if="canUpdateProjects()"
-                    :aria-label="'Archive Project ' + props.project.name"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <ArchiveBoxIcon
-                        class="w-5 text-icon-active"></ArchiveBoxIcon>
-                    <span>{{
-                        project.is_archived ? 'Unarchive' : 'Archive'
-                    }}</span>
-                </button>
-                <button
-                    @click.prevent="emit('delete')"
-                    :aria-label="'Delete Project ' + props.project.name"
-                    data-testid="project_delete"
-                    v-if="canDeleteProjects()"
-                    class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                    <span>Delete</span>
-                </button>
-            </div>
-        </template>
-    </Dropdown>
+            <button
+                @click.prevent="emit('archive')"
+                v-if="canUpdateProjects()"
+                :aria-label="'Archive Project ' + props.project.name"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <ArchiveBoxIcon class="w-5 text-icon-active"></ArchiveBoxIcon>
+                <span>{{ project.is_archived ? 'Unarchive' : 'Archive' }}</span>
+            </button>
+            <button
+                @click.prevent="emit('delete')"
+                :aria-label="'Delete Project ' + props.project.name"
+                data-testid="project_delete"
+                v-if="canDeleteProjects()"
+                class="border-b border-card-background-separator flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </div>
+    </MoreOptionsDropdown>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/ProjectMember/ProjectMemberMoreOptionsDropdown.vue

@@ -1,10 +1,10 @@
 <script setup lang="ts">
-import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon, PencilSquareIcon } from '@heroicons/vue/20/solid';
 import type { ProjectMember } from '@/utils/api';
 import { useMembersStore } from '@/utils/useMembers';
 import { storeToRefs } from 'pinia';
 import { computed } from 'vue';
+import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
 
 const emit = defineEmits<{
     delete: [];
@@ -24,46 +24,24 @@ const currentMember = computed(() => {
 </script>
 
 <template>
-    <Dropdown>
-        <template #trigger>
-            <button
-                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity"
-                :aria-label="
-                    'Actions for Project Member ' + currentMember?.name
-                ">
-                <svg
-                    class="h-10 w-10 p-2 rounded-full"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-                </svg>
-            </button>
-        </template>
-        <template #content>
-            <button
-                @click.prevent="emit('edit')"
-                :aria-label="'Edit Project Member ' + currentMember?.name"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                <PencilSquareIcon
-                    class="w-5 text-icon-active"></PencilSquareIcon>
-                <span>Edit</span>
-            </button>
-            <button
-                @click.prevent="emit('delete')"
-                :aria-label="'Delete Project Member ' + currentMember?.name"
-                data-testid="project_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                <span>Remove from Team</span>
-            </button>
-        </template>
-    </Dropdown>
+    <MoreOptionsDropdown
+        :label="'Actions for Project Member ' + currentMember?.name">
+        <button
+            @click.prevent="emit('edit')"
+            :aria-label="'Edit Project Member ' + currentMember?.name"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            <PencilSquareIcon class="w-5 text-icon-active"></PencilSquareIcon>
+            <span>Edit</span>
+        </button>
+        <button
+            @click.prevent="emit('delete')"
+            :aria-label="'Delete Project Member ' + currentMember?.name"
+            data-testid="project_delete"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+            <span>Remove from Team</span>
+        </button>
+    </MoreOptionsDropdown>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Tag/TagMoreOptionsDropdown.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon } from '@heroicons/vue/20/solid';
 import type { Tag } from '@/utils/api';
+import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
 
 const emit = defineEmits<{
     delete: [];
@@ -12,34 +12,16 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown>
-        <template #trigger>
-            <svg
-                data-testid="tag_actions"
-                :aria-label="'Actions for Tag ' + props.tag.name"
-                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-            </svg>
-        </template>
-        <template #content>
-            <button
-                @click="emit('delete')"
-                :aria-label="'Delete Tag ' + props.tag.name"
-                data-testid="tag_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                <span>Delete</span>
-            </button>
-        </template>
-    </Dropdown>
+    <MoreOptionsDropdown :label="'Actions for Tag ' + props.tag.name">
+        <button
+            @click="emit('delete')"
+            :aria-label="'Delete Tag ' + props.tag.name"
+            data-testid="tag_delete"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+            <span>Delete</span>
+        </button>
+    </MoreOptionsDropdown>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/Task/TaskMoreOptionsDropdown.vue

@@ -1,5 +1,4 @@
 <script setup lang="ts">
-import Dropdown from '@/Components/Dropdown.vue';
 import {
     TrashIcon,
     PencilSquareIcon,
@@ -7,6 +6,7 @@ import {
 } from '@heroicons/vue/20/solid';
 import type { Task } from '@/utils/api';
 import { canDeleteTasks, canUpdateTasks } from '@/utils/permissions';
+import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
 const emit = defineEmits<{
     delete: [];
     edit: [];
@@ -18,60 +18,38 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown align="bottom-end">
-        <template #trigger>
+    <MoreOptionsDropdown :label="'Actions for Task ' + props.task.name">
+        <div class="min-w-[150px]">
             <button
-                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity"
-                data-testid="task_actions"
-                :aria-label="'Actions for Task ' + props.task.name">
-                <svg
-                    class="h-10 w-10 p-2 rounded-full"
-                    viewBox="0 0 24 24"
-                    xmlns="http://www.w3.org/2000/svg">
-                    <path
-                        fill="none"
-                        stroke="currentColor"
-                        stroke-linecap="round"
-                        stroke-linejoin="round"
-                        stroke-width="1.5"
-                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-                </svg>
+                @click="emit('edit')"
+                v-if="canUpdateTasks()"
+                :aria-label="'Edit Task ' + props.task.name"
+                data-testid="task_edit"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <PencilSquareIcon
+                    class="w-5 text-icon-active"></PencilSquareIcon>
+                <span>Edit</span>
             </button>
-        </template>
-        <template #content>
-            <div class="min-w-[150px]">
-                <button
-                    @click="emit('edit')"
-                    v-if="canUpdateTasks()"
-                    :aria-label="'Edit Task ' + props.task.name"
-                    data-testid="task_edit"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <PencilSquareIcon
-                        class="w-5 text-icon-active"></PencilSquareIcon>
-                    <span>Edit</span>
-                </button>
-                <button
-                    @click="emit('done')"
-                    v-if="canUpdateTasks()"
-                    :aria-label="'Mark Task ' + props.task.name + ' as done'"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <CheckCircleIcon
-                        class="w-5 text-icon-active"></CheckCircleIcon>
-                    <span v-if="props.task.is_done">Mark as active</span>
-                    <span v-else>Mark as done</span>
-                </button>
-                <button
-                    @click="emit('delete')"
-                    :aria-label="'Delete Task ' + props.task.name"
-                    v-if="canDeleteTasks()"
-                    data-testid="task_delete"
-                    class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                    <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                    <span>Delete</span>
-                </button>
-            </div>
-        </template>
-    </Dropdown>
+            <button
+                @click="emit('done')"
+                v-if="canUpdateTasks()"
+                :aria-label="'Mark Task ' + props.task.name + ' as done'"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <CheckCircleIcon class="w-5 text-icon-active"></CheckCircleIcon>
+                <span v-if="props.task.is_done">Mark as active</span>
+                <span v-else>Mark as done</span>
+            </button>
+            <button
+                @click="emit('delete')"
+                :aria-label="'Delete Task ' + props.task.name"
+                v-if="canDeleteTasks()"
+                data-testid="task_delete"
+                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+                <span>Delete</span>
+            </button>
+        </div>
+    </MoreOptionsDropdown>
 </template>
 
 <style scoped></style>

resources/js/Components/Common/TimeEntry/TimeEntryMoreOptionsDropdown.vue

@@ -1,38 +1,22 @@
 <script setup lang="ts">
-import Dropdown from '@/Components/Dropdown.vue';
 import { TrashIcon } from '@heroicons/vue/20/solid';
+import MoreOptionsDropdown from '@/Components/MoreOptionsDropdown.vue';
+
 const emit = defineEmits<{
     delete: [];
 }>();
 </script>
 
 <template>
-    <Dropdown>
-        <template #trigger>
-            <svg
-                data-testid="time_entry_actions"
-                class="h-10 w-10 p-2 rounded-full hover:bg-card-background opacity-20 group-hover:opacity-100 transition"
-                viewBox="0 0 24 24"
-                xmlns="http://www.w3.org/2000/svg">
-                <path
-                    fill="none"
-                    stroke="currentColor"
-                    stroke-linecap="round"
-                    stroke-linejoin="round"
-                    stroke-width="1.5"
-                    d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
-            </svg>
-        </template>
-        <template #content>
-            <button
-                @click="emit('delete')"
-                data-testid="time_entry_delete"
-                class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
-                <TrashIcon class="w-5 text-icon-active"></TrashIcon>
-                <span>Delete</span>
-            </button>
-        </template>
-    </Dropdown>
+    <MoreOptionsDropdown label="Actions for the time entry">
+        <button
+            @click="emit('delete')"
+            data-testid="time_entry_delete"
+            class="flex items-center space-x-3 w-full px-3 py-2.5 text-start text-sm font-medium leading-5 text-white hover:bg-card-background-active focus:outline-none focus:bg-card-background-active transition duration-150 ease-in-out">
+            <TrashIcon class="w-5 text-icon-active"></TrashIcon>
+            <span>Delete</span>
+        </button>
+    </MoreOptionsDropdown>
 </template>
 
 <style scoped></style>

resources/js/Components/MoreOptionsDropdown.vue

@@ -0,0 +1,35 @@
+<script setup lang="ts">
+import Dropdown from '@/Components/Dropdown.vue';
+
+defineProps<{
+    label: string;
+}>();
+</script>
+
+<template>
+    <Dropdown align="bottom-end">
+        <template #trigger>
+            <button
+                class="focus-visible:outline-none focus-visible:bg-card-background rounded-full focus-visible:ring-1 focus-visible:ring-input-border-active focus-visible:opacity-100 hover:bg-card-background group-hover:opacity-100 opacity-20 transition-opacity"
+                :aria-label="label">
+                <svg
+                    class="h-10 w-10 p-2 rounded-full"
+                    viewBox="0 0 24 24"
+                    xmlns="http://www.w3.org/2000/svg">
+                    <path
+                        fill="none"
+                        stroke="currentColor"
+                        stroke-linecap="round"
+                        stroke-linejoin="round"
+                        stroke-width="1.5"
+                        d="M12 5.92A.96.96 0 1 0 12 4a.96.96 0 0 0 0 1.92m0 7.04a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92M12 20a.96.96 0 1 0 0-1.92a.96.96 0 0 0 0 1.92" />
+                </svg>
+            </button>
+        </template>
+        <template #content>
+            <slot></slot>
+        </template>
+    </Dropdown>
+</template>
+
+<style scoped></style>