Use display name instead of alias if set (#2622)

src/identity-providers/add/DetailSettings.tsx

@@ -1,7 +1,13 @@
 import React, { useState } from "react";
 import { Link, useHistory, useParams } from "react-router-dom";
 import { useTranslation } from "react-i18next";
-import { Controller, FormProvider, useForm } from "react-hook-form";
+import {
+  Controller,
+  FormProvider,
+  useForm,
+  useFormContext,
+  useWatch,
+} from "react-hook-form";
 import {
   ActionGroup,
   AlertVariant,
@@ -68,9 +74,16 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
   const { t } = useTranslation("identity-providers");
   const { alias } = useParams<{ alias: string }>();
 
+  const { control } = useFormContext();
+  const displayName = useWatch({
+    name: "displayName",
+    control,
+    defaultValue: alias,
+  });
+
   const [toggleDisableDialog, DisableConfirm] = useConfirmDialog({
     titleKey: "identity-providers:disableProvider",
-    messageKey: t("disableConfirm", { provider: alias }),
+    messageKey: t("disableConfirm", { provider: displayName }),
     continueButtonLabel: "common:disable",
     onConfirm: () => {
       onChange(!value);
@@ -82,7 +95,7 @@ const Header = ({ onChange, value, save, toggleDeleteDialog }: HeaderProps) => {
     <>
       <DisableConfirm />
       <ViewHeader
-        titleKey={toUpperCase(alias)}
+        titleKey={toUpperCase(displayName)}
         divider={false}
         dropdownItems={[
           <DropdownItem key="delete" onClick={() => toggleDeleteDialog()}>
@@ -265,7 +278,7 @@ export default function DetailSettings() {
   }
 
   return (
-    <>
+    <FormProvider {...form}>
       <DeleteConfirm />
       <DeleteMapperConfirm />
       <Controller
@@ -283,7 +296,6 @@ export default function DetailSettings() {
       />
 
       <PageSection variant="light" className="pf-u-p-0">
-        <FormProvider {...form}>
         <KeycloakTabs isBox>
           <Tab
             id="settings"
@@ -430,8 +442,7 @@ export default function DetailSettings() {
             <PermissionsTab id={alias} type="identityProviders" />
           </Tab>
         </KeycloakTabs>
-        </FormProvider>
       </PageSection>
-    </>
+    </FormProvider>
   );
 }