Merge pull request #954 from IFRCGo/fix/healthcare-hot-fixes

samshara · web-flow · commit e809fbc509c4 · 2024-05-10T17:06:19.000+05:45
Healthcare hot fixes
diff --git a/.changeset/perfect-lizards-return.md b/.changeset/perfect-lizards-return.md
@@ -0,0 +1,5 @@
+---
+"go-web-app": patch
+---
+
+Integrate mapbox street view for local units map
diff --git a/.changeset/smart-plums-remember.md b/.changeset/smart-plums-remember.md
@@ -0,0 +1,5 @@
+---
+"@ifrc-go/ui": patch
+---
+
+Add ellipsize prop to Heading component
diff --git a/app/src/components/Link/index.tsx b/app/src/components/Link/index.tsx
@@ -285,6 +285,8 @@ function Link(props: Props) {
                 ellipsize && styles.ellipsized,
                 className,
             )}
+            title={(ellipsize && typeof childrenFromProps === 'string')
+                ? childrenFromProps : undefined}
         >
             {children}
         </div>
diff --git a/app/src/components/Link/styles.module.css b/app/src/components/Link/styles.module.css
@@ -7,6 +7,7 @@
     width: fit-content;
 
     &.ellipsized {
+        width: 100%;
         overflow: auto;
     }
 
diff --git a/app/src/components/domain/ActiveCountryBaseMapLayer/index.tsx b/app/src/components/domain/ActiveCountryBaseMapLayer/index.tsx
@@ -12,6 +12,13 @@ import {
     COLOR_WHITE,
 } from '#utils/constants';
 
+const hiddenFillLayerOptions: Omit<FillLayer, 'id'> = {
+    type: 'fill',
+    layout: {
+        visibility: 'none',
+    },
+};
+
 interface Props {
     activeCountryIso3: string | undefined | null;
 }
