From bb4a89c32851e55167b350bed5af935f484f329b Mon Sep 17 00:00:00 2001 From: Kyle Johnson Date: Wed, 28 Aug 2024 14:03:31 +0100 Subject: [PATCH] fix: feature-specific segments link (#4299) --- frontend/common/providers/Permission.tsx | 8 ++- frontend/web/components/modals/base/Modal.tsx | 2 + .../web/components/pages/SegmentsPage.tsx | 71 +++++++++++++------ 3 files changed, 56 insertions(+), 25 deletions(-) diff --git a/frontend/common/providers/Permission.tsx b/frontend/common/providers/Permission.tsx index 0be20f8697fb..212f41bee1ee 100644 --- a/frontend/common/providers/Permission.tsx +++ b/frontend/common/providers/Permission.tsx @@ -15,12 +15,16 @@ export const useHasPermission = ({ level, permission, }: Omit) => { - const { data, isLoading } = useGetPermissionQuery( + const { data, isLoading, isSuccess } = useGetPermissionQuery( { id: `${id}`, level }, { skip: !id || !level }, ) const hasPermission = !!data?.[permission] || !!data?.ADMIN - return { isLoading, permission: !!hasPermission || !!AccountStore.isAdmin() } + return { + isLoading, + isSuccess, + permission: !!hasPermission || !!AccountStore.isAdmin(), + } } const Permission: FC = ({ diff --git a/frontend/web/components/modals/base/Modal.tsx b/frontend/web/components/modals/base/Modal.tsx index 72c1d0dfb6a4..369252dbc624 100644 --- a/frontend/web/components/modals/base/Modal.tsx +++ b/frontend/web/components/modals/base/Modal.tsx @@ -12,6 +12,7 @@ import ModalDefault, { interceptClose, setInterceptClose } from './ModalDefault' import { getStore } from 'common/store' import { Provider } from 'react-redux' import { OpenConfirm } from '../../../../global' +import Utils from 'common/utils/utils' export const ModalHeader = _ModalHeader export const ModalFooter = _ModalFooter @@ -92,6 +93,7 @@ export const openModal = (global.openModal = ( unmountComponentAtNode(document.getElementById('modal')!) render( <_ModalDefault + key={Utils.GUID()} isOpen className={className} onClosed={onClose} diff --git a/frontend/web/components/pages/SegmentsPage.tsx b/frontend/web/components/pages/SegmentsPage.tsx index 8d5a9d7c1f04..b8ccb0995b27 100644 --- a/frontend/web/components/pages/SegmentsPage.tsx +++ b/frontend/web/components/pages/SegmentsPage.tsx @@ -25,6 +25,7 @@ import Switch from 'components/Switch' import { setModalTitle } from 'components/modals/base/ModalDefault' import classNames from 'classnames' import InfoMessage from 'components/InfoMessage' +import { withRouter } from 'react-router-dom' const CodeHelp = require('../../components/CodeHelp') type SegmentsPageType = { @@ -41,13 +42,23 @@ const SegmentsPage: FC = (props) => { const { projectId } = props.match.params const environmentId = ProjectStore.getEnvironment()?.api_key || 'ENVIRONMENT_API_KEY' - const preselect = useRef(Utils.fromParam().id) - const hasNoOperators = !Utils.getFlagsmithValue('segment_operators') + const params = Utils.fromParam() + const id = params.id const { search, searchInput, setSearchInput } = useSearchThrottle('') const [page, setPage] = useState(1) - const [showFeatureSpecific, setShowFeatureSpecific] = useState(false) + const [showFeatureSpecific, setShowFeatureSpecific] = useState( + params.featureSpecific === 'true', + ) + console.log('id is', id) + useEffect(() => { + if (id) { + editSegment(id, !manageSegmentsPermission) + } else if (!id && typeof closeModal !== 'undefined') { + closeModal() + } + }, [id]) const { data, error, isLoading, refetch } = useGetSegmentsQuery({ include_feature_specific: showFeatureSpecific, page, @@ -71,6 +82,16 @@ const SegmentsPage: FC = (props) => { props.router.history.replace(Utils.getOrganisationHomePage()) } }, [error, props.router.history]) + + useEffect(() => { + props.router.history.replace( + `${document.location.pathname}?${Utils.toParam({ + ...Utils.fromParam(), + featureSpecific: showFeatureSpecific, + })}`, + ) + }, [showFeatureSpecific]) + const newSegment = () => { openModal( 'New Segment', @@ -102,15 +123,16 @@ const SegmentsPage: FC = (props) => { const editSegment = (id: number, readOnly?: boolean) => { API.trackEvent(Constants.events.VIEW_SEGMENT) - history.replaceState({}, '', `${document.location.pathname}?id=${id}`) openModal( `Edit Segment`, + onSegmentRetrieved={(segment) => { + setShowFeatureSpecific(!!segment?.feature) setModalTitle(`Edit Segment: ${segment.name}`) - } + }} readOnly={readOnly} onComplete={() => { refetch() @@ -121,7 +143,12 @@ const SegmentsPage: FC = (props) => { />, 'side-modal create-segment-modal', () => { - history.replaceState({}, '', `${document.location.pathname}`) + props.router.history.push( + `${document.location.pathname}?${Utils.toParam({ + ...Utils.fromParam(), + id: undefined, + })}`, + ) }, ) } @@ -201,7 +228,10 @@ const SegmentsPage: FC = (props) => { filterElement={
- +
} renderSearchWithNoResults @@ -222,19 +252,6 @@ const SegmentsPage: FC = (props) => { { description, feature, id, name }: Segment, i: number, ) => { - if (preselect.current === `${id}`) { - editSegment(preselect.current, !manageSegmentsPermission) - preselect.current = null - } - - // TODO: remove this check - // I'm leaving this here for now so that we can deploy the FE and - // API independently, but we should remove this once PR #3430 is - // merged and released. - if (feature && !showFeatureSpecific) { - return null - } - return renderWithPermission( manageSegmentsPermission, 'Manage segments', @@ -243,7 +260,15 @@ const SegmentsPage: FC = (props) => { className='table-column px-3' onClick={ manageSegmentsPermission - ? () => editSegment(id, !manageSegmentsPermission) + ? () => + props.router.history.push( + `${ + document.location.pathname + }?${Utils.toParam({ + ...Utils.fromParam(), + id, + })}`, + ) : undefined } > @@ -329,4 +354,4 @@ const SegmentsPage: FC = (props) => { ) } -module.exports = ConfigProvider(SegmentsPage) +module.exports = ConfigProvider(withRouter(SegmentsPage))