UI Improvements (#10034)

* UI Improvements

* fix restore modal unit test

* Remove tooltip from active button and optimse code

* remove console

* used enum for loading state

openmetadata-ui/src/main/resources/ui/src/components/AddGlossary/AddGlossary.component.tsx

@@ -12,9 +12,9 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Space, Switch, Typography } from 'antd';
-import classNames from 'classnames';
+import { Button, Space, Switch, Typography } from 'antd';
 import Tags from 'components/Tag/Tags/tags';
+import { LOADING_STATE } from 'enums/common.enum';
 import { cloneDeep } from 'lodash';
 import { EntityTags } from 'Models';
 import React, { useRef, useState } from 'react';
@@ -26,12 +26,10 @@ import { CreateGlossary } from '../../generated/api/data/createGlossary';
 import { EntityReference } from '../../generated/type/entityReference';
 import { getCurrentUserId, requiredField } from '../../utils/CommonUtils';
 import { AddTags } from '../AddTags/add-tags.component';
-import { Button } from '../buttons/Button/Button';
 import RichTextEditor from '../common/rich-text-editor/RichTextEditor';
 import { EditorContentRef } from '../common/rich-text-editor/RichTextEditor.interface';
 import TitleBreadcrumb from '../common/title-breadcrumb/title-breadcrumb.component';
 import PageLayout from '../containers/PageLayout';
-import Loader from '../Loader/Loader';
 import ReviewerModal from '../Modals/ReviewerModal/ReviewerModal.component';
 import { AddGlossaryError, AddGlossaryProps } from './AddGlossary.interface';
 
@@ -137,44 +135,6 @@ const AddGlossary = ({
     }
   };
 
