fix(code-editor): can't move files on basic editor (#1768)

Author: davidvitora

modules/code-editor/src/views/full/FileNavigator.tsx

@@ -212,7 +212,7 @@ class FileNavigator extends React.Component<Props, State> {
     }
 
     const isDisabled = file.name.startsWith('.')
-    const canMove = this.props.store.editor.isAdvanced && this.props.moveFile
+    const canMove = this.props.moveFile
 
     ContextMenu.show(
       <Menu>

modules/code-editor/src/views/full/SidePanel.tsx

@@ -195,6 +195,7 @@ class PanelContent extends React.Component<Props> {
           selectedNode={this.state.selectedNode}
           onNodeStateExpanded={this.updateNodeExpanded}
           onNodeStateSelected={this.updateNodeSelected}
+          moveFile={file => this.setState({ selectedFile: file, isMoveModalOpen: true })}
         />
       </SidePanelSection>
     )
@@ -245,6 +246,7 @@ class PanelContent extends React.Component<Props> {
           selectedNode={this.state.selectedNode}
           onNodeStateExpanded={this.updateNodeExpanded}
           onNodeStateSelected={this.updateNodeSelected}
+          moveFile={file => this.setState({ selectedFile: file, isMoveModalOpen: true })}
         />
       </SidePanelSection>
     )
@@ -282,14 +284,6 @@ class PanelContent extends React.Component<Props> {
           onNodeStateSelected={this.updateNodeSelected}
           moveFile={file => this.setState({ selectedFile: file, isMoveModalOpen: true })}
         />
-        <NameModal
-          isOpen={this.state.isMoveModalOpen}
-          toggle={() => this.setState({ isMoveModalOpen: !this.state.isMoveModalOpen })}
-          createFile={createFile}
-          renameFile={this.props.store.renameFile}
-          selectedFile={this.state.selectedFile}
-          files={this.props.files}
-        />
       </SidePanelSection>
     )
   }
@@ -354,6 +348,10 @@ class PanelContent extends React.Component<Props> {
     ]
   }
 
+  createFile = async (name: string) => {
+    return this.props.editor.openFile({ name, location: name, content: ' ', type: 'raw' })
+  }
+
   render() {
     const { isAdvanced } = this.props.editor
     return (
@@ -375,6 +373,14 @@ class PanelContent extends React.Component<Props> {
               {this.renderSectionModuleConfig()}
             </React.Fragment>
           )}
+          <NameModal
+            isOpen={this.state.isMoveModalOpen}
+            toggle={() => this.setState({ isMoveModalOpen: !this.state.isMoveModalOpen })}
+            createFile={this.createFile}
+            renameFile={this.props.store.renameFile}
+            selectedFile={this.state.selectedFile}
+            files={this.props.files}
+          />
         </React.Fragment>
 
         <MainLayout.BottomPanel.Register tabName="Code Editor">

modules/code-editor/src/views/full/components/NameModal.tsx

@@ -24,7 +24,13 @@ const NameModal: FC<Props> = props => {
   const [name, setName] = useState('')
 
   useEffect(() => {
-    props.selectedFile ? setName(props.selectedFile.location) : setName('')
+    if (!props.selectedFile) {
+      setName('')
+      return
+    }
+
+    const { location, hookType } = props.selectedFile
+    setName(hookType?.length ? location.replace(hookType + '/', '') : location)
   }, [props.isOpen])
 
   const submit = async e => {