feat(arcgis): support of arcgis auth and content

.env-template

@@ -0,0 +1 @@
+REACT_APP_ARCGIS_REST_CLIENT_ID=abcd

.gitignore

@@ -1,3 +1,4 @@
 node_modules/
 build/
 coverage/
+.env

__mocks__/@esri/arcgis-rest-portal.ts

@@ -0,0 +1,28 @@
+const mockContent = {
+  items: [
+    {
+      id: "new-york",
+      name: "NewYork.slpk",
+      url: "https://123.com",
+      created: 123456,
+      type: "Scene Service",
+      typeKeywords: "This is a Hosted Service",
+      title: "New York",
+      token: "token-https://123.com",
+    },
+    {
+      id: "turanga-library",
+      name: "TurangaLibrary.slpk",
+      url: "https://456.com",
+      created: 123457,
+      type: "Scene Service",
+      typeKeywords: "This is a Hosted Service",
+      title: "Turanga Library",
+      token: "token-https://456.com",
+    },
+  ],
+};
+
+export const getUserContent = async (authentication) => {
+  return mockContent;
+};

__mocks__/@esri/arcgis-rest-request.ts

@@ -0,0 +1,31 @@
+const mockEmailExpected = "[email protected]";
+const mockSessionExpected = '{"usermail": "usermail"}';
+const mockTokenExpectedPrefix = "token-";
+
+const session = {
+  usermail: mockEmailExpected,
+  serialize: () => {
+    return mockSessionExpected;
+  },
+  getUser: async () => {
+    return { email: mockEmailExpected };
+  },
+  getToken: async (url: string) => {
+    return mockTokenExpectedPrefix + url;
+  },
+};
+
+export class ArcGISIdentityManager {
+  static beginOAuth2 = async () => {
+    return session;
+  };
+  static completeOAuth2 = async () => {
+    return;
+  };
+  static destroy = async () => {
+    return;
+  };
+  static deserialize = () => {
+    return session;
+  };
+}

package.json

@@ -20,6 +20,9 @@
   "author": "",
   "license": "ISC",
   "dependencies": {
+    "@esri/arcgis-rest-auth": "^3.7.0",
+    "@esri/arcgis-rest-request": "^4.2.0",
+    "@esri/arcgis-rest-portal": "^4.4.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

@@ -77,6 +77,13 @@ const THEMES: AppThemes = {
       validateTileOk: color_brand_secondary_dark,
       validateTileWarning: color_accent_tertiary,
       filtrationImage: color_brand_quaternary,
+      actionIconButtonDisabledColor: color_canvas_primary,
+      actionIconButtonDisabledBG: dim_canvas_primary,
+      actionIconButtonTextDisabledColor: dim_canvas_primary,
+      actionIconButtonTextDisabledColorHover: dim_brand_tertinary,
+      logoutButtonTextColor: dim_canvas_primary,
+      logoutButtonIconColorHover: dim_brand_tertinary,
+      esriImageColor: color_canvas_secondary_inverted,
       switchDisabledBackground: hilite_canvas_primary,
       switchDisabledBackgroundHovered: dim_canvas_primary,
       switchCheckedBackground: color_brand_tertiary,
@@ -112,6 +119,13 @@ const THEMES: AppThemes = {
       validateTileOk: color_brand_secondary,
       validateTileWarning: color_accent_primary,
       filtrationImage: color_canvas_secondary,
+      actionIconButtonDisabledColor: color_canvas_secondary,
+      actionIconButtonDisabledBG: `${color_brand_tertiary}66`,
+      actionIconButtonTextDisabledColor: `${color_brand_tertiary}66`,
+      actionIconButtonTextDisabledColorHover: color_brand_tertiary,
+      logoutButtonTextColor: color_brand_quaternary,
+      logoutButtonIconColorHover: color_brand_tertiary,
+      esriImageColor: `${color_brand_tertiary}66`,
       switchDisabledBackground: dim_canvas_secondary,
       switchDisabledBackgroundHovered: color_canvas_secondary_inverted,
       switchCheckedBackground: color_brand_tertiary,
@@ -152,6 +166,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/action-icon-button/action-icon-button.spec.tsx

@@ -0,0 +1,52 @@
+import { screen } from "@testing-library/react";
+import userEvent from "@testing-library/user-event";
+import { ButtonSize } from "../../types";
+import { renderWithTheme } from "../../utils/testing-utils/render-with-theme";
+import PlusIcon from "../../../public/icons/plus.svg";
+import { ActionIconButton } from "../action-icon-button/action-icon-button";
+
+const onClickMock = jest.fn();
+
+const callRender = (renderFunc, props = {}) => {
+  return renderFunc(
+    <ActionIconButton
+      Icon={PlusIcon}
+      style="disabled"
+      size={ButtonSize.Small}
+      onClick={onClickMock}
+      {...props}
+    />
+  );
+};
+
+describe("ActionIconButton", () => {
+  it("Should render small Plus icon in the button", () => {
+    const { container } = callRender(renderWithTheme, {
+      children: "Test Button",
+    });
+    expect(container).toBeInTheDocument();
+    const button = screen.getByText("Test Button");
+    const buttonHeight = getComputedStyle(
+      button.previousSibling as Element
+    ).getPropertyValue("height");
+    expect(buttonHeight).toEqual("24px");
+
+    userEvent.click(button);
+    expect(onClickMock).toHaveBeenCalled();
+  });
+
+  it("Should render Big Plus icon in the button", () => {
+    const { container } = callRender(renderWithTheme, {
+      children: "Test Button",
+      size: ButtonSize.Big,
+    });
+    expect(container).toBeInTheDocument();
+    const button = screen.getByText("Test Button");
+    const buttonHeight = getComputedStyle(
+      button.previousSibling as Element
+    ).getPropertyValue("height");
+    expect(buttonHeight).toEqual("40px");
+    userEvent.click(button);
+    expect(onClickMock).toHaveBeenCalled();
+  });
+});