🪟 Hide organization info if workspace is not in Cloud for Teams (#12118)

airbyte-webapp/src/core/services/features/constants.ts

@@ -13,7 +13,9 @@ export const defaultEnterpriseFeatures = [
   FeatureItem.AllowAllRBACRoles,
   FeatureItem.APITokenManagement,
   FeatureItem.ConnectionHistoryGraphs,
+  FeatureItem.DisplayOrganizationUsers,
   FeatureItem.EnterpriseBranding,
+  FeatureItem.IndicateGuestUsers,
   FeatureItem.MultiWorkspaceUI,
   FeatureItem.RBAC,
 ];

airbyte-webapp/src/core/services/features/types.tsx

@@ -17,9 +17,11 @@ export enum FeatureItem {
   Billing = "BILLING",
   ConnectionHistoryGraphs = "CONNECTION_HISTORY_GRAPHS",
   ConnectorBreakingChangeDeadlines = "CONNECTOR_BREAKING_CHANGE_DEADLINES",
+  DisplayOrganizationUsers = "DISPLAY_ORGANIZATION_USERS",
   EmailNotifications = "EMAIL_NOTIFICATIONS",
   EnterpriseBranding = "ENTERPRISE_BRANDING",
   ExternalInvitations = "EXTERNAL_INVITATIONS",
+  IndicateGuestUsers = "INDICATE_GUEST_USERS",
   KeycloakAuthentication = "KEYCLOAK_AUTHENTICATION",
   MultiWorkspaceUI = "MULTI_WORKSPACE_UI",
   RBAC = "RBAC",

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/CloudWorkspacesPage.test.tsx

@@ -5,7 +5,7 @@ import { useListPermissions } from "core/api";
 import { useListCloudWorkspacesInfinite } from "core/api/cloud";
 import { OrganizationRead } from "core/api/types/AirbyteClient";
 
-import { CloudWorkspacesPage } from "./CloudWorkspacesPage";
+import { CloudWorkspacesPageInner } from "./CloudWorkspacesPage";
 
 jest.mock("core/services/auth", () => ({
   useAuthService: () => ({}),
@@ -47,7 +47,7 @@ describe("CloudWorkspacesPage", () => {
           { permissionType: "organization_member", userId: "123", permissionId: "123", organizationId: "321" },
         ],
       });
-      const wrapper = await render(<CloudWorkspacesPage />);
+      const wrapper = await render(<CloudWorkspacesPageInner />);
       expect(wrapper.queryByTestId("noWorkspacePermissionsBanner")).toBeInTheDocument();
       expect(wrapper.getByTestId("noWorkspacePermissionsBanner")).toHaveTextContent("[email protected]");
     });
@@ -58,7 +58,7 @@ describe("CloudWorkspacesPage", () => {
           { permissionType: "organization_member", userId: "123", permissionId: "123", organizationId: "456" },
         ],
       });
-      const wrapper = await render(<CloudWorkspacesPage />);
+      const wrapper = await render(<CloudWorkspacesPageInner />);
       expect(wrapper.queryByTestId("noWorkspacePermissionsBanner")).toBeInTheDocument();
       expect(wrapper.getByTestId("noWorkspacePermissionsBanner")).toHaveTextContent("[email protected]");
     });
@@ -76,7 +76,7 @@ describe("CloudWorkspacesPage", () => {
           { permissionType: "instance_admin", userId: "123", permissionId: "2" },
         ],
       });
-      const wrapper = await render(<CloudWorkspacesPage />);
+      const wrapper = await render(<CloudWorkspacesPageInner />);
       expect(wrapper.queryByTestId("noWorkspacePermissionsBanner")).not.toBeInTheDocument();
     });
     it("should not show if you see any workspaces (e.g. as an instance admin)", async () => {
@@ -92,7 +92,7 @@ describe("CloudWorkspacesPage", () => {
           { permissionType: "organization_member", userId: "123", permissionId: "123", organizationId: "321" },
         ],
       });
-      const wrapper = await render(<CloudWorkspacesPage />);
+      const wrapper = await render(<CloudWorkspacesPageInner />);
       expect(wrapper.queryByTestId("noWorkspacePermissionsBanner")).not.toBeInTheDocument();
     });
 
@@ -103,7 +103,7 @@ describe("CloudWorkspacesPage", () => {
           { permissionType: "organization_editor", userId: "123", permissionId: "2", organizationId: "456" },
         ],
       });
