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,24 +14,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown>
+    <MoreOptionsDropdown :label="'Actions for Client ' + props.client.name">
-        <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()"
@@ -53,8 +36,7 @@ const props = defineProps<{
                 <span>Delete</span>
             </button>
         </div>
-        </template>
+    </MoreOptionsDropdown>
-    </Dropdown>
 </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,23 +8,7 @@ const emit = defineEmits<{
 </script>
 
 <template>
-    <Dropdown align="bottom-end">
+    <MoreOptionsDropdown label="Actions for the invitation">
-        <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"
@@ -39,8 +23,7 @@ const emit = defineEmits<{
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Delete</span>
         </button>
-        </template>
+    </MoreOptionsDropdown>
-    </Dropdown>
 </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,28 +14,9 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown
+    <MoreOptionsDropdown
         v-if="canUpdateMembers() || canDeleteMembers()"
-        align="bottom-end">
+        :label="'Actions for Member ' + props.member.name">
-        <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 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>
-            </button>
-        </template>
-        <template #content>
         <div class="min-w-[150px]">
             <button
                 v-if="canUpdateMembers()"
@@ -56,8 +37,7 @@ const props = defineProps<{
                 <span>Delete</span>
             </button>
         </div>
-        </template>
+    </MoreOptionsDropdown>
-    </Dropdown>
 </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,27 +18,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown>
+    <MoreOptionsDropdown :label="'Actions for Project ' + props.project.name">
-        <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"
-                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>
-            </button>
-        </template>
-        <template #content>
         <div class="min-w-[150px]">
             <button
                 @click.prevent="emit('edit')"
@@ -55,11 +35,8 @@ const props = defineProps<{
                 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
+                <ArchiveBoxIcon class="w-5 text-icon-active"></ArchiveBoxIcon>
-                        class="w-5 text-icon-active"></ArchiveBoxIcon>
+                <span>{{ project.is_archived ? 'Unarchive' : 'Archive' }}</span>
-                    <span>{{
-                        project.is_archived ? 'Unarchive' : 'Archive'
-                    }}</span>
             </button>
             <button
                 @click.prevent="emit('delete')"
@@ -71,8 +48,7 @@ const props = defineProps<{
                 <span>Delete</span>
             </button>
         </div>
-        </template>
+    </MoreOptionsDropdown>
-    </Dropdown>
 </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,34 +24,13 @@ const currentMember = computed(() => {
 </script>
 
 <template>
-    <Dropdown>
+    <MoreOptionsDropdown
-        <template #trigger>
+        :label="'Actions for Project Member ' + currentMember?.name">
-            <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
+            <PencilSquareIcon class="w-5 text-icon-active"></PencilSquareIcon>
-                    class="w-5 text-icon-active"></PencilSquareIcon>
             <span>Edit</span>
         </button>
         <button
@@ -62,8 +41,7 @@ const currentMember = computed(() => {
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Remove from Team</span>
         </button>
-        </template>
+    </MoreOptionsDropdown>
-    </Dropdown>
 </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,24 +12,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown>
+    <MoreOptionsDropdown :label="'Actions for Tag ' + props.tag.name">
-        <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"
@@ -38,8 +21,7 @@ const props = defineProps<{
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Delete</span>
         </button>
-        </template>
+    </MoreOptionsDropdown>
-    </Dropdown>
 </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,27 +18,7 @@ const props = defineProps<{
 </script>
 
 <template>
-    <Dropdown align="bottom-end">
+    <MoreOptionsDropdown :label="'Actions for Task ' + props.task.name">
-        <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"
-                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>
-            </button>
-        </template>
-        <template #content>
         <div class="min-w-[150px]">
             <button
                 @click="emit('edit')"
@@ -55,8 +35,7 @@ const props = defineProps<{
                 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
+                <CheckCircleIcon class="w-5 text-icon-active"></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>
@@ -70,8 +49,7 @@ const props = defineProps<{
                 <span>Delete</span>
             </button>
         </div>
-        </template>
+    </MoreOptionsDropdown>
-    </Dropdown>
 </template>
 
 <style scoped></style>

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

@@ -1,29 +1,14 @@
 <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>
+    <MoreOptionsDropdown label="Actions for the time entry">
-        <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"
@@ -31,8 +16,7 @@ const emit = defineEmits<{
             <TrashIcon class="w-5 text-icon-active"></TrashIcon>
             <span>Delete</span>
         </button>
-        </template>
+    </MoreOptionsDropdown>
-    </Dropdown>
 </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>