From e42f4d91646839d16e8007b0057576ccc8ff1425 Mon Sep 17 00:00:00 2001
From: Dusan Vuckovic <dv@zammad.com>
Date: Fri, 3 May 2024 13:02:57 +0200
Subject: [PATCH] Feature: Desktop - Add form field permissions.

---
 .../components/CommonSelect/CommonSelect.vue  |  59 +--
 .../FieldAutoCompleteInput.vue                |   4 +-
 .../FieldPermissionsInput.vue                 | 218 ++++++++++
 .../__tests__/FieldPermissions.spec.ts        | 302 +++++++++++++
 .../Form/fields/FieldPermissions/index.ts     |  26 ++
 .../Form/fields/FieldPermissions/types.ts     |  22 +
 .../fields/FieldSelect/FieldSelectInput.vue   |   4 +-
 .../FieldTreeSelect/FieldTreeSelectInput.vue  |   4 +-
 .../FieldTreeSelectInputDropdown.vue          |  59 +--
 .../NavigationMenu/NavigationMenu.vue         |  12 +-
 .../NavigationMenu/NavigationMenuFilter.vue   |  33 +-
 .../composables/useTransitionCollapse.ts      |  51 +++
 .../pages/dashboard/views/Playground.vue      | 396 +++++++++++++++++-
 .../apps/desktop/styles/transitions.css       |  16 +-
 i18n/zammad.pot                               |   4 +
 15 files changed, 1063 insertions(+), 147 deletions(-)
 create mode 100644 app/frontend/apps/desktop/components/Form/fields/FieldPermissions/FieldPermissionsInput.vue
 create mode 100644 app/frontend/apps/desktop/components/Form/fields/FieldPermissions/__tests__/FieldPermissions.spec.ts
 create mode 100644 app/frontend/apps/desktop/components/Form/fields/FieldPermissions/index.ts
 create mode 100644 app/frontend/apps/desktop/components/Form/fields/FieldPermissions/types.ts
 create mode 100644 app/frontend/apps/desktop/composables/useTransitionCollapse.ts

diff --git a/app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue b/app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue
index b7671990a2c9..52d35eabf85f 100644
--- a/app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue
+++ b/app/frontend/apps/desktop/components/CommonSelect/CommonSelect.vue
@@ -29,6 +29,7 @@ import type { AutoCompleteOption } from '#shared/components/Form/fields/FieldAut
 import testFlags from '#shared/utils/testFlags.ts'
 import CommonLabel from '#shared/components/CommonLabel/CommonLabel.vue'
 import { i18n } from '#shared/i18n.ts'
+import { useTransitionCollapse } from '#desktop/composables/useTransitionCollapse.ts'
 import CommonSelectItem from './CommonSelectItem.vue'
 import { useCommonSelect } from './useCommonSelect.ts'
 import type { CommonSelectInternalInstance } from './types.ts'
@@ -305,7 +306,8 @@ const emptyLabelText = computed(() => {
   return props.filter ? __('No results found') : __('Start typing to search…')
 })
 
-const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
+const { collapseDuration, collapseEnter, collapseAfterEnter, collapseLeave } =
+  useTransitionCollapse()
 </script>
 
 <template>
@@ -316,7 +318,13 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
     :focus="moveFocusToDropdown"
   />
   <Teleport to="body">
-    <Transition :duration="duration">
+    <Transition
+      name="collapse"
+      :duration="collapseDuration"
+      @enter="collapseEnter"
+      @after-enter="collapseAfterEnter"
+      @leave="collapseLeave"
+    >
       <div
         v-if="showDropdown"
         id="common-select"
@@ -324,14 +332,7 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
         class="fixed z-10 flex min-h-9 antialiased"
         :style="dropdownStyle"
       >
-        <div
-          class="select-dialog w-full"
-          role="menu"
-          :class="{
-            'select-dialog--up': hasDirectionUp,
-            'select-dialog--down': !hasDirectionUp,
-          }"
-        >
+        <div class="w-full" role="menu">
           <div
             class="flex h-full flex-col items-start border-x border-neutral-100 bg-white dark:border-gray-900 dark:bg-gray-500"
             :class="{
@@ -395,41 +396,3 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
     </Transition>
   </Teleport>
 </template>
-
-<style scoped>
-.select-dialog {
-  &--down {
-    @apply origin-top;
-  }
-
-  &--up {
-    @apply origin-bottom;
-  }
-}
-
-.v-enter-active {
-  .select-dialog {
-    @apply duration-200 ease-out;
-  }
-}
-
-.v-leave-active {
-  .select-dialog {
-    @apply duration-200 ease-in;
-  }
-}
-
-.v-enter-to,
-.v-leave-from {
-  .select-dialog {
-    @apply scale-y-100 opacity-100;
-  }
-}
-
-.v-enter-from,
-.v-leave-to {
-  .select-dialog {
-    @apply scale-y-50 opacity-0;
-  }
-}
-</style>
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue b/app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue
index 23b55b469d1f..ba2c4bca8575 100644
--- a/app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldAutoComplete/FieldAutoCompleteInput.vue
@@ -457,7 +457,7 @@ useFormBlock(contextReactive, openSelectDropdown)
               </span>
               <CommonIcon
                 :aria-label="i18n.t('Unselect Option')"
-                class="shrink-0 fill-stone-200 hover:fill-black focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
+                class="shrink-0 fill-stone-200 hover:fill-black focus:outline-none focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
                 name="x-lg"
                 size="xs"
                 role="button"
@@ -520,7 +520,7 @@ useFormBlock(contextReactive, openSelectDropdown)
         <CommonIcon
           v-if="context.clearable && hasValue && !context.disabled"
           :aria-label="i18n.t('Clear Selection')"
