Make the Preview button dynamic (#3317)

app/javascript/article-form/elements/publishToggle.jsx

@@ -16,7 +16,7 @@ const PublishToggle = ({
   <div className="articleform__buttons">
     <button
       onClick={onHelp}
-      type='button'
+      type="button"
       className={
         helpShowing
           ? 'articleform__buttons--small active'
@@ -27,22 +27,32 @@ const PublishToggle = ({
     </button>
     <button
       onClick={onPreview}
-      type='button'
+      type="button"
       className={previewShowing ? 'active' : 'inactive'}
     >
-      PREVIEW
+      {previewShowing ? 'EDIT' : 'PREVIEW'}
     </button>
-    {(published || version === 'v1') ? '' : <button onClick={onSaveDraft} type='button'>SAVE DRAFT</button>}
+    {published || version === 'v1' ? (
+      ''
+    ) : (
+      <button onClick={onSaveDraft} type="button">
+        SAVE DRAFT
+      </button>
+    )}
     <span>
       <p style={!edited && { visibility: 'hidden' }}>
         New Changes (
-        <button onClick={onClearChanges} className="clear-button" type='button'>
+        <button onClick={onClearChanges} className="clear-button" type="button">
           clear
         </button>
         )
       </p>
-      <button onClick={onPublish} className="articleform__buttons--publish" type='button'>
-        {(published || version === 'v1') ? 'SAVE CHANGES' : 'PUBLISH'}
+      <button
+        onClick={onPublish}
+        className="articleform__buttons--publish"
+        type="button"
+      >
+        {published || version === 'v1' ? 'SAVE CHANGES' : 'PUBLISH'}
       </button>
     </span>
   </div>

spec/system/articles/user_edits_an_article_spec.rb

@@ -21,6 +21,7 @@ RSpec.describe "Editing with an editor", type: :system, js: true do
     fill_in "article_body_markdown", with: template.gsub("Suspendisse", "Yooo")
     click_button("PREVIEW")
     expect(page).to have_text("Yooo")
+    expect(find(".active").text).to have_text("EDIT")
   end
 
   it "user updates their post" do