BACKLOG-22108: Asset provider selector with extension point for 8.1 (#…

…1700)
Jahia · Jan 10, 2024 · d8b2f15 · d8b2f15
1 parent f81b65f
commit d8b2f15
Show file tree

Hide file tree

Showing 66 changed files with 654 additions and 181 deletions.
diff --git a/.github/workflows/nightly.yml b/.github/workflows/nightly.yml
@@ -23,7 +23,7 @@ jobs:
           module_id: content-editor
           testrail_project: Content Editor
           tests_manifest: provisioning-manifest-snapshot.yml
-          jahia_image: jahia/jahia-ee-dev:8-SNAPSHOT
+          jahia_image: jahia/jahia-ee-dev:8.1-SNAPSHOT
           jahia_cluster_enabled: true
           should_use_build_artifacts: false
           should_skip_artifacts: true

diff --git a/pom.xml b/pom.xml
@@ -49,7 +49,7 @@
         <yarn.arguments>build:production</yarn.arguments>
         <require-capability>osgi.extender;filter:="(osgi.extender=org.jahia.bundles.blueprint.extender.config)"</require-capability>
         <jahia-module-signature>MCwCFC14zrQFrhdlrI26e0IEXNTj5OY6AhRL9HwaSH2xVfqUuS03309iaYYBRg==</jahia-module-signature>
-        <jahia-depends>app-shell=2.7,graphql-dxm-provider=2.15,jcontent=2.9</jahia-depends>
+        <jahia-depends>app-shell=2.7,graphql-dxm-provider=2.19.1,jcontent=2.9</jahia-depends>
         <jahia.plugin.version>6.5</jahia.plugin.version>
         <import-package>
             com.fasterxml.jackson.annotation;version="[2.10,3)",

diff --git a/src/javascript/ContentEditorApi/ContentPickerApi.jsx b/src/javascript/ContentEditorApi/ContentPickerApi.jsx
@@ -5,6 +5,21 @@ import {mergeDeep} from '~/SelectorTypes/Picker/Picker.utils';
 import {DefaultPickerConfig} from '~/SelectorTypes/Picker/configs/DefaultPickerConfig';
 import {registry} from '@jahia/ui-extender';
 
