feat: remove old team filter from breadcrumbs and replace it with the…

… new one on all pages
JoinColony · Sep 19, 2024 · 7ef7cb7 · 7ef7cb7
1 parent 6060386
commit 7ef7cb7
Show file tree

Hide file tree

Showing 16 changed files with 133 additions and 329 deletions.
diff --git a/src/components/common/ColonyFunding/ColonyFunding.tsx b/src/components/common/ColonyFunding/ColonyFunding.tsx
@@ -1,21 +1,21 @@
 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 TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
 
 const displayName = 'common.ColonyFunding';
 
 const ColonyFunding = () => {
   useSetPageHeadingTitle(formatText({ id: 'incomingFundsPage.title' }));
-  const teamsBreadcrumbs = useCreateTeamBreadcrumbs();
-  useSetPageBreadcrumbs(teamsBreadcrumbs);
 
-  return <FundsTable />;
+  return (
+    <div className="flex flex-col gap-8">
+      <TeamFilter />
+      <FundsTable />
+    </div>
+  );
 };
 
 ColonyFunding.displayName = displayName;

diff --git a/src/components/frame/Extensions/pages/PermissionsPage/PermissionsPage.tsx b/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 TeamFilter from '~v5/shared/TeamFilter/TeamFilter.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,43 @@ 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,
-              },
-            ]
-          : []),
-      ]}
-    />
+    <div className="flex flex-col gap-8">
+      <TeamFilter />
+      <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,
+                },
+              ]
+            : []),
+        ]}
+      />
+    </div>
   );
 };
 

diff --git a/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx b/src/components/frame/v5/pages/ActivityPage/ActivityPage.tsx
@@ -2,28 +2,25 @@ 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 TeamFilter from '~v5/shared/TeamFilter/TeamFilter.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">
+      <div className="mb-2">
+        <TeamFilter />
+      </div>
       <WidgetBoxList items={widgets} />
       <div>
         <FiltersContextProvider>

diff --git a/src/components/frame/v5/pages/AgreementsPage/AgreementsPage.tsx b/src/components/frame/v5/pages/AgreementsPage/AgreementsPage.tsx
@@ -7,16 +7,13 @@ 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 Button from '~v5/shared/Button/Button.tsx';
+import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
 
 import { useFiltersContext } from './FiltersContext/FiltersContext.ts';
 import { useGetAgreements } from './hooks.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();
