fix(webapp): gate the Projects settings nav dot on deployment read access

The side-menu dot pointed members at a page their role cannot open. Run
the same `read` on `deployments` ability check the page performs before
querying for a pending runtime update, and skip the query entirely when
the check fails.

Also: match the permission-denied copy to the renamed page, give each
project row's link a distinct accessible name, rename `upToDate` to
`otherProjects` (it holds every project whose Production major is not
the outdated one, not only up-to-date projects), and trim two comments.

Author: claude

apps/webapp/app/components/primitives/ClipboardField.tsx

@@ -142,8 +142,7 @@ export function ClipboardField({
         readOnly={true}
         className={cn(
           "shrink grow select-all overflow-x-auto",
-          // Without min-w-0 the input's intrinsic min-width pushes the copy button past the
-          // container's right edge; letting it shrink scrolls the value instead.
+          // min-w-0 stops the input's intrinsic min-width pushing the copy button out of the row.
           fullWidth ? "w-full min-w-0" : "max-w-fit",
           input
         )}

apps/webapp/app/components/primitives/Label.tsx

@@ -15,12 +15,10 @@ export const labelVariants = {
   },
 };
 
-const variants = labelVariants;
-
 type LabelProps = React.AllHTMLAttributes<HTMLLabelElement> & {
   className?: string;
   children: React.ReactNode;
-  variant?: keyof typeof variants;
+  variant?: keyof typeof labelVariants;
   required?: boolean;
   tooltip?: React.ReactNode;
 };
@@ -33,7 +31,7 @@ export function Label({
   tooltip,
   ...props
 }: LabelProps) {
-  const variation = variants[variant];
+  const variation = labelVariants[variant];
   return (
     <label className={cn(variation.text, className)} {...props}>
       {children}

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.runtime-updates/RuntimeUpdatesPage.tsx

@@ -45,11 +45,11 @@ export type ProjectRuntimeRow = {
 export function RuntimeUpdatesPage({
   organizationSlug,
   needsUpdate,
-  upToDate,
+  otherProjects,
 }: {
   organizationSlug: string;
   needsUpdate: ProjectRuntimeRow[];
-  upToDate: ProjectRuntimeRow[];
+  otherProjects: ProjectRuntimeRow[];
 }) {
   const count = needsUpdate.length;
 
@@ -122,14 +122,14 @@ export function RuntimeUpdatesPage({
 
           <SettingsSection>
             <SettingsHeader title="Projects" />
-            {upToDate.length === 0 ? (
+            {otherProjects.length === 0 ? (
               <SettingsBlock>
                 <Paragraph variant="small">
                   {count === 0 ? "This organization has no projects yet." : "No other projects."}
                 </Paragraph>
               </SettingsBlock>
             ) : (
-              upToDate.map((project) => (
+              otherProjects.map((project) => (
                 <ProjectRow
                   key={project.ref}
                   organizationSlug={organizationSlug}
@@ -166,13 +166,15 @@ function ProjectRow({
               0
             )}
             variant="secondary/small"
+            aria-label={`View deployment for ${project.name}`}
           >
             View deployment
           </LinkButton>
         ) : (
           <LinkButton
             to={v3ProjectPath({ slug: organizationSlug }, { slug: project.slug })}
             variant="secondary/small"
+            aria-label={`View project ${project.name}`}
           >
             View project
           </LinkButton>

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings.runtime-updates/route.tsx

@@ -19,7 +19,7 @@ export const loader = dashboardLoader(
     authorization: {
       action: "read",
       resource: { type: "deployments" },
-      message: "With your current role, you can't view runtime updates.",
+      message: "With your current role, you can't view project deployments.",
     },
   },
   async ({ context, params }) => {
@@ -28,7 +28,7 @@ export const loader = dashboardLoader(
     });
 
     const needsUpdate: ProjectRuntimeRow[] = [];
-    const upToDate: ProjectRuntimeRow[] = [];
+    const otherProjects: ProjectRuntimeRow[] = [];
 
     for (const { project, environment, deployment } of runtimes) {
       const row: ProjectRuntimeRow = {
@@ -49,26 +49,26 @@ export const loader = dashboardLoader(
       if (deployment?.nodeMajor === NODE_RUNTIME_UPDATE_MAJOR) {
         needsUpdate.push(row);
       } else {
-        upToDate.push(row);
+        otherProjects.push(row);
       }
     }
 
     return typedjson({
       organizationSlug: params.organizationSlug,
       needsUpdate,
-      upToDate,
+      otherProjects,
     });
   }
 );
 
 export default function Page() {
-  const { organizationSlug, needsUpdate, upToDate } = useTypedLoaderData<typeof loader>();
+  const { organizationSlug, needsUpdate, otherProjects } = useTypedLoaderData<typeof loader>();
 
   return (
     <RuntimeUpdatesPage
       organizationSlug={organizationSlug}
       needsUpdate={needsUpdate}
-      upToDate={upToDate}
+      otherProjects={otherProjects}
     />
   );
 }

apps/webapp/app/routes/_app.orgs.$organizationSlug.settings/route.tsx

@@ -10,13 +10,38 @@ import {
   OrganizationSettingsSideMenu,
 } from "~/components/navigation/OrganizationSettingsSideMenu";
 import { useOrganization } from "~/hooks/useOrganizations";
+import { resolveOrgIdFromSlug } from "~/models/organization.server";
 import { organizationHasProjectRuntimeUpdate } from "~/services/projectRuntimeUpdates.server";
 import { rbac } from "~/services/rbac.server";
 import { requireUserId } from "~/services/session.server";
 import { ssoController } from "~/services/sso.server";
 
 const SETTINGS_ROUTE_ID = "routes/_app.orgs.$organizationSlug.settings";
 
+// The side-menu dot links to the Projects settings page, which requires `read` on
+// `deployments`, so gate the dot on the same ability the page checks.
+async function canReadDeployments({
+  request,
+  userId,
+  organizationSlug,
+}: {
+  request: Request;
+  userId: string;
+  organizationSlug: string;
+}) {
+  const organizationId = await resolveOrgIdFromSlug(organizationSlug);
+  if (!organizationId) {
+    return false;
+  }
+
+  const auth = await rbac.authenticateAuthorizeSession(
+    request,
+    { userId, organizationId },
+    { action: "read", resource: { type: "deployments" } }
+  );
+  return auth.ok;
+}
+
 export const loader = async ({ request, params }: LoaderFunctionArgs) => {
   const userId = await requireUserId(request);
   const organizationSlug = params.organizationSlug;
@@ -25,7 +50,9 @@ export const loader = async ({ request, params }: LoaderFunctionArgs) => {
     rbac.isUsingPlugin(),
     ssoController.isUsingPlugin(),
     organizationSlug
-      ? organizationHasProjectRuntimeUpdate({ organizationSlug, userId })
+      ? canReadDeployments({ request, userId, organizationSlug }).then((canRead) =>
+          canRead ? organizationHasProjectRuntimeUpdate({ organizationSlug, userId }) : false
+        )
       : Promise.resolve(false),
   ]);
   return typedjson({