feat(flows): add flow filters

packages/web/src/hooks/useCurrentUserRuleConditions.js

@@ -0,0 +1,20 @@
+import useCurrentUserAbility from 'hooks/useCurrentUserAbility';
+
+export default function useCurrentUserRuleConditions() {
+  const currentUserAbility = useCurrentUserAbility();
+
+  return function canCurrentUser(action, subject) {
+    const can = currentUserAbility.can(action, subject);
+
+    if (!can) return false;
+
+    const relevantRule = currentUserAbility.relevantRuleFor(action, subject);
+
+    const conditions = relevantRule?.conditions || [];
+    const conditionMap = Object.fromEntries(
+      conditions.map((condition) => [condition, true]),
+    );
+
+    return conditionMap;
+  };
+}

packages/web/src/hooks/useFlowFilters.js

@@ -0,0 +1,67 @@
+import { useSearchParams } from 'react-router-dom';
+import { useMutation } from '@tanstack/react-query';
+
+import api from 'helpers/api';
+import objectifyUrlSearchParams from 'helpers/objectifyUrlSearchParams';
+
+export default function useFlowFilters() {
+  const [searchParams, setSearchParams] = useSearchParams();
+
+  const searchParamsObject = objectifyUrlSearchParams(searchParams);
+
+  const { folderId, status } = searchParamsObject;
+  const onlyOwnedFlows =
+    searchParamsObject.onlyOwnedFlows === 'true' || undefined;
+
+  const filterByStatus = (status) => {
+    setSearchParams((current) => {
+      const { status: currentStatus, ...rest } = searchParamsObject;
+
+      if (status) {
+        return { ...rest, status };
+      }
+
+      return rest;
+    });
+  };
+
+  const filterByOwnership = (onlyOwnedFlows) => {
+    setSearchParams((current) => {
+      const { onlyOwnedFlows: currentOnlyOwnedFlows, ...rest } =
+        searchParamsObject;
+
+      if (onlyOwnedFlows) {
+        return { ...rest, onlyOwnedFlows: true };
+      }
+
+      return rest;
+    });
+  };
+
+  const enhanceExistingSearchParams = (key, value) => {
+    const searchParamsObject = objectifyUrlSearchParams(searchParams);
+
+    if (value === undefined) {
+      const { [key]: keyToRemove, ...remainingSearchParams } =
+        searchParamsObject;
+
+      return new URLSearchParams(remainingSearchParams).toString();
+    }
+
+    return new URLSearchParams({
+      ...searchParamsObject,
+      [key]: value,
+    }).toString();
+  };
+
+  return {
+    filters: {
+      folderId,
+      status,
+      onlyOwnedFlows,
+    },
+    filterByStatus,
+    filterByOwnership,
+    enhanceExistingSearchParams,
+  };
+}

packages/web/src/hooks/useFlows.js

@@ -1,12 +1,18 @@
 import api from 'helpers/api';
 import { useQuery } from '@tanstack/react-query';
 
-export default function useFlows({ flowName, page, folderId }) {
+export default function useFlows({
+  flowName,
+  page,
+  folderId,
+  status,
+  onlyOwnedFlows,
+}) {
   const query = useQuery({
-    queryKey: ['flows', flowName, { page, folderId }],
+    queryKey: ['flows', { flowName, page, folderId, status, onlyOwnedFlows }],
     queryFn: async ({ signal }) => {
       const { data } = await api.get('/v1/flows', {
-        params: { name: flowName, page, folderId },
+        params: { name: flowName, page, folderId, status, onlyOwnedFlows },
         signal,
       });