feat(storybook): add stories for CollaboratorModal

src/components/CollaboratorModal/CollaboratorModal.stories.tsx

@@ -0,0 +1,118 @@
+import { ComponentMeta, ComponentStory } from "@storybook/react"
+import { CollaboratorModal } from "components/CollaboratorModal/index"
+import { MemoryRouter, Route } from "react-router-dom"
+
+import { MOCK_COLLABORATORS, MOCK_USER } from "mocks/constants"
+import { handlers } from "mocks/handlers"
+import {
+  addContributorCollaborator,
+  buildCollaboratorData,
+  buildCollaboratorRoleData,
+  buildLoginData,
+} from "mocks/utils"
+import { CollaboratorData } from "types/collaborators"
+
+const collaboratorModalMeta = {
+  title: "Components/CollaboratorModal",
+  component: CollaboratorModal,
+  parameters: {
+    // Set delay so mock API requests will get resolved and the UI will render properly
+    chromatic: { delay: 500 },
+    msw: {
+      handlers,
+    },
+  },
+  decorators: [
+    (Story) => {
+      return (
+        <MemoryRouter initialEntries={["/sites/:siteName/dashboard"]}>
+          <Route path="/sites/:siteName/dashboard">
+            <Story />
+          </Route>
+        </MemoryRouter>
+      )
+    },
+  ],
+} as ComponentMeta<typeof CollaboratorModal>
+
+const Template: ComponentStory<typeof CollaboratorModal> = CollaboratorModal
+
+export const AdminMain = Template.bind({})
+AdminMain.parameters = {
+  msw: {
+    handlers: [
+      ...handlers,
+      buildLoginData(MOCK_USER),
+      buildCollaboratorData(({
+        collaborators: [
+          // Email override so that the modal can display the "(You)" text depending on
+          // the LoggedInUser
+          { ...MOCK_COLLABORATORS.ADMIN_2, email: MOCK_USER.email },
+          MOCK_COLLABORATORS.ADMIN_1,
+          MOCK_COLLABORATORS.CONTRIBUTOR_1,
+          MOCK_COLLABORATORS.CONTRIBUTOR_2,
+        ],
+      } as unknown) as CollaboratorData),
+      buildCollaboratorRoleData({ role: "ADMIN" }),
+    ],
+  },
+}
+AdminMain.args = {
+  siteName: "default",
+}
+
+export const ContributorMain = Template.bind({})
+ContributorMain.parameters = {
+  msw: {
+    handlers: [
+      ...handlers,
+      buildLoginData(MOCK_USER),
+      buildCollaboratorData(({
+        collaborators: [
+          MOCK_COLLABORATORS.ADMIN_2,
+          MOCK_COLLABORATORS.ADMIN_1,
+          // Email override so that the modal can display the "(You)" text depending on
+          // the LoggedInUser
+          {
+            ...MOCK_COLLABORATORS.CONTRIBUTOR_1,
+            email: MOCK_USER.email,
+            // Setting lastLoggedIn as now since that must be true
+            // because the user is seeing this modal
+            lastLoggedIn: new Date(),
+          },
+          MOCK_COLLABORATORS.CONTRIBUTOR_2,
+        ],
+      } as unknown) as CollaboratorData),
+      buildCollaboratorRoleData({ role: "CONTRIBUTOR" }),
+    ],
+  },
+}
+ContributorMain.args = {
+  siteName: "default",
+}
+
+export const AdminAddContributor = Template.bind({})
+AdminAddContributor.parameters = {
+  msw: {
+    handlers: [
+      ...handlers,
+      buildLoginData(MOCK_USER),
+      buildCollaboratorData(({
+        collaborators: [
+          // Email override so that the modal can display the "(You)" text depending on
+          // the LoggedInUser
+          { ...MOCK_COLLABORATORS.ADMIN_2, email: MOCK_USER.email },
+          MOCK_COLLABORATORS.ADMIN_1,
+          MOCK_COLLABORATORS.CONTRIBUTOR_1,
+          MOCK_COLLABORATORS.CONTRIBUTOR_2,
+        ],
+      } as unknown) as CollaboratorData),
+      buildCollaboratorRoleData({ role: "ADMIN" }),
+      addContributorCollaborator(),
+    ],
+  },
+}
+AdminAddContributor.args = {
+  siteName: "default",
+}
+export default collaboratorModalMeta

src/mocks/constants.ts

@@ -136,3 +136,74 @@ export const MOCK_SUBFOLDER_NAME = "mock-subfolder"
 export const MOCK_RESOURCE_ROOM_NAME = "mock-resource-room"
 
 export const MOCK_RESOURCE_CATEGORY_NAME = "mock-resource-category"
