feat(invite-users): add invite users modal via data driven forms

package.json

@@ -14,7 +14,7 @@
     "@data-driven-forms/react-form-renderer": "^3.22.4",
     "@formatjs/cli": "6.2.2",
     "@patternfly/quickstarts": "^5.1.0",
-    "@patternfly/react-component-groups": "^5.4.0-prerelease.2",
+    "@patternfly/react-component-groups": "^5.5.4",
     "@patternfly/react-core": "^5.1.1",
     "@patternfly/react-data-view": "^5.2.0",
     "@patternfly/react-icons": "^5.1.1",

src/Messages.js

@@ -28,6 +28,67 @@ export default defineMessages({
     defaultMessage:
       'The organization administrator role is the highest permission level with full access to content and features. This is the only role that can manage users.',
   },
+  inviteUsersFormManageSupportCasesFieldTitle: {
+    id: 'inviteUsersFormManageSupportCasesFieldTitle',
+    description: 'Invite users form manage support cases field title',
+    defaultMessage: 'Organization administrators',
+  },
+  inviteUsersFormManageSupportCasesFieldDescription: {
+    id: 'inviteUsersFormManageSupportCasesFieldDescription',
+    description: 'Invite users form manage support cases field description',
+    defaultMessage:
+      'The organization administrator role is the highest permission level with full access to content and features. This is the only role that can manage users.',
+  },
+  inviteUsersFormDownloadSoftwareUpdatesFieldTitle: {
+    id: 'inviteUsersFormDownloadSoftwareUpdatesFieldTitle',
+    description: 'Invite users form download software and updates field title',
+    defaultMessage: 'Download software and updates',
+  },
+  inviteUsersFormDownloadSoftwareUpdatesFieldDescription: {
+    id: 'inviteUsersFormDownloadSoftwareUpdatesFieldDescription',
+    description: 'Invite users form download software and updates field description',
+    defaultMessage: 'User can download software and updates from the Red Hat Customer Portal.',
+  },
+  inviteUsersFormManageSubscriptionsFieldTitle: {
+    id: 'inviteUsersFormManageSubscriptionsFieldTitle',
+    description: 'Invite users form manage subscriptions field title',
+    defaultMessage: 'Manage your subscriptions',
+  },
+  inviteUsersFormManageSubscriptionsFieldDescription: {
+    id: 'inviteUsersFormManageSubscriptionsFieldDescription',
+    description: 'Invite users form manage subscriptions field description',
+    defaultMessage: 'Grants user access to subscription management via Red Hat Subscription Management in the Red Hat Customer Portal.',
+  },
+  inviteUsersFormManageSubscriptionsViewEditUsersOnlyTitle: {
+    id: 'inviteUsersFormManageSubscriptionsViewEditUsersOnlyTitle',
+    description: 'Invite users form manage subscriptions field View edit Users only title',
+    defaultMessage: 'View/Edit user’s only',
+  },
+  inviteUsersFormManageSubscriptionsViewEditUsersOnlyDescription: {
+    id: 'inviteUsersFormManageSubscriptionsViewEditUsersOnlyDescription',
+    description: 'Invite users form manage subscriptions field View edit Users only description',
+    defaultMessage: 'User can view and edit only the systems that they have registered in the account.',
+  },
+  inviteUsersFormManageSubscriptionsViewAllTitle: {
+    id: 'inviteUsersFormManageSubscriptionsViewAllTitle',
+    description: 'Invite users form manage subscriptions field view all option title',
+    defaultMessage: 'User can view and edit only the systems that they have registered in the account.',
+  },
+  inviteUsersFormManageSubscriptionsViewAllDescription: {
+    id: 'inviteUsersFormManageSubscriptionsViewAllDescription',
+    description: 'Invite users form manage subscriptions field view all option description',
+    defaultMessage: 'User can view (but not edit) all systems and Subscription Management Applications in the account.',
+  },
+  inviteUsersFormManageSubscriptionsViewEditAllTitle: {
+    id: 'inviteUsersFormManageSubscriptionsViewEditAllTitle',
+    description: 'Invite users form manage subscriptions field View/Edit all option title',
+    defaultMessage: 'View/Edit all',
+  },
+  inviteUsersFormManageSubscriptionsViewEditAllDescription: {
+    id: 'inviteUsersFormManageSubscriptionsViewEditAllDescription',
+    description: 'Invite users form manage subscriptions field View/Edit all option description',
+    defaultMessage: 'User can view and edit all systems and Subscription Management Applications in the account.',
+  },
   inviteUsersFormEmailsFieldTitle: {
     id: 'inviteUsersFormEmailsFieldTitle',
     description: 'Invite users form emails field title',
@@ -38,6 +99,21 @@ export default defineMessages({
     description: 'Invite users form emails field description',
     defaultMessage: 'Enter up to 50 e-mail addresses separated by commas or returns.',
   },
+  inviteUsersFormEmailsFieldError: {
+    id: 'inviteUsersFormEmailsFieldError',
+    description: 'Invite users form emails field error message is one email address is not valid.',
+    defaultMessage: 'Some of the email addresses you provided are not valid',
+  },
+  inviteUsersMessageTitle: {
+    id: 'inviteUsersMessageTitle',
+    description: 'Message to be sent to each email',
+    defaultMessage: 'Send a message with the invite',
+  },
+  inviteUsersCustomerPortalPermissions: {
+    id: 'inviteUsersCustomerPortalPermissions',
+    description: 'Customer portal permissions title',
+    defaultMessage: 'Customer Portal access permissions',
+  },
   inviteUsersCancelled: {
     id: 'inviteUsersCancelled',
     description: 'Invite users cancelled notification description',

src/Routing.tsx

@@ -16,6 +16,7 @@ const Users = lazy(() => import('./smart-components/user/users'));
 const UserDetail = lazy(() => import('./smart-components/user/user'));
 const AddUserToGroup = lazy(() => import('./smart-components/user/add-user-to-group/add-user-to-group'));
 const InviteUsersModal = lazy(() => import('./smart-components/user/invite-users/invite-users-modal'));
+const InviteUsersModalCommonAuth = lazy(() => import('./smart-components/user/invite-users/invite-users-modal-common-auth'));
 
 const Roles = lazy(() => import('./smart-components/role/roles'));
 const Role = lazy(() => import('./smart-components/role/role'));
@@ -43,10 +44,16 @@ const QuickstartsTest = lazy(() => import('./smart-components/quickstarts/quicks
 
 const UsersAndUserGroups = lazy(() => import('./smart-components/access-management/users-and-user-groups'));
 
-const getRoutes = ({ enableServiceAccounts, isITLess, isWorkspacesFlag }: Record<string, boolean>) => [
+const getRoutes = ({ enableServiceAccounts, isITLess, isWorkspacesFlag, isCommonAuthModel }: Record<string, boolean>) => [
   {
     path: pathnames['users-and-user-groups'].path,
     element: UsersAndUserGroups,
+    childRoutes: [
+      isCommonAuthModel && {
+        path: pathnames['invite-group-users'].path,
+        element: InviteUsersModalCommonAuth,
+      },
+    ],
   },
   {
     path: pathnames.overview.path,
@@ -74,9 +81,9 @@ const getRoutes = ({ enableServiceAccounts, isITLess, isWorkspacesFlag }: Record
     path: pathnames.users.path,
     element: Users,
     childRoutes: [
-      isITLess && {
+      (isITLess || isCommonAuthModel) && {
         path: pathnames['invite-users'].path,
-        element: InviteUsersModal,
+        element: isCommonAuthModel ? InviteUsersModalCommonAuth : InviteUsersModal,
       },
     ],
   },
@@ -262,6 +269,7 @@ const Routing = () => {
   const location = useLocation();
   const { updateDocumentTitle, isBeta } = useChrome();
   const isITLess = useFlag('platform.rbac.itless');
+  const isCommonAuthModel = useFlag('platform.rbac.common-auth-model');
   const enableServiceAccounts =
     (isBeta() && useFlag('platform.rbac.group-service-accounts')) || (!isBeta() && useFlag('platform.rbac.group-service-accounts.stable'));
   const isWorkspacesFlag = useFlag('platform.rbac.workspaces');
@@ -282,7 +290,7 @@ const Routing = () => {
     }
   }, [location.pathname, updateDocumentTitle]);
 
-  const routes = getRoutes({ enableServiceAccounts, isITLess, isWorkspacesFlag });
+  const routes = getRoutes({ enableServiceAccounts, isITLess, isWorkspacesFlag, isCommonAuthModel });
   const renderedRoutes = useMemo(() => renderRoutes(routes as never), [routes]);
   return (
     <Suspense fallback={<AppPlaceholder />}>

src/helpers/user/user-helper.js

@@ -2,6 +2,10 @@ import { getLastPageOffset, isOffsetValid } from '../shared/pagination';
 import { getPrincipalApi } from '../shared/user-login';
 import { isInt, isStage, isITLessProd } from '../../itLessConfig';
 
+export const MANAGE_SUBSCRIPTIONS_VIEW_EDIT_USER = 'view-edit-user';
+export const MANAGE_SUBSCRIPTIONS_VIEW_ALL = 'view-all';
+export const MANAGE_SUBSCRIPTIONS_VIEW_EDIT_ALL = 'view-edit-all';
+
 const principalApi = getPrincipalApi();
 
 const principalStatusApiMap = {

src/presentational-components/shared/table-composable-toolbar-view.tsx

@@ -54,7 +54,7 @@ interface MainTableProps {
   setFilterValue: (value: FilterProps) => void;
   pagination: { limit?: number; offset?: number; count?: number; noBottom?: boolean };
   fetchData: (config: FetchDataProps) => void;
-  toolbarButtons?: () => React.ReactNode[];
+  toolbarButtons?: () => (React.JSX.Element | React.ReactNode)[];
   filterPlaceholder?: string;
   filters: Array<{
     value: string | number | Array<unknown>;