Jump to current content in reference picker

packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-grid.tsx

@@ -179,6 +179,8 @@ export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
     }
   }, [props.actionName, getSelected])
 
+  const currentParent = props.content?.Path.substring(0, props.content?.Path.lastIndexOf('/')) || '/Root'
+
   switch (props.actionName) {
     case 'new':
     case 'edit':
@@ -224,11 +226,19 @@ export const ReferenceGrid: React.FC<ReferenceGridProps> = (props) => {
           </List>
           {!props.hideDescription && <FormHelperText>{props.settings.Description}</FormHelperText>}
 
-          <Dialog fullWidth maxWidth="md" onClose={handleDialogClose} open={isPickerOpen} {...props.dialogProps}>
-            <DialogTitleComponent>{localization.referencePickerTitle}</DialogTitleComponent>
+          <Dialog
+            fullScreen
+            fullWidth
+            PaperProps={{ style: { maxWidth: '950px' } }}
+            maxWidth={false}
+            onClose={handleDialogClose}
+            open={isPickerOpen}
+            {...props.dialogProps}>
+            <DialogTitleComponent style={{ width: '100%' }}>{localization.referencePickerTitle}</DialogTitleComponent>
             <ReferencePicker
               defaultValue={fieldValue}
               path={props.settings.SelectionRoots?.[0] || '/Root'}
+              contextPath={currentParent}
               repository={props.repository!}
               renderIcon={props.renderPickerIcon}
               handleSubmit={handleOkClick}

packages/sn-controls-react/src/fieldcontrols/reference-grid/reference-picker.tsx

@@ -9,6 +9,7 @@ interface ReferencePickerProps<T>
   extends Pick<PickerProps<T>, 'handleSubmit' | 'handleCancel' | 'localization' | 'defaultValue' | 'classes'> {
   repository: Repository
   path: string
+  contextPath?: string
   renderIcon?: (name: T) => JSX.Element
   fieldSettings: ReferenceFieldSetting
 }
@@ -72,6 +73,7 @@ export const ReferencePicker: React.FC<ReferencePickerProps<GenericContentWithIs
       defaultValue={props.defaultValue}
       repository={props.repository}
       currentPath={props.path}
+      contextPath={props.contextPath}
       selectionRoots={props.fieldSettings.SelectionRoots}
       itemsODataOptions={pickerItemOptions}
       renderIcon={renderIcon}

packages/sn-pickers-react/src/components/picker/picker-helper.hook.tsx

@@ -0,0 +1,68 @@
+import { ODataResponse, Repository } from '@sensenet/client-core'
+import { PathHelper } from '@sensenet/client-utils'
+import { GenericContent } from '@sensenet/default-content-types'
+import { useEffect, useState } from 'react'
+import { TReferemceSelectionHelperPath } from './picker-props'
+
+type ReferenceFieldHelperProps = {
+  contextPath?: string
+  selectionRoots?: string[]
+  repository: Repository
+}
+
+export const usePickerHelper = ({ contextPath, selectionRoots, repository }: ReferenceFieldHelperProps) => {
+  const [helperPaths, setHelperPaths] = useState<TReferemceSelectionHelperPath[]>([])
+  const [isAncestorOfRoot, setIsAncestorOfRoot] = useState(false)
+
+  const [isLoading, setIsLoading] = useState(true)
+
+  useEffect(() => {
+    const getReferencePickerHelperData = async () => {
+      const SelectionRootQueries = []
+
+      let isContextPathInTree = false
+
+      for (const root of selectionRoots || []) {
+        if (PathHelper.isInSubTree(root, contextPath!)) {
+          isContextPathInTree = true
+        }
+
+        if (!repository.load) {
+          continue
+        }
+
+        const promise = repository?.load<GenericContent>({
+          idOrPath: root,
+          oDataOptions: {
+            select: ['Name', 'DisplayName', 'Path'],
+          },
+        })
+
+        SelectionRootQueries.push(promise)
+      }
+
+      try {
+        const promiseResult = await Promise.allSettled(SelectionRootQueries)
+
+        const fulfilledResults: TReferemceSelectionHelperPath[] = promiseResult
+          .filter((result) => result.status === 'fulfilled' && result.value?.d.Path !== contextPath)
+          .map(
+            (result) =>
+              (result as PromiseFulfilledResult<ODataResponse<GenericContent>>).value
+                .d as TReferemceSelectionHelperPath,
+          )
+
+        setHelperPaths(fulfilledResults)
+        setIsLoading(false)
+        setIsAncestorOfRoot(isContextPathInTree)
+      } catch (e) {
+        console.error(e)
+      }
+    }
+
+    getReferencePickerHelperData()
+  }, [selectionRoots, contextPath, repository])
+
+  return { helperPaths, isAncestorOfRoot, isLoading }
+}
+export default usePickerHelper

packages/sn-pickers-react/src/components/picker/picker-helper.tsx

@@ -0,0 +1,87 @@
+import { CircularProgress, Link, Tooltip } from '@material-ui/core'
+import { Repository } from '@sensenet/client-core'
+import React, { memo } from 'react'
+import { usePickerHelper } from './picker-helper.hook'
+
+type ReferenceFieldHelperProps = {
+  contextPath?: string
+  handleJumpToCurrentPath: (path: string) => void
+  styles?: string
+  selectionRoots?: string[]
+  currentContentText?: string
+  repository: Repository
+}
+
+const containerStyle: React.CSSProperties = {
+  display: 'flex',
+  flexDirection: 'column',
+  justifyContent: 'flex-start',
+  alignItems: 'flex-start',
+  rowGap: '10px',
+  paddingTop: '15px',
+  width: '240px',
+  paddingInline: '10px',
+}
+
+export const PickerHelper = ({
+  handleJumpToCurrentPath,
+  contextPath,
+  styles,
+  currentContentText,
+  selectionRoots,
+  repository,
+}: ReferenceFieldHelperProps) => {
+  const { helperPaths, isAncestorOfRoot, isLoading } = usePickerHelper({
+    contextPath,
+    selectionRoots,
+    repository,
+  })
+
+  if (isLoading) {
+    return (
+      <div style={containerStyle}>
+        <CircularProgress color="primary" />
+      </div>
+    )
+  }
+
+  if (!isAncestorOfRoot && helperPaths.length === 0) {
+    return null
+  }
+
+  return (
+    <div style={containerStyle}>
+      {isAncestorOfRoot && contextPath && (
+        <Tooltip title={contextPath}>
+          <Link
+            data-test="current-content"
+            variant="body2"
+            onClick={() => handleJumpToCurrentPath(contextPath)}
+            className={styles}>
+            {currentContentText || 'Current Content'}
+          </Link>
+        </Tooltip>
+      )}
+
+      {helperPaths.length > 0 && (
+        <div data-test="path-helpers">
+          {helperPaths.map((path) => {
+            return (
+              <Tooltip key={path.Path} title={path.Path}>
+                <Link
+                  data-test={`path-helper-${path.Path}`}
+                  variant="body2"
+                  onClick={() => handleJumpToCurrentPath(path.Path)}
+                  className={styles}>
+                  {path.DisplayName || path.Name}
+                </Link>
+              </Tooltip>
+            )
+          })}
+        </div>
+      )}
+    </div>
+  )
+}
+
+export default memo(PickerHelper, (prevProps, nextProps) => prevProps.contextPath === nextProps.contextPath)

packages/sn-pickers-react/src/components/picker/picker-props.ts

@@ -9,8 +9,29 @@ export interface PickerLocalization {
   treeViewButton?: string
   submitButton?: string
   cancelButton?: string
+  currentContentText?: string
 }
 
+export type TReferemceSelectionHelperPath = Pick<
+  GenericContent,
+  | 'Id'
+  | 'ParentId'
+  | 'OwnerId'
+  | 'VersionId'
+  | 'Icon'
+  | 'Name'
+  | 'CreatedById'
+  | 'ModifiedById'
+  | 'Version'
+  | 'Path'
+  | 'Depth'
+  | 'IsSystemContent'
+  | 'IsFile'
+  | 'IsFolder'
+  | 'DisplayName'
+  | 'Description'
+>
+
 /**
  * Properties for picker component.
  * @interface PickerProps
@@ -50,6 +71,13 @@ export interface PickerProps<T> {
    */
   currentPath?: string
 
+  /**
+   * The context content's path.
+   * @type {string}
+   * @default '' // - empty string (This will load content under default site)
+   */
+  contextPath?: string
+
   /**
    * Roots of subtrees where selection is enabled
    * @type {string}
@@ -169,4 +197,7 @@ export interface PickerProps<T> {
   currentParent?: GenericContent
 
   treePickerMode?: PickerModes.TREE | PickerModes.COPY_MOVE_TREE
+
+  navigationPath?: string
+  setNavigationPath?: React.Dispatch<React.SetStateAction<string>>
 }