added remote config

MobilityData · Dec 2, 2024 · dfa0c74 · dfa0c74
1 parent d897d40
commit dfa0c74
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 29 deletions.
diff --git a/web-app/src/app/interface/RemoteConfig.ts b/web-app/src/app/interface/RemoteConfig.ts
@@ -28,6 +28,7 @@ export interface RemoteConfigValues extends FirebaseDefaultConfig {
   /** GBFS metrics' bucket endpoint */
   gbfsMetricsBucketEndpoint: string;
   featureFlagBypass: string;
+  enableFeatureFilterSearch: boolean;
 }
 
 const featureByPassDefault: BypassConfig = {
@@ -46,6 +47,7 @@ export const defaultRemoteConfigValues: RemoteConfigValues = {
   gbfsMetricsBucketEndpoint:
     'https://storage.googleapis.com/mobilitydata-gbfs-analytics-dev',
   featureFlagBypass: JSON.stringify(featureByPassDefault),
+  enableFeatureFilterSearch: false,
 };
 
 remoteConfig.defaultConfig = defaultRemoteConfigValues;
diff --git a/web-app/src/app/screens/Feeds/index.tsx b/web-app/src/app/screens/Feeds/index.tsx
@@ -38,9 +38,11 @@ import {
   getInitialSelectedFeedTypes,
 } from './utility';
 import { SearchHeader } from './styles';
+import { useRemoteConfig } from '../../context/RemoteConfigProvider';
 
 export default function Feed(): React.ReactElement {
   const { t } = useTranslation('feeds');
+  const { config } = useRemoteConfig();
   const [searchParams, setSearchParams] = useSearchParams();
   const [searchLimit] = useState(20); // leaving possibility to edit in future
   const [selectedFeedTypes, setSelectedFeedTypes] = useState(
@@ -291,7 +293,17 @@ export default function Feed(): React.ReactElement {
                 spacing={1}
                 sx={{ flexWrap: { xs: 'wrap', md: 'nowrap' } }}
               >
-                <Grid item xs={12} md={2} sx={{ minWidth: '275px', pr: 2 }}>
+                <Grid
+                  item
+                  xs={12}
+                  md={2}
+                  sx={{
+                    minWidth: config.enableFeatureFilterSearch
+                      ? '275px'
+                      : '220px',
+                    pr: 2,
+                  }}
+                >
                   <SearchHeader variant='h6'>{t('dataType')}</SearchHeader>
                   <NestedCheckboxList
                     checkboxData={[
@@ -315,36 +327,40 @@ export default function Feed(): React.ReactElement {
                       });
                     }}
                   ></NestedCheckboxList>
-                  <SearchHeader variant='h6'>Features</SearchHeader>
-                  <NestedCheckboxList
-                    checkboxData={featureCheckboxData}
-                    onExpandGroupChange={(checkboxData) => {
-                      const newExpandGroup: Record<string, boolean> = {};
-                      checkboxData.forEach((cd) => {
-                        if (cd.seeChildren !== undefined) {
-                          newExpandGroup[cd.title] = cd.seeChildren;
-                        }
-                      });
-                      setExpandedElements({
-                        ...expandedElements,
-                        ...newExpandGroup,
-                      });
-                    }}
-                    onCheckboxChange={(checkboxData) => {
-                      const selelectedFeatures: string[] = [];
-                      checkboxData.forEach((checkbox) => {
-                        if (checkbox.children !== undefined) {
-                          checkbox.children.forEach((child) => {
-                            if (child.checked) {
-                              selelectedFeatures.push(child.title);
+                  {config.enableFeatureFilterSearch && (
+                    <>
+                      <SearchHeader variant='h6'>Features</SearchHeader>
+                      <NestedCheckboxList
+                        checkboxData={featureCheckboxData}
+                        onExpandGroupChange={(checkboxData) => {
+                          const newExpandGroup: Record<string, boolean> = {};
+                          checkboxData.forEach((cd) => {
+                            if (cd.seeChildren !== undefined) {
+                              newExpandGroup[cd.title] = cd.seeChildren;
                             }
                           });
-                        }
-                      });
-                      setActivePagination(1);
-                      setSelectedFeatures(selelectedFeatures);
-                    }}
-                  />
+                          setExpandedElements({
+                            ...expandedElements,
+                            ...newExpandGroup,
+                          });
+                        }}
+                        onCheckboxChange={(checkboxData) => {
+                          const selelectedFeatures: string[] = [];
+                          checkboxData.forEach((checkbox) => {
+                            if (checkbox.children !== undefined) {
+                              checkbox.children.forEach((child) => {
+                                if (child.checked) {
+                                  selelectedFeatures.push(child.title);
+                                }
+                              });
+                            }
+                          });
+                          setActivePagination(1);
+                          setSelectedFeatures(selelectedFeatures);
+                        }}
+                      />
+                    </>
+                  )}
                 </Grid>
 
                 <Grid item xs={12} md={10}>