added feat/-#220

packages/bruno-app/src/components/Sidebar/Collections/index.js

@@ -1,21 +1,28 @@
 import React, { useState } from 'react';
-import { useSelector } from 'react-redux';
-import { IconSearch, IconFolders } from '@tabler/icons';
+import { useDispatch, useSelector } from 'react-redux';
+import { IconSearch, IconFolders, IconSortAZ } from '@tabler/icons';
 import Collection from '../Collections/Collection';
 import CreateCollection from '../CreateCollection';
 import StyledWrapper from './StyledWrapper';
 import CreateOrOpenCollection from './CreateOrOpenCollection';
 import { DndProvider } from 'react-dnd';
 import { HTML5Backend } from 'react-dnd-html5-backend';
+import { sortCollections } from 'providers/ReduxStore/slices/collections/actions';
 
 const CollectionsBadge = () => {
+  const dispatch = useDispatch()
   return (
     <div className="items-center mt-2 relative">
-      <div className="collections-badge flex items-center pl-2 pr-2 py-1 select-none">
-        <span className="mr-2">
-          <IconFolders size={18} strokeWidth={1.5} />
-        </span>
-        <span>Collections</span>
+      <div className='collections-badge flex items-center justify-between px-2'  >
+        <div className="flex items-center  py-1 select-none">
+          <span className="mr-2">
+            <IconFolders size={18} strokeWidth={1.5} />
+          </span>
+          <span>Collections</span>
+        </div>
+        <button onClick={() => dispatch(sortCollections())} >
+          <IconSortAZ size={18} strokeWidth={1.5} />
+        </button>
       </div>
     </div>
   );
@@ -64,12 +71,12 @@ const Collections = () => {
       <div className="mt-4 flex flex-col overflow-y-auto absolute top-32 bottom-10 left-0 right-0">
         {collections && collections.length
           ? collections.map((c) => {
-              return (
-                <DndProvider backend={HTML5Backend} key={c.uid}>
-                  <Collection searchText={searchText} collection={c} key={c.uid} />
-                </DndProvider>
-              );
-            })
+            return (
+              <DndProvider backend={HTML5Backend} key={c.uid}>
+                <Collection searchText={searchText} collection={c} key={c.uid} />
+              </DndProvider>
+            );
+          })
           : null}
       </div>
     </StyledWrapper>

packages/bruno-app/src/providers/ReduxStore/slices/collections/actions.js

@@ -34,6 +34,7 @@ import {
   renameItem as _renameItem,
   cloneItem as _cloneItem,
   deleteItem as _deleteItem,
+  sortCollections as _sortCollections,
   saveRequest as _saveRequest,
   selectEnvironment as _selectEnvironment,
   createCollection as _createCollection,
@@ -353,6 +354,9 @@ export const deleteItem = (itemUid, collectionUid) => (dispatch, getState) => {
   });
 };
 
+export const sortCollections = () => (dispatch) => {
+  dispatch(_sortCollections())
+}
 export const moveItem = (collectionUid, draggedItemUid, targetItemUid) => (dispatch, getState) => {
   const state = getState();
   const collection = findCollectionByUid(state.collections.collections, collectionUid);

packages/bruno-app/src/providers/ReduxStore/slices/collections/index.js

@@ -70,6 +70,9 @@ export const collectionsSlice = createSlice({
     removeCollection: (state, action) => {
       state.collections = filter(state.collections, (c) => c.uid !== action.payload.collectionUid);
     },
+    sortCollections: (state) => {
+      state.collections = state.collections.sort((a, b) => a.name.localeCompare(b.name))
+    },
     updateLastAction: (state, action) => {
       const { collectionUid, lastAction } = action.payload;
       const collection = findCollectionByUid(state.collections, collectionUid);
@@ -1141,6 +1144,7 @@ export const {
   brunoConfigUpdateEvent,
   renameCollection,
   removeCollection,
+  sortCollections,
   updateLastAction,
   collectionUnlinkEnvFileEvent,
   saveEnvironment,