[WIP] Add a GUI - Githubissues

CapriciousRebel commented 2 years ago

Currently, the GUI is a work in progress.

How to use it?

run npm install.
add your GH_TOKEN in the .env file.
run any command and pass the --gui option
open localhost:3000! To run a different command, go back to terminal, and run another command along with the --gui option (close the terminal that was running first with Cmd + C), then come back and refresh the browser

At this stage, I have used the following stack: Ejs: Generating HTML using templating. Express: Serving the generated HTML and the static files(CSS styles). TailwindCSS: For styling the HTML.

Tasks:

Stage 1 + 2
[x] Lint the current code and squash : @CapriciousRebel
[x] Fix the overflow scroll : @rosekamallove
[x] Fix the \n issue: @rosekamallove
[x] Add a purge command in tailwind config: @CapriciousRebel

Stage 3a: Building the API for the server
[x] Brainstorm the API endpoints: @CapriciousRebel
[x] Push the sample API endpoints to the PR: @CapriciousRebel
[x] Finish up writing all the API endpoints: @CapriciousRebel

Stage 3b: Updating the frontend and integrating it with the server
[x] Finalize the design for the frontend with @ljharb
[x] Implement the designs in the frontend
[x ] Integrate with the backend

Transition Stage [3-4]: Do extensive testing of the solution and fix any issues, write tests

Stage 4: Host the solution?

thehanimo commented 2 years ago

Hey @CapriciousRebel! Nice work all around. Really excited for the GUI! Just thought I'll add a few thoughts here:

I don't think we're using tailwindcss the right way. Pretty sure we don't have to add that huge static/style.css in our repo. I see a lot of similar stylesheets in node_modules/tailwindcss/dist/ so double check if this is the right way.
Do we need a server to view the static file? Why don't we generate the html file with ejs, store it in a folder (like cache) and just open up the file on the browser? Doesn't that seem simpler?
We have an eslint config set up so It'd be nice if you could lint the code before each commit :)

CapriciousRebel commented 2 years ago

@thehanimo thanks for your comments!
I agree with each point that you have mentioned. I just wanted to create a Proof of Concept as soon as possible and so I worked on this over the weekend. I will address each point you mentioned in future commits :)

CapriciousRebel commented 2 years ago

@rosekamallove I have squashed all the commits into one, and fixed all eslint issues as well, now you can rebase and continue work!

rosekamallove commented 2 years ago

It is the 4th task, see the first comment

thehanimo commented 2 years ago

It is the 4th task, see the first comment

Got it! My bad.

CapriciousRebel commented 2 years ago

@rosekamallove added the purge command, kindly rebase once. You can run it using npm run build:css

CapriciousRebel commented 2 years ago

@rosekamallove what is the update on your tasks?

rosekamallove commented 2 years ago

Will push the changes by the end of this week, Diwali

CapriciousRebel commented 2 years ago

@ljharb This PR is ready from my end, kindly review the changes at your earliest convenience!

rosekamallove commented 2 years ago

Is there anything to work on right now? @CapriciousRebel

CapriciousRebel commented 2 years ago

@rosekamallove As of now, I'm waiting for a review from Jordan, post which we can find some more issues/tasks to work on

CapriciousRebel commented 2 years ago

@ljharb a gentle reminder for a review on this PR

CapriciousRebel commented 2 years ago

Will update the PR before the end of the year :)

CapriciousRebel commented 2 years ago

@ljharb updated my PR, left replies on your comments. Could you please give a further review?

CapriciousRebel commented 2 years ago

@ljharb updated my PR, also left replies on some comments for further discussion.

CapriciousRebel commented 2 years ago

@ljharb I have left more replies on our conversations, I guess we are really close to finishing this PR :) :excited:

ljharb commented 2 years ago

also see some of the hidden conversations (https://github.com/ljharb/repo-report/pull/59#discussion_r776028853)

CapriciousRebel commented 2 years ago

@ljharb updated my PR to include the token as a flag or positional argument from the frontend itself, also added a minimal error handler as well for when the user doesn't provide the token, maybe someday we could evolve the error handling to a modal in the frontend, after having handled all errors in the backend (ex: Bad Credentials error for GitHub token is not handled yet in the backend) Could you please give the PR another glance and leave your comments?

Also could you please address https://github.com/ljharb/repo-report/pull/59#discussion_r766080666

ljharb commented 2 years ago

I'm confused; the frontend shouldn't be supplying the token - the invocation to start the server should be.

CapriciousRebel commented 2 years ago

I see, so basically, a person does this:

opens up terminal and types repo-report --gui --token=<token>
browser opens up with the gui
now the person can type in their command without having the need to pass the token every time.

This flow makes perfect sense to me, but I am a bit confused as to where will the token be stored during this time?

The token cannot be stored on the server, unless we use some in-memory store or a global variable that remains persistent through the operation because the most important point to focus on is that we run yargs-parser every time a command is sent from the frontend:
In normal cases, the token is stored in the frontend as an HTTP-only cookie (safe from XSS attacks) or as a session variable that can be killed the moment the session ends, but we ruled out the possibility of storing the token in the frontend in our earlier discussions.

Summary: Where would the GitHub token be stored once the user provides it at the time of GUI invocation so that the user doesn't have to provide it every time from the frontend via the command?

CapriciousRebel commented 2 years ago

@ljharb gentle reminder to give an update on this PR

ljharb / repo-report

[WIP] Add a GUI #59