@rebasepro/admin 0.0.1-canary.09e5ec5

package/src/hooks/navigation/utils.ts

@@ -0,0 +1,176 @@
+import type { AppView, EntityCollection, RebasePlugin, NavigationGroupMapping } from "@rebasepro/types";
+;
+import { getSubcollections } from "@rebasepro/common";
+import { deepEqual as equal } from "fast-equals";
+
+export const NAVIGATION_DEFAULT_GROUP_NAME = "Views";
+export const NAVIGATION_ADMIN_GROUP_NAME = "Admin";
+
+export function getGroup(collectionOrView: EntityCollection<any, any> | AppView) {
+    const trimmed = collectionOrView.group?.trim();
+    if (!trimmed || trimmed === "") {
+        return NAVIGATION_DEFAULT_GROUP_NAME;
+    }
+    return trimmed ?? NAVIGATION_DEFAULT_GROUP_NAME;
+}
+
+export function computeNavigationGroups({
+    navigationGroupMappings,
+    collections,
+    views,
+    plugins
+}: {
+    navigationGroupMappings?: NavigationGroupMapping[],
+    collections?: EntityCollection[],
+    views?: AppView[],
+    plugins?: RebasePlugin[]
+}): NavigationGroupMapping[] {
+
+    // Deep clone the input groups upfront to avoid mutating the caller's data
+    let result = navigationGroupMappings
+        ? navigationGroupMappings.map(g => ({ name: g.name,
+entries: [...g.entries] }))
+        : navigationGroupMappings;
+
+    // Merge plugin navigation entries
+    if (plugins) {
+        result = plugins.reduce((acc, plugin) => {
+            if (plugin.hooks?.navigationEntries) {
+                plugin.hooks.navigationEntries.forEach((entry) => {
+                    const {
+                        name,
+                        entries
+                    } = entry;
+                    const existingGroup = acc.find(g => g.name === name);
+                    if (existingGroup) {
+                        existingGroup.entries.push(...entries);
+                    } else {
+                        acc.push({
+                            name,
+                            entries: [...entries]
+                        });
+                    }
+                });
+
+            }
+            return acc;
+        }, result ?? []);
+    }
+
+    // Track all entries that are already assigned to groups
+    const assignedEntries = new Set<string>();
+    if (result) {
+        result.forEach(group => {
+            group.entries.forEach(entry => assignedEntries.add(entry));
+        });
+    }
+
+    // Find collections and views that are NOT in any persisted group
+    const unassignedGroupMap: Record<string, string[]> = {};
+
+    // Check collections
+    (collections ?? []).forEach(collection => {
+        if (collection.hideFromNavigation) return;
+        const entry = collection.slug;
+        if (!assignedEntries.has(entry)) {
+            const groupName = getGroup(collection);
+            if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+            unassignedGroupMap[groupName].push(entry);
+        }
+    });
+
+    // Check views
+    (views ?? []).forEach(view => {
+        if (view.hideFromNavigation) return;
+        const entry = Array.isArray(view.slug) ? view.slug[0] : view.slug;
+        if (!assignedEntries.has(entry)) {
+            const groupName = getGroup(view);
+            if (!unassignedGroupMap[groupName]) unassignedGroupMap[groupName] = [];
+            unassignedGroupMap[groupName].push(entry);
+        }
+    });
+
+    // Merge unassigned entries into existing groups or create new groups
+    Object.entries(unassignedGroupMap).forEach(([groupName, entries]) => {
+        if (result) {
+            const existingGroup = result.find(g => g.name === groupName);
+            if (existingGroup) {
+                existingGroup.entries.push(...entries);
+            } else {
+                result.push({
+                    name: groupName,
+                    entries
+                });
+            }
+        }
+    });
+
+    if (!result) {
+        // No persisted data at all - create from scratch
+        result = [];
+        const groupMap: Record<string, string[]> = {};
+
+        // Add collections
+        (collections ?? []).forEach(collection => {
+            if (collection.hideFromNavigation) return;
+            const name = getGroup(collection);
+            const entry = collection.slug;
+            if (!groupMap[name]) groupMap[name] = [];
+            groupMap[name].push(entry);
+        });
+
+        // Add views
+        (views ?? []).forEach(view => {
+            if (view.hideFromNavigation) return;
+            const name = getGroup(view);
+            const entry = Array.isArray(view.slug) ? view.slug[0] : view.slug;
+            if (!groupMap[name]) groupMap[name] = [];
+            groupMap[name].push(entry);
+        });
+
+        // Convert groupMap to result array
+        result = Object.entries(groupMap).map(([name, entries]) => ({
+            name,
+            entries
+        }));
+    }
+
+    // Remove duplicates in entries
+    result.forEach(group => {
+        group.entries = [...new Set(group.entries)];
+    });
+
+    return result;
+}
+
+export function areCollectionListsEqual(a: EntityCollection[], b: EntityCollection[], visitedSlugs: string[] = []) {
+    if (a.length !== b.length) {
+        return false;
+    }
+    const aCopy = [...a];
+    const bCopy = [...b];
+    const aSorted = aCopy.sort((x, y) => x.slug.localeCompare(y.slug));
+    const bSorted = bCopy.sort((x, y) => x.slug.localeCompare(y.slug));
+    return aSorted.every((value, index) => areCollectionsEqual(value, bSorted[index], visitedSlugs));
+}
+
+export function areCollectionsEqual(a: EntityCollection, b: EntityCollection, visitedSlugs: string[] = []) {
+    if (a.slug !== b.slug) {
+        return false;
+    }
+    if (visitedSlugs.includes(a.slug)) {
+        return true;
+    }
+    const newVisited = [...visitedSlugs, a.slug];
+
+    if (!areCollectionListsEqual(getSubcollections(a), getSubcollections(b), newVisited)) {
+        return false;
+    }
+    const restAWithoutFunctions = Object.fromEntries(
+        Object.entries(a).filter(([k, v]) => typeof v !== "function" && k !== "subcollections")
+    );
+    const restBWithoutFunctions = Object.fromEntries(
+        Object.entries(b).filter(([k, v]) => typeof v !== "function" && k !== "subcollections")
+    );
+    return equal(restAWithoutFunctions, restBWithoutFunctions);
+}

