Merge pull request #1066 from topcoder-platform/PM-1069

PM-1069 Copilot request UI improvements

Author: himaniraghav3

src/apps/copilots/src/models/CopilotRequest.ts

@@ -2,6 +2,8 @@ import { UserSkill } from '~/libs/core'
 
 import { ProjectType } from '../constants'
 
+import { CopilotOpportunity } from './CopilotOpportunity'
+
 export interface CopilotRequest {
     id: number,
     projectId: string,
@@ -19,4 +21,5 @@ export interface CopilotRequest {
     status: string,
     tzRestrictions: 'yes' | 'no',
     createdAt: Date,
+    opportunity?: CopilotOpportunity,
 }

src/apps/copilots/src/pages/copilot-requests/copilot-request-modal/CopilotRequestModal.tsx

@@ -1,11 +1,12 @@
 import { FC, useCallback, useMemo } from 'react'
 
-import { BaseModal, Button, useConfirmationModal } from '~/libs/ui'
+import { BaseModal, Button, IconSolid, useConfirmationModal } from '~/libs/ui'
 import { textFormatDateLocaleShortString } from '~/libs/shared'
 
 import { CopilotRequest } from '../../../models/CopilotRequest'
 import { Project } from '../../../models/Project'
 import { approveCopilotRequest } from '../../../services/copilot-requests'
+import { copilotRoutesMap } from '../../../copilots.routes'
 
 import styles from './CopilotRequestModal.module.scss'
 
@@ -45,7 +46,7 @@ const CopilotRequestModal: FC<CopilotRequestModalProps> = props => {
             onClose={props.onClose}
             open
             size='lg'
-            title='Copilot Opportunity'
+            title='Copilot Request'
             buttons={props.request.status === 'new' && (
                 <>
                     <Button primary onClick={confirmApprove} label='Approve Request' />
@@ -58,6 +59,18 @@ const CopilotRequestModal: FC<CopilotRequestModalProps> = props => {
                     <div>Project</div>
                     <div>{props.project?.name}</div>
                 </div>
+                <div className={styles.detailsLine}>
+                    <div>Opportunity details</div>
+                    <a
+                        href={copilotRoutesMap.CopilotOpportunityDetails
+                            .replace(':opportunityId', `${props.request.opportunity?.id}`)}
+                        target='_blank'
+                        rel='noopener noreferrer'
+                        className={styles.iconLink}
+                    >
+                        <IconSolid.ExternalLinkIcon className='icon-lg' />
+                    </a>
+                </div>
                 <div className={styles.detailsLine}>
                     <div>Request Status</div>
                     <div>{props.request.status}</div>

src/apps/copilots/src/pages/copilot-requests/index.tsx

@@ -12,9 +12,11 @@ import {
     PageTitle,
     Table,
     TableColumn,
+    Tooltip,
     useConfirmationModal,
 } from '~/libs/ui'
 import { profileContext, ProfileContextData, UserRole } from '~/libs/core'
+import { EnvironmentConfig } from '~/config'
 
 import { ProjectTypeLabels } from '../../constants'
 import { approveCopilotRequest, CopilotRequestsResponse, useCopilotRequests } from '../../services/copilot-requests'
@@ -56,13 +58,38 @@ const CopilotTableActions: FC<{request: CopilotRequest}> = props => {
         navigate(copilotRoutesMap.CopilotRequestDetails.replace(':requestId', `${props.request.id}`))
     }, [navigate, props.request.id])
 
+    const copilotOpportunityId = props.request.opportunity?.id
+
+    const navigateToOpportunity = useCallback(() => {
+        const url = copilotRoutesMap.CopilotOpportunityDetails
+            .replace(':opportunityId', `${copilotOpportunityId}`)
+        window.open(url, '_blank', 'noopener,noreferrer')
+    }, [copilotOpportunityId])
+
     return (
         <>
             {confirmModal.modal}
             <div className={styles.actionButtons}>
                 <div className={styles.viewRequestIcon} onClick={viewRequest}>
-                    <IconSolid.EyeIcon className='icon-lg' />
+                    <Tooltip
+                        content='View Copilot Request'
+                        place='top'
+                    >
+                        <IconSolid.EyeIcon className='icon-lg' />
+                    </Tooltip>
                 </div>
+                {props.request.status === 'approved'
+                && (
+                    <div className={styles.viewRequestIcon} onClick={navigateToOpportunity}>
+                        <Tooltip
+                            content='View Copilot Opportunity'
+                            place='top'
+                        >
+                            <IconSolid.ExternalLinkIcon className='icon-lg' />
+                        </Tooltip>
+                    </div>
+                )}
+
                 {props.request.status === 'new' && (
                     <>
                         <Button icon={IconCheck} primary size='sm' onClick={confirmApprove} />
@@ -81,43 +108,6 @@ const CopilotTableActions: FC<{request: CopilotRequest}> = props => {
     )
 }
 
-const tableColumns: TableColumn<CopilotRequest>[] = [
-    {
-        label: 'Project',
-        propertyName: 'projectName',
-        type: 'text',
-    },
-    {
-        label: 'Type',
-        propertyName: 'type',
-        type: 'text',
-    },
-    {
-        label: 'Status',
-        propertyName: 'status',
-        type: 'text',
-    },
-    {
-        label: '',
-        propertyName: '',
-        type: 'text',
-    },
-    {
-        defaultSortDirection: 'desc',
-        isDefaultSort: true,
-        label: 'Created At',
-        propertyName: 'createdAt',
-        type: 'date',
-    },
-    {
-        label: '',
-        renderer: (request: CopilotRequest) => (
-            <CopilotTableActions request={request} />
-        ),
-        type: 'action',
-    },
-]
-
 const CopilotRequestsPage: FC = () => {
     const navigate: NavigateFunction = useNavigate()
     const routeParams: Params<string> = useParams()
@@ -153,6 +143,64 @@ const CopilotRequestsPage: FC = () => {
         Object.assign(all, { [c.id]: c })
     ), {} as {[key: string]: Project}), [projects])
 
+    const handleLinkClick = useCallback((e: React.MouseEvent<HTMLAnchorElement>) => {
+        e.stopPropagation()
+    }, [])
+
+    const tableColumns: TableColumn<CopilotRequest>[] = [
+        {
+            label: 'Project',
+            propertyName: 'projectName',
+            renderer: (copilotRequest: CopilotRequest) => {
+                const projectName = projectsMap[copilotRequest.projectId]?.name
+                const projectLink = `
+                ${EnvironmentConfig.ADMIN.WORK_MANAGER_URL}/projects/${copilotRequest.projectId}/challenges
+                `
+                return (
+                    <a
+                        href={projectLink}
+                        className={styles.title}
+                        target='_blank'
+                        rel='noreferrer'
+                        onClick={handleLinkClick}
+                    >
+                        {projectName}
+                    </a>
+                )
+            },
+            type: 'element',
+        },
+        {
+            label: 'Type',
+            propertyName: 'type',
+            type: 'text',
+        },
+        {
+            label: 'Status',
+            propertyName: 'status',
+            type: 'text',
+        },
+        {
+            label: '',
+            propertyName: '',
+            type: 'text',
+        },
+        {
+            defaultSortDirection: 'desc',
+            isDefaultSort: true,
+            label: 'Created At',
+            propertyName: 'createdAt',
+            type: 'date',
+        },
+        {
+            label: '',
+            renderer: (request: CopilotRequest) => (
+                <CopilotTableActions request={request} />
+            ),
+            type: 'action',
+        },
+    ]
+
     const tableData = useMemo(() => requests.map(request => ({
         ...request,
         projectName: projectsMap[request.projectId]?.name,