@@ -25,10 +32,18 @@ function ActiveCountryBaseMapLayer(props: Props) {
             layout: { visibility: 'visible' },
             paint: {
                 'fill-color': [
-                    'match',
-                    ['get', 'iso3'],
-                    activeCountryIso3,
-                    COLOR_ACTIVE_REGION,
+                    'interpolate',
+                    ['linear'],
+                    ['zoom'],
+                    2,
+                    [
+                        'match',
+                        ['get', 'iso3'],
+                        activeCountryIso3,
+                        COLOR_ACTIVE_REGION,
+                        COLOR_LIGHT_GREY,
+                    ],
+                    10,
                     COLOR_LIGHT_GREY,
                 ],
             },
@@ -80,6 +95,10 @@ function ActiveCountryBaseMapLayer(props: Props) {
                 layerKey="admin-0"
                 layerOptions={adminZeroHighlightLayerOptions}
             />
+            <MapLayer
+                layerKey="admin-0-highlight"
+                layerOptions={hiddenFillLayerOptions}
+            />
             <MapLayer
                 layerKey="admin-1-boundary"
                 layerOptions={adminOneBoundaryLayerOptions}
diff --git a/app/src/components/domain/HighlightedOperations/OperationCard/index.tsx b/app/src/components/domain/HighlightedOperations/OperationCard/index.tsx
@@ -119,6 +119,8 @@ function OperationCard(props: Props) {
         <Container
             className={_cs(styles.operationCard, className)}
             // heading={name}
+            headingClassName={styles.heading}
+            headingContainerClassName={styles.headingContainer}
             heading={(
                 <Link
                     to="emergenciesLayout"
diff --git a/app/src/components/domain/HighlightedOperations/OperationCard/styles.module.css b/app/src/components/domain/HighlightedOperations/OperationCard/styles.module.css
@@ -1,6 +1,18 @@
 .operation-card {
     border-radius: var(--go-ui-border-radius-lg);
     box-shadow: var(--go-ui-box-shadow-md);
+    width: 100%;
+    overflow: auto;
+
+    .heading-container {
+        width: 100%;
+        overflow: auto;
+    }
+
+    .heading {
+        width: 100%;
+        overflow: auto;
+    }
 
     .severity-indicator {
         font-size: var(--go-ui-font-size-xl);
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsMap/index.tsx
@@ -1,4 +1,4 @@
-import react from 'react';
+import react, { useMemo } from 'react';
 import { useOutletContext } from 'react-router-dom';
 import {
     LocationIcon,
@@ -34,7 +34,7 @@ import BaseMap from '#components/domain/BaseMap';
 import Link, { type Props as LinkProps } from '#components/Link';
 import MapContainerWithDisclaimer from '#components/MapContainerWithDisclaimer';
 import MapPopup from '#components/MapPopup';
-import useUserMe from '#hooks/domain/useUserMe';
+import usePermissions from '#hooks/domain/usePermissions';
 import useFilterState from '#hooks/useFilterState';
 import {
     COLOR_DARK_GREY,
@@ -49,7 +49,11 @@ import {
     useRequest,
 } from '#utils/restRequest';
 
-import { VALIDATED } from '../common';
+import {
+    AUTHENTICATED,
+    PUBLIC,
+    VALIDATED,
+} from '../common';
 import Filters, { FilterValue } from '../Filters';
 
 import i18n from './i18n.json';
@@ -127,13 +131,28 @@ function LocalUnitsMap() {
         [limit, filter, countryResponse],
     );
 
-    const meResponse = useUserMe();
+    const { isCountryAdmin, isSuperUser } = usePermissions();
+
+    const requestType = useMemo(
+        () => {
+            if (isSuperUser) {
+                return 'authenticated';
+            }
+
+            if (isCountryAdmin(countryResponse?.id)) {
+                return 'authenticated';
+            }
+
+            return 'public';
+        },
+        [countryResponse, isSuperUser, isCountryAdmin],
+    );
 
     const {
         response: publicLocalUnitsResponse,
         pending: publicLocalUnitsPending,
     } = useRequest({
-        skip: isNotDefined(countryResponse?.iso3) || meResponse?.is_superuser,
+        skip: requestType !== PUBLIC || isNotDefined(countryResponse),
         url: '/api/v2/public-local-units/',
         query: urlQuery,
     });
@@ -142,14 +161,13 @@ function LocalUnitsMap() {
         response: localUnitsResponse,
         pending: localUnitsPending,
     } = useRequest({
-        skip: isNotDefined(countryResponse?.iso3)
-            || isNotDefined(meResponse)
-            || !meResponse.is_superuser,
+        skip: requestType !== AUTHENTICATED || isNotDefined(countryResponse),
         url: '/api/v2/local-units/',
         query: urlQuery,
     });
 
-    const localUnits = meResponse?.is_superuser ? localUnitsResponse : publicLocalUnitsResponse;
+    const localUnits = (isSuperUser || isCountryAdmin(countryResponse?.id))
+        ? localUnitsResponse : publicLocalUnitsResponse;
     const pending = publicLocalUnitsPending || localUnitsPending;
 
     const strings = useTranslation(i18n);
@@ -218,7 +236,7 @@ function LocalUnitsMap() {
         pending: publicLocalUnitDetailPending,
         error: publicLocalUnitDetailError,
     } = useRequest({
-        skip: isNotDefined(clickedPointProperties?.localUnitId) || meResponse?.is_superuser,
+        skip: requestType !== PUBLIC || isNotDefined(clickedPointProperties),
         url: '/api/v2/public-local-units/{id}/',
         pathVariables: isDefined(clickedPointProperties) ? ({
             id: clickedPointProperties.localUnitId,
@@ -230,26 +248,24 @@ function LocalUnitsMap() {
         pending: superLocalUnitDetailPending,
         error: superLocalUnitDetailError,
     } = useRequest({
-        skip: isNotDefined(clickedPointProperties?.localUnitId)
-            || isNotDefined(meResponse)
-            || !meResponse.is_superuser,
+        skip: requestType !== AUTHENTICATED || isNotDefined(clickedPointProperties),
         url: '/api/v2/local-units/{id}/',
         pathVariables: isDefined(clickedPointProperties) ? ({
             id: clickedPointProperties.localUnitId,
         }) : undefined,
     });
 
-    const localUnitDetail = meResponse?.is_superuser
-        ? superLocalUnitDetailResponse
-        : publicLocalUnitDetailResponse;
+    const localUnitDetail = requestType !== AUTHENTICATED
+        ? publicLocalUnitDetailResponse
+        : superLocalUnitDetailResponse;
 
-    const localUnitDetailPending = meResponse?.is_superuser
-        ? superLocalUnitDetailPending
-        : publicLocalUnitDetailPending;
+    const localUnitDetailPending = requestType !== AUTHENTICATED
+        ? publicLocalUnitDetailPending
+        : superLocalUnitDetailPending;
 
-    const localUnitDetailError = meResponse?.is_superuser
-        ? superLocalUnitDetailError
-        : publicLocalUnitDetailError;
+    const localUnitDetailError = requestType !== AUTHENTICATED
+        ? publicLocalUnitDetailError
+        : superLocalUnitDetailError;
 
     const localUnitsGeoJson = react.useMemo<GeoJSON.FeatureCollection<GeoJSON.Geometry>>(
         () => ({
@@ -337,6 +353,7 @@ function LocalUnitsMap() {
         >
             <div className={styles.mapContainerWithContactDetails}>
                 <BaseMap
+                    mapStyle="mapbox://styles/go-ifrc/clvvgugzh00x501pc1n00b8cz"
                     withoutLabel
                     baseLayers={(
                         <ActiveCountryBaseMapLayer
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/LocalUnitTableActions/index.tsx
@@ -38,6 +38,7 @@ function LocalUnitsTableActions(props: Props) {
     const alert = useAlert();
 
     const hasValidatePermission = isSuperUser || isCountryAdmin(countryId);
+
     const {
         pending: validateLocalUnitPending,
         trigger: validateLocalUnit,
@@ -82,24 +83,26 @@ function LocalUnitsTableActions(props: Props) {
                     >
                         {strings.localUnitsView}
                     </DropdownMenuItem>
-                    {!(isValidated) && hasValidatePermission && (
-                        <DropdownMenuItem
-                            persist
-                            name={undefined}
-                            type="confirm-button"
-                            variant="tertiary"
-                            className={styles.button}
-                            confirmHeading={strings.validateLocalUnitHeading}
-                            confirmMessage={resolveToString(
-                                strings.validateLocalUnitMessage,
-                                { localUnitName: localUnitName ?? '' },
-                            )}
-                            onConfirm={handleLocalUnitValidate}
-                            disabled={validateLocalUnitPending}
-                        >
-                            {strings.localUnitsValidate}
-                        </DropdownMenuItem>
-                    )}
+                    <DropdownMenuItem
+                        persist
+                        name={undefined}
+                        type="confirm-button"
+                        variant="tertiary"
+                        className={styles.button}
+                        confirmHeading={strings.validateLocalUnitHeading}
+                        confirmMessage={resolveToString(
+                            strings.validateLocalUnitMessage,
+                            { localUnitName: localUnitName ?? '' },
+                        )}
+                        onConfirm={handleLocalUnitValidate}
+                        disabled={
+                            validateLocalUnitPending
+                        || !hasValidatePermission
+                        || isValidated
+                        }
+                    >
+                        {strings.localUnitsValidate}
+                    </DropdownMenuItem>
                 </>
             )}
         />
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/LocalUnitsTable/index.tsx
@@ -122,7 +122,7 @@ function LocalUnitsTable() {
                 '',
                 LocalUnitsTableActions,
                 (_, item) => ({
-                    countryId: item.id,
+                    countryId: item.country,
                     localUnitId: item.id,
                     isValidated: item.validated,
                     localUnitName: item.local_branch_name ?? item.english_branch_name,
diff --git a/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/common.ts b/app/src/views/CountryNsOverviewContextAndStructure/NationalSocietyLocalUnits/common.ts
@@ -1,4 +1,7 @@
 export type Validation = 'Validated' | 'Not Validated';
+export type RequestType = 'authenticated' | 'public';
 
 export const VALIDATED = 'Validated' satisfies Validation;
 export const NOT_VALIDATED = 'Not Validated' satisfies Validation;
+export const AUTHENTICATED = 'authenticated' satisfies RequestType;
+export const PUBLIC = 'public' satisfies RequestType;
diff --git a/packages/ui/src/components/LegendItem/styles.module.css b/packages/ui/src/components/LegendItem/styles.module.css
@@ -16,6 +16,7 @@
         align-items: center;
         justify-content: center;
         border-radius: 50%;
+        padding: var(--go-ui-spacing-2xs);
         width: 1.2rem;
         height: 1.2rem;
 

-Original file line number
+Diff line change
@@ @@ -0,0 +1,5 @@ @@
 +---
 +"go-web-app": patch
 +---
++
 +Integrate mapbox street view for local units map
Original file line number	Diff line number	Diff line change
`@@ -285,6 +285,8 @@ function Link(props: Props) {`
`285`	`285`	`ellipsize && styles.ellipsized,`
`286`	`286`	`className,`
`287`	`287`	`)}`
	`288`	`+ title={(ellipsize && typeof childrenFromProps === 'string')`
	`289`	`+ ? childrenFromProps : undefined}`
`288`	`290`	`>`
`289`	`291`	`{children}`
`290`	`292`	`</div>`
Original file line number	Diff line number	Diff line change
`@@ -7,6 +7,7 @@`
`7`	`7`	`width: fit-content;`
`8`	`8`
`9`	`9`	`&.ellipsized {`
	`10`	`+ width: 100%;`
`10`	`11`	`overflow: auto;`
`11`	`12`	`}`
`12`	`13`