search

Real-Dev-Squad / website-status

Shows a roadmap of the ongoing projects being done
https://status.realdevsquad.com/
MIT License
21 stars 145 forks source link

Fix :Github link to display in task details page. #827

Closed kapillondhe closed 8 months ago

kapillondhe commented 9 months ago

Issue:

In Tasks tab, when clicked on task title. Task detail page is displayed. In task details page NA is being displayed for Link. It should display the button to open GitHub Issue link. Fixes issue #774

Screenshot before these changes : Link property displayed as NA. image

Description:

HTML URL of the GitHub issue is sent in the request body while creating tasks from the issue. Backend changes are done to store the GitHub issue HTML URL in the tasks database. UI changes are done to add a button when the Git issue link is present. After clicking on the button, the respective GitHub issue link will open in a new tab.

Anything you would like to inform the reviewer about:

Backend changes are also required for this fix. PR 1428 raised in website-backend.

Dev Tested:

Images/video of the change:

Link property displayed as a button. image

screen-capture.webm

Test stat:

Before: image

After : image

Follow-up Issues (if any)

No

vercel[bot] commented 9 months ago

@kapillondhe is attempting to deploy a commit to the RDS-Team Team on Vercel.

A member of the Team first needs to authorize it.

sahsisunny commented 9 months ago

Is it possible to display only the icon on the link issue button without any background color?

kapillondhe commented 9 months ago

Is it possible to display only the icon on the link issue button without any background color?

@sahsisunny Yes, a button without a background color (White) can be displayed. What should be the color on the hover for the button?

kapillondhe commented 9 months ago

The size of the Link icon seems a little bigger to me. If possible, can it be aligned on the same line as the Link label and not occupy the next line. Though rest code looks good to me.

@AnjaliDeshwani Sure, I have updated it to align in the same line and reduced the size of the button. Thanks image

kapillondhe commented 9 months ago

Is it possible to display only the icon on the link issue button without any background color?

@sahsisunny Yes, a button without a background color (White) can be displayed. What should be the color on the hover for the button?

@sahsisunny I have updated the code. Please find below the image for the button display over hover. Please let me know if you have any further suggestions. image

vinit717 commented 8 months ago

Can you add a video for how it work and how it look like in different screen size

kapillondhe commented 8 months ago

Can you add a video for how it work and how it look like in different screen size

Sure. Added the video in the PR description.

vinit717 commented 8 months ago

image Why in this button we have 2 icons why can't we use only single icon which should be github icon only?

kapillondhe commented 8 months ago

image Why in this button we have 2 icons why can't we use only single icon which should be github icon only?

@vinit717 Both of these icons suggest that we are opening a GitHub link. If we have only the GitHub icon, it will not represent the action after clicking. Please let me know if you don't find this reasoning acceptable; I can change this to a single icon.

vinit717 commented 8 months ago

image Why in this button we have 2 icons why can't we use only single icon which should be github icon only?

@vinit717 Both of these icons suggest that we are opening a GitHub link. If we have only the GitHub icon, it will not represent the action after clicking. Please let me know if you don't find this reasoning acceptable; I can change this to a single icon.

It's evident that this link should follow the same standard as other clickable links, utilizing a single icon to represent its nature as a GitHub link. This consistency in iconography simplifies the user experience and aligns with established design principles

kapillondhe commented 8 months ago

image Why in this button we have 2 icons why can't we use only single icon which should be github icon only?

@vinit717 Both of these icons suggest that we are opening a GitHub link. If we have only the GitHub icon, it will not represent the action after clicking. Please let me know if you don't find this reasoning acceptable; I can change this to a single icon.

It's evident that this link should follow the same standard as other clickable links, utilizing a single icon to represent its nature as a GitHub link. This consistency in iconography simplifies the user experience and aligns with established design principles

Okay. Changed to a single icon. Thanks