From c67ca12f26e3305c5f343bfaf6040be92391cc5b Mon Sep 17 00:00:00 2001
From: Ben Furber <ben.furber@googlemail.com>
Date: Tue, 3 Sep 2024 14:26:54 +0100
Subject: [PATCH] feat: show clear when research update is draft

---
 .../src/integration/research/write.spec.ts    |  18 +-
 .../Content/Common/ResearchUpdate.form.tsx    |  60 ++--
 .../Research/Content/ResearchArticle.tsx      |  11 +-
 src/pages/Research/Content/ResearchUpdate.tsx | 288 ++++++++++--------
 4 files changed, 216 insertions(+), 161 deletions(-)

diff --git a/packages/cypress/src/integration/research/write.spec.ts b/packages/cypress/src/integration/research/write.spec.ts
index 7b09c2383f..0e8758aeb3 100644
--- 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,23 @@ 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.get('[data-cy=intro-title').click()
+      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
index 4b9a107ec1..4f35897e14 100644
--- a/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
+++ b/src/pages/Research/Content/Common/ResearchUpdate.form.tsx
@@ -258,13 +258,34 @@ 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={() => {
@@ -272,11 +293,15 @@ export const ResearchUpdateForm = observer((props: IProps) => {
                     }}
                     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
index 596001562b..dd681b43c2 100644
--- 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
diff --git a/src/pages/Research/Content/ResearchUpdate.tsx b/src/pages/Research/Content/ResearchUpdate.tsx
index 897fe4c636..266a7f2f34 100644
--- a/src/pages/Research/Content/ResearchUpdate.tsx
+++ b/src/pages/Research/Content/ResearchUpdate.tsx
@@ -6,6 +6,7 @@ import {
   DownloadStaticFile,
   ImageGallery,
   LinkifyText,
+  Tooltip,
   Username,
   VideoPlayer,
 } from 'oa-components'
@@ -41,6 +42,7 @@ const ResearchUpdate = (props: IProps) => {
     files,
     fileLink,
     images,
+    status,
     title,
     videoUrl,
   } = update
@@ -62,164 +64,190 @@ const ResearchUpdate = (props: IProps) => {
   }
 
   const displayNumber = updateIndex + 1
+  const isDraft = status == 'draft'
 
   return (
     <Flex
-      data-testid={`ResearchUpdate: ${_id}`}
-      data-cy={`ResearchUpdate: ${_id}`}
-      id={`update_${_id}`}
       sx={{
-        flexDirection: ['column', 'column', 'row'],
-        gap: [3, 6],
-        marginBottom: [6, 8],
+        flexDirection: 'column',
+        border: isDraft ? '2px dashed grey' : '',
+        borderRadius: 2,
+        padding: isDraft ? 2 : 0,
+        gap: 2,
       }}
     >
+      {isDraft && (
+        <>
+          <Button
+            data-cy="DraftUpdateLabel"
+            data-tip="Only visible to you (and other collaborators)"
+            sx={{ alignSelf: 'flex-start', backgroundColor: 'softblue' }}
+            variant="subtle"
+            small
+          >
+            Draft Update
+          </Button>
+          <Tooltip />
+        </>
+      )}
+
       <Flex
+        data-testid={`ResearchUpdate: ${_id}`}
+        data-cy={`ResearchUpdate: ${_id}`}
+        id={`update_${_id}`}
         sx={{
-          alignItems: 'center',
-          flexDirection: ['row', 'row', 'column'],
+          flexDirection: ['column', 'column', 'row'],
           gap: [2, 4],
         }}
       >
-        <Card sx={{ padding: [3, 4] }}>
-          <Heading sx={{ textAlign: 'center' }}>{displayNumber}</Heading>
-        </Card>
+        <Flex
+          sx={{
+            alignItems: 'center',
+            flexDirection: ['row', 'row', 'column'],
+            gap: [2, 4],
+          }}
+        >
+          <Card sx={{ padding: [3, 4] }}>
+            <Heading sx={{ textAlign: 'center' }}>{displayNumber}</Heading>
+          </Card>
 
-        {research && (
-          <ResearchLinkToUpdate research={research} update={update} />
-        )}
-      </Flex>
+          {research && (
+            <ResearchLinkToUpdate research={research} update={update} />
+          )}
+        </Flex>
 
-      <Flex
-        sx={{
-          width: '100%',
-          flexDirection: 'column',
-          flex: 9,
-          overflow: 'hidden',
-        }}
-      >
-        <Card>
-          <Flex sx={{ flexDirection: 'column' }} py={4} px={4}>
-            <Flex sx={{ flexDirection: ['column', 'row', 'row'] }}>
-              <Box sx={{ width: ['100%', '75%', '75%'] }}>
-                {contributors.length > 0 ? (
-                  <Box sx={{ mb: 2 }} data-testid="collaborator/creator">
-                    <Username user={contributors[0]} />
-                  </Box>
-                ) : null}
-
-                <Heading as="h2" sx={{ mb: 2 }}>
-                  {title}
-                </Heading>
-              </Box>
+        <Flex
+          sx={{
+            width: '100%',
+            flexDirection: 'column',
+            flex: 9,
+            overflow: 'hidden',
+          }}
+        >
+          <Card>
+            <Flex sx={{ flexDirection: 'column' }} py={4} px={4}>
+              <Flex sx={{ flexDirection: ['column', 'row', 'row'] }}>
+                <Box sx={{ width: ['100%', '75%', '75%'] }}>
+                  {contributors.length > 0 ? (
+                    <Box sx={{ mb: 2 }} data-testid="collaborator/creator">
+                      <Username user={contributors[0]} />
+                    </Box>
+                  ) : null}
 
-              <Flex
-                sx={{
-                  flexDirection: ['row', 'column', 'column'],
-                  width: ['100%', '25%', '25%'],
-                  justifyContent: 'space-between',
-                  alignItems: 'flex-end',
-                }}
-              >
-                <Flex sx={{ flexDirection: ['column'] }}>
-                  <Text
-                    variant="auxiliary"
-                    sx={{
-                      textAlign: ['left', 'right', 'right'],
-                    }}
-                  >
-                    {'created ' + formattedCreateDatestamp}
-                  </Text>
-
-                  {formattedCreateDatestamp !== formattedModifiedDatestamp && (
+                  <Heading as="h2" sx={{ mb: 2 }}>
+                    {title}
+                  </Heading>
+                </Box>
+
+                <Flex
+                  sx={{
+                    flexDirection: ['row', 'column', 'column'],
+                    width: ['100%', '25%', '25%'],
+                    justifyContent: 'space-between',
+                    alignItems: 'flex-end',
+                  }}
+                >
+                  <Flex sx={{ flexDirection: ['column'] }}>
                     <Text
                       variant="auxiliary"
                       sx={{
                         textAlign: ['left', 'right', 'right'],
                       }}
                     >
-                      {'edited ' + formattedModifiedDatestamp}
+                      {'created ' + formattedCreateDatestamp}
                     </Text>
+
+                    {formattedCreateDatestamp !==
+                      formattedModifiedDatestamp && (
+                      <Text
+                        variant="auxiliary"
+                        sx={{
+                          textAlign: ['left', 'right', 'right'],
+                        }}
+                      >
+                        {'edited ' + formattedModifiedDatestamp}
+                      </Text>
+                    )}
+                  </Flex>
+                  {/* Show edit button for the creator of the research OR a super-admin */}
+                  {isEditable && (
+                    <Link to={'/research/' + slug + '/edit-update/' + _id}>
+                      <Button
+                        type="button"
+                        variant="primary"
+                        data-cy="edit-update"
+                        ml="auto"
+                        mt={[0, 2, 2]}
+                      >
+                        Edit
+                      </Button>
+                    </Link>
                   )}
                 </Flex>
-                {/* Show edit button for the creator of the research OR a super-admin */}
-                {isEditable && (
-                  <Link to={'/research/' + slug + '/edit-update/' + _id}>
-                    <Button
-                      type="button"
-                      variant="primary"
-                      data-cy="edit-update"
-                      ml="auto"
-                      mt={[0, 2, 2]}
-                    >
-                      Edit
-                    </Button>
-                  </Link>
-                )}
               </Flex>
+              <Box>
+                <Text
+                  mt={3}
+                  variant="paragraph"
+                  color={'grey'}
+                  sx={{ whiteSpace: 'pre-line' }}
+                >
+                  <LinkifyText>{description}</LinkifyText>
+                </Text>
+              </Box>
             </Flex>
-            <Box>
-              <Text
+            <Box sx={{ width: '100%' }}>
+              {videoUrl ? (
+                <VideoPlayer videoUrl={videoUrl} />
+              ) : (
+                <ImageGallery
+                  images={formatImagesForGallery(images) as any}
+                  allowPortrait={true}
+                />
+              )}
+            </Box>
+            {((files && files.length > 0) || fileLink) && (
+              <Flex
+                className="file-container"
                 mt={3}
-                variant="paragraph"
-                color={'grey'}
-                sx={{ whiteSpace: 'pre-line' }}
+                sx={{ flexDirection: 'column', px: 4 }}
               >
-                <LinkifyText>{description}</LinkifyText>
-              </Text>
-            </Box>
-          </Flex>
-          <Box sx={{ width: '100%' }}>
-            {videoUrl ? (
-              <VideoPlayer videoUrl={videoUrl} />
-            ) : (
-              <ImageGallery
-                images={formatImagesForGallery(images) as any}
-                allowPortrait={true}
-              />
+                {fileLink && (
+                  <DownloadFileFromLink
+                    handleClick={handleDownloadClick}
+                    link={fileLink}
+                    redirectToSignIn={
+                      !loggedInUser ? redirectToSignIn : undefined
+                    }
+                  />
+                )}
+                {files &&
+                  files
+                    .filter(Boolean)
+                    .map(
+                      (file, index) =>
+                        file && (
+                          <DownloadStaticFile
+                            allowDownload
+                            file={file}
+                            key={file ? file.name : `file-${index}`}
+                            handleClick={handleDownloadClick}
+                            redirectToSignIn={
+                              !loggedInUser ? redirectToSignIn : undefined
+                            }
+                          />
+                        ),
+                    )}
+                <DownloadCounter total={downloadCount} />
+              </Flex>
             )}
-          </Box>
-          {((files && files.length > 0) || fileLink) && (
-            <Flex
-              className="file-container"
-              mt={3}
-              sx={{ flexDirection: 'column', px: 4 }}
-            >
-              {fileLink && (
-                <DownloadFileFromLink
-                  handleClick={handleDownloadClick}
-                  link={fileLink}
-                  redirectToSignIn={
-                    !loggedInUser ? redirectToSignIn : undefined
-                  }
-                />
-              )}
-              {files &&
-                files
-                  .filter(Boolean)
-                  .map(
-                    (file, index) =>
-                      file && (
-                        <DownloadStaticFile
-                          allowDownload
-                          file={file}
-                          key={file ? file.name : `file-${index}`}
-                          handleClick={handleDownloadClick}
-                          redirectToSignIn={
-                            !loggedInUser ? redirectToSignIn : undefined
-                          }
-                        />
-                      ),
-                  )}
-              <DownloadCounter total={downloadCount} />
-            </Flex>
-          )}
-          <ResearchUpdateDiscussion
-            update={update}
-            research={research}
-            showComments={showComments}
-          />
-        </Card>
+            <ResearchUpdateDiscussion
+              update={update}
+              research={research}
+              showComments={showComments}
+            />
+          </Card>
+        </Flex>
       </Flex>
     </Flex>
   )