@rebasepro/admin 0.4.0 → 0.6.0

package/src/components/HomePage/NavigationCard.tsx

@@ -1,4 +1,4 @@
-import { ArrowRightIcon, Card, cls, Markdown, Typography } from "@rebasepro/ui";
+import { ArrowRightIcon, Card, cls, iconSize, Markdown, Typography } from "@rebasepro/ui";
 import React from "react";
 
 export type NavigationCardProps = {
@@ -40,7 +40,7 @@ export const NavigationCard = React.memo(function NavigationCard({
                 {/* Header: title + icon left, actions right */}
                 <div className="flex items-center w-full justify-between mb-1">
                     <div className="flex items-center gap-4">
-                        <div className="flex items-center justify-center w-7 h-7 rounded-lg bg-primary/8 dark:bg-primary/10 text-primary/70 dark:text-primary/60 transition-colors duration-200 group-hover:bg-primary/12 dark:group-hover:bg-primary/15 group-hover:text-primary dark:group-hover:text-primary/80">
+                        <div className="flex items-center justify-center w-6 h-6 rounded-lg bg-primary/8 dark:bg-primary/10 text-primary/70 dark:text-primary/60 transition-colors duration-200 group-hover:bg-primary/12 dark:group-hover:bg-primary/15 group-hover:text-primary dark:group-hover:text-primary/80">
                             {icon}
                         </div>
                         <Typography variant="subtitle1"
@@ -60,7 +60,7 @@ export const NavigationCard = React.memo(function NavigationCard({
                 </div>
 
                 {/* Description */}
-                <div className="grow pl-[44px]">
+                <div className="grow pl-[40px]">
                     {description && <Typography variant="caption"
                         color="secondary"
                         component="div">
@@ -69,7 +69,7 @@ export const NavigationCard = React.memo(function NavigationCard({
                 </div>
 
                 {additionalContent && (
-                    <div className="pl-[44px] pointer-events-none">
+                    <div className="pl-[40px] pointer-events-none">
                         {additionalContent}
                     </div>
                 )}
@@ -77,7 +77,7 @@ export const NavigationCard = React.memo(function NavigationCard({
                 {/* Arrow */}
                 <div className="self-end mt-1">
                     <div className={"transition-transform duration-200 group-hover:translate-x-0.5"}>
-                        <ArrowRightIcon className="text-primary"/>
+                        <ArrowRightIcon className="text-primary" size={iconSize.small}/>
                     </div>
                 </div>
 

package/src/components/HomePage/NavigationCardBinding.tsx

@@ -38,7 +38,7 @@ export function NavigationCardBinding({
 }) {
 
     const userConfigurationPersistence = useUserConfigurationPersistence();
-    const collectionIcon = <IconForView collectionOrView={collection ?? view}/>;
+    const collectionIcon = <IconForView collectionOrView={collection ?? view} size={"small"}/>;
 
     const navigate = useNavigate();
     const context = useRebaseContext();

package/src/components/RebaseLayout.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { Outlet } from "react-router-dom";
 import {
     useAdminModeController,
+    useComponentOverride,
     useRebaseRegistry
 } from "@rebasepro/core";
 
@@ -52,14 +53,16 @@ export function RebaseLayout(props: RebaseLayoutProps) {
     } = props;
 
     const adminModeController = useAdminModeController();
+    const ResolvedAppBar = useComponentOverride("Shell.AppBar", AppBar);
+    const ResolvedDrawer = useComponentOverride("Shell.Drawer", Drawer);
 
-    const ActiveAppBar = appBar ?? <AppBar
+    const ActiveAppBar = appBar ?? <ResolvedAppBar
         includeLanguageToggle={false}
         includeModeToggle={false}
         includeUserMenu={false}
     />;
     const ActiveDrawer = drawer ?? (
-        <Drawer
+        <ResolvedDrawer
             title={title}
             logoDestination={adminModeController.mode === "studio" ? "/s" : "/"}
         />

package/src/components/RebaseNavigation.tsx

@@ -6,7 +6,6 @@ import {
     useCustomizationController,
     useAdminModeController,
     useBuildLocalConfigurationPersistence,
-    useInternalUserManagementController,
     useRebaseClient,
     StudioBridgeRegistryProvider,
     useBridgeRegistration,
@@ -67,7 +66,6 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
     const registry = useRebaseRegistry();
     const context = useRebaseContext();
     const adminModeController = useAdminModeController();
-    const userManagement = useInternalUserManagementController();
     const userConfigPersistence = useBuildLocalConfigurationPersistence();
 
     // ── Collection Editor resolution ──────────────────────────────────
@@ -147,8 +145,7 @@ export function RebaseNavigation({ children }: RebaseNavigationProps) {
         data: context.data,
         collectionRegistryController,
         urlController,
-        adminMode: adminModeController?.mode,
-        userManagement
+        adminMode: adminModeController?.mode
     });
 
     // ── Merge CMS-registered entityViews/entityActions into the customization controller ──

package/src/components/RebaseRouteDefs.tsx

@@ -5,11 +5,12 @@ import {
     RebaseRoutes,
     UserSettingsView,
     UIReferenceView,
-    NotFoundPage
+    NotFoundPage,
+    useComponentOverride
 } from "@rebasepro/core";
 import { CircularProgressCenter } from "@rebasepro/ui";
 
-import { ContentHomePage } from "./HomePage/ContentHomePage";
+import { ContentHomePage as DefaultHomePage } from "./HomePage/ContentHomePage";
 
 import { RebaseRoute } from "../routes/RebaseRoute";
 import { CustomViewRoute } from "../routes/CustomViewRoute";
@@ -65,7 +66,8 @@ export function RebaseRouteDefs({ children, layout }: RebaseRouteDefsProps) {
     const registry = useRebaseRegistry();
     const navigationStateController = useNavigationStateController();
 
-    const cmsHomePage = registry.cmsConfig?.homePage ?? <Suspense fallback={<CircularProgressCenter/>}><ContentHomePage/></Suspense>;
+    const ResolvedHomePage = useComponentOverride("HomePage", DefaultHomePage);
+    const cmsHomePage = registry.cmsConfig?.homePage ?? <Suspense fallback={<CircularProgressCenter/>}><ResolvedHomePage/></Suspense>;
     const studioHomePage = registry.studioConfig?.homePage;
 
     const combinedViews = useMemo(() => [

package/src/components/SearchIconsView.tsx

@@ -17,7 +17,7 @@ const UPDATE_SEARCH_INDEX_WAIT_MS = 220;
 
 
 function toPascalCase(str: string): string {
-    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join('');
+    return str.split(/[-_]/).map(word => word.charAt(0).toUpperCase() + word.slice(1)).join("");
 }
 
 function resolveIcon(iconKey: string): React.ComponentType<{ size: number }> | null {

package/src/components/SelectableTable/SelectableTable.tsx

@@ -24,7 +24,7 @@ export type SelectableTableProps<M extends Record<string, unknown>> = {
 
     columns: VirtualTableColumn[];
 
-    cellRenderer: React.ComponentType<CellRendererParams<Entity<M>>>;
+    cellRenderer: (props: CellRendererParams<Entity<M>>) => React.ReactNode;
 
     /**
      * Builder for creating the buttons in each row
@@ -247,8 +247,7 @@ export const SelectableTable = function SelectableTable<M extends Record<string,
                 <VirtualTable
                     data={data as unknown as Record<string, unknown>[]}
                     columns={columns}
-                    // @ts-ignore
-                    cellRenderer={cellRenderer}
+                    cellRenderer={(props) => cellRenderer(props as unknown as CellRendererParams<Entity<M>>)}
                     onRowClick={inlineEditing ? undefined : (onEntityClick ? onRowClick : undefined)}
                     onEndReached={loadNextPage}
                     onResetPagination={resetPagination}

package/src/components/SelectableTable/SelectionStore.ts

@@ -32,7 +32,9 @@ export function createSelectionStore() {
         listeners.forEach(l => l());
     }
 
-    return { getSnapshot, subscribe, select };
+    return { getSnapshot,
+subscribe,
+select };
 }
 
 export type SelectionStore = ReturnType<typeof createSelectionStore>;
@@ -51,8 +53,12 @@ export function useCellSelected(
     // Memoize a selector that derives a boolean from the store snapshot.
     // useSyncExternalStore calls this on every store notification, but
     // React only re-renders when the returned value !== the previous one.
-    const selectorRef = useRef({ propertyKey, entityPath, entityId });
-    selectorRef.current = { propertyKey, entityPath, entityId };
+    const selectorRef = useRef({ propertyKey,
+entityPath,
+entityId });
+    selectorRef.current = { propertyKey,
+entityPath,
+entityId };
 
     const getSnapshot = useCallback(() => {
         const cell = store.getSnapshot();

package/src/components/UserSelector.tsx

@@ -21,10 +21,100 @@ import * as React from "react";
 import { useCallback, useEffect, useRef, useState } from "react";
 import { Command as CommandPrimitive } from "cmdk";
 import { User } from "@rebasepro/types";
-import { useUserSelector, UserSelectorItem } from "@rebasepro/core";
-import { UserDisplay } from "@rebasepro/core";
+import { useRebaseClient, useAuthController, UserDisplay } from "@rebasepro/core";
 import { EmptyValue } from "../preview";
 
+interface UserSelectorItem {
+    uid: string;
+    label: string;
+    description?: string;
+    user: User;
+}
+
+const DEFAULT_PAGE_SIZE = 10;
+
+/**
+ * Local hook to fetch users from the collection REST API with search and pagination.
+ */
+function useUserSelector({ pageSize = DEFAULT_PAGE_SIZE }: { pageSize?: number } = {}) {
+    const client = useRebaseClient<{ baseUrl?: string }>();
+    const { getAuthToken } = useAuthController();
+
+    const [items, setItems] = useState<UserSelectorItem[]>([]);
+    const [isLoading, setIsLoading] = useState(false);
+    const [hasMore, setHasMore] = useState(true);
+    const [currentSearch, setCurrentSearch] = useState("");
+    const offsetRef = useRef(0);
+    const userCacheRef = useRef<Map<string, User>>(new Map());
+
+    const fetchUsers = useCallback(async (searchStr: string, offset: number, append: boolean) => {
+        if (!client?.baseUrl) return;
+        setIsLoading(true);
+        try {
+            const token = await getAuthToken?.();
+            const params = new URLSearchParams({
+                limit: String(pageSize),
+                offset: String(offset)
+            });
+            if (searchStr) params.set("search", searchStr);
+            const response = await fetch(`${client.baseUrl}/api/users?${params}`, {
+                headers: token ? { Authorization: `Bearer ${token}` } : {}
+            });
+            if (!response.ok) throw new Error("Failed to fetch users");
+            const data = await response.json();
+            const rows: Record<string, unknown>[] = data.data ?? data.users ?? [];
+            const newItems: UserSelectorItem[] = rows.map((r: Record<string, unknown>) => {
+                const user: User = {
+                    uid: (r.id as string) ?? "",
+                    email: (r.email as string) ?? "",
+                    displayName: (r.displayName as string) ?? (r.display_name as string) ?? null,
+                    photoURL: (r.photoURL as string) ?? (r.photo_url as string) ?? null,
+                    providerId: "custom",
+                    isAnonymous: false,
+                    roles: (r.roles as string[]) ?? []
+                };
+                userCacheRef.current.set(user.uid, user);
+                return { uid: user.uid,
+label: user.displayName ?? user.email ?? user.uid,
+user };
+            });
+            setItems(prev => append ? [...prev, ...newItems] : newItems);
+            setHasMore(newItems.length >= pageSize);
+            offsetRef.current = offset + newItems.length;
+        } catch {
+            setHasMore(false);
+        } finally {
+            setIsLoading(false);
+        }
+    }, [client?.baseUrl, getAuthToken, pageSize]);
+
+    useEffect(() => {
+        offsetRef.current = 0;
+        fetchUsers("", 0, false);
+    }, [fetchUsers]);
+
+    const search = useCallback((searchStr: string) => {
+        setCurrentSearch(searchStr);
+        offsetRef.current = 0;
+        fetchUsers(searchStr, 0, false);
+    }, [fetchUsers]);
+
+    const loadMore = useCallback(() => {
+        fetchUsers(currentSearch, offsetRef.current, true);
+    }, [fetchUsers, currentSearch]);
+
+    const getUser = useCallback((uid: string): User | null => {
+        return userCacheRef.current.get(uid) ?? null;
+    }, []);
+
+    return { items,
+isLoading,
+hasMore,
+search,
+loadMore,
+getUser };
+}
+
 export interface UserSelectorProps {
     className?: string;
     name?: string;

package/src/components/common/default_entity_actions.tsx

@@ -1,6 +1,6 @@
 import { CopyIcon, iconSize, KeyRoundIcon, PencilIcon, Trash2Icon } from "@rebasepro/ui";
 import type { EntityAction, User, UserCreationResult } from "@rebasepro/types";
-import { ConfirmationDialog, useInternalUserManagementController, useSnackbarController, useTranslation } from "@rebasepro/core";
+import { ConfirmationDialog, useSnackbarController, useTranslation, useRebaseClient, useAuthController } from "@rebasepro/core";
 import { DeleteEntityDialog } from "../DeleteEntityDialog";
 import { addRecentId } from "../EntityCollectionView/utils";
 import { navigateToEntity } from "../../util/navigation_utils";
@@ -168,18 +168,35 @@ export function ResetPasswordActionDialog({
     open: boolean;
     onClose: () => void;
 }) {
-    const userManagement = useInternalUserManagementController();
+    const client = useRebaseClient<{ baseUrl?: string }>();
+    const { getAuthToken } = useAuthController();
     const snackbarController = useSnackbarController();
     const { t } = useTranslation();
     const [loading, setLoading] = useState(false);
     const [creationResult, setCreationResult] = useState<UserCreationResult | null>(null);
 
     const handleConfirm = async () => {
-        if (!userManagement?.resetPassword) return;
         setLoading(true);
         try {
-            const result = await userManagement.resetPassword(user);
-            setCreationResult(result);
+            const baseUrl = client?.baseUrl || "";
+            const token = await getAuthToken?.();
+            const response = await fetch(`${baseUrl}/api/admin/users/${user.uid}/reset-password`, {
+                method: "POST",
+                headers: {
+                    "Content-Type": "application/json",
+                    ...(token ? { "Authorization": `Bearer ${token}` } : {})
+                }
+            });
+            if (!response.ok) {
+                const error = await response.json().catch(() => ({}));
+                throw new Error(error.message || "Failed to reset password");
+            }
+            const data = await response.json();
+            setCreationResult({
+                user,
+                invitationSent: data.invitationSent ?? false,
+                temporaryPassword: data.temporaryPassword
+            });
             snackbarController.open({
                 type: "success",
                 message: t("reset_password_success") || "Password reset successfully"
@@ -228,7 +245,7 @@ export const resetPasswordAction: EntityAction = {
     isEnabled: ({ entity }) => Boolean(entity),
     onClick({
         entity,
-        context,
+        context
     }): Promise<void> {
         if (!entity) {
             throw new Error("INTERNAL: resetPasswordAction: Entity is undefined");

package/src/components/field_configs.tsx

@@ -63,7 +63,8 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#2d7ff9",
         property: {
             type: "string",
-            ui: { multiline: true, Field: TextFieldBinding }
+            ui: { multiline: true,
+Field: TextFieldBinding }
         }
     },
     markdown: {
@@ -74,7 +75,8 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#2d7ff9",
         property: {
             type: "string",
-            ui: { markdown: true, Field: MarkdownEditorFieldBinding }
+            ui: { markdown: true,
+Field: MarkdownEditorFieldBinding }
         }
     },
     url: {
@@ -85,7 +87,8 @@ export const DEFAULT_FIELD_CONFIGS: Record<DefaultFieldConfig, PropertyConfig> =
         color: "#154fb3",
         property: {
             type: "string",
-            ui: { url: true, Field: TextFieldBinding }
+            ui: { url: true,
+Field: TextFieldBinding }
         }
     },
     email: {

package/src/editor/editor.tsx

@@ -154,7 +154,7 @@ onJsonContentChange };
   // the reverted value.
   const versionRef = useRef(version);
   useEffect(() => {
-    if (versionRef.current === version) return;   // skip initial render
+    if (versionRef.current === version) return; // skip initial render
     versionRef.current = version;
     if (!view) return;
     try {

package/src/editor/extensions/Image/index.ts

@@ -5,8 +5,8 @@ import { schema } from "../../schema";
 export type UploadFn = (image: File) => Promise<string>;
 
 export async function onFileRead(view: EditorView, readerEvent: ProgressEvent<FileReader>, pos: number, upload: UploadFn, image: File) {
-    // @ts-ignore
-    const plugin = view.state.plugins.find((p: Plugin) => p.key === ImagePluginKey.key);
+    const state = view.state as typeof view.state & { plugins: Plugin[] };
+    const plugin = state.plugins.find((p: Plugin) => p.spec.key === ImagePluginKey);
     if (!plugin) {
         console.error("Image plugin not found");
         return;

package/src/editor/extensions/Image.ts

@@ -8,8 +8,8 @@ export async function onFileRead(view: EditorView, readerEvent: ProgressEvent<Fi
 
     const { schema } = view.state;
 
-    // @ts-ignore
-    const plugin = view.state.plugins.find((p: Plugin) => p.key === ImagePluginKey.key);
+    const state = view.state as typeof view.state & { plugins: Plugin[] };
+    const plugin = state.plugins.find((p: Plugin) => p.spec.key === ImagePluginKey);
     if (!plugin) {
         console.error("Image plugin not found");
         return;

package/src/editor/extensions/clipboard.ts

@@ -16,8 +16,8 @@ export function serializeForClipboard(view: EditorView, slice: Slice) {
         openStart--
         openEnd--
         const node = content.firstChild!
-        // @ts-ignore
-        context.push(node.type.name, node.attrs != node.type.defaultAttrs ? node.attrs : null)
+        const nodeType = node.type as typeof node.type & { defaultAttrs?: unknown };
+        context.push(node.type.name, node.attrs != nodeType.defaultAttrs ? node.attrs : null)
         content = node.content
     }
 

package/src/editor/markdown-it-plugins.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Ambient module declarations for markdown-it plugins that do not ship
+ * their own type declarations and have no DefinitelyTyped packages.
+ *
+ * Each plugin exports a default function that is a standard markdown-it
+ * plugin: it receives a MarkdownIt instance and optional options.
+ */
+declare module "markdown-it-task-lists" {
+    import type MarkdownIt from "markdown-it";
+    const markdownItTaskLists: MarkdownIt.PluginSimple;
+    export default markdownItTaskLists;
+}
+
+declare module "markdown-it-mark" {
+    import type MarkdownIt from "markdown-it";
+    const markdownItMark: MarkdownIt.PluginSimple;
+    export default markdownItMark;
+}
+
+declare module "markdown-it-ins" {
+    import type MarkdownIt from "markdown-it";
+    const markdownItIns: MarkdownIt.PluginSimple;
+    export default markdownItIns;
+}

package/src/editor/markdown.ts

@@ -1,3 +1,5 @@
+/* eslint-disable @typescript-eslint/triple-slash-reference */
+/// <reference path="./markdown-it-plugins.d.ts" />
 import {
     MarkdownParser,
     MarkdownSerializer,
@@ -5,11 +7,8 @@ import {
     defaultMarkdownSerializer
 } from "prosemirror-markdown";
 import markdownIt from "markdown-it";
-// @ts-expect-error -- markdown-it-task-lists does not ship type declarations
 import markdownItTaskLists from "markdown-it-task-lists";
-// @ts-expect-error -- markdown-it-mark does not ship type declarations
 import markdownItMark from "markdown-it-mark";
-// @ts-expect-error -- markdown-it-ins does not ship type declarations
 import markdownItIns from "markdown-it-ins";
 
 import { schema } from "./schema";

package/src/form/EntityForm.tsx

@@ -31,7 +31,7 @@ import { EntityFormActions } from "./EntityFormActions";
 import type { EntityFormActionsProps } from "../types/components/EntityFormActionsProps";
 import { LocalChangesMenu } from "./components/LocalChangesMenu";
 
-import { getEntityTitlePropertyKey } from "../util/previews";
+import { getEntityTitlePropertyKey, resolveTitleToString } from "../util/previews";
 import { getValueInPath, isObject, mergeDeep } from "@rebasepro/utils";
 import { useCollectionRegistryController, useSideEntityController, useCMSContext } from "../index";
 
@@ -249,11 +249,19 @@ export function EntityForm<M extends Record<string, unknown>>({
 
         return save(values)
             ?.then((savedEntity) => {
-                formexController.resetForm({
-                    values: savedEntity?.values || values,
-                    submitCount: 0,
-                    touched: {}
-                });
+                if (savedEntity) {
+                    formexController.resetForm({
+                        values: savedEntity.values || values,
+                        submitCount: 0,
+                        touched: {}
+                    });
+                    if (!autoSave) {
+                        snackbarController.open({
+                            type: "success",
+                            message: `${collection.singularName ?? collection.name}: ${t("saved_correctly")}`
+                        });
+                    }
+                }
             })
             .finally(() => {
                 formexController.setSubmitting(false);
@@ -372,11 +380,6 @@ export function EntityForm<M extends Record<string, unknown>>({
 
         clearDirtyCache();
         onValuesModified?.(false, updatedEntity.values);
-        if (!autoSave)
-            snackbarController.open({
-                type: "success",
-                message: `${collection.singularName ?? collection.name}: ${t("saved_correctly")}`
-            });
         onEntityChange?.(updatedEntity);
         updateStatus("existing");
         setEntityId(updatedEntity.id);
@@ -502,6 +505,7 @@ export function EntityForm<M extends Record<string, unknown>>({
         entityId: entityId as string,
         path,
         save,
+        submit: formex.handleSubmit,
         formex,
         entity,
         savingError,
@@ -520,7 +524,8 @@ export function EntityForm<M extends Record<string, unknown>>({
 
     const formActionProps: PluginFormActionProps = {
         entityId,
-        parentCollectionSlugs, parentEntityIds,
+        parentCollectionSlugs,
+parentEntityIds,
         path: path,
         status,
         collection: collection as EntityCollection,
@@ -534,9 +539,10 @@ export function EntityForm<M extends Record<string, unknown>>({
     const pluginFormAfter = useSlot("form.after", formActionProps);
 
     const titlePropertyKey = getEntityTitlePropertyKey(collection, customizationController.propertyConfigs);
-    const title = (formex.values && titlePropertyKey ? getValueInPath(formex.values, titlePropertyKey) as React.ReactNode : undefined)
-        ?? collection.singularName
-        ?? collection.name;
+    const rawTitle = formex.values && titlePropertyKey ? getValueInPath(formex.values, titlePropertyKey) : undefined;
+    const title = rawTitle !== undefined && rawTitle !== null
+        ? resolveTitleToString(rawTitle)
+        : (collection.singularName ?? collection.name);
 
     useEffect(() => {
         if (!autoSave) {

package/src/form/PropertyFieldBinding.tsx

@@ -219,7 +219,7 @@ function FieldInternal<CustomProps, M extends Record<string, unknown>>
         collection: context.collection,
         propertyKey: propertyKey,
         property: property,
-        Component: Component as any, // Cast component here since it is a generic component type
+        Component: Component as ComponentType<FieldProps<Property, unknown, M>>,
         plugins: plugins
     });
     const UsedComponent: ComponentType<FieldProps<Property, any, any>> = WrappedComponent ?? Component;

package/src/form/field_bindings/KeyValueFieldBinding.tsx

@@ -348,7 +348,7 @@ function MapKeyValueRow<T extends Record<string, unknown>>({
                                         value={arrayValue[index]}
                                         disabled={disabled || !fieldKey}
                                         setValue={(newValue) => {
-                                            const newArrayValue = [...arrayValue] as any[];
+                                            const newArrayValue = [...arrayValue] as unknown[];
                                             newArrayValue[index] = newValue;
                                             setValue({
                                                 ...value,

package/src/form/field_bindings/MapFieldBinding.tsx

@@ -1,4 +1,3 @@
-import type { Properties } from "@rebasepro/types";
 import type { FieldProps, PropertyFieldBindingProps } from "../../types/fields";
 import type { MapProperty } from "@rebasepro/types";
 import React from "react";
@@ -10,8 +9,7 @@ import { getIconForProperty } from "../../util/property_utils";
 import { isHidden, isReadOnly } from "@rebasepro/common";
 import { FieldHelperText, LabelWithIconAndTooltip } from "../components";
 import { PropertyFieldBinding } from "../PropertyFieldBinding";
-import { cls, ExpandablePanel, InputLabel, Select, SelectItem } from "@rebasepro/ui";
-import { pick } from "@rebasepro/utils";
+import { cls, ExpandablePanel } from "@rebasepro/ui";
 
 /**
  * Field that renders the children property fields
@@ -35,28 +33,15 @@ export function MapFieldBinding({
     onPropertyChange
 }: FieldProps<MapProperty>) {
 
-    const pickOnlySomeKeys = property.pickOnlySomeKeys || false;
     const expanded = property.ui?.expanded === undefined ? true : property.ui?.expanded;
     const minimalistView = minimalistViewProp || property.ui?.minimalistView;
     const { t } = useTranslation();
 
     if (!property.properties) {
-        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property ${propertyKey}`);
+        throw Error(`You need to specify a 'properties' prop (or specify a custom field) in your map property '${propertyKey}'${property.name ? ` ("${property.name}")` : ""}`);
     }
 
-    let mapProperties: Properties;
-    if (pickOnlySomeKeys) {
-        if (value) {
-            mapProperties = pick(property.properties,
-                ...Object.keys(value)
-                    .filter(key => key in property.properties!)
-            ) as Properties;
-        } else {
-            mapProperties = {};
-        }
-    } else {
-        mapProperties = property.properties;
-    }
+    const mapProperties = property.properties;
 
     const mapFormView = <>
         <div
@@ -96,7 +81,6 @@ export function MapFieldBinding({
             }
         </div>
 
-        {/*{pickOnlySomeKeys && buildPickKeysSelect(disabled, property.properties, setValue, value)}*/}
 
     </>
         ;
@@ -107,7 +91,8 @@ export function MapFieldBinding({
             {!minimalistView && <ExpandablePanel initiallyExpanded={expanded}
                 onExpandedChange={(expanded: boolean) => {
                     onPropertyChange?.({
-                        ui: { ...property.ui, expanded }
+                        ui: { ...property.ui,
+expanded }
                     });
                 }}
                 className={property.ui?.widthPercentage !== undefined ? "mt-8" : undefined}
@@ -133,30 +118,3 @@ export function MapFieldBinding({
     );
 }
 
-const buildPickKeysSelect = (disabled: boolean, properties: Properties, setValue: (value: Record<string, unknown> | null) => void, value: Record<string, unknown> | undefined) => {
-
-    const keys = Object.keys(properties)
-        .filter((key) => !value || !(key in value));
-
-    const handleAddProperty = (updatedValue: string | string[]) => {
-        setValue({
-            ...value,
-            [updatedValue as string]: null
-        });
-    };
-
-    if (!keys.length) return <></>;
-
-    return <div className={"m-4"}>
-        <InputLabel>Add property</InputLabel>
-        <Select
-            value={""}
-            fullWidth={true}
-            disabled={disabled}
-            onValueChange={handleAddProperty}
-            renderValue={(key) => (properties as Properties)[key].name || key}>
-            {keys.map((key) => <SelectItem key={key}
-                value={key}>{(properties as Properties)[key].name || key}</SelectItem>)}
-        </Select>
-    </div>;
-};