🪟🐛 Use organization info endpoint in settings (#9847)

Author: Tim Roes

airbyte-webapp/src/area/workspace/components/UpdateWorkspaceNameForm.tsx

@@ -5,7 +5,7 @@ import { Form, FormControl } from "components/forms";
 import { FormSubmissionButtons } from "components/forms/FormSubmissionButtons";
 
 import { useCurrentWorkspace, useUpdateWorkspaceName } from "core/api";
-import { useIntent } from "core/utils/rbac/intent";
+import { useIntent } from "core/utils/rbac";
 import { useAppMonitoringService } from "hooks/services/AppMonitoringService";
 import { useNotificationService } from "hooks/services/Notification";
 

airbyte-webapp/src/core/api/hooks/organizations.ts

@@ -17,6 +17,7 @@ export const organizationKeys = {
   all: [SCOPE_USER, "organizations"] as const,
   lists: () => [...organizationKeys.all, "list"] as const,
   list: (filters: string[]) => [...organizationKeys.lists(), filters] as const,
+  info: (organizationId = "<none>") => [...organizationKeys.all, "info", organizationId] as const,
   detail: (organizationId = "<none>") => [...organizationKeys.all, "details", organizationId] as const,
   allListUsers: [SCOPE_ORGANIZATION, "users", "list"] as const,
   listUsers: (organizationId: string) => [SCOPE_ORGANIZATION, "users", "list", organizationId] as const,
@@ -29,7 +30,7 @@ export const organizationKeys = {
 export const useCurrentOrganizationInfo = () => {
   const requestOptions = useRequestOptions();
   const workspace = useCurrentWorkspace();
-  return useSuspenseQuery(organizationKeys.detail(workspace.organizationId), () => {
+  return useSuspenseQuery(organizationKeys.info(workspace.organizationId), () => {
     // TODO: Once all workspaces are in an organization this can be removed, but for now
     //       we guard against calling the endpoint if the workspace isn't in an organization
     //       to not cause too many 404 in the getOrganizationInfo endpoint.

airbyte-webapp/src/core/utils/rbac/index.ts

@@ -1 +1,2 @@
 export * from "./rbac";
+export { useIntent } from "./intent";

airbyte-webapp/src/packages/cloud/views/settings/CloudSettingsPage.tsx

@@ -1,9 +1,10 @@
 import React, { useMemo } from "react";
 import { FormattedMessage } from "react-intl";
 
-import { useCurrentWorkspace, useOrganization } from "core/api";
+import { useCurrentOrganizationInfo } from "core/api";
 import { FeatureItem, useFeature } from "core/services/features";
 import { isOsanoActive, showOsanoDrawer } from "core/utils/dataPrivacy";
+import { useIntent } from "core/utils/rbac";
 import { DbtCloudSettingsView } from "packages/cloud/views/settings/integrations/DbtCloudSettingsView";
 import { AccountSettingsView } from "packages/cloud/views/users/AccountSettingsView";
 import { UsersSettingsView } from "packages/cloud/views/users/UsersSettingsView";
@@ -21,103 +22,10 @@ import { PageConfig, SettingsPageBase } from "pages/SettingsPage/SettingsPageBas
 
 import { CloudSettingsRoutePaths } from "./routePaths";
 
-export const CloudSettingsPageContent: React.FC = () => {
-  const supportsCloudDbtIntegration = useFeature(FeatureItem.AllowDBTCloudIntegration);
-  const supportsDataResidency = useFeature(FeatureItem.AllowChangeDataGeographies);
-
-  const basePageConfig = useMemo<PageConfig>(
-    () => ({
-      menuConfig: [
-        {
-          category: <FormattedMessage id="settings.userSettings" />,
-          routes: [
-            {
-              path: CloudSettingsRoutePaths.Account,
-              name: <FormattedMessage id="settings.account" />,
-              component: AccountSettingsView,
-            },
-            ...(isOsanoActive()
-              ? [
-                  {
-                    name: <FormattedMessage id="settings.cookiePreferences" />,
-                    path: "__COOKIE_PREFERENCES__", // Special path with no meaning, since the onClick will be triggered
-                    onClick: () => showOsanoDrawer(),
-                  },
-                ]
-              : []),
-          ],
-        },
-
-        {
-          category: <FormattedMessage id="settings.workspaceSettings" />,
-          routes: [
-            {
-              path: CloudSettingsRoutePaths.Workspace,
-              name: <FormattedMessage id="settings.generalSettings" />,
-              component: WorkspaceSettingsView,
-              id: "workspaceSettings.generalSettings",
-            },
-            ...(supportsDataResidency
-              ? [
-                  {
-                    path: CloudSettingsRoutePaths.DataResidency,
-                    name: <FormattedMessage id="settings.dataResidency" />,
-                    component: DataResidencyView,
-                  },
-                ]
-              : []),
-            {
-              path: CloudSettingsRoutePaths.Source,
-              name: <FormattedMessage id="tables.sources" />,
-              // indicatorCount: countNewSourceVersion,
-              component: SettingsSourcesPage,
-            },
-            {
-              path: CloudSettingsRoutePaths.Destination,
-              name: <FormattedMessage id="tables.destinations" />,
-              // indicatorCount: countNewDestinationVersion,
-              component: SettingsDestinationPage,
-            },
-            {
-              path: CloudSettingsRoutePaths.AccessManagement,
-              name: <FormattedMessage id="settings.accessManagementSettings" />,
-              component: UsersSettingsView,
-              id: "workspaceSettings.accessManagementSettings",
-            },
-            {
-              path: CloudSettingsRoutePaths.Notifications,
-              name: <FormattedMessage id="settings.notifications" />,
-              component: NotificationPage,
-            },
-          ],
-        },
-
-        ...(supportsCloudDbtIntegration
-          ? [
-              {
-                category: <FormattedMessage id="settings.integrationSettings" />,
-                routes: [
-                  {
-                    path: CloudSettingsRoutePaths.DbtCloud,
-                    name: <FormattedMessage id="settings.integrationSettings.dbtCloudSettings" />,
-                    component: DbtCloudSettingsView,
-                    id: "integrationSettings.dbtCloudSettings",
-                  },
-                ],
-              },
-            ]
-          : []),
-      ],
-    }),
-    [supportsCloudDbtIntegration, supportsDataResidency]
-  );
-
-  return <SettingsPageBase pageConfig={basePageConfig} />;
-};
-
-const CloudSettingsPageContentWithOrg: React.FC<{ organizationId: string }> = ({ organizationId }) => {
-  const organization = useOrganization(organizationId);
-  const hasSsoOrg = organization.ssoRealm !== null;
+const CloudSettingsPage: React.FC = () => {
+  const organization = useCurrentOrganizationInfo();
+  const isSsoEnabled = organization?.sso;
+  const canViewOrgSettings = useIntent("ViewOrganizationSettings", { organizationId: organization?.organizationId });
   const supportsCloudDbtIntegration = useFeature(FeatureItem.AllowDBTCloudIntegration);
   const supportsDataResidency = useFeature(FeatureItem.AllowChangeDataGeographies);
 
@@ -173,7 +81,7 @@ const CloudSettingsPageContentWithOrg: React.FC<{ organizationId: string }> = ({
               // indicatorCount: countNewDestinationVersion,
               component: SettingsDestinationPage,
             },
-            ...(hasSsoOrg
+            ...(isSsoEnabled
               ? [
                   {
                     path: `${CloudSettingsRoutePaths.Workspace}/${CloudSettingsRoutePaths.AccessManagement}`,
@@ -197,8 +105,7 @@ const CloudSettingsPageContentWithOrg: React.FC<{ organizationId: string }> = ({
             },
           ],
         },
-
-        ...(hasSsoOrg
+        ...(canViewOrgSettings
           ? [
               {
                 category: <FormattedMessage id="settings.organizationSettings" />,
@@ -208,12 +115,16 @@ const CloudSettingsPageContentWithOrg: React.FC<{ organizationId: string }> = ({
                     name: <FormattedMessage id="settings.generalSettings" />,
                     component: GeneralOrganizationSettingsPage,
                   },
-                  {
-                    path: `${CloudSettingsRoutePaths.Organization}/${CloudSettingsRoutePaths.AccessManagement}`,
-                    name: <FormattedMessage id="settings.accessManagementSettings" />,
-                    component: OrganizationAccessManagementPage,
-                    id: "organizationSettings.accessManagementSettings",
-                  },
+                  ...(isSsoEnabled
+                    ? [
+                        {
+                          path: `${CloudSettingsRoutePaths.Organization}/${CloudSettingsRoutePaths.AccessManagement}`,
+                          name: <FormattedMessage id="settings.accessManagementSettings" />,
+                          component: OrganizationAccessManagementPage,
+                          id: "organizationSettings.accessManagementSettings",
+                        },
+                      ]
+                    : []),
                 ],
               },
             ]
@@ -235,22 +146,10 @@ const CloudSettingsPageContentWithOrg: React.FC<{ organizationId: string }> = ({
           : []),
       ],
     }),
-    [hasSsoOrg, supportsCloudDbtIntegration, supportsDataResidency]
+    [canViewOrgSettings, isSsoEnabled, supportsCloudDbtIntegration, supportsDataResidency]
   );
 
-  if (!organization.ssoRealm) {
-    return <CloudSettingsPageContent />;
-  }
-
   return <SettingsPageBase pageConfig={ssoPageConfig} />;
 };
 
-export const CloudSettingsPage: React.FC = () => {
-  const { organizationId } = useCurrentWorkspace();
-
-  if (organizationId) {
-    return <CloudSettingsPageContentWithOrg organizationId={organizationId} />;
-  }
-  return <CloudSettingsPageContent />;
-};
 export default CloudSettingsPage;

airbyte-webapp/src/pages/SettingsPage/GeneralOrganizationSettingsPage.tsx

@@ -11,7 +11,7 @@ import { Card } from "components/ui/Card";
 import { useCurrentWorkspace, useUpdateOrganization } from "core/api";
 import { useOrganization } from "core/api";
 import { OrganizationUpdateRequestBody } from "core/request/AirbyteClient";
-import { useIntent } from "core/utils/rbac/intent";
+import { useIntent } from "core/utils/rbac";
 import { useNotificationService } from "hooks/services/Notification";
 
 const ORGANIZATION_UPDATE_NOTIFICATION_ID = "organization-update-notification";

airbyte-webapp/src/pages/SettingsPage/GeneralWorkspaceSettingsPage.tsx

@@ -6,7 +6,7 @@ import { FlexContainer } from "components/ui/Flex";
 
 import { UpdateWorkspaceNameForm } from "area/workspace/components/UpdateWorkspaceNameForm";
 import { useCurrentWorkspace } from "core/api";
-import { useIntent } from "core/utils/rbac/intent";
+import { useIntent } from "core/utils/rbac";
 
 import { DeleteWorkspace } from "./components/DeleteWorkspace";
 

airbyte-webapp/src/pages/SettingsPage/SettingsPage.tsx

@@ -3,7 +3,7 @@ import { FormattedMessage } from "react-intl";
 
 import { useCurrentWorkspace } from "core/api";
 import { FeatureItem, useFeature } from "core/services/features";
-import { useIntent } from "core/utils/rbac/intent";
+import { useIntent } from "core/utils/rbac";
 import { useGetConnectorsOutOfDate } from "hooks/services/useConnector";
 import { SettingsRoutePaths } from "pages/routePaths";
 import { NotificationPage } from "pages/SettingsPage/pages/NotificationPage";

airbyte-webapp/src/pages/SettingsPage/pages/AccessManagementPage/components/RoleManagementControl.tsx

@@ -11,7 +11,7 @@ import { Text } from "components/ui/Text";
 import { useDeletePermissions, useUpdatePermissions } from "core/api";
 import { PermissionRead, PermissionType, PermissionUpdate } from "core/request/AirbyteClient";
 import { useCurrentUser } from "core/services/auth";
-import { useIntent } from "core/utils/rbac/intent";
+import { useIntent } from "core/utils/rbac";
 import { useConfirmationModalService } from "hooks/services/ConfirmationModal";
 
 import styles from "./RoleManagementControl.module.scss";