editor and topbar tests

Former-commit-id: 7331382

frontend/app/src/components/__tests__/topbar.cy.tsx

@@ -0,0 +1,79 @@
+import {Account, Document} from '@app/client'
+import {queryKeys} from '@app/hooks'
+import {MainPageProviders, mountWithAccount} from '@app/test/utils'
+import {Topbar} from '@components/topbar'
+
+describe('Topbar', () => {
+  it('default render', () => {
+    let {render, client} = mountWithAccount()
+    render(
+      <MainPageProviders client={client}>
+        <Topbar />
+      </MainPageProviders>,
+    )
+  })
+
+  it('render Draft Title and Author', () => {
+    let {render, client} = mountWithAccount()
+    let date = new Date()
+
+    let draft: Document = {
+      id: 'foo',
+      title: 'test demo',
+      subtitle: 'test subtitle',
+      author: 'authortest',
+      content: '',
+      updateTime: date,
+      createTime: date,
+      publishTime: date,
+      children: [],
+    }
+
+    let author: Account = {
+      id: 'authortest',
+      profile: {
+        alias: 'test demo user',
+        email: '[email protected]',
+        bio: 'demo',
+      },
+      devices: {
+        d1: {
+          peerId: 'd1',
+        },
+      },
+    }
+
+    client.setQueryData<Document>([queryKeys.GET_DRAFT, 'foo'], draft)
+
+    client.setQueryData<Account>([queryKeys.GET_ACCOUNT, 'authortest'], author)
+
+    render(
+      <MainPageProviders client={client} mainPageContext={{document: draft}}>
+        <Topbar />
+      </MainPageProviders>,
+    )
+      .get('[data-testid="topbar-title"]')
+      .contains(draft.title)
+      .get('[data-testid="topbar-author"]')
+      .contains(author.profile!.alias)
+  })
+
+  it('navigation button should work', () => {
+    let {render, client} = mountWithAccount()
+    let back = cy.stub()
+    let forward = cy.stub()
+    render(
+      <MainPageProviders client={client}>
+        <Topbar back={back} forward={forward} />
+      </MainPageProviders>,
+    )
+      .get("[data-testid='history-back']")
+      .click()
+      .get("[data-testid='history-forward']")
+      .click()
+      .then(() => {
+        expect(back).to.have.been.calledOnce
+        expect(forward).to.have.been.calledOnce
+      })
+  })
+})

frontend/app/src/components/topbar.tsx

@@ -1,5 +1,6 @@
 import {getTitleFromContent} from '@app/editor/use-editor-draft'
-import {useFiles, useMainPage} from '@app/main-page-context'
+import {useAccount} from '@app/hooks'
+import {useMainPage} from '@app/main-page-context'
 import {css, styled} from '@app/stitches.config'
 import {Text} from '@components/text'
 import {invoke} from '@tauri-apps/api'
@@ -46,10 +47,18 @@ export const topbarSection = css({
   alignItems: 'center',
 })
 