-          class="shrink-0 fill-stone-200 hover:fill-black focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
+          class="shrink-0 fill-stone-200 hover:fill-black focus:outline-none focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
           name="x-lg"
           size="xs"
           role="button"
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/FieldPermissionsInput.vue b/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/FieldPermissionsInput.vue
new file mode 100644
index 000000000000..376ba4b2fcec
--- /dev/null
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/FieldPermissionsInput.vue
@@ -0,0 +1,218 @@
+<!-- Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/ -->
+
+<script setup lang="ts">
+import { computed, ref, toRef } from 'vue'
+import { cloneDeep } from 'lodash-es'
+import { useTransitionCollapse } from '#desktop/composables/useTransitionCollapse.ts'
+import useValue from '#shared/components/Form/composables/useValue.ts'
+import { i18n } from '#shared/i18n.ts'
+import { useDelegateFocus } from '#shared/composables/useDelegateFocus.ts'
+import type { PermissionsChildOption, PermissionsProps } from './types.ts'
+
+const props = defineProps<{
+  context: PermissionsProps
+}>()
+
+const contextReactive = toRef(props, 'context')
+
+const { localValue } = useValue(contextReactive)
+
+const valueLookup = computed<Record<string, boolean>>(() => {
+  const values: string[] = localValue.value || []
+
+  return values.reduce((value: Record<string, boolean>, key) => {
+    value[key] = true
+
+    return value
+  }, {})
+})
+
+const parentChildLookup = ref(
+  props.context.options.reduce(
+    (lookup: Record<string, PermissionsChildOption[]>, option) => {
+      lookup[option.value] = option.children
+      return lookup
+    },
+    {},
+  ),
+)
+
+const initializeCollapseState = (key: string) =>
+  localValue.value.some((value: string) =>
+    parentChildLookup.value[key]?.some((option) => option.value === value),
+  )
+
+const collapseLookup = ref(
+  props.context.options.reduce((lookup: Record<string, boolean>, option) => {
+    lookup[option.value] = initializeCollapseState(option.value)
+    return lookup
+  }, {}),
+)
+
+const updateValue = (key: string, state: boolean | undefined) => {
+  const values: string[] = cloneDeep(localValue.value) || []
+
+  if (state === true && !values.includes(key)) {
+    values.push(key)
+    localValue.value = values
+    collapseLookup.value[key] = false
+  } else if (state === false) {
+    localValue.value = values.filter((value) => value !== key)
+    collapseLookup.value[key] = initializeCollapseState(key)
+  }
+}
+
+const toggleCollapse = (value: string) => {
+  collapseLookup.value[value] = !collapseLookup.value[value]
+}
+
+const { delegateFocus } = useDelegateFocus(
+  props.context.id,
+  `permissions_toggle_${props.context.id}_${props.context?.options && props.context?.options[0]?.value}`,
+)
+
+const { collapseDuration, collapseEnter, collapseAfterEnter, collapseLeave } =
+  useTransitionCollapse()
+</script>
+
+<template>
+  <output
+    :id="context.id"
+    class="block rounded-lg bg-blue-200 focus:outline focus:outline-1 focus:outline-offset-1 focus:outline-blue-800 hover:focus:outline-blue-800 dark:bg-gray-700"
+    role="tree"
+    :class="context.classes.input"
+    :name="context.node.name"
+    :aria-disabled="context.disabled"
+    :aria-describedby="context.describedBy"
+    :tabindex="context.disabled ? '-1' : '0'"
+    v-bind="context.attrs"
+    @focus="delegateFocus"
+  >
+    <div
+      v-for="(option, index) in context.options"
+      :key="`option-${option.value}`"
+      class="flex flex-col"
+    >
+      <div
+        class="flex items-center gap-2.5 px-3 py-2.5"
+        role="treeitem"
+        :aria-selected="valueLookup[option.value]"
+      >
+        <FormKit
+          :id="`permissions_toggle_${context.id}_${option.value}`"
+          :model-value="valueLookup[option.value]"
+          type="toggle"
+          :name="`permissions_toggle_${context.id}_${option.value}`"
+          :ignore="true"
+          outer-class="grow"
+          wrapper-class="justify-end gap-2.5 formkit-disabled:opacity-100"
+          inner-class="formkit-disabled:opacity-50"
+          :variants="{ true: 'True', false: 'False' }"
+          :disabled="context.disabled || option.disabled"
+          size="small"
+          :label="option.label"
+          :sections-schema="{
+            label: {
+              attrs: {
+                class: 'flex flex-col cursor-pointer',
+                for: `permissions_toggle_${context.id}_${option.value}`,
+                tabindex: '-1',
+              },
+              children: [
+                {
+                  $cmp: 'CommonLabel',
+                  props: {
+                    class: 'text-black dark:text-white',
+                  },
+                  children: i18n.t(option.label, option.value),
+                },
+                {
+                  $cmp: 'CommonLabel',
+                  props: {
+                    class: 'text-stone-200 dark:text-neutral-500',
+                  },
+                  children: i18n.t(option.description),
+                },
+              ],
+            },
+          }"
+          @update:model-value="updateValue(option.value, $event)"
+          @blur="index === 0 ? context.handlers.blur : undefined"
+        />
+        <CommonIcon
+          v-if="option.children && !valueLookup[option.value]"
+          class="shrink-0 fill-stone-200 hover:fill-black focus:outline-none focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
+          :aria-label="i18n.t('Toggle Group')"
+          :name="collapseLookup[option.value] ? 'chevron-up' : 'chevron-down'"
+          size="xs"
+          role="button"
+          tabindex="0"
+          @click.stop="toggleCollapse(option.value)"
+          @keypress.enter.prevent.stop="toggleCollapse(option.value)"
+          @keypress.space.prevent.stop="toggleCollapse(option.value)"
+        />
+      </div>
+      <Transition
+        name="collapse"
+        :duration="collapseDuration"
+        @enter="collapseEnter"
+        @after-enter="collapseAfterEnter"
+        @leave="collapseLeave"
+      >
+        <div
+          v-if="option.children"
+          v-show="collapseLookup[option.value]"
+          class="ms-10 flex flex-col"
+          role="group"
+        >
+          <div
+            v-for="childOption in option.children"
+            :key="`child-option-${childOption.value}`"
+            class="flex gap-2.5 px-3 py-2.5"
+            role="treeitem"
+            :aria-selected="valueLookup[childOption.value]"
+          >
+            <FormKit
+              :id="`permissions_child_toggle_${context.id}_${childOption.value}`"
+              :model-value="valueLookup[childOption.value]"
+              type="toggle"
+              :name="`permissions_child_toggle_${context.id}_${childOption.value}`"
+              :ignore="true"
+              wrapper-class="gap-2.5"
+              :variants="{ true: 'True', false: 'False' }"
+              :disabled="context.disabled"
+              size="small"
+              :label="childOption.label"
+              :sections-schema="{
+                label: {
+                  attrs: {
+                    class: 'flex flex-col cursor-pointer',
+                    for: `permissions_child_toggle_${context.id}_${childOption.value}`,
+                    tabindex: '-1',
+                  },
+                  children: [
+                    {
+                      $cmp: 'CommonLabel',
+                      props: {
+                        class: 'text-black dark:text-white',
+                      },
+                      children: i18n.t(childOption.label, childOption.value),
+                    },
+                    {
+                      $cmp: 'CommonLabel',
+                      props: {
+                        class: 'text-stone-200 dark:text-neutral-500',
+                      },
+                      children: i18n.t(childOption.description),
+                    },
+                  ],
+                },
+              }"
+              @update:model-value="updateValue(childOption.value, $event)"
+            />
+          </div>
+        </div>
+      </Transition>
+    </div>
+  </output>
+</template>
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/__tests__/FieldPermissions.spec.ts b/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/__tests__/FieldPermissions.spec.ts
new file mode 100644
index 000000000000..eb816d08f678
--- /dev/null
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/__tests__/FieldPermissions.spec.ts
@@ -0,0 +1,302 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import { FormKit } from '@formkit/vue'
+import {
+  getAllByRole,
+  getAllByTestId,
+  getByRole,
+  waitFor,
+} from '@testing-library/vue'
+import { getNode } from '@formkit/core'
+import { i18n } from '#shared/i18n.ts'
+import { renderComponent } from '#tests/support/components/index.ts'
+import { waitForNextTick } from '#tests/support/utils.ts'
+import type { PermissionsParentOption } from '../types.ts'
+
+const testOptions: PermissionsParentOption[] = [
+  {
+    value: 'admin',
+    label: 'Admin interface (%s)',
+    description: 'To configure your system.',
+    children: [
+      {
+        value: 'admin.user',
+        label: 'Users (%s)',
+        description: 'To manage all users of your system.',
+      },
+    ],
+  },
+  {
+    value: 'ticket',
+    label: 'Ticket (%s)',
+    description: 'To access the ticket interface.',
+    disabled: true,
+    children: [
+      {
+        value: 'ticket.agent',
+        label: 'Agent Tickets (%s)',
+        description: 'To access the agent tickets based on group access.',
+      },
+      {
+        value: 'ticket.customer',
+        label: 'Customer Tickets (%s)',
+        description: 'To access the customer tickets.',
+      },
+    ],
+  },
+  {
+    value: 'user_preferences',
+    label: 'Profile settings (%s)',
+    description: 'To access the personal settings.',
+  },
+]
+
+const wrapperParameters = {
+  form: true,
+  formField: true,
+}
+
+const renderPermissions = async (props: Record<string, unknown> = {}) => {
+  const view = renderComponent(FormKit, {
+    ...wrapperParameters,
+    props: {
+      id: 'permissions',
+      type: 'permissions',
+      name: 'permissions',
+      label: 'Permissions',
+      options: testOptions,
+      value: [],
+      ...props,
+    },
+  })
+
+  await waitForNextTick(true)
+
+  return view
+}
+
+describe('Form - Field - Permissions', () => {
+  it('renders parent options and their labels', async () => {
+    const wrapper = await renderPermissions()
+
+    const permissions = wrapper.getAllByRole('treeitem')
+
+    expect(permissions).toHaveLength(testOptions.length)
+
+    permissions.forEach((permission, index) => {
+      expect(getByRole(permission, 'switch')).toBeInTheDocument()
+
+      const labels = getAllByTestId(permission, 'common-label')
+
+      expect(labels[0]).toHaveTextContent(
+        i18n.t(testOptions[index].label, testOptions[index].value),
+      )
+
+      expect(labels[1]).toHaveTextContent(testOptions[index].description!)
+    })
+  })
+
+  it('renders child options and their labels', async () => {
+    const wrapper = await renderPermissions({
+      value: ['ticket.agent', 'ticket.customer'],
+    })
+
+    const childGroup = wrapper.getByRole('group')
+
+    const childPermissions = getAllByRole(childGroup, 'treeitem')
+
+    expect(childPermissions).toHaveLength(testOptions[1].children!.length)
+
+    childPermissions.forEach((childPermission, index) => {
+      expect(getByRole(childPermission, 'switch')).toBeInTheDocument()
+
+      const labels = getAllByTestId(childPermission, 'common-label')
+
+      expect(labels[0]).toHaveTextContent(
+        i18n.t(
+          testOptions[1].children![index].label,
+          testOptions[1].children![index].value,
+        ),
+      )
+
+      expect(labels[1]).toHaveTextContent(
+        testOptions[1].children![index].description!,
+      )
+    })
+  })
+
+  it('supports toggling collapsible group of child options', async () => {
+    const wrapper = await renderPermissions()
+
+    expect(wrapper.queryByRole('group')).not.toBeInTheDocument()
+
+    const permissions = wrapper.getAllByRole('treeitem')
+
+    const toggleButton = getByRole(permissions[1], 'button', {
+      name: 'Toggle Group',
+    })
+
+    await wrapper.events.click(toggleButton)
+
+    const childGroup = wrapper.getByRole('group')
+
+    const childPermissions = getAllByRole(childGroup, 'treeitem')
+
+    expect(childPermissions).toHaveLength(testOptions[1].children!.length)
+
+    await wrapper.events.click(toggleButton)
+
+    expect(childGroup).not.toBeVisible()
+  })
+
+  it('collapses child options when parent is selected', async () => {
+    const wrapper = await renderPermissions({
+      value: ['admin.user'],
+    })
+
+    const permissions = wrapper.getAllByRole('treeitem')
+
+    const childGroup = wrapper.getByRole('group')
+
+    const childPermissions = getAllByRole(childGroup, 'treeitem')
+
+    expect(childPermissions).toHaveLength(testOptions[0].children!.length)
+
+    const toggleSwitch = getByRole(permissions[0], 'switch')
+
+    await wrapper.events.click(toggleSwitch)
+
+    await waitFor(() => {
+      expect(wrapper.emitted().inputRaw).toBeTruthy()
+    })
+
+    expect(childGroup).not.toBeVisible()
+  })
+
+  it('supports disabled state for parent options', async () => {
+    const wrapper = await renderPermissions()
+
+    const permissions = wrapper.getAllByRole('treeitem')
+
+    const toggleSwitch = getByRole(permissions[1], 'switch')
+
+    expect(toggleSwitch).toBeDisabled()
+  })
+})
+
+// Cover all use cases from the FormKit custom input checklist.
+//   More info here: https://formkit.com/essentials/custom-inputs#input-checklist
+describe('Form - Field - Permissions - Input Checklist', () => {
+  it('implements input id attribute', async () => {
+    const view = await renderPermissions({
+      id: 'test_id',
+    })
+
+    expect(view.getByLabelText('Permissions')).toHaveAttribute('id', 'test_id')
+  })
+
+  it('implements input name', async () => {
+    const view = await renderPermissions({
+      name: 'test_name',
+    })
+
+    expect(view.getByLabelText('Permissions')).toHaveAttribute(
+      'name',
+      'test_name',
+    )
+  })
+
+  it('implements blur handler', async () => {
+    const blurHandler = vi.fn()
+
+    const view = await renderPermissions({
+      onBlur: blurHandler,
+    })
+
+    view.getByLabelText('Permissions').focus()
+
+    await view.events.tab()
+
+    expect(blurHandler).toHaveBeenCalledOnce()
+  })
+
+  it('implements input handler', async () => {
+    const wrapper = await renderPermissions()
+
+    for await (const [i, item] of [testOptions[0], testOptions[2]].entries()) {
+      wrapper.events.click(
+        wrapper.getByLabelText(
+          `${i18n.t(item.label, item.value)}${item.description}`,
+        ),
+      )
+
+      await waitFor(() => {
+        expect(wrapper.emitted().inputRaw[i]).toBeTruthy()
+      })
+    }
+
+    await waitFor(() => {
+      expect(getNode('permissions')?.value).toEqual([
+        testOptions[0].value,
+        testOptions[2].value,
+      ])
+    })
+  })
+
+  it('implements input value display', async () => {
+    const wrapper = await renderPermissions({
+      value: [testOptions[2].value],
+    })
+
+    const toggleSwitch1 = wrapper.getByLabelText(
+      `${i18n.t(testOptions[0].label, testOptions[0].value)}${testOptions[0].description}`,
+    )
+
+    expect(toggleSwitch1).not.toBeChecked()
+
+    const toggleSwitch2 = wrapper.getByLabelText(
+      `${i18n.t(testOptions[1].label, testOptions[1].value)}${testOptions[1].description}`,
+    )
+
+    expect(toggleSwitch2).not.toBeChecked()
+
+    const toggleSwitch3 = wrapper.getByLabelText(
+      `${i18n.t(testOptions[2].label, testOptions[2].value)}${testOptions[2].description}`,
+    )
+
+    expect(toggleSwitch3).toBeChecked()
+  })
+
+  it('implements disabled', async () => {
+    const view = await renderPermissions({
+      disabled: true,
+    })
+
+    expect(view.getByLabelText('Permissions')).toBeDisabled()
+
+    for (const option of testOptions) {
+      expect(
+        view.getByLabelText(
+          `${i18n.t(option.label, option.value)}${option.description}`,
+        ),
+      ).toBeDisabled()
+    }
+  })
+
+  it('implements attribute passthrough', async () => {
+    const view = await renderPermissions({
+      'test-attribute': 'test_value',
+    })
+
+    expect(view.getByLabelText('Permissions')).toHaveAttribute(
+      'test-attribute',
+      'test_value',
+    )
+  })
+
+  it('implements standardized classes', async () => {
+    const view = await renderPermissions()
+
+    expect(view.getByLabelText('Permissions')).toHaveClass('formkit-input')
+  })
+})
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/index.ts b/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/index.ts
new file mode 100644
index 000000000000..7e4216eb44e1
--- /dev/null
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/index.ts
@@ -0,0 +1,26 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import type { FormKitBaseSlots, FormKitInputs } from '@formkit/inputs'
+import createInput from '#shared/form/core/createInput.ts'
+import formUpdaterTrigger from '#shared/form/features/formUpdaterTrigger.ts'
+import FieldPermissionsInput from './FieldPermissionsInput.vue'
+import type { PermissionsProps } from './types.ts'
+
+declare module '@formkit/inputs' {
+  interface FormKitInputProps<Props extends FormKitInputs<Props>> {
+    permissions: PermissionsProps
+  }
+
+  interface FormKitInputSlots<Props extends FormKitInputs<Props>> {
+    permissions: FormKitBaseSlots<Props>
+  }
+}
+
+const fieldDefinition = createInput(FieldPermissionsInput, ['options'], {
+  features: [formUpdaterTrigger()],
+})
+
+export default {
+  fieldType: 'permissions',
+  definition: fieldDefinition,
+}
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/types.ts b/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/types.ts
new file mode 100644
index 000000000000..807eab78854b
--- /dev/null
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldPermissions/types.ts
@@ -0,0 +1,22 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+import type { FormFieldContext } from '#shared/components/Form/types/field.ts'
+
+export type PermissionsChildOption = {
+  value: string
+  label: string
+  labelPlaceholder?: string[]
+  description?: string
+}
+
+export type PermissionsParentOption = {
+  value: string
+  label: string
+  description?: string
+  disabled?: boolean
+  children?: PermissionsChildOption[]
+}
+
+export type PermissionsProps = FormFieldContext<{
+  options: PermissionsParentOption[]
+}>
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue b/app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue
index 274553d5dfe3..932c8b94f3c1 100644
--- a/app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldSelect/FieldSelectInput.vue
@@ -234,7 +234,7 @@ setupMissingOrDisabledOptionHandling()
               </span>
               <CommonIcon
                 :aria-label="i18n.t('Unselect Option')"
