Vaults to Spaces step 6 (#8132)

* Spaces polish * ✨ * Implement default restriction on space creation modal * ✂️ * Fix change space name
dust-tt · Oct 21, 2024 · 16b1cbb · 16b1cbb
1 parent 5c94c2a
commit 16b1cbb
Show file tree

Hide file tree

Showing 6 changed files with 101 additions and 42 deletions.
diff --git a/front/components/vaults/CreateOrEditVaultModal.tsx b/front/components/vaults/CreateOrEditVaultModal.tsx
@@ -50,6 +50,7 @@ function getTableRows(allUsers: UserType[]): RowData[] {
 }
 
 interface CreateOrEditVaultModalProps {
+  defaultRestricted?: boolean;
   isAdmin: boolean;
   isOpen: boolean;
   onClose: () => void;
@@ -59,6 +60,7 @@ interface CreateOrEditVaultModalProps {
 }
 
 export function CreateOrEditVaultModal({
+  defaultRestricted,
   isAdmin,
   isOpen,
   onClose,
@@ -73,9 +75,7 @@ export function CreateOrEditVaultModal({
   const [isSaving, setIsSaving] = useState(false);
   const [showDeleteConfirmDialog, setShowDeleteConfirmDialog] = useState(false);
   const [isDeleting, setIsDeleting] = useState(false);
-  const [isRestricted, setIsRestricted] = useState(
-    vault?.isRestricted ?? false
-  );
+  const [isRestricted, setIsRestricted] = useState(false);
 
   const doCreate = useCreateVault({ owner });
   const doUpdate = useUpdateVault({ owner });
@@ -98,9 +98,11 @@ export function CreateOrEditVaultModal({
 
       setVaultName(vaultInfo?.name ?? null);
 
-      setIsRestricted(vaultInfo?.isRestricted ?? false);
+      setIsRestricted(
+        vaultInfo ? vaultInfo.isRestricted : defaultRestricted ?? false
+      );
     }
-  }, [isOpen, vaultInfo]);
+  }, [defaultRestricted, isOpen, vaultInfo]);
 
   const handleClose = useCallback(() => {
     // Call the original onClose function.
@@ -120,7 +122,7 @@ export function CreateOrEditVaultModal({
   const onSave = useCallback(async () => {
     setIsSaving(true);
 
-    if (selectedMembers.length > 0 && vault) {
+    if (vault) {
       if (isRestricted) {
         await doUpdate(vault, {
           isRestricted: true,

diff --git a/front/components/vaults/EditVaultManagedDatasourcesViews.tsx b/front/components/vaults/EditVaultManagedDatasourcesViews.tsx
@@ -13,26 +13,28 @@ import React, { useMemo, useState } from "react";
 import { RequestDataSourceModal } from "@app/components/data_source/RequestDataSourceModal";
 import { SendNotificationsContext } from "@app/components/sparkle/Notification";
 import VaultManagedDataSourcesViewsModal from "@app/components/vaults/VaultManagedDatasourcesViewsModal";
-import { isManaged } from "@app/lib/data_sources";
+import { getDisplayNameForDataSource, isManaged } from "@app/lib/data_sources";
 import {
   useVaultDataSourceViews,
   useVaultDataSourceViewsWithDetails,
 } from "@app/lib/swr/vaults";
 
 interface EditVaultManagedDataSourcesViewsProps {
+  dataSourceView?: DataSourceViewType;
   isAdmin: boolean;
+  onSelectedDataUpdated: () => Promise<void>;
   owner: WorkspaceType;
   systemVault: VaultType;
   vault: VaultType;
-  dataSourceView?: DataSourceViewType;
 }
 
 export function EditVaultManagedDataSourcesViews({
+  dataSourceView,
   isAdmin,
+  onSelectedDataUpdated,
   owner,
   systemVault,
   vault,
-  dataSourceView,
 }: EditVaultManagedDataSourcesViewsProps) {
   const sendNotification = React.useContext(SendNotificationsContext);
 
@@ -195,7 +197,9 @@ export function EditVaultManagedDataSourcesViews({
         description: "All data sources were successfully updated in the Space.",
       });
     }
+
     await mutateVaultDataSourceViews();
+    await onSelectedDataUpdated();
   };
 
   if (isSystemVaultDataSourceViewsLoading || isVaultDataSourceViewsLoading) {
@@ -231,7 +235,11 @@ export function EditVaultManagedDataSourcesViews({
         <p>You have no connection set up.</p>
       </Dialog>
       <Button
-        label="Add data from connections"
+        label={
+          dataSourceView
+            ? `Add data from ${getDisplayNameForDataSource(dataSourceView.dataSource)}`
+            : "Add data from connections"
+        }
         variant="primary"
         icon={PlusIcon}
         size="sm"

diff --git a/front/components/vaults/VaultDataSourceViewContentList.tsx b/front/components/vaults/VaultDataSourceViewContentList.tsx
@@ -318,6 +318,10 @@ export const VaultDataSourceViewContentList = ({
     ]
   );
 
+  const onSelectedDataUpdated = useCallback(async () => {
+    await mutateContentNodes();
+  }, [mutateContentNodes]);
+
   const emptyVaultContent =
     isManaged(dataSourceView.dataSource) && vault.kind !== "system" ? (
       isAdmin ? (
@@ -424,6 +428,7 @@ export const VaultDataSourceViewContentList = ({
               systemVault={systemVault}
               isAdmin={isAdmin}
               dataSourceView={dataSourceView}
+              onSelectedDataUpdated={onSelectedDataUpdated}
             />
           )}
         {isManaged(dataSourceView.dataSource) &&

diff --git a/front/components/vaults/VaultLayout.tsx b/front/components/vaults/VaultLayout.tsx
@@ -9,7 +9,7 @@ import type {
 } from "@dust-tt/types";
 import { useRouter } from "next/router";
 import type { ComponentType } from "react";
-import React, { useMemo, useState } from "react";
+import React, { useCallback, useMemo, useState } from "react";
 
 import RootLayout from "@app/components/app/RootLayout";
 import AppLayout from "@app/components/sparkle/AppLayout";
@@ -40,7 +40,11 @@ export function VaultLayout({
   children: React.ReactNode;
   pageProps: VaultLayoutProps;
 }) {
-  const [showVaultCreationModal, setShowVaultCreationModal] = useState(false);
+  const [vaultCreationModalState, setVaultCreationModalState] = useState({
+    isOpen: false,
+    defaultRestricted: false,
+  });
+
   const {
     owner,
     plan,
@@ -61,6 +65,17 @@ export function VaultLayout({
   const isLimitReached = isPrivateVaultsLimitReached(vaults, plan);
   const isEnterprise = isEntreprisePlan(plan.code);
 
+  const closeVaultCreationModal = useCallback(() => {
+    setVaultCreationModalState((prev) => ({ ...prev, isOpen: false }));
+  }, []);
+
+  const openVaultCreationModal = useCallback(
+    ({ defaultRestricted }: { defaultRestricted: boolean }) => {
+      setVaultCreationModalState({ defaultRestricted, isOpen: true });
+    },
+    []
+  );
+
   return (
     <RootLayout>
       <AppLayout
@@ -70,7 +85,7 @@ export function VaultLayout({
           <VaultSideBarMenu
             owner={owner}
             isAdmin={isAdmin}
-            setShowVaultCreationModal={setShowVaultCreationModal}
+            openVaultCreationModal={openVaultCreationModal}
           />
         }
       >
@@ -86,19 +101,20 @@ export function VaultLayout({
           <CreateOrEditVaultModal
             isAdmin={isAdmin}
             owner={owner}
-            isOpen={!isLimitReached && showVaultCreationModal}
-            onClose={() => setShowVaultCreationModal(false)}
+            isOpen={!isLimitReached && vaultCreationModalState.isOpen}
+            onClose={closeVaultCreationModal}
             onCreated={(vault) => {
               void router.push(`/w/${owner.sId}/vaults/${vault.sId}`);
             }}
+            defaultRestricted={vaultCreationModalState.defaultRestricted}
           />
         )}
         {isAdmin && isLimitReached && (
           <Dialog
             alertDialog
-            isOpen={isLimitReached && showVaultCreationModal}
+            isOpen={isLimitReached && vaultCreationModalState.isOpen}
             title="You can't create more spaces."
-            onValidate={() => setShowVaultCreationModal(false)}
+            onValidate={closeVaultCreationModal}
           >
             <div>
               {isEnterprise

diff --git a/front/components/vaults/VaultResourcesList.tsx b/front/components/vaults/VaultResourcesList.tsx
@@ -32,7 +32,7 @@ import type {
 } from "@tanstack/react-table";
 import { useRouter } from "next/router";
 import type { ComponentType } from "react";
-import { useMemo } from "react";
+import { useCallback, useMemo } from "react";
 import { useRef } from "react";
 import { useState } from "react";
 import * as React from "react";
@@ -373,6 +373,21 @@ export const VaultResourcesList = ({
     ]
   );
 
+  const onSelectedDataUpdated = useCallback(async () => {
+    await mutateVaultDataSourceViews();
+  }, [mutateVaultDataSourceViews]);
+
+  const onDeleteFolderOrWebsite = useCallback(async () => {
+    if (selectedDataSourceView?.dataSource) {
+      const res = await doDelete(selectedDataSourceView);
+      if (res) {
+        await router.push(
+          `/w/${owner.sId}/vaults/${vault.sId}/categories/${selectedDataSourceView.category}`
+        );
+      }
+    }
+  }, [selectedDataSourceView, doDelete, router, owner.sId, vault.sId]);
+
   if (
     isDataSourcesLoading ||
     isVaultDataSourceViewsLoading ||
@@ -385,17 +400,6 @@ export const VaultResourcesList = ({
     );
   }
 
-  const onDeleteFolderOrWebsite = async () => {
-    if (selectedDataSourceView?.dataSource) {
-      const res = await doDelete(selectedDataSourceView);
-      if (res) {
-        await router.push(
-          `/w/${owner.sId}/vaults/${vault.sId}/categories/${selectedDataSourceView.category}`
-        );
-      }
-    }
-  };
-
   return (
     <>
       <div
@@ -440,6 +444,7 @@ export const VaultResourcesList = ({
               onCreated={async (dataSource) => {
                 const updateDataSourceViews =
                   await mutateVaultDataSourceViews();
+
                 if (updateDataSourceViews) {
                   const view = updateDataSourceViews.dataSourceViews.find(
                     (v: DataSourceViewType) =>
@@ -465,10 +470,11 @@ export const VaultResourcesList = ({
         )}
         {!isSystemVault && isManagedCategory && (
           <EditVaultManagedDataSourcesViews
+            isAdmin={isAdmin}
+            onSelectedDataUpdated={onSelectedDataUpdated}
             owner={owner}
-            vault={vault}
             systemVault={systemVault}
-            isAdmin={isAdmin}
+            vault={vault}
           />
         )}
         {isFolder && selectedDataSourceView && (

diff --git a/front/components/vaults/VaultSideBarMenu.tsx b/front/components/vaults/VaultSideBarMenu.tsx
@@ -39,13 +39,17 @@ import { getVaultIcon, getVaultName, groupVaults } from "@app/lib/vaults";
 interface VaultSideBarMenuProps {
   owner: LightWorkspaceType;
   isAdmin: boolean;
-  setShowVaultCreationModal?: (show: boolean) => void;
+  openVaultCreationModal?: ({
+    defaultRestricted,
+  }: {
+    defaultRestricted: boolean;
+  }) => void;
 }
 
 export default function VaultSideBarMenu({
   owner,
   isAdmin,
-  setShowVaultCreationModal,
+  openVaultCreationModal,
 }: VaultSideBarMenuProps) {
   const { vaults: vaultsAsAdmin, isVaultsLoading: isVaultsAsAdminLoading } =
     useVaultsAsAdmin({
@@ -109,21 +113,25 @@ export default function VaultSideBarMenu({
 
             return (
               <Fragment key={`vault-section-${index}`}>
-                <div className="flex items-center justify-between pr-1">
+                <div className="flex items-center justify-between px-2 pr-1">
                   <Item.SectionHeader
                     label={sectionDetails.label}
                     variant="secondary"
                   />
                   {sectionDetails.displayCreateVaultButton &&
                     isAdmin &&
-                    setShowVaultCreationModal && (
+                    openVaultCreationModal && (
                       <Button
                         className="mt-4"
                         size="xs"
                         variant="tertiary"
                         label="New"
                         icon={PlusIcon}
-                        onClick={() => setShowVaultCreationModal(true)}
+                        onClick={() =>
+                          openVaultCreationModal({
+                            defaultRestricted: sectionDetails.defaultRestricted,
+                          })
+                        }
                       />
                     )}
                 </div>
@@ -164,20 +172,34 @@ const renderVaultItems = (
   ));
 };
 
-type VaultSectionStructureType = {
-  label: string;
-  displayCreateVaultButton: boolean;
-};
+type VaultSectionStructureType =
+  | {
+      label: string;
+      displayCreateVaultButton: true;
+      defaultRestricted: boolean;
+    }
+  | {
+      label: string;
+      displayCreateVaultButton: false;
+    };
 
 const getVaultSectionDetails = (
   kind: VaultSectionGroupType
 ): VaultSectionStructureType => {
   switch (kind) {
     case "shared":
-      return { label: "Open", displayCreateVaultButton: true };
+      return {
+        label: "Open",
+        displayCreateVaultButton: true,
+        defaultRestricted: false,
+      };
 
     case "restricted":
-      return { label: "Restricted", displayCreateVaultButton: true };
+      return {
+        label: "Restricted",
+        displayCreateVaultButton: true,
+        defaultRestricted: true,
+      };
 
     case "system":
       return { label: "", displayCreateVaultButton: false };