fix the ui around domain label, data filter and search index table entity stats (#15720)

* fix the ui around domain label, data filter and searchindex table entity stats

* remove unwanted file change

* changes as per comments

* changes as per comments

* fix the missing dependency

openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/Execution.component.tsx

@@ -177,7 +177,7 @@ const ExecutionsTab = ({ pipelineFQN, tasks }: ExecutionProps) => {
                       onClick={() => {
                         setIsClickedCalendar(true);
                       }}>
-                      <span>
+                      <span className="date-container">
                         {!datesSelected && (
                           <label>{t('label.date-filter')}</label>
                         )}

openmetadata-ui/src/main/resources/ui/src/components/Pipeline/Execution/execution.less

@@ -11,21 +11,31 @@
  *  limitations under the License.
  */
 
-.executions-date-picker {
+.ant-picker-range.executions-date-picker {
+  padding: 0 6px 0 0;
+  max-width: 200px;
   .ant-picker-range-separator {
     display: none;
   }
   .ant-picker-clear {
-    right: 4px;
+    right: -6px;
+  }
+
+  .ant-picker-active-bar {
+    margin-left: 0;
+    width: 85px !important;
   }
 }
 
 .range-picker-button-width {
-  @apply delay-100;
   max-width: 130px;
   position: relative;
 }
 
 .range-picker-button {
   padding: 0px 8px;
+
+  .date-container {
+    display: inline-flex;
+  }
 }

openmetadata-ui/src/main/resources/ui/src/components/Settings/Users/UsersProfile/UserProfileDetails/UserProfileDetails.component.tsx

@@ -241,22 +241,21 @@ const UserProfileDetails = ({
 
   const userDomainRender = useMemo(
     () => (
-      <Space align="center">
+      <div className="d-flex items-center gap-2">
         <Typography.Text
           className="text-grey-muted"
           data-testid="user-domain-label">{`${t(
           'label.domain'
         )} :`}</Typography.Text>
-        <Space align="center">
-          <DomainLabel
-            domain={userData?.domain}
-            entityFqn={userData.fullyQualifiedName ?? ''}
-            entityId={userData.id ?? ''}
-            entityType={EntityType.USER}
-            hasPermission={false}
-          />
-        </Space>
-      </Space>
+        <DomainLabel
+          domain={userData?.domain}
+          entityFqn={userData.fullyQualifiedName ?? ''}
+          entityId={userData.id ?? ''}
+          entityType={EntityType.USER}
+          hasPermission={false}
+          textClassName="text-sm text-grey-muted"
+        />
+      </div>
     ),
     [userData.domain]
   );

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

@@ -10,7 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
-import { Space, Typography } from 'antd';
+import { Typography } from 'antd';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { compare } from 'fast-json-patch';
@@ -41,6 +41,7 @@ export const DomainLabel = ({
   entityType,
   entityFqn,
   entityId,
+  textClassName,
   showDomainHeading = false,
 }: DomainLabelProps) => {
   const { t } = useTranslation();
@@ -74,7 +75,7 @@ export const DomainLabel = ({
         showErrorToast(err as AxiosError);
       }
     },
-    [entityType, entityFqn, afterDomainUpdateAction]
+    [entityType, entityId, entityFqn, afterDomainUpdateAction]
   );
 
   useEffect(() => {
@@ -87,7 +88,8 @@ export const DomainLabel = ({
         <Link
           className={classNames(
             'text-primary no-underline domain-link',
-            !showDomainHeading ? 'font-medium text-xs' : ''
+            { 'font-medium text-xs': !showDomainHeading },
+            textClassName
           )}
           data-testid="domain-link"
           to={getDomainPath(activeDomain?.fullyQualifiedName)}>
@@ -101,14 +103,15 @@ export const DomainLabel = ({
         <Typography.Text
           className={classNames(
             'domain-link',
-            !showDomainHeading ? 'font-medium text-xs' : ''
+            { 'font-medium text-xs': !showDomainHeading },
+            textClassName
           )}
           data-testid="no-domain-text">
           {t('label.no-entity', { entity: t('label.domain') })}
         </Typography.Text>
       );
     }
-  }, [activeDomain, domainDisplayName]);
+  }, [activeDomain, domainDisplayName, showDomainHeading, textClassName]);
 
   const selectableList = useMemo(() => {
     return (
@@ -120,7 +123,7 @@ export const DomainLabel = ({
         />
       )
     );
-  }, [hasPermission, activeDomain]);
+  }, [hasPermission, activeDomain, handleDomainSave]);
 
   const label = useMemo(() => {
     if (showDomainHeading) {
@@ -133,7 +136,7 @@ export const DomainLabel = ({
             {selectableList}
           </div>
 
-          <Space>
+          <div className="d-flex items-center gap-1">
             <DomainIcon
               className="d-flex"
               color={DE_ACTIVE_COLOR}
@@ -142,13 +145,15 @@ export const DomainLabel = ({
               width={16}
             />
             {domainLink}
-          </Space>
+          </div>
         </>
       );
     }
 
     return (
-      <Space data-testid="header-domain-container">
+      <div
+        className="d-flex items-center gap-1"
+        data-testid="header-domain-container">
         <Typography.Text className="self-center text-xs whitespace-nowrap">
           <DomainIcon
             className="d-flex"
@@ -161,7 +166,7 @@ export const DomainLabel = ({
         {domainLink}
 
         {selectableList}
-      </Space>
+      </div>
     );
   }, [activeDomain, hasPermission, selectableList]);
 

openmetadata-ui/src/main/resources/ui/src/components/common/DomainLabel/DomainLabel.interface.ts

@@ -23,5 +23,6 @@ export type DomainLabelProps = {
   entityType: EntityType;
   entityFqn: string;
   entityId: string;
+  textClassName?: string;
   showDomainHeading?: boolean;
 };

openmetadata-ui/src/main/resources/ui/src/utils/ApplicationUtils.test.ts

@@ -11,6 +11,7 @@
  *  limitations under the License.
  */
 
+import { upperFirst } from 'lodash';
 import { getEntityStatsData } from './ApplicationUtils';
 import {
   MOCK_APPLICATION_ENTITY_STATS,
@@ -21,6 +22,11 @@ describe('ApplicationUtils tests', () => {
   it('getEntityStatsData should return stats data in array', () => {
     const resultData = getEntityStatsData(MOCK_APPLICATION_ENTITY_STATS);
 
-    expect(resultData).toEqual(MOCK_APPLICATION_ENTITY_STATS_DATA);
+    expect(resultData).toEqual(
+      MOCK_APPLICATION_ENTITY_STATS_DATA.map((data) => ({
+        ...data,
+        name: upperFirst(data.name),
+      }))
+    );
   });
 });

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

@@ -10,6 +10,7 @@
  *  See the License for the specific language governing permissions and
  *  limitations under the License.
  */
+import { upperFirst } from 'lodash';
 import { StatusType } from '../components/common/StatusBadge/StatusBadge.interface';
 import {
   EntityStats,
@@ -54,7 +55,7 @@ export const getStatusFromPipelineState = (status: PipelineState) => {
 
 export const getEntityStatsData = (data: EntityStats): EntityStatsData[] => {
   return Object.keys(data).map((key) => ({
-    name: key,
+    name: upperFirst(key),
     ...data[key as EntityTypeSearchIndex],
   }));
 };