open straight to IDE

[swyxio]

have a nicer handoff from the installation to starting development by having a button that opens straight to IDE. you can use launchEditor from react-dev-utils, it should jsut be a few lines. the harder part is where to put this in the UI

[dakshgautam1]

Awesome. I was also thinking about it. I was thinking to show all the editors present on the machine at the start of the app and show them as a list. Then open accordingly.

[joshwcomeau]

Ahh, yeah, this is key. Also, it fits nicely with #46. I have an idea for how this should work in the UI; I imagine a couple of subtle buttons right below the project name, for "Open in Finder" and "Open in Editor"

Awesome. I was also thinking about it. I was thinking to show all the editors present on the machine at the start of the app and show them as a list. Then open accordingly.

I think it's probably alright to just use the currently-open editor. Might not be perfect, but I like that we can leverage a pre-existing solution. Can always revisit if we want more control for the beginner experience :)

[dakshgautam1]

I suggested that because I usually have two editors open "Sublime (for misc tasks) and VS Code (for coding) ", and whenever I try to see the source of error, the "error page" opens up sublime text.

But yes it is better to first implement beginner friendly solution.

[joshwcomeau]

I suggested that because I usually have two editors open "Sublime (for misc tasks) and VS Code (for coding) ", and whenever I try to see the source of error, the "error page" opens up sublime text.

I have exactly the same setup, haha (I use sublime for Git commit messages, since it opens faster than VS Code). I haven't run into the issue clicking errors in CRA, but I 100% believe it's possible. But yeah, I imagine the typical Guppy user doesn't have multiple IDEs running at the same time, and so I think it's fine to defer thinking about this until the bigger-ticket issues for beginners have been solved.

[AWolf81]

I'm working on this here. Opening in IDE and Explorer is working.

My work is based on npm-to-yarn branch so I can develop with Windows.

Some thoughts we should discuss:

• How should we name the buttons? Especially the open in finder. I've named it open in explorer. I'm not sure about the wording. Maybe Open folder would be better as it is not tied to a OS.
• Do we need to create a service for the actions of the buttons? I think it's OK to add them in ProjectPage component.
• Do we need Redux actions for It? Like in PR Show project folder location in finder.  #46. At the moment, I think it's OK to trigger it from component with-out Redux.
• UI styling: I think the buttons are still too large and maybe we should make them look different from other controls. @joshwcomeau I think the look is similar to your sketch that I saw in a comment.
• UX: The explorer/file browser should open on top of Guppy. It opens sometimes in the background. I have to check if this can be controlled.

Notes
I'm using openFolder instead of showItemInFolder for opening project folder in file browser so it shows the root of project and not the containing folder.

Screenshot:

[joshwcomeau]

How should we name the buttons? Especially the open in finder. I've named it open in explorer. I'm not sure about the wording. Maybe Open folder would be better as it is not tied to a OS.

I think it should be based on OS:

