write order for modals

apps/remix-ide-e2e/src/helpers/init.ts

@@ -56,7 +56,6 @@ export default function (browser: NightwatchBrowser, callback: VoidFunction, url
       if (preloadPlugins) {
         initModules(browser, () => {
           browser
-
             .clickLaunchIcon('solidity')
             .waitForElementVisible('[for="autoCompile"]')
             .click('[for="autoCompile"]')

apps/remix-ide/src/app.js

@@ -130,8 +130,11 @@ class AppComponent {
       'remix.ethereum.org': 23,
       '6fd22d6fe5549ad4c4d8fd3ca0b7816b.mod': 35 // remix desktop
     }
-    this.showMatamo = matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
-    this.walkthroughService = new WalkthroughService(appManager, this.showMatamo)
+    this.showMatamo = true//matomoDomains[window.location.hostname] && !Registry.getInstance().get('config').api.exists('settings/matomo-analytics')
+    this.showEnter = !localStorage.getItem('hadUsageTypeAsked')
+    
+    console.log("show ", this.showMatamo, " ", this.showEnter)
+    this.walkthroughService = new WalkthroughService(appManager, !this.showMatamo || !this.showEnter)
 
     const hosts = ['127.0.0.1:8080', '192.168.0.101:8080', 'localhost:8080']
     // workaround for Electron support

apps/remix-ide/src/walkthroughService.js

@@ -11,13 +11,21 @@ const profile = {
 }
 
 export class WalkthroughService extends Plugin {
-  constructor (appManager, showMatamo) {
+  constructor (appManager, showWalkthrough) {
     super(profile)
-    appManager.event.on('activate', (plugin) => {
-      if (plugin.name === 'udapp' && !showMatamo) {
+    let readyToStart = 0;
+    /*appManager.event.on('activate', (plugin) => {
+      if (plugin.name === 'udapp') readyToStart++
+      if (readyToStart == 2 && showWalkthrough) {
         this.start()
       }
     })
+    appManager.event.on('activate', (plugin) => {
+      if (plugin.name === 'solidity') readyToStart++
+      if (readyToStart == 2 && showWalkthrough) {
+        this.start()
+      }
+    })*/
   }
 
   start () {

libs/remix-ui/app/src/lib/remix-app/components/modals/enter.tsx

@@ -1,14 +1,8 @@
 import React, {useContext, useEffect, useState} from 'react'
+import {AppContext} from '../../context/context'
 import {UsageTypes} from '../../types'
 import { type } from 'os'
 
-declare global {
-  interface Window {
-    _paq: any
-  }
-}
-const _paq = (window._paq = window._paq || [])
-
 interface EnterDialogProps {
   hide: boolean,
   handleUserChoice: (userChoice: UsageTypes) => void,
@@ -16,6 +10,7 @@ interface EnterDialogProps {
 
 const EnterDialog = (props: EnterDialogProps) => {
   const [visibility, setVisibility] = useState<boolean>(false)
+  const {showEnter} = useContext(AppContext)
 
   useEffect(() => {
     setVisibility(!props.hide)
@@ -23,29 +18,9 @@ const EnterDialog = (props: EnterDialogProps) => {
 
   const enterAs = async (uType) => {
     props.handleUserChoice(uType)
-
-    switch (uType) {
-    case UsageTypes.Beginner: {
-      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'beginner'])
-      break
-    }
-    case UsageTypes.Tutor: {
-      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'tutor'])
-      break
-    }
-    case UsageTypes.Prototyper: {
-      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'prototyper'])
-      break
-    }
-    case UsageTypes.Production: {
-      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'production'])
-      break
-    }
-    default: throw new Error()
-    }
   }
 
-  const modalClass = !visibility ? "d-none" : "d-flex"
+  const modalClass = (visibility && showEnter) ? "d-flex" : "d-none"
   return (
     <div
       data-id={`EnterModalDialogContainer-react`}
@@ -65,16 +40,16 @@ const EnterDialog = (props: EnterDialogProps) => {
             <h3 className='text-dark'>Welcome to Remix IDE</h3>
             <div className='d-flex flex-row pt-2'>
               <h6 className="modal-title" data-id={`EnterModalDialogModalTitle-react`}>
-                To load the project with the most efficiant setup we would like to know your experiance type.
+                To load the project with the most efficient setup we would like to know your experiance type.
               </h6>
               <i className="text-dark fal fa-door-open text-center" style={{minWidth: "100px", fontSize: "xxx-large"}}></i>
             </div>
           </div>
           <div className="modal-body text-break remixModalBody d-flex flex-row p-3 justify-content-between" data-id={`EnterModalDialogModalBody-react`}>
-            <button className="btn-secondary" data-id="beginnerbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Beginner)}}>Beginner</button>  
-            <button className="btn-secondary" data-id="tutorbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Tutor)}}>Tutor</button>  
-            <button className="btn-secondary" data-id="prototyperbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Prototyper)}}>Prototyper</button>  
-            <button className="btn-secondary" data-id="productionbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Production)}}>Production</button>  
+            <button className="btn-secondary" data-id="beginnerbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Beginner)}}>Learn/Playground</button>
+            <button className="btn-secondary" data-id="tutorbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Tutor)}}>Teach/Workshop</button>
+            <button className="btn-secondary" data-id="prototyperbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Prototyper)}}>Prototype/Test</button>
+            <button className="btn-secondary" data-id="productionbtn" style={{minWidth: "100px"}} onClick={() => {enterAs(UsageTypes.Production)}}>Production level</button>
           </div>
         </div>
       </div>

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

@@ -13,6 +13,13 @@ import {IntlProvider, FormattedMessage} from 'react-intl'
 import {CustomTooltip} from '@remix-ui/helper'
 import {UsageTypes} from './types'
 
+declare global {
+  interface Window {
+    _paq: any
+  }
+}
+const _paq = (window._paq = window._paq || [])
+
 interface IRemixAppUi {
   app: any
 }
@@ -80,16 +87,47 @@ const RemixApp = (props: IRemixAppUi) => {
   const value = {
     settings: props.app.settings,
     showMatamo: props.app.showMatamo,
+    showEnter: props.app.showEnter,
     appManager: props.app.appManager,
     modal: props.app.notification,
     layout: props.app.layout
   }
 
-  const handleUserChosenType = (type) => {
+  const handleUserChosenType = async (type) => {
     setShowEnterDialog(false)
-    localStorage.setItem('hadUsageTypeAsked', "true")
+    localStorage.setItem('hadUsageTypeAsked', "1")
+
+    await props.app.appManager.call('walkthrough', 'start')
 
     // Use the type to setup the UI accordingly
+    switch (type) {
+    case UsageTypes.Beginner: {
+      await props.app.appManager.call('manager', 'activatePlugin', 'LearnEth')
+      // const wName = 'Playground'
+      // const workspaces = await props.app.appManager.call('filePanel', 'getWorkspaces')
+      // if (!workspaces.find((workspace) => workspace.name === wName)) {
+      //   await props.app.appManager.call('filePanel', 'createWorkspace', wName, 'playground')
+      // }
+      // await props.app.appManager.call('filePanel', 'switchToWorkspace', { name: wName, isLocalHost: false })
+
+      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'beginner'])
+      break
+    }
+    case UsageTypes.Tutor: {
+      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'tutor'])
+      break
+    }
+    case UsageTypes.Prototyper: {
+      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'prototyper'])
+      break
+    }
+    case UsageTypes.Production: {
+      _paq.push(['trackEvent', 'enterDialog', 'usageType', 'production'])
+      break
+    }
+    default: throw new Error()
+    }
+
   }
 
   return (
@@ -97,13 +135,19 @@ const RemixApp = (props: IRemixAppUi) => {
     <IntlProvider locale={locale.code} messages={locale.messages}>
       <AppProvider value={value}>
         <OriginWarning></OriginWarning>
-        <MatomoDialog hide={!appReady}></MatomoDialog>
+        <MatomoDialog hide={!appReady} okFn={() => {setShowEnterDialog(true)}}>
+        </MatomoDialog>
         <EnterDialog hide={!showEnterDialog} handleUserChoice={(type) => handleUserChosenType(type)}></EnterDialog>
         <div className={`remixIDE ${appReady ? '' : 'd-none'}`} data-id="remixIDE">
           <div id="icon-panel" data-id="remixIdeIconPanel" className="custom_icon_panel iconpanel bg-light">
             {props.app.menuicons.render()}
           </div>
-          <div ref={sidePanelRef} id="side-panel" data-id="remixIdeSidePanel" className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}>
+          <div
+            ref={sidePanelRef}
+            id="side-panel"
+            data-id="remixIdeSidePanel"
+            className={`sidepanel border-right border-left ${hideSidePanel ? 'd-none' : ''}`}
+          >
             {props.app.sidePanel.render()}
           </div>
           <DragBar