Eng 177: Create workspace tests

.github/workflows/playwright.yml

@@ -33,7 +33,11 @@ jobs:
       - name: Build dashboard
         run: yarn build:dashboard
         env:
-          VITE_SERVER_BASE_URL: http://localhost:8000
+          VITE_GOOGLE_CLIENT_ID: ${{ secrets.VITE_GOOGLE_CLIENT_ID }}
+          VITE_SERVER_BASE_URL: ${{ secrets.VITE_SERVER_BASE_URL }}
+          VITE_LINK_SURVEY_HOST: ${{ secrets.VITE_LINK_SURVEY_HOST }}
+          VITE_PUBLIC_POSTHOG_KEY: ${{ secrets.VITE_PUBLIC_POSTHOG_KEY }}
+          VITE_PUBLIC_POSTHOG_HOST: ${{ secrets.VITE_PUBLIC_POSTHOG_HOST }}
 
       - name: Start Backend Server
         run: docker compose -f ./docker-compose-test.yml up -d

apps/frontend/src/layout/AuthLayout.tsx

@@ -6,7 +6,7 @@ import Profile2 from "../assets/images/loginScreen/profile-2.png";
 import Profile3 from "../assets/images/loginScreen/profile-3.png";
 import Logo from "../assets/images/logo.png";
 
