multi: Add proposal votes search

plugins-structure/apps/politeia/cypress/e2e/pageDetails.cy.js

@@ -1,4 +1,5 @@
 import {
+  mockTicketvoteResults,
   mockTicketvoteSubmissions,
   mockTicketvoteSummaries,
 } from "@politeiagui/ticketvote/dev/mocks";
@@ -182,6 +183,34 @@ describe("Given an approved proposal details page", () => {
     );
     cy.findByTestId("status-change-reason").should("contain.text", reason);
   });
+  describe("when searching for proposal votes", () => {
+    const ticket = "fakeTicketToken";
+    it("should allow votes search by ticket token", () => {
+      cy.mockResponse(
+        "/api/ticketvote/v1/results",
+        mockTicketvoteResults({ yes: 500, no: 50, result: { ticket } })
+      ).as("results");
+      cy.visit("/record/fake001");
+      cy.findByTestId("proposal-search-votes-button").click();
+      cy.wait("@results");
+      cy.findByTestId("ticketvote-modal-ticket-search-input")
+        .type(ticket)
+        .type("{enter}");
+      cy.findByTestId("ticketvote-modal-ticket-search-table").should("exist");
+    });
+    it("should display loading indicator when loading proposal votes", () => {
+      cy.mockResponse(
+        "/api/ticketvote/v1/results",
+        mockTicketvoteResults({ yes: 500, no: 50, result: { ticket } }),
+        { delay: 5000 }
+      ).as("results");
+      cy.visit("/record/fake001");
+      cy.findByTestId("proposal-search-votes-button").click();
+      cy.findByTestId("ticketvote-modal-ticket-search-loading").should(
+        "be.visible"
+      );
+    });
+  });
 });
 
 describe("Given an abandoned proposal", () => {
@@ -366,4 +395,15 @@ describe("Given requests errors on Details page", () => {
       "1658261424"
     );
   });
+  it("should display error when ticketvote results request fails", () => {
+    cy.mockResponse("/api/ticketvote/v1/results", errorMock, {
+      statusCode: 500,
+    }).as("results");
+    cy.visit("/record/fake001");
+    cy.findByTestId("proposal-search-votes-button").click();
+    cy.findByTestId("record-form-error-message").should(
+      "include.text",
+      "1658261424"
+    );
+  });
 });

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

@@ -30,6 +30,7 @@ import styles from "./styles.module.css";
 import { ModalProposalDiff } from "./ModalProposalDiff";
 import { ProposalsCompact } from "./ProposalsCompact";
 import { PROPOSAL_STATUS_APPROVED } from "../../pi";
