Merge branch 'main' into 1171-Cookie-Consent---Clean-up

NASA-IMPACT · Oct 30, 2024 · 64a09d2 · 64a09d2
2 parents fe3572a + 1046666
commit 64a09d2
Show file tree

Hide file tree

Showing 54 changed files with 1,648 additions and 133 deletions.
diff --git a/.eslintrc b/.eslintrc
@@ -114,6 +114,10 @@
       "parserOptions": {
         "project": ["./tsconfig.json"]
       }
+    },
+    {
+      "files": "test/playwright/**",
+      "extends": "plugin:playwright/recommended"
     }
   ]
 }
diff --git a/.github/workflows/checks.yml b/.github/workflows/checks.yml
@@ -122,3 +122,39 @@ jobs:
 
       - name: Test
         run: yarn test
+
+  playwright:
+    timeout-minutes: 60
+    needs: prep
+    runs-on: ubuntu-latest
+    if: startsWith(github.ref, 'refs/heads/release')
+
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v2
+
+      - name: Use Node.js ${{ env.NODE }}
+        uses: actions/setup-node@v3
+        with:
+          node-version: ${{ env.NODE }}
+
+      - name: Cache node_modules
+        uses: actions/cache@v3
+        id: cache-node-modules
+        with:
+          path: node_modules
+          key: ${{ runner.os }}-build-${{ env.cache-name }}-${{ hashFiles('**/package.json') }}
+
+      - name: Install
+        run: yarn install
+
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
+      - name: Run Playwright tests
+        run: MAPBOX_TOKEN="${{secrets.MAPBOX_TOKEN}}" yarn test:e2e
+      - uses: actions/upload-artifact@v4
+        if: always()
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30
diff --git a/.gitignore b/.gitignore
@@ -76,3 +76,15 @@ dist
 .vscode/*
 !.vscode/settings.json.sample
 lib
+
+################################################
+# Playwright
+#
+# Files generated by Playwright tests
+################################################
+
+**/playwrightTestData.json
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/app/scripts/components/common/card/index.tsx b/app/scripts/components/common/card/index.tsx
@@ -375,3 +375,4 @@ function CardComponent(props: CardComponentPropsType) {
 export const Card = styled(CardComponent)`
   /* Convert to styled-component: https://styled-components.com/docs/advanced#caveat */
 `;
+
diff --git a/app/scripts/components/common/layout-root/index.tsx b/app/scripts/components/common/layout-root/index.tsx
@@ -5,6 +5,7 @@ import React, {
   useEffect,
   useState
 } from 'react';
+import { Link } from 'react-router-dom';
 import { useDeepCompareEffect } from 'use-deep-compare';
 import styled from 'styled-components';
 import { Outlet } from 'react-router';
@@ -80,7 +81,7 @@ function LayoutRoot(props: { children?: ReactNode }) {
       <NavWrapper
         mainNavItems={mainNavItems}
         subNavItems={subNavItems}
-        logo={<Logo />}
+        logo={<Logo linkProperties={{LinkElement: Link, pathAttributeKeyName: 'to'}} />}
       />
       <PageBody id={PAGE_BODY_ID} tabIndex={-1}>
         <Outlet />

diff --git a/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx b/app/scripts/components/common/map/controls/aoi/custom-aoi-control.tsx
@@ -89,13 +89,20 @@ function CustomAoI({
     const mbDraw = map?._drawControl;
     if (!mbDraw) return;
     const aoiSelectedFor = selectedForEditing ? SIMPLE_SELECT : STATIC_MODE;
-    mbDraw.changeMode(aoiSelectedFor);
+    const selectedFeatures = features.filter(f => f.selected);
+
+    if (selectedFeatures.length > 0) {
+      const selectedIds = selectedFeatures.map(f => f.id);
+      mbDraw.changeMode(aoiSelectedFor, {
+        featureIds: selectedIds
+      });
+    }
     const onSelChange = () => forceUpdate(Date.now());
     map.on('draw.selectionchange', onSelChange);
     return () => {
       map.off('draw.selectionchange', onSelChange);
     };
-  }, [map, selectedForEditing]);
+  }, [selectedForEditing]);
 
   const resetAoisOnMap = useCallback(() => {
     const mbDraw = map?._drawControl;

diff --git a/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx b/app/scripts/components/common/map/style-generators/raster-paint-layer.tsx
@@ -13,6 +13,7 @@ interface RasterPaintLayerProps extends BaseGeneratorParams {
   colorMap?: string | undefined;
   tileParams: Record<string, any>;
   generatorPrefix?: string;
+  reScale?: { min: number; max: number };
 }
 
 export function RasterPaintLayer(props: RasterPaintLayerProps) {
@@ -24,16 +25,23 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
     hidden,
     opacity,
     colorMap,
-    generatorPrefix = 'raster',
+    reScale,
+    generatorPrefix = 'raster'
   } = props;
 
   const { updateStyle } = useMapStyle();
   const [minZoom] = zoomExtent ?? [0, 20];
   const generatorId = `${generatorPrefix}-${id}`;
 
   const updatedTileParams = useMemo(() => {
-    return { ...tileParams, ...colorMap &&  {colormap_name: colorMap}};
-  }, [tileParams, colorMap]);
+    return {
+      ...tileParams,
+      ...(colorMap && {
+        colormap_name: colorMap
+      }),
+      ...(reScale && { rescale: Object.values(reScale) })
+    };
+  }, [tileParams, colorMap, reScale]);
 
   //
   // Generate Mapbox GL layers and sources for raster timeseries
