fix(webapp): hide profile picture uploads when no avatar store is configured

Author: kathiekiwi

apps/webapp/app/routes/account._index/route.tsx

@@ -92,6 +92,7 @@ import {
 } from "~/utils/themePreference";
 import { cachedFlag, resolveOrganizationFeatureFlags } from "~/v3/featureFlags.server";
 import { requireUser } from "~/services/session.server";
+import { isAvatarUploadsEnabled } from "~/services/userAvatar.server";
 import { emailSchema, MAX_EMAIL_LENGTH } from "~/utils/emailValidation";
 import { pageMeta } from "~/utils/pageTitle";
 import { cn } from "~/utils/cn";
@@ -263,7 +264,11 @@ export async function loader({ request }: LoaderFunctionArgs) {
     });
   }
 
-  return json({ showThemeSwitcher, sidebarContext });
+  return json({
+    showThemeSwitcher,
+    sidebarContext,
+    avatarUploadsEnabled: isAvatarUploadsEnabled(),
+  });
 }
 
 export const action: ActionFunction = async ({ request }) => {
@@ -870,7 +875,8 @@ function CustomizeSidebarButton({
 
 export default function Page() {
   const user = useUser();
-  const { showThemeSwitcher, sidebarContext } = useLoaderData<typeof loader>();
+  const { showThemeSwitcher, sidebarContext, avatarUploadsEnabled } =
+    useLoaderData<typeof loader>();
   const themeFetcher = useFetcher<ProfileUpdateResult>();
   const contrastFetcher = useFetcher();
   const iconContrastFetcher = useFetcher();
@@ -990,7 +996,11 @@ export default function Page() {
                 <Label>Profile picture</Label>
               </InputGroup>
               <div className="flex flex-none items-center">
-                <ChangeProfilePhotoButton />
+                {avatarUploadsEnabled ? (
+                  <ChangeProfilePhotoButton />
+                ) : (
+                  <UserProfilePhoto className="size-8" strokeWidth={1.5} />
+                )}
               </div>
             </div>
           </div>

apps/webapp/app/routes/resources.account.avatar.$userId.$filename.ts

@@ -2,6 +2,7 @@ import { redirect } from "@remix-run/node";
 import { z } from "zod";
 import { dashboardLoader } from "~/services/routeBuilders/dashboardBuilder";
 import {
+  isAvatarUploadsEnabled,
   presignUserAvatarUrl,
   readUserAvatarBytes,
   resolveUserAvatarObjectPath,
@@ -24,7 +25,9 @@ const ParamsSchema = z.object({
 export const loader = dashboardLoader(
   { params: ParamsSchema },
   async ({ params: { userId, filename }, request }) => {
-    const objectPath = resolveUserAvatarObjectPath(userId, filename);
+    const objectPath = isAvatarUploadsEnabled()
+      ? resolveUserAvatarObjectPath(userId, filename)
+      : undefined;
 
     if (!objectPath) {
       throw new Response("Not found", { status: 404 });

apps/webapp/app/routes/resources.account.avatar.ts

@@ -5,6 +5,7 @@ import { dashboardAction } from "~/services/routeBuilders/dashboardBuilder";
 import {
   deleteStaleUserAvatar,
   isAvatarUploadRejection,
+  isAvatarUploadsEnabled,
   parseAvatarUpload,
   uploadUserAvatar,
 } from "~/services/userAvatar.server";
@@ -20,6 +21,11 @@ export const action = dashboardAction({}, async ({ request, user }) => {
     return json({ error: "Method not allowed" }, { status: 405 });
   }
 
+  // An install with no avatar store hides this UI entirely; a stray request still answers.
+  if (!isAvatarUploadsEnabled()) {
+    return json({ error: "Profile pictures are not available on this instance." }, { status: 400 });
+  }
+
   // Read from the cookie: the builder's session user reports isImpersonating false.
   const { isImpersonating } = await getImpersonationState(request, user.id);
 

apps/webapp/app/services/userAvatar.server.ts

@@ -17,6 +17,14 @@ const AVATAR_PRESIGN_EXPIRY_IN_SECONDS = 300;
 const AVATAR_FILENAME_REGEX = /^[0-9a-f]{32}\.(png|jpg|webp)$/;
 const USER_ID_REGEX = /^[A-Za-z0-9_-]+$/;
 
+/**
+ * Whether this deployment can store profile pictures at all. Self-hosted installs that
+ * configure no avatar store keep the account page exactly as it was before the feature.
+ */
+export function isAvatarUploadsEnabled() {
+  return Boolean(env.AVATARS_OBJECT_STORE_BASE_URL && env.AVATARS_OBJECT_STORE_BUCKET);
+}
+
 /** Undefined when no avatar store is configured, so the policy stays unchanged. */
 export function avatarObjectStoreImageOrigin() {
   return imageOriginFromUrl(env.AVATARS_OBJECT_STORE_BASE_URL);

apps/webapp/test/userAvatar.test.ts

@@ -6,6 +6,7 @@ import {
   isAvatarUploadRejection,
   absoluteUserAvatarUrl,
   avatarObjectStoreImageOrigin,
+  isAvatarUploadsEnabled,
   parseAvatarUpload,
   presignUserAvatarUrl,
   resolveStaleAvatarObjectPath,
@@ -373,3 +374,42 @@ describe("avatarContentTypeForFilename", () => {
     expect(avatarContentTypeForFilename(filename)).toBeUndefined();
   });
 });
+
+describe("isAvatarUploadsEnabled", () => {
+  const original = {
+    baseUrl: env.AVATARS_OBJECT_STORE_BASE_URL,
+    bucket: env.AVATARS_OBJECT_STORE_BUCKET,
+  };
+
+  afterEach(() => {
+    env.AVATARS_OBJECT_STORE_BASE_URL = original.baseUrl;
+    env.AVATARS_OBJECT_STORE_BUCKET = original.bucket;
+  });
+
+  it("is on when the store is fully configured", () => {
+    env.AVATARS_OBJECT_STORE_BASE_URL = "http://localhost:9005";
+    env.AVATARS_OBJECT_STORE_BUCKET = "avatars";
+
+    expect(isAvatarUploadsEnabled()).toBe(true);
+  });
+
+  it.each([
+    ["nothing is configured", undefined, undefined],
+    ["only the base URL is set", "http://localhost:9005", undefined],
+    ["only the bucket is set", undefined, "avatars"],
+    ["the base URL is blank", "", "avatars"],
+    ["the bucket is blank", "http://localhost:9005", ""],
+  ])("is off when %s", (_case, baseUrl, bucket) => {
+    env.AVATARS_OBJECT_STORE_BASE_URL = baseUrl;
+    env.AVATARS_OBJECT_STORE_BUCKET = bucket;
+
+    expect(isAvatarUploadsEnabled()).toBe(false);
+  });
+
+  it("never builds a client, so an unconfigured install can ask freely", () => {
+    env.AVATARS_OBJECT_STORE_BASE_URL = undefined;
+    env.AVATARS_OBJECT_STORE_BUCKET = undefined;
+
+    expect(() => isAvatarUploadsEnabled()).not.toThrow();
+  });
+});