MDE/PKFE-31 updated workspace provider for file tree array

app/front-end/src/features/editor/stores/workspaceContextProvider.tsx

@@ -1,4 +1,5 @@
 import { FileContentModel, FileModel, FilePaginationModel, FileTypes } from '@/features/editor/types';
+import { getWorkspaceArray } from '@/features/editor/utils';
 import { useSessionContext, useStatusContext } from '@/hooks';
 import { axios, socket } from '@/lib';
 import { Endpoints, Events } from '@/types';
@@ -20,6 +21,7 @@ export interface WorkspaceContextProps {
   // File tree state properties
   fileTreeIsLoading: boolean;
   fileTree: TreeViewBaseItem<FileModel>[];
+  fileTreeArray: FileModel[];
 }
 
 export const WorkspaceContext = createContext<WorkspaceContextProps>({
@@ -37,6 +39,7 @@ export const WorkspaceContext = createContext<WorkspaceContextProps>({
   // File tree state defaults
   fileTreeIsLoading: true,
   fileTree: [],
+  fileTreeArray: [],
 });
 
 interface Props {
@@ -148,6 +151,7 @@ export const WorkspaceContextProvider: React.FC<Props> = ({ children }) => {
   // File tree state
   const [fileTreeIsLoading, setFileTreeIsLoading] = useState(true);
   const [fileTree, setFileTree] = useState<TreeViewBaseItem<FileModel>[]>([]);
+  const [fileTreeArray, setFileTreeArray] = useState<FileModel[]>([]);
 
   const { blockedStateUpdate } = useStatusContext();
 
@@ -157,6 +161,7 @@ export const WorkspaceContextProvider: React.FC<Props> = ({ children }) => {
     try {
       const response = await axios.get(Endpoints.WORKSPACE);
       setFileTree(response.data);
+      setFileTreeArray(getWorkspaceArray(response.data));
     } catch (error) {
       console.error('Failed to fetch workspace data:', error);
     } finally {
@@ -192,8 +197,9 @@ export const WorkspaceContextProvider: React.FC<Props> = ({ children }) => {
     filesHistory,
     filesHistoryStateUpdate,
 
-    fileTreeIsLoading: fileTreeIsLoading,
-    fileTree: fileTree,
+    fileTreeIsLoading,
+    fileTree,
+    fileTreeArray,
   };
 
   return <WorkspaceContext.Provider value={WorkspaceContextValue}>{children}</WorkspaceContext.Provider>;

app/front-end/src/features/editor/utils/helpers.tsx

@@ -1,6 +1,6 @@
+import { FileModel, FileTreeViewItemProps, FileTypes } from '@/features/editor/types';
 import { Article as ArticleIcon, FolderRounded, InsertDriveFile as InsertDriveFileIcon } from '@mui/icons-material';
 import { TreeViewBaseItem } from '@mui/x-tree-view';
-import { FileTreeViewItemProps, FileTypes } from '../types';
 
 export const isExpandable = (reactChildren: React.ReactNode) => {
   if (Array.isArray(reactChildren)) {
@@ -66,3 +66,27 @@ export const getFileExtension = (filename: string): string => {
   const dotIndex = filename.lastIndexOf('.');
   return dotIndex !== -1 ? filename.substring(dotIndex + 1).toLowerCase() : '';
 };
+
+export const getWorkspaceArray = (fileTreeView: TreeViewBaseItem<FileTreeViewItemProps>[]): FileModel[] => {
+  const workspaceArray: FileModel[] = [];
+  fileTreeView.sort((a, b) => {
+    if (a.fileType === FileTypes.FOLDER || b.fileType === FileTypes.FOLDER) {
+      if (a.fileType === b.fileType) {
+        return a.id.localeCompare(b.id);
+      }
+
+      return a.fileType === FileTypes.FOLDER ? 1 : -1;
+    }
+
+    return a.id.localeCompare(b.id);
+  });
+
+  for (const item of fileTreeView) {
+    workspaceArray.push({ id: item.id, label: item.label, type: item.fileType });
+    if (item.children && item.children.length !== 0) {
+      workspaceArray.push(...getWorkspaceArray(item.children));
+    }
+  }
+
+  return workspaceArray;
+};

app/front-end/src/features/editor/utils/index.ts

@@ -1 +1 @@
-export { doesFileExist, findUniqueFileName, getFileExtension, getIconFromFileType, isExpandable } from './helpers';
+export { doesFileExist, findUniqueFileName, getFileExtension, getIconFromFileType, isExpandable, getWorkspaceArray } from './helpers';