Skip to content

feat: gate search filters to prevent display when disabled in remote config #227

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
aminamos wants to merge 1 commit into from
Closed

feat: gate search filters to prevent display when disabled in remote config #227

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
129 changes: 24 additions & 105 deletions src/app/screens/Feeds/SearchFilters.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -15,69 +15,17 @@ import {
import NestedCheckboxList, {
type CheckboxStructure,
} from '../../components/NestedCheckboxList';
import AccessRequiredPopover from '../../components/AccessRequiredPopover';
import { useTranslations } from 'next-intl';
import { useRemoteConfig } from '../../context/RemoteConfigProvider';
import { useSealOfReliabilityFilterAccess } from '../../hooks/useSealOfReliabilityFilterAccess';
import { Link } from '../../../i18n/navigation';
import ExpandMoreIcon from '@mui/icons-material/ExpandMore';
import LockIcon from '@mui/icons-material/Lock';
import OpenInNewIcon from '@mui/icons-material/OpenInNew';
import { useEffect, useState } from 'react';
import { DATASET_FEATURES, groupFeaturesByComponent } from '../../utils/consts';
import { type GbfsVersionConfig } from '../../interface/RemoteConfig';
import { SearchHeader } from '../../styles/Filters.styles';

const SEAL_FILTER_ACCESS_FORM_URL =
'https://docs.google.com/forms/d/1jzrqXkxkRHp_TrRHM6fSxeF2nMX3RSvrAXC2dlovZDU/viewform?edit_requested=true';

interface SealFilterRowProps {
checked: boolean;
disabled?: boolean;
locked?: boolean;
onClick?: (event: React.MouseEvent<HTMLElement>) => void;
}

function SealFilterRow({
checked,
disabled,
locked,
onClick,
}: SealFilterRowProps): React.ReactElement {
return (
<List sx={{ width: '100%' }} dense>
<ListItem disablePadding>
<ListItemButton
disabled={disabled}
dense
sx={{ p: 0, display: 'flex', justifyContent: 'space-between' }}
onClick={onClick}
>
<Box sx={{ display: 'flex', alignItems: 'center' }}>
<Checkbox
edge='start'
tabIndex={-1}
disableRipple
checked={checked}
/>
<ListItemText
primary={<b>Seal of Reliability</b>}
slotProps={{
primary: {
variant: 'body1',
color: locked ? 'text.disabled' : undefined,
},
}}
/>
</Box>
{locked === true && (
<LockIcon fontSize='small' sx={{ opacity: 0.6, mr: 1 }}></LockIcon>
)}
</ListItemButton>
</ListItem>
</List>
);
}

function setInitialExpandGroup(): Record<string, boolean> {
const expandGroup: Record<string, boolean> = {};
Expand Down Expand Up @@ -142,13 +90,9 @@ export function SearchFilters({
const { config } = useRemoteConfig();
const {
isFeatureLive: isSealOfReliabilityLive,
isPending: isSealAccessPending,
hasNoAccess: hasNoSealAccess,
hasAccess: hasSealAccess,
} = useSealOfReliabilityFilterAccess();

const [sealAccessPopoverAnchor, setSealAccessPopoverAnchor] =
useState<HTMLElement | null>(null);

const gbfsVersionsObject: GbfsVersionConfig = JSON.parse(config.gbfsVersions);

const [expandedCategories, setExpandedCategories] = useState<
Expand Down Expand Up @@ -261,25 +205,8 @@ export function SearchFilters({
></NestedCheckboxList>

{isSealOfReliabilityLive &&
(!areFeatureFiltersEnabled || isSealAccessPending ? (
<SealFilterRow
checked={
!areFeatureFiltersEnabled || hasNoSealAccess
? false
: hasSealFeedSearch
}
disabled
locked={hasNoSealAccess}
/>
) : hasNoSealAccess ? (
<SealFilterRow
checked={false}
locked
onClick={(e) => {
setSealAccessPopoverAnchor(e.currentTarget);
}}
/>
) : (
hasSealAccess &&
areFeatureFiltersEnabled && (
<NestedCheckboxList
checkboxData={[
{
Expand All @@ -292,37 +219,29 @@ export function SearchFilters({
setHasSealFeedSearch(checkboxData[0].checked);
}}
></NestedCheckboxList>
))}
)}
</Box>

{isSealOfReliabilityLive && (
<MuiLink
component={Link}
href='/seal-of-reliability'
target='_blank'
rel='noopener noreferrer'
variant='caption'
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.25,
mt: 0.5,
}}
>
{t('sealOfReliabilityLearnMore')}
<OpenInNewIcon sx={{ fontSize: '0.9rem' }} />
</MuiLink>
)}

<AccessRequiredPopover
anchorEl={sealAccessPopoverAnchor}
onClose={() => {
setSealAccessPopoverAnchor(null);
}}
title='Seal of Reliability Filtering Access Required'
description='This feature requires a MobilityData membership. Log in or request access to continue'
requestAccessUrl={SEAL_FILTER_ACCESS_FORM_URL}
/>
{isSealOfReliabilityLive &&
hasSealAccess &&
areFeatureFiltersEnabled && (
<MuiLink
component={Link}
href='/seal-of-reliability'
target='_blank'
rel='noopener noreferrer'
variant='caption'
sx={{
display: 'inline-flex',
alignItems: 'center',
gap: 0.25,
mt: 0.5,
}}
>
{t('sealOfReliabilityLearnMore')}
<OpenInNewIcon sx={{ fontSize: '0.9rem' }} />
</MuiLink>
)}
</>

<Accordion
Expand Down