Remove Workspace Creation Onboarding Page (#4823)

* remove create workspace step for onboarding

* remove unused image

* workspace creation into dedicated useEffect + use translated workspace name

* dev tag

---------

Co-authored-by: Timothy Carambat <rambat1010@gmail.com>

.github/workflows/dev-build.yaml

@@ -6,7 +6,7 @@ concurrency:
 
 on:
   push:
-    branches: ['vectordb-class-migration'] # put your current branch to create a build. Core team only.
+    branches: ['4822-feat-remove-workspace-creation-onboarding-page'] # put your current branch to create a build. Core team only.
     paths-ignore:
       - '**.md'
       - 'cloud-deployments/*'

frontend/src/pages/OnboardingFlow/Steps/CreateWorkspace/index.jsx

@@ -1,95 +0,0 @@
-import React, { useEffect, useRef, useState } from "react";
-import illustration from "@/media/illustrations/create-workspace.png";
-import paths from "@/utils/paths";
-import showToast from "@/utils/toast";
-import { useNavigate } from "react-router-dom";
-import Workspace from "@/models/workspace";
-import { useTranslation } from "react-i18next";
-
-export default function CreateWorkspace({
-  setHeader,
-  setForwardBtn,
-  setBackBtn,
-}) {
-  const { t } = useTranslation();
-  const [workspaceName, setWorkspaceName] = useState("");
-  const navigate = useNavigate();
-  const createWorkspaceRef = useRef();
-  const TITLE = t("onboarding.workspace.title");
-  const DESCRIPTION = t("onboarding.workspace.description");
-
-  useEffect(() => {
-    setHeader({ title: TITLE, description: DESCRIPTION });
-    setBackBtn({ showing: false, disabled: false, onClick: handleBack });
-  }, []);
-
-  useEffect(() => {
-    if (workspaceName.length > 0) {
-      setForwardBtn({ showing: true, disabled: false, onClick: handleForward });
-    } else {
-      setForwardBtn({ showing: true, disabled: true, onClick: handleForward });
-    }
-  }, [workspaceName]);
-
-  const handleCreate = async (e) => {
-    e.preventDefault();
-    const form = new FormData(e.target);
-    const { workspace, error } = await Workspace.new({
-      name: form.get("name"),
-      onboardingComplete: true,
-    });
-    if (!!workspace) {
-      showToast(
-        "Workspace created successfully! Taking you to home...",
-        "success"
-      );
-      await new Promise((resolve) => setTimeout(resolve, 1000));
-      navigate(paths.home());
-    } else {
-      showToast(`Failed to create workspace: ${error}`, "error");
-    }
-  };
-
-  function handleForward() {
-    createWorkspaceRef.current.click();
-  }
-
-  function handleBack() {
-    navigate(paths.onboarding.survey());
-  }
-
-  return (
-    <form
-      onSubmit={handleCreate}
-      className="w-full flex items-center justify-center flex-col gap-y-2"
-    >
-      <img src={illustration} alt="Create workspace" />
-      <div className="flex flex-col gap-y-4 w-full max-w-[600px]">
-        {" "}
-        <div className="w-full mt-4">
-          <label
-            htmlFor="name"
-            className="block mb-3 text-sm font-medium text-white"
-          >
-            {t("common.workspaces-name")}
-          </label>
-          <input
-            name="name"
-            type="text"
-            className="border-none bg-theme-settings-input-bg text-white focus:outline-primary-button active:outline-primary-button placeholder:text-theme-settings-input-placeholder outline-none text-sm rounded-lg block w-full p-2.5"
-            placeholder="My Workspace"
-            required={true}
-            autoComplete="off"
-            onChange={(e) => setWorkspaceName(e.target.value)}
-          />
-        </div>
-      </div>
-      <button
-        type="submit"
-        ref={createWorkspaceRef}
-        hidden
-        aria-hidden="true"
-      ></button>
-    </form>
-  );
-}

frontend/src/pages/OnboardingFlow/Steps/Survey/index.jsx

@@ -7,6 +7,7 @@ import { CheckCircle } from "@phosphor-icons/react";
 import React, { useState, useEffect, useRef } from "react";
 import { useNavigate } from "react-router-dom";
 import { useTranslation } from "react-i18next";
+import Workspace from "@/models/workspace";
 
 async function sendQuestionnaire({ email, useCase, comment }) {
   if (import.meta.env.DEV) {
@@ -53,7 +54,7 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
 
   function handleForward() {
     if (!!window?.localStorage?.getItem(COMPLETE_QUESTIONNAIRE)) {
-      navigate(paths.onboarding.createWorkspace());
+      navigate(paths.home());
       return;
     }
 
@@ -78,7 +79,7 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
   }
 
   function skipSurvey() {
-    navigate(paths.onboarding.createWorkspace());
+    navigate(paths.home());
   }
 
   function handleBack() {
@@ -91,6 +92,19 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
     setBackBtn({ showing: true, disabled: false, onClick: handleBack });
   }, []);
 
+  useEffect(() => {
+    async function createDefaultWorkspace() {
+      const workspaces = await Workspace.all();
+      if (workspaces.length === 0) {
+        await Workspace.new({
+          name: t("new-workspace.placeholder"),
+          onboardingComplete: true,
+        });
+      }
+    }
+    createDefaultWorkspace();
+  }, []);
+
   const handleSubmit = async (e) => {
     e.preventDefault();
     const form = e.target;
@@ -102,7 +116,7 @@ export default function Survey({ setHeader, setForwardBtn, setBackBtn }) {
       comment: formData.get("comment") || null,
     });
 
-    navigate(paths.onboarding.createWorkspace());
+    navigate(paths.home());
   };
 
   if (!!window?.localStorage?.getItem(COMPLETE_QUESTIONNAIRE)) {

frontend/src/pages/OnboardingFlow/Steps/index.jsx

@@ -6,7 +6,6 @@ import LLMPreference from "./LLMPreference";
 import UserSetup from "./UserSetup";
 import DataHandling from "./DataHandling";
 import Survey from "./Survey";
-import CreateWorkspace from "./CreateWorkspace";
 
 const OnboardingSteps = {
   home: Home,
@@ -14,7 +13,6 @@ const OnboardingSteps = {
   "user-setup": UserSetup,
   "data-handling": DataHandling,
   survey: Survey,
-  "create-workspace": CreateWorkspace,
 };
 
 export default OnboardingSteps;

frontend/src/utils/paths.js

@@ -45,9 +45,6 @@ export default {
     dataHandling: () => {
       return "/onboarding/data-handling";
     },
-    createWorkspace: () => {
-      return "/onboarding/create-workspace";
-    },
   },
   github: () => {
     return "https://github.com/Mintplex-Labs/anything-llm";