Skip to content

Commit

Permalink
fix: associated segment override check (#4781)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kyle-ssg
kyle-ssg authored Oct 29, 2024
1 parent 960def4 commit 85556a0
Show file tree
Hide file tree
Showing 2 changed files with 126 additions and 121 deletions.
218 changes: 118 additions & 100 deletions frontend/web/components/modals/AssociatedSegmentOverrides.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,7 @@ import { getStore } from 'common/store'
import { getEnvironment } from 'common/services/useEnvironment'
import { saveFeatureWithValidation } from 'components/saveFeatureWithValidation'
import Utils from 'common/utils/utils'
import Permission from 'common/providers/Permission'

class TheComponent extends Component {
state = {
Expand Down Expand Up @@ -107,115 +108,132 @@ class TheComponent extends Component {
const selectedResults = selectedNewResults.concat(
(results && results[this.state.selectedEnv]) || [],
)
const addOverride = (
<div style={{ width: 300 }} className='my-4'>
<WrappedSegmentOverrideAdd
onSave={this.fetch}
addItem={this.addItem}
feature={this.props.feature}
selectedResults={selectedResults}
ignoreFlags={
selectedResults && selectedResults.map((v) => v.feature.id)
}
id={this.props.id}
projectId={this.props.projectId}
environmentId={this.state.selectedEnv}
readOnly={this.props.readOnly}
/>
</div>
)

return (
<div className='mt-4'>
<InfoMessage collapseId={'associated-segment-overrides'}>
This shows the list of segment overrides associated with this segment.
<br />
Segment overrides will only apply when you identify via the SDK.{' '}
<a
target='_blank'
href='https://docs.flagsmith.com/basic-features/segments'
rel='noreferrer'
>
Check the Docs for more details
</a>
.
</InfoMessage>
<SegmentOverrideLimit
id={environment?.api_key}
maxSegmentOverridesAllowed={ProjectStore.getMaxSegmentOverridesAllowed()}
/>
<div>
<InputGroup
component={
<EnvironmentSelect
projectId={this.props.projectId}
value={environment?.api_key}
onChange={(selectedEnv) =>
this.setState(
{
selectedEnv,
},
this.fetch,
)
<Permission
level='environment'
permission={'MANAGE_SEGMENT_OVERRIDES'}
id={this.state.selectedEnv}
>
{({ permission: manageSegmentOverrides }) => {
const readOnly = !manageSegmentOverrides
const addOverride = (
<div style={{ width: 300 }} className='my-4'>
<WrappedSegmentOverrideAdd
onSave={this.fetch}
addItem={this.addItem}
feature={this.props.feature}
selectedResults={selectedResults}
ignoreFlags={
selectedResults && selectedResults.map((v) => v.feature.id)
}
id={this.props.id}
projectId={this.props.projectId}
environmentId={this.state.selectedEnv}
readOnly={readOnly}
/>
}
title='Environment'
/>

{this.state.isLoading ? (
<div className='text-center'>
<Loader />
</div>
) : (
<PanelSearch
searchPanel={addOverride}
search={this.state.search}
onChange={(search) => this.setState({ search })}
filterRow={(row, search) =>
row.feature.name.toLowerCase().includes(search.toLowerCase())
}
className='no-pad panel-override'
title='Associated Features'
items={selectedResults}
renderNoResults={
<Panel className='no-pad' title='Associated Features'>
{addOverride}
<div className='p-2 text-center'>
There are no segment overrides in this environment
</div>
</Panel>
}
renderRow={(v) => (
<div key={v.feature.id} className='list-item-override p-3 mb-4'>
<div>
)

<WrappedSegmentOverrides
onSave={this.fetch}
projectFlag={v.feature}
newSegmentOverrides={v.newSegmentOverrides}
onRemove={() => {
if (v.newSegmentOverrides) {
newItems[this.state.selectedEnv] = newItems[
this.state.selectedEnv
].filter((x) => x !== v)
this.setState({
newItems,
})
}
}}
id={this.props.id}
return (
<div className='mt-4'>
<InfoMessage collapseId={'associated-segment-overrides'}>
This shows the list of segment overrides associated with this
segment.
<br />
Segment overrides will only apply when you identify via the SDK.{' '}
<a
target='_blank'
href='https://docs.flagsmith.com/basic-features/segments'
rel='noreferrer'
>
Check the Docs for more details
</a>
.
</InfoMessage>
<SegmentOverrideLimit
id={environment?.api_key}
maxSegmentOverridesAllowed={ProjectStore.getMaxSegmentOverridesAllowed()}
/>
<div>
<InputGroup
component={
<EnvironmentSelect
projectId={this.props.projectId}
environmentId={v.env.api_key}
readOnly={this.props.readOnly}
value={environment?.api_key}
onChange={(selectedEnv) =>
this.setState(
{
selectedEnv,
},
this.fetch,
)
}
/>
}
title='Environment'
/>

{this.state.isLoading ? (
<div className='text-center'>
<Loader />
</div>
</div>
)}
/>
)}
</div>
</div>
) : (
<PanelSearch
searchPanel={addOverride}
search={this.state.search}
onChange={(search) => this.setState({ search })}
filterRow={(row, search) =>
row.feature.name
.toLowerCase()
.includes(search.toLowerCase())
}
className='no-pad panel-override'
title='Associated Features'
items={selectedResults}
renderNoResults={
<Panel className='no-pad' title='Associated Features'>
{addOverride}
<div className='p-2 text-center'>
There are no segment overrides in this environment
</div>
</Panel>
}
renderRow={(v) => (
<div
key={v.feature.id}
className='list-item-override p-3 mb-4'
>
<div>
<WrappedSegmentOverrides
onSave={this.fetch}
projectFlag={v.feature}
newSegmentOverrides={v.newSegmentOverrides}
onRemove={() => {
if (v.newSegmentOverrides) {
newItems[this.state.selectedEnv] = newItems[
this.state.selectedEnv
].filter((x) => x !== v)
this.setState({
newItems,
})
}
}}
id={this.props.id}
projectId={this.props.projectId}
environmentId={v.env.api_key}
readOnly={readOnly}
/>
</div>
</div>
)}
/>
)}
</div>
</div>
)
}}
</Permission>
)
}
}
Expand Down
29 changes: 8 additions & 21 deletions frontend/web/components/modals/CreateSegment.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,7 +46,6 @@ 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'
import classNames from 'classnames'
import AddMetadataToEntity, {
CustomMetadataField,
Expand Down Expand Up @@ -587,27 +586,15 @@ const CreateSegment: FC<CreateSegmentType> = ({
</TabItem>
<TabItem tabLabel='Features'>
<div className='my-4'>
<Permission
level='environment'
permission={'MANAGE_SEGMENT_OVERRIDES'}
id={environmentId}
>
{({ permission: manageSegmentOverrides }) => {
const isReadOnly = !manageSegmentOverrides
return (
<AssociatedSegmentOverrides
onUnsavedChange={() => {
setValueChanged(true)
}}
feature={segment.feature}
projectId={projectId}
id={segment.id}
readOnly={isReadOnly}
environmentId={environmentId}
/>
)
<AssociatedSegmentOverrides
onUnsavedChange={() => {
setValueChanged(true)
}}
</Permission>
feature={segment.feature}
projectId={projectId}
id={segment.id}
environmentId={environmentId}
/>
</div>
</TabItem>
<TabItem tabLabel='Users'>
Expand Down

0 comments on commit 85556a0

Please sign in to comment.