@@ -47,7 +55,9 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
 
   useEffect(
     () => {
-      const tileParamsAsString = qs.stringify(updatedTileParams, { arrayFormat: 'comma' });
+      const tileParamsAsString = qs.stringify(updatedTileParams, {
+        arrayFormat: 'comma'
+      });
 
       const zarrSource: RasterSource = {
         type: 'raster',
@@ -63,8 +73,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
         paint: {
           'raster-opacity': hidden ? 0 : rasterOpacity,
           'raster-opacity-transition': {
-            duration: 320,
-          },
+            duration: 320
+          }
         },
         minzoom: minZoom,
         metadata: {
@@ -93,7 +103,8 @@ export function RasterPaintLayer(props: RasterPaintLayerProps) {
       tileApiEndpoint,
       haveTileParamsChanged,
       generatorParams,
-      colorMap
+      colorMap,
+      reScale
       // generatorParams includes hidden and opacity
       // hidden,
       // opacity,

diff --git a/app/scripts/components/common/map/style-generators/raster-timeseries.tsx b/app/scripts/components/common/map/style-generators/raster-timeseries.tsx
@@ -63,10 +63,10 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
     stacApiEndpoint,
     tileApiEndpoint,
     colorMap,
+    reScale
   } = props;
 
   const { current: mapInstance } = useMaps();
-
   const theme = useTheme();
   const { updateStyle } = useMapStyle();
 
@@ -270,7 +270,9 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
             controller
           });
           const mosaicUrl = responseData.links[1].href;
-          setMosaicUrl(mosaicUrl.replace('/{tileMatrixSetId}', '/WebMercatorQuad'));
+          setMosaicUrl(
+            mosaicUrl.replace('/{tileMatrixSetId}', '/WebMercatorQuad')
+          );
         } catch (error) {
           // @NOTE: conditional logic TO BE REMOVED once new BE endpoints have moved to prod... Fallback on old request url if new endpoints error with nonexistance...
           if (error.request) {
@@ -284,10 +286,14 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
             const mosaicUrl = responseData.links[1].href;
             setMosaicUrl(mosaicUrl);
           } else {
-              LOG &&
+            LOG &&
               /* eslint-disable-next-line no-console */
-              console.log('Titiler /register %cEndpoint error', 'color: red;', error);
-              throw error;
+              console.log(
+                'Titiler /register %cEndpoint error',
+                'color: red;',
+                error
+              );
+            throw error;
           }
         }
 
