[Dashboard] feat: replace all teams filter in remaining pages

src/components/common/ColonyFunding/ColonyFunding.tsx

@@ -1,21 +1,20 @@
 import React from 'react';
 
-import {
-  useSetPageBreadcrumbs,
-  useSetPageHeadingTitle,
-} from '~context/PageHeadingContext/PageHeadingContext.ts';
+import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
 import FundsTable from '~frame/v5/pages/FundsPage/partials/FundsTable/index.ts';
-import { useCreateTeamBreadcrumbs } from '~hooks/useTeamsBreadcrumbs.ts';
 import { formatText } from '~utils/intl.ts';
+import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
 
 const displayName = 'common.ColonyFunding';
 
 const ColonyFunding = () => {
   useSetPageHeadingTitle(formatText({ id: 'incomingFundsPage.title' }));
-  const teamsBreadcrumbs = useCreateTeamBreadcrumbs();
-  useSetPageBreadcrumbs(teamsBreadcrumbs);
 
-  return <FundsTable />;
+  return (
+    <ContentWithTeamFilter>
+      <FundsTable />
+    </ContentWithTeamFilter>
+  );
 };
 
 ColonyFunding.displayName = displayName;

src/components/frame/Extensions/pages/PermissionsPage/PermissionsPage.tsx

@@ -6,18 +6,15 @@ import {
   useResolvedPath,
 } from 'react-router-dom';
 
-import {
-  useSetPageBreadcrumbs,
-  useSetPageHeadingTitle,
-} from '~context/PageHeadingContext/PageHeadingContext.ts';
+import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
 import useEnabledExtensions from '~hooks/useEnabledExtensions.ts';
-import { useCreateTeamBreadcrumbs } from '~hooks/useTeamsBreadcrumbs.ts';
 import {
   COLONY_MULTISIG_ROUTE,
   COLONY_PERMISSIONS_ROUTE,
 } from '~routes/index.ts';
 import Tabs from '~shared/Extensions/Tabs/index.ts';
 import { formatText } from '~utils/intl.ts';
+import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
 
 import { useGetMembersForPermissions } from './hooks.tsx';
 import { PermissionType } from './types.ts';
@@ -31,7 +28,6 @@ const PermissionsPage: FC = () => {
   const resolvedPermissionsPath = useResolvedPath(COLONY_PERMISSIONS_ROUTE);
   const resolvedMultisigPath = useResolvedPath(COLONY_MULTISIG_ROUTE);
   const [activeTab, setActiveTab] = useState(PermissionType.Individual);
-  const teamsBreadcrumbs = useCreateTeamBreadcrumbs();
   const { itemsByRole, itemsByMultiSigRole, isLoading } =
     useGetMembersForPermissions();
   const individualMembersCount = Object.values(itemsByRole).reduce(
@@ -64,41 +60,42 @@ const PermissionsPage: FC = () => {
     resolvedMultisigPath.pathname,
   ]);
 
-  useSetPageBreadcrumbs(teamsBreadcrumbs);
   useSetPageHeadingTitle(formatText({ id: 'permissionsPage.title' }));
 
   return (
-    <Tabs
-      activeTab={activeTab}
-      className="pt-6"
-      onTabClick={(_, id) =>
-        navigate(
-          id === PermissionType.Individual
-            ? `${COLONY_PERMISSIONS_ROUTE}${searchRef.current}`
-            : `${COLONY_MULTISIG_ROUTE}${searchRef.current}`,
-        )
-      }
-      items={[
-        {
-          id: PermissionType.Individual,
-          title: formatText({ id: 'permissionsPage.individual' }),
-          content: <Outlet />,
-          notificationNumber: isLoading ? undefined : individualMembersCount,
-        },
-        ...(isMultiSigEnabled
-          ? [
-              {
-                id: PermissionType.MultiSig,
-                title: formatText({ id: 'permissionsPage.multisig' }),
-                content: <Outlet />,
-                notificationNumber: isLoading
-                  ? undefined
-                  : individualMembersWithMultiSigCount,
-              },
-            ]
-          : []),
-      ]}
-    />
+    <ContentWithTeamFilter>
+      <Tabs
+        activeTab={activeTab}
+        className="pt-6"
+        onTabClick={(_, id) =>
+          navigate(
+            id === PermissionType.Individual
+              ? COLONY_PERMISSIONS_ROUTE
+              : COLONY_MULTISIG_ROUTE,
+          )
+        }
+        items={[
+          {
+            id: PermissionType.Individual,
+            title: formatText({ id: 'permissionsPage.individual' }),
+            content: <Outlet />,
+            notificationNumber: isLoading ? undefined : individualMembersCount,
+          },
+          ...(isMultiSigEnabled
+            ? [
+                {
+                  id: PermissionType.MultiSig,
+                  title: formatText({ id: 'permissionsPage.multisig' }),
+                  content: <Outlet />,
+                  notificationNumber: isLoading
+                    ? undefined
+                    : individualMembersWithMultiSigCount,
+                },
+              ]
+            : []),
+        ]}
+      />
+    </ContentWithTeamFilter>
   );
 };
 

src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx

@@ -2,39 +2,35 @@ import React, { type FC } from 'react';
 
 import FiltersContextProvider from '~common/ColonyActionsTable/FiltersContext/FiltersContextProvider.tsx';
 import ColonyActionsTable from '~common/ColonyActionsTable/index.ts';
