[Function] Code Sharing in Channel and to Github Repository & UI Redesign & Compatible with New Server

[RyanbowZ]

This PR mainly focus on developing the sharing functions. It not only allows users to share within the RC channel, but also allows users to upload their generated code pieces to Github repository. An interactive user interface has also been designed and implemented.

Meanwhile, we redesigned the contextual bar to be compatible with the newest RC server version 6.11 while resolving other issues mentioned by reviewers previously to improve quality.

Issue(s)

This PR's function updates closed #29 #30 #31 #32 #33 #34 #35 #36 .

Acceptance Criteria fulfillment

• [x] Update the UI logics to compatible with the new version of RC server (6.11)
• [x] Redesign the entire contextual bar (dropdown box) to use the compatible ui-kit features.
• [x] Allow users to share their generated code content into current channel.
• [x] Enable the connection with their Github repository using OAuth2 for authentication.
• [x] Allow users to share their generated code content to the Github repository by specifying the corresponding branch, file path, repo name, etc.
• [x] Users can edit their content before any sharing functions.
• [x] The modal window will be closed immediately after pressing buttons.

Proposed Changes

Since the newest RC server has become 6.11, where old contextual bar interface becomes incompatible. The UI logic has to be changed, and the entire contextual bar is redesigned to be more user-friendly and compatible with this new version server.

In this PR we mainly enables the sharing functions. Firstly, it allows users to share within the RC channel by sending message containing the generated code content. Secondly, it further uses OAuth2 features of App-engine to configure user's access tokens with Github, and then allows users to upload their generated code pieces to Github repository.

To implement this connection with Github repository, I researched on Samad Khan 's Github22 app and I finally figured out the implementation of uploading user's generated code into files to the Github repository, branch and path specified by the user. I also adopt the OAuth2 features of App-engine to configure user's access tokens with Github. Users need to setup their Github connections in the same way the authenticated in Github22 app.

An interactive user interface has also been designed and implemented. In both sharing functions, users have the ability of editing and verifying the content before the content become public. Now the modal windows will be directly closed after pressing the button to avoid block user's focus on information in channels.

Additionally, several code glitches are resolved, unnecessary comments are removed, modal action handling logics are changed according to reviewer's feedbacks.

Results

https://github.com/user-attachments/assets/c19f9a32-8c9e-4357-81f1-16bf25ff8247

[samad-yar-khan]

@RyanbowZ

• Although this code works to push the snippet to a repo, it seems hard to use.
• If I have to go to github to know a file and location, I can just edit the code on gh, why do I even need to use this feature.
• Idk how this overwrite will work incase the file already has code.
• The input boxes are a bit large for entering repo names, m sure there is a smaller input field component that can be used for names and branch.
• An ideal UI would be one that shows me the directory structure in app and I am able to figure out what to do from rocket chat itself.
• As discussed in out channel, this seems more fit for saving code snippets as gist ?

[VipinDevelops]

Hey @RyanbowZ,

I tested the "Share to Gist" feature with @samad-yar-khan, and we found a bug in the current code. If someone wants to share the gist and doesn't change the initial value of the modal, the value will be passed as empty.

I have encountered a similar bug in my code and have a solution.

What you need to do is store the gist content in persistent storage for each user with a unique ID. If the user wants to share the code to Gist and hasn't changed anything in the initial value, the state will show it as undefined. To make it work, you just have to check if the user made any changes (meaning the view state changed). If so, use the view state values; otherwise, use the value stored in persistence for the code.

Here is a code snippet for it from my Project : ExecuteViewSubmitHandler.ts#L246-L282