@firecms/collection_editor 3.0.0-tw4.6 → 3.0.1

package/dist/types/config_controller.d.ts

@@ -1,5 +1,9 @@
 import { CMSType, NavigationGroupMapping, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
+export interface CollectionsSetupInfo {
+    status: "ongoing" | "complete";
+    error: string | null;
+}
 /**
  * Use this controller to access the configuration that is stored externally,
  * and not defined in code.
@@ -7,6 +11,11 @@ import { PersistedCollection } from "./persisted_collection";
 export interface CollectionsConfigController {
     loading: boolean;
     collections?: PersistedCollection[];
+    /**
+     * Status information about the automatic collections setup process.
+     * Stored in the project config document at `collectionsSetup`.
+     */
+    collectionsSetup?: CollectionsSetupInfo;
     getCollection: (id: string) => PersistedCollection;
     saveCollection: <M extends {
         [Key: string]: CMSType;

package/package.json

@@ -1,18 +1,18 @@
 {
   "name": "@firecms/collection_editor",
   "type": "module",
-  "version": "3.0.0-tw4.6",
+  "version": "3.0.1",
   "main": "./dist/index.umd.js",
   "module": "./dist/index.es.js",
   "types": "./dist/index.d.ts",
   "source": "src/index.ts",
   "dependencies": {
-    "@firecms/data_export": "^3.0.0-tw4.6",
-    "@firecms/data_import": "^3.0.0-tw4.6",
-    "@firecms/data_import_export": "^3.0.0-tw4.6",
-    "@firecms/formex": "^3.0.0-tw4.6",
-    "@firecms/schema_inference": "^3.0.0-tw4.6",
-    "@firecms/ui": "^3.0.0-tw4.6",
+    "@firecms/data_export": "^3.0.1",
+    "@firecms/data_import": "^3.0.1",
+    "@firecms/data_import_export": "^3.0.1",
+    "@firecms/formex": "^3.0.1",
+    "@firecms/schema_inference": "^3.0.1",
+    "@firecms/ui": "^3.0.1",
     "json5": "^2.2.3",
     "prism-react-renderer": "^2.4.1"
   },
@@ -69,5 +69,5 @@
   "publishConfig": {
     "access": "public"
   },
-  "gitHead": "5d7730c824c3847505a2f51099698dd57934d68a"
+  "gitHead": "72d951d01d15ef5a7efcde6c63839f65964d2f7a"
 }

package/src/index.ts

@@ -15,7 +15,7 @@ export {
 export * from "./utils/collections";
 
 export type {
-    CollectionsConfigController, DeleteCollectionParams, SaveCollectionParams, UpdateCollectionParams
+    CollectionsConfigController, DeleteCollectionParams, SaveCollectionParams, UpdateCollectionParams, CollectionsSetupInfo
 } from "./types/config_controller";
 export type {
     CollectionEditorController

package/src/types/config_controller.tsx

@@ -1,6 +1,11 @@
 import { CMSType, NavigationGroupMapping, Property } from "@firecms/core";
 import { PersistedCollection } from "./persisted_collection";
 
+export interface CollectionsSetupInfo {
+    status: "ongoing" | "complete";
+    error: string | null;
+}
+
 /**
  * Use this controller to access the configuration that is stored externally,
  * and not defined in code.
@@ -11,6 +16,12 @@ export interface CollectionsConfigController {
 
     collections?: PersistedCollection[];
 
+    /**
+     * Status information about the automatic collections setup process.
+     * Stored in the project config document at `collectionsSetup`.
+     */
+    collectionsSetup?: CollectionsSetupInfo;
+
     getCollection: (id: string) => PersistedCollection;
 
     saveCollection: <M extends { [Key: string]: CMSType }>(params: SaveCollectionParams<M>) => Promise<void>;

package/src/ui/PropertyAddColumnComponent.tsx

@@ -29,7 +29,7 @@ export function PropertyAddColumnComponent({
             asChild={true}
             title={canEditCollection ? "Add new property" : "You don't have permission to add new properties"}>
             <div
-                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 bg-surface-100/40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:bg-surface-950/40 dark:hover:bg-surface-950"}
+                className={"p-0.5 w-20 h-full flex items-center justify-center cursor-pointer bg-surface-100 bg-opacity-40 hover:bg-surface-100 dark:bg-surface-950 dark:bg-opacity-40 dark:hover:bg-surface-950"}
                 // className={onHover ? "bg-white dark:bg-surface-950" : undefined}
                 onClick={() => {
                     collectionEditorController.editProperty({

package/src/ui/collection_editor/CollectionDetailsForm.tsx

@@ -165,7 +165,6 @@ export function CollectionDetailsForm({
                         <Field name={"path"}
                                as={DebouncedTextField}
                                label={"Path"}
-                               disabled={!isNewCollection}
                                required
                                error={showErrors && Boolean(errors.path)}/>
 
@@ -241,7 +240,7 @@ export function CollectionDetailsForm({
                             expanded={advancedPanelExpanded}
                             onExpandedChange={setAdvancedPanelExpanded}
                             title={
-                                <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
+                                <div className="flex flex-row text-surface-500">
                                     <SettingsIcon/>
                                     <Typography variant={"subtitle2"}
                                                 className="ml-2">

package/src/ui/collection_editor/CollectionEditorDialog.tsx

@@ -693,32 +693,26 @@ function CollectionEditorInternal<M extends Record<string, any>>({
                         {isNewCollection && includeTemplates && currentView === "import_data_mapping" &&
                             <Button variant={"text"}
                                     type="button"
-                                    color={"primary"}
                                     onClick={() => {
                                         importConfig.setInUse(false);
                                         return setCurrentView("welcome");
                                     }}>
-                                <ArrowBackIcon/>
                                 Back
                             </Button>}
 
                         {isNewCollection && includeTemplates && currentView === "import_data_preview" &&
                             <Button variant={"text"}
                                     type="button"
-                                    color={"primary"}
                                     onClick={() => {
                                         setCurrentView("import_data_mapping");
                                     }}>
-                                <ArrowBackIcon/>
                                 Back
                             </Button>}
 
                         {isNewCollection && includeTemplates && currentView === "details" &&
                             <Button variant={"text"}
-                                    color={"neutral"}
                                     type="button"
                                     onClick={() => setCurrentView("welcome")}>
-                                <ArrowBackIcon/>
                                 Back
                             </Button>}
 

package/src/ui/collection_editor/CollectionEditorWelcomeView.tsx

@@ -156,7 +156,7 @@ export function TemplateButton({
                 onClick={onClick}
                 className={cls(
                     "my-2 rounded-md border mx-0 p-6 px-4 focus:outline-none transition ease-in-out duration-150 flex flex-row gap-4 items-center",
-                    "text-text-secondary dark:text-text-secondary-dark",
+                    "text-surface-700 dark:text-surface-accent-300",
                     "hover:border-primary-dark hover:text-primary-dark dark:hover:text-primary focus:ring-primary hover:ring-1 hover:ring-primary",
                     "border-surface-400 dark:border-surface-600 "
                 )}

package/src/ui/collection_editor/CollectionPropertiesEditorForm.tsx

@@ -303,7 +303,7 @@ export function CollectionPropertiesEditorForm({
     };
 
     const body = (
-        <div className={"grid grid-cols-12 gap-2 h-full bg-surface dark:bg-surface-dark"}>
+        <div className={"grid grid-cols-12 gap-2 h-full bg-white dark:bg-surface-950"}>
             <div className={cls(
                 "bg-surface-50 dark:bg-surface-900",
                 "p-4 md:p-8 pb-20 md:pb-20",

package/src/ui/collection_editor/PropertyFieldPreview.tsx

@@ -42,7 +42,7 @@ export function PropertyFieldPreview({
     const disabled = !editableProperty(property);
 
     const borderColorClass = hasError
-        ? "border-red-500 dark:border-red-500 border-opacity-100 dark:border-opacity-100 border-red-500/100 dark:border-red-500/100 ring-0 dark:ring-0"
+        ? "border-red-500 dark:border-red-500 border-opacity-100 dark:border-opacity-100 ring-0 dark:ring-0"
         : (selected ? "border-primary" : "border-transparent");
 
     return <ErrorBoundary>

package/src/ui/collection_editor/properties/ReferencePropertyField.tsx

@@ -41,7 +41,7 @@ export function ReferencePropertyField({
                 <Field name={pathPath}
                        pathPath={pathPath}
                        type="select"
-                       disabled={(existing && Boolean(pathValue)) || disabled}
+                       disabled={disabled}
                        value={pathValue}
                        error={pathError}
                        handleChange={handleChange}
@@ -155,10 +155,6 @@ export function CollectionsSelect({
 
             </Select>
 
-            <FieldCaption>
-                You can only edit the reference collection upon field
-                creation.
-            </FieldCaption>
         </>
     );
 }

package/src/ui/collection_editor/properties/StoragePropertyField.tsx

@@ -48,6 +48,7 @@ export function StoragePropertyField({
     const maxSize = `${baseStoragePath}.maxSize`;
     const storagePath = `${baseStoragePath}.storagePath`;
     const storeUrl = `${baseStoragePath}.storeUrl`;
+    const includeBucketUrl = `${baseStoragePath}.includeBucketUrl`;
 
     // Image resize config paths
     const imageResize = `${baseStoragePath}.imageResize`;
@@ -87,7 +88,7 @@ export function StoragePropertyField({
 
                 <ExpandablePanel
                     title={
-                        <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
+                        <div className="flex flex-row text-surface-500">
                             <CloudUploadIcon/>
                             <Typography variant={"subtitle2"}
                                         className="ml-4">
@@ -169,6 +170,26 @@ export function StoragePropertyField({
                                 </ul>
                             </Typography>
 
+                            <Field name={includeBucketUrl}
+                                   type="checkbox">
+                                {({
+                                      field,
+                                      form
+                                  }: FormexFieldProps) => {
+                                    return <SwitchControl
+                                        label={"Include bucket URL (gs://...) in saved value"}
+                                        disabled={existing || disabled}
+                                        form={form}
+                                        field={field}/>;
+                                }}
+                            </Field>
+
+                            <Typography variant={"caption"} className={"ml-3.5 mt-1 mb-2"}>
+                                Turn this setting on if you want to save a fully-qualified storage URL
+                                (e.g. <code>gs://my-bucket/path/to/file</code>) instead of just the storage path.
+                                You can only change this prop upon creation.
+                            </Typography>
+
                             <Field name={storeUrl}
                                    type="checkbox">
                                 {({
@@ -179,7 +200,7 @@ export function StoragePropertyField({
                                         label={"Save URL instead of storage path"}
                                         disabled={existing || disabled}
                                         form={form}
-                                        field={field}/>
+                                        field={field}/>;
                                 }}
                             </Field>
 

package/src/ui/collection_editor/properties/validation/ValidationPanel.tsx

@@ -12,7 +12,7 @@ export function ValidationPanel({
             asField={true}
             innerClassName="p-4"
             title={
-                <div className="flex flex-row text-surface-500 text-text-secondary dark:text-text-secondary-dark">
+                <div className="flex flex-row text-surface-500">
                     <RuleIcon/>
                     <Typography variant={"subtitle2"}
                                 className="ml-4">