Merge pull request #62 from FlowTestAI/collapsible-attribute

Remember clicks in collections sidebar

Author: jsajal

src/components/molecules/sidebar/content/Collection.js

@@ -10,13 +10,17 @@ import 'tippy.js/dist/tippy.css';
 import { DirectoryOptionsActions } from 'constants/WorkspaceDirectory';
 import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 import { deleteFlowTest } from 'service/collection';
+import useCollectionStore from 'stores/CollectionStore';
 
 const Collection = ({ collectionId, item, depth }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  //const [isExpanded, setIsExpanded] = useState(false);
+  const clickItem = useCollectionStore((state) => state.clickItem);
   const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
   const [flowTestPathToDelete, setFlowTestPathToDelete] = useState('');
+
   const messageForConfirmActionModal =
     'Do you wish to delete this flowtest? This action deletes it from disk and cannot be undone';
+
   const getListDisplayTitle = () => {
     if (item.type === OBJ_TYPES.collection) {
       // this is for collections tab thus we have archive box icon
@@ -27,7 +31,8 @@ const Collection = ({ collectionId, item, depth }) => {
             const clickFromElementDataSet = event.target.dataset;
             const clickFrom = clickFromElementDataSet?.clickFrom;
             if (!clickFrom || clickFrom !== 'options-menu') {
-              return setIsExpanded((prev) => !prev);
+              clickItem(item, collectionId);
+              //return setIsExpanded((prev) => !prev);
             }
           }}
         >
@@ -90,7 +95,8 @@ const Collection = ({ collectionId, item, depth }) => {
           onClick={(event) => {
             const clickFrom = event.target.dataset?.clickFrom;
             if (!clickFrom || clickFrom !== 'options-menu') {
-              return setIsExpanded((prev) => !prev);
+              clickItem(item, collectionId);
+              //return setIsExpanded((prev) => !prev);
             }
           }}
         >
@@ -113,7 +119,7 @@ const Collection = ({ collectionId, item, depth }) => {
     <>
       <li>
         {getListDisplayTitle()}
-        {isExpanded && (
+        {item.collapsed === false && (
           <>
             {item.items?.map((childItem, index) => (
               <ul

src/components/molecules/sidebar/content/Environment.js

@@ -8,9 +8,11 @@ import ConfirmActionModal from 'components/molecules/modals/ConfirmActionModal';
 import { toast } from 'react-toastify';
 import Tippy from '@tippyjs/react';
 import 'tippy.js/dist/tippy.css';
+import useCollectionStore from 'stores/CollectionStore';
 
 const Environment = ({ collectionId, collection }) => {
-  const [isExpanded, setIsExpanded] = useState(false);
+  //const [isExpanded, setIsExpanded] = useState(false);
+  const clickEnvironments = useCollectionStore((state) => state.clickEnvironments);
   const [confirmActionModalOpen, setConfirmActionModalOpen] = useState(false);
   const [envToDelete, setEnvToDelete] = useState('');
 
@@ -26,7 +28,8 @@ const Environment = ({ collectionId, collection }) => {
             const clickFromElementDataSet = event.target.dataset;
             const clickFrom = clickFromElementDataSet?.clickFrom;
             if (!clickFrom || clickFrom !== 'env-options-menu') {
-              return setIsExpanded((prev) => !prev);
+              //return setIsExpanded((prev) => !prev);
+              clickEnvironments(collectionId);
             }
           }}
         >
@@ -42,7 +45,7 @@ const Environment = ({ collectionId, collection }) => {
             pathName={collection.pathname}
           />
         </div>
-        {isExpanded && (
+        {collection.envCollapsed === false && (
           <>
             {collection.environments?.map((environment, index) => (
               <ul

src/stores/CollectionStore.js

@@ -21,9 +21,11 @@ const useCollectionStore = create((set, get) => ({
       type: OBJ_TYPES.collection,
       name: name,
       pathname: pathname,
+      collapsed: true,
       nodes: nodes,
       items: [],
       environments: [],
+      envCollapsed: true,
     };
     if (!get().collections.find((c) => c.pathname === pathname)) {
       set((state) => ({ collections: [...state.collections, collectionObj] }));
@@ -53,6 +55,7 @@ const useCollectionStore = create((set, get) => ({
                 pathname: `${currentPath}${PATH_SEPARATOR}${directoryName}`,
                 name: directoryName,
                 type: OBJ_TYPES.folder,
+                collapsed: true,
                 items: [],
               };
               currentSubItems.push(childItem);
@@ -192,6 +195,7 @@ const useCollectionStore = create((set, get) => ({
                 pathname: `${currentPath}${PATH_SEPARATOR}${directoryName}`,
                 name: directoryName,
                 type: OBJ_TYPES.folder,
+                collapsed: true,
                 items: [],
               };
               currentSubItems.push(childItem);
@@ -305,6 +309,36 @@ const useCollectionStore = create((set, get) => ({
       }),
     );
   },
+  clickItem: (item, collectionId) => {
+    set(
+      produce((state) => {
+        if (item) {
+          if (item.type === OBJ_TYPES.collection) {
+            const collection = state.collections.find((c) => c.id === collectionId);
+            if (collection) {
+              collection.collapsed = !collection.collapsed;
+            }
+          } else if (item.type === OBJ_TYPES.folder) {
+            const collection = state.collections.find((c) => c.id === collectionId);
+            if (collection) {
+              const findItem = findItemInCollectionTree(item, collection);
+              findItem.collapsed = !findItem.collapsed;
+            }
+          }
+        }
+      }),
+    );
+  },
+  clickEnvironments: (collectionId) => {
+    set(
+      produce((state) => {
+        const collection = state.collections.find((c) => c.id === collectionId);
+        if (collection) {
+          collection.envCollapsed = !collection.envCollapsed;
+        }
+      }),
+    );
+  },
 }));
 
 export default useCollectionStore;