Fix: Rendering error for threshold and alignment of help icons #3585

Julianahlk · 2022-07-06T15:28:48Z

Description

This PR fixes the issue with a 0 rendering error for the threshold progress bar. As well as the alignment of the help icons in the VoteDetails component.

##Story
The threshold value was 0, so when it was being evaluated it kept returning a 0 in the tsx and rendered by React to the screen. In this situation, it is better to use a boolean.

Figma link

Before

Changes 🏗

Removed unnecessary divs in the VoteDetails component that were causing the issue with the misalignment of the help icons.
Created a new variable that would handle the threshold as a boolean instead of a number.

After

TODO

Fix the 0 rendering error for the threshold progress bar.
Fix alignment of help icons

Resolves #3572

Julianahlk · 2022-07-08T16:59:25Z

While working on this task, I found out the threshold percentage doesn't seem to be working in my dev env. I spend most of yesterday and today investigating and trying to test the threshold progress bar in my local env and in QA but this has been difficult to test because of how time works in those environments.

In some cases, I had a full progress bar 100% and in others I had nothing. Would it be possible when any of you review this PR to test if you can get the threshold progress bar showing any other number than 100%? Thank you! ☺️

willm30 · 2022-07-11T11:35:39Z

src/modules/core/components/ProgressBar/ProgressBar.tsx

@@ -42,12 +42,13 @@ const ProgressBar = ({
 }: Props) => {
  const { formatMessage } = useIntl();
  const titleText = formatMessage(MSG.titleProgress, { value, max });
+  const shouldDisplayThreshold = !!(threshold && threshold > 0);


!!threshold would have the same effect here. If threshold is falsy (e.g. undefined or 0) it will return false, otherwise true. Then you could remove this line and below do !!threshold && (...)

I agree. I was keeping the threshold inside a variable because generally I like to use variable names to help document the code but in this case its simple enough that it isn't necessary. Thank you for the suggestion. I made the change already.

willm30

Nice alignment of the question marks. I have left a comment re the boolean logic.

As an aside to this issue, I'm curious to know if anybody else had trouble trying to test the voting mechanism? I found the experience error-prone (either receiving errors or unexpected behaviour). For example, I received the following error on multiple occasions, as well as the voting phase itself going straight to reveal, despite my not having voted.

I can document more extensively if this is something others have noticed also.

Julianahlk · 2022-07-11T19:54:14Z

I can document more extensively if this is something others have noticed also.

Yes, please. I am not getting the same error as you. However, sometimes I get something similar if the reputation miner is on but as soon as I toggle it off the staking or objection works for me.

ArmandoGraterol · 2022-07-11T22:30:34Z

The alignment and 0 left of the progress bar are fixed 👍

Something fishy is definitely happening with the threshold and progress percentage thought. For me, they remain 0 even though the operations that calculate them should not return 0. Don't know if you want to take a look at that in this PR or if you prefer to create a separate issue for it.

@willm30 @Julianahlk
That error in the screenshot is expected. The reputation monitor fast-forwards to the future every time it runs in order to calculate the reputation, this is something that happens only in dev's environments to avoid having to wait too much time to generate reputation.

You are staking a motion, which is something that changes the user's balance, while having the monitor ON. The monitor then fast-forwards a few days into the future, making the staking period or even the motion instantly finish because all the timers ran out. This is why you can't stake, or why the voting phase goes straight to revealing (voting phase timer ran out).

So basically, I recommend turning the monitor off when you want to work with motions in order to avoid wacky shit like this hahaha :)

Julianahlk · 2022-07-12T11:05:15Z

@ArmandoGraterol Do you know how to test to get a threshold other than 0? I wasn't able to test this in QA either and I figured my dev environment wasn't setup correctly for this type of test. Would it be possible to test in Production? I can create a new issue but wanted to be clear on the correct repro steps for this issue.

rdig

All good, except there's two more question mark icons that are mis-aligned.

Here's a basic outline to follow in order to test this properly (and not run into the revert transaction that Will was running into)

Toggle mining on: http://0.0.0.0:3001/reputation/monitor/toggle
Create 1st user and a colony
mint tokens
payout 10 tokens to 1st user
log out
log in, create 2nd user and join the colony
log out
log back in with the 1st user
pay the 10 tokens to the same user
initialize voting reputation
enable voting reputation
Toggle mining off: http://0.0.0.0:3001/reputation/monitor/toggle
refresh app

By this point, you'll have a colony, with voting reputation enabled, and 2 users, each having 50% of the reputation in said colony

If you need to pass time manually, just use this from the command line:

curl -X POST --data '{"jsonrpc":"2.0","method":"evm_increaseTime","params":[3600],"id":1}' localhost:8545
curl -X POST --data '{"jsonrpc":"2.0","method":"evm_mine","params":[],"id":1}' localhost:8545

src/modules/core/components/ProgressBar/ProgressBar.tsx

src/modules/dashboard/components/ActionsPage/VoteWidget/VoteDetails.tsx

ArmandoGraterol · 2022-07-13T19:55:39Z

@ArmandoGraterol Do you know how to test to get a threshold other than 0? I wasn't able to test this in QA either and I figured my dev environment wasn't setup correctly for this type of test. Would it be possible to test in Production? I can create a new issue but wanted to be clear on the correct repro steps for this issue.

I tried to get a different threshold and it seems like it's not working as expected. By following the steps Raul outlined, and leaving the default extension settings you should be able to test if the threshold and progress bar display works or not, and right now it seems like it's not working properly because when you vote with 1 user the progress remains in 0 as if nobody voted.

