Merge branch 'dev-wayport'

package.json

@@ -89,7 +89,7 @@
     "webpack-dev-server": "4.9"
   },
   "dependencies": {
-    "@arcgis/core": "^4.26.5",
+    "@arcgis/core": "4.28",
     "@entryline/gifstream": "^1.2.1",
     "@esri/arcgis-rest-feature-service": "^4.0.4",
     "@esri/arcgis-rest-request": "^4.2.0",

src/app-config.ts

@@ -21,7 +21,8 @@ const config: IAppConfig = {
             // this world imagery basemap will be used when user saves selected Wayback items into a new webmap
             'world-imagery-basemap':
                 'https://services.arcgisonline.com/arcgis/rest/services/World_Imagery/MapServer/',
-            'wayback-export-base': '',
+            'wayback-export-base':
+                'https://wayport.maptiles.arcgis.com/arcgis/rest/services/Wayport/GPServer/Wayport',
         },
     },
     // The dev enivornment is optional, please comment out the dev section below if don't need the dev enivornment
@@ -39,7 +40,7 @@ const config: IAppConfig = {
             'world-imagery-basemap':
                 'https://servicesdev.arcgisonline.com/ArcGIS/rest/services/World_Imagery/MapServer/',
             'wayback-export-base':
-                'https://34.220.147.218:6443/arcgis/rest/services/Wayport/GPServer/Wayport',
+                'https://wayportdev.maptiles.arcgis.com/arcgis/rest/services/Wayport/GPServer/Wayport',
         },
     },
     defaultMapExtent: {

src/components/AnimationPanel/AnimationPanel.tsx

@@ -10,7 +10,7 @@ import LoadingIndicator from './LoadingIndicator';
 import DownloadGIFDialog from './DownloadGIFDialog';
 import CloseBtn from './CloseBtn';
 
-import { whenFalse } from '@arcgis/core/core/watchUtils';
+// import { whenFalse } from '@arcgis/core/core/watchUtils';
 import { IWaybackItem } from '@typings/index';
 import { useDispatch, useSelector } from 'react-redux';
 
@@ -24,6 +24,7 @@ import {
     toggleIsLoadingFrameData,
 } from '@store/AnimationMode/reducer';
 import Background from './Background';
+import { watch } from '@arcgis/core/core/reactiveUtils';
 
 type Props = {
     waybackItems4Animation: IWaybackItem[];
@@ -186,15 +187,25 @@ const AnimationPanel: React.FC<Props> = ({
     }, [waybackItems4Animation]);
 
     useEffect(() => {
-        const onUpdating = whenFalse(mapView, 'stationary', () => {
-            loadingWaybackItems4AnimationRef.current = true;
-            setFrameData(null);
-        });
-
-        return () => {
-            // onStationary.remove();
-            onUpdating.remove();
-        };
+        // const onUpdating = whenFalse(mapView, 'stationary', () => {
+        //     loadingWaybackItems4AnimationRef.current = true;
+        //     setFrameData(null);
+        // });
+
+        watch(
+            () => mapView.stationary,
+            () => {
+                if (!mapView.stationary) {
+                    loadingWaybackItems4AnimationRef.current = true;
+                    setFrameData(null);
+                }
+            }
+        );
+
+        // return () => {
+        //     // onStationary.remove();
+        //     onUpdating.remove();
+        // };
     }, []);
 
     useEffect(() => {

src/components/AppLayout/AppLayout.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 
 import {
     AboutThisApp,
@@ -16,7 +16,7 @@ import {
     ReferenceLayerToggle,
     Sidebar,
     SearchWidget,
-    ShareDialog,
+    // ShareDialog,
     SwipeWidget,
     SaveAsWebMapDialog,
     SwipeWidgetToggleBtn,
@@ -34,11 +34,26 @@ import {
     OpenDownloadPanelBtn,
     DownloadDialog,
 } from '..';
-import { AppContext } from '@contexts/AppContextProvider';
+// import { AppContext } from '@contexts/AppContextProvider';
 import { getServiceUrl } from '@utils/Tier';
+import useCurrenPageBecomesVisible from '@hooks/useCurrenPageBecomesVisible';
+import { revalidateToken } from '@utils/Esri-OAuth';
 
 const AppLayout: React.FC = () => {
-    const { onPremises } = React.useContext(AppContext);
+    // const { onPremises } = React.useContext(AppContext);
+
+    const currentPageIsVisibleAgain = useCurrenPageBecomesVisible();
+
+    useEffect(() => {
+        if (!currentPageIsVisibleAgain) {
+            return;
+        }
+
+        // should re-validate when current tab becomes visible again,
+        // so that we can sign out the current user if the token is no longer valid,
+        // this can heppen when user signs out it's ArcGIS Online account from another tab
+        revalidateToken();
+    }, [currentPageIsVisibleAgain]);
 
     return (
         <>
@@ -49,7 +64,7 @@ const AppLayout: React.FC = () => {
 
                 <AnimationModeToggleBtn />
 
-                {/* <OpenDownloadPanelBtn /> */}
+                <OpenDownloadPanelBtn />
 
                 <SaveAsWebmapBtn />
             </Gutter>
@@ -91,9 +106,9 @@ const AppLayout: React.FC = () => {
 
             <SettingDialog />
 
-            {!onPremises && <ShareDialog />}
+            {/* {!onPremises && <ShareDialog />} */}
 
-            {/* <DownloadDialog /> */}
+            <DownloadDialog />
 
             <AboutThisApp />
 

src/components/DownloadDialog/DownloadDialog.tsx

@@ -1,12 +1,18 @@
 import { DownloadJob } from '@store/DownloadMode/reducer';
 import React, { FC } from 'react';
 import { DownloadJobCard } from './DownloadJobCard';
+import { DownloadJobPlaceholder } from './DownloadJobPlaceholder';
 
 type Props = {
     /**
      * list of donwload jobs
      */
     jobs: DownloadJob[];
+    /**
+     * if true, the system is in process of adding a new download job and
+     * a placeholder card should be displayed
+     */
+    isAddingNewDownloadJob: boolean;
     /**
      * fires when user clicks on the create tile package button to start the download job
      * @param id job id
@@ -40,14 +46,15 @@ type Props = {
 
 export const DownloadDialog: FC<Props> = ({
     jobs,
+    isAddingNewDownloadJob,
     createTilePackageButtonOnClick,
     downloadTilePackageButtonOnClick,
     closeButtonOnClick,
     removeButtonOnClick,
     levelsOnChange,
 }: Props) => {
     const getJobsList = () => {
-        if (!jobs?.length) {
+        if (!jobs?.length && !isAddingNewDownloadJob) {
             return <div className="text-center my-8">No download jobs.</div>;
         }
 
@@ -72,8 +79,13 @@ export const DownloadDialog: FC<Props> = ({
     };
 
     return (
-        <div className="absolute top-0 left-0 w-full h-full overflow-hidden bg-custom-modal-background flex items-center justify-center z-50">
-            <div className="max-w-3xl mx-8 min-h-[350px] bg-custom-modal-content-background p-2 pb-8">
+        <div
+            className="absolute top-0 left-0 w-full h-full overflow-hidden flex items-center justify-center z-50"
+            style={{
+                background: `radial-gradient(circle, rgba(26,61,96,0.95) 50%, rgba(13,31,49,0.95) 100%)`,
+            }}
+        >
+            <div className="max-w-3xl mx-8 bg-custom-modal-content-background p-2 pb-8">
                 <div className="text-right">
                     <calcite-button
                         icon-start="x"
@@ -83,16 +95,73 @@ export const DownloadDialog: FC<Props> = ({
                     />
                 </div>
 
-                <div className="px-8 max-h-[500px] overflow-y-auto fancy-scrollbar">
-                    <h3 className="text-2xl mb-2">Download Local Tile Cache</h3>
+                <div className="px-8 max-h-[500px] min-h-[350px] overflow-y-auto fancy-scrollbar">
+                    <h3 className="text-2xl mb-2">
+                        Wayback Export (
+                        <a
+                            href="https://doc.arcgis.com/en/arcgis-online/reference/faq.htm#anchor22"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            beta
+                        </a>
+                        )
+                    </h3>
 
                     <p className="text-sm mb-4">
-                        Based on your current map extent, choose a scale range
-                        for your download. Downloads are limited to 150,000
-                        tiles.
+                        Exported basemap tiles are intended for offline use in
+                        ArcGIS applications and{' '}
+                        <a
+                            href="https://developers.arcgis.com/documentation/mapping-apis-and-services/offline/"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            offline applications
+                        </a>{' '}
+                        built with an ArcGIS Runtime SDK in accordance with
+                        Esri’s terms of use:{' '}
+                        <a
+                            href="https://downloads2.esri.com/arcgisonline/docs/tou_summary.pdf"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            View Summary
+                        </a>{' '}
+                        and{' '}
+                        <a
+                            href="https://www.esri.com/en-us/legal/terms/full-master-agreement"
+                            target="_blank"
+                            rel="noreferrer"
+                        >
+                            View Terms of Use
+                        </a>
+                        .
                         {/* You can choose this window while your tiles are prepared. */}
                     </p>
 
+                    <ul className="list-inside list-disc text-sm">
+                        <li>
+                            Exports are based on map extent, with a minimum zoom
+                            level of 12.
+                        </li>
+                        <li>
+                            Each export request is limited to a maximum of
+                            150,000 tiles.
+                        </li>
+                        <li>
+                            No more than five exports may be requested
+                            concurrently.
+                        </li>
+                        <li>
+                            This dialog can safely be closed while tile packages
+                            are being created.
+                        </li>
+                    </ul>
+
+                    <hr className="my-8 opacity-50" />
+
+                    {isAddingNewDownloadJob && <DownloadJobPlaceholder />}
+
                     <div>{getJobsList()}</div>
                 </div>
             </div>

src/components/DownloadDialog/DownloadDialogContainer.tsx

@@ -7,6 +7,7 @@ import {
 
 import {
     selectDownloadJobs,
+    selectIsAddingNewDownloadJob,
     selectIsDownloadDialogOpen,
     selectNumOfPendingDownloadJobs,
 } from '@store/DownloadMode/selectors';
@@ -33,17 +34,19 @@ export const DownloadDialogContainer = () => {
 
     const numPendingJobs = useSelector(selectNumOfPendingDownloadJobs);
 
+    const isAddingNewDownloadJob = useSelector(selectIsAddingNewDownloadJob);
+
     useEffect(() => {
         // save jobs to localhost so they can be restored
         saveDownloadJobs2LocalStorage(jobs);
+
+        if (jobs?.length && isAnonymouns()) {
+            signIn();
+        }
     }, [jobs]);
 
     useEffect(() => {
         updateHashParams('downloadMode', isOpen ? 'true' : null);
-
-        if (isOpen && isAnonymouns()) {
-            signIn();
-        }
     }, [isOpen]);
 
     useEffect(() => {
@@ -65,6 +68,7 @@ export const DownloadDialogContainer = () => {
     return (
         <DownloadDialog
             jobs={jobs}
+            isAddingNewDownloadJob={isAddingNewDownloadJob}
             closeButtonOnClick={() => {
                 dispatch(isDownloadDialogOpenToggled());
             }}