Add support for handling groups tier limit reached

.changeset/witty-teeth-vanish.md

@@ -0,0 +1,7 @@
+---
+"@wso2is/admin.groups.v1": patch
+"@wso2is/console": patch
+"@wso2is/i18n": patch
+---
+
+Add support for handling groups tier limit

features/admin.groups.v1/components/wizard/create-group-wizard.tsx

@@ -18,6 +18,7 @@
 
 import { FeatureAccessConfigInterface, useRequiredScopes } from "@wso2is/access-control";
 import { useApplicationList } from "@wso2is/admin.applications.v1/api/application";
+import { TierLimitReachErrorModal } from "@wso2is/admin.core.v1/components/modals";
 import { AssignRoles } from "@wso2is/admin.core.v1/components/roles";
 import { RolePermissions } from "@wso2is/admin.core.v1/components/roles/role-permissions";
 import { AppConstants } from "@wso2is/admin.core.v1/constants/app-constants";
@@ -56,6 +57,7 @@ import { Grid, Icon, Modal } from "semantic-ui-react";
 import { AddGroupUsers } from "./group-assign-users";
 import { createGroup } from "../../api/groups";
 import { getGroupsWizardStepIcons } from "../../configs/ui";
+import { GroupConstants } from "../../constants/group-constants";
 import {
     CreateGroupInterface,
     CreateGroupMemberInterface,
@@ -133,6 +135,7 @@ export const CreateGroupWizard: FunctionComponent<CreateGroupProps> =
     const [ isRoleSelected, setRoleSelection ] = useState<boolean>(false);
     const [ viewRolePermissions, setViewRolePermissions ] = useState<boolean>(false);
     const [ submitStep, setSubmitStep ] = useState<WizardStepsFormTypes>(undefined);
+    const [ openLimitReachedModal, setOpenLimitReachedModal ] = useState<boolean>(false);
 
     const userRoleFeatureConfig: FeatureAccessConfigInterface = useSelector(
         (state: AppState) => state?.config?.ui?.features?.userRoles);
@@ -301,6 +304,8 @@ export const CreateGroupWizard: FunctionComponent<CreateGroupProps> =
 
         setIsSubmitting(true);
 
+        let limitReached: boolean = false;
+
         /**
          * Create Group API Call.
          */
@@ -396,6 +401,14 @@ export const CreateGroupWizard: FunctionComponent<CreateGroupProps> =
 
             onCreate();
         }).catch((error: AxiosError<HttpErrorResponseDataInterface>)  => {
+            if (error?.response?.status === 403
+                && error?.response?.data?.code === GroupConstants.ERROR_CREATE_LIMIT_REACHED.getErrorCode()) {
+                limitReached = true;
+                setOpenLimitReachedModal(true);
+
+                return;
+            }
+
             if (!error.response || error.response.status === 401) {
                 dispatch(
                     addAlert({
@@ -421,7 +434,9 @@ export const CreateGroupWizard: FunctionComponent<CreateGroupProps> =
                 }));
             }
         }).finally(() => {
-            closeWizard();
+            if (!limitReached) {
+                closeWizard();
+            }
             setIsSubmitting(false);
         });
     };
@@ -583,6 +598,22 @@ export const CreateGroupWizard: FunctionComponent<CreateGroupProps> =
         ? [ getBasicDetailsWizardStep(), getRoleAssignmentWizardStep() ]
         : [ getBasicDetailsWizardStep() ];
 
+    if (openLimitReachedModal) {
+        return (
+            <TierLimitReachErrorModal
+                actionLabel={ t("groups:notifications.tierLimitReachedError.emptyPlaceholder.action") }
+                handleModalClose={ () => {
+                    setOpenLimitReachedModal(false);
+                    closeWizard();
+                } }
+                header={ t("groups:notifications.tierLimitReachedError.heading") }
+                description={ t("groups:notifications.tierLimitReachedError.emptyPlaceholder.subtitles") }
+                message={ t("groups:notifications.tierLimitReachedError.emptyPlaceholder.title") }
+                openModal={ openLimitReachedModal }
+            />
+        );
+    }
+
     return (
         <Modal
             open

features/admin.groups.v1/constants/group-constants.ts

@@ -16,6 +16,8 @@
  * under the License.
  */
 
+import { IdentityAppsError } from "@wso2is/core/errors";
+
 /**
  * Class containing groups constants.
  */
@@ -42,4 +44,14 @@ export class GroupConstants {
         .set("GROUP_UPDATE", "groups.update")
         .set("GROUP_DELETE", "groups.delete")
         .set("GROUP_READ", "groups.read");
+
+    /**
+     * Group create limit reached error.
+     */
+    public static readonly ERROR_CREATE_LIMIT_REACHED: IdentityAppsError = new IdentityAppsError(
+        "ASG-FG-API-60002",
+        "groups:notifications.apiLimitReachedError.error.description",
+        "groups:notifications.apiLimitReachedError.error.message",
+        "a47e1d62-bb71-4f0f-9e3a-7fcd4a9f7b21"
+    );
 }

modules/i18n/src/models/namespaces/groups-ns.ts

@@ -145,6 +145,20 @@ export interface groupsNS {
                 description: string;
             };
         };
+        apiLimitReachedError: {
+            error: {
+                message: string;
+                description: string;
+            };
+        };
+        tierLimitReachedError: {
+            emptyPlaceholder: {
+                action: string;
+                title: string;
+                subtitles: string;
+            };
+            heading: string;
+        };
     };
     placeholders: {
         groupsError: {

modules/i18n/src/translations/en-US/portals/groups.ts

@@ -91,6 +91,12 @@ export const groups: groupsNS = {
         storeOptions: "Select User Store"
     },
     notifications: {
+        apiLimitReachedError: {
+            error: {
+                description: "You have reached the maximum number of groups allowed.",
+                message: "Failed to create the group"
+            }
+        },
         createGroup: {
             error: {
                 description: "{{description}}",
@@ -139,6 +145,16 @@ export const groups: groupsNS = {
                 message: "Something went wrong"
             }
         },
+        tierLimitReachedError: {
+            emptyPlaceholder: {
+                action: "View Plans",
+                subtitles: "You can contact the organization administrator or (if you are the " +
+                    "administrator) upgrade your subscription to increase the allowed limit.",
+                title: "You have reached the maximum number of groups allowed " +
+                    "for this organization."
+            },
+            heading: "You’ve reached the maximum limit for groups"
+        },
         updateGroup: {
             error: {
                 description: "{{description}}",