@firecms/collection_editor 3.0.0-beta.2-pre.4 → 3.0.0-beta.2

package/src/useCollectionEditorPlugin.tsx

@@ -1,13 +1,5 @@
 import React from "react";
-import {
-    EntityCollection,
-    FireCMSPlugin,
-    joinCollectionLists,
-    makePropertiesEditable,
-    ModifyCollectionProps,
-    Properties,
-    User
-} from "@firecms/core";
+import { FireCMSPlugin, useAuthController, useNavigationController, User } from "@firecms/core";
 import { ConfigControllerProvider } from "./ConfigControllerProvider";
 import { CollectionEditorPermissionsBuilder } from "./types/config_permissions";
 import { EditorCollectionAction } from "./ui/EditorCollectionAction";
@@ -20,6 +12,8 @@ import { RootCollectionSuggestions } from "./ui/RootCollectionSuggestions";
 import { CollectionViewHeaderAction } from "./ui/CollectionViewHeaderAction";
 import { PropertyAddColumnComponent } from "./ui/PropertyAddColumnComponent";
 import { NewCollectionButton } from "./ui/NewCollectionButton";
+import { AddIcon, Button, Typography } from "@firecms/ui";
+import { useCollectionEditorController } from "./useCollectionEditorController";
 
 export interface CollectionConfigControllerProps<EC extends PersistedCollection = PersistedCollection, UserType extends User = User> {
 
@@ -28,8 +22,6 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
      */
     collectionConfigController: CollectionsConfigController;
 
-    modifyCollection?: (props: ModifyCollectionProps) => EntityCollection | void;
-
     /**
      * Define what actions can be performed on the configuration.
      */
@@ -59,6 +51,8 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 
     onAnalyticsEvent?: (event: string, params?: object) => void;
 
+    introMode?: "new_project" | "existing_project";
+
 }
 
 /**
@@ -75,7 +69,7 @@ export interface CollectionConfigControllerProps<EC extends PersistedCollection
 export function useCollectionEditorPlugin<EC extends PersistedCollection = PersistedCollection, UserType extends User = User>
 ({
      collectionConfigController,
-     modifyCollection,
+     introMode,
      configPermissions,
      reservedGroups,
      extraView,
@@ -86,8 +80,6 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
      onAnalyticsEvent
  }: CollectionConfigControllerProps<EC, UserType>): FireCMSPlugin<any, any, PersistedCollection> {
 
-
-
     return {
         name: "Collection Editor",
         loading: collectionConfigController.loading,
@@ -110,9 +102,10 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         },
         homePage: {
             additionalActions: <NewCollectionButton/>,
-            additionalChildrenEnd: <RootCollectionSuggestions/>,
+            additionalChildrenStart: introMode ? <IntroWidget introMode={introMode}/> : undefined,
+            additionalChildrenEnd: <RootCollectionSuggestions introMode={introMode}/>,
             CollectionActions: HomePageEditorCollectionAction,
-            AdditionalCards: NewCollectionCard,
+            AdditionalCards: introMode ? undefined : NewCollectionCard,
         },
         collectionView: {
             HeaderAction: CollectionViewHeaderAction,
@@ -120,3 +113,44 @@ export function useCollectionEditorPlugin<EC extends PersistedCollection = Persi
         }
     };
 }
+
+export function IntroWidget({ introMode }: {
+    introMode?: "new_project" | "existing_project";
+}) {
+
+    const navigation = useNavigationController();
+    if (!navigation.topLevelNavigation)
+        throw Error("Navigation not ready in FireCMSHomePage");
+
+    const authController = useAuthController();
+
+    const collectionEditorController = useCollectionEditorController();
+    const canCreateCollections = collectionEditorController.configPermissions
+        ? collectionEditorController.configPermissions({
+            user: authController.user,
+        }).createCollections
+        : true;
+
+    return (
+        <div className={"mt-8 flex flex-col mt-8 p-2"}>
+            <Typography variant={"h4"} className="mb-4">Welcome</Typography>
+            <Typography paragraph={true}>Your admin panel is ready ✌️</Typography>
+            <Typography paragraph={true}>
+                Start building collections in FireCMS easily. Map them to your existing
+                database data, import from files, or use our templates. Simplify your data management process
+                now.
+            </Typography>
+            {canCreateCollections && <Button
+                className={"mt-4"}
+                onClick={collectionEditorController && canCreateCollections
+                    ? () => collectionEditorController.createCollection({
+                        parentCollectionIds: [],
+                        redirect: true,
+                        sourceClick: "new_collection_card"
+                    })
+                    : undefined}>
+                <AddIcon/>Create your first collection
+            </Button>}
+        </div>
+    );
+}