@@ -54,6 +49,9 @@ const AgreementsPage: FC = () => {
 
   return (
     <div>
+      <div className="mb-8">
+        <TeamFilter />
+      </div>
       {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">

diff --git a/src/components/frame/v5/pages/BalancePage/BalancePage.tsx b/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 TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
 
 import { FiltersContextProvider } from './partials/BalanceTable/Filters/FiltersContext/index.ts';
 import BalanceTable from './partials/BalanceTable/index.ts';
@@ -12,7 +13,8 @@ const BalancePage: FC = () => {
   useSetPageHeadingTitle(formatText({ id: 'navigation.finances.balance' }));
 
   return (
-    <div className="w-full">
+    <div className="flex w-full flex-col gap-8">
+      <TeamFilter />
       <FiltersContextProvider>
         <BalanceTable />
       </FiltersContextProvider>

diff --git a/src/components/frame/v5/pages/MembersPage/MembersPage.tsx b/src/components/frame/v5/pages/MembersPage/MembersPage.tsx
@@ -25,6 +25,7 @@ import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
 import Filter from '~v5/common/Filter/index.ts';
 import { FilterTypes } from '~v5/common/TableFiltering/types.ts';
 import MeatBallMenu from '~v5/shared/MeatBallMenu/MeatBallMenu.tsx';
+import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
 
 import { useMembersPage } from './hooks.ts';
 import { MembersTabContentWrapper } from './partials/MembersTabContent/index.ts';
@@ -98,70 +99,73 @@ const MembersPage: FC = () => {
   ]);
 
   return (
-    <Tabs
-      activeTab={activeTab}
-      onTabClick={(_, id) =>
-        navigate(id === 0 ? COLONY_CONTRIBUTORS_ROUTE : COLONY_MEMBERS_ROUTE)
-      }
-      items={[
-        {
-          id: 0,
-          title: formatText({ id: 'membersPage.contributing' }),
-          notificationNumber: sortedContributorCount,
-          content: (
-            <MembersTabContentWrapper
-              title={formatText({ id: 'membersPage.contributing.title' })}
-              description={formatText({
-                id: 'membersPage.contributing.description',
-              })}
-              additionalActions={
-                <Filter
-                  excludeFilterType={FilterTypes.Team}
-                  searchInputLabel={formatMessage({
-                    id: 'filter.members.search.title',
-                  })}
-                  searchInputPlaceholder={formatMessage({
-                    id: 'filter.members.input.placeholder',
-                  })}
-                  customLabel={formatMessage({ id: 'allFilters' })}
-                />
-              }
-              titleAction={titleAction}
-            >
-              <Outlet />
-            </MembersTabContentWrapper>
-          ),
-        },
-        {
-          id: 1,
-          title: formatText({ id: 'membersPage.allMembers' }),
-          notificationNumber: sortedMemberCount,
-          content: (
-            <MembersTabContentWrapper
-              title={formatText({ id: 'membersPage.allMembers.title' })}
-              description={formatText({
-                id: 'membersPage.allMembers.description',
-              })}
-              additionalActions={
-                <Filter
-                  excludeFilterType={FilterTypes.Team}
-                  searchInputLabel={formatMessage({
-                    id: 'filter.members.search.title',
-                  })}
-                  searchInputPlaceholder={formatMessage({
-                    id: 'filter.members.input.placeholder',
-                  })}
-                  customLabel={formatMessage({ id: 'allFilters' })}
-                />
-              }
-              titleAction={titleAction}
-            >
-              <Outlet />
-            </MembersTabContentWrapper>
-          ),
-        },
-      ]}
-    />
+    <div className="flex flex-col gap-8">
+      <TeamFilter />
+      <Tabs
+        activeTab={activeTab}
+        onTabClick={(_, id) =>
+          navigate(id === 0 ? COLONY_CONTRIBUTORS_ROUTE : COLONY_MEMBERS_ROUTE)
+        }
+        items={[
+          {
+            id: 0,
+            title: formatText({ id: 'membersPage.contributing' }),
+            notificationNumber: sortedContributorCount,
+            content: (
+              <MembersTabContentWrapper
+                title={formatText({ id: 'membersPage.contributing.title' })}
+                description={formatText({
+                  id: 'membersPage.contributing.description',
+                })}
+                additionalActions={
+                  <Filter
+                    excludeFilterType={FilterTypes.Team}
+                    searchInputLabel={formatMessage({
+                      id: 'filter.members.search.title',
+                    })}
+                    searchInputPlaceholder={formatMessage({
+                      id: 'filter.members.input.placeholder',
+                    })}
+                    customLabel={formatMessage({ id: 'allFilters' })}
+                  />
+                }
+                titleAction={titleAction}
+              >
+                <Outlet />
+              </MembersTabContentWrapper>
+            ),
+          },
+          {
+            id: 1,
+            title: formatText({ id: 'membersPage.allMembers' }),
+            notificationNumber: sortedMemberCount,
+            content: (
+              <MembersTabContentWrapper
+                title={formatText({ id: 'membersPage.allMembers.title' })}
+                description={formatText({
+                  id: 'membersPage.allMembers.description',
+                })}
+                additionalActions={
+                  <Filter
+                    excludeFilterType={FilterTypes.Team}
+                    searchInputLabel={formatMessage({
+                      id: 'filter.members.search.title',
+                    })}
+                    searchInputPlaceholder={formatMessage({
+                      id: 'filter.members.input.placeholder',
+                    })}
+                    customLabel={formatMessage({ id: 'allFilters' })}
+                  />
+                }
+                titleAction={titleAction}
+              >
+                <Outlet />
+              </MembersTabContentWrapper>
+            ),
+          },
+        ]}
+      />
+    </div>
   );
 };
 

diff --git a/src/components/frame/v5/pages/TeamsPage/TeamsPage.tsx b/src/components/frame/v5/pages/TeamsPage/TeamsPage.tsx
@@ -12,6 +12,7 @@ import { ACTION_TYPE_FIELD_NAME } from '~v5/common/ActionSidebar/consts.ts';
 import EmptyContent from '~v5/common/EmptyContent/EmptyContent.tsx';
 import TeamCardList from '~v5/common/TeamCardList/index.ts';
 import Button, { CloseButton } from '~v5/shared/Button/index.ts';
+import TeamFilter from '~v5/shared/TeamFilter/TeamFilter.tsx';
 
 import { useTeams } from './hooks.tsx';
 import TeamsPageFilter from './partials/TeamsPageFilter/TeamsPageFilter.tsx';
@@ -35,6 +36,9 @@ const TeamsPage: FC = () => {
 
   return (
     <div className="flex w-full flex-col gap-6">
+      <div className="mb-2">
+        <TeamFilter />
+      </div>
       <div className="flex w-full flex-col gap-2 sm:flex-row sm:items-center sm:justify-between">
         <h2 className="text-gray-900 heading-4">
           {formatText({ id: 'teamsPage.allTeams' })}