User can see language in split view without permission (#3639)

* added permission logic

* Automatic frontend build

* updated the logic of editable languages

* Automatic frontend build

---------

Co-authored-by: ValeriaMaltseva <11871778+ValeriaMaltseva@users.noreply.github.com>

Author: ValeriaMaltseva

assets/js/src/core/components/form/localisation/localized-fields/form-item/types/form-control-with-element-context.tsx

@@ -24,6 +24,7 @@ import { useElementContext } from '@Pimcore/modules/element/hooks/use-element-co
 import { useLanguageSelection } from '@Pimcore/components/language-selection'
 import { useElementDraft } from '@Pimcore/modules/element/hooks/use-element-draft'
 import { useUser } from '@Pimcore/modules/auth/hooks/use-user'
+import { useLocalizedFields } from '../../provider/localized-fields-provider/use-localized-fields'
 
 export interface KeyedFormItemControlProps {
   children: React.ReactNode
@@ -41,15 +42,21 @@ export const FormControlWithElementContext = ({ children, ...props }: KeyedFormI
   const element = useElementContext()
   const elementDraft = useElementDraft(element.id, element.elementType)
   const languageSelection = useLanguageSelection()
+  const localizedContext = useLocalizedFields()
+  const activeLanguage = localizedContext?.locales[0] ?? languageSelection.currentLanguage
 
   if ('permissions' in elementDraft) {
     const permissions: Record<string, any> = elementDraft.permissions as Record<string, any>
     let editableLanguages: string[] = permissions?.localizedEdit?.split(',') ?? []
-    if ((editableLanguages.length === 1 && editableLanguages[0] === 'default') || (editableLanguages.length === 0)) {
+
+    const isEmptyEditableLanguages = editableLanguages.length === 0
+
+    // empty array or 'default' means all languages are editable
+    if ((editableLanguages.length === 1 && editableLanguages[0] === 'default') || isEmptyEditableLanguages) {
       editableLanguages = Array.isArray(user.contentLanguages) ? user.contentLanguages as string[] : []
     }
 
-    isDisabled = !editableLanguages.includes(languageSelection.currentLanguage)
+    isDisabled = !isEmptyEditableLanguages && !editableLanguages.includes(activeLanguage)
   }
 
   if (!isValidElement(Child)) {
@@ -64,5 +71,5 @@ export const FormControlWithElementContext = ({ children, ...props }: KeyedFormI
       { ...props }
       disabled={ Child.props.disabled === true || (props.disabled !== true ? isDisabled : false) }
     />
-  ), [Child, props])
+  ), [Child, isDisabled, props])
 }

assets/js/src/core/modules/data-object/editor/toolbar/language-comparison-view/language-comparison-content.tsx

@@ -26,6 +26,7 @@ import { useStyles } from './language-comparison-modal.styles'
 
 interface ILanguageComparisonColumnProps {
   locales: string[]
+  editableLanguages: string[]
   layoutData: ILocalizedFieldDescriptor[]
   isAllowedToEdit: boolean
 }
@@ -52,7 +53,7 @@ const groupIntoSections = (items: ILocalizedFieldDescriptor[]): ILocalizedSectio
   return sections
 }
 
-export const LanguageComparisonContent = ({ layoutData, locales, isAllowedToEdit }: ILanguageComparisonColumnProps): React.JSX.Element => {
+export const LanguageComparisonContent = ({ layoutData, locales, editableLanguages, isAllowedToEdit }: ILanguageComparisonColumnProps): React.JSX.Element => {
   const { styles } = useStyles()
 
   const renderSectionTitle = ({ breadcrumbTitle, hideSectionTitle }: { breadcrumbTitle: string, hideSectionTitle: boolean }): React.JSX.Element | null => {
@@ -85,6 +86,9 @@ export const LanguageComparisonContent = ({ layoutData, locales, isAllowedToEdit
     const shouldWrapLocalizedProvider = item.localeInFormPath !== true
     const fieldKey = `${item.formPath.join('.')}-${fieldIndex}-${locale}`
 
+    // empty array means all languages are editable
+    const isEmptyEditableLanguages = editableLanguages.length === 0
+
     const fieldNode = (
       <CombinedFieldNameProvider
         combinedFieldNameParent={ combinedFieldNameParent }
@@ -93,7 +97,7 @@ export const LanguageComparisonContent = ({ layoutData, locales, isAllowedToEdit
         <Form.Group name={ resolvedGroupPath }>
           <ObjectComponent
             { ...item.fieldData }
-            noteditable={ !isAllowedToEdit }
+            noteditable={ !isAllowedToEdit || (!isEmptyEditableLanguages && !editableLanguages.includes(locale)) }
           />
         </Form.Group>
       </CombinedFieldNameProvider>

assets/js/src/core/modules/data-object/editor/toolbar/language-comparison-view/language-comparison-modal.tsx

@@ -69,6 +69,8 @@ export const LanguageComparisonModal = ({ open, onClose }: LanguageComparisonMod
   const [changedValues, setChangedValues] = useState<Record<string, any>>({})
 
   const isAllowedToEdit = checkElementPermission(dataObject?.permissions, 'save')
+  const viewableLanguages: string[] = useMemo(() => dataObject?.permissions?.localizedView?.split(',') ?? [], [dataObject?.permissions])
+  const editableLanguages: string[] = useMemo(() => dataObject?.permissions?.localizedEdit?.split(',') ?? [], [dataObject?.permissions])
 
   const initialValues: Partial<any> = useMemo(() => {
     return editForm.getFieldsValue(true)
@@ -86,11 +88,11 @@ export const LanguageComparisonModal = ({ open, onClose }: LanguageComparisonMod
 
   useEffect(() => {
     if (open) {
-      const languagesByPriority = [currentLanguage, ...contentLanguages.filter(language => language !== currentLanguage)]
+      const languagesByPriority = [currentLanguage, ...contentLanguages.filter(language => viewableLanguages.includes(language) && language !== currentLanguage)]
 
       setSelectedLocales([languagesByPriority[0] ?? currentLanguage, languagesByPriority[1] ?? null])
     }
-  }, [open, currentLanguage, contentLanguages])
+  }, [open, currentLanguage, contentLanguages, viewableLanguages])
 
   useEffect(() => {
     if (isNil(layoutData) || !open) {
@@ -211,6 +213,7 @@ export const LanguageComparisonModal = ({ open, onClose }: LanguageComparisonMod
               preserve
             >
               <LanguageComparisonContent
+                editableLanguages={ editableLanguages }
                 isAllowedToEdit={ isAllowedToEdit }
                 layoutData={ localizedFields }
                 locales={ selectedLocales }