feat: Pi plugin enhancements

plugins-structure/apps/politeia/src/components/Proposal/ModalProposalDiff.js

@@ -10,7 +10,11 @@ import {
   RecordCard,
   ThumbnailGrid,
 } from "@politeiagui/common-ui";
-import { decodeProposalRecord, getFilesDiff, getImagesByDigest } from "./utils";
+import {
+  decodeProposalRecord,
+  getFilesDiff,
+  getImagesByDigest,
+} from "../../pi/proposals/utils";
 import { ProposalDownloads } from "./common";
 import styles from "./ModalProposalDiff.module.css";
 import range from "lodash/range";
@@ -54,7 +58,7 @@ function AttachmentsDiff({ newFiles, oldFiles }) {
 
 function VersionSelector({ maxVersion, onChange, current, minVersion = 1 }) {
   const options = range(maxVersion, minVersion - 1, -1).map((v) => ({
-    label: `version ${v}`,
+    label: `v${v}`,
     value: v,
   }));
   function getValueOption(value) {
@@ -250,7 +254,7 @@ function ProposalDiff({
             setDiffView={setIsMarkdownView}
           />
         }
-        subtitle={
+        secondRow={
           <VersionsInfo
             oldProposal={oldProposal}
             newProposal={newProposal}

plugins-structure/apps/politeia/src/components/Proposal/ModalProposalDiff.module.css

@@ -20,6 +20,7 @@
   border-bottom: 0.1rem solid var(--separator-color);
   /* Stick on top without extra margin */
   top: -3rem;
+  z-index: 10;
 }
 
 .filesDiffWrapper {
@@ -72,6 +73,7 @@
   display: flex;
   justify-content: space-between;
   width: 100%;
+  padding-top: 2rem;
 }
 
 .versionsInfo > *:last-child {

plugins-structure/apps/politeia/src/components/Proposal/ProposalCard.js

@@ -1,15 +1,27 @@
 import React from "react";
-import { Button, StatusTag } from "pi-ui";
+import { Button } from "pi-ui";
 import { RecordCard } from "@politeiagui/common-ui";
 import { CommentsCount } from "@politeiagui/comments/ui";
 import { getShortToken } from "@politeiagui/core/records/utils";
-import { decodeProposalRecord, getLegacyProposalStatusTagProps } from "./utils";
-import { ProposalStatusBar, ProposalSubtitle } from "./common";
+import { decodeProposalRecord } from "../../pi/proposals/utils";
+import {
+  ProposalStatusBar,
+  ProposalStatusLabel,
+  ProposalStatusTag,
+  ProposalSubtitle,
+} from "./common";
 
-const ProposalCard = ({ record, voteSummary, commentsCount }) => {
+const ProposalCard = ({
+  record,
+  voteSummary,
+  commentsCount,
+  proposalSummary,
+  proposalStatusChanges,
+}) => {
   const proposal = decodeProposalRecord(record);
-  const statusTagProps = getLegacyProposalStatusTagProps(record, voteSummary);
   const proposalLink = `/record/${getShortToken(proposal.token)}`;
+  const currentStatusChange =
+    proposalSummary && proposalStatusChanges?.[proposalSummary.status];
   return (
     <div>
       <RecordCard
@@ -25,7 +37,10 @@ const ProposalCard = ({ record, voteSummary, commentsCount }) => {
             version={proposal.version}
           />
         }
-        rightHeader={<StatusTag {...statusTagProps} />}
+        rightHeader={<ProposalStatusTag proposalSummary={proposalSummary} />}
+        rightHeaderSubtitle={
+          <ProposalStatusLabel statusChange={currentStatusChange} />
+        }
         secondRow={<ProposalStatusBar voteSummary={voteSummary} />}
         footer={
           <>

plugins-structure/apps/politeia/src/components/Proposal/ProposalDetails.js

@@ -8,11 +8,15 @@ import {
   ThumbnailGrid,
   useModal,
 } from "@politeiagui/common-ui";
-import { decodeProposalRecord, getImagesByDigest } from "./utils";
+import {
+  decodeProposalRecord,
+  getImagesByDigest,
+} from "../../pi/proposals/utils";
 import {
   ProposalDownloads,
   ProposalMetadata,
   ProposalStatusBar,
+  ProposalStatusLabel,
   ProposalStatusTag,
   ProposalSubtitle,
 } from "./common";
@@ -24,8 +28,9 @@ import ModalProposalDiff from "./ModalProposalDiff";
 const ProposalDetails = ({
   record,
   voteSummary,
-  piSummary,
+  proposalSummary,
   onFetchRecordTimestamps,
+  proposalStatusChanges,
 }) => {
   const [open] = useModal();
 
@@ -61,11 +66,15 @@ const ProposalDetails = ({
 
   const isAbandoned = proposalDetails.archived || proposalDetails.censored;
 
+  const currentStatusChange =
+    proposalSummary && proposalStatusChanges?.[proposalSummary.status];
+
   return (
     <div>
-      {isAbandoned && (
+      {currentStatusChange?.reason && (
         <Message kind="warning">
-          Reason: {proposalDetails.abandonmentReason}
+          <div>Proposal is {currentStatusChange.status}.</div>
+          <div>Reason: {currentStatusChange.reason}</div>
         </Message>
       )}
       <RecordCard
@@ -82,7 +91,10 @@ const ProposalDetails = ({
             onChangeVersion={handleChangeVersion}
           />
         }
-        rightHeader={<ProposalStatusTag piSummary={piSummary} />}
+        rightHeader={<ProposalStatusTag proposalSummary={proposalSummary} />}
+        rightHeaderSubtitle={
+          <ProposalStatusLabel statusChange={currentStatusChange} />
+        }
         secondRow={
           <div className={styles.secondRow}>
             <RecordToken token={proposalDetails.token} isCopyable={true} />

plugins-structure/apps/politeia/src/components/Proposal/common/ProposalStatusBar.js

@@ -1,6 +1,6 @@
 import React from "react";
 import { TicketvoteRecordVoteStatusBar } from "@politeiagui/ticketvote/ui";
-import { showVoteStatusBar } from "../utils";
+import { showVoteStatusBar } from "../../../pi/proposals/utils";
 
 function ProposalStatusBar({ voteSummary }) {
   return (

plugins-structure/apps/politeia/src/components/Proposal/common/ProposalStatusLabel.js

@@ -0,0 +1,36 @@
+import React from "react";
+import { Event } from "@politeiagui/common-ui";
+import { Tooltip } from "pi-ui";
+import styles from "./styles.module.css";
+import { getProposalStatusDescription } from "../../../pi/proposals/utils";
+
+function ProposalStatusLabel({ statusChange }) {
+  if (!statusChange) return null;
+  const { event, description } = getProposalStatusDescription(statusChange);
+  return (
+    <div className={styles.statusLabelWrapper}>
+      {event && (
+        <Event
+          event={event}
+          timestamp={statusChange.timestamp}
+          className={styles.statusLabel}
+        />
+      )}
+      {description && (
+        <div className={styles.statusLabelText}>{description}</div>
+      )}
+      {statusChange.blocksCount > 0 && (
+        <Tooltip
+          content={`${statusChange.startblockheight} to ${statusChange.endblockheight}`}
+          placement="bottom"
+          contentClassName={styles.statusLabelTooltip}
+          className={styles.statusLabelText}
+        >
+          {statusChange.blocksCount} blocks left
+        </Tooltip>
+      )}
+    </div>
+  );
+}
+
+export default ProposalStatusLabel;

plugins-structure/apps/politeia/src/components/Proposal/common/ProposalStatusTag.js

@@ -1,10 +1,10 @@
 import React from "react";
 import { StatusTag } from "pi-ui";
-import { getProposalStatusTagProps } from "../utils";
+import { getProposalStatusTagProps } from "../../../pi/proposals/utils";
 
-function ProposalStatusTag({ piSummary }) {
-  const statusTagProps = getProposalStatusTagProps(piSummary);
-  return <StatusTag {...statusTagProps} />;
+function ProposalStatusTag({ proposalSummary }) {
+  const { text, type } = getProposalStatusTagProps(proposalSummary);
+  return <StatusTag text={text} type={type} />;
 }
 
 export default ProposalStatusTag;

plugins-structure/apps/politeia/src/components/Proposal/common/ProposalSubtitle.js

@@ -12,14 +12,12 @@ function ProposalSubtitle({
   timestamps = {},
   onChangeVersion,
 }) {
-  const { publishedat, editedat, abandonedat, censoredat } = timestamps;
+  const { publishedat, editedat } = timestamps;
   return (
     <Join>
       <Link href={`user/${userid}`}>{username}</Link>
       {publishedat && <Event event="published" timestamp={publishedat} />}
       {editedat && <Event event="edited" timestamp={editedat} />}
-      {abandonedat && <Event event="abandoned" timestamp={abandonedat} />}
-      {censoredat && <Event event="censored" timestamp={censoredat} />}
       {version > 1 &&
         (onChangeVersion ? (
           <Dropdown

plugins-structure/apps/politeia/src/components/Proposal/common/index.js

@@ -1,5 +1,6 @@
 export { default as ProposalDownloads } from "./ProposalDownloads";
 export { default as ProposalMetadata } from "./ProposalMetadata";
 export { default as ProposalStatusBar } from "./ProposalStatusBar";
+export { default as ProposalStatusLabel } from "./ProposalStatusLabel";
 export { default as ProposalStatusTag } from "./ProposalStatusTag";
 export { default as ProposalSubtitle } from "./ProposalSubtitle";

plugins-structure/apps/politeia/src/components/Proposal/common/styles.module.css

@@ -1,3 +1,34 @@
 .version {
   color: var(--text-secondary-color);
 }
+
+.statusLabelWrapper {
+  position: absolute;
+  right: var(--container-padding-right);
+  display: flex;
+  flex-flow: column;
+}
+
+.statusLabel {
+  font-size: var(--font-size-small);
+}
+
+.statusLabelTooltip {
+  width: max-content;
+}
+
+.statusLabelText {
+  font-size: var(--font-size-small);
+  color: var(--text-secondary-color);
+}
+
+@media screen and (max-width: 768px) {
+  .statusLabelWrapper {
+    top: 2.3rem;
+    flex-flow: row;
+  }
+  .statusLabelText::before {
+    content: "•";
+    padding: 0 0.5rem;
+  }
+}

plugins-structure/apps/politeia/src/pages/Details/Details.js

@@ -25,12 +25,14 @@ function Details({ token }) {
     detailsStatus,
     fullToken,
     onFetchRecordTimestamps,
-    piSummary,
+    proposalSummary,
     record,
     voteSummary,
     recordDetailsError,
     voteSummaryError,
     commentsError,
+    billingStatusChange,
+    proposalStatusChanges,
   } = useProposalDetails({ token });
   // TODO: this can be moved somewhere else
   const params = getURLSearchParams();
@@ -49,7 +51,9 @@ function Details({ token }) {
           <ProposalDetails
             record={record}
             voteSummary={voteSummary}
-            piSummary={piSummary}
+            proposalSummary={proposalSummary}
+            billingStatusChange={billingStatusChange}
+            proposalStatusChanges={proposalStatusChanges}
             onFetchRecordTimestamps={onFetchRecordTimestamps}
           />
           {comments && (

plugins-structure/apps/politeia/src/pages/Details/index.js

@@ -2,7 +2,11 @@ import App from "../../app";
 import { routeCleanup } from "../../utils/routeCleanup";
 import { createRouteView } from "../../utils/createRouteView";
 import {
+  fetchBillingStatusChangesListenerCreator,
   fetchDetailsListenerCreator,
+  fetchProposalSummaryListenerCreator,
+  fetchRecordDetailsListenerCreator,
+  fetchVoteSummaryListenerCreator,
   recordFetchDetailsListenerCreator,
 } from "./listeners";
 import Details from "./Details";
@@ -29,9 +33,26 @@ export default App.createRoute({
       listenerCreator: fetchDetailsListenerCreator,
     },
     {
-      id: "pi/summaries",
+      id: "pi/summaries/single",
       listenerCreator: fetchDetailsListenerCreator,
     },
+    {
+      id: "pi/billingStatusChanges/single",
+      listenerCreator: fetchProposalSummaryListenerCreator,
+    },
+    // Proposal status changes services
+    {
+      id: "pi/proposals/voteStatusChanges",
+      listenerCreator: fetchVoteSummaryListenerCreator,
+    },
+    {
+      id: "pi/proposals/recordStatusChanges",
+      listenerCreator: fetchRecordDetailsListenerCreator,
+    },
+    {
+      id: "pi/proposals/billingStatusChanges",
+      listenerCreator: fetchBillingStatusChangesListenerCreator,
+    },
   ],
   cleanup: routeCleanup,
   view: createRouteView(Details),