• Mac: Open in Finder
• Windows: Open in Explorer
• Linux: Open folder (not sure what they're called in linux or if it varies by distro :/)

Do we need to create a service for the actions of the buttons? I think it's OK to add them in ProjectPage component.

I think each should be a component, no services needed:

class OpenInFinder extends Component {
  getTextForOs = () => {
    // get label
  }

  handleClick = () => {
    // stuff to open in folder
  }

  render() {
    return (
      // Could also make a new "MutedButton" which wraps "Button"
      <MutedButton onClick={this.handleClick}>
        {this.getTextForOs()}
      </MutedButton>
  }
}

I see that you currently have methods in ProjectPage, and I think that's probably OK too... I have a slight preference for doing it in new components, to avoid complicating a "view"-type component like ProjectPage, and to make the buttons self-contained... but my feelings are loosely-held enough that if you're in a hurry we can skip that for now.

Do we need Redux actions for It? Like in PR #46. At the moment, I think it's OK to trigger it from component with-out Redux.

Agreed! No redux needed. This doesn't involve any app-wide state.

UI styling: I think the buttons are still too large and maybe we should make them look different from other controls. @joshwcomeau I think the look is similar to your sketch that I saw in a comment.

Yeah, so I think the position and size looks right, but they're too prominent. Some ideas:

• Maybe make the background color a light grey (gray[200] or so), still with black text, and no border. This should make them much more subtle. Hover effect could be a slight darkening, to gray[300]?

• Maybe just make the border be a medium gray, like 400 or so?

• Maybe just have them be text, with a middot (·) separating them? I worry this is too subtle / not clear enough that they're actions that open things, so I think I prefer keeping them button-ish.

I'd also like to avoid making them square, so that we're consistent about "round things being actions", and "square things being labels".

UX: The explorer/file browser should open on top of Guppy. It opens sometimes in the background. I have to check if this can be controlled.

• Yeah, this may be out of our hands. Not a huge deal, but do let us know what you find out :D

---

Some other thoughts:

• I don't know if most beginners will know what an "IDE" is. How possible do you think it is to figure out the name of the IDE, so the button can read "Open in Sublime" or "Open in Visual Studio Code"?

I'm guessing react-dev-utils doesn't have this as an option, though... so if not, maybe just "Open in Code Editor"?

• To be sure I understand for openFolder: if the project is at C:/guppy-projects/hello-world/, it shows the contents of "hello-world", right? Not the contents of "hello-world/src", or "guppy-projects"?

• The rest of your code looks great! I think we could get a PR merged without too much back-and-forth, only thing I'd like to resolve is the styling. If you'd like I can take a shot at styling it as well.

Actually, one thing we need to figure out is what's going on with the Windows release, so that PRs like this can be unblocked. Lemme check in on that.

[mathieudutour]

How possible do you think it is to figure out the name of the IDE

Should be possible using https://github.com/sindresorhus/env-editor

[AWolf81]

OK, I like the component approach for the buttons but I would only create one button component and pass the click handler to them and the caption could be passed as child. Something like this for open in finder:

<ActionButton onClick={() => shell.openFolder(path)}>
    Open in {platform.finderName[os]}
</ActionButton> 

Naming for this could be ActionButton or ToolbarButton not sure what's better.

I'm not sure if it is worth it to add Open in Finder or Open in Explorer and I think Open folder is clear what it will do. Adding is no problem but do we really need it?

And the other would also work with Open in Editor. Would be nice to have Open in Code or Open in Sublime but same question as before.

Yes, you're right the open folder opens the project directory that is containing the package.json. Please have a look at the screen recording below (explorer opens just once - not sure why there are two in the recording, probably accidentially clicked twice).

UI styling
I like your ideas and I also think that it should look like buttons and not text with a dot in between. I could also try to modify it like you mentioned.
But you can also take a shot - so I could check the windows support branch.

For the Windows release, I'm still waiting for @bennygenel (he seems busy at the moment) to review npm-to-yarn PR but I could also create a branch from master and merge everything (windows-support branch & npm-to-yarn) into the new branch. After merging into the new branch I could create a new PR and we need to review that it's working for Mac and Linux as well.

It would be great to have the Windows stuff merged so I could work closer with master branch. Should I create that branch? It would be also good because the current windows-support branch is based on an older commit and should be also rebased.

[joshwcomeau]

@AWolf81 sorry for the delay on this! I was thinking of taking over on this, since it looks like you've almost finished it... but I checked your branch and it looks like the commits are intermingled with windows-support stuff, which has presumably been dealt with already.

It might be easier if I just copy/paste the relevant code from your branch to a new one off of master... but I don't wanna deprive you of credit for the work you've done! I think I can update the commit message to set you as the author.

Let me know how you feel about this. Alternatively I'm also happy to wait until you get back from vacation, and let you tackle this all then :)

[AWolf81]

Yeah, I know there are commits from windows support branch but I think that should be OK if merged with master.

You could continue the work like following:

• create a new branch based on master
• merge my branch open-in-IDE.
• resolve conflicts manually
• remove the platform.services file

I know conflict resolution could take some time but I did the same for project-configuration.
Maybe you can have a look at this branch if I did it correctly. If that branch is OK you can do the same here.

Yes, I think the last point was the styling of the buttons. I did some work but haven't pushed it as it's not finished.
As I remember, I added a new size to Button component xsmall and created a styled component to make the button gray with the hover effect.

[joshwcomeau]

@AWolf81 yeah, true. My concern was more over not knowing which stuff was necessary or not for windows, but I have that windows VM, I can poke around with it and see.

I think I wanna take a shot at doing the "Project" application menu for other things (like switching projects or clearing logs), and then look at using a different packager, so we can support auto-update. After that stuff I think I'll pick this up if it's still available :)

[AWolf81]

We can close this issue as open in IDE button & menu item is available.