[governance] Add RFP flag to proposals list (#3118)

decred · Jan 28, 2021 · 9aca951 · 9aca951
1 parent 415522c
commit 9aca951
Show file tree

Hide file tree

Showing 7 changed files with 86 additions and 13 deletions.
diff --git a/app/actions/GovernanceActions.js b/app/actions/GovernanceActions.js
@@ -72,6 +72,7 @@ const fillVoteSummary = (proposal, voteSummary, blockTimestampFromNow) => {
     : 60;
   proposal.quorumMinimumVotes = Math.round(eligibleVotes * (quorum / 100));
   proposal.voteStatus = voteSummary.status;
+  proposal.approved = voteSummary.approved;
 
   if (totalVotes > proposal.quorumMinimumVotes) {
     proposal.quorumPass = true;

diff --git a/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.jsx b/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.jsx
@@ -21,7 +21,10 @@ const ProposalsListItem = ({
   modifiedSinceLastAccess,
   votingSinceLastAccess,
   quorumMinimumVotes,
-  finishedVote
+  finishedVote,
+  linkto,
+  linkedfrom,
+  approved
 }) => {
   const { viewProposalDetailsHandler, tsDate } = useProposalsListItem(token);
   const isVoting = voteStatus === VOTESTATUS_ACTIVEVOTE;
@@ -36,11 +39,24 @@ const ProposalsListItem = ({
         "is-row",
         styles.listiTtem,
         styles[voteResult],
+        !approved && styles.declined,
         finishedVote && styles.ended,
         isModified && styles.modified
       )}>
       <div>
-        <div className={styles.name}>{name}</div>
+        <div className={styles.title}>
+          <div className={styles.name}>{name}</div>
+          {linkedfrom && (
+            <div className={styles.rfp}>
+              <T id="proposalItem.rfp" m="RFP" />
+            </div>
+          )}
+          {linkto && (
+            <div className={styles.rfp}>
+              <T id="proposalItem.proposedForRfp" m="Proposed for RFP" />
+            </div>
+          )}
+        </div>
         <div className={styles.token}>{token.substring(0, 7)}</div>
       </div>
       <div className={styles.resultsArea}>
@@ -69,7 +85,11 @@ const ProposalsListItem = ({
         ) : (
           <div className={styles.voteResult}>
             {quorumPass ? (
-              voteResult
+              linkto && !approved && voteResult !== "declined" ? (
+                <T id="proposals.rfpRejected" m="Proposal not chosen" />
+              ) : (
+                voteResult
+              )
             ) : (
               <T id="proposals.quorumNotMet" m="Quorum not met" />
             )}

diff --git a/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.module.css b/app/components/views/GovernancePage/Proposals/ProposalsListItem/ProposalsListItem.module.css
@@ -32,11 +32,23 @@
   color: var(--input-color);
 }
 
-.name {
+.title {
+  display: flex;
+  flex-direction: row;
   font-size: 13px;
   line-height: 17px;
+}
+
+.name {
   color: var(--input-color-default);
-  width: 440px;
+}
+
+.rfp {
+  border: 1px solid var(--stroke-color-default);
+  border-radius: 3px;
+  padding: 0 5px;
+  margin-left: 15px;
+  color: var(--stroke-color-default);
 }
 
 .token {
@@ -80,10 +92,12 @@
   margin-right: 10px;
 }
 
-.voteChoice.yes, .voteChoice.passed {
+.voteChoice.yes,
+.voteChoice.passed {
   background-color: var(--vote-yes-color);
 }
-.voteChoice.no, .voteChoice.declined {
+.voteChoice.no,
+.voteChoice.declined {
   background-color: var(--vote-no-color);
 }
 

diff --git a/app/components/views/ProposalDetailsPage/ProposalDetails.jsx b/app/components/views/ProposalDetailsPage/ProposalDetails.jsx
@@ -49,7 +49,8 @@ const ProposalDetails = ({
   newVoteChoice,
   text,
   goBackHistory,
-  eligibleTicketCount
+  eligibleTicketCount,
+  linkedProposal
 }) => {
   walletEligibleTickets = walletEligibleTickets.map((et, i) => {
     walletEligibleTickets[i].txHash = et.ticket;
@@ -60,6 +61,7 @@ const ProposalDetails = ({
   const { themeName } = useTheme();
   const isDarkTheme = themeName === DEFAULT_DARK_THEME_NAME;
   const shortToken = token.substring(0, 7);
+  const shortRFPToken = linkedProposal?.token.substring(0, 7);
   const proposalPath = `/proposals/${shortToken}`;
   const votingActiveOrFinished =
     voteStatus === VOTESTATUS_ACTIVEVOTE ||
@@ -70,6 +72,23 @@ const ProposalDetails = ({
         <div className={styles.overviewInfoWrapper}>
           <div className={styles.overviewInfo}>
             <div className={styles.title}>{name}</div>
+            {linkedProposal && (
+              <div className={styles.proposedToRfp}>
+                <T
+                  id="proposal.overview.proposedToRfp.label"
+                  m="Proposed for {linkedProposal}"
+                  values={{
+                    linkedProposal: (
+                      <PoliteiaLink
+                        isTestnet={isTestnet}
+                        path={`/proposals/${shortRFPToken}`}>
+                        {`${linkedProposal.name} (${shortRFPToken})`}
+                      </PoliteiaLink>
+                    )
+                  }}
+                />
+              </div>
+            )}
             <div className={styles.token}>
               <PoliteiaLink isTestnet={isTestnet} path={proposalPath}>
                 {shortToken}

diff --git a/app/components/views/ProposalDetailsPage/ProposalDetails.module.css b/app/components/views/ProposalDetailsPage/ProposalDetails.module.css
@@ -21,14 +21,19 @@
   color: var(--tutorial-header);
 }
 
+.proposedToRfp,
 .token {
   overflow: hidden;
   white-space: nowrap;
   text-overflow: ellipsis;
-  width: 100px;
   color: var(--overview-balance-label);
 }
 
+.token {
+  width: 100px;
+}
+
+.proposedToRfp a,
 .token a {
   font-size: 13px;
   line-height: 19px;
@@ -37,6 +42,7 @@
   cursor: pointer;
 }
 
+.proposedToRfp a:hover,
 .token a:hover {
   color: var(--stroke-color-default);
 }

diff --git a/app/components/views/ProposalDetailsPage/ProposalDetailsPage.jsx b/app/components/views/ProposalDetailsPage/ProposalDetailsPage.jsx
@@ -16,7 +16,8 @@ const ProposalDetailsPage = () => {
     getProposalError,
     goBackHistory,
     showPurchaseTicketsPage,
-    send
+    send,
+    linkedProposal
   } = useProposalDetailsPage();
 
   const stateComponent = useMemo(() => {
@@ -43,7 +44,8 @@ const ProposalDetailsPage = () => {
               viewedProposalDetails,
               goBackHistory,
               eligibleTicketCount,
-              showPurchaseTicketsPage
+              showPurchaseTicketsPage,
+              linkedProposal
             }}
           />
         );
@@ -67,7 +69,8 @@ const ProposalDetailsPage = () => {
     getProposalError,
     votingStatus,
     showPurchaseTicketsPage,
-    send
+    send,
+    linkedProposal
   ]);
 
   return (

diff --git a/app/components/views/ProposalDetailsPage/hooks.js b/app/components/views/ProposalDetailsPage/hooks.js
@@ -17,13 +17,22 @@ export const useProposalDetails = () => {
 export const useProposalDetailsPage = () => {
   const dispatch = useDispatch();
   const { token } = useParams();
+  const proposals = useSelector(sel.proposals);
   const proposalsDetails = useSelector(sel.proposalsDetails);
   const getProposalError = useSelector(sel.getProposalError);
 
   const viewedProposalDetails = useMemo(() => proposalsDetails[token], [
     token,
     proposalsDetails
   ]);
+
+  const linkedProposal = useMemo(() => viewedProposalDetails?.linkto &&
+    proposals.finishedVote.find(proposal => viewedProposalDetails.linkto === proposal.token)
+    , [
+      proposals,
+      viewedProposalDetails
+    ]);
+
   const eligibleTicketCount =
     viewedProposalDetails && viewedProposalDetails.walletEligibleTickets
       ? proposalsDetails[token].walletEligibleTickets.length
@@ -69,6 +78,7 @@ export const useProposalDetailsPage = () => {
     dispatch,
     goBackHistory,
     showPurchaseTicketsPage,
-    send
+    send,
+    linkedProposal
   };
 };