Mirrors/unleash.unleash
1
0
Fork 0
mirror of https://github.com/Unleash/unleash.git synced 2025-05-17 01:17:29 +02:00
Code Issues Projects Releases Wiki Activity

feat: move away from old accordion list, create/edit segment (#9820)

Browse Source 
This is one path that is using old component, that we can update.


![image](https://github.com/user-attachments/assets/2f88eea9-651c-4bb2-9b00-d8c54e8e5aab)
This commit is contained in:
Jaanus Sellin 2025-04-23 15:02:13 +03:00 committed by GitHub
parent 08d0907d89
commit 31dbef84f6
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 36 additions and 10 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

46
frontend/src/component/segments/SegmentFormStepTwo.tsx
View File

@ -15,10 +15,12 @@ import {
import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext'; import useUnleashContext from 'hooks/api/getters/useUnleashContext/useUnleashContext';
import type { IConstraint } from 'interfaces/strategy'; import type { IConstraint } from 'interfaces/strategy';
import { useNavigate } from 'react-router-dom'; import { useNavigate } from 'react-router-dom';
import type { IConstraintAccordionListRef } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
import { ConstraintAccordionList } from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList';
import { import {
ConstraintAccordionList, NewConstraintAccordionList,
type IConstraintAccordionListRef, useConstraintAccordionList,
} from 'component/common/LegacyConstraintAccordion/ConstraintAccordionList/ConstraintAccordionList'; } from 'component/common/NewConstraintAccordion/NewConstraintAccordionList/NewConstraintAccordionList';
import type { SegmentFormStep, SegmentFormMode } from './SegmentForm'; import type { SegmentFormStep, SegmentFormMode } from './SegmentForm';
import { import {
AutocompleteBox, AutocompleteBox,
@ -32,6 +34,8 @@ import { useSegmentValuesCount } from 'component/segments/hooks/useSegmentValues
import AccessContext from 'contexts/AccessContext'; import AccessContext from 'contexts/AccessContext';
import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits'; import { useSegmentLimits } from 'hooks/api/getters/useSegmentLimits/useSegmentLimits';
import { GO_BACK } from 'constants/navigate'; import { GO_BACK } from 'constants/navigate';
import type { RefObject } from 'react';
import { useUiFlag } from 'hooks/useUiFlag';
interface ISegmentFormPartTwoProps { interface ISegmentFormPartTwoProps {
project?: string; project?: string;
@ -122,6 +126,11 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
? [CREATE_SEGMENT, UPDATE_PROJECT_SEGMENT] ? [CREATE_SEGMENT, UPDATE_PROJECT_SEGMENT]
: [UPDATE_SEGMENT, UPDATE_PROJECT_SEGMENT]; : [UPDATE_SEGMENT, UPDATE_PROJECT_SEGMENT];
const { segmentValuesLimit } = useSegmentLimits(); const { segmentValuesLimit } = useSegmentLimits();
const addEditStrategy = useUiFlag('addEditStrategy');
const { state } = useConstraintAccordionList(
hasAccess(modePermission, project) ? setConstraints : undefined,
constraintsAccordionListRef as RefObject<IConstraintAccordionListRef>,
);
const overSegmentValuesLimit: boolean = Boolean( const overSegmentValuesLimit: boolean = Boolean(
segmentValuesLimit && segmentValuesCount > segmentValuesLimit, segmentValuesLimit && segmentValuesCount > segmentValuesLimit,
@ -201,13 +210,30 @@ export const SegmentFormStepTwo: React.FC<ISegmentFormPartTwoProps> = ({
} }
/> />
<StyledConstraintContainer> <StyledConstraintContainer>
<ConstraintAccordionList <ConditionallyRender
ref={constraintsAccordionListRef} condition={addEditStrategy}
constraints={constraints} show={
setConstraints={ <NewConstraintAccordionList
hasAccess(modePermission, project) ref={constraintsAccordionListRef}
? setConstraints constraints={constraints}
: undefined setConstraints={
hasAccess(modePermission, project)
? setConstraints
: undefined
}
state={state}
/>
}
elseShow={
<ConstraintAccordionList
ref={constraintsAccordionListRef}
constraints={constraints}
setConstraints={
hasAccess(modePermission, project)
? setConstraints
: undefined
}
/>
} }
/> />
</StyledConstraintContainer> </StyledConstraintContainer>