Merge pull request wso2#4572 from Achintha444/master

Fix alignment issue in sub0org invited user list page
Achintha444 · Nov 13, 2023 · 2deaf1e · 2deaf1e
2 parents 5fa8f22 + 64939d2
commit 2deaf1e
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 31 deletions.
diff --git a/.changeset/olive-eels-grow.md b/.changeset/olive-eels-grow.md
@@ -0,0 +1,7 @@
+---
+"@wso2is/console": patch
+"@wso2is/myaccount": patch
+"@wso2is/theme": patch
+---
+
+Fix alignment issue in sub0org invited user list page
diff --git a/apps/console/src/features/branding/components/advanced/advance-form.tsx b/apps/console/src/features/branding/components/advanced/advance-form.tsx
@@ -286,6 +286,7 @@ export const AdvanceForm: FunctionComponent<AdvanceFormPropsInterface> = forward
                 listen={ (value: string) =>  setSelfSignUpURL(value) }
                 width={ 16 }
                 data-testid={ `${ componentId }-self-signup-url` }
+                validation={ validateTemplatableURLs }
             />
         </Form>
     );

diff --git a/apps/console/src/features/users/components/guests/pages/guest-users-list.tsx b/apps/console/src/features/users/components/guests/pages/guest-users-list.tsx
@@ -20,13 +20,12 @@ import { hasRequiredScopes } from "@wso2is/core/helpers";
 import { AlertLevels, IdentifiableComponentInterface, TestableComponentInterface } from "@wso2is/core/models";
 import { addAlert } from "@wso2is/core/store";
 import {
-    AnimatedAvatar,
-    AppAvatar,
     ConfirmationModal,
     DataTable,
     EmptyPlaceholder,
     LinkButton,
-    TableColumnInterface
+    TableColumnInterface,
+    UserAvatar
 } from "@wso2is/react-components";
 import { AxiosError } from "axios";
 import React, { FunctionComponent, ReactElement, SyntheticEvent, useState } from "react";
@@ -36,11 +35,11 @@ import { Dispatch } from "redux";
 import { Header, SemanticICONS } from "semantic-ui-react";
 import { deleteInvite, resendInvite } from "../../../../../extensions/components/users/api";
 import { InvitationStatus } from "../../../../../extensions/components/users/models";
