fix(ui): alignment on summary panel (#11174)

* fix(ui): alignment on summary panel
teams name validation
owner dropdown issue resolved

* fix cypress issue for users count

openmetadata-ui/src/main/resources/ui/cypress/e2e/Flow/TotalCountForTeams&Users.spec.js

@@ -16,7 +16,7 @@ import { SEARCH_ENTITY_TABLE } from '../../constants/constants';
 
 const TEAM_DETAILS = SEARCH_ENTITY_TABLE.table_1;
 const userURL =
-  '/api/v1/search/query?q=***&from=0&size=10&index=user_search_index';
+  '/api/v1/search/query?q=**%20AND%20isBot:false&from=0&size=0&index=user_search_index';
 const teamURL =
   '/api/v1/search/query?q=*%20AND%20teamType:Group&from=0&size=10&index=team_search_index';
 

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/DashboardSummary/DashboardSummary.component.tsx

@@ -125,6 +125,7 @@ function DashboardSummary({
                       <Col data-testid="dashboard-url-value" span={16}>
                         {info.isLink ? (
                           <Link
+                            className="d-flex items-center"
                             component={Typography.Link}
                             target={info.isExternal ? '_blank' : '_self'}
                             to={{ pathname: info.url }}>
@@ -136,9 +137,10 @@ function DashboardSummary({
                             {info.isExternal ? (
                               <SVGIcons
                                 alt="external-link"
-                                className="m-l-xs"
+                                className="m-l-xss"
+                                height="14px"
                                 icon="external-link"
-                                width="12px"
+                                width="14px"
                               />
                             ) : null}
                           </Link>

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/MlModelSummary/MlModelSummary.component.tsx

@@ -91,15 +91,17 @@ function MlModelSummary({
                       <Col data-testid={`${info.name}-value`} span={16}>
                         {info.isLink ? (
                           <Link
+                            className="d-flex items-center"
                             target={info.isExternal ? '_blank' : '_self'}
                             to={{ pathname: info.url }}>
                             {info.value}
                             {info.isExternal ? (
                               <SVGIcons
                                 alt="external-link"
-                                className="m-l-xs"
+                                className="m-l-xss"
+                                height="14px"
                                 icon="external-link"
-                                width="12px"
+                                width="14px"
                               />
                             ) : null}
                           </Link>

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/PipelineSummary/PipelineSummary.component.tsx

@@ -93,6 +93,7 @@ function PipelineSummary({
                         {info.isLink ? (
                           <Space align="start">
                             <Typography.Link
+                              className="d-flex items-center"
                               data-testid="pipeline-link-name"
                               href={info.url}
                               target={info.isExternal ? '_blank' : '_self'}>
@@ -100,9 +101,10 @@ function PipelineSummary({
                               {info.isExternal ? (
                                 <SVGIcons
                                   alt="external-link"
-                                  className="m-l-xs"
+                                  className="m-l-xss"
+                                  height="14px"
                                   icon="external-link"
-                                  width="12px"
+                                  width="14px"
                                 />
                               ) : null}
                             </Typography.Link>

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SummaryList/SummaryList.component.tsx

@@ -29,7 +29,7 @@ export default function SummaryList({
   const { t } = useTranslation();
 
   return (
-    <Row>
+    <Row align="middle">
       {isEmpty(formattedEntityData) ? (
         <div>
           <Text className="text-grey-body">

openmetadata-ui/src/main/resources/ui/src/components/Explore/EntitySummaryPanel/SummaryList/SummaryListItems/SummaryListItems.component.tsx

@@ -15,7 +15,6 @@ import { Col, Divider, Row, Space, Typography } from 'antd';
 import TagsViewer from 'components/Tag/TagsViewer/tags-viewer';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
-import { ReactComponent as IconTagGrey } from '../../../../../assets/svg/tag-grey.svg';
 import { MAX_CHAR_LIMIT_ENTITY_SUMMARY } from '../../../../../constants/constants';
 import { getTagValue } from '../../../../../utils/CommonUtils';
 import { prepareConstraintIcon } from '../../../../../utils/TableUtils';
@@ -46,9 +45,9 @@ function SummaryListItem({
         </Col>
         <Col span={24}>
           <Row className="text-xs font-thin" gutter={[4, 4]}>
-            <Col>
+            <Col className="self-center">
               {entityDetails.type && (
-                <Space size={4}>
+                <Space className="h-6" size={4}>
                   <Text className="text-grey-muted">{`${t(
                     'label.type'
                   )}:`}</Text>
@@ -63,11 +62,11 @@ function SummaryListItem({
 
             {entityDetails.algorithm && (
               <>
-                <Col>
+                <Col className="self-center">
                   <Divider type="vertical" />
                 </Col>
-                <Col>
+                <Col className="self-center">
-                  <Space size={4}>
+                  <Space className="h-6" size={4}>
                     <Text className="text-grey-muted">{`${t(
                       'label.algorithm'
                     )}:`}</Text>
@@ -82,22 +81,16 @@ function SummaryListItem({
             )}
             {entityDetails.tags && entityDetails.tags.length !== 0 && (
               <>
-                <Col>
+                <Col className="self-center">
                   <Divider type="vertical" />
                 </Col>
                 <Col className="flex-grow">
-                  <Space>
+                  <TagsViewer
-                    <IconTagGrey
+                    sizeCap={-1}
-                      className="w-12 h-12"
+                    tags={(entityDetails.tags || []).map((tag) =>
-                      data-testid="tag-grey-icon"
+                      getTagValue(tag)
-                    />
+                    )}
-                    <TagsViewer
+                  />
-                      sizeCap={-1}
-                      tags={(entityDetails.tags || []).map((tag) =>
-                        getTagValue(tag)
-                      )}
-                    />
-                  </Space>
                 </Col>
               </>
             )}

openmetadata-ui/src/main/resources/ui/src/components/common/SelectableList/SelectableList.component.tsx

@@ -119,7 +119,7 @@ export const SelectableList = ({
       e.currentTarget.scrollHeight - e.currentTarget.scrollTop ===
         ADD_USER_CONTAINER_HEIGHT &&
       pagingInfo.after &&
-      uniqueOptions.length !== pagingInfo.total
+      uniqueOptions.length <= pagingInfo.total
     ) {
       const { data, paging } = await fetchOptions(searchText, pagingInfo.after);
 

openmetadata-ui/src/main/resources/ui/src/components/common/UserTeamSelectableList/UserTeamSelectableList.component.tsx

@@ -174,7 +174,15 @@ export const UserTeamSelectableList = ({
 
   // Fetch and store count for Users tab
   const getUserCount = async () => {
-    const res = await searchData('', 1, 0, '', '', '', SearchIndex.USER);
+    const res = await searchData(
+      '',
+      1,
+      0,
+      'isBot:false',
+      '',
+      '',
+      SearchIndex.USER
+    );
 
     setUserPaging({ total: res.data.hits.total.value });
   };

openmetadata-ui/src/main/resources/ui/src/pages/teams/AddTeamForm.tsx

@@ -16,12 +16,12 @@ import { AxiosError } from 'axios';
 import RichTextEditor from 'components/common/rich-text-editor/RichTextEditor';
 import { EditorContentRef } from 'components/common/rich-text-editor/RichTextEditor.interface';
 import { VALIDATION_MESSAGES } from 'constants/constants';
-import { isUndefined, toLower, trim } from 'lodash';
+import { ENTITY_NAME_REGEX } from 'constants/regex.constants';
+import { toLower, trim } from 'lodash';
 import React, { useEffect, useMemo, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { getTeams } from 'rest/teamsAPI';
 import { Team, TeamType } from '../../generated/entity/teams/team';
-import { isUrlFriendlyName } from '../../utils/CommonUtils';
 import { showErrorToast } from '../../utils/ToastUtils';
 
 type AddTeamFormType = {
@@ -112,19 +112,17 @@ const AddTeamForm: React.FC<AddTeamFormType> = ({
               max: 128,
               whitespace: true,
             },
+            {
+              pattern: ENTITY_NAME_REGEX,
+              message: t('message.entity-pattern-validation', {
+                entity: `${t('label.name')}`,
+                pattern: `- _ & . '`,
+              }),
+            },
             {
               validator: (_, value) => {
-                if (!isUrlFriendlyName(value)) {
-                  return Promise.reject(
-                    t('message.special-character-not-allowed')
-                  );
-                }
                 if (
-                  !isUndefined(
+                  allTeam.some((team) => toLower(team.name) === toLower(value))
-                    allTeam.find(
-                      (item) => toLower(item.name) === toLower(value)
-                    )
-                  )
                 ) {
                   return Promise.reject(
                     t('message.entity-already-exists', {

openmetadata-ui/src/main/resources/ui/src/utils/EntitySummaryPanelUtils.tsx

@@ -11,7 +11,7 @@
  *  limitations under the License.
  */
 
-import { Space, Typography } from 'antd';
+import { Typography } from 'antd';
 import { NO_DATA_PLACEHOLDER } from 'constants/constants';
 import { isEmpty } from 'lodash';
 import React from 'react';
@@ -65,12 +65,17 @@ export const getFormattedEntityData = (
         name: chart.name,
         title: (
           <Link target="_blank" to={{ pathname: chart.chartUrl }}>
-            <Space className="m-b-xs">
+            <div className="d-flex items-center m-b-xs">
-              <Text className="entity-title text-primary font-medium">
+              <Text className="entity-title text-primary font-medium m-r-xss">
                 {getTitleName(chart)}
               </Text>
-              <SVGIcons alt="external-link" icon="external-link" width="12px" />
+              <SVGIcons
-            </Space>
+                alt="external-link"
+                height="14px"
+                icon="external-link"
+                width="14px"
+              />
+            </div>
           </Link>
         ),
         type: chart.chartType,
@@ -83,12 +88,17 @@ export const getFormattedEntityData = (
         name: task.name,
         title: (
           <Link target="_blank" to={{ pathname: task.taskUrl }}>
-            <Space className="m-b-xs">
+            <div className="d-flex items-center m-b-xs">
-              <Text className="entity-title text-primary font-medium">
+              <Text className="entity-title text-primary font-medium m-r-xss">
                 {getTitleName(task)}
               </Text>
-              <SVGIcons alt="external-link" icon="external-link" width="12px" />
+              <SVGIcons
-            </Space>
+                alt="external-link"
+                height="14px"
+                icon="external-link"
+                width="14px"
+              />
+            </div>
           </Link>
         ),
         type: task.taskType,