Fixed UI feedback (#20517)

* fixed github release issues

* fixed comments and ui feedbakcs

* fixed edit icon

* fixed test cases

* fixed quality changes

* fixed coomments

* fixed comments

---------

Co-authored-by: Ashish Gupta <ashish@getcollate.io>

openmetadata-ui/src/main/resources/ui/playwright/e2e/Pages/Glossary.spec.ts

@@ -1237,8 +1237,8 @@ test.describe('Glossary tests', () => {
 
       expect(columnText).toEqual(
         columnText.includes('Actions')
-          ? ['Terms', 'Description', 'Status', 'Owners', 'Actions']
-          : ['Terms', 'Description', 'Status', 'Owners']
+          ? ['Terms', 'Description', 'Owners', 'Status', 'Actions']
+          : ['Terms', 'Description', 'Owners', 'Status']
       );
     } finally {
       await glossaryTerm1.delete(apiContext);

openmetadata-ui/src/main/resources/ui/playwright/utils/entity.ts

@@ -746,7 +746,7 @@ export const followEntity = async (
   await followResponse;
 
   await expect(page.getByTestId('entity-follow-button')).toContainText(
-    'Following'
+    'Unfollow'
   );
 };
 

openmetadata-ui/src/main/resources/ui/playwright/utils/glossary.ts

@@ -1246,7 +1246,7 @@ export const filterStatus = async (
   const rows = glossaryTermsTable.locator(
     'tbody.ant-table-tbody > tr:not([aria-hidden="true"])'
   );
-  const statusColumnIndex = 3;
+  const statusColumnIndex = 2;
 
   for (let i = 0; i < (await rows.count()); i++) {
     const statusCell = rows

openmetadata-ui/src/main/resources/ui/src/assets/svg/ic-inherit.svg

@@ -1,10 +1,15 @@
-<svg viewBox="0 0 15 15" fill="none" xmlns="http://www.w3.org/2000/svg">
-<g clip-path="url(#clip0_6122_197246)">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M0.625 1.875C0.625 1.18464 1.18464 0.625 1.875 0.625H5.9375C6.62787 0.625 7.1875 1.18464 7.1875 1.875V5.9375C7.1875 6.62787 6.62787 7.1875 5.9375 7.1875H4.375V9.72656C4.375 10.2227 4.77724 10.625 5.27344 10.625H7.8125V9.0625C7.8125 8.37213 8.37213 7.8125 9.0625 7.8125H13.125C13.8154 7.8125 14.375 8.37213 14.375 9.0625V13.125C14.375 13.8154 13.8154 14.375 13.125 14.375H9.0625C8.37213 14.375 7.8125 13.8154 7.8125 13.125V11.5625H5.27344C4.25947 11.5625 3.4375 10.7405 3.4375 9.72656V7.1875H1.875C1.18464 7.1875 0.625 6.62787 0.625 5.9375V1.875ZM1.875 1.5625C1.70241 1.5625 1.5625 1.70241 1.5625 1.875V5.9375C1.5625 6.11009 1.70241 6.25 1.875 6.25H5.9375C6.11009 6.25 6.25 6.11009 6.25 5.9375V1.875C6.25 1.70241 6.11009 1.5625 5.9375 1.5625H1.875ZM9.0625 8.75C8.88994 8.75 8.75 8.88994 8.75 9.0625V13.125C8.75 13.2976 8.88994 13.4375 9.0625 13.4375H13.125C13.2976 13.4375 13.4375 13.2976 13.4375 13.125V9.0625C13.4375 8.88994 13.2976 8.75 13.125 8.75H9.0625Z" fill="currentColor"/>
+<svg viewBox="0 0 8 8" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_9916_46685)">
+<mask id="mask0_9916_46685" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="0" y="0" width="8" height="8">
+<path d="M7.20005 0.799988H0.800049V7.19999H7.20005V0.799988Z" fill="white"/>
+</mask>
+<g mask="url(#mask0_9916_46685)">
+<path d="M1.59998 1.01668C1.27782 1.01668 1.01665 1.27785 1.01665 1.60001V3.33335C1.01665 3.65552 1.27782 3.91668 1.59998 3.91668H2.21665V4.95001C2.21665 5.41024 2.58974 5.78335 3.04998 5.78335H4.08332V6.40001C4.08332 6.7222 4.34448 6.98335 4.66665 6.98335H6.39998C6.72217 6.98335 6.98332 6.7222 6.98332 6.40001V4.66668C6.98332 4.34451 6.72217 4.08335 6.39998 4.08335H4.66665C4.34448 4.08335 4.08332 4.34451 4.08332 4.66668V5.28335H3.04998C2.86589 5.28335 2.71665 5.13409 2.71665 4.95001V3.91668H3.33332C3.65549 3.91668 3.91665 3.65552 3.91665 3.33335V1.60001C3.91665 1.27785 3.65549 1.01668 3.33332 1.01668H1.59998ZM1.51665 1.60001C1.51665 1.55399 1.55396 1.51668 1.59998 1.51668H3.33332C3.37934 1.51668 3.41665 1.55399 3.41665 1.60001V3.33335C3.41665 3.37937 3.37934 3.41668 3.33332 3.41668H1.59998C1.55396 3.41668 1.51665 3.37937 1.51665 3.33335V1.60001ZM4.58332 4.66668C4.58332 4.62067 4.62064 4.58335 4.66665 4.58335H6.39998C6.44601 4.58335 6.48332 4.62067 6.48332 4.66668V6.40001C6.48332 6.44604 6.44601 6.48335 6.39998 6.48335H4.66665C4.62063 6.48335 4.58332 6.44604 4.58332 6.40001V4.66668Z" fill="#175CD3" stroke="#175CD3" stroke-width="0.1"/>
+</g>
 </g>
 <defs>
-<clipPath id="clip0_6122_197246">
-<rect width="15" height="15" fill="white"/>
+<clipPath id="clip0_9916_46685">
+<rect width="8" height="8" fill="white"/>
 </clipPath>
 </defs>
-</svg>
+</svg>

openmetadata-ui/src/main/resources/ui/src/components/DataAssets/DomainLabelV2/DomainLabelV2.tsx

@@ -174,7 +174,7 @@ export const DomainLabelV2 = <
         <Card
           className="new-header-border-card"
           title={
-            <div className="d-flex items-center gap-2">
+            <div className="d-flex items-center gap-1">
               <Typography.Text className="text-sm font-medium">
                 {t('label.domain')}
               </Typography.Text>

openmetadata-ui/src/main/resources/ui/src/components/Entity/EntityHeaderTitle/EntityHeaderTitle.component.tsx

@@ -79,6 +79,30 @@ const EntityHeaderTitle = ({
     [showOnlyDisplayName, displayName, name]
   );
 
+  const badges = useMemo(
+    () => (
+      <>
+        {isDisabled && (
+          <Badge
+            className="m-l-xs badge-grey"
+            count={t('label.disabled')}
+            data-testid="disabled"
+          />
+        )}
+        {deleted && (
+          <Col className="text-xs" flex="100px">
+            <span className="deleted-badge-button" data-testid="deleted-badge">
+              <ExclamationCircleFilled className="m-r-xss font-medium text-xs" />
+              {t('label.deleted')}
+            </span>
+          </Col>
+        )}
+        {badge && <Col>{badge}</Col>}
+      </>
+    ),
+    [isDisabled, deleted, badge]
+  );
+
   const content = (
     <Row
       align="middle"
@@ -88,23 +112,28 @@ const EntityHeaderTitle = ({
       wrap={false}>
       {icon && <Col className="flex-center">{icon}</Col>}
       <Col
-        className={`d-flex flex-col gap-2 ${
-          deleted || badge ? 'w-max-full-140' : 'entity-header-content'
-        }`}>
+        className={classNames('d-flex flex-col gap-2', {
+          'w-max-full-140': deleted || badge,
+        })}>
         {/* If we do not have displayName name only be shown in the bold from the below code */}
         {!isEmpty(displayName) && showName ? (
-          <Tooltip placement="bottom" title={stringToHTML(displayName ?? name)}>
-            <Typography.Text
-              className={classNames(
-                'entity-header-name',
-                nameClassName,
-                'm-b-0 d-block display-xs font-semibold'
-              )}
-              data-testid="entity-header-display-name"
-              ellipsis={{ tooltip: true }}>
-              {stringToHTML(displayName ?? name)}
-            </Typography.Text>
-          </Tooltip>
+          <div className="d-flex items-center gap-2">
+            <Tooltip
+              placement="bottom"
+              title={stringToHTML(displayName ?? name)}>
+              <Typography.Text
+                className={classNames(
+                  'entity-header-name',
+                  nameClassName,
+                  'm-b-0 d-block display-xs font-semibold'
+                )}
+                data-testid="entity-header-display-name"
+                ellipsis={{ tooltip: true }}>
+                {stringToHTML(displayName ?? name)}
+              </Typography.Text>
+            </Tooltip>
+            {badges}
+          </div>
         ) : null}
 
         <div
@@ -155,7 +184,7 @@ const EntityHeaderTitle = ({
                   loading={isFollowingLoading}
                   onClick={handleFollowingClick}>
                   <Typography.Text>
-                    {isFollowing ? 'Following' : 'Follow'}
+                    {t(`label.${isFollowing ? 'un-follow' : 'follow'}`)}
                   </Typography.Text>
                 </Button>
               </Tooltip>
@@ -163,28 +192,13 @@ const EntityHeaderTitle = ({
         </div>
       </Col>
 
-      {isDisabled && (
-        <Badge
-          className="m-l-xs badge-grey"
-          count={t('label.disabled')}
-          data-testid="disabled"
-        />
-      )}
-      {deleted && (
-        <Col className="text-xs" flex="100px">
-          <span className="deleted-badge-button" data-testid="deleted-badge">
-            <ExclamationCircleFilled className="m-r-xss font-medium text-xs" />
-            {t('label.deleted')}
-          </span>
-        </Col>
-      )}
-      {badge && <Col>{badge}</Col>}
+      {isEmpty(displayName) ? badges : null}
     </Row>
   );
 
   return link && !isTourRoute ? (
     <Link
-      className="no-underline d-inline-block w-full"
+      className="no-underline d-inline-block w-40  "
       data-testid="entity-link"
       target={openEntityInNewPage ? '_blank' : '_self'}
       to={link}>

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

@@ -43,7 +43,7 @@ function CommonEntitySummaryInfo({
                 <>
                   <Col span={8}>
                     <Typography.Text
-                      className="summary-item-key"
+                      className="summary-item-key font-semibold"
                       data-testid={`${info.name}-label`}>
                       {info.name}
                     </Typography.Text>

openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryTermTab/GlossaryTermTab.component.tsx

@@ -419,7 +419,6 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
           );
         },
       },
-      ...ownerTableObject<ModifiedGlossaryTerm>(),
       {
         title: t('label.status'),
         dataIndex: GLOSSARY_TERM_TABLE_COLUMNS_KEYS.STATUS,
@@ -458,6 +457,7 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
         },
         onFilter: (value, record) => record.status === value,
       },
+      ...ownerTableObject<ModifiedGlossaryTerm>(),
     ];
     if (permissions.Create) {
       data.push({
@@ -667,8 +667,10 @@ const GlossaryTermTab = ({ isGlossary, className }: GlossaryTermTabProps) => {
           trigger={['click']}
           onOpenChange={setIsStatusDropdownVisible}>
           <Button
-            className="custom-status-dropdown-btn"
-            data-testid="glossary-status-dropdown">
+            className="text-primary"
+            data-testid="glossary-status-dropdown"
+            size="small"
+            type="text">
             <Space>
               {t('label.status')}
               <DownOutlined />

openmetadata-ui/src/main/resources/ui/src/components/Settings/Bot/BotDetails/BotDetails.component.tsx

@@ -28,7 +28,11 @@ import React, { FC, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as IconBotProfile } from '../../../../assets/svg/bot-profile.svg';
 import { ReactComponent as EditIcon } from '../../../../assets/svg/edit-new.svg';
-import { PAGE_SIZE_LARGE, TERM_ADMIN } from '../../../../constants/constants';
+import {
+  DE_ACTIVE_COLOR,
+  PAGE_SIZE_LARGE,
+  TERM_ADMIN,
+} from '../../../../constants/constants';
 import { GlobalSettingOptions } from '../../../../constants/GlobalSettings.constants';
 import { useLimitStore } from '../../../../context/LimitsProvider/useLimitsStore';
 import { EntityType } from '../../../../enums/entity.enum';
@@ -186,7 +190,9 @@ const BotDetails: FC<BotsDetailProps> = ({
                             <Button
                               className="p-0"
                               data-testid="edit-displayName"
-                              icon={<EditIcon width={16} />}
+                              icon={
+                                <EditIcon color={DE_ACTIVE_COLOR} width={16} />
+                              }
                               type="text"
                               onClick={() => setIsDisplayNameEdit(true)}
                             />

openmetadata-ui/src/main/resources/ui/src/components/Tag/TagsContainerV2/TagsContainerV2.tsx

@@ -280,7 +280,6 @@ const TagsContainerV2 = ({
               {!isEmpty(tags?.[tagType]) && !isEditTags && (
                 <EditIconButton
                   data-testid="edit-button"
-                  newLook={newLook}
                   size="small"
                   title={t('label.edit-entity', {
                     entity:

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

@@ -132,10 +132,11 @@ const DomainSelectableList = ({
                 : NO_PERMISSION_FOR_ACTION
             }>
             <Button
-              className="d-flex align-center justify-center "
+              className="flex-center"
               data-testid="add-domain"
               disabled={!hasPermission}
-              icon={<EditIcon color={DE_ACTIVE_COLOR} width="12px" />}
+              icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
+              size="small"
               type="text"
             />
           </Tooltip>

openmetadata-ui/src/main/resources/ui/src/components/common/DomainSelectableList/domain-select-dropdown.less

@@ -41,11 +41,22 @@
     color: @text-color;
   }
 }
-.remove-button-default-styling {
-  .ant-btn-icon-only {
-    border: 1px solid @border-light;
-    border-radius: 4px;
-    width: 20px;
-    height: 20px;
+.data-assets-header-container,
+.teams-info-header-container {
+  .remove-button-default-styling {
+    .ant-btn-icon-only {
+      border: 1px solid @border-light;
+      background-color: @background-color;
+      border-radius: 4px;
+      width: 20px;
+      height: 20px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      svg {
+        font-size: 12px;
+        width: 12px;
+      }
+    }
   }
 }

openmetadata-ui/src/main/resources/ui/src/components/common/IconButtons/EditIconButton.tsx

@@ -40,10 +40,11 @@ export const EditIconButton = ({
           {...props}
         />
       ) : (
-        <Icon
+        <Button
           className={className}
-          component={EditIcon}
-          style={{ color: DE_ACTIVE_COLOR }}
+          icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
+          size="small"
+          type="text"
           {...props}
         />
       )}

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/OwnerAvatar.tsx

@@ -22,11 +22,13 @@ import './owner-avtar.less';
 interface OwnerAvatarProps {
   owner: EntityReference;
   isCompactView: boolean;
+  inheritedIcon?: React.ReactNode;
 }
 
 export const OwnerAvatar: React.FC<OwnerAvatarProps> = ({
   owner,
   isCompactView,
+  inheritedIcon,
 }) => {
   const displayName = getEntityName(owner);
 
@@ -55,6 +57,12 @@ export const OwnerAvatar: React.FC<OwnerAvatarProps> = ({
         type="circle"
         width={isCompactView ? '18' : '32'}
       />
+
+      {inheritedIcon && !isCompactView && (
+        <div className="inherited-icon-styling flex-center">
+          {inheritedIcon}
+        </div>
+      )}
     </div>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerAvtar/owner-avtar.less

@@ -15,3 +15,39 @@
 .anticon.owner-team-icon {
   color: @grey-700;
 }
+
+.owner-avatar-icon {
+  position: relative;
+
+  .inherited-icon-styling {
+    position: absolute;
+    bottom: -4px;
+    right: -4px;
+    background-color: white;
+    border-radius: 50%;
+
+    width: 16px;
+    height: 16px;
+    z-index: 1;
+    border: 1px solid @blue-9;
+    svg {
+      color: @blue-9;
+    }
+  }
+}
+
+// Styling for the avatar group layout (for the overlapping effect)
+.avatar-group {
+  display: flex;
+
+  .owner-avatar-icon {
+    margin-right: -8px;
+
+    border-radius: 50%;
+    overflow: hidden;
+
+    &:hover {
+      z-index: 2;
+    }
+  }
+}

openmetadata-ui/src/main/resources/ui/src/components/common/OwnerItem/OwnerItem.tsx

@@ -45,7 +45,7 @@ export const OwnerItem: React.FC<OwnerItemProps> = ({
       title={t('label.inherited-entity', {
         entity: t('label.owner-plural'),
       })}>
-      <InheritIcon className="inherit-icon cursor-pointer" width={14} />
+      <InheritIcon className="inherit-icon cursor-pointer" width={8} />
     </Tooltip>
   ) : null;
 
@@ -58,7 +58,11 @@ export const OwnerItem: React.FC<OwnerItemProps> = ({
       {!isCompactView ? (
         <UserPopOverCard userName={owner.name ?? ''}>
           <Link className="d-flex" data-testid="owner-link" to={ownerPath}>
-            <OwnerAvatar isCompactView={isCompactView} owner={owner} />
+            <OwnerAvatar
+              inheritedIcon={inheritedIcon}
+              isCompactView={isCompactView}
+              owner={owner}
+            />
           </Link>
         </UserPopOverCard>
       ) : (
@@ -77,9 +81,9 @@ export const OwnerItem: React.FC<OwnerItemProps> = ({
               {ownerDisplayName ?? displayName}
             </span>
           </Link>
+          {inheritedIcon && <div className="d-flex">{inheritedIcon}</div>}
         </>
       )}
-      {inheritedIcon && <div className="d-flex">{inheritedIcon}</div>}
     </div>
   );
 };

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

@@ -62,9 +62,7 @@ export const OwnerLabel = ({
                 multiple={multiple}
                 owner={owners}
                 tooltipText={tooltipText}
-                onUpdate={(updatedUsers) => {
-                  onUpdate(updatedUsers);
-                }}
+                onUpdate={onUpdate}
               />
             )}
           </div>
@@ -128,9 +126,10 @@ export const OwnerLabel = ({
 
           {/* Owner avatars list */}
           <div
-            className={`d-flex items-center flex-wrap ${
+            className={classNames(
+              'd-flex flex-wrap items-center',
               isCompactView && 'gap-2'
-            }`}>
+            )}>
             {visibleOwners.map((owner, index) => (
               <OwnerItem
                 className={className}
@@ -163,9 +162,7 @@ export const OwnerLabel = ({
             multiple={multiple}
             owner={owners}
             tooltipText={tooltipText}
-            onUpdate={(updatedUsers) => {
-              onUpdate(updatedUsers);
-            }}
+            onUpdate={onUpdate}
           />
         )}
       </div>

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

@@ -17,7 +17,7 @@ import { isArray, isNil, toLower } from 'lodash';
 import React, { useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { ReactComponent as EditIcon } from '../../../assets/svg/edit-new.svg';
-import { TERM_ADMIN } from '../../../constants/constants';
+import { DE_ACTIVE_COLOR, TERM_ADMIN } from '../../../constants/constants';
 import { useAuth } from '../../../hooks/authHooks';
 import { getEntityName } from '../../../utils/EntityUtils';
 import RolesElement from '../RolesElement/RolesElement.component';
@@ -93,7 +93,7 @@ const RolesCard = ({
               <Button
                 className="m-l-xs"
                 data-testid="edit-roles"
-                icon={<EditIcon width={16} />}
+                icon={<EditIcon color={DE_ACTIVE_COLOR} width={16} />}
                 type="text"
                 onClick={() => setIsRolesEdit(true)}
               />

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

@@ -182,8 +182,11 @@ export const SelectableList = ({
   const handleUpdate = useCallback(
     async (updateItems: EntityReference[]) => {
       setUpdating(true);
-      await onUpdate?.(updateItems);
-      setUpdating(false);
+      try {
+        await onUpdate?.(updateItems);
+      } finally {
+        setUpdating(false);
+      }
     },
     [setUpdating, onUpdate]
   );

openmetadata-ui/src/main/resources/ui/src/components/common/Table/Table.tsx

@@ -237,7 +237,7 @@ const Table = <T extends Record<string, unknown>>(
               {!isFullViewTable && (
                 <DndProvider backend={HTML5Backend}>
                   <Dropdown
-                    className="custom-column-dropdown-menu"
+                    className="custom-column-dropdown-menu text-primary"
                     menu={menu}
                     open={isDropdownVisible}
                     placement="bottomRight"
@@ -245,7 +245,9 @@ const Table = <T extends Record<string, unknown>>(
                     onOpenChange={setIsDropdownVisible}>
                     <Button
                       data-testid="column-dropdown"
-                      icon={<Icon component={ColumnIcon} />}>
+                      icon={<Icon component={ColumnIcon} />}
+                      size="small"
+                      type="text">
                       {t('label.column-plural')}
                     </Button>
                   </Dropdown>

openmetadata-ui/src/main/resources/ui/src/components/common/Table/table.less

@@ -33,7 +33,6 @@
 
   .custom-column-dropdown-menu {
     margin-right: 10px;
-    padding: 0;
     border: none;
     color: @primary-color;
 

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

@@ -159,8 +159,11 @@ export const UserTeamSelectableList = ({
       updateData = updateItems;
     }
 
-    await onUpdate(updateData);
-    setPopupVisible(false);
+    try {
+      await onUpdate(updateData);
+    } finally {
+      setPopupVisible(false);
+    }
   };
 
   // Fetch and store count for Users tab

openmetadata-ui/src/main/resources/ui/src/generated/entity/services/connections/database/snowflakeConnection.ts

@@ -44,15 +44,15 @@ export interface SnowflakeConnection {
      * Regex to only include/exclude databases that matches the pattern.
      */
     databaseFilterPattern?: DefaultDatabaseFilterPattern;
+    /**
+     * Optional configuration for ingestion of streams, By default, it will skip the streams.
+     */
+    includeStreams?: boolean;
     /**
      * Optional configuration for ingestion of TRANSIENT tables, By default, it will skip the
      * TRANSIENT tables.
      */
     includeTransientTables?: boolean;
-    /**
-     * Optional configuration for ingestion of streams, By default, it will skip the streams.
-     */
-    includeStreams?: boolean;
     /**
      * Password to connect to Snowflake.
      */

openmetadata-ui/src/main/resources/ui/src/pages/AlertDetailsPage/AlertDetailsPage.tsx

@@ -32,7 +32,7 @@ import { OwnerLabel } from '../../components/common/OwnerLabel/OwnerLabel.compon
 import ResizablePanels from '../../components/common/ResizablePanels/ResizablePanels';
 import TitleBreadcrumb from '../../components/common/TitleBreadcrumb/TitleBreadcrumb.component';
 import EntityHeaderTitle from '../../components/Entity/EntityHeaderTitle/EntityHeaderTitle.component';
-import { ROUTES } from '../../constants/constants';
+import { DE_ACTIVE_COLOR, ROUTES } from '../../constants/constants';
 import { GlobalSettingsMenuCategory } from '../../constants/GlobalSettings.constants';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
 import {
@@ -408,7 +408,13 @@ function AlertDetailsPage({
                             <Button
                               className="flex flex-center"
                               data-testid="edit-button"
-                              icon={<EditIcon height={16} width={16} />}
+                              icon={
+                                <EditIcon
+                                  color={DE_ACTIVE_COLOR}
+                                  height={16}
+                                  width={16}
+                                />
+                              }
                               onClick={handleAlertEdit}
                             />
                           </Tooltip>

openmetadata-ui/src/main/resources/ui/src/pages/NotificationListPage/NotificationListPage.tsx

@@ -27,7 +27,10 @@ import TitleBreadcrumb from '../../components/common/TitleBreadcrumb/TitleBreadc
 import { TitleBreadcrumbProps } from '../../components/common/TitleBreadcrumb/TitleBreadcrumb.interface';
 import PageHeader from '../../components/PageHeader/PageHeader.component';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
-import { NO_DATA_PLACEHOLDER } from '../../constants/constants';
+import {
+  DE_ACTIVE_COLOR,
+  NO_DATA_PLACEHOLDER,
+} from '../../constants/constants';
 import { ALERTS_DOCS } from '../../constants/docs.constants';
 import {
   GlobalSettingOptions,
@@ -277,7 +280,7 @@ const NotificationListPage = () => {
                       className="flex flex-center"
                       data-testid={`alert-edit-${record.name}`}
                       disabled={record.provider === ProviderType.System}
-                      icon={<EditIcon height={16} />}
+                      icon={<EditIcon color={DE_ACTIVE_COLOR} width="14px" />}
                       type="text"
                     />
                   </Link>

openmetadata-ui/src/main/resources/ui/src/pages/ObservabilityAlertsPage/ObservabilityAlertsPage.tsx

@@ -25,7 +25,11 @@ import RichTextEditorPreviewerNew from '../../components/common/RichTextEditor/R
 import Table from '../../components/common/Table/Table';
 import PageHeader from '../../components/PageHeader/PageHeader.component';
 import PageLayoutV1 from '../../components/PageLayoutV1/PageLayoutV1';
-import { NO_DATA_PLACEHOLDER, ROUTES } from '../../constants/constants';
+import {
+  DE_ACTIVE_COLOR,
+  NO_DATA_PLACEHOLDER,
+  ROUTES,
+} from '../../constants/constants';
 import { ALERTS_DOCS } from '../../constants/docs.constants';
 import { useLimitStore } from '../../context/LimitsProvider/useLimitsStore';
 import { usePermissionProvider } from '../../context/PermissionProvider/PermissionProvider';
@@ -256,7 +260,7 @@ const ObservabilityAlertsPage = () => {
                     <Button
                       className="flex flex-center"
                       data-testid={`alert-edit-${record.name}`}
-                      icon={<EditIcon width={16} />}
+                      icon={<EditIcon color={DE_ACTIVE_COLOR} width="16px" />}
                       type="text"
                     />
                   </Link>

openmetadata-ui/src/main/resources/ui/src/styles/components/pagination.less

@@ -15,7 +15,6 @@
 .pagination-container,
 .ant-pagination {
   .ant-pagination-item {
-    width: 40px;
     height: 40px;
     padding: 4px;
     border: none;
@@ -43,6 +42,7 @@
 
   .ant-pagination-next,
   .ant-pagination-prev {
+    margin-right: 0px;
     button {
       border: none;
     }

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

@@ -361,7 +361,7 @@ describe('Glossary Utils - glossaryTermTableColumnsWidth', () => {
 
     expect(columnWidthObject).toEqual({
       description: 210,
-      name: 400,
+      name: 200,
       owners: 170,
       reviewers: 330,
       status: 200,
@@ -374,7 +374,7 @@ describe('Glossary Utils - glossaryTermTableColumnsWidth', () => {
 
     expect(columnWidthObject).toEqual({
       description: 330,
-      name: 400,
+      name: 200,
       owners: 170,
       reviewers: 330,
       status: 200,

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

@@ -448,7 +448,7 @@ export const glossaryTermTableColumnsWidth = (
   havingCreatePermission: boolean
 ) => {
   return {
-    name: calculatePercentageFromValue(tableWidth, 40),
+    name: calculatePercentageFromValue(tableWidth, 20),
     description: calculatePercentageFromValue(
       tableWidth,
       havingCreatePermission ? 21 : 33