Provide context

- Provide links for viewing issues and pull requests in GitHub

.changeset/dirty-dolls-call.md

@@ -0,0 +1,7 @@
+---
+'gov4git-desktop-app': minor
+---
+
+Provide context
+
+- Provide links for viewing issues and pull requests in GitHub

src/renderer/src/components/IssueBallot2.styles.ts

@@ -82,4 +82,7 @@ export const useIssueBallotStyles = makeStyles({
   down: {
     color: gov4GitTokens.colorPaletteRedForeground1,
   },
+  issueLinkArea: {
+    ...shorthands.padding('8px', 0, 0, 0),
+  },
 })

src/renderer/src/components/IssueBallot2.tsx

@@ -28,6 +28,7 @@ import { useCatchError } from '../hooks/useCatchError.js'
 import { eventBus } from '../lib/eventBus.js'
 import { formatDecimal } from '../lib/index.js'
 import { ballotService } from '../services/index.js'
+import { configAtom } from '../state/config.js'
 import { userAtom } from '../state/user.js'
 import { useButtonStyles } from '../styles/buttons.js'
 import { useIssueBallotStyles } from './IssueBallot2.styles.js'
@@ -50,6 +51,7 @@ export const IssueBallot2: FC<IssueBallotProps> = function IssueBallot2({
   const buttonStyles = useButtonStyles()
   const [dialogOpen, setDialogOpen] = useState(false)
   const user = useAtomValue(userAtom)
+  const config = useAtomValue(configAtom)
   const [fetchingNewBallot, setFetchingNewBallot] = useState(false)
   const [voteError, setVoteError] = useState<string | null>(null)
 
@@ -64,6 +66,11 @@ export const IssueBallot2: FC<IssueBallotProps> = function IssueBallot2({
     )
   }, [setFetchingNewBallot, ballot])
 
+  const githubLink = useMemo(() => {
+    if (config == null) return null
+    const linkComponent = ballot.identifier.split('/').slice(1).join('/')
+    return `${config.project_repo}/${linkComponent}`
+  }, [config, ballot])
   const maxScore = useMemo(() => {
     if (user == null) return 0
     return (
@@ -315,6 +322,13 @@ export const IssueBallot2: FC<IssueBallotProps> = function IssueBallot2({
               }),
             }}
           ></div>
+          {githubLink != null && (
+            <div className={styles.issueLinkArea}>
+              <a href={githubLink} target="_blank" rel="noreferrer">
+                View in GitHub
+              </a>
+            </div>
+          )}
         </div>
         {/* {user?.is_maintainer && (
         <div>

src/renderer/src/components/Issues.styles.ts

@@ -0,0 +1,9 @@
+import { makeStyles, shorthands } from '@fluentui/react-components'
+
+export const useIssuesStyles = makeStyles({
+  controls: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    ...shorthands.padding(0, '4px', '4px', '4px'),
+  },
+})

src/renderer/src/components/Issues.tsx

@@ -1,36 +1,45 @@
 import { Card } from '@fluentui/react-card'
 import { useAtomValue } from 'jotai'
-import { type FC, useEffect } from 'react'
+import { type FC, useMemo } from 'react'
 
 import { ballotIssuesAtom } from '../state/ballots.js'
+import { configAtom } from '../state/config.js'
 import { useHeadingsStyles } from '../styles/headings.js'
 import { IssueBallot2 } from './IssueBallot2.js'
+import { useIssuesStyles } from './Issues.styles.js'
 
 export const Issues: FC = function Issues() {
   const ballots = useAtomValue(ballotIssuesAtom)
   const headingStyles = useHeadingsStyles()
+  const styles = useIssuesStyles()
+  const config = useAtomValue(configAtom)
 
-  useEffect(() => {
-    console.log(ballots)
-  }, [ballots])
-
-  if (ballots == null) return <></>
-  if (ballots.length === 0)
-    return (
-      <>
-        <h1 className={headingStyles.pageHeading}>Prioritize Issues</h1>
-        <Card>
-          <p>No open ballots for issues to display at this time.</p>
-        </Card>
-      </>
-    )
+  const issuesLink = useMemo(() => {
+    if (config == null) return null
+    return `${config.project_repo}/issues?q=is:open is:issue label:gov4git:prioritize`
+  }, [config])
 
   return (
     <>
       <h1 className={headingStyles.pageHeading}>Prioritize Issues</h1>
-      {ballots.map((ballot) => {
-        return <IssueBallot2 key={ballot.identifier} ballot={ballot} />
-      })}
+
+      <div className={styles.controls}>
+        {issuesLink != null && (
+          <a href={issuesLink} target="_blank" rel="noreferrer">
+            View all issues in GitHub
+          </a>
+        )}
+      </div>
+
+      {(ballots == null || ballots.length === 0) && (
+        <Card>
+          <p>No open ballots for issues to display at this time.</p>
+        </Card>
+      )}
+      {ballots != null &&
+        ballots.map((ballot) => {
+          return <IssueBallot2 key={ballot.identifier} ballot={ballot} />
+        })}
     </>
   )
 }

src/renderer/src/components/PullRequests.styles.ts

@@ -0,0 +1,9 @@
+import { makeStyles, shorthands } from '@fluentui/react-components'
+
+export const usePullRequestsStyles = makeStyles({
+  controls: {
+    display: 'flex',
+    justifyContent: 'flex-end',
+    ...shorthands.padding(0, '4px', '4px', '4px'),
+  },
+})

src/renderer/src/components/PullRequests.tsx

@@ -1,31 +1,44 @@
 import { Card } from '@fluentui/react-card'
 import { useAtomValue } from 'jotai'
-import type { FC } from 'react'
+import { type FC, useMemo } from 'react'
 
 import { ballotPullRequestsAtom } from '../state/ballots.js'
+import { configAtom } from '../state/config.js'
 import { useHeadingsStyles } from '../styles/headings.js'
 import { IssueBallot2 } from './IssueBallot2.js'
+import { usePullRequestsStyles } from './PullRequests.styles.js'
 
 export const PullRequests: FC = function PullRequests() {
   const ballots = useAtomValue(ballotPullRequestsAtom)
   const headingStyles = useHeadingsStyles()
-  if (ballots == null) return <></>
-  if (ballots.length === 0)
-    return (
-      <>
-        <h1 className={headingStyles.pageHeading}>Prioritize Pull Requests</h1>
-        <Card>
-          <p>No open ballots for pull requests to display at this time.</p>
-        </Card>
-      </>
-    )
+  const config = useAtomValue(configAtom)
+  const styles = usePullRequestsStyles()
+  const issuesLink = useMemo(() => {
+    if (config == null) return null
+    return `${config.project_repo}/pulls?q=is:open is:pr label:gov4git:prioritize`
+  }, [config])
 
   return (
     <>
-      <h1 className={headingStyles.pageHeading}>Prioritize Pull Requests</h1>
-      {ballots.map((ballot) => {
-        return <IssueBallot2 key={ballot.identifier} ballot={ballot} />
-      })}
+      <h1 className={headingStyles.pageHeading}>Prioritize Issues</h1>
+
+      <div className={styles.controls}>
+        {issuesLink != null && (
+          <a href={issuesLink} target="_blank" rel="noreferrer">
+            View all pull requests in GitHub
+          </a>
+        )}
+      </div>
+
+      {(ballots == null || ballots.length === 0) && (
+        <Card>
+          <p>No open ballots for pull requests to display at this time.</p>
+        </Card>
+      )}
+      {ballots != null &&
+        ballots.map((ballot) => {
+          return <IssueBallot2 key={ballot.identifier} ballot={ballot} />
+        })}
     </>
   )
 }