Merge pull request #25 from Jamiewarb/feat/prevent-unlocking-folder

feat: allow documents to prevent folder from unlocking and being edited
tinloof · Apr 25, 2024 · dbdcdef · dbdcdef
2 parents 3f14755 + c1223af
commit dbdcdef
Show file tree

Hide file tree

Showing 3 changed files with 42 additions and 6 deletions.
diff --git a/packages/sanity-studio/README.md b/packages/sanity-studio/README.md
@@ -160,6 +160,29 @@ export default defineType({
 });
 ```
 
+### Lock folder renaming
+
+By default, folders can be renamed. Set the `folder.canUnlock` option to `false` to disable this.
+
+```tsx
+import { definePathname } from "@tinloof/sanity-studio";
+
+export default defineType({
+  type: "document",
+  name: "modularPage",
+  fields: [
+    definePathname({
+      name: "pathname",
+      options: {
+        folder: {
+          canUnlock: false,
+        },
+      },
+    }),
+  ],
+});
+```
+
 ### Customizing pages previews
 
 Documents can have their preview customized on the pages navigator using the [List Previews API](https://www.sanity.io/docs/previews-list-views):

diff --git a/packages/sanity-studio/src/components/PathnameFieldComponent.tsx b/packages/sanity-studio/src/components/PathnameFieldComponent.tsx
@@ -1,4 +1,4 @@
-import { EditIcon, EyeOpenIcon, FolderIcon } from "@sanity/icons";
+import { EditIcon, EyeOpenIcon, FolderIcon, LockIcon } from "@sanity/icons";
 import {
   usePresentationNavigate,
   usePresentationParams,
@@ -34,8 +34,12 @@ const FolderText = styled(Text)`
 export function PathnameFieldComponent(
   props: ObjectFieldProps<SlugValue>
 ): JSX.Element {
-  const i18nOptions = (props.schemaType.options as PathnameOptions | undefined)
-    ?.i18n ?? { enabled: false, defaultLocaleId: undefined };
+  const fieldOptions = props.schemaType.options as PathnameOptions | undefined;
+  const folderOptions = fieldOptions?.folder ?? { canUnlock: true };
+  const i18nOptions = fieldOptions?.i18n ?? {
+    enabled: false,
+    defaultLocaleId: undefined,
+  };
   const document = useFormValue([]) as DocumentWithLocale;
   const {
     inputProps: { onChange, value, readOnly },
@@ -46,6 +50,7 @@ export function PathnameFieldComponent(
   const folder = segments?.slice(0, -1).join("/");
   const slug = segments?.slice(-1)[0] || "";
   const [folderLocked, setFolderLocked] = useState(!!folder);
+  const folderCanUnlock = !readOnly && folderOptions.canUnlock;
 
   const fullPathInputRef = useRef<HTMLInputElement>(null);
   const pathSegmentInputRef = useRef<HTMLInputElement>(null);
@@ -114,14 +119,18 @@ export function PathnameFieldComponent(
               </Text>
               <FolderText muted>{folder}</FolderText>
               <UnlockButton
-                icon={EditIcon}
+                icon={folderCanUnlock ? EditIcon : LockIcon}
                 onClick={unlockFolder}
-                title="Edit path's folder"
+                title={
+                  folderCanUnlock
+                    ? "Edit path's folder"
+                    : "Folder is locked and cannot be changed"
+                }
                 mode="bleed"
                 tone="primary"
                 padding={2}
                 fontSize={1}
-                disabled={readOnly}
+                disabled={!folderCanUnlock}
               >
                 <span />
               </UnlockButton>
@@ -171,6 +180,7 @@ export function PathnameFieldComponent(
     handleBlur,
     value,
     localizedPathname,
+    folderCanUnlock,
   ]);
 
   return (

diff --git a/packages/sanity-studio/src/types.ts b/packages/sanity-studio/src/types.ts
@@ -158,6 +158,9 @@ export type SectionAddHandler = (params: {
 }) => void;
 
 export type PathnameOptions = SlugOptions & {
+  folder?: {
+    canUnlock?: boolean;
+  };
   i18n?: {
     enabled?: boolean;
     defaultLocaleId?: string;