From fa07a4cab6b05b9eadb7a9a40d399f1ecf00e21c Mon Sep 17 00:00:00 2001
From: Dominik Klein <dk@zammad.com>
Date: Thu, 25 Apr 2024 15:53:47 +0200
Subject: [PATCH] Feature: Desktop-View - Added new components
 CommonSimpleTable and CommonActionMenu.

Co-authored-by: Dusan Vuckovic <dv@zammad.com>
Co-authored-by: Martin Gruner <mg@zammad.com>
Co-authored-by: Dominik Klein <dk@zammad.com>
Co-authored-by: Benjamin Scharf <bs@zammad.com>
---
 .../CommonActionMenu/CommonActionMenu.vue     | 100 ++++++++++++
 .../__tests__/CommonActionMenu.spec.ts        | 104 +++++++++++++
 .../CommonPopover/CommonPopover.vue           |  21 ++-
 .../CommonPopover/CommonPopoverMenu.vue       |  70 ++++-----
 .../CommonPopover/CommonPopoverMenuItem.vue   |  26 +++-
 .../__tests__/CommonPopoverMenu.spec.ts       |  27 ++++
 .../desktop/components/CommonPopover/types.ts |   8 +-
 .../CommonPopover/usePopoverMenu.ts           |  68 ++++++++
 .../CommonSimpleTable/CommonSimpleTable.vue   |  54 +++++++
 .../__tests__/CommonSimpleTable.spec.ts       |  87 +++++++++++
 .../CommonSimpleTable.spec.ts.snapshot.txt    |  83 ++++++++++
 .../components/CommonSimpleTable/types.ts     |  12 ++
 .../desktop/initializer/3RD-PARTY-ICONS.md    |   1 +
 .../assets/three-dots-vertical.svg            |   3 +
 .../pages/dashboard/views/Playground.vue      | 145 +++++++++++++++++-
 i18n/zammad.pot                               |   5 +
 16 files changed, 766 insertions(+), 48 deletions(-)
 create mode 100644 app/frontend/apps/desktop/components/CommonActionMenu/CommonActionMenu.vue
 create mode 100644 app/frontend/apps/desktop/components/CommonActionMenu/__tests__/CommonActionMenu.spec.ts
 create mode 100644 app/frontend/apps/desktop/components/CommonPopover/usePopoverMenu.ts
 create mode 100644 app/frontend/apps/desktop/components/CommonSimpleTable/CommonSimpleTable.vue
 create mode 100644 app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts
 create mode 100644 app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt
 create mode 100644 app/frontend/apps/desktop/components/CommonSimpleTable/types.ts
 create mode 100644 app/frontend/apps/desktop/initializer/assets/three-dots-vertical.svg

