Skip to content

Commit

Permalink
Remove Electron from DG - to be merged during next release (#30)
Browse files Browse the repository at this point in the history
Remove Electron-related content from documentation

Electron support has been totally removed in #1153. Let's also remove
the sections of the user/developer guide that mentions the Electron
version of CATcher.
  • Loading branch information
Echomo-Xinyu authored Sep 30, 2023
1 parent a4c08db commit fe65575
Show file tree
Hide file tree
Showing 8 changed files with 12 additions and 101 deletions.
2 changes: 1 addition & 1 deletion dg/design.md
Original file line number Diff line number Diff line change
Expand Up @@ -8,7 +8,7 @@

# Design

As described in the [_Tools_](tools.md) section, CATcher is an Angular application that is distributed both as a web and a desktop app. From a design perspective, there are no major differences between both versions.
As described in the [_Tools_](tools.md) section, CATcher is an Angular application that is distributed as a web app.

This page describes CATcher's design. As an Angular application, the different
views of the CATcher app are built out of **components**, and the content displayed on these
Expand Down
16 changes: 4 additions & 12 deletions dg/project-management.md
Original file line number Diff line number Diff line change
Expand Up @@ -21,12 +21,6 @@ Given below are different commands you can run to build the application in diffe
|`npm run build`| Build the app. Your built files are in the /dist folder. |
|`npm run build:prod`| Build the app with Angular aot. Your built files are in the /dist folder. |
|`npm run deploy:web`| Will deploy the app onto the Github's `gh-pages` branch. <br/> Prerequisites:<br/> 1. Add Environment variable of `GH_TOKEN=<Github Personal Access Token>` with the permission of `repo`. <br/>2. `build:prod:web` command's `--base-href` argument in `package.json` must have the following format `https://<OrgName or Username>.github.io/CATcher/`. <br/> 3. If you are deploying outside of CATcher-org then it would be necessary to create a new OAuth application and change the `clientId` in `environment.prod.ts` <br/> 4. If you are deploying outside of CATcher-org, you would also need to deploy your own instance of proxy server using [gatekeeper](https://github.com/CATcher-org/gatekeeper) and change the appropriate variables in `environment.prod.ts`. |
|`npm run electron:local`| Builds your application and start electron |
|`npm run electron:linux`| Builds your application and creates an app consumable on linux system |
|`npm run electron:windows`| On a Windows OS, builds your application and creates an app consumable in windows 32/64 bit systems |
|`npm run electron:mac`| On a MAC OS, builds your application and generates a `.app` file of your application that can be run on Mac |

*Note that our development focus is mainly on Web-version and Electron is served as a backup plan when web version fails.*

-------------------------------------------------------------------------------------

Expand All @@ -35,7 +29,7 @@ Given below are different commands you can run to build the application in diffe
Follow these steps to release a new version of CATcher using a GitHub Actions' workflow.
1. Create and merge a Pull Request that updates CATcher's version number in the `package.json` file.
2. Navigate to the `Actions` Tab of the `CATcher` repository and start the `Version Deployment` Workflow.
- This workflow deploys the web app and creates a Draft Release containing the desktop app's executables
- This workflow deploys the web app
3. Edit the Draft Release:
- Update the description with a changelog that describes any new features or bug fixes
4. Publish the release.
Expand All @@ -46,9 +40,7 @@ Follow these steps to release a new version of CATcher using a GitHub Actions' w

Follow these steps to manually release a new version of CATcher:
1. Create and merge a Pull Request that updates CATcher's version number in the `package.json` file.
2. Build the CATcher desktop application's executables for Linux, MacOS and Windows
3. Build the CATcher web application, and then deploy it onto CATcher's [GitHub Pages site](https://catcher-org.github.io/CATcher/)
4. Create a release on GitHub:
- Upload the desktop app's executables
2. Build the CATcher web application, and then deploy it onto CATcher's [GitHub Pages site](https://catcher-org.github.io/CATcher/)
3. Create a release on GitHub:
- Under the description, include a changelog that describes any new features or bug fixes
5. Publish the release.
4. Publish the release.
3 changes: 0 additions & 3 deletions dg/setting-up.md
Original file line number Diff line number Diff line change
Expand Up @@ -34,9 +34,6 @@ Given below are different commands you can use to run the app locally.
|Command|Description|
|--|--|
|`npm run ng:serve:web`| Start the app from the browser in development mode. |
|`npm start`| Start the app from Electron in development mode. |

*Note that our development focus is mainly on Web-version and Electron is served as a backup plan when web version fails. You are encouraged to start working with Web version as a beginner first.*

-----------------------------------------------------------------------------------

Expand Down
32 changes: 2 additions & 30 deletions dg/tools.md
Original file line number Diff line number Diff line change
Expand Up @@ -50,34 +50,6 @@ export function assertSessionDataIntegrity() {

-------------------------------------------------------------------

## Electron

Electron is a tool that allows developers to build cross-platform desktop applications with Javascript, HTML, and CSS. It basically allows us to "convert" the web version of CATcher into a desktop application through the APIs provided by Electron.

The Electron framework launches a main process and a renderer process.
The CATcher app runs within the renderer process, while the main process handles system events that occur during the app's lifecycle. Electron provides a message-passing API to facilitate inter-process communication.

A snippet from our app's main process code:
```
ipcMain.on('github-oauth', (event, repoPermissionLevel) => {
Logger.info('Starting authentication');
getAccessToken(win, repoPermissionLevel).then((data) => {
Logger.info('Obtained access token from Github');
event.sender.send('github-oauth-reply', {token: data.token});
}).catch(error => {
event.sender.send('github-oauth-reply', {
error: error.message,
isWindowClosed: error.message === 'WINDOW_CLOSED'});
});
});
```

****Resources:****

1. [Official Electron Guide](https://www.electronjs.org/docs/tutorial) : This is the official Electron documentation

-------------------------------------------------------------------

## GraphQL

GraphQL is a query language for APIs.
Expand All @@ -98,9 +70,9 @@ CATcher uses the OAuth 2.0 protocol to authenticate users. Below is a summary of

3. Authentication is complete, and CATcher can now use the access token when it uses the GitHub API for its logic (e.g. submitting new issues, editing existing issues)

The authentication process is kicked off in the `AuthComponent`, but the code that co-ordinates steps 1 and 2 can be found in `oauth.ts` (For Electron) or `AuthService` (For Web). Step 2 requires a client secret granted to CATcher. To protect this, we run a web service, [gatekeeper](https://github.com/CATcher-org/gatekeeper) that executes step 2 on behalf of the client CATcher app. More details on Github's OAuth implementation can be found [here](https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps)
The authentication process is kicked off in the `AuthComponent`, but the code that co-ordinates steps 1 and 2 can be found in `AuthService`. Step 2 requires a client secret granted to CATcher. To protect this, we run a web service, [gatekeeper](https://github.com/CATcher-org/gatekeeper) that executes step 2 on behalf of the client CATcher app. More details on Github's OAuth implementation can be found [here](https://docs.github.com/en/developers/apps/building-oauth-apps/authorizing-oauth-apps)

The sequence diagram below shows the OAuth flow for the CATcher web app. (The flow is similar for the CATcher desktop app, except some parts of the OAuth process are handled in the Electron main process, instead of the renderer process that runs the CATcher application).
The sequence diagram below shows the OAuth flow for the CATcher web app.
<br/><br/><br/>
![](../images/oauth-sequence-diagram.png)

Expand Down
Binary file removed images/mac-security-warning.png
Binary file not shown.
Binary file removed images/windows-security-warning.png
Binary file not shown.
2 changes: 1 addition & 1 deletion index.md
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@

**CAT**cher is a software application to be used for **C**rowd-sourced **A**nonymous **T**esting of software, for educational use in particular. It uses GitHub as the backend for hosting bug reports but provides a more optimized UI for students/instructors taking part in software testing exercises.

CATcher is being developed at [NUS SoC](https://www.comp.nus.edu.sg/), and is used to improve/evaluate software testing skills of students in several software engineering modules at SoC. Main technologies used in CATcher are TypeScript, Angular, and Electron.
CATcher is being developed at [NUS SoC](https://www.comp.nus.edu.sg/), and is used to improve/evaluate software testing skills of students in several software engineering modules at SoC. Main technologies used in CATcher are TypeScript and Angular.

:fas-book: [User Guide](ug/)<br>
:fas-book-reader: [Developer Guide](dg/)<br>
Expand Down
58 changes: 4 additions & 54 deletions ug/index.md
Original file line number Diff line number Diff line change
Expand Up @@ -12,9 +12,9 @@

## Getting started

**The online version of CATcher is available at https://catcher-org.github.io/CATcher**. Alternatively, you can download the [desktop version](https://github.com/CATcher-org/CATcher/releases).
**The online version of CATcher is available at https://catcher-org.github.io/CATcher**.

Once the app is launched (either web or desktop version), it will prompt you to enter the session you are participating in, using a dropdown.
Once the web app is launched, it will prompt you to enter the session you are participating in, using a dropdown.

<img width="70%" src="../images/session_select.png" />
<br/>
Expand All @@ -23,7 +23,7 @@ Once the app is launched (either web or desktop version), it will prompt you to

## Using the Web app

The CATcher web app is recommended, and can be accessed at https://catcher-org.github.io/CATcher. Please ensure your browser does not block pop-up windows from our web app.
The CATcher web app can be accessed at https://catcher-org.github.io/CATcher. Please ensure your browser does not block pop-up windows from our web app.

Ad-blockers may need to be disabled if they block pop-ups.

Expand All @@ -35,60 +35,10 @@ Pop-up windows are blocked by default on Safari. Before launching CATcher, pleas
2. For website `catcher-org.github.io`, choose option `Allow`
![enable-popup](../images/safari-allow-popups.png)

## Using the desktop app

The latest release of the CATcher desktop app can be downloaded from https://github.com/CATcher-org/CATcher/releases

Start the desktop app by clicking on the executable file; no installation is required.

<tabs>
<tab header="Windows">

For normal usage, you can run the `CATcher.exe` and the following dialog would appear. Simply click on the "More Info" button and then click the "Run Anyway" button which would have appeared on the bottom right corner of the dialog.

![windows_warning](../images/windows-security-warning.png)

In some cases, the "Run Anyway" button may not appear. To troubleshoot this, you can open up "Windows Security" and under "App & browser control", click on "Reputation-based protection settings" and make sure CATcher is not blocked here.

If you are using an older version of Windows, you may not be able to find the "Reputation-based protection settings". Under "App and browser control", you would instead see "Check apps and files". In this section, make sure it is set to "Warn".

</tab>
<tab header="Mac">

To run CATcher on MacOS, you would need to go to "System Preferences" and in "Security & Privacy", select "Open Anyway" for CATcher, as shown below.

![mac_security](../images/mac-security-warning.png)

### Troubleshooting
1. Copy and pasting images into the text editor for Mac Users

You may find you are not able to copy (Cmd+c) and paste (Cmd+v) an image from the "Preview" application. As a workaround, there are other ways to paste stuff into the text editor such as dragging and dropping a screenshot image or a file.

</tab>
<tab header="Linux">

After downloading the AppImage file, you should be able to run CATcher by clicking on the
AppImage file.
If this does not work, you may need to allow the file to be executed.
There are 2 methods to achieve this:
- From the GUI:
- Right click on the file icon
- Select `Properties`, then select `Permissions`
- Enable the `Allow executing file as program` option.
- Note: the GUI menus may differ slightly on different Linux distributions.
- From the command line: Use `chmod +x CATcher-x.y.z.AppImage`

</tab>
</tabs>
<br>

## Reporting problems

If you face any issue in using CATcher, you can create a new issue in [CATcher issue tracker](https://github.com/CATcher-org/CATcher/issues).

If possible, also provide us with the log file saved by CATcher.
* For the web app, logs are saved in your browser and can be retrieved by clicking the "`Download Log`"button.
* For the desktop app, logs can be retrieved from the following directory:
- Linux: `~/.config/CATcher/logs/*.log`
- macOS: `~/Library/Logs/CATcher/*.log`
- Windows: `%USERPROFILE%\AppData\Roaming\CATcher\logs\\*.log`
If possible, also provide us with the log file saved by CATcher. For the web app, logs are saved in your browser and can be retrieved by clicking the "`Download Log`"button.

0 comments on commit fe65575

Please sign in to comment.