-                class="shrink-0 fill-stone-200 hover:fill-black focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
+                class="shrink-0 fill-stone-200 hover:fill-black focus:outline-none focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
                 name="x-lg"
                 size="xs"
                 role="button"
@@ -288,7 +288,7 @@ setupMissingOrDisabledOptionHandling()
         <CommonIcon
           v-if="context.clearable && hasValue && !context.disabled"
           :aria-label="i18n.t('Clear Selection')"
-          class="shrink-0 fill-stone-200 hover:fill-black focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
+          class="shrink-0 fill-stone-200 hover:fill-black focus:outline-none focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
           name="x-lg"
           size="xs"
           role="button"
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue b/app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue
index 5cd0a5ce4005..5a271b20fba5 100644
--- a/app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInput.vue
@@ -299,7 +299,7 @@ setupMissingOrDisabledOptionHandling()
               </span>
               <CommonIcon
                 :aria-label="i18n.t('Unselect Option')"
-                class="shrink-0 fill-stone-200 hover:fill-black focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
+                class="shrink-0 fill-stone-200 hover:fill-black focus:outline-none focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
                 name="x-lg"
                 size="xs"
                 role="button"
@@ -347,7 +347,7 @@ setupMissingOrDisabledOptionHandling()
         <CommonIcon
           v-if="context.clearable && hasValue && !context.disabled"
           :aria-label="i18n.t('Clear Selection')"
