chore: update segments page and edit segment modal (#2672)

Co-authored-by: kyle-ssg <kyle@solidstategroup.com>

frontend/common/stores/organisation-store.js

@@ -252,6 +252,7 @@ const controller = {
           `Failed to send invite(s). ${
             e && e.error ? e.error : 'Please try again later'
           }`,
+          'danger',
         )
       })
   },
@@ -267,6 +268,7 @@ const controller = {
           `Failed to resend invite. ${
             e && e.error ? e.error : 'Please try again later'
           }`,
+          'danger',
         )
       })
   },
@@ -289,6 +291,7 @@ const controller = {
           `Failed to update this user's role. ${
             e && e.error ? e.error : 'Please try again later'
           }`,
+          'danger',
         )
       })
   },

frontend/web/components/CodeHelp.js

@@ -92,7 +92,10 @@ const CodeHelp = class extends Component {
 
   copy = (s) => {
     const res = Clipboard.setString(s)
-    toast(res ? 'Clipboard set' : 'Could not set clipboard :(')
+    toast(
+      res ? 'Clipboard set' : 'Could not set clipboard :(',
+      res ? '' : 'danger',
+    )
   }
 
   render() {

frontend/web/components/CompareEnvironments.js

@@ -10,6 +10,7 @@ import Permission from 'common/providers/Permission'
 import Tag from './tags/Tag'
 import { getProjectFlags } from 'common/services/useProjectFlag'
 import { getStore } from 'common/store'
+import Icon from './Icon'
 
 const featureNameWidth = 300
 
@@ -116,10 +117,12 @@ class CompareEnvironments extends Component {
   render() {
     return (
       <div>
-        <h5 className='mb-0'>Compare Environments</h5>
-        <p className='fs-small mb-4 lh-sm'>
-          Compare feature flag changes across environments.
-        </p>
+        <div className='col-md-8'>
+          <h5 className='mb-1'>Compare Environments</h5>
+          <p className='fs-small mb-4 lh-sm'>
+            Compare feature flag changes across environments.
+          </p>
+        </div>
         <Row>
           <Row>
             <div style={{ width: featureNameWidth }}>
@@ -137,8 +140,14 @@ class CompareEnvironments extends Component {
               />
             </div>
 
-            <div>
-              <span className='icon ios ion-md-arrow-back mx-2' />
+            <div className='mx-3'>
+              <Icon
+                name='arrow-left'
+                width={20}
+                fill={
+                  Utils.getFlagsmithHasFeature('dark_mode') ? '#fff' : '#1A2634'
+                }
+              />
             </div>
 
             <div style={{ width: featureNameWidth }}>

frontend/web/components/CompareFeatures.js

@@ -68,11 +68,13 @@ class CompareEnvironments extends Component {
   render() {
     return (
       <div>
-        <h5 className='mb-0'>Compare Feature Values</h5>
-        <p className='fs-small mb-4 lh-sm'>
-          Compare a feature's value across all of your environments. Select an
-          environment to compare against others.
-        </p>
+        <div className='col-md-8'>
+          <h5 className='mb-1'>Compare Feature Values</h5>
+          <p className='fs-small mb-4 lh-sm'>
+            Compare a feature's value across all of your environments. Select an
+            environment to compare against others.
+          </p>
+        </div>
         <Row>
           <Row>
             <div style={{ width: featureNameWidth }}>

frontend/web/components/CompareIdentities.tsx

@@ -115,10 +115,12 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
 
   return (
     <div>
-      <h5 className='mb-0'>Compare Identities</h5>
-      <p className='fs-small mb-4 lh-sm'>
-        Compare feature states between 2 identities.
-      </p>
+      <div className='col-md-8'>
+        <h5 className='mb-1'>Compare Identities</h5>
+        <p className='fs-small mb-4 lh-sm'>
+          Compare feature states between 2 identities.
+        </p>
+      </div>
       <div className='mb-2' style={{ width: selectWidth }}>
         <EnvironmentSelect
           value={environmentId}
@@ -138,7 +140,7 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
         />
       ) : (
         <Row>
-          <div className='mr-2' style={{ width: selectWidth }}>
+          <div style={{ width: selectWidth }}>
             <IdentitySelect
               value={leftId}
               isEdge={isEdge}
@@ -147,10 +149,16 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
               environmentId={environmentId}
             />
           </div>
-          <div>
-            <span className='icon ios ion-md-arrow-back mx-2' />
+          <div className='mx-3'>
+            <Icon
+              name='arrow-left'
+              width={20}
+              fill={
+                Utils.getFlagsmithHasFeature('dark_mode') ? '#fff' : '#1A2634'
+              }
+            />
           </div>
-          <div className='mr-2' style={{ width: selectWidth }}>
+          <div style={{ width: selectWidth }}>
             <IdentitySelect
               value={rightId}
               ignoreIds={[`${leftId?.value}`]}
@@ -165,6 +173,7 @@ const CompareIdentities: FC<CompareIdentitiesType> = ({
       {isReady && (
         <>
           <PanelSearch
+            className='no-pad mt-4'
             title={'Changed Flags'}
             searchPanel={
               <Row className='mb-2'>

frontend/web/components/FeatureValue.tsx

@@ -1,6 +1,7 @@
 import { FC } from 'react'
 import { FlagsmithValue } from 'common/types/responses'
-import Format from 'common/utils/format' // we need this to make JSX compile
+import Format from 'common/utils/format'
+import Utils from 'common/utils/utils' // we need this to make JSX compile
 
 type FeatureValueType = {
   value: FlagsmithValue
@@ -11,8 +12,13 @@ type FeatureValueType = {
 }
 
 const FeatureValue: FC<FeatureValueType> = (props) => {
+  if (props.value === null || props.value === undefined) {
+    return null
+  }
   const type = typeof props.value
-
+  if (type === 'string' && props.value === '' && !props.includeEmpty) {
+    return null
+  }
   return (
     <span
       className={`chip ${props.className || ''}`}
@@ -21,7 +27,7 @@ const FeatureValue: FC<FeatureValueType> = (props) => {
     >
       {type == 'string' && <span className='quot'>"</span>}
       <span className='feature-value'>
-        {Format.truncateText(`${props.value}`, 20)}
+        {Format.truncateText(`${Utils.getTypedValue(props.value)}`, 20)}
       </span>
       {type == 'string' && <span className='quot'>"</span>}
     </span>

frontend/web/components/IntegrationList.js

@@ -24,6 +24,7 @@ class Integration extends Component {
 
   render() {
     const { description, docs, image, perEnvironment } = this.props.integration
+    console.log(this.props.integration)
     const activeIntegrations = this.props.activeIntegrations
     const showAdd = !(
       !perEnvironment &&
@@ -32,13 +33,18 @@ class Integration extends Component {
     )
     return (
       <div className='panel panel-integrations p-4 mb-3'>
-        <Flex className='mb-3'>
+        <Flex>
           <img className='mb-2' src={image} />
           <Row space style={{ flexWrap: 'noWrap' }}>
             <div className='subtitle mt-2'>
               {description}{' '}
               {docs && (
-                <Button theme='text' href={docs} target='_blank'>
+                <Button
+                  theme='text'
+                  href={docs}
+                  target='_blank'
+                  className='fw-normal'
+                >
                   View docs
                 </Button>
               )}
@@ -81,7 +87,7 @@ class Integration extends Component {
           activeIntegrations.map((integration) => (
             <div
               key={integration.id}
-              className='list-integrations clickable p-3'
+              className='list-integrations clickable p-3 mt-3'
               onClick={() => this.edit(integration)}
             >
               <Row space>

frontend/web/components/PanelSearch.js

@@ -203,7 +203,7 @@ const PanelSearch = class extends Component {
               {!!this.props.filterRow && (
                 <Row>
                   {this.props.showExactFilter && (
-                    <div style={{ width: 175 }}>
+                    <div style={{ width: 140 }}>
                       <Select
                         size='select-sm'
                         styles={{