+
+export const MOCK_COLLABORATORS = {
+  CONTRIBUTOR_1: {
+    id: "1",
+    email: "[email protected]",
+    githubId: "test1",
+    contactNumber: "12331231",
+    lastLoggedIn: "2022-03-20T07:41:09.661Z",
+    createdAt: "2022-04-04T07:25:41.013Z",
+    updatedAt: "2022-07-30T07:41:09.662Z",
+    deletedAt: null,
+    SiteMember: {
+      userId: "1",
+      siteId: "16",
+      role: "CONTRIBUTOR",
+      createdAt: "2022-07-29T03:50:49.145Z",
+      updatedAt: "2022-07-29T03:50:49.145Z",
+    },
+  },
+  CONTRIBUTOR_2: {
+    id: "4",
+    email: "[email protected]",
+    githubId: "test4",
+    contactNumber: "12331234",
+    lastLoggedIn: "2022-04-30T07:41:09.661Z",
+    createdAt: "2022-04-04T07:25:41.013Z",
+    updatedAt: "2022-07-30T07:41:09.662Z",
+    deletedAt: null,
+    SiteMember: {
+      userId: "4",
+      siteId: "16",
+      role: "CONTRIBUTOR",
+      createdAt: "2022-07-29T03:50:49.145Z",
+      updatedAt: "2022-07-29T03:50:49.145Z",
+    },
+  },
+  ADMIN_1: {
+    id: "2",
+    email: "[email protected]",
+    githubId: "test2",
+    contactNumber: "12331232",
+    lastLoggedIn: "2022-07-30T07:41:09.661Z",
+    createdAt: "2022-04-04T07:25:41.013Z",
+    updatedAt: "2022-07-30T07:41:09.662Z",
+    deletedAt: null,
+    SiteMember: {
+      userId: "2",
+      siteId: "16",
+      role: "ADMIN",
+      createdAt: "2022-07-29T03:50:49.145Z",
+      updatedAt: "2022-07-29T03:50:49.145Z",
+    },
+  },
+  ADMIN_2: {
+    id: "3",
+    email: "[email protected]",
+    githubId: "test3",
+    contactNumber: "12331233",
+    lastLoggedIn: "2022-06-30T07:41:09.661Z",
+    createdAt: "2022-04-04T07:25:41.013Z",
+    updatedAt: "2022-07-30T07:41:09.662Z",
+    deletedAt: null,
+    SiteMember: {
+      userId: "3",
+      siteId: "16",
+      role: "ADMIN",
+      createdAt: "2022-07-29T03:50:49.145Z",
+      updatedAt: "2022-07-29T03:50:49.145Z",
+    },
+  },
+}

src/mocks/utils.ts

@@ -2,6 +2,11 @@ import { DefaultBodyType, rest } from "msw"
 
 import { DirectoryData, PageData, ResourcePageData } from "types/directory"
 import { BackendSiteSettings } from "types/settings"
+import {
+  CollaboratorData,
+  CollaboratorRoleData,
+  SiteMemberModel,
+} from "types/collaborators"
 import { LoggedInUser } from "types/user"
 
 const apiDataBuilder = <T extends DefaultBodyType = DefaultBodyType>(
@@ -43,6 +48,14 @@ export const buildSubfolderData = apiDataBuilder<(PageData | DirectoryData)[]>(
   "*/sites/:siteName/collections/:collectionName/subcollections/:subCollectionName"
 )
 
+export const buildCollaboratorRoleData = apiDataBuilder<CollaboratorRoleData>(
+  "*/sites/:siteName/collaborators/role"
+)
+
+export const buildCollaboratorData = apiDataBuilder<CollaboratorData>(
+  "*/sites/:siteName/collaborators"
+)
+
 export const buildLoginData = apiDataBuilder<LoggedInUser>("*/auth/whoami")
 
 export const buildLastUpdated = apiDataBuilder<{ lastUpdated: string }>(
@@ -52,3 +65,11 @@ export const buildLastUpdated = apiDataBuilder<{ lastUpdated: string }>(
 export const buildResourceCategoryData = apiDataBuilder<ResourcePageData[]>(
   "/*sites/:siteName/resourceRoom/:resourceRoomName/resources/:resourceCategoryName"
 )
+
+export const addContributorCollaborator = () =>
+  rest.post("*/sites/:siteName/collaborators", (req, res, ctx) => {
+    return res(
+      ctx.status(422),
+      ctx.json({ error: { message: "Acknowledgement required" } })
+    )
+  })

src/types/collaborators.ts

@@ -0,0 +1,48 @@
+import { string } from "prop-types"
+
+// TODO: Replace with actual model types in backend
+
+export interface SiteModel {
+  id: number
+  name: string
+  apiTokenName: string
+  siteStatus: string // TODO: This is really a SiteStatus enum but I didn't want to replicate this in the frontend
+  jobStatus: string // TODO: This is also an enum
+  createdAt: Date
+  updatedAt: Date
+  deletedAt?: Date
+  /* eslint-disable-next-line */
+  site_members: Array<UserModel & { SiteMember: SiteMemberModel }>
+  repo?: any // TODO: Repo
+  deployment?: any // TODO: Deployment
+  creatorId: number
+  /* eslint-disable-next-line */
+  site_creator: UserModel
+}
+
+export interface SiteMemberModel {
+  userId: number
+  siteId: string
+  role: string
+  createdAt: Date
+  updatedAt: Date
+}
+export interface UserModel {
+  id: number
+  email: string | null
+  githubId: string
+  contactNumber: string | null
+  lastLoggedIn: Date
+  createdAt: Date
+  updatedAt: Date
+  deletedAt?: Date
+  sites: Array<SiteModel & { SiteMember: SiteMemberModel }>
+  sitesCreated?: SiteModel[]
+}
+
+export type CollaboratorData = {
+  collaborators: Array<UserModel & { SiteMember: SiteMemberModel }>
+}
+export type CollaboratorRoleData = {
+  role: SiteMemberModel["role"]
+}