@@ -361,7 +367,8 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
           {
             assets: 'cog_default',
             ...(sourceParams ?? {}),
-            ...colorMap &&  {colormap_name: colorMap}
+            ...(colorMap && { colormap_name: colorMap }),
+            ...(reScale && {rescale: Object.values(reScale)})
           },
           // Temporary solution to pass different tile parameters for hls data
           {
@@ -489,6 +496,7 @@ export function RasterTimeseries(props: RasterTimeseriesProps) {
   }, [
     mosaicUrl,
     colorMap,
+    reScale,
     points,
     minZoom,
     haveSourceParamsChanged,

diff --git a/app/scripts/components/common/map/types.d.ts b/app/scripts/components/common/map/types.d.ts
@@ -54,6 +54,7 @@ export interface BaseTimeseriesProps extends BaseGeneratorParams {
   zoomExtent?: number[];
   onStatusChange?: (result: { status: ActionStatus; id: string }) => void;
   colorMap?: string;
+  reScale?: { min: number; max: number };
 }
 
 // export interface ZarrTimeseriesProps extends BaseTimeseriesProps {

diff --git a/app/scripts/components/common/nav-wrapper.js b/app/scripts/components/common/nav-wrapper.js
@@ -1,7 +1,7 @@
 import React from 'react';
 import styled, { css } from 'styled-components';
 import { themeVal } from '@devseed-ui/theme-provider';
-
+import { NavLink } from 'react-router-dom';
 import PageHeader from './page-header';
 import { useSlidingStickyHeaderProps } from './layout-root/useSlidingStickyHeaderProps';
 
@@ -35,7 +35,10 @@ function PageNavWrapper(props) {
       shouldSlideHeader={isHeaderHidden}
       headerHeight={headerHeight}
     >
-      <PageHeader {...props} />
+      <PageHeader
+        {...props}
+        linkProperties={{ LinkElement: NavLink, pathAttributeKeyName: 'to' }}
+      />
     </NavWrapper>
   );
 }

diff --git a/app/scripts/components/common/page-header/index.tsx b/app/scripts/components/common/page-header/index.tsx
@@ -15,6 +15,7 @@ import {
 } from '@devseed-ui/collecticons';
 
 import UnscrollableBody from '../unscrollable-body';
+import { LinkProperties } from '../card';
 import NavMenuItem from './nav-menu-item';
 import { NavItem } from './types';
 
@@ -229,14 +230,13 @@ const GlobalMenu = styled.ul`
 interface PageHeaderProps {
   mainNavItems: NavItem[];
   subNavItems: NavItem[];
-  logo: ReactElement
+  logo: ReactElement;
+  linkProperties: LinkProperties;
 }
 
-
 function PageHeader(props: PageHeaderProps) {
-  const { mainNavItems, subNavItems, logo } = props;
+  const { mainNavItems, subNavItems, logo, linkProperties } = props;
   const { isMediumDown } = useMediaQuery();
-
   const [globalNavRevealed, setGlobalNavRevealed] = useState(false);
 
   const globalNavBodyRef = useRef<HTMLDivElement>(null);
@@ -276,7 +276,6 @@ function PageHeader(props: PageHeaderProps) {
     <>
     <SROnly href='#' onClick={skipNav}>Skip to main content</SROnly>
     <PageHeaderSelf id={HEADER_ID}>
-
       {globalNavRevealed && isMediumDown && <UnscrollableBody />}
       {logo}
       {isMediumDown && (
@@ -317,15 +316,15 @@ function PageHeader(props: PageHeaderProps) {
                 <GlobalNavBlockTitle>Global</GlobalNavBlockTitle>
                 <GlobalMenu>
                   {mainNavItems.map((item) => {
-                    return <NavMenuItem key={`${item.title}-nav-item`} item={item} alignment='left' onClick={closeNavOnClick} />;
+                    return <NavMenuItem linkProperties={linkProperties} key={`${item.title}-nav-item`} item={item} alignment='left' onClick={closeNavOnClick} />;
                   })}
                 </GlobalMenu>
               </SectionsNavBlock>
               <SectionsNavBlock>
                 <GlobalNavBlockTitle>Meta</GlobalNavBlockTitle>
                 <GlobalMenu>
                   {subNavItems.map((item) => {
-                    return <NavMenuItem key={`${item.title}-nav-item`} item={item} alignment='right' onClick={closeNavOnClick} />;
+                    return <NavMenuItem linkProperties={linkProperties} key={`${item.title}-nav-item`} item={item} alignment='right' onClick={closeNavOnClick} />;
                   })}
                 </GlobalMenu>
               </SectionsNavBlock>

diff --git a/app/scripts/components/common/page-header/logo-container.tsx b/app/scripts/components/common/page-header/logo-container.tsx
@@ -0,0 +1,30 @@
+import React, { ComponentType } from 'react';
+import { Tip } from '../tip';
+import { LinkProperties } from '../card';
+import { Brand, PageTitleSecLink } from './logo';
+/**
+ * LogoContainer that is meant to integrate in the default page header without the dependencies of the veda virtual modules
+ * and expects the Logo SVG to be passed in as a prop - this will support the instance for refactor
+ */
+
+export default function LogoContainer ({ linkProperties, Logo, title, subTitle, version }: {
+  linkProperties: LinkProperties,
+  Logo: JSX.Element,
+  title: string,
+  subTitle: string,
+  version: string
+}) {
+  const LinkElement: ComponentType<any> = linkProperties.LinkElement as ComponentType<any>;
+
+  return (
+    <Brand>
+      <LinkElement {...{[linkProperties.pathAttributeKeyName]: '/'}}>
+        {Logo}
+        <span>{title}</span> <span>{subTitle}</span>
+      </LinkElement>
+      <Tip content={`v${version}`}>
+      <PageTitleSecLink {...{as: linkProperties.LinkElement as ComponentType<any>, [linkProperties.pathAttributeKeyName]: '/development'}}>Beta</PageTitleSecLink>
+      </Tip>
+    </Brand>
+  );
+}
Original file line number	Diff line number	Diff line change
Expand Up		@@ -375,3 +375,4 @@ function CardComponent(props: CardComponentPropsType) {
		export const Card = styled(CardComponent)`
		/* Convert to styled-component: https://styled-components.com/docs/advanced#caveat */
		`;