package/src/hooks/useBreadcrumbsController.tsx

@@ -0,0 +1,49 @@
+import { useContext } from "react";
+import { BreadcrumbContext } from "../contexts/BreacrumbsContext";
+
+/**
+ * @group Hooks and utilities
+ */
+export interface BreadcrumbsController {
+    breadcrumbs: BreadcrumbEntry[];
+    set: (props: {
+        breadcrumbs: BreadcrumbEntry[];
+    }) => void;
+    /**
+     * Update the count for a specific breadcrumb by ID.
+     */
+    updateCount: (id: string, count: number | null | undefined) => void;
+}
+
+
+/**
+ * @group Hooks and utilities
+ */
+export interface BreadcrumbEntry {
+    title: string;
+    url: string;
+    /**
+     * Optional entity count for collection breadcrumbs.
+     * - undefined: not applicable (e.g., entity breadcrumb, custom view)
+     * - null: loading
+     * - number: loaded count
+     */
+    count?: number | null;
+    /**
+     * Unique identifier for this breadcrumb (e.g., collection path).
+     * Used to update count without replacing entire breadcrumb array.
+     */
+    id?: string;
+}
+
+
+/**
+ * Hook to retrieve the BreadcrumbsController.
+ *
+ * Consider that in order to use this hook you need to have a parent
+ * `Rebase`
+ *
+ * @see BreadcrumbsController
+ * @group Hooks and utilities
+ */
+export const useBreadcrumbsController = (): BreadcrumbsController => useContext(BreadcrumbContext);

package/src/hooks/useBuildSideDialogsController.tsx