-          class="shrink-0 fill-stone-200 hover:fill-black focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
+          class="shrink-0 fill-stone-200 hover:fill-black focus:outline-none focus-visible:rounded-sm focus-visible:outline focus-visible:outline-1 focus-visible:outline-offset-1 focus-visible:outline-blue-800 dark:fill-neutral-500 dark:hover:fill-white"
           name="x-lg"
           size="xs"
           role="button"
diff --git a/app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdown.vue b/app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdown.vue
index 1897a98e3bd2..37085eb20f0b 100644
--- a/app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdown.vue
+++ b/app/frontend/apps/desktop/components/Form/fields/FieldTreeSelect/FieldTreeSelectInputDropdown.vue
@@ -18,6 +18,7 @@ import testFlags from '#shared/utils/testFlags.ts'
 import { i18n } from '#shared/i18n.ts'
 import CommonLabel from '#shared/components/CommonLabel/CommonLabel.vue'
 import { useCommonSelect } from '#desktop/components/CommonSelect/useCommonSelect.ts'
+import { useTransitionCollapse } from '#desktop/composables/useTransitionCollapse.ts'
 import type {
   FlatSelectOption,
   MatchedFlatSelectOption,
@@ -391,7 +392,8 @@ const highlightedOptions = computed(() =>
   }),
 )
 
