invite link updates

apps/web/src/api/buster_rest/security/queryRequests.ts

@@ -10,6 +10,7 @@ import {
   addApprovedDomain,
   removeApprovedDomain
 } from './requests';
+import type { GetApprovedDomainsResponse } from '@buster/server-shared/security';
 
 export const useGetWorkspaceSettings = () => {
   return useQuery({
@@ -46,6 +47,15 @@ export const useUpdateInviteLinks = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: updateInviteLinks,
+    onMutate: (variables) => {
+      queryClient.setQueryData(securityQueryKeys.securityInviteLink.queryKey, (prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          ...variables
+        };
+      });
+    },
     onSuccess: (data) => {
       queryClient.setQueryData(securityQueryKeys.securityInviteLink.queryKey, data);
     }
@@ -66,6 +76,18 @@ export const useAddApprovedDomain = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: addApprovedDomain,
+    onMutate: (variables) => {
+      queryClient.setQueryData(securityQueryKeys.securityApprovedDomains.queryKey, (prev) => {
+        if (!prev) return prev;
+        return {
+          ...prev,
+          ...variables.domains.map((domain) => ({
+            domain,
+            created_at: new Date().toISOString()
+          }))
+        } satisfies GetApprovedDomainsResponse;
+      });
+    },
     onSuccess: (data) => {
       queryClient.setQueryData(securityQueryKeys.securityApprovedDomains.queryKey, data);
     }
@@ -76,6 +98,14 @@ export const useRemoveApprovedDomain = () => {
   const queryClient = useQueryClient();
   return useMutation({
     mutationFn: removeApprovedDomain,
+    onMutate: (variables) => {
+      queryClient.setQueryData(securityQueryKeys.securityApprovedDomains.queryKey, (prev) => {
+        if (!prev) return prev;
+        return prev.filter(
+          (domain) => !variables.domains.includes(domain.domain)
+        ) satisfies GetApprovedDomainsResponse;
+      });
+    },
     onSuccess: (data) => {
       queryClient.setQueryData(securityQueryKeys.securityApprovedDomains.queryKey, data);
     }

apps/web/src/app/app/(settings_layout)/settings/(restricted-width)/(admin-only)/security/page.tsx

@@ -1,4 +1,6 @@
+import { InviteLinks } from '@/components/features/security/InviteLinks';
 import { SettingsPageHeader } from '../../../_components/SettingsPageHeader';
+import { ApprovedEmailDomains } from '@/components/features/security/ApprovedEmailDomains';
 
 export default function Page() {
   return (
@@ -8,6 +10,11 @@ export default function Page() {
           title="Security"
           description="Manage security and general permission settings"
         />
+
+        <div className="flex flex-col space-y-6">
+          <InviteLinks />
+          <ApprovedEmailDomains />
+        </div>
       </div>
     </div>
   );

apps/web/src/components/features/security/ApprovedEmailDomains.tsx

@@ -0,0 +1,173 @@
+'use client';
+
+import React, { useMemo, useState } from 'react';
+import { SecurityCards } from './SecurityCards';
+import { Input } from '@/components/ui/inputs';
+import { Button } from '@/components/ui/buttons';
+import { Text } from '@/components/ui/typography';
+import { Plus, Dots } from '@/components/ui/icons';
+import { useBusterNotifications } from '@/context/BusterNotifications';
+import { Dropdown } from '@/components/ui/dropdown';
+import {
+  useGetApprovedDomains,
+  useAddApprovedDomain,
+  useRemoveApprovedDomain
+} from '@/api/buster_rest/security/queryRequests';
+import pluralize from 'pluralize';
+import { useMemoizedFn } from '@/hooks';
+
+interface ApprovedDomain {
+  domain: string;
+  created_at: string;
+}
+
+export const ApprovedEmailDomains = React.memo(() => {
+  const { data: approvedDomains = [] } = useGetApprovedDomains();
+  const { mutateAsync: removeDomain } = useRemoveApprovedDomain();
+
+  const [isAddingDomain, setIsAddingDomain] = useState(false);
+
+  const { openInfoMessage, openErrorMessage } = useBusterNotifications();
+
+  const domainCount = approvedDomains.length;
+  const countText = pluralize('approved email domain', domainCount, true);
+
+  const handleRemoveDomain = useMemoizedFn(async (domain: string) => {
+    try {
+      await removeDomain({ domains: [domain] });
+      openInfoMessage('Domain removed successfully');
+    } catch (error) {
+      openErrorMessage('Failed to remove domain');
+    }
+  });
+
+  const sections = useMemo(
+    () =>
+      [
+        // Header section with count and add button
+        <div key="header" className="flex items-center justify-between">
+          <Text>{countText}</Text>
+          <Button onClick={() => setIsAddingDomain(true)} suffix={<Plus />}>
+            Add domain
+          </Button>
+        </div>,
+
+        // Add domain input section (when adding)
+        isAddingDomain && <AddDomainInput key="add-domain" setIsAddingDomain={setIsAddingDomain} />,
+
+        // Domain list sections
+        ...approvedDomains.map((domainData) => (
+          <DomainListItem
+            key={domainData.domain}
+            domainData={domainData}
+            onRemove={handleRemoveDomain}
+          />
+        ))
+      ].filter(Boolean),
+    [countText, isAddingDomain, approvedDomains, handleRemoveDomain]
+  );
+
+  return (
+    <SecurityCards
+      title="Approved email domains"
+      description="Anyone with an email address at these domains is allowed to sign up for this workspace"
+      cards={[{ sections }]}
+    />
+  );
+});
+
+ApprovedEmailDomains.displayName = 'ApprovedEmailDomains';
+
+const AddDomainInput = React.memo(
+  ({ setIsAddingDomain }: { setIsAddingDomain: (isAddingDomain: boolean) => void }) => {
+    const { mutateAsync: addDomain } = useAddApprovedDomain();
+    const { openInfoMessage, openErrorMessage } = useBusterNotifications();
+
+    const [newDomain, setNewDomain] = useState('');
+
+    const handleAddDomain = useMemoizedFn(async () => {
+      if (!newDomain.trim()) return;
+
+      try {
+        await addDomain({ domains: [newDomain.trim()] });
+        setNewDomain('');
+        setIsAddingDomain(false);
+        openInfoMessage('Domain added successfully');
+      } catch (error) {
+        openErrorMessage('Failed to add domain');
+      }
+    });
+
+    return (
+      <div key="add-domain" className="flex items-center space-x-2">
+        <Input
+          className="flex-1"
+          value={newDomain}
+          onChange={(e) => setNewDomain(e.target.value)}
+          placeholder="Enter domain (e.g., company.com)"
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleAddDomain();
+            } else if (e.key === 'Escape') {
+              setIsAddingDomain(false);
+              setNewDomain('');
+            }
+          }}
+          autoFocus
+        />
+        <Button variant="outlined" size="tall" onClick={handleAddDomain}>
+          Add
+        </Button>
+        <Button
+          size="tall"
+          variant={'ghost'}
+          onClick={() => {
+            setIsAddingDomain(false);
+            setNewDomain('');
+          }}>
+          Cancel
+        </Button>
+      </div>
+    );
+  }
+);
+
+AddDomainInput.displayName = 'AddDomainInput';
+
+interface DomainListItemProps {
+  domainData: ApprovedDomain;
+  onRemove: (domain: string) => Promise<void>;
+}
+
+const DomainListItem = React.memo<DomainListItemProps>(({ domainData, onRemove }) => {
+  const formatDate = (dateString: string) => {
+    return new Date(dateString).toLocaleDateString('en-US', {
+      month: 'short',
+      day: 'numeric',
+      year: 'numeric'
+    });
+  };
+
+  return (
+    <div className="flex items-center justify-between">
+      <div>
+        <Text className="font-medium">{domainData.domain}</Text>
+        <Text variant="secondary" size="sm">
+          Added {formatDate(domainData.created_at)}
+        </Text>
+      </div>
+      <Dropdown
+        items={[
+          {
+            label: 'Remove domain',
+            value: 'remove',
+            onClick: () => onRemove(domainData.domain)
+          }
+        ]}>
+        <Button variant="ghost" size="small" prefix={<Dots />} />
+      </Dropdown>
+    </div>
+  );
+});
+
+DomainListItem.displayName = 'DomainListItem';

apps/web/src/components/features/security/InviteLinks.tsx

@@ -1,17 +1,22 @@
-import React, { useState } from 'react';
+'use client';
+
+import React from 'react';
 import { SecurityCards } from './SecurityCards';
 import { Switch } from '@/components/ui/switch';
 import { Input } from '@/components/ui/inputs';
 import { Button } from '@/components/ui/buttons';
 import { Text } from '@/components/ui/typography';
-import { cn } from '@/lib/classMerge';
 import { Copy2, Refresh } from '@/components/ui/icons';
 import { useBusterNotifications } from '@/context/BusterNotifications';
 import { AppTooltip } from '@/components/ui/tooltip';
+import { useGetInviteLink, useUpdateInviteLinks } from '@/api/buster_rest/security/queryRequests';
+
+export const InviteLinks = React.memo(() => {
+  const { data: inviteLink } = useGetInviteLink();
+  const { mutateAsync: updateInviteLink } = useUpdateInviteLinks();
+  const enabled = inviteLink?.enabled ?? false;
+  const link = inviteLink?.link ?? '';
 
-export const InviteLinks = () => {
-  const [enabled, setEnabled] = useState(false);
-  const [link, setLink] = useState('');
   const { openInfoMessage } = useBusterNotifications();
 
   const onClickCopy = () => {
@@ -19,11 +24,15 @@ export const InviteLinks = () => {
     openInfoMessage('Invite link copied to clipboard');
   };
 
-  const onClickRefresh = () => {
+  const onClickRefresh = async () => {
-    setLink(Math.random().toString(36).substring(2, 15));
+    await updateInviteLink({ refresh_link: true });
     openInfoMessage('Invite link refreshed');
   };
 
+  const onToggleEnabled = (enabled: boolean) => {
+    updateInviteLink({ enabled });
+  };
+
   return (
     <SecurityCards
       title="Invite links"
@@ -33,7 +42,7 @@ export const InviteLinks = () => {
           sections: [
             <div key="title" className="flex items-center justify-between">
               <Text>Enable invite links</Text>
-              <Switch checked={enabled} onCheckedChange={setEnabled} />
+              <Switch checked={enabled} onCheckedChange={onToggleEnabled} />
             </div>,
             enabled && (
               <div key="link" className="flex items-center justify-between space-x-2">
@@ -65,4 +74,6 @@ export const InviteLinks = () => {
       ]}
     />
   );
-};
+});
+
+InviteLinks.displayName = 'InviteLinks';

apps/web/src/layouts/ChatLayout/FileContainer/FileContainerHeader/interfaces.ts

@@ -5,7 +5,7 @@ export type FileContainerSegmentProps = {
   selectedFileId: string | undefined;
   chatId: string | undefined;
   overrideOldVersionMessage?: boolean;
-  isVersionHistoryMode: boolean;
+  isVersionHistoryMode?: boolean;
 };
 
 export type FileContainerButtonsProps = {

packages/server-shared/src/security/requests.ts

@@ -1,24 +1,30 @@
-import { z } from 'zod/v4';
+import { z } from "zod/v4";
-import { OrganizationRoleSchema } from '../organization';
+import { OrganizationRoleSchema } from "../organization";
 
 export const UpdateInviteLinkRequestSchema = z.object({
-  enabled: z.boolean(),
+  enabled: z.boolean().optional(),
   refresh_link: z.boolean().optional(),
 });
 
-export type UpdateInviteLinkRequest = z.infer<typeof UpdateInviteLinkRequestSchema>;
+export type UpdateInviteLinkRequest = z.infer<
+  typeof UpdateInviteLinkRequestSchema
+>;
 
 export const AddApprovedDomainRequestSchema = z.object({
   domains: z.array(z.string()),
 });
 
-export type AddApprovedDomainRequest = z.infer<typeof AddApprovedDomainRequestSchema>;
+export type AddApprovedDomainRequest = z.infer<
+  typeof AddApprovedDomainRequestSchema
+>;
 
 export const RemoveApprovedDomainRequestSchema = z.object({
   domains: z.array(z.string()),
 });
 
-export type RemoveApprovedDomainRequest = z.infer<typeof RemoveApprovedDomainRequestSchema>;
+export type RemoveApprovedDomainRequest = z.infer<
+  typeof RemoveApprovedDomainRequestSchema
+>;
 
 export const UpdateWorkspaceSettingsRequestSchema = z.object({
   enabled: z.boolean().optional(),
@@ -32,10 +38,12 @@ export const UpdateWorkspaceSettingsRequestSchema = z.object({
           .regex(
             /^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[1-5][0-9a-fA-F]{3}-[89abAB][0-9a-fA-F]{3}-[0-9a-fA-F]{12}$/
           ),
-        z.literal('all'),
+        z.literal("all"),
       ])
     )
     .optional(),
 });
 
-export type UpdateWorkspaceSettingsRequest = z.infer<typeof UpdateWorkspaceSettingsRequestSchema>;
+export type UpdateWorkspaceSettingsRequest = z.infer<
+  typeof UpdateWorkspaceSettingsRequestSchema
+>;