Merge pull request wso2#4937 from dasuni-30/fix/18143

Improve add multiple users wizard
savindi7 · Dec 4, 2023 · 812ee07 · 812ee07
2 parents f649b6d + 31b4a25
commit 812ee07
Show file tree

Hide file tree

Showing 9 changed files with 276 additions and 294 deletions.
diff --git a/.changeset/nice-knives-carry.md b/.changeset/nice-knives-carry.md
@@ -0,0 +1,7 @@
+---
+"@wso2is/console": patch
+"@wso2is/i18n": patch
+"@wso2is/myaccount": patch
+---
+
+Improve add multiple users wizard
diff --git a/apps/console/src/features/groups/components/group-common-components/render-chip.tsx b/apps/console/src/features/groups/components/group-common-components/render-chip.tsx
@@ -17,8 +17,10 @@
  */
 
 import Chip, { ChipProps } from "@oxygen-ui/react/Chip";
+import Typography from "@oxygen-ui/react/Typography";
 import { IdentifiableComponentInterface, RolesMemberInterface } from "@wso2is/core/models";
 import React, { FunctionComponent, ReactElement, SyntheticEvent } from "react";
+import { RoleAudienceTypes } from "../../../roles/constants";
 
 interface RenderChipInterface extends IdentifiableComponentInterface, ChipProps {
     /**
@@ -63,15 +65,15 @@ export const RenderChipRolesInGroups: FunctionComponent<RenderChipInterface> = (
 
     /**
      * Handles the mouse enter event of the chip.
-     * 
+     *
      * @param event - Mouse event
      * @param option - Group or user object
      */
     const handleChipMouseEnter = (event: SyntheticEvent) => {
         event.stopPropagation();
         setActiveOption(option);
     };
-    
+
     /**
      * Handles the mouse leave event of the chip.
      */
@@ -84,12 +86,15 @@ export const RenderChipRolesInGroups: FunctionComponent<RenderChipInterface> = (
             <Chip
                 { ...props }
                 key={ key }
-                label={ 
+                label={
                     (<>
-                        <i> { audienceType } </i> 
-                        <i> { audienceType === "application" && ( " : " + audienceDisplay ) } </i>
-                        { " | " }
-                        <strong> { displayName } </strong>
+                        <Typography fontWeight={ 500 } sx={ { display: "inline-block" } }>{ displayName }</Typography>
+                        <Typography sx={ { display: "inline-block", fontStyle:"italic" } } >
+                            { " (" + audienceType }
+                            { audienceType.toUpperCase() === RoleAudienceTypes.APPLICATION
+                                && (" | " + audienceDisplay) }
+                            { ") " }
+                        </Typography>
                     </>)
                 }
                 onMouseEnter={ handleChipMouseEnter }

diff --git a/apps/console/src/features/users/components/bulk-import-response-list.tsx b/apps/console/src/features/users/components/bulk-import-response-list.tsx
@@ -86,15 +86,15 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
     const [ responseOperationType, setResponseOperationType ] =
         useState<BulkImportResponseOperationTypes>(BulkImportResponseOperationTypes.USER_CREATION);
     const [ responseOperationTypeTab, setResponseOperationTypeTab ] = useState<number>(0);
-    
+
     const { t } = useTranslation();
 
     const totalUserCreationCount: number =
         bulkResponseSummary.failedUserCreation + bulkResponseSummary.successUserCreation;
     const totalUserAssignmentCount: number =
         bulkResponseSummary.failedUserAssignment + bulkResponseSummary.successUserAssignment;
     const listItemLimit: number = UIConstants.DEFAULT_RESOURCE_LIST_ITEM_LIMIT;
-    
+
     const statusOptions: DropdownItemProps[] = [
         { key: 0, text: "All", value: ALL_STATUS },
         {
@@ -130,7 +130,7 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
     useEffect(() => {
         filterResponseListByOperationType();
     }, [ responseList ]);
-    
+
     /**
      * Set the filtered response list based on the response operation type.
      */
@@ -139,7 +139,7 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
         setSelectedStatus(ALL_STATUS);
         filterResponseListByOperationType();
     }, [ responseOperationType ]);
-    
+
     /**
      * Filter the response list based on the response operation type.
      */
@@ -149,7 +149,7 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
 
                 return response.operationType === responseOperationType;
             });
-        
+
         setFilteredResponseList(filteredResponse);
     };
 
@@ -220,7 +220,7 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
 
         return defaultColumns;
     };
-    
+
     /**
      * Filters the response list based on the search query and the selected status.
      */
