fix(ui): updated icon to be consistent with glossary (#11101)

* fix(ui): updated icon to be consistent with glossary

* remove primery class

* addressing comments

openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx

@@ -12,6 +12,7 @@
  */
 
 import { CheckOutlined, CloseOutlined } from '@ant-design/icons';
+import { ExtraInfo } from 'Models';
 import {
   Button,
   Col,
@@ -34,7 +35,6 @@ import { ERROR_PLACEHOLDER_TYPE } from 'enums/common.enum';
 import { SearchIndex } from 'enums/search.enum';
 import { compare } from 'fast-json-patch';
 import { cloneDeep, isEmpty, isUndefined, orderBy, uniqueId } from 'lodash';
-import { ExtraInfo } from 'Models';
 import AddAttributeModal from 'pages/RolesPage/AddAttributeModal/AddAttributeModal';
 import React, {
   Fragment,
@@ -55,10 +55,10 @@ import { ReactComponent as IconDropdown } from '../../assets/svg/menu.svg';
 import { ReactComponent as IconOpenLock } from '../../assets/svg/open-lock.svg';
 import { ReactComponent as IconShowPassword } from '../../assets/svg/show-password.svg';
 import {
-  getTeamAndUserDetailsPath,
-  getUserPath,
   LIST_SIZE,
   PAGE_SIZE_MEDIUM,
+  getTeamAndUserDetailsPath,
+  getUserPath,
 } from '../../constants/constants';
 import {
   POLICY_DOCS,
@@ -70,8 +70,8 @@ import { OwnerType } from '../../enums/user.enum';
 import { Operation } from '../../generated/entity/policies/policy';
 import { Team, TeamType } from '../../generated/entity/teams/team';
 import {
-  EntityReference as UserTeams,
   User,
+  EntityReference as UserTeams,
 } from '../../generated/entity/teams/user';
 import { EntityReference } from '../../generated/type/entityReference';
 import { Paging } from '../../generated/type/paging';
@@ -83,8 +83,8 @@ import {
 import { hasEditAccess } from '../../utils/CommonUtils';
 import { filterEntityAssets, getEntityName } from '../../utils/EntityUtils';
 import {
-  checkPermission,
   DEFAULT_ENTITY_PERMISSION,
+  checkPermission,
 } from '../../utils/PermissionsUtils';
 import { getTeamsWithFqnPath } from '../../utils/RouterUtils';
 import {
@@ -92,15 +92,6 @@ import {
   getDeleteMessagePostFix,
 } from '../../utils/TeamUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
-import Description from '../common/description/Description';
-import ManageButton from '../common/entityPageInfo/ManageButton/ManageButton';
-import EntitySummaryDetails from '../common/EntitySummaryDetails/EntitySummaryDetails';
-import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
-import NextPrevious from '../common/next-previous/NextPrevious';
-import Searchbar from '../common/searchbar/Searchbar';
-import TabsPane from '../common/TabsPane/TabsPane';
-import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
-import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface';
 import Loader from '../Loader/Loader';
 import ConfirmationModal from '../Modals/ConfirmationModal/ConfirmationModal';
 import { usePermissionProvider } from '../PermissionProvider/PermissionProvider';
@@ -109,6 +100,15 @@ import {
   ResourceEntity,
 } from '../PermissionProvider/PermissionProvider.interface';
 import { commonUserDetailColumns } from '../Users/Users.util';
+import EntitySummaryDetails from '../common/EntitySummaryDetails/EntitySummaryDetails';
+import TabsPane from '../common/TabsPane/TabsPane';
+import Description from '../common/description/Description';
+import ManageButton from '../common/entityPageInfo/ManageButton/ManageButton';
+import ErrorPlaceHolder from '../common/error-with-placeholder/ErrorPlaceHolder';
+import NextPrevious from '../common/next-previous/NextPrevious';
+import Searchbar from '../common/searchbar/Searchbar';
+import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
+import { TitleBreadcrumbProps } from '../common/title-breadcrumb/title-breadcrumb.interface';
 import ListEntities from './RolesAndPoliciesList';
 import { getTabs } from './TeamDetailsV1.utils';
 import TeamHierarchy from './TeamHierarchy';
@@ -1042,7 +1042,6 @@ const TeamDetailsV1 = ({
                     isRecursiveDelete
                     afterDeleteAction={afterDeleteAction}
                     allowSoftDelete={!currentTeam.deleted}
-                    buttonClassName="tw-p-4"
                     canDelete={entityPermissions.EditAll}
                     entityId={currentTeam.id}
                     entityName={
@@ -1071,13 +1070,11 @@ const TeamDetailsV1 = ({
                 trigger={['click']}
                 onOpenChange={setShowActions}>
                 <Button
-                  className="manage-dropdown-button"
+                  className="flex-center px-1.5"
                   data-testid="teams-dropdown"
-                  icon={
-                    <IconDropdown className="text-primary self-center manage-dropdown-icon" />
-                  }
-                  size="small"
-                />
+                  type="default">
+                  <IconDropdown className="self-center manage-dropdown-icon" />
+                </Button>
               </Dropdown>
             )}
           </div>

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.test.tsx

@@ -302,12 +302,11 @@ describe('Test EntityPageInfo component', () => {
 
     expect(followButton).toBeInTheDocument();
 
-    fireEvent.click(
-      followButton,
-      new MouseEvent('click', { bubbles: true, cancelable: true })
-    );
+    await act(async () => {
+      fireEvent.click(followButton);
+    });
 
-    expect(followHandler).toHaveBeenCalled();
+    expect(mockEntityInfoProp.followHandler).toHaveBeenCalled();
   });
 
   it('Should render all the extra info', async () => {

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/EntityPageInfo.tsx

@@ -11,16 +11,17 @@
  *  limitations under the License.
  */
 
-import { StarFilled } from '@ant-design/icons';
-import { Button, Popover, Space, Tooltip } from 'antd';
+import { StarOutlined } from '@ant-design/icons';
+import { Button, Dropdown, Popover, Space, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import { AxiosError } from 'axios';
 import classNames from 'classnames';
 import { EntityHeader } from 'components/Entity/EntityHeader/EntityHeader.component';
+import VersionButton from 'components/VersionButton/VersionButton.component';
 import { t } from 'i18next';
 import { cloneDeep, isEmpty, isUndefined, toString } from 'lodash';
 import { EntityTags, ExtraInfo, TagOption } from 'Models';
-import React, { Fragment, useCallback, useEffect, useState } from 'react';
+import React, { Fragment, useCallback, useMemo, useState } from 'react';
 import { useHistory } from 'react-router-dom';
 import { getActiveAnnouncement } from 'rest/feedsAPI';
 import { sortTagsCaseInsensitive } from 'utils/CommonUtils';
@@ -40,7 +41,6 @@ import { useAfterMount } from '../../../hooks/useAfterMount';
 import { EntityFieldThreads } from '../../../interface/feed.interface';
 import { ANNOUNCEMENT_ENTITIES } from '../../../utils/AnnouncementsUtils';
 import { getEntityFeedLink } from '../../../utils/EntityUtils';
-import SVGIcons from '../../../utils/SvgUtils';
 import { fetchTagsAndGlossaryTerms } from '../../../utils/TagsUtils';
 import {
   getRequestTagsPath,
@@ -126,8 +126,6 @@ const EntityPageInfo = ({
   const tagThread = entityFieldThreads?.[0];
   const tagTask = entityFieldTasks?.[0];
   const [isEditable, setIsEditable] = useState<boolean>(false);
-  const [entityFollowers, setEntityFollowers] =
-    useState<Array<EntityReference>>(followersList);
   const [isViewMore, setIsViewMore] = useState<boolean>(false);
   const [tagList, setTagList] = useState<Array<TagOption>>([]);
   const [isTagLoading, setIsTagLoading] = useState<boolean>(false);
@@ -179,8 +177,8 @@ const EntityPageInfo = ({
     [tags]
   );
 
-  const getFollowers = () => {
-    const list = cloneDeep(entityFollowers);
+  const entityFollowers = useMemo(() => {
+    const list = cloneDeep(followersList);
 
     return (
       <div
@@ -219,39 +217,7 @@ const EntityPageInfo = ({
         )}
       </div>
     );
-  };
-
-  const getVersionButton = (version: string) => {
-    return (
-      <Button
-        className={classNames(
-          'tw-border tw-border-primary tw-rounded',
-          !isUndefined(isVersionSelected) ? 'tw-text-white' : 'tw-text-primary'
-        )}
-        data-testid="version-button"
-        size="small"
-        type={!isUndefined(isVersionSelected) ? 'primary' : 'default'}
-        onClick={versionHandler}>
-        <Space>
-          <span>
-            <SVGIcons
-              alt="version icon"
-              icon={isVersionSelected ? 'icon-version-white' : 'icon-version'}
-            />
-            <span>{t('label.version-plural')}</span>
-          </span>
-          <span
-            className={classNames(
-              'tw-border-l tw-font-medium tw-cursor-pointer hover:tw-underline tw-pl-1',
-              { 'tw-border-primary': isUndefined(isVersionSelected) }
-            )}
-            data-testid="version-value">
-            {parseFloat(version).toFixed(1)}
-          </span>
-        </Space>
-      </Button>
-    );
-  };
+  }, [followersList]);
 
   const fetchTags = async () => {
     setIsTagLoading(true);
@@ -360,10 +326,6 @@ const EntityPageInfo = ({
     }
   };
 
-  useEffect(() => {
-    setEntityFollowers(followersList);
-  }, [followersList]);
-
   useAfterMount(() => {
     if (ANNOUNCEMENT_ENTITIES.includes(entityType as EntityType)) {
       fetchActiveAnnouncement();
@@ -385,53 +347,50 @@ const EntityPageInfo = ({
         entityType={(entityType as EntityType) ?? EntityType.TABLE}
         extra={
           <Space align="center" id="version-and-follow-section">
-            {!isUndefined(version) ? (
-              <>
-                {!isUndefined(isVersionSelected) ? (
-                  <Tooltip
-                    placement="bottom"
-                    title={
-                      <p className="tw-text-xs">
-                        {t('message.viewing-older-version')}
-                      </p>
-                    }
-                    trigger="hover">
-                    {getVersionButton(toString(version))}
-                  </Tooltip>
-                ) : (
-                  <>{getVersionButton(toString(version))}</>
-                )}
-              </>
-            ) : null}
+            {!isUndefined(version) && (
+              <VersionButton
+                className="m-l-xs px-1.5"
+                selected={Boolean(isVersionSelected)}
+                version={toString(version)}
+                onClick={versionHandler}
+              />
+            )}
             {!isUndefined(isFollowing) ? (
-              <Button
-                className={classNames(
-                  'tw-border tw-border-primary tw-rounded',
-                  isFollowing ? 'tw-text-white' : 'tw-text-primary'
-                )}
-                data-testid="follow-button"
-                size="small"
+              <Dropdown.Button
+                icon={
+                  <Typography.Text
+                    className={classNames(
+                      isFollowing ? 'text-white' : 'text-primary'
+                    )}
+                    data-testid="follower-value">
+                    {followers}
+                  </Typography.Text>
+                }
+                menu={{
+                  items: [
+                    {
+                      key: 'followers',
+                      label: entityFollowers,
+                    },
+                  ],
+                }}
+                trigger={['click']}
                 type={isFollowing ? 'primary' : 'default'}
                 onClick={() => {
                   !deleted && followHandler?.();
                 }}>
-                <Space>
-                  <StarFilled className="tw-text-xs" />
+                <Space
+                  align="center"
+                  className={classNames(
+                    isFollowing ? 'text-white' : 'text-primary'
+                  )}
+                  data-testid="follow-button">
+                  <StarOutlined className="text-xs" />
                   {isFollowing ? t('label.un-follow') : t('label.follow')}
-                  <Popover content={getFollowers()} trigger="click">
-                    <span
-                      className={classNames(
-                        'tw-border-l tw-font-medium tw-cursor-pointer hover:tw-underline tw-pl-1',
-                        { 'tw-border-primary': !isFollowing }
-                      )}
-                      data-testid="follower-value"
-                      onClick={(e) => e.stopPropagation()}>
-                      {followers}
-                    </span>
-                  </Popover>
                 </Space>
-              </Button>
+              </Dropdown.Button>
             ) : null}
+
             {!isVersionSelected && (
               <ManageButton
                 allowSoftDelete={!deleted}
@@ -534,7 +493,7 @@ const EntityPageInfo = ({
         header={t('label.followers-of-entity-name', {
           entityName,
         })}
-        list={entityFollowers}
+        list={followersList}
         visible={isViewMore}
         onCancel={() => setIsViewMore(false)}
       />

openmetadata-ui/src/main/resources/ui/src/components/common/entityPageInfo/ManageButton/ManageButton.tsx

@@ -220,16 +220,12 @@ const ManageButton: FC<Props> = ({
         trigger={['click']}
         onOpenChange={setShowActions}>
         <Button
-          className={classNames(
-            'tw-rounded tw-flex tw-justify-center tw-w-6 manage-dropdown-button',
-            buttonClassName
-          )}
+          className={classNames('flex-center px-1.5', buttonClassName)}
           data-testid="manage-button"
-          size="small"
           title="Manage"
           type="default"
           onClick={() => setShowActions(true)}>
-          <IconDropdown className="text-primary self-center manage-dropdown-icon" />
+          <IconDropdown className="anticon self-center manage-dropdown-icon" />
         </Button>
       </Dropdown>
       {isDelete && (

openmetadata-ui/src/main/resources/ui/src/locale/languages/en-us.json

@@ -876,7 +876,7 @@
     "type-filed-name": "Type {{fieldName}}",
     "type-lowercase": "type",
     "type-to-confirm": "Type <0>{{text}}</0> to confirm",
-    "un-follow": "UnFollow",
+    "un-follow": "Unfollow",
     "unique": "Unique",
     "unpause": "UnPause",
     "update": "Update",