-const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID;
+const clientId = import.meta.env.VITE_GOOGLE_CLIENT_ID ?? "";
 
 export function AuthLayout() {
     return (

apps/frontend/src/layout/partials/Navbar.tsx

@@ -248,6 +248,7 @@ export const Navbar = () => {
                             onClick={() => {
                                 setOpenOrganizationInviteModal(true);
                             }}
+                            data-testid="invite-team-btn"
                         >
                             <span>
                                 <CirclePlusIcon />

apps/frontend/src/layout/partials/UserProfile.tsx

@@ -147,6 +147,7 @@ export const UserProfile = () => {
                     </DropdownMenuSubContent>
                 </DropdownMenuSub>
                 <DropdownMenuItem
+                    data-testid="workspace-settings-btn"
                     className="flex items-center gap-2 px-3 py-2"
                     onClick={() =>
                         navigate(

apps/frontend/src/modules/auth/AuthProvider.tsx

@@ -291,7 +291,7 @@ export const AuthProvider = ({ children, apollo, purgePersistedCache }: AuthProv
     const workspace = useMemo(() => {
         const slug = orgSlug ?? user?.organization?.slug;
 
-        return organizations.find((organization) => organization?.slug === slug) ?? null;
+        return organizations.find((organization) => organization?.slug?.toLowerCase() === slug?.toLowerCase()) ?? null;
     }, [orgSlug, user?.organization?.slug, organizations]);
 
     const projects = useMemo(() => {
@@ -313,7 +313,7 @@ export const AuthProvider = ({ children, apollo, purgePersistedCache }: AuthProv
 
         const slug = projectSlug ?? user?.project?.slug;
 
-        return projects?.find((project) => project?.slug === slug) ?? null;
+        return projects?.find((project) => project?.slug?.toLowerCase() === slug?.toLowerCase()) ?? null;
     }, [user, orgSlug, projectSlug, projects, workspace]);
 
     const handleUserUpdate = useCallback(
@@ -354,7 +354,10 @@ export const AuthProvider = ({ children, apollo, purgePersistedCache }: AuthProv
                 switchProject(project.id);
             }
 
-            if (orgSlug !== organization?.slug || projectSlug !== project.slug) {
+            if (
+                orgSlug?.toLowerCase() !== organization?.slug.toLowerCase() ||
+                projectSlug?.toLowerCase() !== project.slug.toLowerCase()
+            ) {
                 redirect({
                     ...(user ?? {}),
                     ...updatedUser,

apps/frontend/src/modules/workspace/components/invite/WorkspaceInvite.tsx

@@ -1,5 +1,5 @@
 import { Link, LucideMail, RefreshCcwIcon } from "lucide-react";
-import { useState } from "react";
+import { useEffect, useState } from "react";
 
 import { OrganizationErrorCode, OrganizationInvite, OrganizationInviteCreate, User } from "@/generated/graphql";
 import { useAuth } from "@/modules/auth/hooks/useAuth";
@@ -36,6 +36,10 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
         }
     };
 
+    useEffect(() => {
+        handleLinkInvite();
+    }, [onOpenChange]);
+
     const handleEmailInvite = async (e: React.FormEvent<HTMLFormElement>) => {
         e.preventDefault();
         if (!inviteEmail) {
@@ -169,7 +173,7 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
                         </div>
                     </form>
                 ) : (
-                    <div onSubmit={handleLinkInvite} className="mt-3">
+                    <div className="mt-3">
                         <p className="mb-4 text-sm text-intg-text">
                             Invite link will provide a unique URL that allows anyone to join your organization.
                         </p>
@@ -185,6 +189,7 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
                                             size="sm"
                                             disabled={loading}
                                             onClick={handleInviteLinkRefresh}
+                                            data-testid="refresh-invite-link"
                                             icon={
                                                 <RefreshCcwIcon
                                                     size={16}
@@ -193,6 +198,7 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
                                             }
                                         />
                                     }
+                                    data-testid="invite-link"
                                 />
                             </div>
                             <Button
@@ -219,8 +225,8 @@ export const WorkspaceInvite = ({ open, onOpenChange }: Props) => {
                         size="md"
                         onClick={() => {
                             setToggleInviteType(!toggleInviteType);
-                            !toggleInviteType && handleInviteLinkRefresh();
                         }}
+                        data-testid="toggle-invite-type"
                     />
                 </div>
             </DialogContent>

apps/frontend/src/modules/workspace/components/settings/Workspace/General.tsx

@@ -1,15 +1,20 @@
+import { useProject } from "@/modules/projects/hooks/useProject";
 import { useWorkspace } from "@/modules/workspace/hooks/useWorkspace";
-import { Button, TextInput } from "@/ui";
+import { ROUTES } from "@/routes";
+import { Button, GlobalSpinner, TextInput } from "@/ui";
 import { toast } from "@/utils/toast";
 import { useForm } from "react-hook-form";
+import { useNavigate } from "react-router-dom";
 
 type WorkspaceData = {
     workspaceName: string | undefined;
     workspaceUrl: string | undefined;
 };
 
 export const General = () => {
-    const { workspace, updateWorkspace } = useWorkspace();
+    const { project } = useProject();
+    const { workspace, updateWorkspace, loading } = useWorkspace();
+    const navigate = useNavigate();
 
     const {
         register,
@@ -28,15 +33,26 @@ export const General = () => {
             return;
         }
 
-        await updateWorkspace(
+        const response = await updateWorkspace(
             {
                 name: formInfo.workspaceName,
                 slug: formInfo.workspaceUrl,
             },
             false,
         );
+        if (response?.data?.organizationUpdate) {
+            navigate(
+                `${ROUTES.WORKSPACE_SETTINGS}`
+                    .replace(":orgSlug", response?.data?.organizationUpdate?.organization?.slug!)
+                    .replace(":projectSlug", project?.slug!),
+            );
+        }
         toast.success(`Your organization name has been updated`);
     };
+
+    if (loading) {
+        return <GlobalSpinner />;
+    }
     return (
         <form className="w-[593px] pt-10" onSubmit={handleSubmit(onSubmit)}>
             <div className="space-y-4">
@@ -60,6 +76,7 @@ export const General = () => {
                     defaultValue={workspace?.name}
                     error={!!errors.workspaceName?.message}
                     errorMessage={errors.workspaceName?.message}
+                    data-testid="workspace-name"
                 />
                 <TextInput
                     prefix="integraflow.app/"
@@ -86,6 +103,7 @@ export const General = () => {
                     })}
                     error={!!errors.workspaceUrl?.message}
                     errorMessage={errors.workspaceUrl?.message}
+                    data-testid="workspace-url"
                 />
                 <div className="w-[114px]">
                     <Button text="Update" type="submit" className="w-[114px]" size="md" />

apps/frontend/src/modules/workspace/hooks/useWorkspace.tsx

@@ -88,6 +88,7 @@ export const useWorkspace = () => {
                 if (response.data?.organizationUpdate?.organization) {
                     updateUserCache(response.data?.organizationUpdate?.organization);
                 }
+                return response;
             } catch (error) {
                 console.error(error);
             }

apps/frontend/tests/auth.setup.ts

@@ -41,13 +41,16 @@ setup("authenticate as onboarded user", async ({ page }) => {
         await page.getByRole("button", { name: /Create Workspace/i }).click();
 
         await page.waitForURL(ROUTES.PATTERNS.ONBOARDING_URL);
+        const url = new URL(page.url());
         await handleOnboardingSteps(page);
-        await saveUserDetails(page, ONBOARDED_USER_FILE);
+        await saveUserDetails(page, ONBOARDED_USER_FILE, url);
     } else if (ROUTES.PATTERNS.ONBOARDING_URL.test(currentUrl)) {
+        const url = new URL(page.url());
         await handleOnboardingSteps(page);
-        await saveUserDetails(page, ONBOARDED_USER_FILE);
+        await saveUserDetails(page, ONBOARDED_USER_FILE, url);
     } else if (ROUTES.PATTERNS.SURVEY_LIST_URL.test(currentUrl)) {
-        await saveUserDetails(page, ONBOARDED_USER_FILE);
+        const url = new URL(page.url());
+        await saveUserDetails(page, ONBOARDED_USER_FILE, url);
     } else {
         throw new Error(`Unexpected URL: ${currentUrl}`);
     }
@@ -71,9 +74,12 @@ setup("authenticate as non onboarded user", async ({ page }) => {
         await page.getByRole("button", { name: /Create Workspace/i }).click();
 
         await page.waitForURL(ROUTES.PATTERNS.ONBOARDING_URL);
-        await saveUserDetails(page, NON_ONBOARDED_USER_FILE);
+        const url = new URL(page.url());
+
+        await saveUserDetails(page, NON_ONBOARDED_USER_FILE, url);
     } else if (ROUTES.PATTERNS.ONBOARDING_URL.test(currentUrl)) {
-        await saveUserDetails(page, NON_ONBOARDED_USER_FILE);
+        const url = new URL(page.url());
+        await saveUserDetails(page, NON_ONBOARDED_USER_FILE, url);
     } else {
         throw new Error(`Unexpected URL: ${currentUrl}`);
     }

apps/frontend/tests/utils/constants.ts

@@ -18,6 +18,13 @@ export const ROUTES = {
             `/${workspaceSlug}/projects/${projectSlug}/get-started`,
     },
 
+    SETTINGS: {
+        PROJECT: (workspaceSlug: string, projectSlug: string) =>
+            `/${workspaceSlug}/projects/${projectSlug}/settings/project`,
+        WORKSPACE: (workspaceSlug: string, projectSlug: string) =>
+            `/${workspaceSlug}/projects/${projectSlug}/settings/workspace`,
+    },
+
     SURVEY: {
         LIST: (workspaceSlug: string, projectSlug: string) => `/${workspaceSlug}/projects/${projectSlug}/surveys`,
         SINGLE: (workspaceSlug: string, projectSlug: string, surveySlug: string) =>
@@ -28,5 +35,7 @@ export const ROUTES = {
         ONBOARDING_URL: /\/[\w-]+\/projects\/[\w-]+\/get-started/,
         SURVEY_LIST_URL: /\/[\w-]+\/projects\/[\w-]+\/surveys/,
         SINGLE_SURVEY: /\/[\w-]+\/projects\/[\w-]+\/survey\/[\w-]+/,
+        WORKSPACE_SETTINGS: /\/[\w-]+\/projects\/[\w-]+\/settings\/workspace/,
+        PROJECT_SETTINGS: /\/[\w-]+\/projects\/[\w-]+\/settings\/project/,
     },
 };

apps/frontend/tests/utils/helper.ts

@@ -55,8 +55,8 @@ export function extractWorkspaceAndProjectSlugs(url: string) {
     return { workspaceSlug, projectSlug };
 }
 
-export async function saveUserDetails(page: Page, storageFile: string) {
-    const { workspaceSlug, projectSlug } = extractWorkspaceAndProjectSlugs(page.url());
+export async function saveUserDetails(page: Page, storageFile: string, url) {
+    const { workspaceSlug, projectSlug } = extractWorkspaceAndProjectSlugs(url);
     const details = { workspaceSlug, projectSlug };
     fs.writeFileSync(userDetailsFile, JSON.stringify(details), "utf-8");
     await page.context().storageState({ path: storageFile });