Folder system implementation

.abacusai/config.json

@@ -0,0 +1,39 @@
+{
+  "permissions": {
+    "allow": [
+      "Bash(cat *)",
+      "Bash(ls *)",
+      "Bash(ls /Users/stefanos/Documents/GitHub/rb-core-middleware/src/services/ 2>&1 || true)",
+      "Bash(cat /Users/stefanos/Documents/GitHub/rb-core-middleware/package.json 2>&1 | head -30 || true)",
+      "Bash(Bash(yarn build 2>& *))",
+      "Bash(grep *)",
+      "Bash(Bash(yarn build 2>& *))",
+      "Bash(ls /Users/stefanos/Documents/GitHub/rb-core-middleware/src/models/ /Users/stefanos/Documents/GitHub/rb-core-middleware/s…)",
+      "Bash(Bash(yarn build 2>& *))",
+      "Bash(cd /Users/stefanos/Documents/GitHub/data-explorer-server)",
+      "Bash(find *)",
+      "Bash(curl *)",
+      "Bash(redis-cli *)",
+      "Bash(mongosh *)",
+      "KillShell",
+      "Bash(pkill *)",
+      "Bash(Bash(yarn build 2>& *))",
+      "Bash(Bash(yarn build 2>& *))",
+      "Bash(grep -A 30 \"async find\" /Users/stefanos/Documents/GitHub/rb-core-middleware/dist/services/folder.service.js | head -40)",
+      "Bash(sleep 5; curl -s \"http://localhost:5555/folders\" > /dev/null; sleep 1; grep \"DEBUG\" /tmp/srv.log)",
+      "Bash(Bash(yarn build 2>&1 *))",
+      "Bash(pkill -9 -f \"node -r source-map\" 2>&1 || true; sleep 1; echo done)",
+      "Bash(cat /tmp/srv.log 2>&1 | grep -A 2 DEBUG | head -50 || true)",
+      "Bash(Bash(yarn build 2>& *))",
+      "Bash(pkill -9 -f \"node -r source-map\" 2>&1 || true; redis-cli FLUSHALL 2>&1; sleep 1; cd /Users/stefanos/Documents/GitHub/dat…)",
+      "Bash(mongosh --quiet data-explorer-rb-db --eval 'db.AssetModel.find({}, {name:1, folderId:1}).limit(10).toArray()' 2>&1 | hea…)"
+    ]
+  },
+  "additionalDirectories": [
+    "/Users/stefanos/Documents/GitHub/rb-core-middleware/src/services",
+    "/Users/stefanos/Documents/GitHub/rb-core-middleware/src/models",
+    "/Users/stefanos/Documents/GitHub/rb-core-middleware/src/repositories",
+    "/Users/stefanos/Documents/GitHub/rb-core-middleware/src",
+    "/Users/stefanos/Documents/GitHub/data-explorer-server/src/controllers/report-builder"
+  ]
+}

src/app/hooks/queries/report-builder.ts

@@ -15,6 +15,8 @@ import {
   RBReportPatchModel,
   RBAssetModel,
   RBAssetModelResponse,
+  RBFolderModel,
+  RBFolderModelResponse,
 } from "app/state/api/action-reducers/report-builder/sync";
 import { AssetViewType } from "app/pages/report-builder/main/components/all-assets-view/toolbar";
 
@@ -34,6 +36,14 @@ export const useCreateAsset = () => {
   });
 };
 