-      const wrapper = await render(<CloudWorkspacesPage />);
+      const wrapper = await render(<CloudWorkspacesPageInner />);
       expect(wrapper.queryByTestId("noWorkspacePermissionsBanner")).not.toBeInTheDocument();
     });
   });

airbyte-webapp/src/packages/cloud/views/workspaces/WorkspacesPage/CloudWorkspacesPage.tsx

@@ -2,6 +2,7 @@ import { useMutation } from "@tanstack/react-query";
 import React, { useDeferredValue, useState } from "react";
 import { FormattedMessage } from "react-intl";
 
+import { HeadTitle } from "components/common/HeadTitle";
 import AirbyteLogo from "components/illustrations/airbyte-logo.svg?react";
 import { Box } from "components/ui/Box";
 import { Button } from "components/ui/Button";
@@ -22,7 +23,7 @@ import { WORKSPACE_LIST_LENGTH } from "pages/workspaces/WorkspacesPage";
 import { CloudWorkspacesCreateControl } from "./CloudWorkspacesCreateControl";
 import styles from "./CloudWorkspacesPage.module.scss";
 
-export const CloudWorkspacesPage: React.FC = () => {
+export const CloudWorkspacesPageInner: React.FC = () => {
   const { isLoading: isLogoutLoading, mutateAsync: handleLogout } = useMutation(() => logout?.() ?? Promise.resolve());
   useTrackPage(PageTrackingCodes.WORKSPACES);
   const [searchValue, setSearchValue] = useState("");
@@ -107,3 +108,12 @@ export const CloudWorkspacesPage: React.FC = () => {
     </div>
   );
 };
+
+export const CloudWorkspacesPage = () => {
+  return (
+    <>
+      <HeadTitle titles={[{ id: "workspaces.title" }]} />
+      <CloudWorkspacesPageInner />
+    </>
+  );
+};

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

@@ -14,6 +14,7 @@ import { UpdateOrganizationSettingsForm } from "./UpdateOrganizationSettingsForm
 export const GeneralOrganizationSettingsPage: React.FC = () => {
   useTrackPage(PageTrackingCodes.SETTINGS_ORGANIZATION);
   const isAccessManagementEnabled = useFeature(FeatureItem.RBAC);
+  const displayOrganizationUsers = useFeature(FeatureItem.DisplayOrganizationUsers);
 
   return (
     <FlexContainer direction="column" gap="xl">
@@ -22,7 +23,7 @@ export const GeneralOrganizationSettingsPage: React.FC = () => {
       </Heading>
       <UpdateOrganizationSettingsForm />
 
-      {isAccessManagementEnabled && (
+      {isAccessManagementEnabled && displayOrganizationUsers && (
         <>
           <Separator />
           <OrganizationAccessManagementSection />

airbyte-webapp/src/pages/SettingsPage/pages/AccessManagementPage/next/RoleManagementCell.tsx

@@ -8,6 +8,7 @@ import { Tooltip } from "components/ui/Tooltip";
 
 import { useCurrentOrganizationInfo, useCurrentWorkspace } from "core/api";
 import { useCurrentUser } from "core/services/auth";
+import { FeatureItem, useFeature } from "core/services/features";
 import { useIntent } from "core/utils/rbac";
 
 import { GuestBadge } from "./GuestBadge";
@@ -49,6 +50,7 @@ export const RoleManagementCell: React.FC<RoleManagementCellProps> = ({ user, re
   const canListOrganizationUsers = useIntent("ListOrganizationMembers", {
     organizationId: organizationInfo?.organizationId,
   });
+  const indicateGuestUsers = useFeature(FeatureItem.IndicateGuestUsers);
   const cannotDemoteUser = resourceType === "workspace" && orgPermissionType === "organization_admin";
   const shouldHidePopover = cannotDemoteUser || !canEditPermissions || user.id === currentUser.userId;
 
@@ -77,7 +79,7 @@ export const RoleManagementCell: React.FC<RoleManagementCellProps> = ({ user, re
           <FormattedMessage id="role.organizationAdmin" />
         </Badge>
       )}
-      {canListOrganizationUsers && organizationInfo?.organizationId && (
+      {canListOrganizationUsers && organizationInfo?.organizationId && indicateGuestUsers && (
         <GuestBadge userId={user.id} organizationId={organizationInfo.organizationId} />
       )}
       {user.invitationStatus === "pending" && (