CE-1975: add UserImpersonator and common args for stories

src/mocks/AppHarness.js

@@ -8,6 +8,7 @@ import { NotificationProvider } from "../components/common/notification/Notifica
 import NavigationMenu from "../components/navigation/NavigationMenu";
 import { MemoryRouter } from "react-router-dom";
 import { DeployAPIProvider } from "../api/DeployApi";
+import { TestUserProvider, UserImpersonator } from "./UserImpersonator";
 
 export function RouterHarness({ children, initialHistory = ["/"] }) {
   return (
@@ -22,20 +23,33 @@ export function RouterHarness({ children, initialHistory = ["/"] }) {
   );
 }
 
-export function AppHarness({ children, initialHistory = ["/"] }) {
+export function AppHarness({
+  children,
+  initialHistory = ["/"],
+  useTestUser = false,
+  ...args
+}) {
+  const SelectedUserProvider = useTestUser
+    ? ({ children }) => (
+        <TestUserProvider>
+          <UserImpersonator {...args}>{children}</UserImpersonator>
+        </TestUserProvider>
+      )
+    : UserProvider;
+
   return (
     <SnackbarProvider
       preventDuplicate
       maxSnack="5"
     >
       <RouterHarness initialHistory={initialHistory}>
-        <UserProvider>
+        <SelectedUserProvider>
           <NotificationProvider>
             <NavigationMenu>
               <Container>{children}</Container>
             </NavigationMenu>
           </NotificationProvider>
-        </UserProvider>
+        </SelectedUserProvider>
       </RouterHarness>
     </SnackbarProvider>
   );

src/mocks/UserImpersonator.js

+import React, { useCallback, useContext, useEffect, useState } from "react";
+import testUser from "./fixtures/User.json";
+import { userContext } from "@ess-ics/ce-ui-common";
+
+const testAuthContext = userContext;
+
+export const defaultUser = testUser;
+export const defaultUserRoles = [
+  "DeploymentToolAdmin",
+  "DeploymentToolIntegrator"
+];
+const defaultLogin = (username, password) => {
+  console.log(
+    `Login called with username '${username}', password '${password}'`
+  );
+};
+const defaultLogout = () => {
+  console.log("Logout called");
+};
+const defaultLoginError = "";
+
+const TestAuthContextProvider = ({ children }) => {
+  const [user, setUser] = useState(defaultUser);
+  const [userRoles, setUserRoles] = useState(defaultUserRoles);
+  const [login, setLogin] = useState(defaultLogin);
+  const [loginError, setLoginError] = useState(defaultLoginError);
+  const [logout, setLogout] = useState(defaultLogout);
+
+  const resetLoginError = useCallback(() => {
+    setLoginError(defaultLoginError);
+  }, [setLoginError]);
+
+  const value = {
+    user,
+    setUser,
+    userRoles,
+    setUserRoles,
+    login,
+    setLogin,
+    loginError,
+    setLoginError,
+    logout,
+    setLogout,
+    resetLoginError
+  };
+
+  return (
+    <testAuthContext.Provider value={value}>
+      {children}
+    </testAuthContext.Provider>
+  );
+};
+
+export const TestUserProvider = ({ children }) => {
+  return <TestAuthContextProvider>{children}</TestAuthContextProvider>;
+};
+
+export const UserImpersonator = ({ user, userRoles, children }) => {
+  const { setUser, setUserRoles } = useContext(testAuthContext);
+
+  useEffect(() => {
+    setUser(user);
+    setUserRoles(userRoles);
+  }, [setUser, setUserRoles, user, userRoles]);
+
+  return <>{children}</>;
+};

src/stories/utils/common-args.js

+import { defaultUser, defaultUserRoles } from "../../mocks/UserImpersonator";
+
 // see https://storybook.js.org/docs/react/essentials/controls#disable-controls-for-specific-properties
 export const hideStorybookControls = {
   table: {
@@ -11,3 +13,8 @@ export const paginationNoResults = {
   rows: 10,
   page: 0
 };
+
+export const userImpersonatorArgs = {
+  user: { ...defaultUser },
+  userRoles: [...defaultUserRoles]
+};

src/stories/views/IOC/CreateIocView.stories.js

@@ -3,20 +3,30 @@ import { AppHarness } from "../../../mocks/AppHarness";
 import { CreateIOCView } from "../../../views/IOC/CreateIOCView";
 import { rest } from "msw";
 import { handlers } from "../../../mocks/handlers";
+import { userImpersonatorArgs } from "../../utils/common-args";
 
 export default {
   title: "Views/IOC/CreateIOCView"
 };
 
-const Template = () => (
-  <AppHarness>
+const Template = (args) => (
+  <AppHarness
+    useTestUser
+    {...args}
+  >
     <CreateIOCView />
   </AppHarness>
 );
 
-export const Default = () => <Template />;
+export const Default = (args) => <Template {...args} />;
+Default.args = {
+  ...userImpersonatorArgs
+};
 
-export const CreateLoading = () => <Template />;
+export const CreateLoading = (args) => <Template {...args} />;
+CreateLoading.args = {
+  ...Default.args
+};
 CreateLoading.parameters = {
   msw: {
     handlers: [
@@ -25,7 +35,11 @@ CreateLoading.parameters = {
     ]
   }
 };
-export const CreateWithError = () => <Template />;
+
+export const CreateWithError = (args) => <Template {...args} />;
+CreateWithError.args = {
+  ...Default.args
+};
 CreateWithError.parameters = {
   msw: {
     handlers: [

src/stories/views/IOC/IocDetailsView.stories.js

 import React from "react";
 import { AppHarness } from "../../../mocks/AppHarness";
 import { IOCDetailsContainer } from "../../../views/IOC/IOCDetailsContainer";
+import { userImpersonatorArgs } from "../../utils/common-args";
 
 export default {
   title: "Views/IOC/IOCDetailsView"
 };
 
 const Template = (args) => (
-  <AppHarness>
+  <AppHarness
+    useTestUser
+    {...args}
+  >
     <IOCDetailsContainer
       id={346}
       {...args}
@@ -15,9 +19,13 @@ const Template = (args) => (
   </AppHarness>
 );
 
-export const Default = () => <Template />;
+export const Default = (args) => <Template {...args} />;
+Default.args = {
+  ...userImpersonatorArgs
+};
 
 export const Deployable = (args) => <Template {...args} />;
 Deployable.args = {
-  id: 2
+  id: 2,
+  ...Default.args
 };

src/stories/views/Login/LoginView.stories.js

@@ -7,7 +7,11 @@ export default {
 };
 
 export const Default = () => (
-  <AppHarness initialHistory={["/login"]}>
+  <AppHarness
+    initialHistory={["/login"]}
+    useTestUser
+    user={null}
+  >
     <LoginView />
   </AppHarness>
 );

src/stories/views/UserPage/UserPageView.stories.js

 import React from "react";
 import { UserDetailsContainer } from "../../../views/UserPage";
 import { AppHarness } from "../../../mocks/AppHarness";
+import { userImpersonatorArgs } from "../../utils/common-args";
 
 export default {
   title: "Views/UserPage/UserPageView"
 };
 
-export const Default = () => (
-  <AppHarness>
+const Template = (args) => (
+  <AppHarness
+    useTestUser
+    {...args}
+  >
     <UserDetailsContainer />
   </AppHarness>
 );
+
+export const Default = (args) => <Template {...args} />;
+Default.args = {
+  ...userImpersonatorArgs
+};