Remove Organization Settings Access for Non-Members (#127)

* refactor(organization-settings): disable route for users that are not members of the org

* refactor: remove unnecessary join organization UI and mutations

* docs(organization-management): update JSDoc

---------

Co-authored-by: Brian Cooper <[email protected]>

Author: hobbescodes

src/app/organizations/[organizationSlug]/(manage)/settings/page.tsx

@@ -11,10 +11,8 @@ import {
 } from "generated/graphql";
 import { getOrganization } from "lib/actions";
 import { app } from "lib/config";
-import {
-  enableJoinOrganizationFlag,
-  enableOwnershipTransferFlag,
-} from "lib/flags";
+import { enableOwnershipTransferFlag } from "lib/flags";
+import { getSdk } from "lib/graphql";
 import { getQueryClient } from "lib/util";
 
 export const generateMetadata = async ({ params }: Props) => {
@@ -40,11 +38,7 @@ interface Props {
 const OrganizationSettingsPage = async ({ params }: Props) => {
   const { organizationSlug } = await params;
 
-  const [isJoinOrganizationEnabled, isOwnershipTransferEnabled] =
-    await Promise.all([
-      enableJoinOrganizationFlag(),
-      enableOwnershipTransferFlag(),
-    ]);
+  const isOwnershipTransferEnabled = await enableOwnershipTransferFlag();
 
   const session = await auth();
 
@@ -54,6 +48,15 @@ const OrganizationSettingsPage = async ({ params }: Props) => {
 
   if (!organization) notFound();
 
+  const sdk = getSdk({ session });
+
+  const { memberByUserIdAndOrganizationId } = await sdk.OrganizationRole({
+    userId: session.user.rowId!,
+    organizationId: organization.rowId,
+  });
+
+  if (!memberByUserIdAndOrganizationId) notFound();
+
   const queryClient = getQueryClient();
 
   await Promise.all([
@@ -90,7 +93,6 @@ const OrganizationSettingsPage = async ({ params }: Props) => {
         <OrganizationSettings
           userId={session.user.rowId!}
           organizationId={organization.rowId}
-          isJoinOrganizationEnabled={isJoinOrganizationEnabled}
           isOwnershipTransferEnabled={isOwnershipTransferEnabled}
         />
       </Page>

src/app/organizations/[organizationSlug]/page.tsx

@@ -15,6 +15,7 @@ import {
   Role,
   useOrganizationMetricsQuery,
   useOrganizationQuery,
+  useOrganizationRoleQuery,
 } from "generated/graphql";
 import { Grid } from "generated/panda/jsx";
 import { getOrganization } from "lib/actions";
@@ -107,6 +108,16 @@ const OrganizationPage = async ({ params }: Props) => {
         organizationId: organization.rowId,
       }),
     }),
+    queryClient.prefetchQuery({
+      queryKey: useOrganizationRoleQuery.getKey({
+        organizationId: organization.rowId,
+        userId: session.user.rowId!,
+      }),
+      queryFn: useOrganizationRoleQuery.fetcher({
+        organizationId: organization.rowId,
+        userId: session.user.rowId!,
+      }),
+    }),
   ]);
 
   return (
@@ -154,7 +165,11 @@ const OrganizationPage = async ({ params }: Props) => {
         <Grid columns={{ base: 1, md: 2 }} gap={6}>
           <OrganizationMetrics organizationId={organization.rowId} />
 
-          <OrganizationManagement hasAdminPrivileges={hasAdminPrivileges} />
+          <OrganizationManagement
+            user={session.user}
+            organizationId={organization.rowId}
+            hasAdminPrivileges={hasAdminPrivileges}
+          />
         </Grid>
 
         {/* dialogs */}

src/components/organization/ManagementNavigation/ManagementNavigation.tsx

@@ -53,7 +53,7 @@ const ManagementNavigation = ({
   const router = useRouter(),
     segment = useSelectedLayoutSegment();
 
-  const { isAdmin } = useOrganizationMembership({
+  const { isMember, isAdmin } = useOrganizationMembership({
     userId: user?.rowId,
     organizationId,
   });
@@ -83,6 +83,7 @@ const ManagementNavigation = ({
         onClose?.();
         router.push(`/organizations/${organizationSlug}/settings`);
       },
+      disabled: !isMember,
     },
   ];
 

src/components/organization/ManagementSidebar/ManagementSidebar.tsx

@@ -10,7 +10,7 @@ import {
 } from "@omnidev/sigil";
 import { useParams, useSelectedLayoutSegment } from "next/navigation";
 import { LuPanelLeftClose, LuPanelLeftOpen } from "react-icons/lu";
-import { useLocalStorage } from "usehooks-ts";
+import { useIsClient, useLocalStorage } from "usehooks-ts";
 
 import { Breadcrumb } from "components/core";
 import { ManagementNavigation } from "components/organization";
@@ -31,6 +31,8 @@ const ManagementSidebar = ({ children }: PropsWithChildren) => {
     minWidth: token("breakpoints.lg"),
   });
 
+  const isClient = useIsClient();
+
   const segment = useSelectedLayoutSegment();
 
   const { organizationSlug } = useParams<{ organizationSlug: string }>();
@@ -80,6 +82,8 @@ const ManagementSidebar = ({ children }: PropsWithChildren) => {
 
   const isOpen = isLargeViewport ? isSidebarOpen : isDrawerOpen;
 
+  if (!isClient) return null;
+
   return (
     <>
       {/* TODO: extract ternary part into a separate component. Use early returns there, and import above to separate logic from rendering. */}

src/components/organization/OrganizationListItem/OrganizationListItem.tsx

@@ -1,9 +1,8 @@
 "use client";
 
-import { Button, Flex, HStack, Icon, Stack, Text } from "@omnidev/sigil";
+import { HStack, Icon, Stack, Text } from "@omnidev/sigil";
 import dayjs from "dayjs";
 import { HiOutlineFolder, HiOutlineUserGroup } from "react-icons/hi2";
-import { LuSettings } from "react-icons/lu";
 
 import { Link, OverflowText } from "components/core";
 import { setSingularOrPlural } from "lib/util";
@@ -70,14 +69,6 @@ const OrganizationListItem = ({ organization }: Props) => {
             </Stack>
           </Link>
         </Stack>
-
-        <Flex position="absolute" right={0} top={0} m={2}>
-          <Link href={`${`/organizations/${organization.slug}/settings`}`}>
-            <Button variant="ghost" p={0}>
-              <Icon src={LuSettings} w={5} h={5} color="foreground.muted" />
-            </Button>
-          </Link>
-        </Flex>
       </HStack>
 
       <HStack gap={4} mt={4} justifySelf="flex-end" flexWrap="wrap">

src/components/organization/OrganizationManagement/OrganizationManagement.tsx

@@ -3,13 +3,16 @@
 import { Button, Grid, Icon } from "@omnidev/sigil";
 import { useParams, useRouter } from "next/navigation";
 import { FiUserPlus } from "react-icons/fi";
-import { HiOutlineUserGroup } from "react-icons/hi2";
+import { HiOutlineFolder, HiOutlineUserGroup } from "react-icons/hi2";
 import { LuSettings } from "react-icons/lu";
 
 import { SectionContainer } from "components/layout";
 import { app } from "lib/config";
+import { useOrganizationMembership } from "lib/hooks";
 
 import type { ButtonProps } from "@omnidev/sigil";
+import type { Organization } from "generated/graphql";
+import type { Session } from "next-auth";
 import type { IconType } from "react-icons";
 
 interface Action extends ButtonProps {
@@ -20,41 +23,69 @@ interface Action extends ButtonProps {
 }
 
 interface Props {
+  /** Authenticated user. */
+  user: Session["user"] | undefined;
+  /** Organization ID. */
+  organizationId: Organization["rowId"];
   /** Whether the user has admin privileges for the organization. */
   hasAdminPrivileges: boolean;
 }
 
+const managementDetails = app.organizationPage.management;
+
 /**
  * Organization management.
  */
-const OrganizationManagement = ({ hasAdminPrivileges }: Props) => {
+const OrganizationManagement = ({
+  user,
+  organizationId,
+  hasAdminPrivileges,
+}: Props) => {
   const { organizationSlug } = useParams<{ organizationSlug: string }>();
   const router = useRouter();
 
+  const { isMember } = useOrganizationMembership({
+    userId: user?.rowId,
+    organizationId,
+  });
+
   const ORGANIZATION_ACTIONS: Action[] = [
     {
-      label: app.organizationPage.management.cta.manageTeam.label,
+      label: managementDetails.cta.manageTeam.label,
       icon: HiOutlineUserGroup,
       onClick: () => router.push(`/organizations/${organizationSlug}/members`),
     },
     {
-      label: app.organizationPage.management.cta.invitations.label,
+      label: managementDetails.cta.invitations.label,
       icon: FiUserPlus,
       onClick: () =>
         router.push(`/organizations/${organizationSlug}/invitations`),
       disabled: !hasAdminPrivileges,
     },
     {
-      label: app.organizationPage.management.cta.settings.label,
+      label: managementDetails.cta.settings.label,
       icon: LuSettings,
       onClick: () => router.push(`/organizations/${organizationSlug}/settings`),
+      disabled: !isMember,
+    },
+    {
+      label: app.organizationPage.header.cta.viewProjects.label,
+      icon: HiOutlineFolder,
+      onClick: () => router.push(`/organizations/${organizationSlug}/projects`),
+      disabled: isMember,
     },
   ];
 
   return (
     <SectionContainer
-      title={app.organizationPage.management.title}
-      description={app.organizationPage.management.description}
+      title={
+        isMember ? managementDetails.title.member : managementDetails.title.anon
+      }
+      description={
+        isMember
+          ? managementDetails.description.member
+          : managementDetails.description.anon
+      }
     >
       <Grid gap={4}>
         {ORGANIZATION_ACTIONS.filter(({ disabled }) => !disabled).map(