feat: show clear when research update is draft

ONEARMY · Sep 3, 2024 · 6a76e89 · 6a76e89
1 parent ea012d9
commit 6a76e89
Show file tree

Hide file tree

Showing 4 changed files with 217 additions and 161 deletions.
diff --git a/packages/cypress/src/integration/research/write.spec.ts b/packages/cypress/src/integration/research/write.spec.ts
@@ -276,7 +276,6 @@ describe('[Research]', () => {
       cy.get('[data-cy=create]').click()
 
       cy.step('Enter research article details')
-
       cy.get('[data-cy=intro-title').clear().type(expected.title).blur()
       cy.get('[data-cy=intro-description]').clear().type(expected.description)
       cy.get('[data-cy=submit]').click()
@@ -313,6 +312,24 @@ describe('[Research]', () => {
       cy.visit(`/research/${expected.slug}`)
 
       cy.contains(updateTitle)
+      cy.get('[data-cy=DraftUpdateLabel]').should('be.visible')
+
+      cy.step('Draft not visible to others')
+      cy.logout()
+      cy.visit(`/research/${expected.slug}`)
+      cy.get(updateTitle).should('not.exist')
+      cy.get('[data-cy=DraftUpdateLabel]').should('not.exist')
+
+      cy.step('Draft updates can be published')
+      cy.login(researcherEmail, researcherPassword)
+      cy.visit(`/research/${expected.slug}`)
+      cy.get('[data-cy=edit-update]').click()
+      cy.contains('Edit your update')
+      cy.get('[data-cy=videoUrl]').clear().type(updateVideoUrl).blur()
+      cy.get('[data-cy=submit]').click()
+      cy.get('[data-cy=view-research]:enabled', { timeout: 20000 }).click()
+      cy.contains(updateTitle)
+      cy.get('[data-cy=DraftUpdateLabel]').should('not.exist')
     })
   })
 })
diff --git a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
@@ -258,25 +258,50 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                 px={2}
                 mt={[0, 0, 4]}
               >
-                <Box
+                <Flex
                   sx={{
+                    flexDirection: 'column',
                     position: ['relative', 'relative', 'sticky'],
-                    top: 3,
+                    gap: 3,
                     maxWidth: ['inherit', 'inherit', '400px'],
                   }}
                 >
+                  <Button
+                    large
+                    id="submit-form"
+                    data-testid="submit-form"
+                    data-cy="submit"
+                    onClick={(evt) => {
+                      trySubmitForm(false)
+                      evt.preventDefault()
+                    }}
+                    variant="primary"
+                    type="submit"
+                    disabled={submitting}
+                    sx={{
+                      alignSelf: 'stretch',
+                      justifyContent: 'center',
+                    }}
+                  >
+                    {publishButtonText}
+                  </Button>
+
                   <Button
                     data-cy="draft"
                     onClick={() => {
                       trySubmitForm(true)
                     }}
                     variant="secondary"
                     type="submit"
+                    sx={{
+                      alignSelf: 'stretch',
+                      justifyContent: 'center',
+                    }}
                     disabled={submitting}
-                    sx={{ width: '100%', display: 'block', mt: 0 }}
                   >
-                    <span>{draftButtonText}</span>
+                    {draftButtonText}
                   </Button>
+
                   {isEdit ? (
                     <Button
                       data-cy="delete"
@@ -287,32 +312,11 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                       variant="destructive"
                       type="submit"
                       disabled={submitting}
-                      sx={{ width: '100%', display: 'block', mt: 3 }}
+                      sx={{ alignSelf: 'stretch', justifyContent: 'center' }}
                     >
                       {deletion.text}
                     </Button>
                   ) : null}
-                  <Button
-                    large
-                    id="submit-form"
-                    data-testid="submit-form"
-                    data-cy="submit"
-                    onClick={(evt) => {
-                      trySubmitForm(false)
-                      evt.preventDefault()
-                    }}
-                    variant="primary"
-                    type="submit"
-                    disabled={submitting}
-                    sx={{
-                      mt: 3,
-                      mb: ['40px', '40px', 0],
-                      width: '100%',
-                      justifyContent: 'center',
-                    }}
-                  >
-                    <span>{publishButtonText}</span>
-                  </Button>
 
                   <ResearchErrors
                     errors={errors}
@@ -322,7 +326,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
 
                   {store.activeResearchItem ? (
                     <ResearchEditorOverview
-                      sx={{ mt: 4 }}
+                      sx={{ mt: 2 }}
                       updates={getResearchUpdates(
                         store.activeResearchItem.updates || [],
                         store.activeResearchItem._id,
@@ -334,7 +338,7 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                       showBackToResearchButton={true}
                     />
                   ) : null}
-                </Box>
+                </Flex>
               </Flex>
               <ConfirmModal
                 isOpen={showDeleteModal}

diff --git a/src/pages/Research/Content/ResearchArticle.tsx b/src/pages/Research/Content/ResearchArticle.tsx
@@ -213,7 +213,14 @@ const ResearchArticle = observer(() => {
           ).length || 0
         }
       />
-      <Box sx={{ marginTop: 8, marginBottom: 4 }}>
+      <Flex
+        sx={{
+          flexDirection: 'column',
+          marginTop: 8,
+          marginBottom: 4,
+          gap: [4, 6],
+        }}
+      >
         {item &&
           getPublicUpdates(item, researchStore.activeUser).map(
             (update, index) => (
@@ -227,7 +234,7 @@ const ResearchArticle = observer(() => {
               />
             ),
           )}
-      </Box>
+      </Flex>
 
       <UserEngagementWrapper>
         <Box