dynamically sort items

apps/remix-ide/src/app/panels/file-panel.js

@@ -66,6 +66,15 @@ module.exports = class Filepanel extends ViewPlugin {
 
   /**
    * @param item { id: string, name: string, type?: string[], path?: string[], extension?: string[], pattern?: string[] }
+   * typically: 
+   * group 0 for file manipulations
+   * group 1 for download operations
+   * group 2 for running operations (script for instance)
+   * group 3 for publishing operations (gist)
+   * group 4 for copying operations
+   * group 5 for solidity file operations (flatten for instance)
+   * group 6 for compiling operations
+   * group 7 for generating resource files (UML, documentation, ...)
    * @param callback (...args) => void
    */
   registerContextMenuItem (item) {

apps/remix-ide/src/app/tabs/compile-tab.js

@@ -123,7 +123,8 @@ class CompileTab extends CompilerApiMixin(ViewPlugin) { // implements ICompilerA
         type: [],
         extension: ['.sol'],
         path: [],
-        pattern: []
+        pattern: [],
+        group: 6
       })
     })
     try {

apps/remix-ide/src/remixAppManager.js

@@ -192,7 +192,8 @@ export class RemixAppManager extends PluginManager {
       extension: ['.sol'],
       path: [],
       pattern: [],
-      sticky: true
+      sticky: true,
+      group: 5
     })
     await this.call('filePanel', 'registerContextMenuItem', {
       id: 'nahmii-compiler',
@@ -202,7 +203,8 @@ export class RemixAppManager extends PluginManager {
       extension: ['.sol'],
       path: [],
       pattern: [],
-      sticky: true
+      sticky: true,
+      group: 6
     })
     await this.call('filePanel', 'registerContextMenuItem', {
       id: 'solidityumlgen',
@@ -212,7 +214,8 @@ export class RemixAppManager extends PluginManager {
       extension: ['.sol'],
       path: [],
       pattern: [],
-      sticky: true
+      sticky: true,
+      group: 7
     })
     await this.call('filePanel', 'registerContextMenuItem', {
       id: 'doc-gen',
@@ -222,7 +225,8 @@ export class RemixAppManager extends PluginManager {
       extension: ['.sol'],
       path: [],
       pattern: [],
-      sticky: true
+      sticky: true,
+      group: 7
     })
   }
 }

libs/remix-ui/workspace/src/lib/components/file-explorer-context-menu.tsx

@@ -73,13 +73,21 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
 
   const menu = () => {
     let group = 0
-    return actions.filter(item => filterItem(item)).map((item, index) => {
+    const groupedActions = actions.filter(item => filterItem(item)).reduce((acc, item) => {
+      if (item.group === undefined || item.group === null) item.group = 99
+      if (!acc[item.group]) acc[item.group] = []
+      acc[item.group].push(item)
+      return acc;
+    }, [])
+    console.log(groupedActions)
+    return groupedActions.map((groupItem, groupIndex) => groupItem.map((item, index) => {
+      const key = groupIndex*index
       const className = `remixui_liitem ${group !== item.group ? 'border-top': ''}`
       group = item.group
       if(item.name === "Upload File"){
         return <li
         id={`menuitem${item.name.toLowerCase()}`}
-        key={index}
+        key={key}
         className={className}
         onClick={()=>{
           _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'uploadFile'])
@@ -91,7 +99,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
       if(item.name === "Load a Local File"){
         return <li
         id={`menuitem${item.name.toLowerCase()}`}
-        key={index}
+        key={key}
         className={className}
         onClick={()=>{
           _paq.push(['trackEvent', 'fileExplorer', 'contextMenu', 'uploadFile'])
@@ -101,7 +109,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
       }
       return <li
         id={`menuitem${item.name.toLowerCase()}`}
-        key={index}
+        key={key}
         className={className}
         onClick={(e) => {
           e.stopPropagation()
@@ -173,7 +181,7 @@ export const FileExplorerContextMenu = (props: FileExplorerContextMenuProps) =>
           }
           hideContextMenu()
         }}>{intl.formatMessage({id: `filePanel.${item.id}`, defaultMessage: item.label || item.name})}</li>
-    })
+    }))
   }
   
   return (

libs/remix-ui/workspace/src/lib/utils/index.ts

@@ -35,55 +35,76 @@ export const contextMenuActions: MenuItems = [{
   multiselect: true,
   label: '',
   group: 0
+}, {
+  id: 'copy',
+  name: 'Copy',
+  type: ['folder', 'file'],
+  multiselect: false,
+  label: '',
+  group: 1
+}, {
+  id: 'copyFileName',
+  name: 'Copy name',
+  type: ['file'],
+  multiselect: false,
+  label: '',
+  group: 1
+}, {
+  id: 'copyFilePath',
+  name: 'Copy path',
+  type: ['file'],
+  multiselect: false,
+  label: '',
+  group: 1
 }, {
   id: 'download',
   name: 'Download',
   type: ['file', 'folder', 'workspace'],
   multiselect: false,
   label: '',
-  group: 1
+  group: 2
 }, {
   id: 'run',
   name: 'Run',
   extension: ['.js', '.ts'],
   multiselect: false,
   label: '',
-  group: 2
+  group: 3
 },{
   id: 'pushChangesToGist',
   name: 'Push changes to gist',
   type: ['gist'],
   multiselect: false,
   label: '',
-  group: 3
+  group: 4
 }, {
   id: 'publishFolderToGist',
   name: 'Publish folder to gist',
   type: ['folder'],
   multiselect: false,
   label: '',
-  group: 3
+  group: 4
 }, {
   id: 'publishFileToGist',
   name: 'Publish file to gist',
   type: ['file'],
   multiselect: false,
   label: '',
-  group: 3
+  group: 4
 }, {
   id: 'uploadFile',
   name: 'Load a Local File',
   type: ['folder', 'gist', 'workspace'],
   multiselect: false,
   label: 'Load a Local File',
-  group: 3
+  group: 4
 }, {
   id: 'publishToGist',
   name: 'Push changes to gist',
   type: ['folder', 'gist'],
   multiselect: false,
   label: 'Publish all to Gist',
-  group: 3
+  group: 4
 },
 {
   id: 'publishWorkspace',
@@ -91,26 +112,5 @@ export const contextMenuActions: MenuItems = [{
   type: ['workspace'],
   multiselect: false,
   label: '',
-  group: 3
-}, {
-  id: 'copy',
-  name: 'Copy',
-  type: ['folder', 'file'],
-  multiselect: false,
-  label: '',
-  group: 4
-}, {
-  id: 'copyFileName',
-  name: 'Copy name',
-  type: ['file'],
-  multiselect: false,
-  label: '',
-  group: 4
-}, {
-  id: 'copyFilePath',
-  name: 'Copy path',
-  type: ['file'],
-  multiselect: false,
-  label: '',
   group: 4
 }]