+function fillValue(value, initialSelectedItem) {
+    if (typeof value === 'object') {
+        initialSelectedItem.push(value);
+    } else if (value.toLowerCase().startsWith('http')) {
+        try {
+            initialSelectedItem.push({fileUrl: new URL(value)});
+        } catch {
+        }
+    } else if (value.startsWith('/')) {
+        initialSelectedItem.push({path: value});
+    } else {
+        initialSelectedItem.push({uuid: value});
+    }
+}
+
 export const ContentPickerApi = () => {
     const [picker, setPicker] = useState(false);
 
@@ -24,10 +39,19 @@ export const ContentPickerApi = () => {
         picker.setValue(pickerResult);
     };
 
+    const initialSelectedItem = [];
+    if (picker?.value) {
+        if (Array.isArray(picker.value)) {
+            picker.value.forEach(value => fillValue(value, initialSelectedItem));
+        } else {
+            fillValue(picker.value, initialSelectedItem);
+        }
+    }
+
     return picker && (
         <PickerDialog
             isOpen={Boolean(picker)}
-            initialSelectedItem={picker?.value}
+            initialSelectedItem={initialSelectedItem}
             site={picker?.site}
             pickerConfig={pickerConfig}
             lang={picker?.lang}

diff --git a/...PickerDialog/PickerDialog.gql-queries.jsx → ...r/JahiaPicker/JahiaPicker.gql-queries.jsx b/...PickerDialog/PickerDialog.gql-queries.jsx → ...r/JahiaPicker/JahiaPicker.gql-queries.jsx
diff --git a/src/javascript/SelectorTypes/Picker/JahiaPicker/JahiaPicker.jsx b/src/javascript/SelectorTypes/Picker/JahiaPicker/JahiaPicker.jsx
@@ -0,0 +1,107 @@
+import React, {useEffect} from 'react';
+import PropTypes from 'prop-types';
+import {
+    cePickerClearSelection,
+    cePickerMode,
+    cePickerPath,
+    cePickerSetMultiple,
+    cePickerSetPage,
+    cePickerSetSearchTerm
+} from '~/SelectorTypes/Picker/Picker.redux';
+import {batchActions} from 'redux-batched-actions';
+import {configPropType} from '../configs/configPropType';
+import {booleanValue} from '../Picker.utils';
+import {useDispatch} from 'react-redux';
+import RightPanel from './RightPanel';
+import {ContentNavigation} from '@jahia/jcontent';
+import {SelectionHandler} from './SelectionHandler';
+import {PickerSiteSwitcher} from './PickerSiteSwitcher';
+
+const selector = state => ({
+    mode: state.contenteditor.picker.mode,
+    siteKey: state.contenteditor.picker.site,
+    language: state.contenteditor.ceLanguage
+});
+
+export const JahiaPicker = ({
+    isOpen,
+    onClose,
+    initialSelectedItem,
+    site,
+    pickerConfig,
+    lang,
+    uilang,
+    isMultiple,
+    accordionItemProps,
+    onItemSelection
+}) => {
+    const dispatch = useDispatch();
+
+    useEffect(() => {
+        if (isOpen) {
+            dispatch(batchActions([
+                cePickerSetSearchTerm(''),
+                cePickerSetPage(0),
+                cePickerSetMultiple(isMultiple)
+            ]));
+        }
+
+        return () => {
+            if (isOpen) {
+                dispatch(cePickerClearSelection());
+            }
+        };
+    }, [dispatch, pickerConfig.key, isOpen, isMultiple]);
+
+    return (
+        <SelectionHandler site={site}
+                          pickerConfig={pickerConfig}
+                          accordionItemProps={accordionItemProps}
+                          initialSelectedItem={initialSelectedItem}
+                          lang={lang}
+                          uilang={uilang}
+        >
+            {booleanValue(pickerConfig.pickerDialog.displayTree) && (
+                <aside>
+                    <ContentNavigation
+                        isReversed={false}
+                        header={(booleanValue(pickerConfig.pickerDialog.displaySiteSwitcher) && (
+                            <div>
+                                <PickerSiteSwitcher pickerConfig={pickerConfig}
+                                                    accordionItemProps={accordionItemProps}/>
+                            </div>
+                        ))}
+                        accordionItemTarget={pickerConfig.key}
+                        accordionItemProps={accordionItemProps}
+                        selector={selector}
+                        handleNavigationAction={(mode, path) => (batchActions([cePickerPath(path), cePickerMode(mode)]))}
+                    />
+                </aside>
+            )}
+            <RightPanel pickerConfig={pickerConfig}
+                        accordionItemProps={accordionItemProps}
+                        isMultiple={isMultiple}
+                        lang={lang}
+                        uilang={uilang}
+                        onClose={onClose}
+                        onItemSelection={onItemSelection}/>
+        </SelectionHandler>
+    );
+};
+
+JahiaPicker.propTypes = {
+    isOpen: PropTypes.bool.isRequired,
+    onClose: PropTypes.func.isRequired,
+    site: PropTypes.string.isRequired,
+    pickerConfig: configPropType.isRequired,
+    initialSelectedItem: PropTypes.arrayOf(PropTypes.object),
+    accordionItemProps: PropTypes.object,
+    lang: PropTypes.string,
+    uilang: PropTypes.string,
+    isMultiple: PropTypes.bool,
+    onItemSelection: PropTypes.func.isRequired
+};
+
+JahiaPicker.defaultValues = {
+    initialSelectedItem: []
+};
diff --git a/...icker/PickerDialog/PickerSiteSwitcher.jsx → ...Picker/JahiaPicker/PickerSiteSwitcher.jsx b/...icker/PickerDialog/PickerSiteSwitcher.jsx → ...Picker/JahiaPicker/PickerSiteSwitcher.jsx
diff --git a/...ContentLayout/ContentLayout.container.jsx → ...tLayout/PickerContentLayout.container.jsx b/...ContentLayout/ContentLayout.container.jsx → ...tLayout/PickerContentLayout.container.jsx
@@ -4,13 +4,13 @@ import {shallowEqual, useDispatch, useSelector} from 'react-redux';
 import {Loader} from '@jahia/moonstone';
 import {Constants} from '~/SelectorTypes/Picker/Picker.constants';
 import {configPropType} from '~/SelectorTypes/Picker/configs/configPropType';
-import ContentTable from '~/SelectorTypes/Picker/PickerDialog/RightPanel/ContentLayout/ContentTable';
+import {PickerContentTable} from './PickerContentTable';
 import {registry} from '@jahia/ui-extender';
 import {jcontentUtils, useLayoutQuery} from '@jahia/jcontent';
 import clsx from 'clsx';
-import styles from './ContentLayout.scss';
+import styles from './PickerContentLayout.scss';
 import {cePickerOpenPaths} from '~/SelectorTypes/Picker/Picker.redux';
-import FilesGrid from '~/SelectorTypes/Picker/PickerDialog/RightPanel/ContentLayout/FilesGrid';
+import PickerFilesGrid from './PickerFilesGrid';
 import PropTypes from 'prop-types';
 
 const setRefetcher = (name, refetcherData) => {
@@ -33,7 +33,7 @@ function expand(r, level) {
     return (r && level) ? r.filter(c => c.hasSubRows).flatMap(c => [c.path, ...expand(c.subRows, level - 1)]) : [];
 }
 
-export const ContentLayoutContainer = ({pickerConfig, isMultiple, accordionItemProps, dblClickSelect}) => {
+export const PickerContentLayoutContainer = ({pickerConfig, isMultiple, accordionItemProps, dblClickSelect}) => {
     const {t} = useTranslation();
     const currentResult = useRef();
     const {mode, path, filesMode, preSearchModeMemo, viewType} = useSelector(state => ({
@@ -117,14 +117,14 @@ export const ContentLayoutContainer = ({pickerConfig, isMultiple, accordionItemP
         }
 
         return (
-            <ContentTable isContentNotFound
-                          isMultiple={isMultiple}
-                          path={path}
-                          filesMode={filesMode}
-                          rows={[]}
-                          isStructured={isStructured}
-                          isLoading={loading}
-                          totalCount={0}
+            <PickerContentTable isContentNotFound
+                                isMultiple={isMultiple}
+                                path={path}
+                                filesMode={filesMode}
+                                rows={[]}
+                                isStructured={isStructured}
+                                isLoading={loading}
+                                totalCount={0}
             />
         );
     }
@@ -151,34 +151,34 @@ export const ContentLayoutContainer = ({pickerConfig, isMultiple, accordionItemP
                 </div>
             )}
             {(mode === Constants.mode.MEDIA || preSearchModeMemo === Constants.mode.MEDIA) && filesMode === Constants.fileView.mode.THUMBNAILS ? (
-                <FilesGrid rows={rows}
-                           isMultiple={isMultiple}
-                           totalCount={totalCount}
-                           isLoading={loading}
-                           pickerConfig={pickerConfig}
-                           accordionItemProps={accordionItemProps}
-                           dblClickSelect={dblClickSelect}
+                <PickerFilesGrid rows={rows}
+                                 isMultiple={isMultiple}
+                                 totalCount={totalCount}
+                                 isLoading={loading}
+                                 pickerConfig={pickerConfig}
+                                 accordionItemProps={accordionItemProps}
+                                 dblClickSelect={dblClickSelect}
                 />
             ) : (
-                <ContentTable path={path}
-                              isMultiple={isMultiple}
-                              rows={rows}
-                              isStructured={isStructured}
-                              isLoading={loading}
-                              totalCount={totalCount}
-                              pickerConfig={pickerConfig}
-                              accordionItemProps={accordionItemProps}
+                <PickerContentTable path={path}
+                                    isMultiple={isMultiple}
+                                    rows={rows}
+                                    isStructured={isStructured}
+                                    isLoading={loading}
+                                    totalCount={totalCount}
+                                    pickerConfig={pickerConfig}
+                                    accordionItemProps={accordionItemProps}
                 />
             )}
         </div>
     );
 };
 
-ContentLayoutContainer.propTypes = {
+PickerContentLayoutContainer.propTypes = {
     pickerConfig: configPropType.isRequired,
     isMultiple: PropTypes.bool,
     accordionItemProps: PropTypes.object,
     dblClickSelect: PropTypes.func.isRequired
 };
 
-export default ContentLayoutContainer;
+export default PickerContentLayoutContainer;
diff --git a/...ghtPanel/ContentLayout/ContentLayout.scss → ...kerContentLayout/PickerContentLayout.scss b/...ghtPanel/ContentLayout/ContentLayout.scss → ...kerContentLayout/PickerContentLayout.scss
diff --git a/...ntentLayout/ContentTable/ContentTable.jsx → ...PickerContentTable/PickerContentTable.jsx b/...ntentLayout/ContentTable/ContentTable.jsx → ...PickerContentTable/PickerContentTable.jsx
@@ -30,7 +30,7 @@ import {
 } from '@jahia/jcontent';
 import {registry} from '@jahia/ui-extender';
 import {configPropType} from '~/SelectorTypes/Picker/configs/configPropType';
-import {Row} from '~/SelectorTypes/Picker/PickerDialog/RightPanel/ContentLayout/ContentTable/Row';
+import {PickerRow} from '~/SelectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/PickerContentTable/PickerRow';
 import clsx from 'clsx';
 
 const reduxActions = {
@@ -62,7 +62,7 @@ const SELECTION_COLUMN_ID = 'selection';
 
 const defaultCols = ['publicationStatus', 'name', 'type', 'lastModified'];
 
-export const ContentTable = ({rows, isContentNotFound, totalCount, isLoading, isStructured, pickerConfig, isMultiple, accordionItemProps}) => {
+export const PickerContentTable = ({rows, isContentNotFound, totalCount, isLoading, isStructured, pickerConfig, isMultiple, accordionItemProps}) => {
     const {t} = useTranslation();
     const dispatch = useDispatch();
 
@@ -213,15 +213,15 @@ export const ContentTable = ({rows, isContentNotFound, totalCount, isLoading, is
                         {tableRows.map(row => {
                             prepareRow(row);
                             return (
-                                <Row key={'row' + row.id}
-                                     isStructured={isStructured}
-                                     row={row}
-                                     isMultiple={isMultiple}
-                                     tableConfig={tableConfig}
-                                     handleOnClick={handleOnClick}
-                                     handleOnDoubleClick={handleOnDoubleClick}
-                                     previousModeTableConfig={previousModeTableConfig}
-                                     doubleClickNavigation={doubleClickNavigation}
+                                <PickerRow key={'row' + row.id}
+                                           isStructured={isStructured}
+                                           row={row}
+                                           isMultiple={isMultiple}
+                                           tableConfig={tableConfig}
+                                           handleOnClick={handleOnClick}
+                                           handleOnDoubleClick={handleOnDoubleClick}
+                                           previousModeTableConfig={previousModeTableConfig}
+                                           doubleClickNavigation={doubleClickNavigation}
                                 />
                             );
                         })}
@@ -244,7 +244,7 @@ export const ContentTable = ({rows, isContentNotFound, totalCount, isLoading, is
     );
 };
 
-ContentTable.propTypes = {
+PickerContentTable.propTypes = {
     isContentNotFound: PropTypes.bool,
     isLoading: PropTypes.bool,
     isStructured: PropTypes.bool,
@@ -255,4 +255,4 @@ ContentTable.propTypes = {
     accordionItemProps: PropTypes.object
 };
 
-export default ContentTable;
+export default PickerContentTable;
diff --git a/...tentLayout/ContentTable/ContentTable.scss → ...ickerContentTable/PickerContentTable.scss b/...tentLayout/ContentTable/ContentTable.scss → ...ickerContentTable/PickerContentTable.scss
diff --git a/...tPanel/ContentLayout/ContentTable/Row.jsx → ...ntLayout/PickerContentTable/PickerRow.jsx b/...tPanel/ContentLayout/ContentTable/Row.jsx → ...ntLayout/PickerContentTable/PickerRow.jsx
@@ -4,10 +4,10 @@ import clsx from 'clsx';
 import {ContextualMenu} from '@jahia/ui-extender';
 import PropTypes from 'prop-types';
 import {useFileDrop, useNodeDrop} from '@jahia/jcontent';
-import styles from '~/SelectorTypes/Picker/PickerDialog/RightPanel/ContentLayout/ContentTable/ContentTable.scss';
+import styles from '~/SelectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/PickerContentTable/PickerContentTable.scss';
 import {booleanValue} from '~/SelectorTypes/Picker/Picker.utils';
 
-export const Row = ({
+export const PickerRow = ({
     isStructured,
     row,
     tableConfig,
@@ -70,7 +70,7 @@ export const Row = ({
     );
 };
 
-Row.propTypes = {
+PickerRow.propTypes = {
     isStructured: PropTypes.bool,
     row: PropTypes.object.isRequired,
     previousModeTableConfig: PropTypes.object,

diff --git a/...lectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/PickerContentTable/index.js b/...lectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/PickerContentTable/index.js
@@ -0,0 +1 @@
+export * from './PickerContentTable';
diff --git a/...nel/ContentLayout/FilesGrid/FilesGrid.jsx → ...ayout/PickerFilesGrid/PickerFilesGrid.jsx b/...nel/ContentLayout/FilesGrid/FilesGrid.jsx → ...ayout/PickerFilesGrid/PickerFilesGrid.jsx
@@ -6,7 +6,7 @@ import {TablePagination} from '@jahia/moonstone';
 import {shallowEqual, useDispatch, useSelector} from 'react-redux';
 import classNames from 'clsx';
 import clsx from 'clsx';
-import styles from './FilesGrid.scss';
+import styles from './PickerFilesGrid.scss';
 import {
     cePickerAddSelection,
     cePickerClearSelection,
@@ -43,7 +43,7 @@ Grid.propTypes = {
     children: PropTypes.node
 };
 
-export const FilesGrid = ({totalCount, rows, isLoading, pickerConfig, isMultiple, accordionItemProps, dblClickSelect}) => {
+export const PickerFilesGrid = ({totalCount, rows, isLoading, pickerConfig, isMultiple, accordionItemProps, dblClickSelect}) => {
     const {t} = useTranslation('jcontent');
     const {mode, path, pagination, siteKey, uilang, lang, selection} = useSelector(state => ({
         mode: state.contenteditor.picker.mode,
@@ -150,7 +150,7 @@ export const FilesGrid = ({totalCount, rows, isLoading, pickerConfig, isMultiple
     );
 };
 
-FilesGrid.propTypes = {
+PickerFilesGrid.propTypes = {
     isLoading: PropTypes.bool.isRequired,
     rows: PropTypes.array.isRequired,
     totalCount: PropTypes.number.isRequired,
@@ -160,4 +160,4 @@ FilesGrid.propTypes = {
     dblClickSelect: PropTypes.func.isRequired
 };
 
-export default FilesGrid;
+export default PickerFilesGrid;
diff --git a/...el/ContentLayout/FilesGrid/FilesGrid.scss → ...yout/PickerFilesGrid/PickerFilesGrid.scss b/...el/ContentLayout/FilesGrid/FilesGrid.scss → ...yout/PickerFilesGrid/PickerFilesGrid.scss
diff --git a/.../SelectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/PickerFilesGrid/index.js b/.../SelectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/PickerFilesGrid/index.js
@@ -0,0 +1,3 @@
+import PickerFilesGrid from './PickerFilesGrid';
+
+export default PickerFilesGrid;
diff --git a/src/javascript/SelectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/index.js b/src/javascript/SelectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/index.js
@@ -0,0 +1,3 @@
+import ContentLayout from '~/SelectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/PickerContentLayout.container';
+
+export default ContentLayout;
diff --git a/...RightPanel/PickerSelection/Selection.scss → ...RightPanel/PickerSelection/Selection.scss b/...RightPanel/PickerSelection/Selection.scss → ...RightPanel/PickerSelection/Selection.scss
diff --git a/...Panel/PickerSelection/SelectionButton.jsx → ...Panel/PickerSelection/SelectionButton.jsx b/...Panel/PickerSelection/SelectionButton.jsx → ...Panel/PickerSelection/SelectionButton.jsx
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import PickerFilesGrid from './PickerFilesGrid';

		export default PickerFilesGrid;
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1,3 @@
		import ContentLayout from '~/SelectorTypes/Picker/JahiaPicker/RightPanel/PickerContentLayout/PickerContentLayout.container';

		export default ContentLayout;