From 88c43cda72cb747735254de44ae0ed78bc954808 Mon Sep 17 00:00:00 2001
From: Novak Zaballa <41410593+novakzaballa@users.noreply.github.com>
Date: Mon, 13 Nov 2023 21:58:50 -0400
Subject: [PATCH] feat: Add manage segment overrides permission in UI (#2936)

---
 frontend/web/components/SegmentOverrides.js   | 304 +++++++++---------
 .../modals/AssociatedSegmentOverrides.js      |  32 +-
 frontend/web/components/modals/CreateFlag.js  | 138 +++++---
 .../web/components/modals/CreateSegment.tsx   |  26 +-
 4 files changed, 294 insertions(+), 206 deletions(-)

diff --git a/frontend/web/components/SegmentOverrides.js b/frontend/web/components/SegmentOverrides.js
index 0bf48bad439a..4ec14620bd7e 100644
--- a/frontend/web/components/SegmentOverrides.js
+++ b/frontend/web/components/SegmentOverrides.js
@@ -559,159 +559,175 @@ class TheComponent extends Component {
     const isLimitReached =
       segmentOverrideLimitAlert.percentage &&
       segmentOverrideLimitAlert.percentage >= 100
+    const manageSegmentsEnabled = Utils.getFlagsmithHasFeature(
+      'manage_segment_overrides_env_role',
+    )
     return (
       <div>
-        <div className='mt-2 mb-2'>
-          {!this.props.id &&
-            !this.props.disableCreate &&
-            !this.props.showCreateSegment &&
-            !this.props.readOnly && (
-              <Flex className='text-left'>
-                <SegmentSelect
-                  disabled={!!isLimitReached}
-                  projectId={this.props.projectId}
-                  data-test='select-segment'
-                  placeholder='Create a Segment Override...'
-                  filter={filter}
-                  value={this.state.selectedSegment}
-                  onChange={(selectedSegment) =>
-                    this.setState({ selectedSegment }, this.addItem)
-                  }
-                />
-              </Flex>
-            )}
-          {!this.props.showCreateSegment &&
-            !this.props.readOnly &&
-            !this.props.disableCreate && (
-              <div className='text-right'>
-                <Button
-                  className='mt-2'
-                  onClick={() => {
-                    this.setState({ selectedSegment: null })
-                    this.props.setShowCreateSegment(true)
-                  }}
-                  theme='outline'
-                  disabled={!!isLimitReached}
-                >
-                  Create Feature-Specific Segment
-                </Button>
-              </div>
-            )}
-          {this.props.showCreateSegment && !this.state.segmentEditId && (
-            <div className='create-segment-overrides'>
-              <CreateSegmentModal
-                onComplete={(segment) => {
-                  if (this.state.selectedSegment) {
-                    this.props.setShowCreateSegment(false)
-                  } else {
-                    this.props.setShowCreateSegment(false)
-                    this.setState(
-                      {
-                        selectedSegment: {
-                          label: segment.name,
-                          value: segment.id,
-                        },
-                      },
-                      this.addItem,
-                    )
-                  }
-                }}
-                onCancel={() => {
-                  this.props.setShowCreateSegment(false)
-                }}
-                condensed
-                feature={this.props.feature}
-                environmentId={this.props.environmentId}
-                projectId={this.props.projectId}
-              />
-            </div>
-          )}
-          {this.props.showCreateSegment && this.state.segmentEditId && (
-            <CreateSegmentModal
-              segment={this.state.segmentEditId}
-              isEdit
-              condensed
-              onComplete={() => {
-                this.setState({
-                  segmentEditId: undefined,
-                })
-                this.props.setShowCreateSegment(false)
-              }}
-              onCancel={() => {
-                this.setState({ segmentEditId: undefined })
-                this.props.setShowCreateSegment(false)
-              }}
-              environmentId={this.props.environmentId}
-              projectId={this.props.projectId}
-            />
-          )}
-          {visibleValues &&
-            !!visibleValues.length &&
-            !this.props.showCreateSegment && (
-              <div
-                style={isLoading ? { opacity: 0.5 } : null}
-                className='overflow-visible'
-              >
-                {!this.props.id && (
-                  <div className='my-4'>
-                    <InfoMessage className='mb-4 text-left faint'>
-                      Prioritise a segment override by dragging it to the top of
-                      the list.
-                      <br />
-                      Segment overrides will only apply when you identify via
-                      the SDK.{' '}
-                      <a
-                        target='_blank'
-                        href='https://docs.flagsmith.com/basic-features/managing-segments'
-                        rel='noreferrer'
+        <Permission
+          level='project'
+          permission={'MANAGE_SEGMENTS'}
+          id={this.props.projectId}
+        >
+          {({ permission: manageSegments }) => {
+            return (
+              <div className='mt-2 mb-2'>
+                {!this.props.id &&
+                  !this.props.disableCreate &&
+                  !this.props.showCreateSegment &&
+                  !this.props.readOnly && (
+                    <Flex className='text-left'>
+                      <SegmentSelect
+                        disabled={!!isLimitReached}
+                        projectId={this.props.projectId}
+                        data-test='select-segment'
+                        placeholder='Create a Segment Override...'
+                        filter={filter}
+                        value={this.state.selectedSegment}
+                        onChange={(selectedSegment) =>
+                          this.setState({ selectedSegment }, this.addItem)
+                        }
+                      />
+                    </Flex>
+                  )}
+                {!this.props.showCreateSegment &&
+                  !this.props.readOnly &&
+                  !this.props.disableCreate && (
+                    <div className='text-right'>
+                      <Button
+                        className='mt-2'
+                        onClick={() => {
+                          this.setState({ selectedSegment: null })
+                          this.props.setShowCreateSegment(true)
+                        }}
+                        theme='outline'
+                        disabled={
+                          !!isLimitReached ||
+                          (manageSegmentsEnabled && !manageSegments)
+                        }
                       >
-                        Check the Docs for more details
-                      </a>
-                      .
-                    </InfoMessage>
-                    <SegmentOverrideLimit
-                      id={this.props.environmentId}
-                      maxSegmentOverridesAllowed={ProjectStore.getMaxSegmentOverridesAllowed()}
+                        Create Feature-Specific Segment
+                      </Button>
+                    </div>
+                  )}
+                {this.props.showCreateSegment && !this.state.segmentEditId && (
+                  <div className='create-segment-overrides'>
+                    <CreateSegmentModal
+                      onComplete={(segment) => {
+                        this.props.setShowCreateSegment(false)
+                        if (!this.state.selectedSegment) {
+                          this.setState(
+                            {
+                              selectedSegment: {
+                                label: segment.name,
+                                value: segment.id,
+                              },
+                            },
+                            this.addItem,
+                          )
+                        }
+                      }}
+                      onCancel={() => {
+                        this.props.setShowCreateSegment(false)
+                      }}
+                      condensed
+                      feature={this.props.feature}
+                      environmentId={this.props.environmentId}
+                      projectId={this.props.projectId}
                     />
                   </div>
                 )}
+                {this.props.showCreateSegment && this.state.segmentEditId && (
+                  <CreateSegmentModal
+                    segment={this.state.segmentEditId}
+                    isEdit
+                    condensed
+                    onComplete={() => {
+                      this.setState({
+                        segmentEditId: undefined,
+                      })
+                      this.props.setShowCreateSegment(false)
+                    }}
+                    onCancel={() => {
+                      this.setState({ segmentEditId: undefined })
+                      this.props.setShowCreateSegment(false)
+                    }}
+                    environmentId={this.props.environmentId}
+                    projectId={this.props.projectId}
+                  />
+                )}
+                {visibleValues &&
+                  !!visibleValues.length &&
+                  !this.props.showCreateSegment && (
+                    <div
+                      style={isLoading ? { opacity: 0.5 } : null}
+                      className='overflow-visible'
+                    >
+                      {!this.props.id && (
+                        <div className='my-4'>
+                          <InfoMessage className='mb-4 text-left faint'>
+                            Prioritise a segment override by dragging it to the
+                            top of the list.
+                            <br />
+                            Segment overrides will only apply when you identify
+                            via the SDK.{' '}
+                            <a
+                              target='_blank'
+                              href='https://docs.flagsmith.com/basic-features/managing-segments'
+                              rel='noreferrer'
+                            >
+                              Check the Docs for more details
+                            </a>
+                            .
+                          </InfoMessage>
+                          <SegmentOverrideLimit
+                            id={this.props.environmentId}
+                            maxSegmentOverridesAllowed={ProjectStore.getMaxSegmentOverridesAllowed()}
+                          />
+                        </div>
+                      )}
 
-                {value && (
-                  <>
-                    <InnerComponent
-                      disabled={isLoading || this.props.readOnly}
-                      id={this.props.id}
-                      name={this.props.name}
-                      controlValue={this.props.controlValue}
-                      multivariateOptions={multivariateOptions}
-                      confirmRemove={this.confirmRemove}
-                      setVariations={this.setVariations}
-                      toggle={this.toggle}
-                      setValue={this.setValue}
-                      readOnly={this.props.readOnly}
-                      showEditSegment={this.props.showEditSegment}
-                      environmentId={this.props.environmentId}
-                      projectId={this.props.projectId}
-                      setShowCreateSegment={this.props.setShowCreateSegment}
-                      items={value.map((v) => ({
-                        ...v,
-                      }))}
-                      setSegmentEditId={this.setSegmentEditId}
-                      onSortEnd={this.onSortEnd}
-                      projectFlag={this.props.projectFlag}
-                    />
-                    <div className='text-left mt-4'>
-                      <JSONReference
-                        showNamesButton
-                        title={'Segment Overrides'}
-                        json={value}
-                      />
+                      {value && (
+                        <>
+                          <InnerComponent
+                            disabled={isLoading || this.props.readOnly}
+                            id={this.props.id}
+                            name={this.props.name}
+                            controlValue={this.props.controlValue}
+                            multivariateOptions={multivariateOptions}
+                            confirmRemove={this.confirmRemove}
+                            setVariations={this.setVariations}
+                            toggle={this.toggle}
+                            setValue={this.setValue}
+                            readOnly={this.props.readOnly}
+                            showEditSegment={this.props.showEditSegment}
+                            environmentId={this.props.environmentId}
+                            projectId={this.props.projectId}
+                            setShowCreateSegment={
+                              this.props.setShowCreateSegment
+                            }
+                            items={value.map((v) => ({
+                              ...v,
+                            }))}
+                            setSegmentEditId={this.setSegmentEditId}
+                            onSortEnd={this.onSortEnd}
+                            projectFlag={this.props.projectFlag}
+                          />
+                          <div className='text-left mt-4'>
+                            <JSONReference
+                              showNamesButton
+                              title={'Segment Overrides'}
+                              json={value}
+                            />
+                          </div>
+                        </>
+                      )}
                     </div>
-                  </>
-                )}
+                  )}
               </div>
-            )}
-        </div>
+            )
+          }}
+        </Permission>
       </div>
     )
   }
diff --git a/frontend/web/components/modals/AssociatedSegmentOverrides.js b/frontend/web/components/modals/AssociatedSegmentOverrides.js
index 297017bf271f..32bfb9fa8274 100644
--- a/frontend/web/components/modals/AssociatedSegmentOverrides.js
+++ b/frontend/web/components/modals/AssociatedSegmentOverrides.js
@@ -110,6 +110,7 @@ class TheComponent extends Component {
           id={this.props.id}
           projectId={this.props.projectId}
           environmentId={this.state.selectedEnv}
+          readOnly={this.props.readOnly}
         />
       </div>
     )
@@ -196,6 +197,7 @@ class TheComponent extends Component {
                     id={this.props.id}
                     projectId={this.props.projectId}
                     environmentId={v.env.api_key}
+                    readOnly={this.props.readOnly}
                   />
                 </div>
               </div>
@@ -296,6 +298,7 @@ export default class SegmentOverridesInner extends Component {
       originalSegmentOverrides,
       projectFlag,
       projectId,
+      readOnly,
       segmentOverrides,
       updateSegments,
     } = this.props
@@ -366,11 +369,14 @@ export default class SegmentOverridesInner extends Component {
                 value={segmentOverride}
                 controlValue={projectFlag.feature_state_value}
                 onChange={updateSegments}
+                readOnly={readOnly}
               />
               <div className='text-right'>
-                <Button disabled={this.state.isSaving} onClick={save}>
-                  {this.state.isSaving ? 'Saving' : 'Save'}
-                </Button>
+                {!readOnly && (
+                  <Button disabled={this.state.isSaving} onClick={save}>
+                    {this.state.isSaving ? 'Saving' : 'Save'}
+                  </Button>
+                )}
               </div>
             </div>
           )
@@ -411,7 +417,7 @@ class SegmentOverridesInnerAdd extends Component {
     }
   }
   render() {
-    const { environmentId, id, ignoreFlags, projectId } = this.props
+    const { environmentId, id, ignoreFlags, projectId, readOnly } = this.props
     const addValue = (featureId, feature) => {
       const env = ProjectStore.getEnvs().find((v) => v.name === environmentId)
       const item = {
@@ -448,14 +454,16 @@ class SegmentOverridesInnerAdd extends Component {
         {() => {
           return (
             <div className='mt-2'>
-              <FlagSelect
-                disabled={!!segmentOverrideLimitAlert}
-                onlyInclude={this.props.feature}
-                placeholder='Create a Segment Override...'
-                projectId={projectId}
-                ignore={ignoreFlags}
-                onChange={addValue}
-              />
+              {!readOnly && (
+                <FlagSelect
+                  disabled={!!segmentOverrideLimitAlert}
+                  onlyInclude={this.props.feature}
+                  placeholder='Create a Segment Override...'
+                  projectId={projectId}
+                  ignore={ignoreFlags}
+                  onChange={addValue}
+                />
+              )}
             </div>
           )
         }}
diff --git a/frontend/web/components/modals/CreateFlag.js b/frontend/web/components/modals/CreateFlag.js
index aaecb9738383..47e021028dda 100644
--- a/frontend/web/components/modals/CreateFlag.js
+++ b/frontend/web/components/modals/CreateFlag.js
@@ -479,6 +479,9 @@ const CreateFlag = class extends Component {
     const existingChangeRequest = this.props.changeRequest
     const hideIdentityOverridesTab = Utils.getShouldHideIdentityOverridesTab()
     const noPermissions = this.props.noPermissions
+    const manageSegmentsEnabled = Utils.getFlagsmithHasFeature(
+      'manage_segment_overrides_env_role',
+    )
     let regexValid = true
     try {
       if (!isEdit && name && regex) {
@@ -1126,38 +1129,63 @@ const CreateFlag = class extends Component {
                                               )}
                                           </Row>
                                           {this.props.segmentOverrides ? (
-                                            <SegmentOverrides
-                                              readOnly={noPermissions}
-                                              showEditSegment
-                                              showCreateSegment={
-                                                this.state.showCreateSegment
-                                              }
-                                              setShowCreateSegment={(
-                                                showCreateSegment,
-                                              ) =>
-                                                this.setState({
-                                                  showCreateSegment,
-                                                })
-                                              }
-                                              feature={projectFlag.id}
-                                              projectId={this.props.projectId}
-                                              multivariateOptions={
-                                                multivariate_options
+                                            <Permission
+                                              level='environment'
+                                              permission={
+                                                'MANAGE_SEGMENT_OVERRIDES'
                                               }
-                                              environmentId={
-                                                this.props.environmentId
-                                              }
-                                              value={
-                                                this.props.segmentOverrides
-                                              }
-                                              controlValue={initial_value}
-                                              onChange={(v) => {
-                                                this.setState({
-                                                  segmentsChanged: true,
-                                                })
-                                                this.props.updateSegments(v)
+                                              id={this.props.environmentId}
+                                            >
+                                              {({
+                                                permission:
+                                                  manageSegmentOverrides,
+                                              }) => {
+                                                const isReadOnly =
+                                                  manageSegmentsEnabled
+                                                    ? manageSegmentOverrides
+                                                    : noPermissions
+                                                return (
+                                                  <SegmentOverrides
+                                                    readOnly={isReadOnly}
+                                                    showEditSegment
+                                                    showCreateSegment={
+                                                      this.state
+                                                        .showCreateSegment
+                                                    }
+                                                    setShowCreateSegment={(
+                                                      showCreateSegment,
+                                                    ) =>
+                                                      this.setState({
+                                                        showCreateSegment,
+                                                      })
+                                                    }
+                                                    feature={projectFlag.id}
+                                                    projectId={
+                                                      this.props.projectId
+                                                    }
+                                                    multivariateOptions={
+                                                      multivariate_options
+                                                    }
+                                                    environmentId={
+                                                      this.props.environmentId
+                                                    }
+                                                    value={
+                                                      this.props
+                                                        .segmentOverrides
+                                                    }
+                                                    controlValue={initial_value}
+                                                    onChange={(v) => {
+                                                      this.setState({
+                                                        segmentsChanged: true,
+                                                      })
+                                                      this.props.updateSegments(
+                                                        v,
+                                                      )
+                                                    }}
+                                                  />
+                                                )
                                               }}
-                                            />
+                                            </Permission>
                                           ) : (
                                             <div className='text-center'>
                                               <Loader />
@@ -1206,24 +1234,44 @@ const CreateFlag = class extends Component {
                                                       ),
                                                     ),
                                                     <div className='text-right'>
-                                                      <Button
-                                                        onClick={
-                                                          saveFeatureSegments
+                                                      <Permission
+                                                        level='environment'
+                                                        permission={
+                                                          'MANAGE_SEGMENT_OVERRIDES'
                                                         }
-                                                        type='button'
-                                                        data-test='update-feature-segments-btn'
-                                                        id='update-feature-segments-btn'
-                                                        disabled={
-                                                          isSaving ||
-                                                          !name ||
-                                                          invalid ||
-                                                          !savePermission
+                                                        id={
+                                                          this.props
+                                                            .environmentId
                                                         }
                                                       >
-                                                        {isSaving
-                                                          ? 'Updating'
-                                                          : 'Update Segment Overrides'}
-                                                      </Button>
+                                                        {({
+                                                          permission:
+                                                            manageSegmentsOverrides,
+                                                        }) => {
+                                                          return (
+                                                            <Button
+                                                              onClick={
+                                                                saveFeatureSegments
+                                                              }
+                                                              type='button'
+                                                              data-test='update-feature-segments-btn'
+                                                              id='update-feature-segments-btn'
+                                                              disabled={
+                                                                isSaving ||
+                                                                !name ||
+                                                                invalid ||
+                                                                !savePermission ||
+                                                                (manageSegmentsEnabled &&
+                                                                  !manageSegmentsOverrides)
+                                                              }
+                                                            >
+                                                              {isSaving
+                                                                ? 'Updating'
+                                                                : 'Update Segment Overrides'}
+                                                            </Button>
+                                                          )
+                                                        }}
+                                                      </Permission>
                                                     </div>,
                                                   )
                                                 }
diff --git a/frontend/web/components/modals/CreateSegment.tsx b/frontend/web/components/modals/CreateSegment.tsx
index 48e63b6a4b9f..66f8fb573407 100644
--- a/frontend/web/components/modals/CreateSegment.tsx
+++ b/frontend/web/components/modals/CreateSegment.tsx
@@ -37,6 +37,7 @@ import { cloneDeep } from 'lodash'
 import ErrorMessage from 'components/ErrorMessage'
 import ProjectStore from 'common/stores/project-store'
 import Icon from 'components/Icon'
+import Permission from 'common/providers/Permission'
 
 type PageType = {
   number: number
@@ -502,11 +503,26 @@ const CreateSegment: FC<CreateSegmentType> = ({
           </TabItem>
           <TabItem tabLabel='Features'>
             <div className='my-4'>
-              <AssociatedSegmentOverrides
-                feature={segment.feature}
-                projectId={projectId}
-                id={segment.id}
-              />
+              <Permission
+                level='environment'
+                permission={'MANAGE_SEGMENT_OVERRIDES'}
+                id={environmentId}
+              >
+                {({ permission: manageSegmentOverrides }) => {
+                  const manageSegmentsEnabled = Utils.getFlagsmithHasFeature(
+                    'manage_segment_overrides_env_role',
+                  )
+                  const isReadOnly = !manageSegmentOverrides
+                  return (
+                    <AssociatedSegmentOverrides
+                      feature={segment.feature}
+                      projectId={projectId}
+                      id={segment.id}
+                      readOnly={manageSegmentsEnabled ? isReadOnly : false}
+                    />
+                  )
+                }}
+              </Permission>
             </div>
           </TabItem>
           <TabItem tabLabel='Users'>