feat(arcgis): auth slice

.env

@@ -1 +1 @@
-REACT_APP_ARCGIS_REST_CLIENT_ID=abcdef
+REACT_APP_ARCGIS_REST_CLIENT_ID=abcd

package.json

@@ -20,6 +20,8 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@esri/arcgis-rest-auth": "^3.7.0",
+    "@esri/arcgis-rest-request": "^4.2.0",
     "@fortawesome/fontawesome-svg-core": "^1.2.36",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.17",

src/app.tsx

@@ -142,6 +142,7 @@ export const App = () => {
               <Route path={"dashboard"} element={<Pages.Dashboard />} />
               <Route path={"viewer"} element={<Pages.ViewerApp />} />
               <Route path={"debug"} element={<Pages.DebugApp />} />
+              <Route path={"auth"} element={<Pages.AuthApp />} />
               <Route
                 path={"compare-across-layers"}
                 element={

src/components/layers-panel/layers-control-panel.spec.tsx

@@ -1,12 +1,13 @@
 import { act, screen } from "@testing-library/react";
-import { renderWithTheme } from "../../utils/testing-utils/render-with-theme";
+import { renderWithThemeProviders } from "../../utils/testing-utils/render-with-theme";
 import { LayersControlPanel } from "./layers-control-panel";
 
 // Mocked components
 import { PlusButton } from "../plus-button/plus-button";
 import { DeleteConfirmation } from "./delete-confirmation";
 import { LayerOptionsMenu } from "./layer-options-menu/layer-options-menu";
 import { ListItem } from "./list-item/list-item";
+import { setupStore } from "../../redux/store";
 
 jest.mock("./list-item/list-item");
 jest.mock("../plus-button/plus-button");
@@ -39,7 +40,7 @@ const onSelectLayerMock = jest.fn();
 const onLayerSettingsClickMock = jest.fn();
 const onPointToLayerMock = jest.fn();
 
-const callRender = (renderFunc, props = {}) => {
+const callRender = (renderFunc, props = {}, store = setupStore()) => {
   return renderFunc(
     <LayersControlPanel
       onSceneInsertClick={onInsertSceneMock}
@@ -53,13 +54,15 @@ const callRender = (renderFunc, props = {}) => {
       onPointToLayer={onPointToLayerMock}
       deleteLayer={onDeleteLayerMock}
       {...props}
-    />
+    />,
+    store
   );
 };
 
 describe("Layers Control Panel", () => {
   it("Should render LayersControlPanel without layers", () => {
-    const { container } = callRender(renderWithTheme);
+    const store = setupStore();
+    const { container } = callRender(renderWithThemeProviders, undefined, store);
     expect(container).toBeInTheDocument();
 
     // Insert Buttons should be present
@@ -68,7 +71,8 @@ describe("Layers Control Panel", () => {
   });
 
   it("Should render LayersControlPanel with layers", () => {
-    const { container } = callRender(renderWithTheme, {
+    const store = setupStore();
+    const { container } = callRender(renderWithThemeProviders, {
       layers: [
         { id: "first", name: "first name", url: "https://first-url.com" },
         { id: "second", name: "second name", url: "https://second-url.com" },
@@ -98,7 +102,8 @@ describe("Layers Control Panel", () => {
           ],
         },
       ],
-    });
+    },
+    store);
     expect(container).toBeInTheDocument();
 
     expect(screen.getByText("ListItem-first")).toBeInTheDocument();
@@ -111,7 +116,7 @@ describe("Layers Control Panel", () => {
   });
 
   it("Should be able to call functions", () => {
-    const { container } = callRender(renderWithTheme, {
+    const { container } = callRender(renderWithThemeProviders, {
       layers: [
         { id: "first", name: "first name", mapUrl: "https://first-url.com" },
       ],
@@ -139,7 +144,7 @@ describe("Layers Control Panel", () => {
   });
 
   it("Should render conformation panel", () => {
-    callRender(renderWithTheme, {
+    callRender(renderWithThemeProviders, {
       layers: [
         { id: "first", name: "first name", mapUrl: "https://first-url.com" },
         // Candidate to delete

src/components/layers-panel/layers-control-panel.tsx

@@ -1,4 +1,4 @@
-import { Fragment, ReactEventHandler, useState } from "react";
+import { Fragment, ReactEventHandler, useState, useEffect } from "react";
 import styled from "styled-components";
 
 import { SelectionState, LayerExample, LayerViewState, ListItemType } from "../../types";
@@ -11,6 +11,10 @@ import { LayerOptionsMenu } from "./layer-options-menu/layer-options-menu";
 import { handleSelectAllLeafsInGroup } from "../../utils/layer-utils";
 import { ButtonSize } from "../../types";
 
+
+import { arcGisLogin, arcGisLogout, selectUser } from "../../redux/slices/arcgis-auth-slice";
+import { useAppDispatch, useAppSelector } from "../../redux/hooks";
+
 type LayersControlPanelProps = {
   layers: LayerExample[];
   selectedLayerIds: string[];
@@ -69,6 +73,28 @@ export const LayersControlPanel = ({
   onPointToLayer,
   deleteLayer,
 }: LayersControlPanelProps) => {
+
+  // stub {
+  const dispatch = useAppDispatch();
+
+  const handleArcGisLogin = () => {
+    dispatch(arcGisLogin());
+  };
+
+  const handleArcGisLogout = () => {
+    dispatch(arcGisLogout());
+  };
+
+  const username = useAppSelector(selectUser);
+  const [showLogin, setShowLoginButton] = useState<boolean>(!username);
+  const [showLogout, setShowLogoutButton] = useState<boolean>(!!username);
+
+  useEffect(() => {
+    setShowLoginButton(!username);
+    setShowLogoutButton(!!username);
+  }, [username]);
+// stub }
+
   const [settingsLayerId, setSettingsLayerId] = useState<string>("");
   const [showLayerSettings, setShowLayerSettings] = useState<boolean>(false);
   const [layerToDeleteId, setLayerToDeleteId] = useState<string>("");
@@ -184,7 +210,20 @@ export const LayersControlPanel = ({
         <PlusButton buttonSize={ButtonSize.Small} onClick={onSceneInsertClick}>
           Insert scene
         </PlusButton>
-      </InsertButtons>
+        </InsertButtons>
+
+        { showLogin && (
+        <PlusButton buttonSize={ButtonSize.Small} onClick={handleArcGisLogin}>
+          Login to ArcGIS
+        </PlusButton>
+        ) }
+        { showLogout && (
+        <PlusButton buttonSize={ButtonSize.Small} onClick={handleArcGisLogout}>
+          {username} Logout
+        </PlusButton>
+        ) }
+
+
     </LayersContainer>
   );
 };

src/pages/arcgis-auth-popup/arcgis-auth-popup.tsx

@@ -0,0 +1,58 @@
+import Background from "../../../public/images/tools-background.webp";
+import styled from "styled-components";
+import {
+  getCurrentLayoutProperty,
+  useAppLayout,
+} from "../../utils/hooks/layout";
+
+import { ArcGISIdentityManager } from '@esri/arcgis-rest-request';
+import { getAuthOptions } from "../../utils/arcgis-auth";
+
+export type LayoutProps = {
+  layout: string;
+};
+
+const AuthContainer = styled.div<LayoutProps>`
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  overflow: auto;
+  overflow-x: hidden;
+  background: url(${Background});
+  background-attachment: fixed;
+  background-size: cover;
+
+  height: ${getCurrentLayoutProperty({
+  desktop: "calc(100vh - 65px)",
+  tablet: "calc(100vh - 65px)",
+  mobile: "calc(100vh - 58px)",
+})};
+
+  margin-top: ${getCurrentLayoutProperty({
+  desktop: "65px",
+  tablet: "65px",
+  mobile: "58px",
+})};
+`;
+
+export const AuthApp = () => {
+  const layout = useAppLayout();
+
+  const { redirectUrl, clientId } = getAuthOptions();
+  if (!clientId) {
+    console.error("The ClientId is not defined in .env file.");
+  } else {
+    const options = {
+      clientId: clientId,
+      redirectUri: redirectUrl,
+      popup: true,
+      pkce: true
+    }
+    ArcGISIdentityManager.completeOAuth2(options);
+  }
+  return (
+    <AuthContainer id="dashboard-container" layout={layout}>
+    </AuthContainer>
+  );
+
+}

src/pages/index.ts

@@ -2,4 +2,5 @@ export { Dashboard } from "./dashboard/dashboard";
 export { ViewerApp } from "./viewer-app/viewer-app";
 export { DebugApp } from "./debug-app/debug-app";
 export { Comparison } from './comparison/comparison';
+export { AuthApp } from './arcgis-auth-popup/arcgis-auth-popup';
 

src/redux/slices/arcgis-auth-slice.ts

@@ -0,0 +1,46 @@
+import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
+import { RootState } from "../store";
+import { getAuthenticatedUser, arcGisRequestLogin, arcGisRequestLogout } from '../../utils/arcgis-auth';
+
+// Define a type for the slice state
+export interface ArcGisAuthState {
+  user: string;
+}
+
+const initialState: ArcGisAuthState = {
+  user: getAuthenticatedUser(),
+}
+
+const arcGisAuthSlice = createSlice({
+  name: "arcGisAuth",
+  initialState,
+  reducers: {
+  },
+  extraReducers: (builder) => {
+    builder.addCase(arcGisLogin.fulfilled, (state, action) => {
+      state.user = action.payload || '';
+    })
+      .addCase(arcGisLogout.fulfilled, (state) => {
+        state.user = '';
+      })
+  },
+});
+
+export const arcGisLogin = createAsyncThunk(
+  'arcGisLogin',
+  async () => {
+    return await arcGisRequestLogin();
+  }
+);
+
+export const arcGisLogout = createAsyncThunk(
+  'arcGisLogout',
+  async () => {
+    return await arcGisRequestLogout();
+  }
+);
+
+export const selectUser = (state: RootState): string =>
+  state.arcGisAuth.user;
+
+export default arcGisAuthSlice.reducer;

src/redux/store.ts

@@ -10,6 +10,7 @@ import debugOptionsSliceReducer from "./slices/debug-options-slice";
 import i3sStatsSliceReducer from "./slices/i3s-stats-slice";
 import baseMapsSliceReducer from "./slices/base-maps-slice";
 import symbolizationSliceReducer from "./slices/symbolization-slice";
+import arcGisAuthSliceReducer from "./slices/arcgis-auth-slice";
 
 // Create the root reducer separately so we can extract the RootState type
 const rootReducer = combineReducers({
@@ -20,6 +21,8 @@ const rootReducer = combineReducers({
   baseMaps: baseMapsSliceReducer,
   symbolization: symbolizationSliceReducer,
   i3sStats: i3sStatsSliceReducer,
+  arcGisAuth: arcGisAuthSliceReducer,
+
 });
 
 export const setupStore = (preloadedState?: PreloadedState<RootState>) => {

src/utils/arcgis-auth.ts

@@ -0,0 +1,72 @@
+import { ArcGISIdentityManager } from '@esri/arcgis-rest-request';
+
+const ARCGIS_REST_USER_SESSION = '__ARCGIS_REST_USER_SESSION__';
+const ARCGIS_REST_USER_INFO = '__ARCGIS_REST_USER_INFO__';
+
+const updateSessionInfo = async (session?: ArcGISIdentityManager): Promise<string> => {
+  let email: string = '';
+  if (session) {
+    localStorage.setItem(ARCGIS_REST_USER_SESSION, session.serialize());
+    const user = await session.getUser();
+    email = user.email || '';
+    localStorage.setItem(ARCGIS_REST_USER_INFO, email);
+  } else {
+    localStorage.removeItem(ARCGIS_REST_USER_SESSION);
+    localStorage.removeItem(ARCGIS_REST_USER_INFO);
+  }
+  return email;
+}
+
+/**
+ * Gets the redirection URL and the client ID to use in the ArcGIS authentication workflow.
+ * @returns the redirection URL and the client ID.
+ */
+export const getAuthOptions = () => {
+  return {
+    redirectUrl: `${window.location.protocol}//${window.location.hostname}:${window.location.port}/auth`,
+    clientId: process.env.REACT_APP_ARCGIS_REST_CLIENT_ID
+  }
+}
+
+/**
+ * Gets the email of the currently logged in user.
+ * @returns the user's email or an empty string if the user is not logged in.
+ */
+export const getAuthenticatedUser = (): string => {
+  return  localStorage.getItem(ARCGIS_REST_USER_INFO) || '';
+}
+
+/**
+ * 
+ * @returns 
+ */
+export const arcGisRequestLogin = async () => {
+  const { redirectUrl, clientId } = getAuthOptions();
+
+  if (!clientId) {
+    console.error("The ClientId is not defined in .env file.");
+    return '';
+  }
+  const options = {
+    clientId: clientId,
+    redirectUri: redirectUrl,
+    popup: true,
+    pkce: true
+  }
+
+  let email = '';
+  let session: ArcGISIdentityManager | undefined;
+  try {
+    session = await ArcGISIdentityManager.beginOAuth2(options);
+  }
+  finally {
+    // In case of an exception the session is not set.
+    // So the following call will remove any session stored in the local storage.
+    email = await updateSessionInfo(session);
+  }
+  return email;
+};
+
+export const arcGisRequestLogout = async () => {
+  return await updateSessionInfo();
+};

webpack.dev.config.js

@@ -100,6 +100,7 @@ module.exports = (env) => {
     devServer: {
       open: true,
       port: 3000,
+      server: 'https',
       client: {
         overlay: {
           errors: true,