@firecms/core 3.0.0-alpha.24 → 3.0.0-alpha.26

package/dist/types/plugins.d.ts

@@ -92,9 +92,9 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
         HeaderAction?: React.ComponentType<{
             property: ResolvedProperty;
             propertyKey: string;
-            onHover: boolean;
             fullPath: string;
             parentPathSegments: string[];
+            onHover: boolean;
         }>;
         /**
          * If you add this callback to your plugin, an add button will be added to the collection table.

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@firecms/core",
-  "version": "3.0.0-alpha.24",
+  "version": "3.0.0-alpha.26",
   "description": "Awesome Firebase/Firestore-based headless open-source CMS",
   "funding": {
     "url": "https://github.com/sponsors/firecmsco"
@@ -133,7 +133,7 @@
     "dist",
     "src"
   ],
-  "gitHead": "efeb689af20f913978c975c8ab3f91718e43935b",
+  "gitHead": "6cf98e00ea1eee087526615c741eeeedfaf400b7",
   "publishConfig": {
     "access": "public"
   }

package/src/components/TextField.tsx

@@ -89,7 +89,7 @@ export function TextField<T extends string | number>({
         ? <TextareaAutosize
             {...inputProps as any}
             ref={inputRef}
-            placeholder={!focused && !hasValue ? undefined : placeholder}
+            placeholder={focused || hasValue || !label ? placeholder : undefined}
             autoFocus={autoFocus}
             rows={rows}
             // onFocus={() => setFocused(true)}
@@ -121,7 +121,7 @@ export function TextField<T extends string | number>({
                 disabled && "border border-transparent outline-none opacity-50 dark:opacity-50 text-gray-800 dark:text-gray-200",
                 inputClassName
             )}
-            placeholder={!focused && !hasValue ? undefined : placeholder}
+            placeholder={focused || hasValue || !label ? placeholder : undefined}
             autoFocus={autoFocus}
             onFocus={() => setFocused(true)}
             onBlur={() => setFocused(false)}

package/src/core/components/EntityCollectionTable/EntityCollectionTable.tsx

@@ -5,6 +5,7 @@ import {
     AdditionalFieldDelegate,
     CollectionSize,
     Entity,
+    EntityCollection,
     FilterValues,
     FireCMSContext,
     ResolvedProperty,
@@ -102,13 +103,14 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                  pageSize = 50,
                  paginationEnabled,
                  checkFilterCombination,
-                 setPopupCell,
+                 setPopupCell
              },
          filterable = true,
          sortable = true,
          endAdornment,
-         additionalHeaderWidget,
-         AddColumnComponent
+         AddColumnComponent,
+         AdditionalHeaderWidget,
+         additionalIDHeaderWidget
      }: EntityCollectionTableProps<M>) {
 
         const largeLayout = useLargeLayout();
@@ -270,7 +272,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
 
         }, [additionalFieldsMap, size, selectedEntityIds]);
 
-        const allColumns: VirtualTableColumn[] = useMemo(() => {
+        const collectionColumns: VirtualTableColumn[] = useMemo(() => {
                 const columnsResult: VirtualTableColumn[] = Object.entries<ResolvedProperty>(properties)
                     .flatMap(([key, property]) => getColumnKeysForProperty(property, key))
                     .map(({
@@ -294,11 +296,9 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                                 resolvedProperty: property,
                                 disabled
                             },
-                            additionalHeaderWidget: (onHover) => additionalHeaderWidget?.({
-                                property,
-                                propertyKey: key,
-                                onHover
-                            })
+                            AdditionalHeaderWidget: ({ onHover }) => AdditionalHeaderWidget
+                                ? <AdditionalHeaderWidget property={property} propertyKey={key} onHover={onHover}/>
+                                : undefined
                         };
                     });
 
@@ -322,16 +322,18 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
             title: "ID",
             resizable: false,
             frozen: largeLayout,
-            headerAlign: "center"
+            headerAlign: "center",
+            align: "center",
+            AdditionalHeaderWidget: () => additionalIDHeaderWidget
         }), [largeLayout])
 
         const columns: VirtualTableColumn[] = useMemo(() => [
             idColumn,
             ...displayedColumnIds
                 .map((p) => {
-                    return allColumns.find(c => c.key === p.key);
+                    return collectionColumns.find(c => c.key === p.key);
                 }).filter(Boolean) as VirtualTableColumn[]
-        ], [allColumns, displayedColumnIds, idColumn]);
+        ], [collectionColumns, displayedColumnIds, idColumn]);
 
         const cellRenderer = useCallback((props: CellRendererParams<any>) => {
             const column = props.column;
@@ -373,7 +375,7 @@ export const EntityCollectionTable = React.memo<EntityCollectionTableProps<any>>
                     onValueChange,
                     size,
                     selectedCell,
-                    selectedEntityIds,
+                    selectedEntityIds
                 }}
             >
 
@@ -503,3 +505,4 @@ function filterableProperty(property: ResolvedProperty, partOfArray = false): bo
     }
     return ["string", "number", "boolean", "date", "reference", "array"].includes(property.dataType);
 }
+

package/src/core/components/EntityCollectionTable/EntityCollectionTableProps.tsx

@@ -119,7 +119,7 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     endAdornment?: React.ReactNode;
 
-    additionalHeaderWidget?: (props: {
+    AdditionalHeaderWidget?: (props: {
         property: ResolvedProperty,
         propertyKey: string,
         onHover: boolean,
@@ -127,6 +127,8 @@ export type EntityCollectionTableProps<M extends Record<string, any>,
 
     AddColumnComponent?: React.ComponentType;
 
+    additionalIDHeaderWidget?: React.ReactNode;
+
 }
 
 export type GetPropertyForProps<M extends Record<string, any>> = {

package/src/core/components/EntityCollectionView/EntityCollectionView.tsx

@@ -46,12 +46,12 @@ import {
 import { useUserConfigurationPersistence } from "../../../hooks/useUserConfigurationPersistence";
 import { EntityCollectionViewActions } from "./EntityCollectionViewActions";
 import { useEntityCollectionTableController } from "../EntityCollectionTable/useEntityCollectionTableController";
-import { Button, cn, Typography } from "../../../components";
+import { Button, cn, IconButton, TextField, Tooltip, Typography } from "../../../components";
 import { Popover } from "../../../components/Popover";
 import { Skeleton } from "../../../components/Skeleton";
 import { setIn } from "formik";
 import { getSubcollectionColumnId } from "../EntityCollectionTable/internal/common";
-import { KeyboardTabIcon } from "../../../icons";
+import { KeyboardTabIcon, SearchIcon } from "../../../icons";
 import { useColumnIds } from "./useColumnsIds";
 import { PopupFormField } from "../EntityCollectionTable/internal/popup_field/PopupFormField";
 import { GetPropertyForProps } from "../EntityCollectionTable/EntityCollectionTableProps";
@@ -517,10 +517,10 @@ export const EntityCollectionView = React.memo(
                     .map((plugin, i) => {
                         const HeaderAction = plugin.collectionView!.HeaderAction!;
                         return <HeaderAction
+                            onHover={onHover}
                             key={`plugin_header_action_${i}`}
                             propertyKey={propertyKey}
                             property={property}
-                            onHover={onHover}
                             fullPath={fullPath}
                             parentPathSegments={parentPathSegments ?? []}/>;
                     })}
@@ -571,8 +571,11 @@ export const EntityCollectionView = React.memo(
                     />}
                     hoverRow={hoverRow}
                     inlineEditing={checkInlineEditing()}
-                    additionalHeaderWidget={buildAdditionalHeaderWidget}
+                    AdditionalHeaderWidget={buildAdditionalHeaderWidget}
                     AddColumnComponent={addColumnComponentInternal}
+                    additionalIDHeaderWidget={<EntityIdHeaderWidget
+                        path={fullPath}
+                        collection={collection}/>}
                 />
 
                 <PopupFormField
@@ -686,3 +689,54 @@ function buildPropertyWidthOverwrite(key: string, width: number): PartialEntityC
     }
     return { properties: { [key]: { columnWidth: width } } } as PartialEntityCollection;
 }
+
+function EntityIdHeaderWidget({ collection, path }: {
+    collection: EntityCollection,
+    path: string
+}) {
+    const [openPopup, setOpenPopup] = React.useState(false);
+    const [searchString, setSearchString] = React.useState("");
+    const sideEntityController = useSideEntityController();
+    return (
+        <Tooltip title={!openPopup ? "Find by ID" : undefined}>
+            <Popover
+                open={openPopup}
+                onOpenChange={setOpenPopup}
+                trigger={
+                    <IconButton size={"small"}>
+                        <SearchIcon size={"small"}/>
+                    </IconButton>
+                }
+            >
+                <form noValidate={true}
+                      onSubmit={(e) => {
+                          e.preventDefault();
+                          if (!searchString) return;
+                          setOpenPopup(false);
+                          return sideEntityController.open({
+                              entityId: searchString,
+                              path,
+                              collection,
+                              updateUrl: true
+                          });
+                      }}
+                      className={"text-gray-900 dark:text-white w-96 max-w-full"}>
+
+                    <div className="flex p-4 w-full gap-4">
+                        <TextField
+                            placeholder={"Find entity by ID"}
+                            size={"small"}
+                            onChange={(e) => setSearchString(e.target.value)}
+                            value={searchString}
+                            className={"flex-grow"}/>
+                        <Button variant={"outlined"}
+                                disabled={!searchString}
+                                type={"submit"}
+                        >Go</Button>
+                    </div>
+                </form>
+            </Popover>
+
+        </Tooltip>
+    );
+}

package/src/core/components/VirtualTable/VirtualTableHeader.tsx

@@ -5,7 +5,7 @@ import { VirtualTableColumn, VirtualTableSort, VirtualTableWhereFilterOp } from
 import { ErrorBoundary } from "../ErrorBoundary";
 import { Badge, Button, cn, IconButton, Popover } from "../../../components";
 import { defaultBorderMixin } from "../../../styles";
-import { ArrowUpwardIcon, ExpandMoreIcon, FilterIcon, FilterListIcon } from "../../../icons";
+import { ArrowUpwardIcon, FilterListIcon } from "../../../icons";
 
 interface FilterFormProps<T> {
     column: VirtualTableColumn<T>;
@@ -37,7 +37,7 @@ type VirtualTableHeaderProps<M extends Record<string, any>> = {
     onFilterUpdate: (column: VirtualTableColumn, filterForProperty?: [VirtualTableWhereFilterOp, any]) => void;
     onClickResizeColumn?: (columnIndex: number, column: VirtualTableColumn) => void;
     createFilterField?: (props: FilterFormFieldProps<any>) => React.ReactNode;
-    additionalHeaderWidget?: (onHover: boolean) => React.ReactNode;
+    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
 };
 
 export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
@@ -52,7 +52,7 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                                                    column,
                                                                    onClickResizeColumn,
                                                                    createFilterField,
-                                                                   additionalHeaderWidget
+                                                                   AdditionalHeaderWidget
                                                                }: VirtualTableHeaderProps<M>) {
 
         const [onHover, setOnHover] = useState(false);
@@ -112,10 +112,12 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
 
                         </div>
                     </div>
+                    <>
 
-                    {column.sortable && (sort || hovered || openFilter) &&
-                        <>
-                            {additionalHeaderWidget && additionalHeaderWidget(hovered || openFilter)}
+                        {AdditionalHeaderWidget &&
+                            <AdditionalHeaderWidget onHover={onHover || openFilter}/>}
+
+                        {column.sortable && (sort || hovered || openFilter) &&
                             <Badge color="secondary"
                                    invisible={!sort}>
                                 <IconButton
@@ -133,8 +135,8 @@ export const VirtualTableHeader = React.memo<VirtualTableHeaderProps<any>>(
                                         <ArrowUpwardIcon className={"rotate-180"}/>}
                                 </IconButton>
                             </Badge>
-                        </>
-                    }
+                        }
+                    </>
 
                     {column.filter && createFilterField && <div>
                         <Badge color="secondary"
@@ -220,11 +222,7 @@ function FilterForm<M>({
 
     if (!filterField) return null;
     return (
-        <div className={
-            cn(
-                "text-gray-900 dark:text-white",
-            )
-        }>
+        <div className={"text-gray-900 dark:text-white"}>
             <div
                 className={cn(defaultBorderMixin, "py-4 px-6 text-xs font-semibold uppercase border-b")}>
                 {column.title ?? id}

package/src/core/components/VirtualTable/VirtualTableHeaderRow.tsx

@@ -121,7 +121,7 @@ export const VirtualTableHeaderRow = ({
                         onClickResizeColumn={onClickResizeColumn}
                         column={column}
                         createFilterField={createFilterField}
-                        additionalHeaderWidget={column.additionalHeaderWidget}/>
+                        AdditionalHeaderWidget={column.AdditionalHeaderWidget}/>
                 </ErrorBoundary>;
             })}
 

package/src/core/components/VirtualTable/VirtualTableProps.tsx

@@ -220,7 +220,7 @@ export interface VirtualTableColumn<CustomProps extends any = any> {
     /**
      * Additional children to be rendered in the header when hovering
      */
-    additionalHeaderWidget?: (onHover:boolean) => React.ReactNode;
+    AdditionalHeaderWidget?: (props: { onHover: boolean }) => React.ReactNode;
 }
 
 /**

package/src/types/plugins.tsx

@@ -112,9 +112,9 @@ export type FireCMSPlugin<PROPS = any, FORM_PROPS = any> = {
         HeaderAction?: React.ComponentType<{
             property: ResolvedProperty,
             propertyKey: string,
-            onHover: boolean,
             fullPath: string,
             parentPathSegments: string[],
+            onHover: boolean,
         }>;
 
         /**