feat: document visibility (#1262)

Adds the ability to set a visibility scope for documents within teams.

packages/ui/components/document/document-visibility-select.tsx

@@ -0,0 +1,84 @@
+import React, { forwardRef } from 'react';
+
+import type { SelectProps } from '@radix-ui/react-select';
+import { InfoIcon } from 'lucide-react';
+
+import { DOCUMENT_VISIBILITY } from '@documenso/lib/constants/document-visibility';
+import { DocumentVisibility } from '@documenso/lib/types/document-visibility';
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@documenso/ui/primitives/select';
+import { Tooltip, TooltipContent, TooltipTrigger } from '@documenso/ui/primitives/tooltip';
+
+export type DocumentVisibilitySelectType = SelectProps & {
+  currentMemberRole?: string;
+};
+
+export const DocumentVisibilitySelect = forwardRef<HTMLButtonElement, DocumentVisibilitySelectType>(
+  ({ currentMemberRole, ...props }, ref) => {
+    const canUpdateVisibility = currentMemberRole === 'ADMIN' || currentMemberRole === 'MANAGER';
+
+    return (
+      <Select {...props} disabled={!canUpdateVisibility}>
+        <SelectTrigger ref={ref} className="bg-background text-muted-foreground">
+          <SelectValue data-testid="documentVisibilitySelectValue" placeholder="Everyone" />
+        </SelectTrigger>
+
+        <SelectContent position="popper">
+          <SelectItem value={DocumentVisibility.EVERYONE}>
+            {DOCUMENT_VISIBILITY.EVERYONE.value}
+          </SelectItem>
+
+          {(currentMemberRole === 'ADMIN' || currentMemberRole === 'MANAGER') && (
+            <SelectItem value={DocumentVisibility.MANAGER_AND_ABOVE}>
+              {DOCUMENT_VISIBILITY.MANAGER_AND_ABOVE.value}
+            </SelectItem>
+          )}
+
+          {currentMemberRole === 'ADMIN' && (
+            <SelectItem value={DocumentVisibility.ADMIN}>
+              {DOCUMENT_VISIBILITY.ADMIN.value}
+            </SelectItem>
+          )}
+        </SelectContent>
+      </Select>
+    );
+  },
+);
+
+DocumentVisibilitySelect.displayName = 'DocumentVisibilitySelect';
+
+export const DocumentVisibilityTooltip = () => {
+  return (
+    <Tooltip>
+      <TooltipTrigger>
+        <InfoIcon className="mx-2 h-4 w-4" />
+      </TooltipTrigger>
+
+      <TooltipContent className="text-foreground max-w-md space-y-2 p-4">
+        <h2>
+          <strong>Document visibility</strong>
+        </h2>
+
+        <p>The visibility of the document to the recipient.</p>
+
+        <ul className="ml-3.5 list-outside list-disc space-y-0.5 py-2">
+          <li>
+            <strong>Everyone</strong> - Everyone can access and view the document
+          </li>
+          <li>
+            <strong>Managers and above</strong> - Only managers and above can access and view the
+            document
+          </li>
+          <li>
+            <strong>Admins only</strong> - Only admins can access and view the document
+          </li>
+        </ul>
+      </TooltipContent>
+    </Tooltip>
+  );
+};

packages/ui/primitives/document-flow/add-settings.tsx

@@ -10,6 +10,7 @@ import { useForm } from 'react-hook-form';
 import { DATE_FORMATS, DEFAULT_DOCUMENT_DATE_FORMAT } from '@documenso/lib/constants/date-formats';
 import { DEFAULT_DOCUMENT_TIME_ZONE, TIME_ZONES } from '@documenso/lib/constants/time-zones';
 import { extractDocumentAuthMethods } from '@documenso/lib/utils/document-auth';
+import type { TeamMemberRole } from '@documenso/prisma/client';
 import { DocumentStatus, type Field, type Recipient, SendStatus } from '@documenso/prisma/client';
 import type { DocumentWithData } from '@documenso/prisma/types/document-with-data';
 import {
@@ -20,6 +21,10 @@ import {
   DocumentGlobalAuthActionSelect,
   DocumentGlobalAuthActionTooltip,
 } from '@documenso/ui/components/document/document-global-auth-action-select';
+import {
+  DocumentVisibilitySelect,
+  DocumentVisibilityTooltip,
+} from '@documenso/ui/components/document/document-visibility-select';
 import {
   Accordion,
   AccordionContent,
@@ -59,6 +64,7 @@ export type AddSettingsFormProps = {
   isDocumentEnterprise: boolean;
   isDocumentPdfLoaded: boolean;
   document: DocumentWithData;
+  currentTeamMemberRole?: TeamMemberRole;
   onSubmit: (_data: TAddSettingsFormSchema) => void;
 };
 
@@ -69,6 +75,7 @@ export const AddSettingsFormPartial = ({
   isDocumentEnterprise,
   isDocumentPdfLoaded,
   document,
+  currentTeamMemberRole,
   onSubmit,
 }: AddSettingsFormProps) => {
   const { documentAuthOption } = extractDocumentAuthMethods({
@@ -80,6 +87,7 @@ export const AddSettingsFormPartial = ({
     defaultValues: {
       title: document.title,
       externalId: document.externalId || '',
+      visibility: document.visibility || '',
       globalAccessAuth: documentAuthOption?.globalAccessAuth || undefined,
       globalActionAuth: documentAuthOption?.globalActionAuth || undefined,
       meta: {
@@ -174,6 +182,29 @@ export const AddSettingsFormPartial = ({
               )}
             />
 
+            {currentTeamMemberRole && (
+              <FormField
+                control={form.control}
+                name="visibility"
+                render={({ field }) => (
+                  <FormItem>
+                    <FormLabel className="flex flex-row items-center">
+                      Document visibility
+                      <DocumentVisibilityTooltip />
+                    </FormLabel>
+
+                    <FormControl>
+                      <DocumentVisibilitySelect
+                        currentMemberRole={currentTeamMemberRole}
+                        {...field}
+                        onValueChange={field.onChange}
+                      />
+                    </FormControl>
+                  </FormItem>
+                )}
+              />
+            )}
+
             {isDocumentEnterprise && (
               <FormField
                 control={form.control}

packages/ui/primitives/document-flow/add-settings.types.ts

@@ -22,6 +22,7 @@ export const ZMapNegativeOneToUndefinedSchema = z
 export const ZAddSettingsFormSchema = z.object({
   title: z.string().trim().min(1, { message: "Title can't be empty" }),
   externalId: z.string().optional(),
+  visibility: z.string().optional(),
   globalAccessAuth: ZMapNegativeOneToUndefinedSchema.pipe(
     ZDocumentAccessAuthTypesSchema.optional(),
   ),