Address feedback

Co-authored-by: Jonas Treub <[email protected]>

Author: alecmev

package-lock.json

@@ -34,7 +34,7 @@
         "typescript": "^5.7.3",
         "typescript-eslint": "^8.25.0",
         "vite": "^6.2.4",
-        "vite-plugin-framer": "^1.0.6",
+        "vite-plugin-framer": "^1.0.7",
         "vite-plugin-mkcert": "^1.17.7"
     }
 }

starters/cms/package.json

@@ -147,11 +147,11 @@ form {
     box-shadow: none;
 }
 
-[data-framer-theme=light] .mapping .source-field input[type="checkbox"]:not(:checked) {
+[data-framer-theme="light"] .mapping .source-field input[type="checkbox"]:not(:checked) {
     background: #ccc;
 }
 
-[data-framer-theme=dark] .mapping .source-field input[type="checkbox"]:not(:checked) {
+[data-framer-theme="dark"] .mapping .source-field input[type="checkbox"]:not(:checked) {
     background: #666;
 }
 
@@ -163,9 +163,6 @@ form {
     background-color: var(--framer-color-bg);
     margin-top: auto;
     padding-bottom: 15px;
-    display: flex;
-    flex-direction: column;
-    gap: 15px;
 }
 
 .mapping footer::before {
@@ -178,3 +175,7 @@ form {
     background: linear-gradient(to bottom, transparent, var(--framer-color-bg));
     pointer-events: none;
 }
+
+.mapping footer > hr {
+    margin-bottom: 15px;
+}

starters/cms/src/App.css

@@ -1,26 +1,35 @@
-import { type EditableManagedCollectionField, framer, type ManagedCollection, useIsAllowedTo } from "framer-plugin"
+import { type ManagedCollectionFieldInput, framer, type ManagedCollection, useIsAllowedTo } from "framer-plugin"
 import { useEffect, useState } from "react"
 import { type DataSource, dataSourceOptions, mergeFieldsWithExistingFields, syncCollection, syncMethods } from "./data"
 
 interface FieldMappingRowProps {
-    field: EditableManagedCollectionField
+    field: ManagedCollectionFieldInput
     originalFieldName: string | undefined
-    disabled: boolean
+    isIgnored: boolean
     onToggleDisabled: (fieldId: string) => void
     onNameChange: (fieldId: string, name: string) => void
+    disabled: boolean
 }
 
-function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled, onNameChange }: FieldMappingRowProps) {
+function FieldMappingRow({
+    field,
+    originalFieldName,
+    isIgnored,
+    onToggleDisabled,
+    onNameChange,
+    disabled,
+}: FieldMappingRowProps) {
     return (
         <>
             <button
                 type="button"
                 className="source-field"
-                aria-disabled={disabled}
+                aria-disabled={isIgnored}
                 onClick={() => onToggleDisabled(field.id)}
                 tabIndex={0}
+                disabled={disabled}
             >
-                <input type="checkbox" checked={!disabled} tabIndex={-1} readOnly />
+                <input type="checkbox" checked={!isIgnored} tabIndex={-1} readOnly />
                 <span>{originalFieldName ?? field.id}</span>
             </button>
             <svg xmlns="http://www.w3.org/2000/svg" width="8" height="8" fill="none">
@@ -35,8 +44,8 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
             </svg>
             <input
                 type="text"
-                style={{ width: "100%", opacity: disabled ? 0.5 : 1 }}
-                disabled={disabled}
+                style={{ width: "100%", opacity: isIgnored || disabled ? 0.5 : 1 }}
+                disabled={isIgnored || disabled}
                 placeholder={field.id}
                 value={field.name}
                 onChange={event => onNameChange(field.id, event.target.value)}
@@ -50,7 +59,7 @@ function FieldMappingRow({ field, originalFieldName, disabled, onToggleDisabled,
     )
 }
 
-const initialManagedCollectionFields: EditableManagedCollectionField[] = []
+const initialManagedCollectionFields: ManagedCollectionFieldInput[] = []
 const initialFieldIds: ReadonlySet<string> = new Set()
 
 interface FieldMappingProps {
@@ -68,7 +77,7 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
 
     const [possibleSlugFields] = useState(() => dataSource.fields.filter(field => field.type === "string"))
 
-    const [selectedSlugField, setSelectedSlugField] = useState<EditableManagedCollectionField | null>(
+    const [selectedSlugField, setSelectedSlugField] = useState<ManagedCollectionFieldInput | null>(
         possibleSlugFields.find(field => field.id === initialSlugFieldId) ?? possibleSlugFields[0] ?? null
     )
 
@@ -137,12 +146,6 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
     const handleSubmit = async (event: React.FormEvent<HTMLFormElement>) => {
         event.preventDefault()
 
-        if (!isAllowedToManage) {
-            console.error("Insufficient permissions for management")
-            framer.notify("Insufficient permissions for management", { variant: "error" })
-            return
-        }
-
         if (!selectedSlugField) {
             // This can't happen because the form will not submit if no slug field is selected
             // but TypeScript can't infer that.
@@ -196,6 +199,8 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
                             if (!selectedField) return
                             setSelectedSlugField(selectedField)
                         }}
+                        disabled={!isAllowedToManage}
+                        style={{ opacity: isAllowedToManage ? 1 : 0.5 }}
                     >
                         {possibleSlugFields.map(possibleSlugField => {
                             return (
@@ -215,24 +220,27 @@ export function FieldMapping({ collection, dataSource, initialSlugFieldId }: Fie
                             key={`field-${field.id}`}
                             field={field}
                             originalFieldName={dataSource.fields.find(sourceField => sourceField.id === field.id)?.name}
-                            disabled={ignoredFieldIds.has(field.id)}
+                            isIgnored={ignoredFieldIds.has(field.id)}
                             onToggleDisabled={toggleFieldDisabledState}
                             onNameChange={changeFieldName}
+                            disabled={!isAllowedToManage}
                         />
                     ))}
                 </div>
 
                 <footer>
                     <hr />
-                    <button disabled={isSyncing || !isAllowedToManage} tabIndex={0}>
+                    <button
+                        disabled={isSyncing || !isAllowedToManage}
+                        tabIndex={0}
+                        title={isAllowedToManage ? undefined : "Insufficient permissions"}
+                    >
                         {isSyncing ? (
                             <div className="framer-spinner" />
-                        ) : isAllowedToManage ? (
+                        ) : (
                             <span>
                                 Import <span style={{ textTransform: "capitalize" }}>{dataSourceName}</span>
                             </span>
-                        ) : (
-                            "Insufficient permissions"
                         )}
                     </button>
                 </footer>

starters/cms/src/FieldMapping.tsx

@@ -1,5 +1,5 @@
 import {
-    type EditableManagedCollectionField,
+    type ManagedCollectionFieldInput,
     type FieldDataInput,
     framer,
     type ManagedCollection,
@@ -13,7 +13,7 @@ export const PLUGIN_KEYS = {
 
 export interface DataSource {
     id: string
-    fields: readonly EditableManagedCollectionField[]
+    fields: readonly ManagedCollectionFieldInput[]
     items: FieldDataInput[]
 }
 
@@ -44,7 +44,7 @@ export async function getDataSource(dataSourceId: string, abortSignal?: AbortSig
     const dataSource = await dataSourceResponse.json()
 
     // Map your source fields to supported field types in Framer
-    const fields: EditableManagedCollectionField[] = []
+    const fields: ManagedCollectionFieldInput[] = []
     for (const field of dataSource.fields) {
         switch (field.type) {
             case "string":
@@ -83,9 +83,9 @@ export async function getDataSource(dataSourceId: string, abortSignal?: AbortSig
 }
 
 export function mergeFieldsWithExistingFields(
-    sourceFields: readonly EditableManagedCollectionField[],
-    existingFields: readonly EditableManagedCollectionField[]
-): EditableManagedCollectionField[] {
+    sourceFields: readonly ManagedCollectionFieldInput[],
+    existingFields: readonly ManagedCollectionFieldInput[]
+): ManagedCollectionFieldInput[] {
     return sourceFields.map(sourceField => {
         const existingField = existingFields.find(existingField => existingField.id === sourceField.id)
         if (existingField) {
@@ -98,8 +98,8 @@ export function mergeFieldsWithExistingFields(
 export async function syncCollection(
     collection: ManagedCollection,
     dataSource: DataSource,
-    fields: readonly EditableManagedCollectionField[],
-    slugField: EditableManagedCollectionField
+    fields: readonly ManagedCollectionFieldInput[],
+    slugField: ManagedCollectionFieldInput
 ) {
     const items: ManagedCollectionItemInput[] = []
     const unsyncedItems = new Set(await collection.getItemIds())
@@ -143,9 +143,8 @@ export async function syncCollection(
     await collection.setPluginData(PLUGIN_KEYS.SLUG_FIELD_ID, slugField.id)
 }
 
+// TODO: ProtectedMethod[]
 export const syncMethods = [
-    "ManagedCollection.getFields",
-    "ManagedCollection.getItemIds",
     "ManagedCollection.removeItems",
     "ManagedCollection.addItems",
     "ManagedCollection.setPluginData",

starters/cms/src/data.ts

@@ -6,11 +6,6 @@ import { createRoot } from "react-dom/client"
 import { App } from "./App.tsx"
 import { PLUGIN_KEYS, syncExistingCollection, syncMethods } from "./data"
 
-if (!framer.isAllowedTo("getActiveManagedCollection", "ManagedCollection.getPluginData")) {
-    await framer.closePlugin("Insufficient permissions", { variant: "error" })
-    throw new Error("Insufficient permissions for getActiveManagedCollection and ManagedCollection.getPluginData")
-}
-
 const activeCollection = await framer.getActiveManagedCollection()
 const previousDataSourceId = await activeCollection.getPluginData(PLUGIN_KEYS.DATA_SOURCE_ID)
 const previousSlugFieldId = await activeCollection.getPluginData(PLUGIN_KEYS.SLUG_FIELD_ID)
@@ -31,14 +26,13 @@ function launch() {
 }
 
 if (framer.mode === "syncManagedCollection") {
-    if (!framer.isAllowedTo(...syncMethods)) {
-        await framer.closePlugin("Insufficient permissions for synchronization", { variant: "error" })
-        throw new Error("Insufficient permissions for synchronization")
-    }
-
-    const { didSync } = await syncExistingCollection(activeCollection, previousDataSourceId, previousSlugFieldId)
-    if (didSync) {
-        await framer.closePlugin("Synchronization successful", { variant: "success" })
+    if (framer.isAllowedTo(...syncMethods)) {
+        const { didSync } = await syncExistingCollection(activeCollection, previousDataSourceId, previousSlugFieldId)
+        if (didSync) {
+            await framer.closePlugin("Synchronization successful", { variant: "success" })
+        } else {
+            launch()
+        }
     } else {
         launch()
     }