+import { ModalTicketSearch } from "@politeiagui/ticketvote/ui";
 
 const ProposalDetails = ({
   record,
@@ -84,6 +85,12 @@ const ProposalDetails = ({
     open(ModalImages, { images, activeIndex: index });
   }
 
+  function handleOpenSearchVotesModal() {
+    open(ModalTicketSearch, {
+      token: proposalDetails.token,
+    });
+  }
+
   const isAbandoned = proposalDetails.archived || proposalDetails.censored;
 
   const currentStatusChange =
@@ -175,6 +182,11 @@ const ProposalDetails = ({
                 <ButtonIcon type="markdown" viewBox="0 0 208 128" />
               </a>
               <ButtonIcon type="link" onClick={handleShowRawMarkdown} />
+              <ButtonIcon
+                type="search"
+                onClick={handleOpenSearchVotesModal}
+                data-testid="proposal-search-votes-button"
+              />
             </div>
           </>
         }

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

@@ -3,6 +3,7 @@
   min-height: var(--font-size-xxlarge);
   background-color: var(--dimmed-card-background);
   min-width: 10rem;
+  margin-top: 1rem;
   animation: fadeIn linear 1s alternate infinite;
   -webkit-animation: fadeIn linear 1s alternate infinite;
   -moz-animation: fadeIn linear 1s alternate infinite;
@@ -12,8 +13,10 @@
 
 .footerButtons {
   display: flex;
-  width: 6rem;
-  justify-content: space-between;
+}
+
+.footerButtons > * {
+  margin-left: 1rem;
 }
 
 .formButtons {

plugins-structure/packages/common-ui/src/components/RecordForm/RecordForm.js

@@ -132,16 +132,30 @@ function SaveButton({
 
 function Warning({ children }) {
   return (
-    <Message kind="warning" className={styles.warning}>
+    <Message kind="warning" className={styles.message}>
       {children}
     </Message>
   );
 }
 
-export function RecordForm({ initialValues, children, onSubmit }) {
+function ErrorMessage({ error }) {
+  return (
+    error && (
+      <Message
+        kind="error"
+        data-testid="record-form-error-message"
+        className={styles.message}
+      >
+        {error.toString()}
+      </Message>
+    )
+  );
+}
+
+export function RecordForm({ initialValues, children, onSubmit, className }) {
   const formProps = useForm({ defaultValues: initialValues });
   return (
-    <Card className={styles.card}>
+    <Card className={classNames(styles.card, className)}>
       <FormProvider {...formProps}>
         <form
           onSubmit={formProps.handleSubmit(onSubmit)}
@@ -152,6 +166,7 @@ export function RecordForm({ initialValues, children, onSubmit }) {
             formProps,
             CurrencyInput,
             DatePickerInput,
+            ErrorMessage,
             MarkdownInput,
             SaveButton,
             SelectInput,

plugins-structure/packages/common-ui/src/components/RecordForm/styles.module.css

@@ -87,7 +87,7 @@
   -moz-appearance: textfield;
 }
 
-.warning {
+.message {
   margin-top: 1rem;
   margin-bottom: 3.3rem;
 }

plugins-structure/packages/core/src/dev/cypress/commands.js

@@ -1,11 +1,15 @@
 Cypress.Commands.add(
   "mockResponse",
-  (routeMatcher, mockFn, { headers = {}, statusCode = 200 } = {}) => {
+  (
+    routeMatcher,
+    mockFn,
+    { headers = {}, statusCode = 200, ...replyParams } = {}
+  ) => {
     if (!routeMatcher) return;
     return cy.intercept(routeMatcher, (req) => {
       const params = req.body || {};
       const body = mockFn(params);
-      req.reply({ body, headers, statusCode });
+      req.reply({ body, headers, statusCode, ...replyParams });
     });
   }
 );

plugins-structure/packages/ticketvote/src/dev/mocks/index.js

@@ -1,5 +1,6 @@
 import { getTokensArray } from "@politeiagui/core/dev/mocks";
 import { getHumanReadableTicketvoteStatus } from "../../lib/utils";
+import { faker } from "@faker-js/faker";
 
 const bestblock = 420;
 
@@ -77,3 +78,27 @@ export function mockTicketvoteSummaries({
     return { summaries };
   };
 }
+
+export function mockTicketvoteResults({ yes = 10, no = 10, result = {} } = {}) {
+  return ({ token }) => {
+    const voteData = {
+      token,
+      ticket: faker.random.numeric(64),
+      address: faker.random.numeric(35),
+      signature: "",
+      receipt: "",
+      timestamp: Date.now() / 1000,
+    };
+    const yesVotes = Array(yes).fill({
+      ...voteData,
+      ...result,
+      votebit: "2",
+    });
+    const noVotes = Array(no).fill({
+      ...voteData,
+      ...result,
+      votebit: "1",
+    });
+    return { votes: [...yesVotes, ...noVotes] };
+  };
+}

plugins-structure/packages/ticketvote/src/ticketvote/results/resultsSlice.js

@@ -35,7 +35,7 @@ const ticketvoteResultsSlice = createSlice({
       })
       .addCase(fetchTicketvoteResults.fulfilled, (state, action) => {
         const { token } = action.meta.arg;
-        state.byToken[token] = action.payload;
+        state.byToken[token] = action.payload.votes;
         state.status = "succeeded";
       })
       .addCase(fetchTicketvoteResults.rejected, (state, action) => {

plugins-structure/packages/ticketvote/src/ui/TicketSearch/ModalTicketSearch.js

@@ -0,0 +1,30 @@
+import React from "react";
+import PropTypes from "prop-types";
+import { Modal } from "pi-ui";
+import { TicketSearch } from "./TicketSearch";
+
+export function ModalTicketSearch({
+  placeholder,
+  onClose,
+  title,
+  show,
+  token,
+}) {
+  return (
+    <Modal show={show} onClose={onClose} title={title}>
+      <TicketSearch placeholder={placeholder} token={token} />
+    </Modal>
+  );
+}
+
+ModalTicketSearch.propTypes = {
+  token: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+  onClose: PropTypes.func,
+  title: PropTypes.node,
+  show: PropTypes.bool,
+};
+
+ModalTicketSearch.defaultProps = {
+  title: "Search Ticket Vote",
+};

plugins-structure/packages/ticketvote/src/ui/TicketSearch/TicketSearch.js

@@ -0,0 +1,74 @@
+import React, { useEffect, useState } from "react";
+import PropTypes from "prop-types";
+import { useDispatch, useSelector } from "react-redux";
+import { Table } from "pi-ui";
+import { RecordForm } from "@politeiagui/common-ui";
+import styles from "./styles.module.css";
+import { ticketvoteResults } from "../../ticketvote/results";
+
+export function TicketSearch({ placeholder, token }) {
+  const dispatch = useDispatch();
+
+  const [resultsFound, setResultsFound] = useState();
+
+  const results = useSelector((state) =>
+    ticketvoteResults.selectByToken(state, token)
+  );
+
+  const resultsStatus = useSelector(ticketvoteResults.selectStatus);
+  const error = useSelector(ticketvoteResults.selectError);
+
+  function handleSearchTicket({ ticketToken }) {
+    const tickets = results
+      .filter((r) => r.ticket === ticketToken)
+      .map((ticket) => ({
+        Ticket: ticket.ticket,
+        Option: ticket.votebit === "2" ? "Yes" : "No",
+      }));
+    setResultsFound(tickets);
+  }
+
+  useEffect(() => {
+    dispatch(ticketvoteResults.fetch({ token }));
+  }, [dispatch, token]);
+
+  const isLoading = resultsStatus === "loading";
+
+  return (
+    <div>
+      {isLoading && (
+        <div
+          className={styles.loading}
+          data-testid="ticketvote-modal-ticket-search-loading"
+        />
+      )}
+      <RecordForm onSubmit={handleSearchTicket} className={styles.searchForm}>
+        {({ TextInput, ErrorMessage }) => (
+          <>
+            {error && <ErrorMessage error={error} />}
+            <TextInput
+              name="ticketToken"
+              placeholder={isLoading ? "Loading..." : placeholder}
+              disabled={isLoading || error}
+              data-testid="ticketvote-modal-ticket-search-input"
+            />
+          </>
+        )}
+      </RecordForm>
+      {resultsFound && (
+        <div data-testid="ticketvote-modal-ticket-search-table">
+          <Table headers={["Ticket", "Option"]} data={resultsFound} />
+        </div>
+      )}
+    </div>
+  );
+}
+
+TicketSearch.propTypes = {
+  token: PropTypes.string.isRequired,
+  placeholder: PropTypes.string,
+};
+
+TicketSearch.defaultProps = {
+  placeholder: "Search by ticket token",
+};

plugins-structure/packages/ticketvote/src/ui/TicketSearch/index.js

@@ -0,0 +1,2 @@
+export * from "./ModalTicketSearch";
+export * from "./TicketSearch";

plugins-structure/packages/ticketvote/src/ui/TicketSearch/styles.module.css

@@ -0,0 +1,33 @@
+.searchForm {
+  padding: 0 !important;
+}
+
+.loading {
+  width: 50%;
+  height: 0.3rem;
+  background-color: var(--color-primary);
+  top: 0;
+  left: 0;
+  position: fixed;
+  animation: slide 2s linear infinite;
+  overflow: hidden;
+}
+
+@keyframes slide {
+  0% {
+    left: 0;
+    width: 0%;
+  }
+  25% {
+    left: 0%;
+    width: 33%;
+  }
+  75% {
+    left: 67%;
+    width: 33%;
+  }
+  100% {
+    left: 100%;
+    width: 0%;
+  }
+}

plugins-structure/packages/ticketvote/src/ui/Vote/StatusBar.js

@@ -24,9 +24,6 @@ export const TicketvoteRecordVoteStatusBar = ({ ticketvoteSummary }) => {
             isVoteActive={true}
             quorumVotes={quorum}
             votesReceived={votesReceived}
-            onSearchVotes={() => {
-              console.log("SEARCHING");
-            }}
           />
         }
       />