feat: Show new version warning in change requests (#4153)

frontend/web/components/NewVersionWarning.tsx

@@ -0,0 +1,39 @@
+import { FC, useMemo } from 'react'
+import { useGetFeatureVersionsQuery } from 'common/services/useFeatureVersion'
+import moment from 'moment'
+import ErrorMessage from './ErrorMessage' // we need this to make JSX compile
+
+type NewVersionWarningType = {
+  date: string
+  featureId: number
+  environmentId: string
+}
+
+const NewVersionWarning: FC<NewVersionWarningType> = ({
+  date,
+  environmentId,
+  featureId,
+}) => {
+  const { data } = useGetFeatureVersionsQuery(
+    { environmentId, featureId, is_live: true, page_size: 1 },
+    { refetchOnMountOrArgChange: true, skip: !environmentId || !featureId },
+  )
+  const compareDate = data?.results?.[0]?.live_from
+  const isNewVersion = useMemo(() => {
+    if (compareDate && date) {
+      if (moment(compareDate).valueOf() > moment(date).valueOf()) {
+        return true
+      }
+    }
+    return false
+  }, [compareDate, date])
+  return isNewVersion ? (
+    <div className='mt-4'>
+      <ErrorMessage
+        error={`A new change request has been published for this feature since this one was created, please check that the change request is as you'd expect.`}
+      />
+    </div>
+  ) : null
+}
+
+export default NewVersionWarning

frontend/web/components/pages/ChangeRequestPage.js

@@ -21,6 +21,7 @@ import { IonIcon } from '@ionic/react'
 import Breadcrumb from 'components/Breadcrumb'
 import SettingsButton from 'components/SettingsButton'
 import DiffChangeRequest from 'components/diff/DiffChangeRequest'
+import NewVersionWarning from 'components/NewVersionWarning'
 
 const ChangeRequestsPage = class extends Component {
   static displayName = 'ChangeRequestsPage'
@@ -159,7 +160,13 @@ const ChangeRequestsPage = class extends Component {
     const changeRequest = ChangeRequestStore.model[id]
     const scheduledDate = this.getScheduledDate(changeRequest)
     const isScheduled = scheduledDate > moment()
-
+    const featureId =
+      changeRequest &&
+      changeRequest.feature_states[0] &&
+      changeRequest.feature_states[0].feature
+    const environment = ProjectStore.getEnvironment(
+      this.props.match.params.environmentId,
+    )
     openConfirm({
       body: (
         <div>
@@ -169,6 +176,11 @@ const ChangeRequestsPage = class extends Component {
             ? ` for ${scheduledDate.format('Do MMM YYYY hh:mma')}`
             : ''}
           ? This will adjust the feature for your environment.
+          <NewVersionWarning
+            environmentId={environment?.id}
+            featureId={featureId}
+            date={changeRequest?.created_at}
+          />
         </div>
       ),
       onYes: () => {
@@ -481,6 +493,12 @@ const ChangeRequestsPage = class extends Component {
                       </Row>
                     </div>
                   </Panel>
+
+                  <NewVersionWarning
+                    environmentId={environment?.id}
+                    featureId={featureId}
+                    date={changeRequest?.created_at}
+                  />
                   <DiffChangeRequest
                     isVersioned={isVersioned}
                     changeRequest={changeRequest}

frontend/web/components/pages/ChangeRequestsPage.js

@@ -158,7 +158,7 @@ const ChangeRequestsPage = class extends Component {
                       AppActions.getChangeRequests(
                         this.props.match.params.environmentId,
                         {},
-                        `${Project.api}environments/${environmentId}/list-change-requests/?page=${page}`,
+                        `${Project.api}environments/${environmentId}/list-change-requests/?page=${page}&committed=0`,
                       )
                     }
                     renderFooter={() => (
@@ -257,7 +257,7 @@ const ChangeRequestsPage = class extends Component {
                       AppActions.getChangeRequests(
                         this.props.match.params.environmentId,
                         { committed: true },
-                        `${Project.api}environments/${environmentId}/list-change-requests/?page=${page}`,
+                        `${Project.api}environments/${environmentId}/list-change-requests/?page=${page}&committed=1`,
                       )
                     }
                     renderFooter={() => (

frontend/web/components/pages/FeatureHistoryDetailPage.tsx

@@ -50,6 +50,7 @@ const FeatureHistoryPage: FC<FeatureHistoryPageType> = ({ match, router }) => {
     isLoading: versionsLoading,
   } = useGetFeatureVersionsQuery(
     {
+      is_live: true,
       environmentId,
       featureId: featureId as any,
     },