+export const useCreateFolder = () => {
+  return useMutation({
+    mutationKey: ["ReportBuilderCreateFolder"],
+    mutationFn: (data: RBFolderModel) =>
+      axiosInstance.post<RBFolderModel>(`/folder`, data),
+  });
+};
+
 export const useGetReport = (reportId?: string) => {
   return useQuery({
     queryKey: ["ReportBuilderGetReport", reportId],
@@ -52,7 +62,22 @@ export const useGetAsset = (assetId?: string) => {
   });
 };
 
-export const useGetReports = (params: { sort: string; search: string }) => {
+export const useGetFolder = (folderId?: string) => {
+  return useQuery({
+    queryKey: ["ReportBuilderGetFolder", folderId],
+    queryFn: () =>
+      axiosInstance.get<RBFolderModelResponse>(`/folder/${folderId}`),
+    enabled: !!folderId,
+    staleTime: 1000 * 60 * 5, // 5 minutes
+  });
+};
+
+export const useGetReports = (params: {
+  sort: string;
+  search: string;
+  onlyRootLevel?: boolean;
+  includeFolders?: boolean;
+}) => {
   // TODO: cache and manage invalidation
   let filter = "";
   if (params.search) {
@@ -61,10 +86,21 @@ export const useGetReports = (params: { sort: string; search: string }) => {
     filter = `{"order":["${params.sort}"]}`;
   }
   return useQuery({
-    queryKey: ["ReportBuilderGetReports", params.search, params.sort],
+    queryKey: [
+      "ReportBuilderGetReports",
+      params.search,
+      params.sort,
+      params.onlyRootLevel,
+      params.includeFolders,
+    ],
     queryFn: () =>
       axiosInstance.get<RBReportModelResponse[]>(`/reports`, {
-        params: { filter },
+        params: {
+          filter,
+          folderFilter: filter,
+          onlyRootLevel: params.onlyRootLevel,
+          includeFolders: params.includeFolders,
+        },
       }),
     staleTime: 1000 * 60 * 5,
   });
@@ -75,6 +111,16 @@ export const useGetAssets = (params: {
   search: string;
   type: AssetViewType;
 }) => {
+  let filter = "";
+  if (params.search && params.type !== "all") {
+    filter = `{"where":{"name":{"like":".*${params.search}.*","options":"i"},"type":"${params.type}"}},"order":["${params.sort}"]}`;
+  } else if (params.search && params.type === "all") {
+    filter = `{"where":{"name":{"like":".*${params.search}.*","options":"i"}},"order":["${params.sort}"]}`;
+  } else if (!params.search && params.type !== "all") {
+    filter = `{"where":{"type":"${params.type}"},"order":["${params.sort}"]}`;
+  } else {
+    filter = `{"order":["${params.sort}"]}`;
+  }
   return useQuery({
     queryKey: [
       "ReportBuilderGetAssets",
@@ -84,14 +130,79 @@ export const useGetAssets = (params: {
     ],
     queryFn: () =>
       axiosInstance.get<RBAssetModelResponse[]>(`/assets`, {
+        params: { filter },
+      }),
+    staleTime: 1000 * 60 * 5,
+  });
+};
+
+export const useGetFolders = (params: {
+  sort: string;
+  search: string;
+  includeSubFolders?: boolean;
+}) => {
+  let filter = "";
+  if (params.search) {
+    filter = `{"where":{"name":{"like":".*${params.search}.*","options":"i"}},"order":["${params.sort}"]}`;
+  } else {
+    filter = `{"order":["${params.sort}"]}`;
+  }
+  return useQuery({
+    queryKey: [
+      "ReportBuilderGetFolders",
+      params.search,
+      params.sort,
+      params.includeSubFolders,
+    ],
+    queryFn: () =>
+      axiosInstance.get<RBFolderModelResponse[]>(`/folders`, {
         params: {
-          filter: `{"where":{"name":{"like":".*${params.search}.*","options":"i"}${params.type !== "all" ? `,"type":"${params.type}"` : ""}},"order":["${params.sort}"]}`,
+          filter,
+          includeSubFolders: Boolean(params.includeSubFolders),
         },
       }),
     staleTime: 1000 * 60 * 5,
   });
 };
 
+export const useAddReportToFolder = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ["ReportBuilderAddReportToFolder"],
+    mutationFn: (data: { folderId: string; reportId: string }) =>
+      axiosInstance.get(`/folder/add-report/${data.folderId}`, {
+        params: { reportId: data.reportId },
+      }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["ReportBuilderGetFolders"],
+      });
+      await queryClient.invalidateQueries({
+        queryKey: ["ReportBuilderGetReports"],
+      });
+    },
+  });
+};
+
+export const useAddFolderToFolder = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ["ReportBuilderAddFolderToFolder"],
+    mutationFn: (data: { folderId: string; folderIdToAdd: string }) =>
+      axiosInstance.get(`/folder/add-folder/${data.folderId}`, {
+        params: { folderId: data.folderIdToAdd },
+      }),
+    onSuccess: async () => {
+      await queryClient.invalidateQueries({
+        queryKey: ["ReportBuilderGetFolders"],
+      });
+      await queryClient.invalidateQueries({
+        queryKey: ["ReportBuilderGetReports"],
+      });
+    },
+  });
+};
+
 export const usePatchReport = (reportId: string | undefined) => {
   const queryClient = useQueryClient();
   return useMutation({
@@ -138,6 +249,33 @@ export const usePatchAsset = (assetId?: string) => {
   });
 };
 
+export const usePatchFolder = (folderId?: string) => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ["ReportBuilderPatchFolder", folderId],
+    mutationFn: (data: Partial<RBFolderModel>) =>
+      axiosInstance.patch<RBFolderModel>(`/folder/${folderId}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ReportBuilderGetFolders"] });
+      queryClient.invalidateQueries({
+        queryKey: ["ReportBuilderGetFolder", folderId],
+      });
+    },
+  });
+};
+
+export const usePatchFolder2 = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ["ReportBuilderPatchFolder"],
+    mutationFn: (data: Partial<RBFolderModel>) =>
+      axiosInstance.patch<RBFolderModel>(`/folder/${data.id}`, data),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ReportBuilderGetFolders"] });
+    },
+  });
+};
+
 export const useDeleteReport = () => {
   return useMutation({
     mutationKey: ["ReportBuilderDeleteReport"],
@@ -156,6 +294,17 @@ export const useDeleteAsset = () => {
   });
 };
 
+export const useDeleteFolder = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ["ReportBuilderDeleteFolder"],
+    mutationFn: (id: string) => axiosInstance.delete(`/folder/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ReportBuilderGetFolders"] });
+    },
+  });
+};
+
 export const useDuplicateReport = () => {
   return useMutation({
     mutationKey: ["ReportBuilderDuplicateReport"],
@@ -174,6 +323,17 @@ export const useDuplicateAsset = () => {
   });
 };
 
+export const useDuplicateFolder = () => {
+  const queryClient = useQueryClient();
+  return useMutation({
+    mutationKey: ["ReportBuilderDuplicateFolder"],
+    mutationFn: (id: string) => axiosInstance.get(`/folder/duplicate/${id}`),
+    onSuccess: () => {
+      queryClient.invalidateQueries({ queryKey: ["ReportBuilderGetFolders"] });
+    },
+  });
+};
+
 export const useRenderChartData = () => {
   return useMutation({
     mutationKey: ["ReportBuilderRenderChartData"],

src/app/pages/report-builder/components/dropdown/index.tsx

@@ -51,7 +51,6 @@ const StyledMenuItem = styled(MenuItem)(() => ({
   fontSize: "16px",
   padding: "12px 16px",
   justifyContent: "space-between",
-  color: appColors.SEARCH.DROPDOWN_ITEM_BACKGROUND_COLOR,
   "&:hover": {
     background: "#eff1fe",
   },
@@ -100,7 +99,7 @@ export const RBDropdown: React.FC<RBDropdownProps> = (props) => {
           justifyContent: "space-between",
           maxHeight: props.height ?? "35px",
           color: appColors.SEARCH.DROPDOWN_BUTTON_TEXT_COLOR,
-          border: `1px solid ${anchorEl ? "#3154f4" : appColors.SEARCH.DROPDOWN_BUTTON_BORDER_COLOR}`,
+          border: `1px solid ${anchorEl ? "#3154f4" : "#dfe3e5"}`,
           background: anchorEl
             ? "#eff1fe"
             : appColors.SEARCH.DROPDOWN_BUTTON_BACKGROUND_COLOR,
@@ -121,7 +120,7 @@ export const RBDropdown: React.FC<RBDropdownProps> = (props) => {
           },
         }}
       >
-        {selectedItem?.icon ?? props.fixedIcon}
+        {props.fixedIcon}
         <span
           style={{ letterSpacing: "0", fontSize: props.fontSize ?? "14px" }}
         >