-const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
+const { collapseDuration, collapseEnter, collapseAfterEnter, collapseLeave } =
+  useTransitionCollapse()
 </script>
 
 <template>
@@ -402,7 +404,13 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
     :focus="moveFocusToDropdown"
   />
   <Teleport to="body">
-    <Transition :duration="duration">
+    <Transition
+      name="collapse"
+      :duration="collapseDuration"
+      @enter="collapseEnter"
+      @after-enter="collapseAfterEnter"
+      @leave="collapseLeave"
+    >
       <div
         v-if="showDropdown"
         id="field-tree-select-input-dropdown"
@@ -410,14 +418,7 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
         class="fixed z-10 flex min-h-9 antialiased"
         :style="dropdownStyle"
       >
-        <div
-          class="select-dialog w-full"
-          role="menu"
-          :class="{
-            'select-dialog--up': hasDirectionUp,
-            'select-dialog--down': !hasDirectionUp,
-          }"
-        >
+        <div class="w-full" role="menu">
           <div
             class="flex h-full flex-col items-start border-x border-neutral-100 bg-white dark:border-gray-900 dark:bg-gray-500"
             :class="{
@@ -517,41 +518,3 @@ const duration = VITE_TEST_MODE ? undefined : { enter: 300, leave: 200 }
     </Transition>
   </Teleport>
 </template>
-
-<style scoped>
-.select-dialog {
-  &--down {
-    @apply origin-top;
-  }
-
-  &--up {
-    @apply origin-bottom;
-  }
-}
-
-.v-enter-active {
-  .select-dialog {
-    @apply duration-200 ease-out;
-  }
-}
-
-.v-leave-active {
-  .select-dialog {
-    @apply duration-200 ease-in;
-  }
-}
-
-.v-enter-to,
-.v-leave-from {
-  .select-dialog {
-    @apply scale-y-100 opacity-100;
-  }
-}
-
-.v-enter-from,
-.v-leave-to {
-  .select-dialog {
-    @apply scale-y-50 opacity-0;
-  }
-}
-</style>
diff --git a/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenu.vue b/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenu.vue
index fcc34d7db82a..9c7ce6bdded5 100644
--- a/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenu.vue
+++ b/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenu.vue
@@ -10,6 +10,7 @@ import { useSessionStore } from '#shared/stores/session.ts'
 import NavigationMenuHeader from '#desktop/components/NavigationMenu/NavigationMenuHeader.vue'
 import NavigationMenuList from '#desktop/components/NavigationMenu/NavigationMenuList.vue'
 import NavigationMenuFilter from '#desktop/components/NavigationMenu/NavigationMenuFilter.vue'