@@ -0,0 +1,145 @@
+import type { SideDialogPanelProps, SideDialogsController } from "../hooks/useSideDialogsController";
+import { useCallback, useEffect, useRef, useState, useMemo } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
+;
+import { deepEqual as equal } from "fast-equals"
+import { Location } from "react-router-dom";
+
+interface SideDialogLocationState {
+    base_location?: Location;
+    panels?: string[];
+}
+
+export function useBuildSideDialogsController(): SideDialogsController {
+
+    const location = useLocation();
+    const navigate = useNavigate();
+
+    const locationRef = useRef(location);
+    locationRef.current = location;
+
+    const [sidePanels, setSidePanels] = useState<SideDialogPanelProps[]>([]);
+    const sidePanelsRef = useRef<SideDialogPanelProps[]>(sidePanels);
+
+    const routesStore = useRef<Record<string, SideDialogPanelProps>>({});
+    const routesCount = useRef<number>(0);
+
+    const updateSidePanels = useCallback((newPanels: SideDialogPanelProps[]) => {
+        sidePanelsRef.current = newPanels;
+        setSidePanels(newPanels);
+    }, []);
+
+    useEffect(() => {
+        const state = location.state as SideDialogLocationState | null;
+        const panelKeys: string[] = state?.panels ?? [];
+        const newPanels = panelKeys
+            .map(key => routesStore.current[key])
+            .filter(p => Boolean(p)) as SideDialogPanelProps[];
+        if (!equal(sidePanelsRef.current.map(p => p.key), newPanels.map(p => p.key))) {
+            updateSidePanels(newPanels);
+            // If all panels were cleared via explicit navigation (full-screen expand),
+            // reset routesCount so close() doesn't fire navigate(-1)
+            if (newPanels.length === 0) {
+                routesCount.current = 0;
+            }
+        }
+    }, [location]);
+
+    const close = useCallback(() => {
+
+        const currentPanels = sidePanelsRef.current;
+        if (currentPanels.length === 0)
+            return;
+
+        const lastSidePanel = currentPanels[currentPanels.length - 1];
+        const updatedPanels = [...currentPanels.slice(0, -1)];
+        updateSidePanels(updatedPanels);
+
+        if (routesCount.current > 0) {
+            if (lastSidePanel.urlPath) // if it has a url path, we need to navigate back, don't remove this code
+                navigate(-1);
+            routesCount.current--;
+        } else if (lastSidePanel.parentUrlPath) {
+            const baseLocation = (locationRef.current.state as SideDialogLocationState | null)?.base_location ?? locationRef.current;
+            navigate(
+                lastSidePanel.parentUrlPath,
+                {
+                    replace: true,
+                    state: {
+                        base_location: baseLocation,
+                        panels: updatedPanels.map(p => p.key)
+                    }
+                }
+            );
+        }
+    }, [navigate]);
+
+    const open = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
+
+        const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
+
+        newPanels.forEach((panel) => {
+            routesStore.current[panel.key] = panel;
+        });
+        routesCount.current = routesCount.current + newPanels.length;
+
+        const baseLocation = (locationRef.current.state as SideDialogLocationState | null)?.base_location ?? locationRef.current;
+
+        const currentPanels = sidePanelsRef.current;
+        const updatedPanels = [...currentPanels, ...newPanels];
+        updateSidePanels(updatedPanels);
+
+        newPanels.forEach((panel) => {
+            if (panel.urlPath) {
+                navigate(
+                    panel.urlPath,
+                    {
+                        state: {
+                            base_location: baseLocation,
+                            panels: updatedPanels.map(p => p.key)
+                        }
+                    }
+                );
+            }
+        });
+
+    }, [navigate]);
+
+    const replace = useCallback((panelProps: SideDialogPanelProps | SideDialogPanelProps[]) => {
+
+        const newPanels: SideDialogPanelProps[] = Array.isArray(panelProps) ? panelProps : [panelProps];
+        newPanels.forEach((panel) => {
+            routesStore.current[panel.key] = panel;
+        });
+
+        const baseLocation = (locationRef.current.state as SideDialogLocationState | null)?.base_location ?? locationRef.current;
+
+        const currentPanels = sidePanelsRef.current;
+        const updatedPanels = [...currentPanels.slice(0, -newPanels.length), ...newPanels];
+        updateSidePanels(updatedPanels);
+
+        newPanels.forEach((panel) => {
+            if (panel.urlPath) {
+                navigate(
+                    panel.urlPath,
+                    {
+                        replace: true,
+                        state: {
+                            base_location: baseLocation,
+                            panels: updatedPanels.map(p => p.key)
+                        }
+                    }
+                );
+            }
+        });
+
+    }, [navigate]);
+
+    return useMemo(() => ({
+        sidePanels,
+        setSidePanels: updateSidePanels,
+        close,
+        open,
+        replace
+    }), [sidePanels, updateSidePanels, close, open, replace]);
+}

package/src/hooks/useBuildSideEntityController.tsx

