Dedupe disable org permission query

code-asher · code-asher · commit cd86a9c5e6b7 · 2024-07-31T10:34:15.000-08:00
diff --git a/site/src/api/queries/organizations.ts b/site/src/api/queries/organizations.ts
@@ -110,8 +110,13 @@ export const organizations = () => {
 
 /**
  * Fetch permissions for a single organization.
+ *
+ * If the ID is undefined, return a disabled query.
  */
-export const organizationPermissions = (organizationId: string) => {
+export const organizationPermissions = (organizationId: string | undefined) => {
+  if (!organizationId) {
+    return { enabled: false };
+  }
   return {
     queryKey: ["organization", organizationId, "permissions"],
     queryFn: () =>
diff --git a/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx b/site/src/pages/ManagementSettingsPage/GroupsPage/GroupsPage.tsx
@@ -29,11 +29,7 @@ export const GroupsPage: FC = () => {
   // TODO: If we could query permissions based on the name then we would not
   //       have to cascade off the organizations query.
   const organization = organizations?.find((o) => o.name === organizationName);
-  const permissionsQuery = useQuery(
-    organization
-      ? organizationPermissions(organization.id)
-      : { enabled: false },
-  );
+  const permissionsQuery = useQuery(organizationPermissions(organization?.id));
 
   useEffect(() => {
     if (groupsQuery.error) {
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationMembersPage.tsx
@@ -64,11 +64,7 @@ const OrganizationMembersPage: FC = () => {
   //       have to cascade off the organizations query.
   const { organizations } = useOrganizationSettings();
   const organization = organizations?.find((o) => o.name === organizationName);
-  const permissionsQuery = useQuery(
-    organization
-      ? organizationPermissions(organization.id)
-      : { enabled: false },
-  );
+  const permissionsQuery = useQuery(organizationPermissions(organization?.id));
 
   const permissions = permissionsQuery.data;
   if (!permissions) {
diff --git a/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx b/site/src/pages/ManagementSettingsPage/OrganizationSettingsPage.tsx
@@ -32,14 +32,10 @@ const OrganizationSettingsPage: FC = () => {
   // TODO: If we could query permissions based on the name then we would not
   //       have to cascade off the organizations query.
   const organization =
-    organizations &&
-    organizationName &&
-    getOrganizationByName(organizations, organizationName);
-  const permissionsQuery = useQuery(
-    organization
-      ? organizationPermissions(organization.id)
-      : { enabled: false },
-  );
+    organizations && organizationName
+      ? getOrganizationByName(organizations, organizationName)
+      : undefined;
+  const permissionsQuery = useQuery(organizationPermissions(organization?.id));
 
   if (!organizations) {
     return <Loader />;
diff --git a/site/src/pages/ManagementSettingsPage/Sidebar.tsx b/site/src/pages/ManagementSettingsPage/Sidebar.tsx
@@ -164,14 +164,13 @@ interface OrganizationSettingsNavigationProps {
 export const OrganizationSettingsNavigation: FC<
   OrganizationSettingsNavigationProps
 > = ({ organization, active }) => {
-  const permissionsQuery = useQuery({
-    ...organizationPermissions(organization.id),
-    // The menu items only show while the menu is expanded, so we can wait until
-    // expanded to run the query.  Downside is that we have to show a loader
-    // until the query finishes...maybe we should prefetch permissions for all
-    // the orgs instead?
-    enabled: active,
-  });
+  // The menu items only show while the menu is expanded, so we can wait until
+  // expanded to run the query.  Downside is that we have to show a loader
+  // until the query finishes...maybe we should prefetch permissions for all
+  // the orgs instead?
+  const permissionsQuery = useQuery(
+    organizationPermissions(active ? organization.id : undefined),
+  );
 
   return (
     <>