+import { useTransitionCollapse } from '#desktop/composables/useTransitionCollapse.ts'
 import type { NavigationMenuCategory, NavigationMenuEntry } from './types'
 
 interface Props {
@@ -81,6 +82,9 @@ const allFilteredEntries = computed<NavigationMenuEntry[]>(() => {
     .flat()
     .filter((entry) => isMatchingFilter(entry))
 })
+
+const { collapseDuration, collapseEnter, collapseAfterEnter, collapseLeave } =
+  useTransitionCollapse()
 </script>
 
 <template>
@@ -112,7 +116,13 @@ const allFilteredEntries = computed<NavigationMenuEntry[]>(() => {
           @toggle-collapsed="toggleCategory"
         />
 
-        <Transition name="slide" mode="out-in">
+        <Transition
+          name="collapse"
+          :duration="collapseDuration"
+          @enter="collapseEnter"
+          @after-enter="collapseAfterEnter"
+          @leave="collapseLeave"
+        >
           <NavigationMenuList
             v-show="
               permittedEntries[category.label] &&
diff --git a/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuFilter.vue b/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuFilter.vue
index 5f6134fa3893..2b3cff48fdbc 100644
--- a/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuFilter.vue
+++ b/app/frontend/apps/desktop/components/NavigationMenu/NavigationMenuFilter.vue
@@ -38,6 +38,8 @@ watchEffect(() => {
 
   closeFilterField()
 })
+
+const duration = VITE_TEST_MODE ? undefined : 500
 </script>
 
 <template>
@@ -75,7 +77,7 @@ watchEffect(() => {
       type="text"
       role="searchbox"
     />
-    <Transition name="fade-out-delay">
+    <Transition name="fade-move" :duration="duration">
       <CommonButton
         v-if="filterFieldOpen"
         icon="x-lg"
@@ -87,32 +89,3 @@ watchEffect(() => {
     </Transition>
   </div>
 </template>
-
-<style scoped>
-.fade-out-delay {
-  &-enter-active,
-  &-leave-active {
-    transition: opacity 0.3s ease;
-  }
-
-  &-enter-active {
-    transition-delay: 50ms;
-  }
-
-  &-enter-from {
-    opacity: 0;
-  }
-
-  &-enter-to {
-    opacity: 1;
-  }
-
-  &-leave-from {
-    opacity: 1;
-  }
-
-  &-leave-to {
-    opacity: 0;
-  }
-}
-</style>
diff --git a/app/frontend/apps/desktop/composables/useTransitionCollapse.ts b/app/frontend/apps/desktop/composables/useTransitionCollapse.ts
new file mode 100644
index 000000000000..09e3cc267c3d
--- /dev/null
+++ b/app/frontend/apps/desktop/composables/useTransitionCollapse.ts
@@ -0,0 +1,51 @@
+// Copyright (C) 2012-2024 Zammad Foundation, https://zammad-foundation.org/
+
+export const useTransitionCollapse = () => {
+  const collapseDuration = VITE_TEST_MODE ? undefined : 200
+
+  const collapseEnter = (element: Element | HTMLElement) => {
+    if (!(element instanceof HTMLElement)) return
+
+    element.style.height = 'auto'
+
+    const { height } = getComputedStyle(element)
+
+    // Set the height of the element to zero for the enter transition.
+    element.style.height = '0'
+
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        element.style.height = height
+      })
+    })
+  }
+
+  const collapseAfterEnter = (element: Element | HTMLElement) => {
+    if (!(element instanceof HTMLElement)) return
+
+    // Set the height of the element to automatic for after the enter transition.
+    element.style.height = 'auto'
+  }
+
+  const collapseLeave = (element: Element | HTMLElement) => {
+    if (!(element instanceof HTMLElement)) return
+
+    const { height } = getComputedStyle(element)
+
+    // Set the height of the element to real height for the leave transition.
+    element.style.height = height
+
+    requestAnimationFrame(() => {
+      setTimeout(() => {
+        element.style.height = '0'
+      })
+    })
+  }
+
+  return {
+    collapseDuration,
+    collapseEnter,
+    collapseAfterEnter,
+    collapseLeave,
+  }
+}
diff --git a/app/frontend/apps/desktop/pages/dashboard/views/Playground.vue b/app/frontend/apps/desktop/pages/dashboard/views/Playground.vue
index bc361f2eac61..f6990d7062a7 100644
--- a/app/frontend/apps/desktop/pages/dashboard/views/Playground.vue
+++ b/app/frontend/apps/desktop/pages/dashboard/views/Playground.vue
@@ -50,6 +50,382 @@ const longOption = ref({
     'Lorem ipsum dolor sit amet, consectetur adipiscing elit, nullam pulvinar nunc sapien, vitae malesuada justo interdum feugiat, mauris odio, mattis et malesuada quis, vulputate vitae enim',
 })
 
+const permissions = [
+  {
+    value: 'admin',
+    label: 'Admin interface (%s)',
+    description: 'To configure your system.',
+    children: [
+      {
+        value: 'admin.user',
+        label: 'Users (%s)',
+        description: 'To manage all users of your system.',
+      },
+      {
+        value: 'admin.group',
+        label: 'Groups (%s)',
+        description: 'To manage groups of your system.',
+      },
+      {
+        value: 'admin.role',
+        label: 'Roles (%s)',
+        description: 'To manage roles of your system.',
+      },
+      {
+        value: 'admin.organization',
+        label: 'Organizations (%s)',
+        description: 'To manage all organizations of your system.',
+      },
+      {
+        value: 'admin.overview',
+        label: 'Overviews (%s)',
+        description: 'To manage ticket overviews of your system.',
+      },
+      {
+        value: 'admin.text_module',
+        label: 'Text modules (%s)',
+        description: 'To manage text modules of your system.',
+      },
+      {
+        value: 'admin.macro',
+        label: 'Macros (%s)',
+        description: 'To manage ticket macros of your system.',
+      },
+      {
+        value: 'admin.template',
+        label: 'Templates (%s)',
+        description: 'To manage ticket templates of your system.',
+      },
+      {
+        value: 'admin.tag',
+        label: 'Tags (%s)',
+        description: 'To manage ticket tags of your system.',
+      },
+      {
+        value: 'admin.calendar',
+        label: 'Calendar (%s)',
+        description: 'To manage calendars of your system.',
+      },
+      {
+        value: 'admin.sla',
+        label: 'SLAs (%s)',
+        description: 'To manage Service Level Agreements of your system.',
+      },
+      {
+        value: 'admin.trigger',
+        label: 'Trigger (%s)',
+        description: 'To manage triggers of your system.',
+      },
+      {
+        value: 'admin.public_links',
+        label: 'Public Links (%s)',
+        description: 'To manage public links of your system.',
+      },
+      {
+        value: 'admin.webhook',
+        label: 'Webhook (%s)',
+        description: 'To manage webhooks of your system.',
+      },
+      {
+        value: 'admin.scheduler',
+        label: 'Scheduler (%s)',
+        description: 'To manage schedulers of your system.',
+      },
+      {
+        value: 'admin.report_profile',
+        label: 'Report Profiles (%s)',
+        description: 'To manage report profiles of your system.',
+      },
+      {
+        value: 'admin.time_accounting',
+        label: 'Time Accounting (%s)',
+        description: 'To manage time accounting settings of your system.',
+      },
+      {
+        value: 'admin.knowledge_base',
+        label: 'Knowledge Base (%s)',
+        description: 'To create and set up Knowledge Base.',
+      },
+      {
+        value: 'admin.channel_web',
+        label: 'Web (%s)',
+        description: 'To manage web channel of your system.',
+      },
+      {
+        value: 'admin.channel_formular',
+        label: 'Form (%s)',
+        description: 'To manage form channel of your system.',
+      },
+      {
+        value: 'admin.channel_email',
+        label: 'Email (%s)',
+        description: 'To manage email channel of your system.',
+      },
+      {
+        value: 'admin.channel_sms',
+        label: 'SMS (%s)',
+        description: 'To manage SMS channel of your system.',
+      },
+      {
+        value: 'admin.channel_chat',
+        label: 'Chat (%s)',
+        description: 'To manage chat channel of your system.',
+      },
+      {
+        value: 'admin.channel_google',
+        label: 'Google (%s)',
+        description: 'To manage Google channel of your system.',
+      },
+      {
+        value: 'admin.channel_microsoft365',
+        label: ' Microsoft 365 (%s)',
+        description: 'To manage Microsoft 365 channel of your system.',
+      },
+      {
+        value: 'admin.channel_twitter',
+        label: 'Twitter (%s)',
+        description: 'To manage Twitter channel of your system.',
+      },
+      {
+        value: 'admin.channel_facebook',
+        label: 'Facebook (%s)',
+        description: 'To manage Facebook channel of your system.',
+      },
+      {
+        value: 'admin.channel_telegram',
+        label: 'Telegram (%s)',
+        description: 'To manage Telegram channel of your system.',
+      },
+      {
+        value: 'admin.channel_whatsapp',
+        label: 'WhatsApp (%s)',
+        description: 'To manage WhatsApp channel of your system.',
+      },
+      {
+        value: 'admin.branding',
+        label: 'Branding (%s)',
+        description: 'To manage branding settings of your system.',
+      },
+      {
+        value: 'admin.setting_system',
+        label: 'System (%s)',
+        description: 'To manage core system settings.',
+      },
+      {
+        value: 'admin.security',
+        label: 'Security (%s)',
+        description: 'To manage security settings of your system.',
+      },
+      {
+        value: 'admin.ticket',
+        label: 'Ticket (%s)',
+        description: 'To manage ticket settings of your system.',
+      },
+      {
+        value: 'admin.integration',
+        label: 'Integrations (%s)',
+        description: 'To manage integrations of your system.',
+      },
+      {
+        value: 'admin.api',
+        label: 'API (%s)',
+        description: 'To manage API of your system.',
+      },
+      {
+        value: 'admin.object',
+        label: 'Objects (%s)',
+        description: 'To manage object attributes of your system.',
+      },
+      {
+        value: 'admin.ticket_state',
+        label: 'Ticket States (%s)',
+        description: 'To manage ticket states of your system.',
+      },
+      {
+        value: 'admin.ticket_priority',
+        label: 'Ticket Priorities (%s)',
+        description: 'To manage ticket priorities of your system.',
+      },
+      {
+        value: 'admin.core_workflow',
+        label: 'Core Workflows (%s)',
+        description: 'To manage core workflows of your system.',
+      },
+      {
+        value: 'admin.translation',
+        label: 'Translations (%s)',
+        description: 'To manage translations of your system.',
+      },
+      {
+        value: 'admin.data_privacy',
+        label: 'Data Privacy (%s)',
+        description: 'To delete existing data of your system.',
+      },
+      {
+        value: 'admin.maintenance',
+        label: 'Maintenance (%s)',
+        description: 'To manage maintenance mode of your system.',
+      },
+      {
+        value: 'admin.monitoring',
+        label: 'Monitoring (%s)',
+        description: 'To manage monitoring of your system.',
+      },
+      {
+        value: 'admin.package',
+        label: 'Packages (%s)',
+        description: 'To manage packages of your system.',
+      },
+
+      {
+        value: 'admin.session',
+        label: 'Sessions (%s)',
+        description: 'To manage active user sessions of your system.',
+      },
+      {
+        value: 'admin.system_report',
+        label: 'System Report (%s)',
+        description: 'To manage system report of your system.',
+      },
+    ],
+  },
+  {
+    value: 'chat',
+    label: 'Chat (%s)',
+    description: 'To access the chat interface.',
+    disabled: true,
+    children: [
+      {
+        value: 'chat.agent',
+        label: 'Agent Chat (%s)',
+        description: 'To access the agent chat features.',
+      },
+    ],
+  },
+  {
+    value: 'cti',
+    label: 'Phone (%s)',
+    description: 'To access the phone interface.',
+    disabled: true,
+    children: [
+      {
+        value: 'cti.agent',
+        label: 'Agent Phone (%s)',
+        description: 'To access the agent phone features.',
+      },
+    ],
+  },
+  {
+    value: 'knowledge_base',
+    label: 'Knowledge Base (%s)',
+    description: 'To access the knowledge base interface.',
+    disabled: true,
+    children: [
+      {
+        value: 'knowledge_base.editor',
+        label: 'Knowledge Base Editor (%s)',
+        description: 'To access the knowledge base editor features.',
+      },
+      {
+        value: 'knowledge_base.reader',
+        label: 'Knowledge Base Reader (%s)',
+        description: 'To access the knowledge base reader features.',
+      },
+    ],
+  },
+  {
+    value: 'report',
+    label: 'Report (%s)',
+    description: 'To access the report interface.',
+  },
+  {
+    value: 'ticket',
+    label: 'Ticket (%s)',
+    description: 'To access the ticket interface.',
+    disabled: true,
+    children: [
+      {
+        value: 'ticket.agent',
+        label: 'Agent Tickets (%s)',
+        description: 'To access the agent tickets based on group access.',
+      },
+      {
+        value: 'ticket.customer',
+        label: 'Customer Tickets (%s)',
+        description: 'To access the customer tickets.',
+      },
+    ],
+  },
+  {
+    value: 'user_preferences',
+    label: 'Profile settings (%s)',
+    description: 'To access the personal settings.',
+    children: [
+      {
+        value: 'user_preferences.appearance',
+        label: 'Appearance (%s)',
+        description: 'To access the appearance personal setting.',
+      },
+      {
+        value: 'user_preferences.language',
+        label: 'Language (%s)',
+        description: 'To access the language personal setting.',
+      },
+      {
+        value: 'user_preferences.avatar',
+        label: 'Avatar (%s)',
+        description: 'To access the avatar personal setting.',
+      },
+      {
+        value: 'user_preferences.out_of_office',
+        label: 'Out of Office (%s)',
+        description: 'To access the out of office personal setting.',
+      },
+      {
+        value: 'user_preferences.password',
+        label: 'Password (%s)',
+        description: 'To access the change password personal setting.',
+      },
+      {
+        value: 'user_preferences.two_factor_authentication',
+        label: 'Two-factor Authentication (%s)',
+        description:
+          'To access the two-factor authentication personal setting.',
+      },
+      {
+        value: 'user_preferences.device',
+        label: 'Devices (%s)',
+        description: 'To access the devices personal setting.',
+      },
+      {
+        value: 'user_preferences.access_token',
+        label: 'Token Access (%s)',
+        description: 'To access the API token personal setting.',
+      },
+      {
+        value: 'user_preferences.linked_accounts',
+        label: 'Linked Accounts (%s)',
+        description: 'To access the linked accounts personal setting.',
+      },
+      {
+        value: 'user_preferences.notifications',
+        label: 'Notifications (%s)',
+        description: 'To access the notifications personal setting.',
+      },
+      {
+        value: 'user_preferences.overview_sorting',
+        label: 'Overviews (%s)',
+        description: 'To access the overviews personal setting.',
+      },
+      {
+        value: 'user_preferences.calendar',
+        label: 'Calendar (%s)',
+        description: 'To access the calendar personal setting.',
+      },
+    ],
+  },
+]
+
 const treeselectOptions = [
   {
     value: 0,
@@ -179,6 +555,15 @@ const formSchema = [
       },
     ],
   },
+  {
+    type: 'permissions',
+    name: 'permissions',
+    label: 'Permissions',
+    props: {
+      options: permissions,
+    },
+    value: ['ticket.agent'],
+  },
   {
     type: 'autocomplete',
     name: 'autocomplete',
@@ -229,7 +614,6 @@ const formSchema = [
     props: {
       clearable: true,
     },
-    required: true,
   },
   {
     name: 'group_permission_0',
@@ -330,6 +714,8 @@ const formSchema = [
   },
 ]
 
+const formValues = ref()
+
 const formInitialValues: FormValues = {
   roles: [3, 1],
   // date_0: [new Date(), new Date(new Date().setDate(new Date().getDate() + 7))],
@@ -959,14 +1345,14 @@ const changeRow = () => {
 
       <Form
         id="playground-form"
-        class="mb-96"
+        v-model="formValues"
         form-class="mb-2.5 space-y-2.5"
         :schema="formSchema"
         :initial-values="formInitialValues"
         @submit="console.debug($event)"
       >
         <template #after-fields>
-          <div class="mt-5 flex items-center justify-end gap-2">
+          <div class="my-5 flex items-center justify-end gap-2">
             <CommonButton
               variant="secondary"
               size="medium"
@@ -980,6 +1366,10 @@ const changeRow = () => {
           </div>
         </template>
       </Form>
+      <pre
+        class="flex flex-wrap gap-5 rounded-lg bg-blue-200 p-5 font-mono text-sm text-gray-100 dark:bg-gray-700 dark:text-neutral-400"
+        >{{ formValues }}</pre
+      >
     </div>
   </LayoutContent>
 </template>
diff --git a/app/frontend/apps/desktop/styles/transitions.css b/app/frontend/apps/desktop/styles/transitions.css
index 828afe8e32d2..09c5a9e6c8cb 100644
--- a/app/frontend/apps/desktop/styles/transitions.css
+++ b/app/frontend/apps/desktop/styles/transitions.css
@@ -28,23 +28,17 @@
   }
 }
 
-.slide {
+.collapse {
   &-enter-active,
   &-leave-active {
     transition:
-      transform 0.2s ease,
-      max-height 0.2s ease-out;
+      height 0.2s ease-in-out,
+      opacity 0.2s ease;
+    overflow: hidden;
   }
 
   &-enter-from,
   &-leave-to {
-    transform: translateY(-5px);
-    max-height: 0; /* Set start value otherwise transition is not working */
-  }
-
-  &-enter-to,
-  &-leave-from {
-    transform: translateY(0);
-    max-height: 100px; /* We need a fix value here to work maybe custom property or via JS */
+    opacity: 0;
   }
 }
diff --git a/i18n/zammad.pot b/i18n/zammad.pot
index 3db6fbac2db2..b21afba9f809 100644
--- a/i18n/zammad.pot
+++ b/i18n/zammad.pot
@@ -14508,6 +14508,10 @@ msgstr ""
 msgid "Toggle AM/PM mode"
 msgstr ""
 
+#: app/frontend/apps/desktop/components/Form/fields/FieldPermissions/FieldPermissionsInput.vue
+msgid "Toggle Group"
+msgstr ""
+
 #: app/assets/javascripts/app/controllers/_plugin/keyboard_shortcuts.coffee
 msgid "Toggle dark mode"
 msgstr ""