@@ -0,0 +1,310 @@
+import type { EntityCollection } from "@rebasepro/types";
+import type { CustomizationController, EntitySidePanelProps, SideDialogPanelProps, SideDialogsController, SideEntityController, UrlController, NavigationStateController, Property } from "@rebasepro/types";
+import { useCallback, useEffect, useRef, useMemo } from "react";
+import { AuthController, CollectionRegistryController } from "@rebasepro/types";
+import { useLocation } from "react-router-dom";
+import {
+    getNavigationEntriesFromPath,
+    NavigationViewInternal,
+    removeInitialAndTrailingSlashes,
+    resolveDefaultSelectedView
+} from "@rebasepro/common";
+import { resolvedSelectedEntityView } from "../util/resolutions";
+import { ADDITIONAL_TAB_WIDTH, CONTAINER_FULL_WIDTH, FORM_CONTAINER_WIDTH } from "@rebasepro/core";
+import { useCustomizationController, useLargeLayout } from "@rebasepro/core";
+import { JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../components/EntityEditView";
+import React from "react";
+import { EntitySidePanel } from "../components/EntitySidePanel";
+
+const NEW_URL_HASH = "new_side";
+const SIDE_URL_HASH = "side";
+
+export function getEntityViewWidth(props: EntitySidePanelProps<any>, small: boolean, customizationController: CustomizationController): string {
+    if (small) return CONTAINER_FULL_WIDTH;
+
+    const {
+        selectedSecondaryForm
+    } = resolvedSelectedEntityView(props.collection?.entityViews, customizationController, props.selectedTab);
+
+    const shouldUseSmallLayout = !props.selectedTab || props.selectedTab === JSON_TAB_VALUE || props.selectedTab === HISTORY_TAB_VALUE || Boolean(selectedSecondaryForm);
+
+    let resolvedWidth: string | undefined;
+    if (props.width) {
+        resolvedWidth = typeof props.width === "number" ? `${props.width}px` : props.width;
+    } else if (props.collection?.sideDialogWidth) {
+        resolvedWidth = typeof props.collection.sideDialogWidth === "number" ? `${props.collection.sideDialogWidth}px` : props.collection.sideDialogWidth;
+    }
+
+    if (!shouldUseSmallLayout) {
+        return `calc(${ADDITIONAL_TAB_WIDTH} + ${resolvedWidth ?? FORM_CONTAINER_WIDTH})`
+    } else {
+        if (resolvedWidth) {
+            return resolvedWidth
+        } else if (!props.collection) {
+            return FORM_CONTAINER_WIDTH;
+        } else {
+            return calculateCollectionDesiredWidth(props.collection);
+        }
+    }
+}
+
+const collectionViewWidthCache: { [key: string]: string } = {};
+
+function calculateCollectionDesiredWidth(collection: EntityCollection<any>): string {
+    if (collectionViewWidthCache[collection.slug]) {
+        return collectionViewWidthCache[collection.slug];
+    }
+
+    let result = FORM_CONTAINER_WIDTH
+    if (collection?.properties) {
+        const values = Object.values(collection.properties).map((p: Property) => getNestedPropertiesDepth(p));
+        const maxDepth = Math.max(...values);
+        if (maxDepth < 3) {
+            result = FORM_CONTAINER_WIDTH;
+        } else {
+            result = 768 + 32 * (maxDepth - 2) + "px";
+        }
+    }
+    collectionViewWidthCache[collection.slug] = result;
+    return result;
+}
+
+function getNestedPropertiesDepth(property: Property, accumulator = 0): number {
+    if (property.type === "map" && property.properties) {
+        const values = Object.values(property.properties).flatMap((childProperty) => getNestedPropertiesDepth(childProperty as Readonly<Property>, accumulator + 1));
+        return Math.max(...values);
+    } else if (property.type === "array" && property.oneOf) {
+        return accumulator + 3;
+    } else if (property.type === "array" && property.of) {
+        if (Array.isArray(property.of)) {
+            return Math.max(...property.of.map((p) => getNestedPropertiesDepth(p, accumulator + 1)));
+        } else {
+            return getNestedPropertiesDepth(property.of, accumulator + 1);
+        }
+    } else {
+        return accumulator + 1;
+    }
+}
+
+export const useBuildSideEntityController = (collectionRegistryController: CollectionRegistryController,
+    urlController: UrlController,
+    navigationStateController: NavigationStateController,
+    sideDialogsController: SideDialogsController,
+    authController: AuthController
+): SideEntityController => {
+
+    const location = useLocation();
+    const initialised = useRef<boolean>(false);
+    const currentPanelKeysRef = useRef<string[]>([]);
+    const customizationController = useCustomizationController();
+
+    const smallLayout = !useLargeLayout();
+
+    useEffect(() => {
+
+        const newFlag = location.hash === `#${NEW_URL_HASH}`;
+        const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
+
+        if (!navigationStateController.loading) {
+            if ((newFlag || sideFlag) && urlController.isUrlCollectionPath(location.pathname)) {
+                const entityOrCollectionPath = urlController.urlPathToDataPath(location.pathname);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, collectionRegistryController.collections ?? [], newFlag);
+                for (let i = 0; i < panelsFromUrl.length; i++) {
+                    const props = panelsFromUrl[i];
+                    if (i === 0)
+                        sideDialogsController.replace(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search));
+                    else
+                        sideDialogsController.open(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search))
+                }
+            }
+            initialised.current = true;
+        }
+    }, [navigationStateController.loading]);
+
+    // sync panels if URL changes with #side
+    // Use a ref for currentPanelKeys so this effect only fires on URL changes,
+    // not on panel state changes. This prevents a race condition with React Router 7
+    // where close() clears panels before the URL updates, causing the effect to
+    // re-open the panel from the stale #side hash.
+    currentPanelKeysRef.current = sideDialogsController.sidePanels.map(p => p.key);
+    useEffect(() => {
+        if (initialised.current) {
+            const sideFlag = location.hash === `#${SIDE_URL_HASH}`;
+            if (sideFlag) {
+                const currentKeys = currentPanelKeysRef.current;
+                const entityOrCollectionPath = urlController.urlPathToDataPath(location.pathname);
+                const panelsFromUrl = buildSidePanelsFromUrl(entityOrCollectionPath, collectionRegistryController.collections ?? [], false);
+                // if we have more panels than determined by the url, we ignore the url. We might have references open
+                if (panelsFromUrl.length <= currentKeys.length) {
+                    return;
+                }
+                const lastPanel = panelsFromUrl[panelsFromUrl.length - 1];
+                const panelProps = propsToSidePanel(lastPanel, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search);
+                const lastCurrentPanel = currentKeys.length > 0 ? currentKeys[currentKeys.length - 1] : undefined;
+                if (!lastCurrentPanel || lastCurrentPanel !== panelProps.key) {
+                    sideDialogsController.replace(panelProps);
+                }
+            }
+        }
+    }, [location.pathname, location.hash]);
+
+    // update side panels to match browser size
+    // Only update panel widths on layout change — don't recreate components.
+    // Recreating components would unmount/remount EntitySidePanel, losing
+    // scroll position, unsaved form state, and triggering unnecessary data fetches.
+    useEffect(() => {
+        const updatedSidePanels = sideDialogsController.sidePanels.map(sidePanelProps => {
+            if (sidePanelProps.additional) {
+                const entityProps = sidePanelProps.additional as EntitySidePanelProps;
+                const newWidth = getEntityViewWidth(entityProps, smallLayout, customizationController);
+                if (sidePanelProps.width !== newWidth) {
+                    return { ...sidePanelProps,
+width: newWidth };
+                }
+            }
+            return sidePanelProps;
+        });
+        sideDialogsController.setSidePanels(updatedSidePanels);
+    }, [smallLayout]);
+
+    const close = useCallback(() => {
+        sideDialogsController.close();
+    }, [sideDialogsController]);
+
+    const open = useCallback((props: EntitySidePanelProps<any>) => {
+
+        if (props.copy && !props.entityId) {
+            throw Error("If you want to copy an entity you need to provide an entityId");
+        }
+
+        const defaultSelectedView = resolveDefaultSelectedView(
+            props.collection ? props.collection.defaultSelectedView : undefined,
+            {
+                status: props.copy ? "copy" : (props.entityId ? "existing" : "new"),
+                entityId: props.entityId
+            }
+        );
+
+        sideDialogsController.open(
+            propsToSidePanel({
+                selectedTab: defaultSelectedView,
+                ...props
+            },
+                urlController.buildUrlCollectionPath,
+                urlController.resolveDatabasePathsFrom,
+                smallLayout,
+                customizationController,
+                authController,
+                location.search
+            ));
+
+    }, [sideDialogsController, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, authController.user, location.search]);
+
+    const replace = useCallback((props: EntitySidePanelProps<any>) => {
+
+        if (props.copy && !props.entityId) {
+            throw Error("If you want to copy an entity you need to provide an entityId");
+        }
+
+        sideDialogsController.replace(propsToSidePanel(props, urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, smallLayout, customizationController, authController, location.search));
+
+    }, [urlController.buildUrlCollectionPath, urlController.resolveDatabasePathsFrom, sideDialogsController, smallLayout, authController.user, location.search]);
+
+    return useMemo(() => ({
+        close,
+        open,
+        replace
+    }), [close, open, replace]);
+};
+
+export function buildSidePanelsFromUrl(path: string, collections: EntityCollection[], newFlag: boolean): EntitySidePanelProps<any>[] {
+
+    const navigationViewsForPath: NavigationViewInternal<any>[] = getNavigationEntriesFromPath({
+        path,
+        collections
+    });
+
+    let sidePanel: EntitySidePanelProps<any> | undefined = undefined;
+    let lastCollectionPath = "";
+    let lastCollectionId: string | undefined = undefined;
+    for (let i = 0; i < navigationViewsForPath.length; i++) {
+        const navigationEntry = navigationViewsForPath[i];
+
+        if (navigationEntry.type === "collection") {
+            lastCollectionPath = navigationEntry.slug;
+            lastCollectionId = navigationEntry.collection.slug;
+        }
+
+        const previousEntry = navigationViewsForPath[i - 1];
+        if (navigationEntry.type === "entity") {
+            sidePanel = {
+                path: navigationEntry.slug,
+                entityId: navigationEntry.entityId,
+                copy: false,
+                width: navigationEntry.parentCollection?.sideDialogWidth
+            };
+        } else if (navigationEntry.type === "custom_view") {
+            if (previousEntry?.type === "entity") {
+                if (sidePanel)
+                    sidePanel.selectedTab = navigationEntry.view.key;
+            }
+        } else if (navigationEntry.type === "collection") {
+            if (previousEntry?.type === "entity") {
+                if (sidePanel)
+                    sidePanel.selectedTab = navigationEntry.collection.slug;
+            }
+        }
+
+    }
+
+    if (newFlag) {
+        sidePanel = {
+            path: lastCollectionPath,
+            copy: false
+        }
+    }
+
+    return sidePanel ? [sidePanel] : [];
+}
+
+const propsToSidePanel = (props: EntitySidePanelProps,
+    buildUrlCollectionPath: (path: string) => string,
+    resolveIdsFrom: (pathWithAliases: string) => string,
+    smallLayout: boolean,
+    customizationController: CustomizationController,
+    authController: AuthController,
+    locationSearch: string
+): SideDialogPanelProps => {
+
+    const collectionPath = removeInitialAndTrailingSlashes(props.path);
+
+    // When updateUrl is explicitly false, don't generate URL paths — the dialog
+    // opens as an overlay without affecting the browser URL / router.
+    const shouldUpdateUrl = props.updateUrl !== false;
+
+    const urlPath = shouldUpdateUrl
+        ? (props.entityId
+            ? buildUrlCollectionPath(`${collectionPath}/${props.entityId}${props.selectedTab ? "/" + props.selectedTab : ""}${locationSearch}#${SIDE_URL_HASH}`)
+            : buildUrlCollectionPath(`${collectionPath}${locationSearch}#${NEW_URL_HASH}`))
+        : undefined;
+
+    const parentUrlPath = shouldUpdateUrl
+        ? buildUrlCollectionPath(collectionPath)
+        : undefined;
+
+    const resolvedPanelProps: EntitySidePanelProps<any> = {
+        ...props,
+        formProps: props.formProps
+    };
+
+    const entityViewWidth = getEntityViewWidth(props, smallLayout, customizationController);
+    return {
+        key: `${props.path}/${props.entityId}`,
+        component: <EntitySidePanel {...resolvedPanelProps}/>,
+        urlPath: urlPath,
+        parentUrlPath: parentUrlPath,
+        width: entityViewWidth,
+        onClose: props.onClose,
+        additional: resolvedPanelProps
+    };
+}