refactoring the saved workspaces to have >3 saved

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

@@ -181,17 +181,16 @@ module.exports = class Filepanel extends ViewPlugin {
 
   saveRecent(workspaceName) {
     if (!localStorage.getItem('recentWorkspaces')) {
-      localStorage.setItem('recentWorkspaces', JSON.stringify({ first: workspaceName, second: '', third: '' }))
+      localStorage.setItem('recentWorkspaces', JSON.stringify([ workspaceName ]))
     } else {
-      const recents = JSON.parse(localStorage.getItem('recentWorkspaces'))
+      let recents = JSON.parse(localStorage.getItem('recentWorkspaces'))
       // checking if we have a duplication
-      if (recents.first !== workspaceName && recents.second !== workspaceName && recents.third !== workspaceName) {
+      if (!recents.find((el) => {
-        // filtering removed records
+        return el === workspaceName
-        const firstW = workspaceName
+      })) {
-        const secondW = recents.first != '' ? recents.first : recents.second != '' ? recents.second : recents.third
+        recents = ([workspaceName, ...recents])
-        const thirdW = recents.second != '' ? recents.second : recents.third
+        recents.filter((el) => { return el != "" })
-        const newResents = JSON.stringify({ first: firstW, second: secondW, third: thirdW })
+        localStorage.setItem('recentWorkspaces', JSON.stringify(recents))
-        localStorage.setItem('recentWorkspaces', newResents)
       }
     }
   }

libs/remix-ui/home-tab/src/lib/components/homeTabFile.tsx

@@ -38,18 +38,14 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
     }
     importSource: string
     toasterMsg: string
-    recentWorkspaces: {
+    recentWorkspaces: Array<string>
-      first: string
-      second: string
-      third: string
-    }
   }>({
     searchInput: '',
     showModalDialog: false,
     modalInfo: { title: '', loadItem: '', examples: [], prefix: '' },
     importSource: '',
     toasterMsg: '',
-    recentWorkspaces: { first: '', second: '', third: '' },
+    recentWorkspaces: [],
   })
 
   const [, dispatch] = useReducer(loadingReducer, loadingInitialState)
