@rebasepro/admin 0.12.0 → 0.12.1-canary.g009ed95

package/src/components/EditFormActions.tsx

@@ -24,11 +24,21 @@ import { getIcon } from "@rebasepro/app";
 import { useAdminContext } from "../hooks/useAdminContext";
 import { useChildViewSource } from "../hooks/useChildViewSource";
 
+/**
+ * The entity form's footer.
+ *
+ * It used to render in two shapes: this footer, and a `w-80 2xl:w-96` sticky
+ * side rail carrying the same Save and Discard above several hundred pixels of
+ * nothing. The rail is gone, and Save/Discard have moved to the identity bar
+ * where they stay visible while the form scrolls — so with
+ * `showDefaultActions={false}` this renders only what the bar cannot host:
+ * record actions (copy, delete, custom), plugin actions, the saving error, and
+ * the side-panel-only "save and close".
+ */
 export function EditFormActions({
     collection,
     path,
     entity,
-    layout,
     savingError,
     formex,
     disabled,
@@ -69,10 +79,11 @@ export function EditFormActions({
         return actions;
     }, [canCreate, canDelete, collection, path, customizationController.entityActions?.length, entity, collection.disableDefaultActions, isLinkedChildView]);
 
-    const formActions = showDefaultActions ? entityActions.filter(a => a.includeInForm === undefined || a.includeInForm) : [];
+    // Record actions stay in the footer whether or not the bar carries Save;
+    // they are things you do *to* the record, not ways to leave the form.
+    const formActions = entityActions.filter(a => a.includeInForm === undefined || a.includeInForm);
 
-    // HMR reload trigger
-    const bottomActions = buildBottomActions({
+    return buildBottomActions({
         savingError,
         entity,
         formActions,
@@ -88,36 +99,8 @@ export function EditFormActions({
         formContext,
         formex,
         t,
-        className: layout === "responsive" ? "@6xl:hidden" : undefined
+        showDefaultActions
     });
-
-    const sideActions = buildSideActions({
-        savingError,
-        entity,
-        formActions,
-        collection,
-        context,
-        sidePanelController,
-        sideDialogContext,
-        disabled,
-        status,
-        pluginActions,
-        openEntityMode,
-        navigateBack,
-        formContext,
-        formex,
-        t,
-        className: layout === "responsive" ? "hidden @6xl:flex" : undefined
-    });
-
-    if (layout === "responsive") {
-        return <>
-            {bottomActions}
-            {sideActions}
-        </>;
-    }
-
-    return layout === "bottom" ? bottomActions : sideActions;
 }
 
 type ActionsViewProps<M extends Record<string, unknown>> = {
@@ -136,6 +119,7 @@ type ActionsViewProps<M extends Record<string, unknown>> = {
     formContext: FormContext,
     formex: FormexController<Record<string, unknown>>;
     t: (key: string, vars?: Record<string, string>) => string;
+    showDefaultActions: boolean;
     className?: string;
 };
 
@@ -155,14 +139,28 @@ function buildBottomActions<M extends Record<string, unknown>>({
     formContext,
     formex,
     t,
+    showDefaultActions,
     className
 }: ActionsViewProps<M>) {
 
     const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
+    // "Save and close" only means something where there is something to close.
     const canClose = openEntityMode === "side_panel" || openEntityMode === "dialog";
+    const showBackToDetail = collection.defaultEntityAction === "view" && status === "existing";
+
+    // When the container carries the actions — the entity view's identity bar
+    // does — this renders nothing at all. A full-width bar holding a copy icon
+    // and a delete icon is the same waste as the side rail it replaced: the
+    // record actions moved into the bar's overflow menu, and Save, Discard and
+    // "save and close" are buttons up there too.
+    const hasContent = showDefaultActions || Boolean(savingError);
+
+    if (!hasContent) return null;
+
     return <DialogActions
         className={className}
-        position={"absolute"}>
+        // In normal flow at the foot of the form column, not overlaying it.
+        position={"sticky"}>
         {savingError &&
             <div className="text-right">
                 <Typography color={"error"}>{savingError.message}</Typography>
@@ -202,13 +200,8 @@ function buildBottomActions<M extends Record<string, unknown>>({
             <ErrorTooltip title={"This form has errors"}>
                 <AlertCircleIcon className="ml-4 text-red-500" size={iconSize.smallest}/>
             </ErrorTooltip> : null}
-        <Button variant="text"
-            color="primary"
-            disabled={disabled || formex.isSubmitting}
-            type="reset">
-            {status === "existing" ? t("discard") : t("clear")}
-        </Button>
-        {collection.defaultEntityAction === "view" && status === "existing" && (
+
+        {showBackToDetail && (
             <Button variant="text"
                 color="primary"
                 disabled={disabled}
@@ -216,19 +209,29 @@ function buildBottomActions<M extends Record<string, unknown>>({
                 {t("back_to_detail") ?? "Back to details"}
             </Button>
         )}
-        <Tooltip title={hasErrors ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving") : undefined}>
-            <Button variant={canClose ? "text" : "filled"}
+
+        {showDefaultActions && <>
+            <Button variant="text"
                 color="primary"
-                type="submit"
                 disabled={disabled || formex.isSubmitting}
-                onClick={() => {
-                    sideDialogContext.setPendingClose(false);
-                }}>
-                {status === "existing" && t("save")}
-                {status === "copy" && t("create_copy")}
-                {status === "new" && t("create")}
+                type="reset">
+                {status === "existing" ? t("discard") : t("clear")}
             </Button>
-        </Tooltip>
+            <Tooltip title={hasErrors ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving") : undefined}>
+                <Button variant={canClose ? "text" : "filled"}
+                    color="primary"
+                    type="submit"
+                    disabled={disabled || formex.isSubmitting}
+                    onClick={() => {
+                        sideDialogContext.setPendingClose(false);
+                    }}>
+                    {status === "existing" && t("save")}
+                    {status === "copy" && t("create_copy")}
+                    {status === "new" && t("create")}
+                </Button>
+            </Tooltip>
+        </>}
+
         {canClose && <LoadingButton variant="filled"
             color="primary"
             type="submit"
@@ -244,84 +247,6 @@ function buildBottomActions<M extends Record<string, unknown>>({
     </DialogActions>;
 }
 
-function buildSideActions<M extends Record<string, unknown>>({
-    savingError,
-    entity,
-    formActions,
-    collection,
-    context,
-    sidePanelController,
-    disabled,
-    status,
-    sideDialogContext,
-    pluginActions,
-    openEntityMode,
-    navigateBack,
-    formContext,
-    formex,
-    t,
-    className
-}: ActionsViewProps<M>) {
-
-    const hasErrors = Object.keys(formex.errors).length > 0 && formex.submitCount > 0;
-    return <div
-        className={cls("overflow-auto h-full flex flex-col gap-2 w-80 2xl:w-96 px-4 py-16 sticky top-0 border-l", defaultBorderMixin, className)}>
-        <Tooltip title={hasErrors ? (t("fix_errors_before_saving") ?? "Fix highlighted errors before saving") : undefined}>
-            <LoadingButton fullWidth={true}
-                variant="filled"
-                color="primary"
-                type="submit"
-                loading={formex.isSubmitting}
-                startIcon={hasErrors ? <AlertCircleIcon/> : undefined}
-                disabled={disabled || formex.isSubmitting}
-                onClick={() => {
-                    sideDialogContext.setPendingClose?.(false);
-                }}>
-                {status === "existing" && t("save")}
-                {status === "copy" && t("create_copy")}
-                {status === "new" && t("create")}
-            </LoadingButton>
-        </Tooltip>
-
-        <Button fullWidth={true} variant="text" disabled={disabled || formex.isSubmitting} type="reset">
-            {status === "existing" ? t("discard") : t("clear")}
-        </Button>
-        {collection.defaultEntityAction === "view" && status === "existing" && (
-            <Button fullWidth={true} variant="text" disabled={disabled} onClick={navigateBack}>
-                {t("back_to_detail") ?? "Back to details"}
-            </Button>
-        )}
-
-        {pluginActions}
-
-        {formActions.length > 0 && <div className="flex flex-row flex-wrap mt-2">
-            {formActions.map((action, index) => {
-                const props = {
-                    view: "form",
-                    entity,
-                    path: getCollectionDataPath(collection),
-                    collection: collection,
-                    context,
-                    sidePanelController,
-                    openEntityMode,
-                    navigateBack,
-                    formContext
-                } satisfies EntityActionClickProps<Record<string, unknown>>;
-                const isEnabled = !action.isEnabled || action.isEnabled(props);
-                return (
-                    <EntityActionButton key={action.key ?? action.name ?? index} action={action} enabled={isEnabled} props={props}/>
-                );
-            })}
-        </div>}
-
-        {savingError &&
-            <div className="text-right">
-                <Typography color={"error"}>{savingError.message}</Typography>
-            </div>
-        }
-    </div>;
-}
-
 function EntityActionButton({
     action,
     enabled,

package/src/components/EditViewBinding.tsx

@@ -18,6 +18,7 @@ import {
     HistoryIcon,
     IconButton,
     Maximize2Icon,
+    MenuItem,
     Skeleton,
     Tab,
     Tabs,
@@ -42,13 +43,18 @@ import { EntityFormBinding } from "../form";
 import type { EntityFormBindingProps } from "../form";
 import type { OnUpdateParams } from "../types/components/EntityFormProps";
 import { EditFormActions } from "./EditFormActions";
-import { JsonPreviewBinding } from "../components/JsonPreviewBinding";
-// Lazy-load history view — only loaded when user clicks the HistoryIcon tab
-const EntityHistoryView = lazy(() => import("../components/history").then(m => ({ default: m.EntityHistoryView })));
+import { EntityIdentityBar } from "./EntityIdentityBar";
+import { SplitListCloseButton } from "./CollectionViewBinding/SplitListCloseButton";
+import { useRecordActions } from "../hooks/useRecordActions";
+import { useSideDialogContext } from "./SideDialogs";
+import { useAdminContext } from "../hooks/useAdminContext";
+import { EntityInspector, InspectorTab } from "./EntityInspector";
+import { useEntityDisplayTitle } from "../hooks/useEntityDisplayTitle";
 import { createFormexStub, getEntityFromCache } from "@rebasepro/app";
 import { usePermissions } from "@rebasepro/app";
 import { useUrlController } from "../hooks/navigation/contexts/UrlContext";
-import { useNavigate } from "react-router-dom";
+import { withViewMode } from "../util/view_mode";
+import { useNavigate } from "react-router";
 
 import { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE } from "../util/view_constants";
 export { MAIN_TAB_VALUE, JSON_TAB_VALUE, HISTORY_TAB_VALUE };
@@ -85,6 +91,11 @@ export interface EditViewBindingProps<M extends Record<string, unknown> = Record
     navigateBack?: () => void;
     layout?: "side_panel" | "full_screen" | "split" | "dialog";
     barActions?: (params: BarActionsParams) => React.ReactNode;
+    /**
+     * Controls the owning panel puts at the identity bar's leading edge, ahead
+     * of the breadcrumb — the side panel's close button.
+     */
+    barActionsStart?: React.ReactNode;
     formProps?: Partial<EntityFormBindingProps<M>>,
     /**
      * Pre-populate the form with these values when creating a new entity.
@@ -180,6 +191,7 @@ export function EditViewBindingInner<M extends Record<string, unknown>>({
     dataLoading,
     layout = "side_panel",
     barActions,
+    barActionsStart,
     status,
     setStatus,
     formProps,
@@ -198,6 +210,7 @@ export function EditViewBindingInner<M extends Record<string, unknown>>({
     const ResolvedCollectionView = useComponentOverride("Collection.View", CollectionViewBinding);
 
     const context = useRebaseContext();
+    const adminContext = useAdminContext();
     const urlController = useUrlController();
     const navigate = useNavigate();
 
@@ -265,22 +278,30 @@ parentEntityIds,
     const customViewsCount = customViews?.length ?? 0;
     const includeJsonView = collection.includeJsonView === undefined ? true : collection.includeJsonView;
     const includeHistoryView = Boolean(collection.history);
-    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0 || includeJsonView || includeHistoryView;
+    // The inspector holds the developer tools; the tab strip holds destinations.
+    // A strip with only the record in it has nothing to choose between, so it
+    // does not render at all.
+    const hasAdditionalViews = customViewsCount > 0 || subcollectionsCount > 0;
 
     const {
         resolvedEntityViews
     } = resolvedSelectedEntityView(customViews, customizationController, undefined, canEdit);
 
+    // JSON and history are no longer tab values, but a bookmarked or in-flight
+    // URL may still name one. They resolve to the record, and open the
+    // inspector on that pane, so an old link keeps working.
+    const legacyInspectorTab = selectedTab === JSON_TAB_VALUE
+        ? "json"
+        : selectedTab === HISTORY_TAB_VALUE ? "history" : undefined;
+
     const validTabValues = useMemo(() => {
         const set = new Set<string>([
             MAIN_TAB_VALUE,
-            ...(includeJsonView ? [JSON_TAB_VALUE] : []),
-            ...(includeHistoryView ? [HISTORY_TAB_VALUE] : []),
             ...resolvedEntityViews.map(v => v.key),
             ...subcollections.map(s => s.slug)
         ]);
         return set;
-    }, [includeJsonView, includeHistoryView, resolvedEntityViews, subcollections]);
+    }, [resolvedEntityViews, subcollections]);
 
     const activeTab = validTabValues.has(selectedTab) ? selectedTab : MAIN_TAB_VALUE;
 
@@ -289,7 +310,6 @@ parentEntityIds,
         selectedSecondaryForm
     } = resolvedSelectedEntityView(customViews, customizationController, activeTab, canEdit);
 
-    const actionsAtTheBottom = layout === "side_panel" || layout === "dialog" || selectedEntityView?.includeActions === "bottom";
 
     const mainViewVisible = activeTab === MAIN_TAB_VALUE || Boolean(selectedSecondaryForm);
 
@@ -381,35 +401,72 @@ parentEntityIds,
 
     const globalLoading = (dataLoading && !usedEntity) || (canEdit === undefined && (status === "existing" || status === "copy"));
 
-    // Only mount JSON view when its tab is selected (or was previously selected)
-    const jsonTabMounted = mountedTabsRef.current.has(JSON_TAB_VALUE);
-    const jsonView = (activeTab === JSON_TAB_VALUE || jsonTabMounted) ? <div
-        className={cls("relative flex-1 h-full overflow-auto w-full",
-            { "hidden": activeTab !== JSON_TAB_VALUE })}
-        key={"json_view"}
-        role="tabpanel">
-        <ErrorBoundary>
-            <JsonPreviewBinding
-                values={formContext?.values ?? entity?.values ?? {}} />
-        </ErrorBoundary>
-    </div> : null;
+    /* ---- identity bar ---------------------------------------------------- */
 
-    // Only mount history view when its tab is actually selected
-    const historyView = includeHistoryView && activeTab === HISTORY_TAB_VALUE ? <div
-        className={"relative flex-1 h-full overflow-auto w-full"}
-        key={"history_view"}
-        role="tabpanel">
-        <ErrorBoundary>
-            <Suspense fallback={<CircularProgressCenter />}>
-                <EntityHistoryView
-                    collection={collection}
-                    entity={usedEntity}
-                    formContext={formContext as FormContext<Record<string, unknown>>}
-                    modifiedValues={formContext?.values ?? usedEntity?.values}
-                />
-            </Suspense>
-        </ErrorBoundary>
-    </div> : null;
+    const displayTitle = useEntityDisplayTitle({
+        collection,
+        values: (formContext?.values ?? usedEntity?.values) as Record<string, unknown> | undefined,
+        entityId,
+        status
+    });
+
+    const formex = formContext?.formex;
+    const hasFormErrors = Boolean(formex && Object.keys(formex.errors).length > 0 && formex.submitCount > 0);
+    // Same rule the footer used: an untouched existing record has nothing to save.
+    const saveDisabled = Boolean(
+        !formContext
+        || formContext.disabled
+        || formex?.isSubmitting
+        || (status === "existing" && !formex?.dirty)
+    );
+
+    const [inspectorTab, setInspectorTab] = useState<InspectorTab | null>(null);
+
+    /* ---- record actions, in the bar's overflow menu ---------------------- */
+
+    const sideDialogContext = useSideDialogContext();
+    const canCloseAfterSave = layout === "side_panel" || layout === "dialog";
+
+    const recordActions = useRecordActions({
+        collection,
+        path,
+        entity: usedEntity
+    });
+
+    const recordActionItems = usedEntity && recordActions.length
+        ? recordActions.map((action, index) => {
+            const clickProps = {
+                view: "form" as const,
+                entity: usedEntity,
+                path,
+                collection,
+                context,
+                sidePanelController: adminContext.sidePanelController,
+                openEntityMode: layout,
+                navigateBack: navigateBack ?? (() => undefined),
+                formContext
+            };
+            const enabled = !action.isEnabled || action.isEnabled(clickProps as never);
+            return (
+                <MenuItem key={action.key ?? action.name ?? index}
+                    disabled={!enabled}
+                    onClick={() => action.onClick(clickProps as never)}>
+                    {getIcon(action.icon, undefined, undefined, "smallest")}
+                    {action.name}
+                </MenuItem>
+            );
+        })
+        : null;
+
+    // Plugin form actions (Autofill and friends) render inline in the bar; the
+    // form no longer has a footer to put them in.
+    const formPluginActions = useSlot("form.actions", formActionTopProps);
+
+    // A URL still naming the old `json`/`history` tab opens the inspector on
+    // that pane instead of 404-ing into the record with nothing shown.
+    useEffect(() => {
+        if (legacyInspectorTab) setInspectorTab(legacyInspectorTab);
+    }, [legacyInspectorTab]);
 
     const subCollectionsViews = childViews && childViews.map(({ collection: subcollection }) => {
         const subcollectionId = subcollection.slug;
@@ -520,7 +577,10 @@ parentEntityIds,
             entity={entity}
             initialDirtyValues={initialDirtyValues}
             openEntityMode={layout}
-            forceActionsAtTheBottom={actionsAtTheBottom}
+            // Save and Discard live in the identity bar now, where they stay
+            // visible while the form scrolls. The form's own footer would be a
+            // second copy of them.
+            showDefaultActions={false}
             initialStatus={status}
             className={cls((!mainViewVisible || !canEdit) && !selectedSecondaryForm ? "hidden" : "", formProps?.className)}
             EntityFormActionsComponent={ResolvedFormActions as React.FC<typeof ResolvedFormActions extends React.ComponentType<infer P> ? P : never>}
@@ -601,9 +661,9 @@ parentEntityIds,
             );
         });
 
-    const shouldShowTopBar = Boolean(barActions) || hasAdditionalViews || layout === "side_panel" || layout === "dialog";
-
-    const fullScreenButton = !barActions && (layout === "side_panel" || layout === "split" || layout === "dialog") && entityId ? (
+    const fullScreenButton = !barActions && // Not in split: the list panel beside it carries the close control,
+    // and an expand button there competes with it.
+    (layout === "side_panel" || layout === "dialog") && entityId ? (
         <Tooltip title={"Open full screen"}>
             <IconButton
                 size="small"
@@ -620,59 +680,82 @@ parentEntityIds,
 
     let result = <div className="relative flex flex-col h-full w-full bg-white dark:bg-surface-800">
 
-        {shouldShowTopBar && <div
-            className={cls("h-[52px] items-center flex overflow-hidden w-full border-b pl-2 pr-2 flex bg-surface-50 dark:bg-surface-900", defaultBorderMixin)}>
+        <EntityIdentityBar
+            collection={collection as AdminCollection}
+            title={displayTitle}
+            entityId={status === "existing" ? entityId : undefined}
+            status={status}
+            dirty={Boolean(formContext?.formex?.dirty)}
+            saving={Boolean(formContext?.isSaving)}
+            hasErrors={hasFormErrors}
+            saveDisabled={!canEdit || saveDisabled}
+            // Full screen replaces the collection entirely, leaving browser Back
+            // as the only route to it. The detail view has carried this arrow
+            // for that reason; the edit view is reached the same way.
+            onBack={layout === "full_screen"
+                ? () => navigate(withViewMode(urlController.buildUrlCollectionPath(path)))
+                : undefined}
+            onSave={canEdit && formContext ? () => {
+                sideDialogContext.setPendingClose?.(false);
+                formContext.submit();
+            } : undefined}
+            onSaveAndClose={canEdit && formContext && canCloseAfterSave ? () => {
+                sideDialogContext.setPendingClose?.(true);
+                formContext.submit();
+            } : undefined}
+            onDiscard={canEdit && formContext ? () => formContext.formex.resetForm() : undefined}
+            onInspect={includeJsonView ? () => setInspectorTab("json") : undefined}
+            onViewHistory={includeHistoryView ? () => setInspectorTab("history") : undefined}
+            recordActions={recordActionItems}
+            pluginActions={formPluginActions}
+            leading={<>
+                {barActionsStart}
+                {/* Split view: closing the list is opening this record
+                    full screen, and the control for it belongs at this
+                    bar's leading edge. */}
+                {layout === "split" && <SplitListCloseButton/>}
+            </>}
+            trailing={<>
+                {pluginActionsTop}
+                {fullScreenButton}
+                {barActions?.({
+                    path,
+                    entityId,
+                    values: formContext?.values ?? usedEntity?.values ?? {},
+                    status
+                })}
+            </>}
+        />
 
-            {fullScreenButton}
+        {/* Destinations only: the record is the page, so its tab leads rather
+            than sitting third behind two unlabelled developer tools. The row
+            disappears entirely when there is nowhere else to go. */}
+        {hasAdditionalViews && <div className={cls(
+            "h-10 shrink-0 flex items-stretch border-b px-2 min-w-0",
+            defaultBorderMixin
+        )}>
+            <Tabs
+                className={"!w-full"}
+                innerClassName={"h-full"}
+                variant={"boxy"}
+                value={activeTab}
+                onValueChange={(value) => {
+                    onSideTabClick(value);
+                }}>
 
-            {barActions?.({
-                path,
-                entityId,
-                values: formContext?.values ?? usedEntity?.values ?? {},
-                status
-            })}
-
-            {pluginActionsTop}
-
-            {hasAdditionalViews && <div className={"flex-1 flex justify-end min-w-0 shrink-0"}>
-                <Tabs
-                    className={"!w-fit max-w-full"}
-                    value={activeTab}
-                    onValueChange={(value) => {
-                        onSideTabClick(value);
-                    }}>
-
-                    {includeJsonView && <Tab
-                        disabled={!hasAdditionalViews}
-                        value={JSON_TAB_VALUE}
-                        className={"text-sm"}>
-                        <CodeIcon size={iconSize.smallest} />
-                    </Tab>}
-
-                    {includeHistoryView && <Tab
-                        disabled={!hasAdditionalViews}
-                        value={HISTORY_TAB_VALUE}
-                        className={"text-sm"}>
-                        <HistoryIcon size={iconSize.smallest} />
-                    </Tab>}
-
-                    <Tab
-                        disabled={!hasAdditionalViews}
-                        value={MAIN_TAB_VALUE}
-                        className={"text-sm min-w-[90px]"}>
-                        <span className="flex items-center gap-1.5">
-                            {getIcon(collection.icon, undefined, undefined, "smallest")}
-                            {collection.singularName ?? collection.name}
-                        </span>
-                    </Tab>
+                <Tab value={MAIN_TAB_VALUE}>
+                    <span className="flex items-center gap-1.5">
+                        {getIcon(collection.icon, undefined, undefined, "smallest")}
+                        {collection.singularName ?? collection.name}
+                    </span>
+                </Tab>
 
-                    {customViewTabsStart}
+                {customViewTabsStart}
 
-                    {customViewTabsEnd}
+                {customViewTabsEnd}
 
-                    {subcollectionTabs}
-                </Tabs>
-            </div>}
+                {subcollectionTabs}
+            </Tabs>
         </div>}
 
         {globalLoading
@@ -682,14 +765,20 @@ parentEntityIds,
                 {entityView}
             </>}
 
-        {jsonView}
-
-        {historyView}
-
         {customViewsView}
 
         {subCollectionsViews}
 
+        <EntityInspector
+            tab={inspectorTab}
+            onTabChange={setInspectorTab}
+            onClose={() => setInspectorTab(null)}
+            collection={collection as AdminCollection}
+            entity={usedEntity as Entity<Record<string, unknown>> | undefined}
+            formContext={formContext as FormContext<Record<string, unknown>> | undefined}
+            values={formContext?.values ?? usedEntity?.values}
+            includeHistory={includeHistoryView}/>
+
     </div>;
 
     if (plugins && plugins.length > 0) {