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

RyanbowZ · 2024-08-11T15:34:09Z

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

Update the UI logics to compatible with the new version of RC server (6.11)
Redesign the entire contextual bar (dropdown box) to use the compatible ui-kit features.
Allow users to share their generated code content into current channel.
Enable the connection with their Github repository using OAuth2 for authentication.
Allow users to share their generated code content to the Github repository by specifying the corresponding branch, file path, repo name, etc.
Users can edit their content before any sharing functions.
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

Screen.Recording.2024-08-11.at.21.57.56.mov

… version

…ub sharing extract code content

samad-yar-khan

I think there is a lot of unnecessary code copy pasted from the other repo.

definition/ui-kit/Modals/createMainContextualBar.ts

definition/ui-kit/Modals/generateCodeModal.ts

definition/ui-kit/Modals/regenerateCodeModal.ts

enum/Modals.ts

enum/Processors.ts

persistance/auth.ts

samad-yar-khan · 2024-08-11T17:56:56Z

@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 ?

samad-yar-khan

Please refer to above comments regarding code and functionality

AiProgrammerApp.ts

handlers/ExecuteActionButtonHandler.ts

settings/settings.ts

AiProgrammerApp.ts

handlers/ExecuteViewSubmitHandler.ts

handlers/ExecuteBlockActionHandler.ts

handlers/ExecuteViewSubmitHandler.ts

AiProgrammerApp.ts

definition/Reminder.ts

handlers/ExecuteViewSubmitHandler.ts

VipinDevelops · 2024-08-19T15:47:50Z

handlers/SendReminder.ts

+    }
+  }
+
+  return false;


This whole code is for sending reminders form github app,
Please don't copy paste code without understanding it.

@RyanbowZ was this addressed ?

VipinDevelops · 2024-08-19T15:49:24Z

persistance/remind.ts

@@ -0,0 +1,139 @@
+import {
+    IPersistence,


Again this code is not Not relevant to this app

settings/settings.ts

VipinDevelops · 2024-08-19T16:01:50Z

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

samad-yar-khan · 2024-09-12T07:06:57Z

helpers/commandUtility.ts

+                );
+                break;
+            }
+            case "gist": {


set as Enum

samad-yar-khan · 2024-09-12T07:07:56Z

handlers/SendReminder.ts

+    }
+  }
+
+  return false;


@RyanbowZ was this addressed ?

samad-yar-khan · 2024-09-12T07:15:52Z

definition/githubIssue.ts

+import { IGithubReactions } from "./githubReactions"
+
+//inidividual issue
+export interface IGitHubIssue{
+    issue_id: string|number,
+    title?: string,
+    html_url?: string,
+    number?: string|number
+    labels?: Array<string>,
+    user_login?:string,
+    user_avatar?:string,
+    last_updated_at?: string,
+    comments?:string|number,
+    state?: string,
+    share?: boolean,//true if seacrh result is to be shareed
+    assignees?: Array<string>,//user ids seperated by " "
+    issue_compact: string,//compact string to share issues in rooms
+    repo_url?: string,
+    body?: string,
+    reactions? : IGithubReactions
+}


@RyanbowZ are you even using any of these ?

samad-yar-khan · 2024-09-12T07:18:42Z

endpoints/githubEndpoints.ts

