fix: Associated segment overrides (#2582)

frontend/common/providers/withSegmentOverrides.js

@@ -19,6 +19,12 @@ export default (WrappedComponent) => {
       this.getOverrides()
     }
 
+    componentDidUpdate(prevProps, prevState, snapshot) {
+      if (prevProps.environmentId !== this.props.environmentId) {
+        this.getOverrides()
+      }
+    }
+
     getOverrides = () => {
       if (this.props.projectFlag) {
         Promise.all([

frontend/web/components/SegmentOverrides.js

@@ -1,5 +1,5 @@
 // import propTypes from 'prop-types';
-import React, { Component } from 'react'
+import React, { Component, Fragment } from 'react';
 import { SortableContainer, SortableElement } from 'react-sortable-hoc'
 import ProjectStore from 'common/stores/project-store'
 import ValueEditor from './ValueEditor'
@@ -183,7 +183,7 @@ const SegmentOverrideInner = class Override extends React.Component {
                             className='ml-2 dark-link'
                           >
                             Edit Segment
-                            <ion className={'ion ml-1 ion-md-open'} />
+                            <i className={'ion ml-1 ion-md-open'} />
                           </Button>
                         )}
                       </>,
@@ -333,7 +333,7 @@ const SegmentOverrideListInner = ({
   return (
     <div>
       {items.map((value, index) => (
-        <>
+        <Fragment key={value.segment.name}>
           <InnerComponent
             id={id}
             name={name}
@@ -344,7 +344,6 @@ const SegmentOverrideListInner = ({
             environmentId={environmentId}
             projectId={projectId}
             multivariateOptions={multivariateOptions}
-            key={value.segment.name}
             index={index}
             readOnly={readOnly}
             value={value}
@@ -372,7 +371,7 @@ const SegmentOverrideListInner = ({
               json={value}
             />
           </div>
-        </>
+        </Fragment>
       ))}
     </div>
   )