-  const getSaveButton = () => {
-    return allowAccess ? (
-      <>
-        {saveState === 'waiting' ? (
-          <Button
-            disabled
-            className="tw-w-16 tw-h-10 disabled:tw-opacity-100"
-            size="regular"
-            theme="primary"
-            variant="contained">
-            <Loader size="small" type="white" />
-          </Button>
-        ) : saveState === 'success' ? (
-          <Button
-            disabled
-            className="tw-w-16 tw-h-10 disabled:tw-opacity-100"
-            size="regular"
-            theme="primary"
-            variant="contained">
-            <FontAwesomeIcon icon="check" />
-          </Button>
-        ) : (
-          <Button
-            className={classNames('tw-w-16 tw-h-10', {
-              'tw-opacity-40': !allowAccess,
-            })}
-            data-testid="save-glossary"
-            size="regular"
-            theme="primary"
-            variant="contained"
-            onClick={handleSave}>
-            {t('label.save')}
-          </Button>
-        )}
-      </>
-    ) : null;
-  };
-
   const fetchRightPanel = () => {
     return (
       <>
@@ -270,11 +230,9 @@ const AddGlossary = ({
                 {t('label.reviewer-plural')}:
               </span>
               <Button
-                className="tw-h-5 tw-px-2"
                 data-testid="add-reviewers"
-                size="x-small"
-                theme="primary"
-                variant="contained"
+                size="small"
+                type="primary"
                 onClick={() => setShowReviewerModal(true)}>
                 <FontAwesomeIcon icon="plus" />
               </Button>
@@ -300,13 +258,19 @@ const AddGlossary = ({
           <div className="flex justify-end">
             <Button
               data-testid="cancel-glossary"
-              size="regular"
-              theme="primary"
-              variant="text"
+              type="link"
               onClick={onCancel}>
               {t('label.cancel')}
             </Button>
-            {getSaveButton()}
+
+            <Button
+              data-testid="save-glossary"
+              disabled={!allowAccess}
+              loading={saveState === LOADING_STATE.WAITING}
+              type="primary"
+              onClick={handleSave}>
+              {t('label.save')}
+            </Button>
           </div>
         </div>
         <ReviewerModal

openmetadata-ui/src/main/resources/ui/src/components/Ingestion/Ingestion.component.tsx

@@ -399,12 +399,16 @@ const Ingestion: React.FC<IngestionProps> = ({
     <span className="tw-inline-block tw-text-gray-400 tw-self-center">|</span>
   );
 
+  const getIngestionPermission = (name: string): boolean =>
+    !isRequiredDetailsAvailable || getEditPermission(name);
+
   const getTriggerDeployButton = (ingestion: IngestionPipeline) => {
     if (ingestion.deployed) {
       return (
         <>
           <Button
             data-testid="run"
+            disabled={getIngestionPermission(ingestion.name)}
             type="link"
             onClick={() =>
               handleTriggerIngestion(ingestion.id as string, ingestion.name)
@@ -415,9 +419,7 @@ const Ingestion: React.FC<IngestionProps> = ({
 
           <Button
             data-testid="re-deploy-btn"
-            disabled={
-              !isRequiredDetailsAvailable || getEditPermission(ingestion.name)
-            }
+            disabled={getIngestionPermission(ingestion.name)}
             type="link"
             onClick={() => handleDeployIngestion(ingestion.id as string)}>
             {getLoadingStatus(currDeployId, ingestion.id, t('label.re-deploy'))}
@@ -428,9 +430,7 @@ const Ingestion: React.FC<IngestionProps> = ({
       return (
         <Button
           data-testid="deploy"
-          disabled={
-            !isRequiredDetailsAvailable || getEditPermission(ingestion.name)
-          }
+          disabled={getIngestionPermission(ingestion.name)}
           type="link"
           onClick={() => handleDeployIngestion(ingestion.id as string)}>
           {getLoadingStatus(currDeployId, ingestion.id, t('label.deploy'))}
@@ -529,10 +529,7 @@ const Ingestion: React.FC<IngestionProps> = ({
                   {separator}
                   <Button
                     data-testid="pause"
-                    disabled={
-                      !isRequiredDetailsAvailable ||
-                      getEditPermission(record.name)
-                    }
+                    disabled={getIngestionPermission(record.name)}
                     type="link"
                     onClick={() =>
                       handleEnableDisableIngestion(record.id || '')
@@ -543,10 +540,7 @@ const Ingestion: React.FC<IngestionProps> = ({
               ) : (
                 <Button
                   data-testid="unpause"
-                  disabled={
-                    !isRequiredDetailsAvailable ||
-                    getEditPermission(record.name)
-                  }
+                  disabled={getIngestionPermission(record.name)}
                   type="link"
                   onClick={() => handleEnableDisableIngestion(record.id || '')}>
                   {t('label.unpause')}
@@ -555,9 +549,7 @@ const Ingestion: React.FC<IngestionProps> = ({
               {separator}
               <Button
                 data-testid="edit"
-                disabled={
-                  !isRequiredDetailsAvailable || getEditPermission(record.name)
-                }
+                disabled={getIngestionPermission(record.name)}
                 type="link"
                 onClick={() => handleUpdate(record)}>
                 {t('label.edit')}
@@ -581,7 +573,7 @@ const Ingestion: React.FC<IngestionProps> = ({
               {separator}
               <Button
                 data-testid="kill"
-                disabled={!isRequiredDetailsAvailable}
+                disabled={getIngestionPermission(record.name)}
                 type="link"
                 onClick={() => {
                   setIsKillModalOpen(true);

openmetadata-ui/src/main/resources/ui/src/components/TableProfiler/TableProfilerV1.tsx

@@ -404,23 +404,17 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
                   />
                 )}
 
-                <Tooltip
-                  title={
+                <Link
+                  to={
                     editTest
-                      ? t('label.add-entity', {
-                          entity: t('label.test'),
-                        })
-                      : t('message.no-permission-for-action')
+                      ? getAddDataQualityTableTestPath(
+                          ProfilerDashboardType.TABLE,
+                          `${table?.fullyQualifiedName}`
+                        )
+                      : '#'
                   }>
-                  <Link
-                    to={
-                      editTest
-                        ? getAddDataQualityTableTestPath(
-                            ProfilerDashboardType.TABLE,
-                            `${table?.fullyQualifiedName}`
-                          )
-                        : '#'
-                    }>
+                  <Tooltip
+                    title={!editTest && t('message.no-permission-for-action')}>
                     <Button
                       className="rounded-4"
                       data-testid="profiler-add-table-test-btn"
@@ -430,10 +424,11 @@ const TableProfilerV1: FC<TableProfilerProps> = ({
                         entity: t('label.test'),
                       })}
                     </Button>
-                  </Link>
-                </Tooltip>
+                  </Tooltip>
+                </Link>
 
                 <Tooltip
+                  placement="topRight"
                   title={
                     editTest
                       ? t('label.setting-plural')

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

@@ -13,7 +13,7 @@
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import {
-  Button as ButtonAntd,
+  Button,
   Col,
   Dropdown,
   Modal,
@@ -37,6 +37,7 @@ import { useTranslation } from 'react-i18next';
 import { Link } from 'react-router-dom';
 import { restoreTeam } from 'rest/teamsAPI';
 import AppState from '../../AppState';
+import { ReactComponent as IconEdit } from '../../assets/svg/ic-edit.svg';
 import {
   getTeamAndUserDetailsPath,
   getUserPath,
@@ -80,7 +81,6 @@ import {
   getDeleteMessagePostFix,
 } from '../../utils/TeamUtils';
 import { showErrorToast, showSuccessToast } from '../../utils/ToastUtils';
-import { Button } from '../buttons/Button/Button';
 import Description from '../common/description/Description';
 import ManageButton from '../common/entityPageInfo/ManageButton/ManageButton';
 import EntitySummaryDetails from '../common/EntitySummaryDetails/EntitySummaryDetails';
@@ -248,16 +248,15 @@ const TeamDetailsV1 = ({
               button ? (
                 button
               ) : (
-                <ButtonAntd
+                <Button
                   ghost
                   data-testid={datatestid}
                   disabled={disabled}
-                  size="small"
                   title={title}
                   type="primary"
                   onClick={onClick}>
                   {label}
-                </ButtonAntd>
+                </Button>
               )
             }
             description={description}
@@ -290,7 +289,7 @@ const TeamDetailsV1 = ({
                   ? t('label.remove')
                   : t('message.no-permission-for-action')
               }>
-              <ButtonAntd
+              <Button
                 data-testid="remove-user-btn"
                 disabled={!entityPermissions.EditAll}
                 icon={
@@ -822,17 +821,14 @@ const TeamDetailsV1 = ({
               {currentTeamUsers.length > 0 && isActionAllowed() && (
                 <div>
                   <Button
-                    className="tw-h-8 tw-px-2"
                     data-testid="add-user"
                     disabled={!entityPermissions.EditAll}
-                    size="small"
-                    theme="primary"
                     title={
                       entityPermissions.EditAll
                         ? t('label.add-entity', { entity: t('label.user') })
                         : t('message.no-permission-for-action')
                     }
-                    variant="contained"
+                    type="primary"
                     onClick={() => {
                       handleAddUser(true);
                     }}>
@@ -891,9 +887,9 @@ const TeamDetailsV1 = ({
         ),
         button: (
           <Link to="/explore">
-            <ButtonAntd ghost size="small" type="primary">
+            <Button ghost type="primary">
               {t('label.explore')}
-            </ButtonAntd>
+            </Button>
           </Link>
         ),
       });
@@ -938,23 +934,15 @@ const TeamDetailsV1 = ({
   const teamActionButton = (alreadyJoined: boolean, isJoinable: boolean) => {
     return alreadyJoined ? (
       isJoinable || hasAccess ? (
-        <Button
-          className="tw-h-8 tw-px-2"
-          data-testid="join-teams"
-          size="small"
-          theme="primary"
-          variant="contained"
-          onClick={joinTeam}>
+        <Button data-testid="join-teams" type="primary" onClick={joinTeam}>
           {t('label.join-team')}
         </Button>
       ) : null
     ) : (
       <Button
-        className="tw-h-8 tw-rounded"
+        ghost
         data-testid="leave-team-button"
-        size="small"
-        theme="primary"
-        variant="outlined"
+        type="primary"
         onClick={() => currentUser && deleteUserHandler(currentUser.id, true)}>
         {t('label.leave-team')}
       </Button>
@@ -980,18 +968,14 @@ const TeamDetailsV1 = ({
               <Button
                 className="tw-px-1 tw-py-1 tw-rounded tw-text-sm tw-mr-1"
                 data-testid="cancelAssociatedTag"
-                size="custom"
-                theme="primary"
-                variant="contained"
+                type="primary"
                 onMouseDown={() => setIsHeadingEditing(false)}>
                 <FontAwesomeIcon className="tw-w-3.5 tw-h-3.5" icon="times" />
               </Button>
               <Button
                 className="tw-px-1 tw-py-1 tw-rounded tw-text-sm"
                 data-testid="saveAssociatedTag"
-                size="custom"
-                theme="primary"
-                variant="contained"
+                type="primary"
                 onMouseDown={handleHeadingSave}>
                 <FontAwesomeIcon className="tw-w-3.5 tw-h-3.5" icon="check" />
               </Button>
@@ -1014,8 +998,8 @@ const TeamDetailsV1 = ({
                         })
                       : t('message.no-permission-for-action')
                   }>
-                  <button
-                    className="tw-ml-2 focus:tw-outline-none"
+                  <Button
+                    className="m-l-xss p-0"
                     data-testid="edit-synonyms"
                     disabled={
                       !(
@@ -1023,14 +1007,11 @@ const TeamDetailsV1 = ({
                         entityPermissions.EditAll
                       )
                     }
-                    onClick={() => setIsHeadingEditing(true)}>
-                    <SVGIcons
-                      alt={t('label.edit')}
-                      className="tw-mb-1"
-                      icon="icon-edit"
-                      width="16px"
-                    />
-                  </button>
+                    icon={<IconEdit height={16} width={16} />}
+                    size="small"
+                    type="text"
+                    onClick={() => setIsHeadingEditing(true)}
+                  />
                 </Tooltip>
               </div>
             )}
@@ -1103,7 +1084,7 @@ const TeamDetailsV1 = ({
                 placement="bottomRight"
                 trigger={['click']}
                 onOpenChange={setShowActions}>
-                <ButtonAntd
+                <Button
                   className="rounded-4 w-6 manage-dropdown-button"
                   data-testid="teams-dropdown"
                   size="small">
@@ -1111,7 +1092,7 @@ const TeamDetailsV1 = ({
                     className="text-primary self-center manage-dropdown-icon"
                     icon="ellipsis-vertical"
                   />
-                </ButtonAntd>
+                </Button>
               </Dropdown>
             )}
           </div>
@@ -1199,7 +1180,7 @@ const TeamDetailsV1 = ({
                     </Col>
                     <Col>
                       <Space align="center">
-                        <ButtonAntd
+                        <Button
                           data-testid="add-team"
                           disabled={!createTeamPermission}
                           title={
@@ -1210,7 +1191,7 @@ const TeamDetailsV1 = ({
                           type="primary"
                           onClick={() => handleAddTeam(true)}>
                           {addTeam}
-                        </ButtonAntd>
+                        </Button>
                       </Space>
                     </Col>
                     <Col span={24}>
@@ -1248,7 +1229,7 @@ const TeamDetailsV1 = ({
                   <Space
                     className="tw-w-full roles-and-policy"
                     direction="vertical">
-                    <ButtonAntd
+                    <Button
                       data-testid="add-role"
                       disabled={!entityPermissions.EditAll}
                       title={
@@ -1264,7 +1245,7 @@ const TeamDetailsV1 = ({
                         })
                       }>
                       {addRole}
-                    </ButtonAntd>
+                    </Button>
                     <ListEntities
                       hasAccess={entityPermissions.EditAll}
                       list={currentTeam.defaultRoles || []}
@@ -1296,7 +1277,7 @@ const TeamDetailsV1 = ({
                   <Space
                     className="tw-w-full roles-and-policy"
                     direction="vertical">
-                    <ButtonAntd
+                    <Button
                       data-testid="add-policy"
                       disabled={!entityPermissions.EditAll}
                       title={
@@ -1312,7 +1293,7 @@ const TeamDetailsV1 = ({
                         })
                       }>
                       {addPolicy}
-                    </ButtonAntd>
+                    </Button>
                     <ListEntities
                       hasAccess={entityPermissions.EditAll}
                       list={currentTeam.policies || []}
@@ -1331,16 +1312,15 @@ const TeamDetailsV1 = ({
           buttons={
             <div className="tw-text-lg tw-text-center">
               <Button
+                ghost
                 data-testid="add-team"
                 disabled={!createTeamPermission}
-                size="small"
-                theme="primary"
                 title={
                   createTeamPermission
                     ? addTeam
                     : t('message.no-permission-for-action')
                 }
-                variant="outlined"
+                type="primary"
                 onClick={() => handleAddTeam(true)}>
                 {t('label.add-new-entity', { entity: t('label.team') })}
               </Button>

openmetadata-ui/src/main/resources/ui/src/components/TestSuiteDetails/TestSuiteDetails.component.tsx

@@ -11,14 +11,13 @@
  *  limitations under the License.
  */
 
-import { Space, Tooltip } from 'antd';
+import { Button, Space, Tooltip } from 'antd';
 import React from 'react';
 import { useTranslation } from 'react-i18next';
 import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil';
 import { useAuth } from '../../hooks/authHooks';
 import { IcDeleteColored } from '../../utils/SvgUtils';
 import { useAuthContext } from '../authentication/auth-provider/AuthProvider';
-import { Button } from '../buttons/Button/Button';
 import DeleteWidgetModal from '../common/DeleteWidget/DeleteWidgetModal';
 import Description from '../common/description/Description';
 import EntitySummaryDetails from '../common/EntitySummaryDetails/EntitySummaryDetails';
@@ -55,20 +54,23 @@ const TestSuiteDetails = ({
           titleLinks={slashedBreadCrumb}
         />
         <Tooltip
-          title={hasAccess ? t('label.delete') : NO_PERMISSION_FOR_ACTION}>
+          placement="topRight"
+          title={!hasAccess && NO_PERMISSION_FOR_ACTION}>
           <Button
+            ghost
             data-testid="test-suite-delete"
             disabled={!hasAccess}
+            icon={
+              <IcDeleteColored
+                className="anticon"
+                height={14}
+                viewBox="0 0 24 24"
+                width={14}
+              />
+            }
             size="small"
-            theme="primary"
-            variant="outlined"
+            type="primary"
             onClick={() => handleDeleteWidgetVisible(true)}>
-            <IcDeleteColored
-              className="tw-mr-1.5"
-              height={14}
-              viewBox="0 0 24 24"
-              width={14}
-            />
             <span>{t('label.delete')}</span>
           </Button>
         </Tooltip>

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

@@ -129,6 +129,15 @@ describe('Test manage button component', () => {
 
       fireEvent.click(restoreOption);
 
+      const modalBody = await screen.findByTestId('restore-modal-body');
+
+      expect(modalBody).toBeInTheDocument();
+
+      const modalRestoreButton = await screen.findAllByText('label.restore');
+      screen.debug(modalRestoreButton);
+
+      fireEvent.click(modalRestoreButton[1]);
+
       expect(mockOnRestoreEntity).toHaveBeenCalled();
     });
   });

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

@@ -12,7 +12,7 @@
  */
 
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Button, Col, Dropdown, Row, Tooltip, Typography } from 'antd';
+import { Button, Col, Dropdown, Modal, Row, Tooltip, Typography } from 'antd';
 import { ItemType } from 'antd/lib/menu/hooks/useItems';
 import classNames from 'classnames';
 import React, { FC, useState } from 'react';
@@ -63,6 +63,7 @@ const ManageButton: FC<Props> = ({
   const { t } = useTranslation();
   const [showActions, setShowActions] = useState<boolean>(false);
   const [isDelete, setIsDelete] = useState<boolean>(false);
+  const [showReactiveModal, setShowReactiveModal] = useState(false);
 
   const items = [
     {
@@ -118,7 +119,7 @@ const ManageButton: FC<Props> = ({
                     if (canDelete) {
                       e.stopPropagation();
                       setShowActions(false);
-                      onRestoreEntity && onRestoreEntity();
+                      setShowReactiveModal(true);
                     }
                   }}>
                   <Col span={3}>
@@ -233,6 +234,29 @@ const ManageButton: FC<Props> = ({
           onCancel={() => setIsDelete(false)}
         />
       )}
+
+      <Modal
+        centered
+        cancelButtonProps={{
+          type: 'link',
+        }}
+        className="reactive-modal"
+        closable={false}
+        okText={t('label.restore')}
+        open={showReactiveModal}
+        title={t('label.restore-entity', {
+          entity: entityType,
+        })}
+        onCancel={() => {
+          setShowReactiveModal(false);
+        }}
+        onOk={onRestoreEntity}>
+        <Typography.Text data-testid="restore-modal-body">
+          {t('message.are-you-want-to-restore', {
+            entity: entityName,
+          })}
+        </Typography.Text>
+      </Modal>
     </>
   );
 };

openmetadata-ui/src/main/resources/ui/src/components/common/next-previous/NextPrevious.tsx

@@ -13,10 +13,11 @@
 
 import { faArrowLeft, faArrowRight } from '@fortawesome/free-solid-svg-icons';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { Button } from 'antd';
 import React, { FC, useEffect, useState } from 'react';
+import { useTranslation } from 'react-i18next';
 import { CursorType } from '../../../enums/pagination.enum';
 import { Paging } from '../../../generated/type/paging';
-import { Button } from '../../buttons/Button/Button';
 
 interface Prop {
   paging: Paging;
@@ -39,6 +40,7 @@ const NextPrevious: FC<Prop> = ({
   isNumberBased = false,
   currentPage,
 }: Prop) => {
+  const { t } = useTranslation();
   const [activePage, setActivePage] = useState(1);
 
   const onNextHandler = () => {
@@ -86,18 +88,14 @@ const NextPrevious: FC<Prop> = ({
       className="tw-my-4 tw-flex tw-justify-center tw-items-center tw-gap-2"
       data-testid="pagination">
       <Button
-        className="tw-rounded tw-w-24  tw-px-3 tw-py-1.5 tw-text-sm"
+        ghost
+        className="hover-button text-sm flex-center"
         data-testid="previous"
         disabled={computePrevDisableState()}
-        size="custom"
-        theme="primary"
-        variant="outlined"
+        type="primary"
         onClick={onPreviousHandler}>
-        <FontAwesomeIcon
-          className="tw-text-sm tw-align-middle tw-pr-1.5"
-          icon={faArrowLeft}
-        />{' '}
-        <span>Previous</span>
+        <FontAwesomeIcon className="text-sm p-r-xs" icon={faArrowLeft} />
+        <span>{t('label.previous')}</span>
       </Button>
       <span
         className="tw-px-2"
@@ -106,18 +104,14 @@ const NextPrevious: FC<Prop> = ({
         totalCount
       )} Page`}</span>
       <Button
-        className="tw-rounded tw-w-24 tw-px-3 tw-py-1.5 tw-text-sm"
+        ghost
+        className="hover-button text-sm flex-center"
         data-testid="next"
         disabled={computeNextDisableState()}
-        size="custom"
-        theme="primary"
-        variant="outlined"
+        type="primary"
         onClick={onNextHandler}>
-        <span> Next</span>{' '}
-        <FontAwesomeIcon
-          className="tw-text-sm tw-align-middle tw-pl-1.5"
-          icon={faArrowRight}
-        />
+        <span> {t('label.next')}</span>
+        <FontAwesomeIcon className="text-sm p-l-xs" icon={faArrowRight} />
       </Button>
     </div>
   );

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

@@ -394,6 +394,7 @@
     "press": "Press",
     "preview": "Preview",
     "preview-uploaded-data": "Preview uploaded data",
+    "previous": "Previous",
     "primary-key": "Primary Key",
     "private-key": "PrivateKey",
     "profile": "Profile",

openmetadata-ui/src/main/resources/ui/src/pages/TasksPage/TaskDetailPage/TaskDetailPage.tsx

@@ -42,6 +42,7 @@ import {
   updateThread,
 } from 'rest/feedsAPI';
 import AppState from '../../../AppState';
+import { ReactComponent as IconEdit } from '../../../assets/svg/ic-edit.svg';
 import { FQN_SEPARATOR_CHAR } from '../../../constants/char.constants';
 import { PanelTab, TaskOperation } from '../../../constants/Feeds.constants';
 import { EntityType } from '../../../enums/entity.enum';
@@ -67,7 +68,6 @@ import {
   updateThreadData,
 } from '../../../utils/FeedUtils';
 import { getEncodedFqn } from '../../../utils/StringsUtils';
-import SVGIcons from '../../../utils/SvgUtils';
 import { getEntityLink } from '../../../utils/TableUtils';
 import {
   fetchEntityDetail,
@@ -629,17 +629,14 @@ const TaskDetailPage = () => {
                           className="tw-ml-0.5 tw-align-middle tw-inline-flex tw-flex-wrap"
                         />
                         {(hasEditAccess() || isCreator) && !isTaskClosed && (
-                          <button
-                            className="focus:tw-outline-none tw-self-baseline tw-flex-none"
+                          <Button
+                            className="p-0"
                             data-testid="edit-suggestion"
-                            onClick={() => setEditAssignee(true)}>
-                            <SVGIcons
-                              alt="edit"
-                              icon="icon-edit"
-                              title="Edit"
-                              width="14px"
-                            />
-                          </button>
+                            icon={<IconEdit height={14} width={14} />}
+                            size="small"
+                            type="text"
+                            onClick={() => setEditAssignee(true)}
+                          />
                         )}
                       </Fragment>
                     )}

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

@@ -19,11 +19,14 @@ import RichTextEditorPreviewer from 'components/common/rich-text-editor/RichText
 import TitleBreadcrumb from 'components/common/title-breadcrumb/title-breadcrumb.component';
 import PageLayoutV1 from 'components/containers/PageLayoutV1';
 import Loader from 'components/Loader/Loader';
+import { usePermissionProvider } from 'components/PermissionProvider/PermissionProvider';
+import { ResourceEntity } from 'components/PermissionProvider/PermissionProvider.interface';
 import { isEmpty } from 'lodash';
 import React, { useCallback, useEffect, useMemo, useState } from 'react';
 import { useTranslation } from 'react-i18next';
 import { Link, useHistory } from 'react-router-dom';
 import { getListTestSuites } from 'rest/testAPI';
+import { checkPermission } from 'utils/PermissionsUtils';
 import {
   INITIAL_PAGING_VALUE,
   MAX_CHAR_LIMIT_TEST_SUITE,
@@ -33,6 +36,7 @@ import {
 } from '../../constants/constants';
 import { WEBHOOK_DOCS } from '../../constants/docs.constants';
 import { TEST_SUITE_BREADCRUMB } from '../../constants/TestSuite.constant';
+import { Operation } from '../../generated/entity/policies/policy';
 import { TestSuite } from '../../generated/tests/testSuite';
 import { Paging } from '../../generated/type/paging';
 import { getEntityName, pluralize } from '../../utils/CommonUtils';
@@ -45,6 +49,15 @@ const TestSuitePage = () => {
   const [isLoading, setIsLoading] = useState<boolean>(false);
   const [testSuitePage, setTestSuitePage] = useState(INITIAL_PAGING_VALUE);
   const [testSuitePaging, setTestSuitePaging] = useState<Paging>(pagingObject);
+  const { permissions } = usePermissionProvider();
+
+  const createPermission = useMemo(() => {
+    return checkPermission(
+      Operation.Create,
+      ResourceEntity.TEST_SUITE,
+      permissions
+    );
+  }, [permissions]);
 
   const fetchTestSuites = async (param?: Record<string, string>) => {
     try {
@@ -144,6 +157,7 @@ const TestSuitePage = () => {
               ghost
               className="h-8 rounded-4 tw-m-y-sm"
               data-testid="add-test-suite-button"
+              disabled={!createPermission}
               size="small"
               type="primary"
               onClick={onAddTestSuite}>
@@ -173,14 +187,19 @@ const TestSuitePage = () => {
     <PageLayoutV1>
       <Space align="center" className="w-full justify-between" size={16}>
         <TitleBreadcrumb titleLinks={TEST_SUITE_BREADCRUMB} />
-        <Button
-          data-testid="add-test-suite"
-          type="primary"
-          onClick={onAddTestSuite}>
-          {t('label.add-entity', {
-            entity: t('label.test-suite'),
-          })}
-        </Button>
+        <Tooltip
+          placement="topRight"
+          title={!createPermission && t('message.no-permission-for-action')}>
+          <Button
+            data-testid="add-test-suite"
+            disabled={!createPermission}
+            type="primary"
+            onClick={onAddTestSuite}>
+            {t('label.add-entity', {
+              entity: t('label.test-suite'),
+            })}
+          </Button>
+        </Tooltip>
       </Space>
 
       <Row className="w-full mt-4">

openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx

@@ -14,7 +14,6 @@
 import { Button, Col, Row, Space, Tooltip, Typography } from 'antd';
 import Table, { ColumnsType } from 'antd/lib/table';
 import { AxiosError } from 'axios';
-import { Button as LegacyButton } from 'components/buttons/Button/Button';
 import DeleteWidgetModal from 'components/common/DeleteWidget/DeleteWidgetModal';
 import Description from 'components/common/description/Description';
 import EntitySummaryDetails from 'components/common/EntitySummaryDetails/EntitySummaryDetails';
@@ -974,26 +973,28 @@ const ServicePage: FunctionComponent = () => {
                   {serviceDetails?.serviceType !==
                     MetadataServiceType.OpenMetadata && (
                     <Tooltip
+                      placement="topRight"
                       title={
-                        servicePermission.Delete
-                          ? t('label.delete')
-                          : t('message.no-permission-for-action')
+                        !servicePermission.Delete &&
+                        t('message.no-permission-for-action')
                       }>
-                      <LegacyButton
+                      <Button
+                        ghost
                         data-testid="service-delete"
                         disabled={!servicePermission.Delete}
+                        icon={
+                          <IcDeleteColored
+                            className="anticon"
+                            height={14}
+                            viewBox="0 0 24 24"
+                            width={14}
+                          />
+                        }
                         size="small"
-                        theme="primary"
-                        variant="outlined"
+                        type="primary"
                         onClick={handleDelete}>
-                        <IcDeleteColored
-                          className="m-r-xs"
-                          height={14}
-                          viewBox="0 0 24 24"
-                          width={14}
-                        />
                         {t('label.delete')}
-                      </LegacyButton>
+                      </Button>
                     </Tooltip>
                   )}
                   <DeleteWidgetModal

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

@@ -11,6 +11,8 @@
  *  limitations under the License.
  */
 
+@import url('../variables.less');
+
 .ant-btn,
 button {
   &:disabled {
@@ -21,3 +23,14 @@ button {
     }
   }
 }
+
+.ant-btn-background-ghost.ant-btn-primary.hover-button:hover {
+  background: @primary-color;
+  color: @white;
+}
+
+.ant-btn-background-ghost.hover-button.ant-btn-primary[disabled]:hover {
+  background: initial;
+  color: initial;
+  opacity: 0.45;
+}