feat: blocklist table (#24459)

* feat: blocklist table

* feat: blocklist table

* refactor: feedback

* chore: add select

* UI improvements

* chore: remove un unsed

---------

Co-authored-by: CarinaWolli <wollencarina@gmail.com>

packages/features/ee/organizations/pages/settings/other-team-members-view.tsx

@@ -38,7 +38,7 @@ function MembersList(props: MembersListProps) {
   return (
     <div className="flex flex-col gap-y-3">
       {members?.length && team ? (
-        <ul className="divide-subtle border-subtle divide-y rounded-md border ">
+        <ul className="divide-subtle border-subtle divide-y rounded-md border">
           {members.map((member) => {
             return <MemberListItem key={member.id} member={member} />;
           })}
@@ -95,7 +95,6 @@ const MembersView = () => {
   const router = useRouter();
   const params = useParamsWithFallback();
   const teamId = Number(params.id);
-  const session = useSession();
   const utils = trpc.useUtils();
   // const [query, setQuery] = useState<string | undefined>("");
   // const [queryToFetch, setQueryToFetch] = useState<string | undefined>("");
@@ -193,7 +192,7 @@ const MembersView = () => {
 
             {team && (
               <>
-                <hr className="border-subtle my-8" />
+                <hr className="border-subtle my-8 mt-6" />
                 <MakeTeamPrivateSwitch
                   teamId={team.id}
                   isPrivate={team.isPrivate}

packages/features/ee/organizations/pages/settings/privacy.tsx

@@ -1,10 +1,26 @@
 "use client";
 
+import { DataTableProvider } from "@calcom/features/data-table";
+import { useSegments } from "@calcom/features/data-table/hooks/useSegments";
 import LicenseRequired from "@calcom/features/ee/common/components/LicenseRequired";
 import MakeTeamPrivateSwitch from "@calcom/features/ee/teams/components/MakeTeamPrivateSwitch";
+import { useLocale } from "@calcom/lib/hooks/useLocale";
 import { trpc } from "@calcom/trpc/react";
 
-const PrivacyView = ({ permissions }: { permissions: { canRead: boolean; canEdit: boolean } }) => {
+import { BlocklistTable } from "~/settings/organizations/privacy/blocklist-table";
+
+const PrivacyView = ({
+  permissions,
+  watchlistPermissions,
+}: {
+  permissions: { canRead: boolean; canEdit: boolean };
+  watchlistPermissions?: {
+    canRead: boolean;
+    canCreate: boolean;
+    canDelete: boolean;
+  };
+}) => {
+  const { t } = useLocale();
   const { data: currentOrg } = trpc.viewer.organizations.listCurrent.useQuery();
   const isInviteOpen = !currentOrg?.user.accepted;
 
@@ -14,13 +30,27 @@ const PrivacyView = ({ permissions }: { permissions: { canRead: boolean; canEdit
 
   return (
     <LicenseRequired>
-      <div>
+      <div className="space-y-8">
         <MakeTeamPrivateSwitch
           isOrg={true}
           teamId={currentOrg.id}
           isPrivate={currentOrg.isPrivate}
           disabled={isDisabled}
         />
+
+        {watchlistPermissions?.canRead && (
+          <div>
+            <div>
+              <h2 className="text-emphasis text-base font-semibold">{t("organization_blocklist")}</h2>
+              <p className="text-muted text-sm">{t("manage_blocked_emails_and_domains")}</p>
+            </div>
+            <div className="mt-2">
+              <DataTableProvider useSegments={useSegments} defaultPageSize={25}>
+                <BlocklistTable permissions={watchlistPermissions} />
+              </DataTableProvider>
+            </div>
+          </div>
+        )}
       </div>
     </LicenseRequired>
   );