-import {
-  useSetPageBreadcrumbs,
-  useSetPageHeadingTitle,
-} from '~context/PageHeadingContext/PageHeadingContext.ts';
-import { useCreateTeamBreadcrumbs } from '~hooks/useTeamsBreadcrumbs.ts';
+import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
 import { formatText } from '~utils/intl.ts';
 import WidgetBoxList from '~v5/common/WidgetBoxList/index.ts';
+import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
 
 import { useActivityFeedWidgets } from './hooks.tsx';
 
 const displayName = 'v5.pages.ActivityPage';
 
 const ActivityPage: FC = () => {
-  const teamsBreadcrumbs = useCreateTeamBreadcrumbs();
-
   useSetPageHeadingTitle(formatText({ id: 'activityPage.title' }));
-  useSetPageBreadcrumbs(teamsBreadcrumbs);
 
   const widgets = useActivityFeedWidgets();
 
   return (
-    <div className="flex w-full flex-col gap-4 sm:gap-6">
-      <WidgetBoxList items={widgets} />
-      <div>
-        <FiltersContextProvider>
-          <ColonyActionsTable
-            className="[&_tr.expanded-below:not(last-child)_td>*:not(.expandable)]:!pb-2 [&_tr.expanded-below_td]:border-none"
-            showTotalPagesNumber={false}
-            hasHorizontalPadding
-          />
-        </FiltersContextProvider>
+    <ContentWithTeamFilter>
+      <div className="flex w-full flex-col gap-4 sm:gap-6">
+        <WidgetBoxList items={widgets} />
+        <div>
+          <FiltersContextProvider>
+            <ColonyActionsTable
+              className="[&_tr.expanded-below:not(last-child)_td>*:not(.expandable)]:!pb-2 [&_tr.expanded-below_td]:border-none"
+              showTotalPagesNumber={false}
+              hasHorizontalPadding
+            />
+          </FiltersContextProvider>
+        </div>
       </div>
-    </div>
+    </ContentWithTeamFilter>
   );
 };
 

src/components/frame/v5/pages/AgreementsPage/AgreementsPage.tsx

@@ -7,15 +7,12 @@ import { Action } from '~constants/actions.ts';
 import { useActionSidebarContext } from '~context/ActionSidebarContext/ActionSidebarContext.ts';
 import { useAppContext } from '~context/AppContext/AppContext.ts';
 import { useColonyContext } from '~context/ColonyContext/ColonyContext.ts';
-import {
-  useSetPageBreadcrumbs,
-  useSetPageHeadingTitle,
-} from '~context/PageHeadingContext/PageHeadingContext.ts';
-import { useCreateTeamBreadcrumbs } from '~hooks/useTeamsBreadcrumbs.ts';
+import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
 import { getDraftDecisionFromStore } from '~utils/decisions.ts';
 import { formatText } from '~utils/intl.ts';
 import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
 import EmptyContent from '~v5/common/EmptyContent/EmptyContent.tsx';
+import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
 import Button from '~v5/shared/Button/Button.tsx';
 
 import { useFiltersContext } from './FiltersContext/FiltersContext.ts';
@@ -32,12 +29,10 @@ const AgreementsPage: FC = () => {
     colony: { colonyAddress },
   } = useColonyContext();
   const { user } = useAppContext();
-  const teamsBreadcrumbs = useCreateTeamBreadcrumbs();
   const {
     actionSidebarToggle: [, { toggleOn: toggleActionSidebarOn }],
   } = useActionSidebarContext();
 
-  useSetPageBreadcrumbs(teamsBreadcrumbs);
   useSetPageHeadingTitle(formatText({ id: 'agreementsPage.title' }));
   const { searchedAgreements, loading, loadingMotionStateFilter } =
     useGetAgreements();
@@ -53,7 +48,7 @@ const AgreementsPage: FC = () => {
   );
 
   return (
-    <div>
+    <ContentWithTeamFilter>
       {draftAgreement && <DraftSection className="mb-6" />}
       <div className="mb-6 flex-col justify-between sm:flex sm:flex-row sm:items-center">
         <div className="mb-2.5 flex items-center gap-2 sm:mb-0">
@@ -141,7 +136,7 @@ const AgreementsPage: FC = () => {
             )}
         </>
       )}
-    </div>
+    </ContentWithTeamFilter>
   );
 };
 

src/components/frame/v5/pages/BalancePage/BalancePage.tsx

@@ -2,6 +2,7 @@ import React, { type FC } from 'react';
 
 import { useSetPageHeadingTitle } from '~context/PageHeadingContext/PageHeadingContext.ts';
 import { formatText } from '~utils/intl.ts';
+import ContentWithTeamFilter from '~v5/frame/ContentWithTeamFilter/ContentWithTeamFilter.tsx';
 
 import { FiltersContextProvider } from './partials/BalanceTable/Filters/FiltersContext/index.ts';
 import BalanceTable from './partials/BalanceTable/index.ts';
@@ -12,11 +13,11 @@ const BalancePage: FC = () => {
   useSetPageHeadingTitle(formatText({ id: 'navigation.finances.balance' }));
 
   return (
-    <div className="w-full">
+    <ContentWithTeamFilter>
       <FiltersContextProvider>
         <BalanceTable />
       </FiltersContextProvider>
-    </div>
+    </ContentWithTeamFilter>
   );
 };