@@ -60,26 +56,26 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
     plugin.on('filePanel', 'setWorkspace', async () => {
       let recents = JSON.parse(localStorage.getItem('recentWorkspaces'))
 
-      if (!recents) recents = { first: '', second: '', third: '' }
+      if (!recents) {
-      setState((prevState) => {
+        recents = []
-        return { ...prevState, recentWorkspaces: { first: recents.first, second: recents.second, third: recents.third } }
+      } else {
-      })
+        setState((prevState) => {
+          return { ...prevState, recentWorkspaces: recents.slice(0, recents.length <= 3 ? recents.length : 3) }
+        })
+      }
     })
 
     const deleteSavedWorkspace = (name) => {
-      console.log('deleted ', name)
+      const recents = JSON.parse(localStorage.getItem('recentWorkspaces'))
-      let recents = JSON.parse(localStorage.getItem('recentWorkspaces'))
+      let newRecents = recents
-      const newRecents = recents
       if (!recents) {
-        recents = { first: '', second: '', third: '' }
+        newRecents = []
       } else {
-        Object.keys(recents).map((key) => {
+        newRecents = recents.filter((el) => { return el !== name})
-          if (recents[key] === name) newRecents[key] = ''
-        })
         localStorage.setItem('recentWorkspaces', JSON.stringify(newRecents))
       }
       setState((prevState) => {
-        return { ...prevState, recentWorkspaces: { first: newRecents.first, second: newRecents.second, third: newRecents.third } }
+        return { ...prevState, recentWorkspaces: newRecents.slice(0, newRecents.length <= 3 ? newRecents.length : 3) }
       })
     }
     plugin.on('filePanel', 'workspaceDeleted', async (deletedName) => {
@@ -302,24 +298,24 @@ function HomeTabFile({ plugin }: HomeTabFileProps) {
               </button>
             </CustomTooltip>
           </div>
-          {!(state.recentWorkspaces.first == '' && state.recentWorkspaces.second == '' && state.recentWorkspaces.third == '') && (
+          {(state.recentWorkspaces[0] || state.recentWorkspaces[1] || state.recentWorkspaces[2]) && (
             <div className="d-flex flex-column">
               <label style={{ fontSize: '0.8rem' }} className="mt-3">
                 Recent workspaces
               </label>
-              {state.recentWorkspaces.first !== 'undefined' && state.recentWorkspaces.first !== '' && (
+              {state.recentWorkspaces[0] && state.recentWorkspaces[0] !== '' && (
-                <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces.first)}>
+                <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[0])}>
-                  {state.recentWorkspaces.first}
+                  {state.recentWorkspaces[0]}
                 </a>
               )}
-              {state.recentWorkspaces.second !== 'undefined' && state.recentWorkspaces.second !== '' && (
+              {state.recentWorkspaces[1] && state.recentWorkspaces[1] !== '' && (
-                <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces.second)}>
+                <a className="cursor-pointer mb-1 ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[1])}>
-                  {state.recentWorkspaces.second}
+                  {state.recentWorkspaces[1]}
                 </a>
               )}
-              {state.recentWorkspaces.third !== 'undefined' && state.recentWorkspaces.third !== '' && (
+              {state.recentWorkspaces[2] && state.recentWorkspaces[2] !== '' && (
-                <a className="cursor-pointer ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces.third)}>
+                <a className="cursor-pointer ml-2" href="#" onClick={(e) => handleSwichToRecentWorkspace(e, state.recentWorkspaces[2])}>
-                  {state.recentWorkspaces.third}
+                  {state.recentWorkspaces[2]}
                 </a>
               )}
             </div>

libs/remix-ui/plugin-manager/src/lib/components/LocalPluginForm.tsx

@@ -265,7 +265,7 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
                 checked={location === 'sidePanel'}
                 onChange={(e) => setLocation(e.target.value as 'sidePanel' | 'mainPanel' | 'none')}
               />
-              <label className="form-check-label" htmlFor="sidePanel">
+              <label className="form-check-label" htmlFor="localPluginRadioButtonsidePanelSidePanel">
                 <FormattedMessage id="pluginManager.localForm.sidePanel" />
               </label>
             </div>
@@ -280,7 +280,7 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
                 checked={location === 'mainPanel'}
                 onChange={(e) => setLocation(e.target.value as 'sidePanel' | 'mainPanel' | 'none')}
               />
-              <label className="form-check-label" htmlFor="mainPanel">
+              <label className="form-check-label" htmlFor="localPluginRadioButtonsidePanelMainPanel">
                 <FormattedMessage id="pluginManager.localForm.mainPanel" />
               </label>
             </div>
@@ -295,7 +295,7 @@ function LocalPluginForm({closeModal, visible, pluginManager}: LocalPluginFormPr
                 checked={location === 'none'}
                 onChange={(e) => setLocation(e.target.value as 'sidePanel' | 'mainPanel' | 'none')}
               />
-              <label className="form-check-label" htmlFor="none">
+              <label className="form-check-label" htmlFor="localPluginRadioButtonsidePanelNone">
                 <FormattedMessage id="pluginManager.localForm.none" />
               </label>
             </div>

libs/remix-ui/workspace/src/lib/actions/workspace.ts

@@ -650,7 +650,6 @@ export const getGitRepoCurrentBranch = async (workspaceName: string) => {
 }
 
 export const showAllBranches = async () => {
-  console.log('showAllBranches')
   const isActive = await plugin.call('manager', 'isActive', 'dgit')
   if (!isActive) await plugin.call('manager', 'activatePlugin', 'dgit')
   plugin.call('menuicons', 'select', 'dgit')

libs/remix-ui/workspace/src/lib/remix-ui-workspace.tsx

@@ -899,7 +899,7 @@ export function Workspace() {
                     </span>
                   ) : null}
                   <span className="d-flex">
-                    <label className="pl-2 form-check-label" htmlFor="workspacesSelect" style={{wordBreak: 'keep-all'}}>
+                    <label className="pl-2 form-check-label" style={{wordBreak: 'keep-all'}}>
                       <FormattedMessage id='filePanel.workspace' />
                     </label>
                   </span>