@@ -232,7 +232,7 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
 
         if (searchQuery && searchQuery !== "") {
             const [ , condition, value ] = searchQuery.split(" ");
-            
+
             filteredList = filteredList.filter((item: BulkUserImportOperationResponse) => {
                 if (
                     selectedStatus !== ALL_STATUS
@@ -281,7 +281,7 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
 
     const handleStatusDropdownChange = (event: React.MouseEvent<HTMLAnchorElement>, data: DropdownProps) => {
         const newStatus: FilterStatus = data.value as FilterStatus;
-        
+
         setSelectedStatus(newStatus);
         setTriggerClearQuery(!triggerClearQuery);
     };
@@ -359,16 +359,16 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
     const isResponseStatusFilterDisabled = (): boolean => {
         const isUserCreation: boolean = responseOperationType === BulkImportResponseOperationTypes.USER_CREATION;
         const isRoleAssignment: boolean = responseOperationType === BulkImportResponseOperationTypes.ROLE_ASSIGNMENT;
-    
+
         const noFailedOrSuccessfulUserCreation: boolean =
             (bulkResponseSummary.failedUserCreation === 0 || bulkResponseSummary.successUserCreation === 0);
         const noFailedOrSuccessfulUserAssignment: boolean =
             (bulkResponseSummary.failedUserAssignment === 0 || bulkResponseSummary.successUserAssignment === 0);
-    
+
         return (isUserCreation && noFailedOrSuccessfulUserCreation) ||
             (isRoleAssignment && noFailedOrSuccessfulUserAssignment);
     };
-    
+
     const advanceSearchFilterOptions: DropdownChild[] =
         responseOperationType === BulkImportResponseOperationTypes.USER_CREATION
             ? [
@@ -394,8 +394,8 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
                 <Grid.Column mobile={ 16 } tablet={ 16 } computer={ 16 }>
                     {
                         isLoading || hasError
-                            ? null 
-                            : bulkResponseSummary.failedUserCreation === 0 
+                            ? null
+                            : bulkResponseSummary.failedUserCreation === 0
                                 ? (
                                     successAlert ?? (
                                         <Alert severity="success" data-componentid={ `${componentId}-success-alert` }>
@@ -453,7 +453,7 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
                                         ? t("console:manage.features.users.advancedSearch.form.dropdown." +
                                             "filterAttributeOptions.username")
                                         : t("console:manage.features.user.modals.bulkImportUserWizard." +
-                                            "wizardSummary.advanceSearch.roleGroupFilterAttributePlaceHolder") 
+                                            "wizardSummary.advanceSearch.roleGroupFilterAttributePlaceHolder")
                                 }
                                 filterConditionsPlaceholder={
                                     t("console:manage.features.users.advancedSearch.form.inputs.filterCondition" +
@@ -468,7 +468,7 @@ export const BulkImportResponseList: React.FunctionComponent<BulkImportResponseL
                                         ? t("console:manage.features.user.modals.bulkImportUserWizard." +
                                             "wizardSummary.advanceSearch.searchByUsername")
                                         : t("console:manage.features.user.modals.bulkImportUserWizard." +
-                                            "wizardSummary.advanceSearch.searchByRoleOrGroup")
+                                            "wizardSummary.advanceSearch.searchByGroup")
                                 }
                                 defaultSearchAttribute="resourceName"
                                 defaultSearchOperator="co"

diff --git a/apps/console/src/features/users/components/user-common-components/render-chip.tsx b/apps/console/src/features/users/components/user-common-components/render-chip.tsx
@@ -17,9 +17,10 @@
  */
 
 import Chip, { ChipProps } from "@oxygen-ui/react/Chip";
+import Typography from "@oxygen-ui/react/Typography";
 import { IdentifiableComponentInterface, RolesMemberInterface } from "@wso2is/core/models";
-import React, { FunctionComponent, ReactElement, SyntheticEvent, useState } from "react";
-import { ChipMoreDetails } from "./chip-more-details";
+import React, { FunctionComponent, ReactElement, SyntheticEvent } from "react";
+import { RoleAudienceTypes } from "../../../roles/constants";
 
 interface RenderChipInterface extends IdentifiableComponentInterface, ChipProps {
     /**
@@ -52,29 +53,24 @@ export const RenderChip: FunctionComponent<RenderChipInterface> = (
         key,
         setActiveOption,
         primaryText,
-        option,
-        activeOption
+        option
     } = props;
 
-    const [ popoverAnchorEl, setPopoverAnchorEl ] = useState<Element>(null);
-
     /**
      * Handles the mouse enter event of the chip.
-     * 
+     *
      * @param event - Mouse event
      * @param option - Group or user object
      */
     const handleChipMouseEnter = (event: SyntheticEvent) => {
         event.stopPropagation();
-        setPopoverAnchorEl(event.currentTarget);
         setActiveOption(option);
     };
-    
+
     /**
      * Handles the mouse leave event of the chip.
      */
     const handleChipMouseLeave = () => {
-        setPopoverAnchorEl(null);
         setActiveOption(null);
     };
 
@@ -83,21 +79,20 @@ export const RenderChip: FunctionComponent<RenderChipInterface> = (
             <Chip
                 { ...props }
                 key={ key }
-                label={ primaryText }
+                label={
+                    (<>
+                        <Typography fontWeight={ 500 } sx={ { display: "inline-block" } }>{ primaryText }</Typography>
+                        <Typography sx={ { display: "inline-block", fontStyle:"italic" } } >
+                            { " (" + option?.audienceType }
+                            { option?.audienceType.toUpperCase() === RoleAudienceTypes.APPLICATION
+                                && (" | " + option?.audienceDisplay) }
+                            { ") " }
+                        </Typography>
+                    </>)
+                }
                 onMouseEnter={ handleChipMouseEnter }
                 onMouseLeave={ handleChipMouseLeave }
             />
-            {
-                activeOption?.value === option.value
-                    ? (
-                        <ChipMoreDetails 
-                            popoverAnchorEl={ popoverAnchorEl } 
-                            onPopoverClose={ handleChipMouseLeave } 
-                            primaryText={ primaryText } 
-                        />
-                    )
-                    : null
-            }
         </>
     );
 };