fix users not being able to delete workspaces in default role when setting is enabled

frontend/src/components/Sidebar/ActiveWorkspaces/index.jsx

@@ -2,6 +2,7 @@ import React, { useState, useEffect, useCallback } from "react";
 import * as Skeleton from "react-loading-skeleton";
 import "react-loading-skeleton/dist/skeleton.css";
 import Workspace from "@/models/workspace";
+import System from "@/models/system";
 import ManageWorkspace, {
   useManageWorkspaceModal,
 } from "../../Modals/ManageWorkspace";
@@ -21,19 +22,22 @@ export default function ActiveWorkspaces() {
   const [hoverStates, setHoverStates] = useState({});
   const [gearHover, setGearHover] = useState({});
   const [uploadHover, setUploadHover] = useState({});
+  const [canDelete, setCanDelete] = useState(false);
   const { showing, showModal, hideModal } = useManageWorkspaceModal();
   const { user } = useUser();
   const isInWorkspaceSettings = !!useMatch("/workspace/:slug/settings/:tab");
 
-  console.log(user?.role);
   useEffect(() => {
     async function getWorkspaces() {
       const workspaces = await Workspace.all();
+      const canDelete = await System.getCanDeleteWorkspaces();
+      setCanDelete(canDelete);
       setLoading(false);
       setWorkspaces(workspaces);
     }
     getWorkspaces();
   }, []);
+
   const handleMouseEnter = useCallback((workspaceId) => {
     setHoverStates((prev) => ({ ...prev, [workspaceId]: true }));
   }, []);
@@ -120,35 +124,36 @@ export default function ActiveWorkspaces() {
                     </p>
                   </div>
                   {(isActive || isHovered || gearHover[workspace.id]) &&
-                  user?.role !== "default" ? (
+                  (user?.role !== "default" || canDelete) ? (
                     <div className="flex items-center gap-x-[2px]">
                       <div
                         className={`flex hover:bg-[#646768] p-[2px] rounded-[4px] text-[#A7A8A9] hover:text-white ${
                           uploadHover[workspace.id] ? "bg-[#646768]" : ""
                         }`}
                       >
-                        <button
-                          type="button"
-                          onClick={(e) => {
-                            e.preventDefault();
-                            setSelectedWs(workspace);
-                            showModal();
-                          }}
-                          onMouseEnter={() =>
-                            handleUploadMouseEnter(workspace.id)
-                          }
-                          onMouseLeave={() =>
-                            handleUploadMouseLeave(workspace.id)
-                          }
-                          className="rounded-md flex items-center justify-center ml-auto"
-                        >
-                          <UploadSimple
-                            className="h-[20px] w-[20px]"
-                            weight="bold"
-                          />
-                        </button>
+                        {user?.role !== "default" && (
+                          <button
+                            type="button"
+                            onClick={(e) => {
+                              e.preventDefault();
+                              setSelectedWs(workspace);
+                              showModal();
+                            }}
+                            onMouseEnter={() =>
+                              handleUploadMouseEnter(workspace.id)
+                            }
+                            onMouseLeave={() =>
+                              handleUploadMouseLeave(workspace.id)
+                            }
+                            className="rounded-md flex items-center justify-center ml-auto"
+                          >
+                            <UploadSimple
+                              className="h-[20px] w-[20px]"
+                              weight="bold"
+                            />
+                          </button>
+                        )}
                       </div>
-
                       <Link
                         type="button"
                         to={

frontend/src/locales/en/common.js

@@ -85,6 +85,8 @@ const TRANSLATIONS = {
       remove: "Remove Workspace Image",
     },
     delete: {
+      title: "Delete Workspace",
+      description: "Delete this workspace and all of its data.",
       delete: "Delete Workspace",
       deleting: "Deleting Workspace...",
       "confirm-start": "You are about to delete your entire",

frontend/src/pages/WorkspaceSettings/GeneralAppearance/DeleteWorkspace/index.jsx

@@ -44,13 +44,19 @@ export default function DeleteWorkspace({ workspace }) {
 
   if (!canDelete) return null;
   return (
-    <button
-      disabled={deleting}
-      onClick={deleteWorkspace}
-      type="button"
-      className="w-60 mt-[40px] transition-all duration-300 border border-transparent rounded-lg whitespace-nowrap text-sm px-5 py-2.5 focus:z-10 bg-red-500/25 text-red-200 hover:text-white hover:bg-red-600 disabled:bg-red-600 disabled:text-red-200 disabled:animate-pulse"
-    >
-      {deleting ? t("general.delete.deleting") : t("general.delete.delete")}
-    </button>
+    <div className="flex flex-col">
+      <label className="block input-label">{t("general.delete.title")}</label>
+      <p className="text-white text-opacity-60 text-xs font-medium py-1.5">
+        {t("general.delete.description")}
+      </p>
+      <button
+        disabled={deleting}
+        onClick={deleteWorkspace}
+        type="button"
+        className="w-60 mt-4 transition-all duration-300 border border-transparent rounded-lg whitespace-nowrap text-sm px-5 py-2.5 focus:z-10 bg-red-500/25 text-red-200 hover:text-white hover:bg-red-600 disabled:bg-red-600 disabled:text-red-200 disabled:animate-pulse"
+      >
+        {deleting ? t("general.delete.deleting") : t("general.delete.delete")}
+      </button>
+    </div>
   );
 }

frontend/src/pages/WorkspaceSettings/GeneralAppearance/WorkspacePfp/index.jsx

@@ -46,7 +46,7 @@ export default function WorkspacePfp({ workspace, slug }) {
   };
 
   return (
-    <div className="mt-6">
+    <div className="mt-6 mb-10">
       <div className="flex flex-col">
         <label className="block input-label">{t("general.pfp.title")}</label>
         <p className="text-white text-opacity-60 text-xs font-medium py-1.5">

server/endpoints/workspaces.js

@@ -11,6 +11,7 @@ const { Workspace } = require("../models/workspace");
 const { Document } = require("../models/documents");
 const { DocumentVectors } = require("../models/vectors");
 const { WorkspaceChats } = require("../models/workspaceChats");
+const { SystemSettings } = require("../models/systemSettings");
 const { getVectorDbClass } = require("../utils/helpers");
 const { handleFileUpload, handlePfpUpload } = require("../utils/files/multer");
 const { validatedRequest } = require("../utils/middleware/validatedRequest");
@@ -242,7 +243,7 @@ function workspaceEndpoints(app) {
 
   app.delete(
     "/workspace/:slug",
-    [validatedRequest, flexUserRoleValid([ROLES.admin, ROLES.manager])],
+    [validatedRequest, flexUserRoleValid([ROLES.all])],
     async (request, response) => {
       try {
         const { slug = "" } = request.params;
@@ -252,7 +253,16 @@ function workspaceEndpoints(app) {
           ? await Workspace.getWithUser(user, { slug })
           : await Workspace.get({ slug });
 
-        if (!workspace) {
+        const canDelete = await SystemSettings.canDeleteWorkspaces();
+        // if workspace is not found
+        // or (user is not an admin or manager and not in multi-user mode
+        // and users_can_delete_workspaces setting is false)
+        if (
+          !workspace ||
+          (!canDelete &&
+            ![ROLES.admin, ROLES.manager].includes(user?.role) &&
+            multiUserMode(response))
+        ) {
           response.sendStatus(400).end();
           return;
         }