fix(chat): fix issue with folders creation inside change path dialog …

…(Issue #2114) (#2128)
epam · Sep 17, 2024 · 9585387 · 9585387
1 parent 3e38b54
commit 9585387
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 41 deletions.
diff --git a/apps/chat/src/components/Chat/ChangePathDialog.tsx b/apps/chat/src/components/Chat/ChangePathDialog.tsx
@@ -12,7 +12,7 @@ import {
   validateFolderRenaming,
 } from '@/src/utils/app/folders';
 
-import { FeatureType } from '@/src/types/common';
+import { FeatureType, ShareEntity } from '@/src/types/common';
 import { SharingType } from '@/src/types/share';
 import { Translation } from '@/src/types/translation';
 
@@ -39,10 +39,12 @@ import { SelectFolderFooter } from '@/src/components/Common/SelectFolder/SelectF
 import { SelectFolderHeader } from '@/src/components/Common/SelectFolder/SelectFolderHeader';
 import { SelectFolderList } from '@/src/components/Common/SelectFolder/SelectFolderList';
 
+import { FolderProps } from '../Folder/Folder';
+
 interface Props {
   type: SharingType;
   isOpen: boolean;
-  onClose: (path: string | undefined) => void;
+  onClose: (path?: string) => void;
   initiallySelectedFolderId: string;
   rootFolderId: string;
   depth?: number;
@@ -182,7 +184,7 @@ export const ChangePathDialog = ({
   );
 
   const handleAddFolder = useCallback(
-    (parentFolderId: string) => {
+    (parentFolderId = rootFolderId) => {
       const folderName = getNextDefaultName(
         t(DEFAULT_FOLDER_NAME),
         folders,
@@ -191,9 +193,7 @@ export const ChangePathDialog = ({
         true,
       );
 
-      setSelectedFolderId(
-        constructPath(parentFolderId || rootFolderId, folderName),
-      );
+      setSelectedFolderId(constructPath(parentFolderId, folderName));
 
       dispatch(
         actions.createTemporaryFolder({
@@ -218,7 +218,40 @@ export const ChangePathDialog = ({
     [actions, dispatch],
   );
 
-  const getPath = () => {
+  const folderProps: Omit<
+    FolderProps<ShareEntity, unknown>,
+    'currentFolder' | 'featureType'
+  > = useMemo(
+    () => ({
+      searchTerm: searchQuery,
+      allFolders: folders,
+      isInitialRenameEnabled: true,
+      openedFoldersIds,
+      newAddedFolderId: newFolderId,
+      isSidePanelFolder: false,
+      loadingFolderIds,
+      additionalItemData: {
+        isChangePathFolder: true,
+      },
+      onClickFolder: handleFolderSelect,
+      onRenameFolder: handleRenameFolder,
+      onDeleteFolder: handleDeleteFolder,
+      onAddFolder: handleAddFolder,
+    }),
+    [
+      folders,
+      handleAddFolder,
+      handleDeleteFolder,
+      handleFolderSelect,
+      handleRenameFolder,
+      loadingFolderIds,
+      newFolderId,
+      openedFoldersIds,
+      searchQuery,
+    ],
+  );
+
+  const getPath = useCallback(() => {
     const { path, pathDepth } = getPathToFolderById(folders, selectedFolderId);
 
     if (pathDepth + depth > MAX_CONVERSATION_AND_PROMPT_FOLDERS_DEPTH) {
@@ -231,13 +264,13 @@ export const ChangePathDialog = ({
     }
 
     return onClose(path);
-  };
+  }, [depth, dispatch, folders, onClose, selectedFolderId, t]);
 
   return (
     <SelectFolder
       isOpen={isOpen}
       modalDataQa="change-path-dialog"
-      onClose={() => onClose(undefined)}
+      onClose={onClose}
       title={t('Change path')}
     >
       <SelectFolderHeader
@@ -246,19 +279,7 @@ export const ChangePathDialog = ({
         errorMessage={errorMessage}
       >
         <SelectFolderList
-          folderProps={{
-            searchTerm: searchQuery,
-            allFolders: folders,
-            isInitialRenameEnabled: true,
-            openedFoldersIds,
-            onClickFolder: handleFolderSelect,
-            onRenameFolder: handleRenameFolder,
-            onDeleteFolder: handleDeleteFolder,
-            onAddFolder: handleAddFolder,
-            newAddedFolderId: newFolderId,
-            isSidePanelFolder: false,
-            loadingFolderIds,
-          }}
+          folderProps={folderProps}
           handleFolderSelect={handleFolderSelect}
           isAllEntitiesOpened={isAllFoldersOpened}
           initiallySelectedFolderId={initiallySelectedFolderId}
@@ -270,7 +291,7 @@ export const ChangePathDialog = ({
         />
       </SelectFolderHeader>
       <SelectFolderFooter
-        handleNewFolder={() => handleAddFolder(rootFolderId)}
+        handleNewFolder={handleAddFolder}
         onSelectFolderClick={getPath}
       />
     </SelectFolder>

diff --git a/apps/chat/src/components/Chat/Publish/PublishWizard.tsx b/apps/chat/src/components/Chat/Publish/PublishWizard.tsx
@@ -342,6 +342,14 @@ export function PublishModal({
     setIsSomeVersionInvalid(isInvalid);
   }, []);
 
+  const handleClose = useCallback((folderId?: string) => {
+    if (typeof folderId === 'string') {
+      setPath(folderId);
+    }
+
+    setIsChangeFolderModalOpened(false);
+  }, []);
+
   const isNothingSelectedAndNoRuleChanges =
     !selectedItemsIds.length &&
     (isEqual(
@@ -562,13 +570,7 @@ export function PublishModal({
       <ChangePathDialog
         initiallySelectedFolderId={entity.id}
         isOpen={isChangeFolderModalOpened}
-        onClose={(folderId) => {
-          if (typeof folderId === 'string') {
-            setPath(folderId);
-          }
-
-          setIsChangeFolderModalOpened(false);
-        }}
+        onClose={handleClose}
         type={type}
         depth={depth}
         rootFolderId={getRootId({

diff --git a/apps/chat/src/components/Common/FolderContextMenu.tsx b/apps/chat/src/components/Common/FolderContextMenu.tsx
@@ -22,7 +22,7 @@ import { getRootId } from '@/src/utils/app/id';
 import { isItemPublic } from '@/src/utils/app/publications';
 import { isEntityOrParentsExternal } from '@/src/utils/app/share';
 
-import { FeatureType } from '@/src/types/common';
+import { AdditionalItemData, FeatureType } from '@/src/types/common';
 import { FolderInterface } from '@/src/types/folder';
 import { DisplayMenuItemProps } from '@/src/types/menu';
 import { Translation } from '@/src/types/translation';
@@ -40,6 +40,7 @@ interface FolderContextMenuProps {
   isOpen?: boolean;
   isEmpty?: boolean;
   isSidePanelFolder?: boolean;
+  additionalItemData?: AdditionalItemData;
   onDelete?: MouseEventHandler<unknown>;
   onRename?: MouseEventHandler<unknown>;
   onAddFolder?: MouseEventHandler;
@@ -69,6 +70,7 @@ export const FolderContextMenu = ({
   isOpen,
   isEmpty,
   isSidePanelFolder,
+  additionalItemData,
   onSelect,
 }: FolderContextMenuProps) => {
   const { t } = useTranslation(Translation.SideBar);
@@ -189,19 +191,24 @@ export const FolderContextMenu = ({
       },
       {
         name: t('Add new folder'),
-        display: !!onAddFolder && !isExternal,
+        display:
+          (!!onAddFolder && !isExternal) ||
+          !!additionalItemData?.isChangePathFolder,
         dataQa: 'new-folder',
         Icon: IconFolderPlus,
         onClick: onAddFolder,
-        disabled: disableAll,
+        disabled:
+          (disableAll && !additionalItemData?.isChangePathFolder) ||
+          isNameInvalid,
       },
     ],
     [
       t,
       isExternal,
       onSelect,
-      disableAll,
+      featureType,
       onUpload,
+      disableAll,
       onRename,
       folder.temporary,
       folder.isShared,
@@ -219,8 +226,8 @@ export const FolderContextMenu = ({
       onUnpublish,
       isSidePanelFolder,
       onDelete,
-      featureType,
       onAddFolder,
+      additionalItemData?.isChangePathFolder,
     ],
   );
 

diff --git a/apps/chat/src/components/Common/SelectFolder/SelectFolderFooter.tsx b/apps/chat/src/components/Common/SelectFolder/SelectFolderFooter.tsx
@@ -19,7 +19,7 @@ export const SelectFolderFooter = ({
     <div className="flex items-center justify-between border-t border-primary px-3 py-4 md:px-6">
       <div className="flex items-center justify-center">
         <button
-          onClick={handleNewFolder}
+          onClick={() => handleNewFolder()}
           className="flex size-[34px] items-center justify-center rounded text-secondary hover:bg-accent-primary-alpha hover:text-accent-primary"
           data-qa="new-folder"
         >

diff --git a/apps/chat/src/components/Folder/Folder.tsx b/apps/chat/src/components/Folder/Folder.tsx
@@ -907,11 +907,11 @@ const Folder = <T extends ConversationInfo | PromptInfo | DialFile>({
                     {...currentFolder}
                     isHighlighted
                     featureType={featureType}
-                    containerClassName={
-                      (!isExternal || !isSidePanelFolder) && canSelectFolders
-                        ? 'group-hover/folder-item:hidden'
-                        : ''
-                    }
+                    containerClassName={classNames(
+                      (!isExternal || !isSidePanelFolder) &&
+                        canSelectFolders &&
+                        'group-hover/folder-item:hidden',
+                    )}
                   >
                     {hasResourcesToReview &&
                       isSidePanelFolder &&
@@ -1139,6 +1139,7 @@ const Folder = <T extends ConversationInfo | PromptInfo | DialFile>({
                     isEmpty={!hasChildItemOnAnyLevel}
                     isSidePanelFolder={isSidePanelFolder}
                     onSelect={onSelectFolder && onSelect}
+                    additionalItemData={additionalItemData}
                   />
                 </div>
               )}

diff --git a/apps/chat/src/types/common.ts b/apps/chat/src/types/common.ts
@@ -114,6 +114,7 @@ export enum ApiKeys {
 export interface AdditionalItemData {
   publicationUrl?: string;
   canAttachFiles?: boolean;
+  isChangePathFolder?: boolean;
   selectedFilesIds?: string[];
   selectedFolderIds?: string[];
   partialSelectedFolderIds?: string[];