PM-1499 - make sure canceled & fulfilled requests are not editable

src/apps/copilots/src/pages/copilot-requests/CopilotRequestsPage.module.scss

@@ -27,3 +27,8 @@
     display: block;
     white-space: pre-wrap;
 }
+
+.disabled {
+    opacity: 0.5;
+    pointer-events: none;
+}

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

@@ -1,6 +1,7 @@
 import { FC, useCallback, useContext, useMemo } from 'react'
 import { find } from 'lodash'
 import { NavigateFunction, Params, useNavigate, useParams } from 'react-router-dom'
+import classNames from 'classnames'
 
 import {
     Button,
@@ -58,9 +59,15 @@ const CopilotTableActions: FC<{request: CopilotRequest}> = props => {
         navigate(copilotRoutesMap.CopilotRequestDetails.replace(':requestId', `${props.request.id}`))
     }, [navigate, props.request.id])
 
+    const isEditable = useMemo(() => !['canceled', 'fulfilled'].includes(props.request.status), [props.request.status])
+
     const editRequest = useCallback(() => {
+        if (!isEditable) {
+            return
+        }
+
         navigate(copilotRoutesMap.CopilotRequestEditForm.replace(':requestId', `${props.request.id}`))
-    }, [navigate, props.request.id])
+    }, [navigate, props.request.id, isEditable])
 
     const copilotOpportunityId = props.request.opportunity?.id
 
@@ -82,13 +89,20 @@ const CopilotTableActions: FC<{request: CopilotRequest}> = props => {
                         <IconSolid.EyeIcon className='icon-lg' />
                     </Tooltip>
                 </div>
-                <div className={styles.viewRequestIcon} onClick={editRequest}>
-                    <Tooltip
-                        content='Edit Copilot Request'
-                        place='top'
-                    >
-                        <IconSolid.PencilIcon className='icon-lg' />
-                    </Tooltip>
+                <div
+                    className={classNames(styles.viewRequestIcon, !isEditable && styles.disabled)}
+                    onClick={editRequest}
+                >
+                    {isEditable ? (
+                        <Tooltip
+                            content='Edit Copilot Request'
+                            place='top'
+                        >
+                            <IconSolid.PencilIcon className='icon-lg' />
+                        </Tooltip>
+                    ) : (
+                        <IconSolid.PencilIcon className={classNames('icon-lg', styles.disabled)} />
+                    )}
                 </div>
                 {props.request.status === 'approved'
                 && (