Fixes identity provider section (#3116)

public/resources/en/users.json

@@ -71,6 +71,11 @@
   "link": "Link",
   "linkAccountTitle": "Link account to {{provider}}",
   "idpLinkSuccess": "Identity provider has been linked",
+  "idpUnlinkSuccess" : "The provider link has been removed",
+  "idpType": {
+    "social": "Social login",
+    "custom": "Custom"
+  },
   "couldNotLinkIdP": "Could not link identity provider {{error}}",
   "verifyEmail": "Verify Email",
   "updateUserLocale": "Update User Locale",

src/user/UserIdentityProviderLinks.tsx

@@ -96,7 +96,7 @@ export const UserIdentityProviderLinks = () => {
           id,
           federatedIdentityId: federatedId,
         });
-        addAlert(t("common:mappingDeletedSuccess"), AlertVariant.success);
+        addAlert(t("users:idpUnlinkSuccess"), AlertVariant.success);
         refresh();
       } catch (error) {
         addError("common:mappingDeletedError", error);
@@ -125,7 +125,9 @@ export const UserIdentityProviderLinks = () => {
     )?.groupName!;
     return (
       <Label color={groupName === "Social" ? "blue" : "orange"}>
-        {groupName === "Social" ? "Social" : "Custom"}
+        {groupName === "Social"
+          ? t("users:idpType.social")
+          : t("users:idpType.custom")}
       </Label>
     );
   };
@@ -136,7 +138,11 @@ export const UserIdentityProviderLinks = () => {
     )?.groupName!;
     return (
       <Label color={groupName === "User-defined" ? "orange" : "blue"}>
-        {groupName === "User-defined" ? "Custom" : groupName!}
+        {groupName === "User-defined"
+          ? "Custom"
+          : groupName! === "Social"
+          ? t("users:idpType.social")
+          : groupName!}
       </Label>
     );
   };
@@ -179,7 +185,7 @@ export const UserIdentityProviderLinks = () => {
         />
       )}
       <UnlinkConfirm />
-      <PageSection variant="light">
+      <PageSection variant="light" className="pf-u-p-0">
         <FormPanel title={t("linkedIdPs")} className="kc-linked-idps">
           <TextContent>
             <Text className="kc-available-idps-text">

src/user/user-section.css

@@ -109,6 +109,7 @@ article.pf-c-card.pf-m-flat.kc-available-idps > div > div > h1 {
 
 .kc-available-idps-text {
   color: var(--pf-global--Color--200);
+  margin-top: var(--pf-global--spacer--sm);
 }
 
 .kc-linked-idps-text {
@@ -121,4 +122,21 @@ article.pf-c-card.pf-m-flat.kc-available-idps > div > div > h1 {
 
 .keycloak__user-credentials__reset-form {
   --pf-c-form--m-horizontal__group-label--md--GridColumnWidth: 13rem;
-}
+}
+
+.pf-c-card__header.kc-form-panel__header{
+  padding-bottom: 0;
+}
+
+.pf-c-card__body.kc-form-panel__body{
+  padding-bottom: 0;
+}
+
+.pf-c-content.kc-no-providers-text{
+  margin-top: calc(
+    var(--pf-global--spacer--2xl) - var(--pf-global--spacer--sm)
+  );
+  margin-right: var(--pf-global--spacer--md);
+  margin-bottom: var(--pf-global--spacer--2xl);
+}
+