displays info message with link to latest change request

frontend/web/components/ExistingChangeRequestAlert.tsx

@@ -1,54 +1,97 @@
 import { FC, useRef } from 'react'
 import { useGetChangeRequestsQuery } from 'common/services/useChangeRequest'
-import WarningMessage from './WarningMessage'
 import moment from 'moment'
+import InfoMessage from './InfoMessage'
+import { RouterChildContext } from 'react-router-dom'
+import Button from './base/forms/Button'
 
 type ExistingChangeRequestAlertType = {
+  projectId: number | string
   environmentId: string
   featureId: number
   className?: string
+  history: RouterChildContext['router']['history']
 }
 
 const ExistingChangeRequestAlert: FC<ExistingChangeRequestAlertType> = ({
   className,
   environmentId,
   featureId,
+  history,
+  projectId,
 }) => {
-  const { data } = useGetChangeRequestsQuery({
-    committed: false,
-    environmentId,
-    feature_id: featureId,
-  })
   const date = useRef(moment().toISOString())
-  const { data: scheduledChangeRequests } = useGetChangeRequestsQuery({
-    environmentId,
-    feature_id: featureId,
-    live_from_after: date.current,
-  })
-
-  if (scheduledChangeRequests?.results?.length) {
-    return (
-      <div className={className}>
-        <WarningMessage
-          warningMessage={
-            'You have scheduled changes upcoming for this feature, please check the Scheduling page.'
-          }
-        />
-      </div>
+
+  const { data: changeRequests } = useGetChangeRequestsQuery(
+    {
+      committed: false,
+      environmentId,
+      feature_id: featureId,
+    },
+    { refetchOnMountOrArgChange: true },
+  )
+
+  const { data: scheduledChangeRequests } = useGetChangeRequestsQuery(
+    {
+      environmentId,
+      feature_id: featureId,
+      live_from_after: date.current,
+    },
+    { refetchOnMountOrArgChange: true },
+  )
+
+  const handleNavigate = () => {
+    const changes = scheduledChangeRequests?.results?.length
+      ? scheduledChangeRequests?.results
+      : changeRequests?.results
+    const latestChangeRequest = changes?.at(-1)?.id
+    closeModal()
+    history.push(
+      `/project/${projectId}/environment/${environmentId}/change-requests/${latestChangeRequest}`,
     )
   }
-  if (data?.results?.length) {
-    return (
-      <div className={className}>
-        <WarningMessage
-          warningMessage={
-            'You have open change requests for this feature, please check the Change Requests page.'
-          }
-        />
-      </div>
-    )
+
+  const getRequestChangeInfoText = (
+    hasScheduledChangeRequests: boolean,
+    hasChangeRequests: boolean,
+  ) => {
+    if (hasScheduledChangeRequests) {
+      return [
+        'You have scheduled changes upcoming for this feature.',
+        'to view your scheduled changes.',
+      ]
+    }
+
+    if (hasChangeRequests) {
+      return [
+        'You have open change requests for this feature.',
+        'to view your requested changes.',
+      ]
+    }
   }
-  return null
+
+  const requestChangeInfoText = getRequestChangeInfoText(
+    !!scheduledChangeRequests?.results?.length,
+    !!changeRequests?.results?.length,
+  )
+
+  if (!requestChangeInfoText?.length) {
+    return null
+  }
+
+  return (
+    <div className={className}>
+      <InfoMessage>
+        <span>
+          {requestChangeInfoText[0]} Click{' '}
+          <Button onClick={handleNavigate} theme='text'>
+            here
+          </Button>{' '}
+          {requestChangeInfoText[1]}
+        </span>
+      </InfoMessage>
+    </div>
+  )
 }
 
 export default ExistingChangeRequestAlert

frontend/web/components/modals/CreateFlag.js

@@ -750,8 +750,10 @@ const CreateFlag = class extends Component {
           {!!isEdit && (
             <ExistingChangeRequestAlert
               className='mb-4'
+              projectId={this.props.projectId}
               featureId={projectFlag.id}
               environmentId={this.props.environmentId}
+              history={this.props.history}
             />
           )}
           {!isEdit && (