Add filter action in Container

- Use filter action in NS local unit map for the tabs
- Remove withGridViewInFilter, make it default property in Container
- Remove filterContainerClassName in container

Author: frozenhelium

app/src/components/WikiLink/index.tsx

@@ -36,7 +36,7 @@ function WikiLink<N extends string>(props: Props<N>) {
             // eslint-disable-next-line react/jsx-props-no-spreading
             {...otherProps}
         >
-            <WikiHelpSectionLineIcon />
+            <WikiHelpSectionLineIcon className={styles.icon} />
         </Link>
     );
 }

app/src/components/WikiLink/styles.module.css

@@ -1,3 +1,8 @@
 .wiki-link {
-    font-size: var(--go-ui-font-size-3xl);
+    padding: 0;
+    font-size: var(--go-ui-font-size-2xl);
+
+    .icon {
+        transform: scale(1.4);
+    }
 }

app/src/components/domain/ActiveOperationMap/index.tsx

@@ -382,7 +382,6 @@ function ActiveOperationMap(props: Props) {
             heading={!presentationMode && heading}
             withHeaderBorder={!presentationMode}
             childrenContainerClassName={styles.content}
-            withGridViewInFilter
             filters={!presentationMode && (
                 <>
                     <DateInput

app/src/components/domain/AppealsTable/index.tsx

@@ -254,7 +254,6 @@ function AppealsTable(props: Props) {
         <Container
             className={_cs(styles.appealsTable, className)}
             childrenContainerClassName={styles.content}
-            withGridViewInFilter
             heading={heading}
             withHeaderBorder={isDefined(heading)}
             filters={(

app/src/components/domain/HistoricalDataChart/index.tsx

@@ -193,7 +193,6 @@ function HistoricalDataChart(props: Props) {
             className={styles.historicalDataChart}
             heading={strings.historicalChartHeading}
             withHeaderBorder
-            filtersContainerClassName={styles.filters}
             filters={(
                 <SelectInput
                     name={undefined}

app/src/components/domain/HistoricalDataChart/styles.module.css

@@ -2,12 +2,6 @@
     --hazard-icon-size: var(--go-ui-font-size-xl);
     --hazard-point-size: var(--go-ui-font-size-2xl);
 
-    .filters {
-        display: grid;
-        grid-gap: var(--go-ui-spacing-md);
-        grid-template-columns: repeat(auto-fill, minmax(20rem, 1fr));
-    }
-
     .chart-container {
         height: 20rem;
 

app/src/components/domain/RiskSeasonalMap/index.tsx

@@ -876,7 +876,6 @@ function RiskSeasonalMap(props: Props) {
         <Container
             className={_cs(styles.riskSeasonalMapContainer, className)}
             heading={strings.riskSeasonalMapHeading}
-            withGridViewInFilter
             filters={(
                 <Filters
                     regionId={Number(regionId)}

app/src/components/domain/SurgeCatalogueContainer/index.tsx

@@ -54,7 +54,6 @@ function SurgeCatalogueContainer(props: Props) {
             heading={heading}
             headerDescription={description}
             headerDescriptionContainerClassName={styles.description}
-            filtersContainerClassName={styles.imageList}
             filters={imageList?.map(
                 (image) => (
                     <Image

app/src/components/domain/SurgeCatalogueContainer/styles.module.css

@@ -1,16 +1,11 @@
 .surge-catalogue-container {
     .back-icon {
-        font-size: var(--go-ui-height-icon-multiplier);
+        transform: scale(1.2);
+        font-size: var(--go-ui-font-size-2xl);
     }
 
-    .image-list {
-        display: grid;
-        grid-gap: var(--go-ui-spacing-sm);
-        grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr));
-
-        .image {
-            height: 12rem;
-        }
+    .image {
+        height: 12rem;
     }
 
     .description {

app/src/utils/constants.ts

@@ -189,3 +189,5 @@ export const UN_ORGANIZATION = 0;
 export const PRIVATE_SECTOR = 1;
 export const GOVERNMENT = 2;
 export const NATIONAL_SOCIETY = 3;
+
+export const MAX_PAGE_LIMIT = 9999;