From 8f4a9c175fbb356e7a2f3abec997901bbaff2b94 Mon Sep 17 00:00:00 2001
From: Victor Guedes <victorgcramos@gmail.com>
Date: Sun, 19 Dec 2021 12:46:10 -0300
Subject: [PATCH] fix: show proposal published and edit dates

This commit displays the missing "published" timestamp event for
proposals that have been edited. Also, display timestamps for mobile
views and adds e2e tests to prevent this from happening further.
---
 src/components/Proposal/Proposal.jsx          | 11 ++++++-----
 .../RecordWrapper/RecordWrapper.jsx           |  8 ++------
 .../RecordWrapper/RecordWrapper.module.css    | 19 +++++++++++++++++++
 teste2e/cypress/e2e/proposal/edit.js          |  4 ++++
 4 files changed, 31 insertions(+), 11 deletions(-)

diff --git a/src/components/Proposal/Proposal.jsx b/src/components/Proposal/Proposal.jsx
index 844085f17..6a9390964 100644
--- a/src/components/Proposal/Proposal.jsx
+++ b/src/components/Proposal/Proposal.jsx
@@ -207,8 +207,7 @@ const Proposal = React.memo(function Proposal({
     isAuthor && isEditableProposal(proposal, voteSummary) && !isLegacy;
   const { apiInfo } = useLoader();
   const mobile = useMediaQuery("(max-width: 560px)");
-  const showEditedDate = version > 1 && timestamp !== publishedat && !mobile;
-  const showPublishedDate = publishedat && !mobile && !showEditedDate;
+  const showEditedDate = version > 1 && timestamp !== publishedat;
   const showExtendedVersionPicker =
     extended && version > 1 && !isCensored && (isVetted || isAuthor || isAdmin);
   const showVersionAsText = !extended && !mobile;
@@ -343,11 +342,13 @@ const Proposal = React.memo(function Proposal({
                       timestamp={linkby}
                     />
                   )}
-                  {showPublishedDate && (
+                  <span data-testid="proposal-published-timestamp">
                     <Event event="published" timestamp={publishedat} />
-                  )}
+                  </span>
                   {showEditedDate && (
-                    <Event event="edited" timestamp={timestamp} />
+                    <span data-testid="proposal-edited-timestamp">
+                      <Event event="edited" timestamp={timestamp} />
+                    </span>
                   )}
                   {showVersionAsText && (
                     <Text
diff --git a/src/components/RecordWrapper/RecordWrapper.jsx b/src/components/RecordWrapper/RecordWrapper.jsx
index d13a11230..c5cb59017 100644
--- a/src/components/RecordWrapper/RecordWrapper.jsx
+++ b/src/components/RecordWrapper/RecordWrapper.jsx
@@ -103,9 +103,7 @@ export const Subtitle = ({ children, separatorSymbol = "•" }) => (
   <Join
     className={classNames("margin-top-s", styles.subtitleWrapper)}
     SeparatorComponent={() => (
-      <span className="text-secondary-color margin-left-s margin-right-s">
-        {separatorSymbol}
-      </span>
+      <span className={styles.subtitleSeparator}>{separatorSymbol}</span>
     )}>
     {children}
   </Join>
@@ -115,9 +113,7 @@ export const JoinTitle = ({ children, className, separatorSymbol = "•" }) => (
   <Join
     className={classNames(className, styles.flexWrap)}
     SeparatorComponent={() => (
-      <span className="text-secondary-color margin-left-s margin-right-s">
-        {separatorSymbol}
-      </span>
+      <span className={styles.subtitleSeparator}>{separatorSymbol}</span>
     )}>
     {children}
   </Join>
diff --git a/src/components/RecordWrapper/RecordWrapper.module.css b/src/components/RecordWrapper/RecordWrapper.module.css
index 8ccf3f7a8..44bcfb6bf 100644
--- a/src/components/RecordWrapper/RecordWrapper.module.css
+++ b/src/components/RecordWrapper/RecordWrapper.module.css
@@ -19,6 +19,12 @@
   flex-wrap: wrap;
 }
 
+.subtitleSeparator {
+  margin-right: var(--spacing-small);
+  margin-left: var(--spacing-small);
+  color: var(--text-secondary-color);
+}
+
 .flexWrap {
   flex-wrap: wrap;
 }
@@ -150,4 +156,17 @@ div.darkActionsTooltip {
   .title {
     max-width: 100%;
   }
+
+  .subtitleWrapper {
+    flex-flow: column;
+    max-width: 100%;
+  }
+
+  .subtitleWrapper > .subtitleSeparator {
+    display: none;
+  }
+
+  .subtitleWrapper > *:not(:first-child) {
+    padding-top: 1rem;
+  }
 }
diff --git a/teste2e/cypress/e2e/proposal/edit.js b/teste2e/cypress/e2e/proposal/edit.js
index fdad9e247..4150ef3ab 100644
--- a/teste2e/cypress/e2e/proposal/edit.js
+++ b/teste2e/cypress/e2e/proposal/edit.js
@@ -41,6 +41,8 @@ describe("Proposal Edit", () => {
           .its("status")
           .should("eq", 200);
         cy.findByText(/version 2/).should("exist");
+        cy.findByTestId("proposal-published-timestamp").should("be.visible");
+        cy.findByTestId("proposal-edited-timestamp").should("be.visible");
       }
     );
   });
@@ -67,6 +69,8 @@ describe("Proposal Edit", () => {
         cy.identity();
         cy.visit(`record/${shortRecordToken(censorshiprecord.token)}`);
         cy.findByTestId(/record-edit-button/i).should("not.exist");
+        cy.findByTestId("proposal-published-timestamp").should("be.visible");
+        cy.findByTestId("proposal-edited-timestamp").should("not.exist");
       }
     );
   });