Skip to content

Commit

Permalink
feat: Add manage segment overrides permission in UI (#2936)
Browse files Browse the repository at this point in the history
  • Loading branch information
@novakzaballa
novakzaballa authored Nov 14, 2023
1 parent b43d8ef commit 88c43cd
Show file tree
Hide file tree
Showing 4 changed files with 294 additions and 206 deletions.
304 changes: 160 additions & 144 deletions frontend/web/components/SegmentOverrides.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
}
Expand Down
32 changes: 20 additions & 12 deletions frontend/web/components/modals/AssociatedSegmentOverrides.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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>
)
Expand Down Expand Up @@ -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>
Expand Down Expand Up @@ -296,6 +298,7 @@ export default class SegmentOverridesInner extends Component {
originalSegmentOverrides,
projectFlag,
projectId,
readOnly,
segmentOverrides,
updateSegments,
} = this.props
Expand Down Expand Up @@ -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>
)
Expand Down Expand Up @@ -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 = {
Expand Down Expand Up @@ -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>
)
}}
Expand Down
Loading

3 comments on commit 88c43cd

@vercel
Copy link

@vercel vercel bot commented on 88c43cd Nov 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flagsmith-frontend-staging – ./frontend

flagsmith-frontend-staging-git-main-flagsmith.vercel.app
flagsmith-frontend-staging-flagsmith.vercel.app
flagsmith-staging-frontend.vercel.app
staging.flagsmith.com

@vercel
Copy link

@vercel vercel bot commented on 88c43cd Nov 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

flagsmith-frontend-preview – ./frontend

flagsmith-frontend-preview-git-main-flagsmith.vercel.app
flagsmith-frontend-production-native.vercel.app
flagsmith-frontend-preview-flagsmith.vercel.app

@vercel
Copy link

@vercel vercel bot commented on 88c43cd Nov 14, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

docs – ./docs

docs-git-main-flagsmith.vercel.app
docs.flagsmith.com
docs-flagsmith.vercel.app
docs.bullet-train.io

Please sign in to comment.