Julianahlk · 2022-07-13T22:49:59Z

I tried to get a different threshold and it seems like it's not working as expected. By following the steps Raul outlined, and leaving the default extension settings you should be able to test if the threshold and progress bar display works or not, and right now it seems like it's not working properly because when you vote with 1 user the progress remains in 0 as if nobody voted.

Agreed! I did the same test and still I cannot get the progress bar to change. If you hardcode the threshold number it will actually display the threshold percentage in the progress bar but without that nothing works so far.

As mentioned above, I will open a new issue for the progress bar to investigate further.

Thank you guys!

willm30 · 2022-07-14T09:59:36Z

curl -X POST --data '{"jsonrpc":"2.0","method":"evm_increaseTime","params":[3600],"id":1}' localhost:8545
curl -X POST --data '{"jsonrpc":"2.0","method":"evm_mine","params":[],"id":1}' localhost:8545

@rdig FYI, I've put some of this info in Notion for my and others' future reference.

rdig

They render properly aligned now. Good work. 💯

Also, LOL. This are your first and last commits :)

Julianahlk · 2022-07-15T14:55:47Z

They render properly aligned now. Good work. 💯

Thanks Raul! ☺️

Also, LOL. This are your first and last commits :)

Oh man! Did realize 😅 I will remember for next time to not do that.

Julianahlk self-assigned this Jul 6, 2022

Julianahlk changed the title ~~Fix: Alignment of help icons~~ Fix: Voting timeout error and Alignment of help icons Jul 7, 2022

Julianahlk changed the title ~~Fix: Voting timeout error and Alignment of help icons~~ Fix: Voting timeout error and alignment of help icons Jul 7, 2022

Julianahlk changed the title ~~Fix: Voting timeout error and alignment of help icons~~ Fix: Rendering error for threshold and alignment of help icons Jul 7, 2022

Julianahlk marked this pull request as ready for review July 8, 2022 17:02

Julianahlk requested a review from a team July 8, 2022 17:02

willm30 reviewed Jul 11, 2022

View reviewed changes

willm30 approved these changes Jul 11, 2022

View reviewed changes

Julianahlk requested a review from a team July 13, 2022 08:22

rdig requested changes Jul 13, 2022

View reviewed changes

src/modules/core/components/ProgressBar/ProgressBar.tsx Show resolved Hide resolved

src/modules/core/components/ProgressBar/ProgressBar.tsx Show resolved Hide resolved

src/modules/dashboard/components/ActionsPage/VoteWidget/VoteDetails.tsx Show resolved Hide resolved

Julianahlk force-pushed the maintenance/3572-fix-voting-timeout-and-icons branch from 1bd5b3c to fd21775 Compare July 14, 2022 20:47

rdig approved these changes Jul 15, 2022

View reviewed changes

Julianahlk added 5 commits July 15, 2022 18:01

Fix: Alignment of help icons

13cfde7

Fix: Fixed zero rendering error for progress bar

80ab96c

Fix: Tiny adjustment to threshold

6df10b4

Fix: Removed shouldDisplayThreshold

e3e4713

Fix: Help icons alignment

e41511b

Julianahlk force-pushed the maintenance/3572-fix-voting-timeout-and-icons branch from fd21775 to e41511b Compare July 15, 2022 15:04

Julianahlk merged commit 0c8ee73 into master Jul 15, 2022

Julianahlk deleted the maintenance/3572-fix-voting-timeout-and-icons branch July 15, 2022 15:16

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Fix: Rendering error for threshold and alignment of help icons #3585

Fix: Rendering error for threshold and alignment of help icons #3585

Julianahlk commented Jul 6, 2022 •

edited

Loading

Julianahlk commented Jul 8, 2022 •

edited

Loading

willm30 Jul 11, 2022

Julianahlk Jul 11, 2022

willm30 left a comment

Julianahlk commented Jul 11, 2022

ArmandoGraterol commented Jul 11, 2022 •

edited

Loading

Julianahlk commented Jul 12, 2022

rdig left a comment

ArmandoGraterol commented Jul 13, 2022

Julianahlk commented Jul 13, 2022

willm30 commented Jul 14, 2022 •

edited

Loading

rdig left a comment

Julianahlk commented Jul 15, 2022 •

edited

Loading

Fix: Rendering error for threshold and alignment of help icons #3585

Fix: Rendering error for threshold and alignment of help icons #3585

Conversation

Julianahlk commented Jul 6, 2022 • edited Loading

Description

TODO

Julianahlk commented Jul 8, 2022 • edited Loading

willm30 Jul 11, 2022

Choose a reason for hiding this comment

Julianahlk Jul 11, 2022

Choose a reason for hiding this comment

willm30 left a comment

Choose a reason for hiding this comment

Julianahlk commented Jul 11, 2022

ArmandoGraterol commented Jul 11, 2022 • edited Loading

Julianahlk commented Jul 12, 2022

rdig left a comment

Choose a reason for hiding this comment

ArmandoGraterol commented Jul 13, 2022

Julianahlk commented Jul 13, 2022

willm30 commented Jul 14, 2022 • edited Loading

rdig left a comment

Choose a reason for hiding this comment

Julianahlk commented Jul 15, 2022 • edited Loading

Julianahlk commented Jul 6, 2022 •

edited

Loading

Julianahlk commented Jul 8, 2022 •

edited

Loading

ArmandoGraterol commented Jul 11, 2022 •

edited

Loading

willm30 commented Jul 14, 2022 •

edited

Loading

Julianahlk commented Jul 15, 2022 •

edited

Loading