update collection endpoints

web/src/api/buster_rest/collections/requests.ts

@@ -15,15 +15,19 @@ export const collectionsGetList = async (params: GetCollectionListParams) => {
 };
 
 export const collectionsGetCollection = async (params: GetCollectionParams) => {
-  return await mainApi.get<BusterCollection>('/collections', { params }).then((res) => res.data);
+  return await mainApi
+    .get<BusterCollection>(`/collections/${params.id}`, { params })
+    .then((res) => res.data);
 };
 
 export const collectionsCreateCollection = async (params: CreateCollectionParams) => {
-  return await mainApi.post<BusterCollection>('/collections', { params }).then((res) => res.data);
+  return await mainApi.post<BusterCollection>('/collections', params).then((res) => res.data);
 };
 
 export const collectionsUpdateCollection = async (params: UpdateCollectionParams) => {
-  return await mainApi.put<BusterCollection>('/collections', { params }).then((res) => res.data);
+  return await mainApi
+    .put<BusterCollection>(`/collections/${params.id}`, params)
+    .then((res) => res.data);
 };
 
 export const collectionsDeleteCollection = async (params: DeleteCollectionParams) => {

web/src/components/features/dropdowns/SaveToCollectionsDropdown.tsx

@@ -16,7 +16,7 @@ export const SaveToCollectionsDropdown: React.FC<{
   onSaveToCollection: (collectionId: string[]) => Promise<void>;
   onRemoveFromCollection: (collectionId: string) => Promise<void>;
 }> = React.memo(({ children, onRemoveFromCollection, onSaveToCollection, selectedCollections }) => {
-  const { data: collectionsList } = useGetCollectionsList({});
+  const { data: collectionsList, isPending: isCreatingCollection } = useGetCollectionsList({});
   const onChangePage = useAppLayoutContextSelector((s) => s.onChangePage);
   const [openCollectionModal, setOpenCollectionModal] = React.useState(false);
   const [showDropdown, setShowDropdown] = React.useState(false);
@@ -34,14 +34,7 @@ export const SaveToCollectionsDropdown: React.FC<{
         })
       };
     });
-
-    return [
-      ...collectionsItems,
-      {
-        value: 'new',
-        label: 'New collection'
-      }
-    ];
+    return collectionsItems;
   }, [collectionsList, selectedCollections]);
 
   const onClickItem = useMemoizedFn((collection: BusterCollectionListItem) => {
@@ -69,34 +62,38 @@ export const SaveToCollectionsDropdown: React.FC<{
 
   const onOpenChange = useMemoizedFn((open: boolean) => {
     setShowDropdown(open);
-    console.log('open', open);
   });
 
-  const onClick = useMemoizedFn(() => {
+  const onOpenNewCollectionModal = useMemoizedFn(() => {
     setOpenCollectionModal(true);
     setShowDropdown(false);
   });
 
   const memoizedButton = useMemo(() => {
     return (
-      <Button variant="ghost" block className="justify-start!" prefix={<Plus />} onClick={onClick}>
+      <Button
+        variant="ghost"
+        block
+        loading={isCreatingCollection}
+        className="justify-start!"
+        prefix={<Plus />}
+        onClick={onOpenNewCollectionModal}>
         New collection
       </Button>
     );
-  }, [onClick]);
+  }, [onOpenNewCollectionModal]);
 
   return (
     <>
       <Dropdown
         side="bottom"
-        align="start"
-        menuHeader={'Save to a collection'}
+        align="center"
+        menuHeader={items.length > 0 ? 'Save to a collection' : undefined}
         onOpenChange={onOpenChange}
         footerContent={memoizedButton}
+        emptyStateText="No collections found"
         items={items}>
-        <div>
         <AppTooltip title={showDropdown ? '' : 'Save to collection'}>{children} </AppTooltip>
-        </div>
       </Dropdown>
 
       <NewCollectionModal

web/src/components/features/dropdowns/SaveToDashboardDropdown.tsx

@@ -84,7 +84,7 @@ export const SaveToDashboardDropdown: React.FC<{
     <Dropdown
       side="bottom"
       align="start"
-      menuHeader={'Save to a dashboard'}
+      menuHeader={items.length > 0 ? 'Save to a dashboard' : undefined}
       open={showDropdown}
       onOpenChange={onOpenChange}
       footerContent={memoizedButton}

web/src/components/ui/dropdown/Dropdown.tsx

@@ -159,7 +159,9 @@ export const DropdownBase = <T,>({
       onOpenChange={onOpenChange}
       dir={dir}
       modal={modal}>
-      <DropdownMenuTrigger asChild>{children}</DropdownMenuTrigger>
+      <DropdownMenuTrigger asChild>
+        <span className="dropdown-trigger">{children}</span>
+      </DropdownMenuTrigger>
       <DropdownMenuContent
         className={cn('max-w-72 min-w-44', className)}
         align={align}