+import {
+    IApiEndpointInfo,
+    IApiEndpoint,
+    IApiRequest,
+    IApiResponse,
+} from "@rocket.chat/apps-engine/definition/api";
+import { Subscription } from "../persistance/subscriptions";
+import { ISubscription } from "../definition/subscription";
+import { IRoom } from "@rocket.chat/apps-engine/definition/rooms";
+export class githubWebHooks extends ApiEndpoint {
+    public path = "githubwebhook";
+
+    public async post(
+        request: IApiRequest,
+        endpoint: IApiEndpointInfo,
+        read: IRead,
+        modify: IModify,
+        http: IHttp,
+        persis: IPersistence
+    ): Promise<IApiResponse> {
+        let event: string = request.headers["x-github-event"] as string;
+        let payload: any;
+        if (
+            request.headers["content-type"] ===
+            "application/x-www-form-urlencoded"
+        ) {
+            payload = JSON.parse(request.content.payload);
+        } else {
+            payload = request.content;
+        }
+
+        let subscriptionStorage = new Subscription(
+            persis,
+            read.getPersistenceReader()
+        );
+
+        const subscriptions: Array<ISubscription> =
+            await subscriptionStorage.getSubscribedRooms(
+                payload.repository.full_name,
+                event
+            );
+        if (!subscriptions || subscriptions.length == 0) {
+            return this.success();
+        }
+        const eventCaps = event.toUpperCase();
+        let messageText = "newEvent !";
+
+        if (event == "push") {
+            messageText = `*New Commits to* *[${payload.repository.full_name}](${payload.repository.html_url}) by ${payload.pusher.name}*`;
+        } else if (event == "pull_request") {
+            if(payload.action == "opened"){
+                messageText = `*[New Pull Request](${payload.pull_request.html_url})*  *|* *#${payload.pull_request.number} ${payload.pull_request.title}* by *[${payload.pull_request.user.login}](${payload.pull_request.user.html_url})* *|* *[${payload.repository.full_name}]*`;
+            }else if(payload.action == "closed" && payload.pull_request.merged ){
+                messageText = `*[Merged Pull Request](${payload.pull_request.html_url})*  *|* *#${payload.pull_request.number} ${payload.pull_request.title}* by *[${payload.pull_request.user.login}](${payload.pull_request.user.html_url})* *|* *[${payload.repository.full_name}]*`;
+            }else if(payload.action == "closed" && !payload.pull_request.merged){
+                messageText = `*[Closed Pull Request](${payload.pull_request.html_url})*  *|* *#${payload.pull_request.number} ${payload.pull_request.title}* by *[${payload.pull_request.user.login}](${payload.pull_request.user.html_url})* *|* *[${payload.repository.full_name}]*`;
+            }else if(payload.action =="reopened"){
+                messageText = `*[ReOpened Pull Request](${payload.pull_request.html_url})*  *|* *#${payload.pull_request.number} ${payload.pull_request.title}* by *[${payload.pull_request.user.login}](${payload.pull_request.user.html_url})* *|* *[${payload.repository.full_name}]*`;
+            }else{
+                return this.success();
+            }
+        } else if (event == "issues") {
+            if(payload.action == "opened"){
+                messageText = `*[New Issue](${payload.issue.html_url})* *|*  *#${payload.issue.number}* *${payload.issue.title}* *|* *[${payload.repository.full_name}](${payload.repository.html_url})*  `;
+            }else if(payload.action == "closed"){
+                messageText = `*[Issue Closed](${payload.issue.html_url})* *|*  *#${payload.issue.number}* *${payload.issue.title}* *|* *[${payload.repository.full_name}](${payload.repository.html_url})*  `;
+            }else if(payload.action == "reopened"){
+                messageText = `*[ReOpened Issue](${payload.issue.html_url})* *|*  *#${payload.issue.number}* *${payload.issue.title}* *|* *[${payload.repository.full_name}](${payload.repository.html_url})*  `;
+            }else{
+                return this.success();
+            }
+        } else if (event == "deployment_status") {
+            messageText = `*Deployment Status ${payload.deployment_status.state}* *|*  *${payload.repository.full_name}*`;
+        } else if (event == "star"){
+            if(payload?.action == "created"){
+                messageText = `*New Stars on* *${payload.repository.full_name}*  *|* *${payload.repository.stargazers_count}* ⭐`;
+            }else{
+                return this.success();
+            }
+        }
+        for (let subscription of subscriptions) {
+            let roomId = subscription.room;
+            if (!roomId) {
+                continue;
+            }
+            const room: IRoom = (await read
+                .getRoomReader()
+                .getById(roomId)) as IRoom;
+            const textSender = await modify
+                .getCreator()
+                .startMessage()
+                .setText(messageText);
+            if (room) {
+                textSender.setRoom(room);
+            }
+            await modify.getCreator().finish(textSender);
+        }
+
+        return this.success();
+    }


@RyanbowZ are you using any of these ? its a webhook code

RyanbowZ added 6 commits August 9, 2024 11:26

enable support for oauth2 function

b61b8e9

redesign the contextual bar and dropdown box to align with new server…

3586178

… version

enable code sharing to github

f9856b0

resolve the bug of refinement not working

54221dc

move generate/refine code actions handler into submit and enable gith…

f4c479c

…ub sharing extract code content

move share function handlers into view submit handler

37f8cd6

RyanbowZ requested a review from samad-yar-khan August 11, 2024 15:34

samad-yar-khan reviewed Aug 11, 2024

View reviewed changes

samad-yar-khan requested changes Aug 11, 2024

View reviewed changes

RyanbowZ added 2 commits August 12, 2024 10:52

remove unnevessary modal enums and windows

c90f536

update helper functions for a better user interaction

fc74a0c

mustafahasankhan requested changes Aug 12, 2024

View reviewed changes

AiProgrammerApp.ts Outdated Show resolved Hide resolved

handlers/ExecuteActionButtonHandler.ts Outdated Show resolved Hide resolved

settings/settings.ts Outdated Show resolved Hide resolved

RyanbowZ added 7 commits August 12, 2024 18:56

remove unnecessary files and comments

01842a3

remove useless github functions

07a4802

remove all console log comments

ffe8434

remove unuseful github files

0c0b1c8

prototype verification for gist

1e6df6a

enable default content saving for button triggers in modal

52034ba

complete gist function with ux enhancement

993584e

mustafahasankhan reviewed Aug 18, 2024

View reviewed changes

AiProgrammerApp.ts Show resolved Hide resolved

mustafahasankhan requested changes Aug 18, 2024

View reviewed changes

handlers/ExecuteViewSubmitHandler.ts Show resolved Hide resolved

handlers/ExecuteBlockActionHandler.ts Show resolved Hide resolved

handlers/ExecuteViewSubmitHandler.ts Show resolved Hide resolved

VipinDevelops suggested changes Aug 19, 2024

View reviewed changes

RyanbowZ and others added 2 commits August 31, 2024 11:33

remove reminder and complement functions

451e63f

replace variables with enums to be more clarified

eb4b0d9

samad-yar-khan requested changes Sep 12, 2024

View reviewed changes

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

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

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

RyanbowZ commented Aug 11, 2024

samad-yar-khan left a comment

samad-yar-khan commented Aug 11, 2024 •

edited

Loading

samad-yar-khan left a comment

VipinDevelops Aug 19, 2024

samad-yar-khan Sep 12, 2024

VipinDevelops Aug 19, 2024

RyanbowZ Aug 31, 2024

VipinDevelops commented Aug 19, 2024

samad-yar-khan Sep 12, 2024

samad-yar-khan Sep 12, 2024

samad-yar-khan Sep 12, 2024

samad-yar-khan Sep 12, 2024

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

Are you sure you want to change the base?

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

Conversation

RyanbowZ commented Aug 11, 2024

Issue(s)

Acceptance Criteria fulfillment

Proposed Changes

Results

samad-yar-khan left a comment

Choose a reason for hiding this comment

samad-yar-khan commented Aug 11, 2024 • edited Loading

samad-yar-khan left a comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

VipinDevelops commented Aug 19, 2024

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

Choose a reason for hiding this comment

samad-yar-khan commented Aug 11, 2024 •

edited

Loading