diff --git a/app/frontend/apps/desktop/components/CommonActionMenu/CommonActionMenu.vue b/app/frontend/apps/desktop/components/CommonActionMenu/CommonActionMenu.vue
new file mode 100644
index 000000000000..901fef403573
--- /dev/null
+++ b/app/frontend/apps/desktop/components/CommonActionMenu/CommonActionMenu.vue
@@ -0,0 +1,100 @@
+<!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
+
+<script setup lang="ts">
+import { computed, ref, toRefs } from 'vue'
+
+import getUuid from '#shared/utils/getUuid.ts'
+import type { ObjectLike } from '#shared/types/utils.ts'
+
+import CommonPopover from '#desktop/components/CommonPopover/CommonPopover.vue'
+import CommonButton from '#desktop/components/CommonButton/CommonButton.vue'
+import CommonPopoverMenu from '#desktop/components/CommonPopover/CommonPopoverMenu.vue'
+import { usePopover } from '#desktop/components/CommonPopover/usePopover.ts'
+import type {
+  ButtonSize,
+  ButtonVariant,
+} from '#desktop/components/CommonButton/types.ts'
+import type {
+  MenuItem,
+  Orientation,
+  Placement,
+} from '#desktop/components/CommonPopover/types.ts'
+import { usePopoverMenu } from '#desktop/components/CommonPopover/usePopoverMenu.ts'
+
+interface Props {
+  actions: MenuItem[]
+  entity?: ObjectLike
+  buttonSize?: ButtonSize
+  buttonVariant?: ButtonVariant
+  placement?: Placement
+  orientation?: Orientation
+  noSingleActionMode?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  buttonSize: 'large',
+  buttonVariant: 'neutral',
+  placement: 'start',
+  orientation: 'autoVertical',
+})
+
+const popoverMenu = ref<InstanceType<typeof CommonPopoverMenu>>()
+
+const { popover, isOpen: popoverIsOpen, popoverTarget, toggle } = usePopover()
+
+const { actions, entity } = toRefs(props)
+const { filteredMenuItems, singleMenuItemPresent, singleMenuItem } =
+  usePopoverMenu(actions, entity, { provides: true })
+
+const entityId = computed(() => props.entity?.id || getUuid())
+const menuId = computed(() => `popover-${entityId.value}`)
+
+const singleActionMode = computed(() => {
+  if (props.noSingleActionMode) return false
+
+  return singleMenuItemPresent.value
+})
+</script>
+
+<template>
+  <div v-if="filteredMenuItems" class="inline-block">
+    <CommonButton
+      v-if="singleActionMode"
+      :size="buttonSize"
+      :variant="buttonVariant"
+      :aria-label="$t(singleMenuItem?.label)"
+      :icon="singleMenuItem?.icon"
+      @click="singleMenuItem?.onClick?.(entity as ObjectLike)"
+    />
+    <CommonButton
+      v-else
+      :id="entity?.id || entityId"
+      ref="popoverTarget"
+      :aria-label="$t('Action menu button')"
+      aria-haspopup="true"
+      :aria-controls="menuId"
+      :class="{
+        'outline outline-1 outline-offset-1 outline-blue-800': popoverIsOpen,
+      }"
+      :size="buttonSize"
+      :variant="buttonVariant"
+      icon="three-dots-vertical"
+      @click="toggle"
+    />
+
+    <CommonPopover
+      v-if="!singleActionMode"
+      :id="menuId"
+      ref="popover"
+      :placement="placement"
+      :orientation="orientation"
+      :owner="popoverTarget"
+    >
+      <CommonPopoverMenu
+        ref="popoverMenu"
+        :entity="entity"
+        :popover="popover"
+      />
+    </CommonPopover>
+  </div>
+</template>
diff --git a/app/frontend/apps/desktop/components/CommonActionMenu/__tests__/CommonActionMenu.spec.ts b/app/frontend/apps/desktop/components/CommonActionMenu/__tests__/CommonActionMenu.spec.ts
new file mode 100644
index 000000000000..16e43933c01b
--- /dev/null
+++ b/app/frontend/apps/desktop/components/CommonActionMenu/__tests__/CommonActionMenu.spec.ts
@@ -0,0 +1,104 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import CommonActionMenu from '#desktop/components/CommonActionMenu/CommonActionMenu.vue'
+import renderComponent from '#tests/support/components/renderComponent.ts'
+
+const fn = vi.fn()
+describe('CommonActionMenu', () => {
+  let view: ReturnType<typeof renderComponent>
+
+  const actions = [
+    {
+      key: 'delete-foo',
+      label: 'Delete Foo',
+      icon: 'trash3',
+      onClick: ({ id }: { id: string }) => {
+        fn(id)
+      },
+    },
+    {
+      key: 'change-foo',
+      label: 'Change Foo',
+      icon: 'person-gear',
+      onClick: ({ id }: { id: string }) => {
+        fn(id)
+      },
+    },
+  ]
+
+  beforeEach(() => {
+    view = renderComponent(CommonActionMenu, {
+      props: {
+        entity: {
+          id: 'foo-test-action',
+        },
+        actions,
+      },
+    })
+  })
+
+  it('shows action menu button by default', () => {
+    expect(view.getByIconName('three-dots-vertical')).toBeInTheDocument()
+  })
+
+  it('calls onClick handler when action is clicked', async () => {
+    await view.events.click(view.getByIconName('three-dots-vertical'))
+
+    expect(view.getByIconName('trash3')).toBeInTheDocument()
+    expect(view.getByIconName('person-gear')).toBeInTheDocument()
+
+    await view.events.click(view.getByText('Change Foo'))
+
+    expect(fn).toHaveBeenCalledWith('foo-test-action')
+  })
+
+  it('finds corresponding a11y controls', async () => {
+    const id = view
+      .getByLabelText('Action menu button')
+      .getAttribute('aria-controls')
+
+    await view.events.click(view.getByIconName('three-dots-vertical'))
+
+    const popover = document.getElementById(id as string)
+
+    expect(popover?.getAttribute('id')).toEqual(id)
+  })
+
+  describe('single action mode', () => {
+    beforeEach(async () => {
+      await view.rerender({
+        actions: [actions[0]],
+      })
+    })
+
+    it('adds aria label on single action button', () => {
+      expect(view.getByLabelText('Delete Foo')).toBeInTheDocument()
+    })
+
+    it('supports single action mode', () => {
+      expect(
+        view.queryByIconName('three-dots-vertical'),
+      ).not.toBeInTheDocument()
+
+      expect(view.getByIconName('trash3')).toBeInTheDocument()
+    })
+
+    it('calls onClick handler when action is clicked', async () => {
+      await view.events.click(view.getByIconName('trash3'))
+
+      expect(fn).toHaveBeenCalledWith('foo-test-action')
+    })
+
+    it('renders single action if prop is set', async () => {
+      await view.rerender({
+        noSingleActionMode: true,
+      })
+
+      expect(view.queryByIconName('trash3')).not.toBeInTheDocument()
+
+      await view.events.click(view.getByIconName('three-dots-vertical'))
+
+      expect(view.getByIconName('trash3')).toBeInTheDocument()
+    })
+  })
+})
diff --git a/app/frontend/apps/desktop/components/CommonPopover/CommonPopover.vue b/app/frontend/apps/desktop/components/CommonPopover/CommonPopover.vue
index e9c3fa495ba9..ecb91043dfcd 100644
--- a/app/frontend/apps/desktop/components/CommonPopover/CommonPopover.vue
+++ b/app/frontend/apps/desktop/components/CommonPopover/CommonPopover.vue
@@ -1,7 +1,13 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { computed, nextTick, onUnmounted, ref } from 'vue'
+import {
+  type ComponentPublicInstance,
+  computed,
+  nextTick,
+  onUnmounted,
+  ref,
+} from 'vue'
 import { onClickOutside, type UseElementBoundingReturn } from '@vueuse/core'
 import { onKeyUp, useElementBounding, useWindowSize } from '@vueuse/core'
 
