1689 alphabetic permission selection (#3656)

* fix ordering of selected permissions alphabetically

* add alphabetic ordering to all selected items

* fix type issues

* Automatic frontend build

Author: xIrusux

assets/js/src/core/modules/user/management/detail/tabs/settings/components/form/customisation-accordion.tsx

@@ -32,6 +32,11 @@ const CustomisationAccordion = ({ isAdmin, ...props }: ICustomisationAccordion):
   const { getRoleCollection } = useRoleHelper()
   const { getPerspectiveConfigCollection } = usePerspectives()
 
+  const sortByLabel = (values: Array<string | number>, options: Array<{ value: string | number, label: string }>): Array<string | number> => {
+    const labelMap = new Map(options.map((o) => [o.value, o.label ?? '']))
+    return [...values].sort((a, b) => (labelMap.get(a) ?? '').localeCompare(labelMap.get(b) ?? ''))
+  }
+
   useEffect(() => {
     if (perspectiveOptions.length === 0) {
       getPerspectiveConfigCollection().then((data) => {
@@ -118,6 +123,7 @@ const CustomisationAccordion = ({ isAdmin, ...props }: ICustomisationAccordion):
               <Form.Item
                 label={ t('user-management.roles') }
                 name="roles"
+                normalize={ (values: Array<string | number>) => sortByLabel(values, roleOptions as Array<{ value: string | number, label: string }>) }
               >
                 <Select
                   mode="multiple"
@@ -129,6 +135,7 @@ const CustomisationAccordion = ({ isAdmin, ...props }: ICustomisationAccordion):
               <Form.Item
                 label={ t('user-management.perspectives') }
                 name="perspectives"
+                normalize={ (values: Array<string | number>) => sortByLabel(values, perspectiveOptions as Array<{ value: string | number, label: string }>) }
               >
                 <Select
                   mode="multiple"

assets/js/src/core/modules/user/management/detail/tabs/settings/components/form/permissions-accordion.tsx

@@ -28,6 +28,12 @@ const PermissionsAccordion = ({ permissions, ...props }: IPermissionsAccordionPr
     label: t(`user-management.permissions.${permission.key}`)
   })
 
+  const sortByTranslatedLabel = (values: string[]): string[] => {
+    return [...values].sort((a, b) =>
+      t(`user-management.permissions.${a}`).localeCompare(t(`user-management.permissions.${b}`))
+    )
+  }
+
   const content = [
     {
       key: '1',
@@ -36,6 +42,7 @@ const PermissionsAccordion = ({ permissions, ...props }: IPermissionsAccordionPr
         <>
           <Form.Item
             name="permissionsDefault"
+            normalize={ sortByTranslatedLabel }
           >
             <Select
               dataTestId="permissions-select-default"
@@ -48,6 +55,7 @@ const PermissionsAccordion = ({ permissions, ...props }: IPermissionsAccordionPr
           </Form.Item>
           <Form.Item
             name="permissionsBundles"
+            normalize={ sortByTranslatedLabel }
           >
             <Select
               dataTestId="permissions-select-bundles"

assets/js/src/core/modules/user/management/detail/tabs/settings/components/form/types-classes-accordion.tsx

@@ -23,6 +23,21 @@ const TypesAndClassesAccordion = (): React.JSX.Element => {
   const { data: classesData, isLoading: classesLoading } = useClassDefinitionCollectionQuery()
   const { data: documentTypesData, isLoading: documentTypesLoading } = useDocumentDocTypeListQuery({})
 
+  const sortByLabel = (values: string[], options: Array<{ value: string, label: string }>): string[] => {
+    const labelMap = new Map(options.map((o) => [o.value, o.label ?? '']))
+    return [...values].sort((a, b) => (labelMap.get(a) ?? '').localeCompare(labelMap.get(b) ?? ''))
+  }
+
+  const docTypeOptions: Array<{ label: string, value: string }> = documentTypesData?.items.map((item) => ({
+    label: item.name ?? '',
+    value: item.id
+  })).sort((a, b) => a.label.localeCompare(b.label)) ?? []
+
+  const classOptions: Array<{ label: string, value: string }> = classesData?.items.map((item) => ({
+    label: item.name ?? '',
+    value: item.id
+  })).sort((a, b) => a.label.localeCompare(b.label)) ?? []
+
   const content = [
     {
       key: '1',
@@ -31,27 +46,23 @@ const TypesAndClassesAccordion = (): React.JSX.Element => {
         <>
           <Form.Item
             name="docTypes"
+            normalize={ (values: string[]) => sortByLabel(values, docTypeOptions) }
           >
             <Select
               disabled={ documentTypesLoading }
               mode="multiple"
-              options={ documentTypesData?.items.map((item) => ({
-                label: item.name,
-                value: item.id
-              })).sort((a, b) => (a.label ?? '').localeCompare(b.label ?? '')) }
+              options={ docTypeOptions }
               placeholder={ t('user-management.doc-types') }
             ></Select>
           </Form.Item>
           <Form.Item
             name="classes"
+            normalize={ (values: string[]) => sortByLabel(values, classOptions) }
           >
             <Select
               disabled={ classesLoading }
               mode="multiple"
-              options={ classesData?.items.map((item) => ({
-                label: item.name,
-                value: item.id
-              })).sort((a, b) => (a.label ?? '').localeCompare(b.label ?? '')) }
+              options={ classOptions }
               placeholder={ t('user-management.classes') }
             ></Select>
           </Form.Item>

assets/js/src/core/modules/user/management/detail/tabs/settings/settings-container.tsx

@@ -64,8 +64,8 @@ const SettingsContainer = ({ ...props }): React.JSX.Element => {
         allowDirtyClose: openedUser?.allowDirtyClose,
         closeWarning: openedUser?.closeWarning,
         roles: openedUser?.roles ?? [],
-        permissionsDefault: Array.isArray(openedUser?.permissions) ? openedUser.permissions.filter((permission) => permissions.default.some((defaultPermission) => defaultPermission.key === permission)) : [],
-        permissionsBundles: Array.isArray(openedUser?.permissions) ? openedUser.permissions.filter((permission) => permissions.bundles.some((defaultPermission) => defaultPermission.key === permission)) : []
+        permissionsDefault: Array.isArray(openedUser?.permissions) ? openedUser.permissions.filter((permission) => permissions.default.some((defaultPermission) => defaultPermission.key === permission)).sort((a, b) => t(`user-management.permissions.${a}`).localeCompare(t(`user-management.permissions.${b}`))) : [],
+        permissionsBundles: Array.isArray(openedUser?.permissions) ? openedUser.permissions.filter((permission) => permissions.bundles.some((defaultPermission) => defaultPermission.key === permission)).sort((a, b) => t(`user-management.permissions.${a}`).localeCompare(t(`user-management.permissions.${b}`))) : []
       })
     }
   }, [openedUser, isLoading, permissions])

assets/js/src/core/modules/user/management/detail/tabs/workspaces/components/special-settings.tsx

@@ -35,11 +35,26 @@ const SpecialSettings = ({ localizedView, localizedEdit, layouts, onValuesChange
 
   const [form] = Form.useForm()
 
+  const languageOptions: Array<{ value: string, label: string }> = validLanguages.map((lang: string) => ({
+    value: lang,
+    label: getDisplayName(lang) ?? lang
+  })).sort((a, b) => a.label.localeCompare(b.label))
+
+  const layoutOptions: Array<{ value: string, label: string }> = data?.items.map((layout) => ({
+    value: layout.id,
+    label: layout.name ?? ''
+  })).sort((a, b) => a.label.localeCompare(b.label)) ?? []
+
+  const sortByLabel = (values: string[], options: Array<{ value: string, label: string }>): string[] => {
+    const labelMap = new Map(options.map((o) => [o.value, o.label ?? '']))
+    return [...values].sort((a, b) => (labelMap.get(a) ?? '').localeCompare(labelMap.get(b) ?? ''))
+  }
+
   useEffect(() => {
     form.setFieldsValue({
-      localizedView,
-      localizedEdit,
-      layouts
+      localizedView: sortByLabel(localizedView, languageOptions),
+      localizedEdit: sortByLabel(localizedEdit, languageOptions),
+      layouts: sortByLabel(layouts, layoutOptions)
     })
   }, [])
 
@@ -64,27 +79,23 @@ const SpecialSettings = ({ localizedView, localizedEdit, layouts, onValuesChange
                 <Form.Item
                   label={ t('user-management.workspaces.localized-fields.view') }
                   name="localizedView"
+                  normalize={ (values: string[]) => sortByLabel(values, languageOptions) }
                 >
                   <Select
                     mode="multiple"
-                    options={ validLanguages.map((lang: string) => ({
-                      value: lang,
-                      label: getDisplayName(lang)
-                    })).sort((a, b) => (a.label ?? 'UNKNOWN').localeCompare(b.label ?? 'UNKNOWN')) }
+                    options={ languageOptions }
                     placeholder={ t('user-management.workspaces.localized-fields.view') }
                   ></Select>
                 </Form.Item>
 
                 <Form.Item
                   label={ t('user-management.workspaces.localized-fields.edit') }
                   name="localizedEdit"
+                  normalize={ (values: string[]) => sortByLabel(values, languageOptions) }
                 >
                   <Select
                     mode="multiple"
-                    options={ validLanguages.map((lang: string) => ({
-                      value: lang,
-                      label: getDisplayName(lang)
-                    })).sort((a, b) => (a.label ?? 'UNKNOWN').localeCompare(b.label ?? 'UNKNOWN')) }
+                    options={ languageOptions }
                     placeholder={ t('user-management.workspaces.localized-fields.edit') }
                   ></Select>
                 </Form.Item>
@@ -105,13 +116,11 @@ const SpecialSettings = ({ localizedView, localizedEdit, layouts, onValuesChange
               children: <Form.Item
                 label={ t('user-management.workspaces.custom-layouts.select') }
                 name="layouts"
+                normalize={ (values: string[]) => sortByLabel(values, layoutOptions) }
                         >
                 <Select
                   mode="multiple"
-                  options={ data?.items.map((layout) => ({
-                    value: layout.id,
-                    label: layout.name
-                  })).sort((a, b) => (a.label ?? '').localeCompare(b.label ?? '')) }
+                  options={ layoutOptions }
                   placeholder={ t('user-management.workspaces.custom-layouts.select') }
                 ></Select>
               </Form.Item>

assets/js/src/core/modules/user/roles/detail/tabs/settings/components/form/general-accordion.tsx

@@ -45,6 +45,11 @@ const GeneralAccordion = (): React.JSX.Element => {
     }
   }, [id])
 
+  const sortByLabel = (values: any[]): any[] => {
+    const labelMap = new Map(perspectiveOptions.map((o) => [o.value, o.label ?? '']))
+    return [...values].sort((a, b) => (labelMap.get(a) ?? '').localeCompare(labelMap.get(b) ?? ''))
+  }
+
   const content = [
     {
       key: '1',
@@ -54,6 +59,7 @@ const GeneralAccordion = (): React.JSX.Element => {
         <Form.Item
           label={ t('user-management.perspectives') }
           name="perspectives"
+          normalize={ sortByLabel }
         >
           <Select
             mode="multiple"

assets/js/src/core/modules/user/roles/detail/tabs/settings/settings-container.tsx

@@ -22,8 +22,10 @@ import { useSettings } from '@Pimcore/modules/app/settings/hooks/use-settings'
 import { useRoleDraft } from '@Pimcore/modules/user/roles/hooks/use-roles-draft'
 import { getGroupedPermissions } from '@Pimcore/modules/user/management/detail/tabs/settings/settings-helper'
 import { useUserManagementHelper } from '@Pimcore/modules/user/hooks/use-user-management-helper'
+import { useTranslation } from 'react-i18next'
 
 const SettingsContainer = ({ ...props }): React.JSX.Element => {
+  const { t } = useTranslation()
   const { validLanguages } = useSettings()
   const [form] = Form.useForm()
   const { id } = useRoleContext()
@@ -38,8 +40,8 @@ const SettingsContainer = ({ ...props }): React.JSX.Element => {
         classes: role?.classes ?? [],
         docTypes: role?.docTypes,
         perspectives: role?.perspectives ?? [],
-        permissionsDefault: Array.isArray(role?.permissions) ? role.permissions.filter((permission) => permissions.default.some((defaultPermission) => defaultPermission.key === permission)) : [],
-        permissionsBundles: Array.isArray(role?.permissions) ? role.permissions.filter((permission) => permissions.bundles.some((defaultPermission) => defaultPermission.key === permission)) : []
+        permissionsDefault: Array.isArray(role?.permissions) ? role.permissions.filter((permission) => permissions.default.some((defaultPermission) => defaultPermission.key === permission)).sort((a, b) => t(`user-management.permissions.${a}`).localeCompare(t(`user-management.permissions.${b}`))) : [],
+        permissionsBundles: Array.isArray(role?.permissions) ? role.permissions.filter((permission) => permissions.bundles.some((defaultPermission) => defaultPermission.key === permission)).sort((a, b) => t(`user-management.permissions.${a}`).localeCompare(t(`user-management.permissions.${b}`))) : []
       })
     }
   }, [role, isLoading])