-export function Topbar() {
+type TopbarProps = {
+  back?: () => void
+  forward: () => void
+}
+
+export function Topbar({
+  back = window.history.back,
+  forward = window.history.forward,
+}: TopbarProps) {
   let mainPage = useMainPage()
   let [mainState] = useActor(mainPage)
-  let files = useFiles()
+  let {data, isSuccess} = useAccount(mainState.context.document?.author)
 
   async function onCreateDraft() {
     await invoke('open_in_new_window', {url: '/new'})
@@ -59,7 +68,7 @@ export function Topbar() {
     mainState.context.library.send('LIBRARY.TOGGLE')
   }
 
-  let title = getDocumentTitle(mainState.context.currentDocument)
+  let title = getDocumentTitle(mainState.context.document)
   console.log('Current Location: ', window.location.pathname)
 
   return (
@@ -68,27 +77,55 @@ export function Topbar() {
       <Box css={{display: 'flex'}} {...draggableProps}>
         <TopbarButton
           color="muted"
+          data-testid="history-back"
           onClick={(e) => {
             e.preventDefault()
-            window.history.back()
+            back()
           }}
         >
           <Icon name="ArrowChevronLeft" color="muted" size="2" />
         </TopbarButton>
         <TopbarButton
           color="muted"
+          data-testid="history-forward"
           onClick={(e) => {
             e.preventDefault()
-            window.history.forward()
+            forward()
           }}
         >
           <Icon name="ArrowChevronRight" color="muted" size="2" />
         </TopbarButton>
       </Box>
-      <Box css={{flex: 1}} data-tauri-drag-region>
-        <Text size="3" fontWeight="medium" data-tauri-drag-region>
+      <Box
+        css={{flex: 1, display: 'flex', alignItems: 'baseline', gap: '$2'}}
+        data-tauri-drag-region
+      >
+        <Text
+          size="3"
+          fontWeight="medium"
+          aria-label="Document Title"
+          data-testid="topbar-title"
+          data-tauri-drag-region
+        >
           {title}
         </Text>
+        <Text size="1" color="muted">
+          by
+        </Text>
+        {data && isSuccess ? (
+          <Text
+            size="1"
+            color="muted"
+            css={{textDecoration: 'underline'}}
+            data-testid="topbar-author"
+          >
+            {data.profile?.alias}
+          </Text>
+        ) : (
+          <Text size="1" color="muted" css={{textDecoration: 'underline'}}>
+            ...
+          </Text>
+        )}
       </Box>
       {/* <Box>other actions</Box> */}
       <TopbarButton onClick={toggleLibrary} data-tauri-drag-region>
@@ -111,12 +148,12 @@ export function Topbar() {
   )
 }
 
-function getDocumentTitle(currentDocument: any) {
-  let titleText = currentDocument?.content
+function getDocumentTitle(document: any) {
+  let titleText = document?.content
     ? getTitleFromContent({
-        children: currentDocument.content,
+        children: document.content,
       })
-    : currentDocument?.title ?? ''
+    : document?.title ?? ''
 
   return titleText.length < 50 ? titleText : `${titleText.substring(0, 49)}...`
 }

frontend/app/src/main-page-machine.ts

@@ -134,7 +134,7 @@ export type MainPageContext = {
     version: string | null
     blockId: string | null
   }
-  currentDocument: Document | null
+  document: Document | null
   files: ActorRefFrom<ReturnType<typeof createFilesMachine>>
   drafts: ActorRefFrom<ReturnType<typeof createDraftsMachine>>
   library: ActorRefFrom<typeof libraryMachine>
@@ -212,7 +212,7 @@ export function createMainPageMachine(client: QueryClient) {
           version: null,
           blockId: null,
         },
-        currentDocument: null,
+        document: null,
         files: spawn(createFilesMachine(client), 'files'),
         drafts: spawn(createDraftsMachine(client), 'drafts'),
         library: spawn(libraryMachine, 'library'),
@@ -369,10 +369,10 @@ export function createMainPageMachine(client: QueryClient) {
           context.drafts.send('RECONCILE')
         },
         setCurrentDocument: assign({
-          currentDocument: (_, event) => event.document
+          document: (_, event) => event.document
         }),
         clearCurrentDocument: assign({
-          currentDocument: (c) => null
+          document: (c) => null
         }),
         setDraftParams: assign({
           params: (_, e, meta) => {

frontend/app/src/pages/__tests__/editor-page.cy.tsx

@@ -26,7 +26,7 @@ describe('Editor Page', () => {
       },
     }
 
-    client.setQueryData<Document>([queryKeys.GET_DRAFT, 'foo'], {
+    let draft: Document = {
       id: 'foo',
       title: 'test demo',
       subtitle: 'test subtitle',
@@ -36,7 +36,9 @@ describe('Editor Page', () => {
       createTime: date,
       publishTime: date,
       children: [],
-    })
+    }
+
+    client.setQueryData<Document>([queryKeys.GET_DRAFT, 'foo'], draft)
 
     client.setQueryData<Publication>(
       [queryKeys.GET_PUBLICATION, 'foo', 1],
@@ -63,7 +65,10 @@ describe('Editor Page', () => {
     render(
       <MainPageProviders
         client={client}
-        mainPageContext={{params: {docId: 'foo', blockId: 'block'}}}
+        mainPageContext={{
+          params: {docId: 'foo', blockId: 'block', version: null},
+          document: draft,
+        }}
       >
         <EditorPage
           editor={elEditor}

frontend/app/src/pages/publication.tsx

@@ -63,7 +63,7 @@ export default function Publication() {
     }
   }, [docId])
 
-  async function handleUpdate() {
+  async function handleEdit() {
     try {
       const d = await createDraft(docId)
       if (d?.id) {
@@ -128,28 +128,60 @@ export default function Publication() {
           </Text>
         </Box>
         <Box className={footerButtonsStyles()}>
-          <Button
-            size="1"
-            variant="outlined"
-            disabled={state.hasTag('pending')}
-            data-testid="submit-review"
-            onClick={() => {
-              console.log('Review: IMPLEMENT ME!')
-            }}
-          >
-            Review
-          </Button>
           <Button
             variant="outlined"
             size="1"
             disabled={state.hasTag('pending')}
-            data-testid="submit-reply"
+            data-testid="submit-edit"
             onClick={() => {
-              console.log('Reply: IMPLEMENT ME!')
+              console.log('Send: IMPLEMENT ME!')
             }}
           >
-            Reply
+            Send
           </Button>
+          {state.context.canUpdate ? (
+            <>
+              <Button
+                color="success"
+                size="1"
+                disabled={state.hasTag('pending')}
+                data-testid="submit-edit"
+                onClick={handleEdit}
+              >
+                Edit
+              </Button>
+            </>
+          ) : (
+            <>
+              <TippingModal
+                publicationId={state.context.publication?.document.id}
+                accountId={state.context.publication?.document.author}
+                visible={!state.context.canUpdate}
+              />
+              <Button
+                size="1"
+                variant="outlined"
+                disabled={state.hasTag('pending')}
+                data-testid="submit-review"
+                onClick={() => {
+                  console.log('Review: IMPLEMENT ME!')
+                }}
+              >
+                Review
+              </Button>
+              <Button
+                variant="outlined"
+                size="1"
+                disabled={state.hasTag('pending')}
+                data-testid="submit-reply"
+                onClick={() => {
+                  console.log('Reply: IMPLEMENT ME!')
+                }}
+              >
+                Reply
+              </Button>
+            </>
+          )}
         </Box>
       </Box>
     </>
@@ -497,7 +529,7 @@ function TippingModal({
       <PopoverPrimitive.Trigger asChild>
         <Button
           size="1"
-          variant="ghost"
+          variant="outlined"
           color="success"
           onClick={() => {
             send('OPEN')