-import { 
-    AppState, 
-    FeatureConfigInterface, 
-    UserListInterface, 
-    getEmptyPlaceholderIllustrations 
+import {
+    AppState,
+    FeatureConfigInterface,
+    UserListInterface,
+    getEmptyPlaceholderIllustrations
 } from "../../../../core";
 import { UserAccountTypesMain } from "../../../constants";
 import { deleteParentOrgInvite } from "../api/invite";
@@ -305,19 +304,18 @@ export const GuestUsersList: FunctionComponent<GuestUsersListInterface> = (
                 id: "email",
                 key: 0,
                 render: (invite: UserInviteInterface) => (
-                    <Header as="h6" image>
-                        <AppAvatar
-                            image={ (
-                                <AnimatedAvatar
-                                    name={ invite.email }
-                                    size="mini"
-                                    data-componentid={ `${ componentId }-item-image-inner` }
-                                />
-                            ) }
+                    <Header 
+                        image
+                        as="h6" 
+                        className="header-with-icon"
+                        data-componentid={ `${ componentId }-item-image` }
+                    >
+                        <UserAvatar
+                            data-componentid={ `${ componentId }-item-image-inner` }
+                            name={ invite.email }
                             size="mini"
+                            image={ invite.email }
                             spaced="right"
-                            data-componentid={ `${ componentId }-item-image` }
-                            data-suppress=""
                         />
                         <Header.Content>
                             { userTypeSelection === UserAccountTypesMain.EXTERNAL
@@ -337,7 +335,15 @@ export const GuestUsersList: FunctionComponent<GuestUsersListInterface> = (
                 render: (invite: UserInviteInterface) => {
                     const status: string = invite.status;
 
-                    return status.charAt(0).toUpperCase() + status.substr(1).toLowerCase();
+                    return (
+                        <Header as="h6" data-componentid={ `${ componentId }-invite-status` }>
+                            <Header.Content>
+                                <Header.Subheader>
+                                    { status.charAt(0).toUpperCase() + status.slice(1).toLowerCase() }
+                                </Header.Subheader>
+                            </Header.Content>
+                        </Header>
+                    );
                 },
                 textAlign: "left",
                 title: "Invitation Status"
@@ -359,10 +365,9 @@ export const GuestUsersList: FunctionComponent<GuestUsersListInterface> = (
         <>
             <DataTable<UserInviteInterface>
                 showSearch={ true }
-                padded
                 isLoading={ isGuestUsersRequestLoading }
                 loadingStateOptions={
-                    { count: 5, imageType: "square" }
+                    { count: 5, imageType: "circular" }
                 }
                 placeholders={
                     showPlaceholders()
@@ -400,7 +405,7 @@ export const GuestUsersList: FunctionComponent<GuestUsersListInterface> = (
                 data={ guestUsersList }
                 columns={ resolveTableColumns() }
                 onRowClick={ null }
-                showHeader={ true }
+                showHeader={ false }
                 transparent={ !isGuestUsersRequestLoading && (showPlaceholders() !== null) }
             />
             {

diff --git a/apps/console/src/features/users/components/users-list.tsx b/apps/console/src/features/users/components/users-list.tsx
@@ -259,7 +259,7 @@ export const UsersList: React.FunctionComponent<UsersListProps> = (props: UsersL
                                 spaced="right"
                             />
                             <Header.Content>
-                                <div className={ isNameAvailable ? "mt-2" : "" }>{ header as ReactNode }</div>
+                                <div>{ header as ReactNode }</div>
                                 {
                                     (!isNameAvailable) &&
                                     (

diff --git a/apps/console/src/features/users/pages/users.tsx b/apps/console/src/features/users/pages/users.tsx
@@ -726,7 +726,7 @@ const UsersPage: FunctionComponent<UsersPageInterface> = (
         return (
             <ListLayout
                 // TODO add sorting functionality.
-                className="mt-5"
+                className="sub-org-users-list"
                 advancedSearch={ advancedSearchFilter() }
                 currentListSize={ usersList.itemsPerPage }
                 listItemLimit={ listItemLimit }
@@ -926,17 +926,13 @@ const UsersPage: FunctionComponent<UsersPageInterface> = (
 
         panes.push({
             componentId: "users",
-            menuItem: {
-                content: t("console:manage.features.parentOrgInvitations.tab.usersTab")
-            },
+            menuItem: t("console:manage.features.parentOrgInvitations.tab.usersTab"),
             render: renderUsersList
         });
 
         panes.push({
             componentId: "invitations",
-            menuItem: {
-                content: t("console:manage.features.parentOrgInvitations.tab.invitationsTab")
-            },
+            menuItem: t("console:manage.features.parentOrgInvitations.tab.invitationsTab"),
             render: renderInvitationsList
         });
 
@@ -946,6 +942,7 @@ const UsersPage: FunctionComponent<UsersPageInterface> = (
     const renderInvitationsList = (): ReactElement => {
         return (
             <ListLayout
+                className="sub-org-users-list"
                 advancedSearch={ advancedSearchFilter() }
                 currentListSize={ usersList?.itemsPerPage }
                 listItemLimit={ listItemLimit }

diff --git a/modules/theme/src/theme-core/definitions/apps/developer-portal.less b/modules/theme/src/theme-core/definitions/apps/developer-portal.less
@@ -1993,3 +1993,11 @@
         padding: 0;
     }
 }
+
+/*-------------------
+    Users List
+---------------------*/
+
+.sub-org-users-list {
+    margin-top: 28px;
+}