@@ -19,7 +25,7 @@ import type {
 } from './types'
 
 export interface Props {
-  owner: HTMLElement | undefined
+  owner: HTMLElement | ComponentPublicInstance | undefined
   orientation?: Orientation
   placement?: Placement
   hideArrow?: boolean
@@ -209,7 +215,9 @@ const updateOwnerAriaExpandedState = () => {
   const element = props.owner
   if (!element) return
 
-  element.ariaExpanded = showPopover.value ? 'true' : 'false'
+  if ('ariaExpanded' in element) {
+    element.ariaExpanded = showPopover.value ? 'true' : 'false'
+  }
 }
 
 const closePopover = (isInteractive = false) => {
@@ -219,7 +227,10 @@ const closePopover = (isInteractive = false) => {
   emit('close')
 
   nextTick(() => {
-    if (!isInteractive) props.owner?.focus()
+    if (!isInteractive && props.owner) {
+      // eslint-disable-next-line no-unused-expressions
+      '$el' in props.owner ? props.owner.$el?.focus?.() : props.owner?.focus?.()
+    }
     updateOwnerAriaExpandedState()
     testFlags.set('common-select.closed')
   })
@@ -293,7 +304,7 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
         role="region"
         class="popover fixed z-50 flex min-h-9 rounded-xl border border-neutral-100 bg-white antialiased dark:border-gray-900 dark:bg-gray-500"
         :style="popoverStyle"
-        :aria-labelledby="owner?.id"
+        :aria-labelledby="owner && '$el' in owner ? owner.$el?.id : owner?.id"
       >
         <div class="overflow-y-auto">
           <slot />
diff --git a/app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenu.vue b/app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenu.vue
index 4153a3692fd5..f143edaedb48 100644
--- a/app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenu.vue
+++ b/app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenu.vue
@@ -1,56 +1,50 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
-import { computed, useSlots } from 'vue'
+import { computed, toRefs, useSlots } from 'vue'
 
-import { useSessionStore } from '#shared/stores/session.ts'
-
-import type { CommonPopoverInstance, MenuItem } from './types'
+import type { ObjectLike } from '#shared/types/utils.ts'
+import { usePopoverMenu } from '#desktop/components/CommonPopover/usePopoverMenu.ts'
+import type { CommonPopoverInstance, MenuItem, Variant } from './types'
 import CommonPopoverMenuItem from './CommonPopoverMenuItem.vue'
 
 export interface Props {
   popover: CommonPopoverInstance | undefined
   headerLabel?: string
   items?: MenuItem[]
+  entity?: ObjectLike
 }
 
 const props = defineProps<Props>()
 
-const session = useSessionStore()
-
-const availableItems = computed(() => {
-  if (!props.items || !props.items.length) return null
-
-  return props.items.filter((item) => {
-    if (item.permission) {
-      return session.hasPermission(item.permission)
-    }
+const { items, entity } = toRefs(props)
 
-    if (item.show) {
-      return item.show()
-    }
-
-    return true
-  })
-})
+const { filteredMenuItems } = usePopoverMenu(items, entity)
 
 const slots = useSlots()
 
 const showHeaderLabel = computed(() => {
-  if (!availableItems.value && !slots.default) return false
+  if (!filteredMenuItems.value && !slots.default) return false
 
   return slots.header || props.headerLabel
 })
 
 const onClickItem = (event: MouseEvent, item: MenuItem) => {
   if (item.onClick) {
-    item.onClick(event)
+    item.onClick(props.entity)
   }
 
   if (!item.noCloseOnClick) {
     props.popover?.closePopover()
   }
 }
+
+const getHoverFocusStyles = (variant?: Variant) => {
+  if (variant === 'danger') {
+    return 'focus-within:bg-red-50 hover:bg-red-50 hover:focus-within:bg-red-50 dark:focus-within:bg-red-900 dark:hover:bg-red-900 dark:hover:focus-within:bg-red-900'
+  }
+  return 'focus-within:bg-blue-800 focus-within:text-white hover:bg-blue-600 hover:focus-within:bg-blue-800 dark:hover:bg-blue-900 dark:hover:focus-within:bg-blue-800'
+}
 </script>
 
 <template>
@@ -61,33 +55,35 @@ const onClickItem = (event: MouseEvent, item: MenuItem) => {
       aria-level="2"
       class="p-2 leading-3"
     >
-      <slot name="header"
-        ><CommonLabel
-          size="small"
-          class="text-stone-200 dark:text-neutral-500"
-          >{{ i18n.t(headerLabel) }}</CommonLabel
-        ></slot
-      >
+      <slot name="header">
+        <CommonLabel size="small" class="text-stone-200 dark:text-neutral-500"
+          >{{ i18n.t(headerLabel) }}
+        </CommonLabel>
+      </slot>
     </div>
 
-    <template v-if="availableItems || $slots.default">
+    <template v-if="filteredMenuItems || $slots.default">
       <slot>
         <ul role="menu" v-bind="$attrs" class="flex w-full flex-col">
-          <template v-for="item in availableItems" :key="item.key">
+          <template v-for="item in filteredMenuItems" :key="item.key">
             <li
               role="menuitem"
-              class="group flex items-center justify-between last:rounded-b-[10px] focus-within:bg-blue-800 focus-within:text-white hover:bg-blue-600 hover:focus-within:bg-blue-800 dark:hover:bg-blue-900 dark:hover:focus-within:bg-blue-800"
-              :class="{
-                'first:rounded-t-[10px]': !showHeaderLabel,
-                'border-t border-neutral-100 dark:border-gray-900':
-                  item.separatorTop,
-              }"
+              class="group flex items-center justify-between last:rounded-b-[10px]"
+              :class="[
+                {
+                  'first:rounded-t-[10px]': !showHeaderLabel,
+                  'border-t border-neutral-100 dark:border-gray-900':
+                    item.separatorTop,
+                },
+                getHoverFocusStyles(item.variant),
+              ]"
             >
               <slot :name="`item-${item.key}`" v-bind="item">
                 <component
                   :is="item.component || CommonPopoverMenuItem"
                   class="flex grow p-2.5"
                   :label="item.label"
+                  :variant="item.variant"
                   :link="item.link"
                   :icon="item.icon"
                   :label-placeholder="item.labelPlaceholder"
diff --git a/app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenuItem.vue b/app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenuItem.vue
index 9ebfb6ccd1ad..5888e17327e2 100644
--- a/app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenuItem.vue
+++ b/app/frontend/apps/desktop/components/CommonPopover/CommonPopoverMenuItem.vue
@@ -1,15 +1,34 @@
 <!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
 
 <script setup lang="ts">
+import type { Variant } from '#desktop/components/CommonPopover/types.ts'
+import { computed } from 'vue'
+
 export interface Props {
   label?: string
   labelPlaceholder?: string[]
   link?: string
   linkExternal?: boolean
+  variant?: Variant
   icon?: string
+  labelClass?: string
 }
 
-defineProps<Props>()
+const props = defineProps<Props>()
+
+const variantClass = computed(() => {
+  if (props.variant === 'danger') {
+    return 'text-red-500'
+  }
+  return 'group-focus-within:text-white group-hover:text-black group-hover:group-focus-within:text-white dark:group-hover:text-white'
+})
+
+const iconColor = computed(() => {
+  if (props.variant === 'danger') {
+    return 'text-red-500'
+  }
+  return 'text-stone-200 dark:text-neutral-500 group-hover:text-black dark:group-hover:text-white group-focus-within:text-white group-hover:group-focus-within:text-white'
+})
 </script>
 
 <template>
@@ -21,9 +40,10 @@ defineProps<Props>()
     data-test-id="popover-menu-item"
   >
     <CommonLabel
-      class="gap-2 group-focus-within:text-white group-hover:text-black group-hover:group-focus-within:text-white dark:group-hover:text-white"
+      class="gap-2"
+      :class="[labelClass, variantClass]"
       :prefix-icon="icon"
-      icon-color="text-stone-200 dark:text-neutral-500 group-hover:text-black dark:group-hover:text-white group-focus-within:text-white group-hover:group-focus-within:text-white"
+      :icon-color="iconColor"
     >
       <slot>{{ i18n.t(label, ...(labelPlaceholder || [])) }}</slot>
     </CommonLabel>
diff --git a/app/frontend/apps/desktop/components/CommonPopover/__tests__/CommonPopoverMenu.spec.ts b/app/frontend/apps/desktop/components/CommonPopover/__tests__/CommonPopoverMenu.spec.ts
index b65d9859585e..301462532e8d 100644
--- a/app/frontend/apps/desktop/components/CommonPopover/__tests__/CommonPopoverMenu.spec.ts
+++ b/app/frontend/apps/desktop/components/CommonPopover/__tests__/CommonPopoverMenu.spec.ts
@@ -9,6 +9,7 @@ import { usePopover } from '../usePopover.ts'
 import type { MenuItem } from '../types.ts'
 
 const html = String.raw
+const fn = vi.fn()
 
 describe('rendering section', () => {
   it('no output without default slot and items', () => {
@@ -187,4 +188,30 @@ describe('rendering section', () => {
 
     expect(view.getByText('Example Menu item')).toBeInTheDocument()
   })
+
+  it('yields entity data on show if prop is passed', async () => {
+    renderComponent(CommonPopoverMenu, {
+      props: {
+        popover: null,
+        headerLabel: 'Test Header',
+        entity: {
+          id: 'example',
+          name: 'vitest',
+        },
+        items: [
+          {
+            label: 'Example',
+            show: (event: { id: string; name: string }) => {
+              fn(event)
+              return true
+            },
+          },
+        ],
+      },
+      router: true,
+      store: true,
+    })
+
+    expect(fn).toBeCalledWith({ id: 'example', name: 'vitest' })
+  })
 })
diff --git a/app/frontend/apps/desktop/components/CommonPopover/types.ts b/app/frontend/apps/desktop/components/CommonPopover/types.ts
index 91d45622ff67..78d8258098b1 100644
--- a/app/frontend/apps/desktop/components/CommonPopover/types.ts
+++ b/app/frontend/apps/desktop/components/CommonPopover/types.ts
@@ -4,6 +4,7 @@ import type { Ref, Component } from 'vue'
 
 import type { RequiredPermission } from '#shared/types/permission.ts'
 
+import type { ObjectLike } from '#shared/types/utils.ts'
 import { type Props as ItemProps } from './CommonPopoverMenuItem.vue'
 
 export interface CommonPopoverInstance {
@@ -28,12 +29,15 @@ export type Orientation =
 
 export type Placement = 'start' | 'end'
 
+export type Variant = 'danger'
+
 export interface MenuItem extends ItemProps {
   key: string
   permission?: RequiredPermission
-  show?: () => boolean
+  show?: (entity?: ObjectLike) => boolean
   separatorTop?: boolean
-  onClick?(event: MouseEvent): void
+  onClick?: (entity?: ObjectLike) => void
   noCloseOnClick?: boolean
   component?: Component
+  variant?: Variant
 }
diff --git a/app/frontend/apps/desktop/components/CommonPopover/usePopoverMenu.ts b/app/frontend/apps/desktop/components/CommonPopover/usePopoverMenu.ts
new file mode 100644
index 000000000000..ea77c0b9dc7a
--- /dev/null
+++ b/app/frontend/apps/desktop/components/CommonPopover/usePopoverMenu.ts
@@ -0,0 +1,68 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import { inject, computed, provide } from 'vue'
+import type { ComputedRef, Ref } from 'vue'
+import { useSessionStore } from '#shared/stores/session.ts'
+import type { MenuItem } from '#desktop/components/CommonPopover/types.ts'
+import type { ObjectLike } from '#shared/types/utils.ts'
+
+const POPOVER_MENU_SYMBOL = Symbol('popover-menu')
+
+interface UsePopoverMenuReturn {
+  filteredMenuItems: ComputedRef<MenuItem[] | undefined>
+  singleMenuItemPresent: ComputedRef<boolean>
+  singleMenuItem: ComputedRef<MenuItem | undefined>
+}
+
+export const usePopoverMenu = (
+  items: Ref<MenuItem[] | undefined>,
+  entity: Ref<ObjectLike | undefined>,
+  options: { provides?: boolean } = {},
+) => {
+  const injectPopoverMenu = inject<Maybe<UsePopoverMenuReturn>>(
+    POPOVER_MENU_SYMBOL,
+    null,
+  )
+
+  if (injectPopoverMenu) return injectPopoverMenu
+
+  const { provides = false } = options
+
+  const session = useSessionStore()
+
+  const filteredMenuItems = computed(() => {
+    if (!items.value || !items.value.length) return
+
+    return items.value.filter((item) => {
+      if (item.permission) {
+        return session.hasPermission(item.permission)
+      }
+
+      if (item.show) {
+        return item.show(entity?.value)
+      }
+
+      return true
+    })
+  })
+
+  const singleMenuItemPresent = computed(() => {
+    return filteredMenuItems.value?.length === 1
+  })
+
+  const singleMenuItem = computed(() => {
+    if (!singleMenuItemPresent.value) return
+
+    return filteredMenuItems.value?.[0]
+  })
+
+  const providePopoverMenu = {
+    filteredMenuItems,
+    singleMenuItemPresent,
+    singleMenuItem,
+  }
+
+  if (provides) provide(POPOVER_MENU_SYMBOL, providePopoverMenu)
+
+  return providePopoverMenu
+}
diff --git a/app/frontend/apps/desktop/components/CommonSimpleTable/CommonSimpleTable.vue b/app/frontend/apps/desktop/components/CommonSimpleTable/CommonSimpleTable.vue
new file mode 100644
index 000000000000..ca4194db8845
--- /dev/null
+++ b/app/frontend/apps/desktop/components/CommonSimpleTable/CommonSimpleTable.vue
@@ -0,0 +1,54 @@
+<!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
+
+<script setup lang="ts">
+import CommonActionMenu from '#desktop/components/CommonActionMenu/CommonActionMenu.vue'
+import type { MenuItem } from '#desktop/components/CommonPopover/types.ts'
+import type { TableHeader, TableItem } from './types.ts'
+
+export interface Props {
+  headers: TableHeader[]
+  items: TableItem[]
+  actions?: MenuItem[]
+}
+
+defineProps<Props>()
+</script>
+
+<template>
+  <table class="pb-3">
+    <thead>
+      <th
+        v-for="header in headers"
+        :key="header.key"
+        class="h-10 p-2.5 text-xs font-normal text-stone-200 ltr:text-left rtl:text-right dark:text-neutral-500"
+      >
+        <span>{{ $t(header.label, ...(header.labelPlaceholder || [])) }}</span>
+      </th>
+      <th
+        v-if="actions"
+        class="h-10 p-2.5 text-xs font-normal text-stone-200 dark:text-neutral-500"
+      >
+        <span>{{ $t('Actions') }}</span>
+      </th>
+    </thead>
+    <tbody>
+      <tr v-for="(item, index) in items" :key="item.id">
+        <td
+          v-for="header in headers"
+          :key="`${item.id}-${header.key}`"
+          class="h-10 p-2.5 text-sm text-gray-100 first:rounded-s-md last:rounded-e-md dark:text-neutral-400"
+          :class="{ 'bg-blue-200 dark:bg-gray-700': (index + 1) % 2 }"
+        >
+          <span>{{ item[header.key] || '-' }}</span>
+        </td>
+        <td
+          v-if="actions"
+          class="h-10 p-2.5 text-center first:rounded-s-md last:rounded-e-md"
+          :class="{ 'bg-blue-200 dark:bg-gray-700': (index + 1) % 2 }"
+        >
+          <CommonActionMenu :actions="actions" :entity="item" />
+        </td>
+      </tr>
+    </tbody>
+  </table>
+</template>
diff --git a/app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts b/app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts
new file mode 100644
index 000000000000..5a3fe438ca52
--- /dev/null
+++ b/app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts
@@ -0,0 +1,87 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import { i18n } from '#shared/i18n.ts'
+import { renderComponent } from '#tests/support/components/index.ts'
+import type { MenuItem } from '#desktop/components/CommonPopover/types.ts'
+import CommonSimpleTable, { type Props } from '../CommonSimpleTable.vue'
+
+const tableHeaders = [
+  {
+    key: 'name',
+    label: 'User name',
+  },
+  {
+    key: 'role',
+    label: 'Role',
+  },
+]
+
+const tableItems = [
+  {
+    id: 1,
+    name: 'Lindsay Walton',
+    role: 'Member',
+  },
+]
+
+const tableActions: MenuItem[] = [
+  {
+    key: 'download',
+    label: 'Download this row',
+    icon: 'download',
+  },
+  {
+    key: 'delete',
+    label: 'Delete this row',
+    icon: 'trash3',
+  },
+]
+
+const renderTable = (props: Props) => {
+  return renderComponent(CommonSimpleTable, {
+    props,
+  })
+}
+
+beforeEach(() => {
+  i18n.setTranslationMap(new Map([['Role', 'Rolle']]))
+})
+
+describe('CommonSimpleTable.vue', () => {
+  it('displays the table without actions', async () => {
+    const view = renderTable({
+      headers: tableHeaders,
+      items: tableItems,
+    })
+
+    expect(view.getByText('User name')).toBeInTheDocument()
+    expect(view.getByText('Rolle')).toBeInTheDocument()
+    expect(view.getByText('Lindsay Walton')).toBeInTheDocument()
+    expect(view.getByText('Member')).toBeInTheDocument()
+    expect(view.queryByText('Actions')).toBeNull()
+  })
+
+  it('displays the table with actions', async () => {
+    const view = renderTable({
+      headers: tableHeaders,
+      items: tableItems,
+      actions: tableActions,
+    })
+
+    expect(view.getByText('Actions')).toBeInTheDocument()
+    expect(view.getByLabelText('Action menu button')).toBeInTheDocument()
+  })
+
+  it('generates expected DOM', async () => {
+    // TODO: check if such snappshot test is really the way we want to go.
+    const view = renderTable({
+      headers: tableHeaders,
+      items: tableItems,
+      actions: tableActions,
+    })
+
+    expect(view.baseElement.querySelector('table')).toMatchFileSnapshot(
+      `${__filename}.snapshot.txt`,
+    )
+  })
+})
diff --git a/app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt b/app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt
new file mode 100644
index 000000000000..c020d9cef79e
--- /dev/null
+++ b/app/frontend/apps/desktop/components/CommonSimpleTable/__tests__/CommonSimpleTable.spec.ts.snapshot.txt
@@ -0,0 +1,83 @@
+<table
+  class="pb-3"
+>
+  <thead>
+    
+    <th
+      class="h-10 p-2.5 text-xs font-normal text-stone-200 ltr:text-left rtl:text-right dark:text-neutral-500"
+    >
+      <span>
+        User name
+      </span>
+    </th>
+    <th
+      class="h-10 p-2.5 text-xs font-normal text-stone-200 ltr:text-left rtl:text-right dark:text-neutral-500"
+    >
+      <span>
+        Rolle
+      </span>
+    </th>
+    
+    <th
+      class="h-10 p-2.5 text-xs font-normal text-stone-200 dark:text-neutral-500"
+    >
+      <span>
+        Actions
+      </span>
+    </th>
+  </thead>
+  <tbody>
+    
+    <tr>
+      
+      <td
+        class="h-10 p-2.5 text-sm text-gray-100 first:rounded-s-md last:rounded-e-md dark:text-neutral-400 bg-blue-200 dark:bg-gray-700"
+      >
+        <span>
+          Lindsay Walton
+        </span>
+      </td>
+      <td
+        class="h-10 p-2.5 text-sm text-gray-100 first:rounded-s-md last:rounded-e-md dark:text-neutral-400 bg-blue-200 dark:bg-gray-700"
+      >
+        <span>
+          Member
+        </span>
+      </td>
+      
+      <td
+        class="h-10 p-2.5 text-center first:rounded-s-md last:rounded-e-md bg-blue-200 dark:bg-gray-700"
+      >
+        <div
+          class="inline-block"
+        >
+          <button
+            aria-controls="popover-1"
+            aria-haspopup="true"
+            aria-label="Action menu button"
+            class="btn h-min min-h-min flex-nowrap gap-x-1 border-0 font-normal shadow-none hover:outline hover:outline-1 hover:outline-offset-1 hover:outline-blue-600 focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:hover:outline-blue-900 btn-secondary bg-transparent hover:bg-transparent text-gray-100 dark:text-neutral-400 btn-lg text-base p-1 rounded-lg w-min"
+            id="1"
+            type="button"
+          >
+            <!--v-if-->
+            <svg
+              aria-hidden="true"
+              class="icon fill-current icon-three-dots-vertical shrink-0"
+              height="20"
+              width="20"
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <use
+                href="#icon-three-dots-vertical"
+              />
+            </svg>
+            <!--v-if-->
+          </button>
+          <!--teleport start-->
+          <!--teleport end-->
+        </div>
+      </td>
+    </tr>
+    
+  </tbody>
+</table>
\ No newline at end of file
diff --git a/app/frontend/apps/desktop/components/CommonSimpleTable/types.ts b/app/frontend/apps/desktop/components/CommonSimpleTable/types.ts
new file mode 100644
index 000000000000..f1ff55317091
--- /dev/null
+++ b/app/frontend/apps/desktop/components/CommonSimpleTable/types.ts
@@ -0,0 +1,12 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+export interface TableHeader {
+  key: string
+  label: string
+  labelPlaceholder?: string[]
+}
+
+export interface TableItem {
+  [key: string]: unknown
+  id: string | number
+}
diff --git a/app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md b/app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md
index 4e5a0fbfa86a..fd1af4feb3b6 100644
--- a/app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md
+++ b/app/frontend/apps/desktop/initializer/3RD-PARTY-ICONS.md
@@ -49,6 +49,7 @@
 - `assets/square.svg`
 - `assets/sun.svg`
 - `assets/upload.svg`
+- `assets/three-dots-vertical.svg`
 - `assets/trash3.svg`
 - `assets/x-circle.svg`
 - `assets/x-lg.svg`
diff --git a/app/frontend/apps/desktop/initializer/assets/three-dots-vertical.svg b/app/frontend/apps/desktop/initializer/assets/three-dots-vertical.svg
new file mode 100644
index 000000000000..e7df3ffc892e
--- /dev/null
+++ b/app/frontend/apps/desktop/initializer/assets/three-dots-vertical.svg
@@ -0,0 +1,3 @@
+<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+<path d="M9.5 13C9.5 13.8284 8.82843 14.5 8 14.5C7.17157 14.5 6.5 13.8284 6.5 13C6.5 12.1716 7.17157 11.5 8 11.5C8.82843 11.5 9.5 12.1716 9.5 13ZM9.5 8C9.5 8.82843 8.82843 9.5 8 9.5C7.17157 9.5 6.5 8.82843 6.5 8C6.5 7.17157 7.17157 6.5 8 6.5C8.82843 6.5 9.5 7.17157 9.5 8ZM9.5 3C9.5 3.82843 8.82843 4.5 8 4.5C7.17157 4.5 6.5 3.82843 6.5 3C6.5 2.17157 7.17157 1.5 8 1.5C8.82843 1.5 9.5 2.17157 9.5 3Z"/>
+</svg>
diff --git a/app/frontend/apps/desktop/pages/dashboard/views/Playground.vue b/app/frontend/apps/desktop/pages/dashboard/views/Playground.vue
index 895205aed844..bc361f2eac61 100644
--- a/app/frontend/apps/desktop/pages/dashboard/views/Playground.vue
+++ b/app/frontend/apps/desktop/pages/dashboard/views/Playground.vue
@@ -2,7 +2,7 @@
 <!-- eslint-disable zammad/zammad-detect-translatable-string -->
 
 <script setup lang="ts">
-import { computed, h, onMounted, ref, watch } from 'vue'
+import { computed, h, onMounted, reactive, ref, watch } from 'vue'
 import { storeToRefs } from 'pinia'
 import { reset } from '@formkit/core'
 import gql from 'graphql-tag'
@@ -32,6 +32,9 @@ import CommonFlyout from '#desktop/components/CommonFlyout/CommonFlyout.vue'
 import { useDialog } from '#desktop/components/CommonDialog/useDialog.ts'
 import LayoutContent from '#desktop/components/layout/LayoutContent.vue'
 import { useConfirmation } from '#shared/composables/useConfirmation.ts'
+import CommonActionMenu from '#desktop/components/CommonActionMenu/CommonActionMenu.vue'
+import CommonSimpleTable from '#desktop/components/CommonSimpleTable/CommonSimpleTable.vue'
+import type { MenuItem } from '#desktop/components/CommonPopover/types.ts'
 
 const alphabetOptions = computed(() =>
   [...Array(26).keys()].map((i) => ({
@@ -455,6 +458,94 @@ const deleteTest = async () => {
 }
 
 const vip = ref(false)
+
+const tableHeaders = [
+  {
+    key: 'name',
+    label: 'User name',
+  },
+  {
+    key: 'title',
+    label: 'Job position',
+  },
+  {
+    key: 'email',
+    label: 'Email',
+  },
+  {
+    key: 'role',
+    label: 'Role',
+  },
+]
+
+const tableItems = reactive([
+  {
+    id: 1,
+    name: 'Lindsay Walton',
+    title: 'Front-end Developer',
+    email: 'lindsay.walton@example.com',
+    role: 'Member',
+  },
+  {
+    id: 2,
+    name: 'Courtney Henry',
+    title: 'Designer',
+    email: 'courtney.henry@example.com',
+    role: 'Admin',
+  },
+  {
+    id: 3,
+    name: 'Tom Cook',
+    title: 'Director of Product',
+    email: 'tom.cook@example.com',
+    role: 'Member',
+  },
+  {
+    id: 4,
+    name: 'Whitney Francis',
+    title: 'Copywriter',
+    email: 'whitney.francis@example.com',
+    role: 'Admin',
+  },
+  {
+    id: 5,
+    name: 'Leonard Krasner',
+    title: 'Senior Designer',
+    email: 'leonard.krasner@example.com',
+    role: 'Owner',
+  },
+  {
+    id: 6,
+    name: 'Floyd Miles',
+    title: 'Principal Designer',
+    email: 'floyd.miles@example.com',
+    role: 'Member',
+  },
+])
+
+const tableActions: MenuItem[] = [
+  {
+    key: 'delete',
+    label: 'Delete this row',
+    icon: 'trash3',
+    show: (data) => !!data?.role,
+    onClick: (data) => {
+      console.log(data)
+    },
+  },
+  {
+    key: 'download',
+    label: 'Download this row',
+    icon: 'download',
+    onClick: (data) => {
+      console.log(data)
+    },
+  },
+]
+
+const changeRow = () => {
+  tableItems[0].role = tableItems[0].role ? '' : 'Member'
+}
 </script>
 
 <template>
@@ -637,6 +728,18 @@ const vip = ref(false)
       </div>
     </div>
 
+    <h2 class="mb-2 mt-8">Table</h2>
+    <div class="mb-6 flex flex-col gap-4">
+      <CommonButton variant="primary" @click="changeRow()"
+        >Change row</CommonButton
+      >
+      <CommonSimpleTable
+        :headers="tableHeaders"
+        :items="tableItems"
+        :actions="tableActions"
+      ></CommonSimpleTable>
+    </div>
+
     <div class="w-1/2">
       <h2 class="text-lg">Avatar</h2>
 
@@ -794,6 +897,46 @@ const vip = ref(false)
       </template>
     </div>
 
+    <section>
+      <h2>Common Action Menu</h2>
+      <CommonActionMenu
+        :entity="{ id: 'test-me', name: 'playground' }"
+        :actions="[
+          {
+            key: 'delete-customer',
+            label: 'Delete Customer',
+            variant: 'danger',
+            icon: 'trash3',
+            onClick: (data) => {
+              console.log(data?.id, data?.name, 'Delete customer')
+            },
+          },
+          {
+            key: 'change-customer',
+            label: 'Change Customer',
+            icon: 'person-gear',
+            onClick: (data) => {
+              console.log(data?.id, data?.name, 'Change customer')
+            },
+          },
+        ]"
+      />
+      <h3>Single Action Item</h3>
+      <CommonActionMenu
+        :entity="{ id: 'test-me', name: 'playground' }"
+        :actions="[
+          {
+            key: 'change-customer',
+            label: 'Change Customer',
+            icon: 'person-gear',
+            onClick: (id) => {
+              console.log(id, 'Delete customer')
+            },
+          },
+        ]"
+      />
+    </section>
+
     <h2 class="mb-2 mt-8">Flyout and Dialog</h2>
     <div class="mb-6 flex gap-4">
       <CommonButton variant="tertiary" @click="dialog.open()"
diff --git a/i18n/zammad.pot b/i18n/zammad.pot
index 48a860a86de9..b2b5ce10355d 100644
--- a/i18n/zammad.pot
+++ b/i18n/zammad.pot
@@ -738,11 +738,16 @@ msgstr ""
 msgid "Action execution"
 msgstr ""
 
+#: app/frontend/apps/desktop/components/CommonActionMenu/CommonActionMenu.vue
+msgid "Action menu button"
+msgstr ""
+
 #: app/assets/javascripts/app/models/macro.coffee
 #: app/assets/javascripts/app/models/template.coffee
 #: app/assets/javascripts/app/views/integration/pgp_list.jst.eco
 #: app/assets/javascripts/app/views/integration/smime_list.jst.eco
 #: app/assets/javascripts/app/views/ssl_certificates_list.jst.eco
+#: app/frontend/apps/desktop/components/CommonSimpleTable/CommonSimpleTable.vue
 msgid "Actions"
 msgstr ""