Readonly files are not renamable now!

components/HooksEditor.tsx

@@ -24,13 +24,19 @@ import { saveAllFiles } from "../state/actions/saveFile";
 import { Tab, Tabs } from "./Tabs";
 import { renameFile } from "../state/actions/createNewFile";
 
-const validateWritability = (editor: monaco.editor.IStandaloneCodeEditor) => {
-  const currPath = editor.getModel()?.uri.path;
-  if (apiHeaderFiles.find(h => currPath?.endsWith(h))) {
-    editor.updateOptions({ readOnly: true });
-  } else {
-    editor.updateOptions({ readOnly: false });
+const checkWritable = (filename?: string): boolean => {
+  if (apiHeaderFiles.find(file => file === filename)) {
+    return false;
   }
+  return true;
+};
+
+const validateWritability = (
+  editor: monaco.editor.IStandaloneCodeEditor
+) => {
+  const filename = editor.getModel()?.uri.path.split("/").pop();
+  const isWritable = checkWritable(filename);
+  editor.updateOptions({ readOnly: !isWritable });
 };
 
 let decorations: { [key: string]: string[] } = {};
@@ -138,7 +144,7 @@ const HooksEditor = () => {
       }}
     >
       {snap.files.map((file, index) => {
-        return <Tab key={file.name} header={file.name} />;
+        return <Tab key={file.name} header={file.name} renameDisabled={!checkWritable(file.name)} />;
       })}
     </Tabs>
   );

components/Tabs.tsx

@@ -31,6 +31,7 @@ type Nullable<T> = T | null | undefined | false;
 interface TabProps {
   header: string;
   children?: ReactNode;
+  renameDisabled?: boolean
 }
 
 // TODO customize messages shown
@@ -98,16 +99,15 @@ export const Tabs = ({
   }, [tabname, setTabnameError]);
 
   const validateTabname = useCallback(
-    (tabname: string): { error?: string, result?: string } => {
+    (tabname: string): { error?: string; result?: string } => {
       if (!tabname) {
         return { error: `Please enter ${label.toLocaleLowerCase()} name.` };
       }
-      let ext =
-        (tabname.includes(".") && tabname.split(".").pop()) || "";
-      
+      let ext = (tabname.includes(".") && tabname.split(".").pop()) || "";
+
       if (!ext && defaultExtension) {
-        ext = defaultExtension
-        tabname = `${tabname}.${defaultExtension}`
+        ext = defaultExtension;
+        tabname = `${tabname}.${defaultExtension}`;
       }
       if (tabs.find(tab => tab.header === tabname)) {
         return { error: `${capitalize(label)} name already exists.` };
@@ -153,16 +153,23 @@ export const Tabs = ({
       return;
     }
 
-    const { result: _tabname = tabname } = res
+    const { result: nwName = tabname } = res;
 
     setRenamingTab(null);
     setTabname("");
 
     const oldName = tabs[renamingTab]?.header;
-    onRenameTab?.(renamingTab, _tabname, oldName);
+    onRenameTab?.(renamingTab, nwName, oldName);
 
-    handleActiveChange(renamingTab);
-  }, [handleActiveChange, onRenameTab, renamingTab, tabname, tabs, validateTabname]);
+    handleActiveChange(renamingTab, nwName);
+  }, [
+    handleActiveChange,
+    onRenameTab,
+    renamingTab,
+    tabname,
+    tabs,
+    validateTabname,
+  ]);
 
   const handleCreateTab = useCallback(() => {
     const res = validateTabname(tabname);
@@ -170,7 +177,7 @@ export const Tabs = ({
       setTabnameError(`Error: ${res.error}`);
       return;
     }
-    const { result: _tabname = tabname } = res
+    const { result: _tabname = tabname } = res;
 
     setIsNewtabDialogOpen(false);
     setTabname("");
@@ -178,17 +185,22 @@ export const Tabs = ({
     onCreateNewTab?.(_tabname);
 
     handleActiveChange(tabs.length, _tabname);
-  }, [validateTabname, tabname, onCreateNewTab, handleActiveChange, tabs.length]);
+  }, [
+    validateTabname,
+    tabname,
+    onCreateNewTab,
+    handleActiveChange,
+    tabs.length,
+  ]);
 
   const handleCloseTab = useCallback(
     (idx: number) => {
-      if (idx <= active && active !== 0) {
-        setActive(active - 1);
-      }
-
       onCloseTab?.(idx, tabs[idx].header);
 
-      handleActiveChange(idx, tabs[idx].header);
+      if (idx <= active && active !== 0) {
+        const nwActive = active - 1
+        handleActiveChange(nwActive, tabs[nwActive].header);
+      }
     },
     [active, handleActiveChange, onCloseTab, tabs]
   );
@@ -200,13 +212,16 @@ export const Tabs = ({
       key: "close",
       onSelect: () => handleCloseTab(idx),
     };
-  const renameOption = (idx: number): Nullable<ContentMenuOption> =>
-    onRenameTab && {
-      type: "text",
-      label: "Rename",
-      key: "rename",
-      onSelect: () => setRenamingTab(idx),
-    };
+  const renameOption = (idx: number, tab: TabProps): Nullable<ContentMenuOption> => {
+    return (
+      onRenameTab && !tab.renameDisabled && {
+        type: "text",
+        label: "Rename",
+        key: "rename",
+        onSelect: () => setRenamingTab(idx),
+      }
+    );
+  }
   
   return (
     <>
@@ -225,7 +240,7 @@ export const Tabs = ({
             <ContextMenu
               key={tab.header}
               options={
-                [closeOption(idx), renameOption(idx)].filter(
+                [closeOption(idx), renameOption(idx, tab)].filter(
                   Boolean
                 ) as ContentMenuOption[]
               }