From c8bc31bb5a831471b9e49a443e31279b370bfea3 Mon Sep 17 00:00:00 2001 From: Matt McFarland Date: Mon, 18 Mar 2024 14:03:40 -0400 Subject: [PATCH 1/7] Use data endpoint for map config The map config for azmaps key has been moved to a DATA_URL endpoint. Also adds a loading indicator as this could create some latency between page load and map load. --- .env.sample | 4 ++-- docker-compose.yml | 9 +-------- .../components/MapReadyIndicator/index.tsx | 19 +++++++++++++++++++ src/pages/Explore/components/Map/helpers.ts | 8 ++++++-- src/pages/Explore/components/Map/index.tsx | 6 ++++-- 5 files changed, 32 insertions(+), 14 deletions(-) create mode 100644 src/pages/Explore/components/Map/components/MapReadyIndicator/index.tsx diff --git a/.env.sample b/.env.sample index 4517057b..0af0f2a8 100644 --- a/.env.sample +++ b/.env.sample @@ -11,10 +11,10 @@ REACT_APP_ONEDS_TENANT_KEY= REACT_APP_API_ROOT=https://planetarycomputer-staging.microsoft.com # Root URL for image function app endpoints -REACT_APP_IMAGE_API_ROOT= +REACT_APP_IMAGE_API_ROOT=https://planetarycomputer-staging.microsoft.com/api/f # Client Id for Azure Maps -REACT_APP_AZMAPS_CLIENT_ID=0ba71e87-2836-4f72-82b8-8093147375c7 +REACT_APP_AZMAPS_CLIENT_ID=8f49b6d6-5845-4e20-9015-9630df1ca8d2 # URL for JHub cloned repo launch (including 'git-pull') REACT_APP_HUB_URL= diff --git a/docker-compose.yml b/docker-compose.yml index a4084828..d7c894c3 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -6,17 +6,10 @@ services: ports: - "3000:3000" - "4280:4280" + env_file: .env environment: - CHOKIDAR_USEPOLLING=true - CHOKIDAR_INTERVAL=100 - - # Environments where .env is present will mount and use it. CI will need - # environment variables set via GH Actions to test and build. - - REACT_APP_API_ROOT - - REACT_APP_IMAGE_API_ROOT - - REACT_APP_AZMAPS_KEY - - REACT_APP_ONEDS_TENANT_KEY - - REACT_APP_HUB_URL volumes: - .:/usr/src - ~/.npm:/root/.npm diff --git a/src/pages/Explore/components/Map/components/MapReadyIndicator/index.tsx b/src/pages/Explore/components/Map/components/MapReadyIndicator/index.tsx new file mode 100644 index 00000000..75d2150e --- /dev/null +++ b/src/pages/Explore/components/Map/components/MapReadyIndicator/index.tsx @@ -0,0 +1,19 @@ +import { Spinner, SpinnerSize } from "@fluentui/react"; + +interface MapReadyIndicatorProps { + isMapReady: boolean; +} + +const MapReadyIndicator: React.FC = ({ isMapReady }) => { + if (isMapReady) { + return null; + } + + return ( +
+ +
+ ); +}; + +export default MapReadyIndicator; diff --git a/src/pages/Explore/components/Map/helpers.ts b/src/pages/Explore/components/Map/helpers.ts index be890ba9..194345a8 100644 --- a/src/pages/Explore/components/Map/helpers.ts +++ b/src/pages/Explore/components/Map/helpers.ts @@ -1,6 +1,10 @@ import * as atlas from "azure-maps-control"; import axios from "axios"; -import { DATA_URL, REQUEST_ENTITY, X_REQUEST_ENTITY } from "utils/constants"; +import { + DATA_URL, + REQUEST_ENTITY, + X_REQUEST_ENTITY, +} from "utils/constants"; import { IStacItem } from "types/stac"; import { ILayerState } from "pages/Explore/types"; import { itemOutlineLayerName } from "pages/Explore/utils/layers"; @@ -52,7 +56,7 @@ export const fetchMapToken = async ( // If no valid cached token, fetch a new one try { const resp = await axios.get<{ token: string; expires_on: number }>( - "./api/map-token" + `${DATA_URL}/config/map/token` ); if (resp.status === 200 && resp.data.token && resp.data.expires_on) { diff --git a/src/pages/Explore/components/Map/index.tsx b/src/pages/Explore/components/Map/index.tsx index 683b76ee..ba9b0122 100644 --- a/src/pages/Explore/components/Map/index.tsx +++ b/src/pages/Explore/components/Map/index.tsx @@ -31,6 +31,7 @@ import { MobileViewSidebarButton } from "../MobileViewInMap/ViewInMap.index"; import { addEntityHeader, fetchMapToken } from "./helpers"; import { PreviewMessage } from "./components/ItemPreview/PreviewMessage"; import { AZMAPS_CLIENT_ID } from "utils/constants"; +import MapReadyIndicator from "./components/MapReadyIndicator"; const mapContainerId: string = "viewer-map"; @@ -124,7 +125,7 @@ const ExploreMap = () => { ); - const loadingIndicator = ( + const tileLoadingIndicator = ( { return (
- {mapHandlers.areTilesLoading && loadingIndicator} + {mapHandlers.areTilesLoading && tileLoadingIndicator} {showZoomMsg && zoomMsg} {showExtentMsg && extentMsg} + From e8720e94dd4547b3ba4293828a0c6d2c7636c537 Mon Sep 17 00:00:00 2001 From: Matt McFarland Date: Mon, 18 Mar 2024 14:09:32 -0400 Subject: [PATCH 2/7] Update workflow build configuration Remove unused keys from build and allow comments from workflows to get staging URL links. --- .../workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml | 4 ++-- .../azure-static-web-apps-thankful-sand-0ed34c70f.yml | 4 ++-- .../azure-static-web-apps-wonderful-stone-06c70c70f.yml | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml b/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml index 8aa95de9..e929840b 100644 --- a/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml +++ b/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml @@ -11,6 +11,8 @@ on: jobs: build_and_deploy_job: + permissions: + pull_requests: write environment: staging if: github.event_name == 'push' || (github.event_name == 'pull_request' && @@ -21,9 +23,7 @@ jobs: REACT_APP_API_ROOT: ${{ secrets.API_ROOT }} REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }} REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }} - REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }} REACT_APP_HUB_URL: ${{ secrets.HUB_URL }} - REACT_APP_AUTH_URL: ${{ secrets.AUTH_URL }} steps: - uses: actions/checkout@v3 with: diff --git a/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml b/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml index 042a3aa2..ea332839 100644 --- a/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml +++ b/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml @@ -11,6 +11,8 @@ on: jobs: build_and_deploy_job: + permissions: + pull_requests: write environment: production if: github.event_name == 'push' || (github.event_name == 'pull_request' && @@ -20,9 +22,7 @@ jobs: env: REACT_APP_API_ROOT: ${{ secrets.API_ROOT }} REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }} - REACT_APP_JSLL_APP_ID: ${{ secrets.JSLL_APP_ID }} REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }} - REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }} REACT_APP_HUB_URL: ${{ secrets.HUB_URL }} steps: - uses: actions/checkout@v3 diff --git a/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml b/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml index 34183b2f..ddaf8dd2 100644 --- a/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml +++ b/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml @@ -11,6 +11,8 @@ on: jobs: build_and_deploy_job: + permissions: + pull_requests: write environment: test if: github.event_name == 'push' || (github.event_name == 'pull_request' && @@ -21,9 +23,7 @@ jobs: REACT_APP_API_ROOT: ${{ secrets.API_ROOT }} REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }} REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }} - REACT_APP_AZMAPS_KEY: ${{ secrets.AZMAPS_KEY }} REACT_APP_HUB_URL: ${{ secrets.HUB_URL }} - REACT_APP_AUTH_URL: ${{ secrets.AUTH_URL }} steps: - uses: actions/checkout@v3 with: From da41efb14b2a7ccd772dbc267c5caf8773ac70db Mon Sep 17 00:00:00 2001 From: Matt McFarland Date: Mon, 18 Mar 2024 14:14:01 -0400 Subject: [PATCH 3/7] Update perm key GH docs listed _ when - was required. --- .../workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml | 2 +- .../workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml | 2 +- .../azure-static-web-apps-wonderful-stone-06c70c70f.yml | 2 +- 3 files changed, 3 insertions(+), 3 deletions(-) diff --git a/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml b/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml index e929840b..255434fd 100644 --- a/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml +++ b/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml @@ -12,7 +12,7 @@ on: jobs: build_and_deploy_job: permissions: - pull_requests: write + pull-requests: write environment: staging if: github.event_name == 'push' || (github.event_name == 'pull_request' && diff --git a/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml b/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml index ea332839..13e5c8df 100644 --- a/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml +++ b/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml @@ -12,7 +12,7 @@ on: jobs: build_and_deploy_job: permissions: - pull_requests: write + pull-requests: write environment: production if: github.event_name == 'push' || (github.event_name == 'pull_request' && diff --git a/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml b/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml index ddaf8dd2..91b412a0 100644 --- a/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml +++ b/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml @@ -12,7 +12,7 @@ on: jobs: build_and_deploy_job: permissions: - pull_requests: write + pull-requests: write environment: test if: github.event_name == 'push' || (github.event_name == 'pull_request' && From 3d7fd94498052e72d3139bd9dd63cb3624c903ea Mon Sep 17 00:00:00 2001 From: Matt McFarland Date: Mon, 18 Mar 2024 14:18:46 -0400 Subject: [PATCH 4/7] Switch back to compose env settings .env is not checked in. Removes AZMAPS_KEY --- docker-compose.yml | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/docker-compose.yml b/docker-compose.yml index d7c894c3..f33e1802 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -6,10 +6,16 @@ services: ports: - "3000:3000" - "4280:4280" - env_file: .env environment: - CHOKIDAR_USEPOLLING=true - CHOKIDAR_INTERVAL=100 + + # Environments where .env is present will mount and use it. CI will need + # environment variables set via GH Actions to test and build. + - REACT_APP_API_ROOT + - REACT_APP_IMAGE_API_ROOT + - REACT_APP_ONEDS_TENANT_KEY + - REACT_APP_HUB_URL volumes: - .:/usr/src - ~/.npm:/root/.npm From 00602c9c1cb95210a945317bec3735cade143893 Mon Sep 17 00:00:00 2001 From: Matt McFarland Date: Mon, 18 Mar 2024 14:43:12 -0400 Subject: [PATCH 5/7] Use auth method for inset map --- docker-compose.yml | 1 + src/components/stac/SpatialExtent.js | 7 +++++-- 2 files changed, 6 insertions(+), 2 deletions(-) diff --git a/docker-compose.yml b/docker-compose.yml index f33e1802..b4686b37 100644 --- a/docker-compose.yml +++ b/docker-compose.yml @@ -14,6 +14,7 @@ services: # environment variables set via GH Actions to test and build. - REACT_APP_API_ROOT - REACT_APP_IMAGE_API_ROOT + - REACT_APP_AZMAPS_CLIENT_ID - REACT_APP_ONEDS_TENANT_KEY - REACT_APP_HUB_URL volumes: diff --git a/src/components/stac/SpatialExtent.js b/src/components/stac/SpatialExtent.js index 0f932377..f80a0f40 100644 --- a/src/components/stac/SpatialExtent.js +++ b/src/components/stac/SpatialExtent.js @@ -2,6 +2,8 @@ import React, { useEffect, useState, useRef } from "react"; import * as atlas from "azure-maps-control"; import "azure-maps-control/dist/atlas.min.css"; import LabeledValue from "../controls/LabeledValue"; +import { AZMAPS_CLIENT_ID } from "utils/constants"; +import { fetchMapToken } from "pages/Explore/components/Map/helpers"; const SpatialExtent = ({ extent }) => { const mapRef = useRef(); @@ -85,8 +87,9 @@ const SpatialExtent = ({ extent }) => { style: "grayscale_light", renderWorldCopies: true, // This setting may need adjustment for showing whole-world bounds authOptions: { - authType: "subscriptionKey", - subscriptionKey: process.env.REACT_APP_AZMAPS_KEY, + authType: atlas.AuthenticationType.anonymous, + clientId: AZMAPS_CLIENT_ID, + getToken: fetchMapToken, }, }); From 5759cecc08d8cbbaa1b5e9e0ad9dcf95e68fe4cb Mon Sep 17 00:00:00 2001 From: Matt McFarland Date: Mon, 18 Mar 2024 14:48:23 -0400 Subject: [PATCH 6/7] Format --- src/pages/Explore/components/Map/helpers.ts | 6 +----- 1 file changed, 1 insertion(+), 5 deletions(-) diff --git a/src/pages/Explore/components/Map/helpers.ts b/src/pages/Explore/components/Map/helpers.ts index 194345a8..1e64ccb5 100644 --- a/src/pages/Explore/components/Map/helpers.ts +++ b/src/pages/Explore/components/Map/helpers.ts @@ -1,10 +1,6 @@ import * as atlas from "azure-maps-control"; import axios from "axios"; -import { - DATA_URL, - REQUEST_ENTITY, - X_REQUEST_ENTITY, -} from "utils/constants"; +import { DATA_URL, REQUEST_ENTITY, X_REQUEST_ENTITY } from "utils/constants"; import { IStacItem } from "types/stac"; import { ILayerState } from "pages/Explore/types"; import { itemOutlineLayerName } from "pages/Explore/utils/layers"; From e81fb2f9ced5d5b1865760abf5a2294fbd0f77a6 Mon Sep 17 00:00:00 2001 From: Matt McFarland Date: Mon, 18 Mar 2024 15:04:40 -0400 Subject: [PATCH 7/7] Set azmaps client id during ci build --- .github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml | 1 + .../workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml | 1 + .../azure-static-web-apps-wonderful-stone-06c70c70f.yml | 1 + 3 files changed, 3 insertions(+) diff --git a/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml b/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml index 255434fd..73e1e325 100644 --- a/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml +++ b/.github/workflows/azure-static-web-apps-icy-meadow-0fc35e30f.yml @@ -22,6 +22,7 @@ jobs: env: REACT_APP_API_ROOT: ${{ secrets.API_ROOT }} REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }} + REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }} REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }} REACT_APP_HUB_URL: ${{ secrets.HUB_URL }} steps: diff --git a/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml b/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml index 13e5c8df..88b5273e 100644 --- a/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml +++ b/.github/workflows/azure-static-web-apps-thankful-sand-0ed34c70f.yml @@ -22,6 +22,7 @@ jobs: env: REACT_APP_API_ROOT: ${{ secrets.API_ROOT }} REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }} + REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }} REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }} REACT_APP_HUB_URL: ${{ secrets.HUB_URL }} steps: diff --git a/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml b/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml index 91b412a0..699c5537 100644 --- a/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml +++ b/.github/workflows/azure-static-web-apps-wonderful-stone-06c70c70f.yml @@ -22,6 +22,7 @@ jobs: env: REACT_APP_API_ROOT: ${{ secrets.API_ROOT }} REACT_APP_IMAGE_API_ROOT: ${{ secrets.IMAGE_API_ROOT }} + REACT_APP_AZMAPS_CLIENT_ID: ${{ secrets.AZMAPS_CLIENT_ID }} REACT_APP_ONEDS_TENANT_KEY: ${{ secrets.ONEDS_TENANT_KEY }} REACT_APP_HUB_URL: ${{ secrets.HUB_URL }} steps: