ui: added title for policy and role page & fix multi selection issue in create policy (#12904)

openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetailPage.tsx

@@ -103,11 +103,11 @@ const PoliciesDetailPage = () => {
         url: policiesPath,
       },
       {
-        name: fqn,
+        name: getEntityName(policy),
         url: '',
       },
     ],
-    [fqn]
+    [policy]
   );
 
   const fetchPolicyPermission = async () => {
@@ -368,7 +368,14 @@ const PoliciesDetailPage = () => {
             </ErrorPlaceHolder>
           ) : (
             <div className="policies-detail" data-testid="policy-details">
+              <Typography.Title
+                className="m-b-0 m-t-xs"
+                data-testid="heading"
+                level={5}>
+                {getEntityName(policy)}
+              </Typography.Title>
               <Description
+                className="m-b-md"
                 description={policy.description || ''}
                 entityFqn={policy.fullyQualifiedName}
                 entityName={getEntityName(policy)}

openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/RuleForm/RuleForm.tsx

@@ -253,6 +253,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
         ]}>
         <TreeSelect
           treeCheckable
+          autoClearSearchValue={false}
           className="w-full"
           data-testid="resources"
           placeholder={t('label.select-field', {
@@ -281,6 +282,7 @@ const RuleForm: FC<RuleFormProps> = ({ ruleData, setRuleData }) => {
         ]}>
         <TreeSelect
           treeCheckable
+          autoClearSearchValue={false}
           className="w-full"
           data-testid="operations"
           placeholder={t('label.select-field', {

openmetadata-ui/src/main/resources/ui/src/pages/RolesPage/RolesDetailPage/RolesDetailPage.tsx

@@ -86,11 +86,11 @@ const RolesDetailPage = () => {
         url: rolesPath,
       },
       {
-        name: fqn,
+        name: getEntityName(role),
         url: '',
       },
     ],
-    [fqn]
+    [role]
   );
 
   const fetchRolePermission = async () => {
@@ -276,7 +276,14 @@ const RolesDetailPage = () => {
             </ErrorPlaceHolder>
           ) : (
             <div className="roles-detail" data-testid="role-details">
+              <Typography.Title
+                className="m-b-0 m-t-xs"
+                data-testid="heading"
+                level={5}>
+                {getEntityName(role)}
+              </Typography.Title>
               <Description
+                className="m-b-md"
                 description={role.description || ''}
                 entityFqn={role.fullyQualifiedName}
                 entityName={getEntityName(role)}