From 1c6d2f26493875dceeba3be65bf5728c8c84d4f6 Mon Sep 17 00:00:00 2001 From: Aniket Katkar <51777795+aniketkatkar97@users.noreply.github.com> Date: Fri, 26 Aug 2022 14:14:22 +0530 Subject: [PATCH] Fix #6893 : Ui improvements and bug fixes 2 (#6935) * Fix #6893 : Ui improvements and bug fixes * Fixed failing unit tests * Fixed failing cypress tests * glossary page left panel styling changes --- .../cypress/integration/Pages/Teams.spec.js | 15 ++- .../CreateUser/CreateUser.component.tsx | 25 ++--- .../src/components/Glossary/Glossary.test.tsx | 13 +++ .../Glossary/GlossaryV1.component.tsx | 97 ++++++++++--------- .../components/Glossary/GlossaryV1.style.less | 29 ++++++ .../components/TeamDetails/TeamDetailsV1.tsx | 87 ++++------------- .../ui/src/components/TeamDetails/teams.less | 7 ++ .../ui/src/components/UserList/UserListV1.tsx | 6 +- .../ui/src/components/UserList/usersList.less | 7 ++ .../EntitySummaryDetails.style.less | 5 + .../EntitySummaryDetails.tsx | 7 +- .../OwnerWidgetWrapper.component.tsx | 4 +- .../OwnerWidget/OwnerWidgetWrapper.module.css | 3 - .../OwnerWidget/OwnerWidgetWrapper.style.less | 4 + .../ManageButton/ManageButton.tsx | 11 ++- .../resources/ui/src/constants/constants.ts | 8 ++ 16 files changed, 189 insertions(+), 139 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.style.less delete mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/OwnerWidget/OwnerWidgetWrapper.module.css create mode 100644 openmetadata-ui/src/main/resources/ui/src/components/common/OwnerWidget/OwnerWidgetWrapper.style.less diff --git a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Teams.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Teams.spec.js index 1998fbb1363..c9c98496b5c 100644 --- a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Teams.spec.js +++ b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Teams.spec.js @@ -146,7 +146,10 @@ describe('Teams flow should work properly', () => { cy.get('.ant-table-row').should('contain', TEAM_DETAILS.ownername); //Removing the added user - cy.get('.ant-btn').should('exist').should('be.visible').click(); + cy.get('.ant-btn > [data-testid="image"]') + .should('exist') + .should('be.visible') + .click(); //Validating the user added cy.get('[data-testid="body-text"]').should( @@ -156,10 +159,10 @@ describe('Teams flow should work properly', () => { //Click on confirm button cy.get('[data-testid="save-button"]').should('be.visible').click(); - + // TODO: Remove cy.wait and wait for API to be completed before querying for new element cy.wait(2000); - + // //Verify if user is removed cy.get('[data-testid="searchbar"]') @@ -311,6 +314,12 @@ describe('Teams flow should work properly', () => { .should('be.visible') .click(); + cy.wait(1000); + cy.get('.ant-dropdown-menu-item') + .should('exist') + .should('be.visible') + .click(); + cy.wait(1000); //Click on permanent delete option cy.get('[data-testid="hard-delete-option"]') diff --git a/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx index 774a976d5e6..986426ae790 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/CreateUser/CreateUser.component.tsx @@ -16,6 +16,7 @@ import classNames from 'classnames'; import { cloneDeep, isEmpty, isUndefined } from 'lodash'; import { EditorContentRef } from 'Models'; import React, { useRef, useState } from 'react'; +import { getBotsPagePath, getUsersPagePath } from '../../constants/constants'; import { validEmailRegEx } from '../../constants/regex.constants'; import { PageLayoutType } from '../../enums/layout.enum'; import { CreateUser as CreateUserSchema } from '../../generated/api/teams/createUser'; @@ -60,6 +61,18 @@ const CreateUser = ({ validEmail: false, }); + const slashedBreadcrumbList = [ + { + name: forceBot ? 'Bots' : 'Users', + url: forceBot ? getBotsPagePath() : getUsersPagePath(), + }, + { + name: `Create ${forceBot ? 'Bot' : 'User'}`, + url: '', + activeTitle: true, + }, + ]; + /** * common function to update user input in to the state * @param event change event for input/selection field @@ -215,17 +228,7 @@ const CreateUser = ({ return ( - } + header={} layout={PageLayoutType['2ColRTL']}>
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx index bfc151db0aa..e3eef57d975 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/Glossary.test.tsx @@ -59,6 +59,19 @@ jest.mock('antd', () => ({ .fn() .mockImplementation(({ children }) =>
{children}
), }, + Dropdown: jest.fn().mockImplementation(({ children, overlay }) => ( +
+ {children} + {overlay} +
+ )), + Menu: jest.fn().mockImplementation(({ items }) => ( +
+ {items.map((item: { key: string; label: JSX.Element }) => { +
{item.label}
; + })} +
+ )), })); const mockProps = { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx index 6da0cb5b2be..55ee013286c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.component.tsx @@ -12,14 +12,13 @@ */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Col, Input, Row, Space, Typography } from 'antd'; +import { Col, Dropdown, Input, Menu, Row, Space, Typography } from 'antd'; import classNames from 'classnames'; import { cloneDeep, isEmpty } from 'lodash'; import { GlossaryTermAssets, LoadingState } from 'Models'; import RcTree from 'rc-tree'; import { DataNode, EventDataNode } from 'rc-tree/lib/interface'; import React, { Fragment, useEffect, useRef, useState } from 'react'; -import { Tooltip } from 'react-tippy'; import { useAuthContext } from '../../authentication/auth-provider/AuthProvider'; import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants'; import { TITLE_FOR_NON_ADMIN_ACTION } from '../../constants/constants'; @@ -218,35 +217,43 @@ const GlossaryV1 = ({ const manageButtonContent = () => { return ( -
setIsDelete(true)}> -
- -
-
-

- Delete Glossary “{selectedData?.displayName || selectedData?.name}” -

-

- Deleting this Glossary{' '} - {(selectedData as GlossaryTerm)?.glossary && 'Term'} will - permanently remove its metadata from OpenMetadata. -

-
-
+ { + e.stopPropagation(); + setIsDelete(true); + setShowActions(false); + }}> + +
+

+ Delete +

+

+ Deleting this Glossary will permanently remove its metadata + from OpenMetadata. +

+
+ + ), + key: 'delete-button', + }, + ]} + /> ); }; const fetchLeftPanel = () => { return ( -
-
+
+
Glossary
@@ -333,29 +340,27 @@ const GlossaryV1 = ({ - + +
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.style.less b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.style.less index db233e76dfe..d894df2330d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.style.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/Glossary/GlossaryV1.style.less @@ -1,3 +1,9 @@ +@box-shadow-color: rgba(0, 0, 0, 0.06); +@left-panel-border-color: rgb(229, 231, 235); +@manage-button-bg-primary: #7147e8; +@manage-dropdown-bg-primary: #d9ceee; +@white: #ffffff; + .display-name { .ant-typography { margin-bottom: 0; @@ -17,3 +23,26 @@ border-radius: 0.2rem; margin-right: 0.3rem; } + +.glossary-manage-button { + border: none; + background-color: @manage-dropdown-bg-primary; +} + +.manage-button { + .ant-space-item:first-child { + width: 40px; + align-self: baseline; + } +} + +.ant-dropdown-menu { + padding: 8px 0px; + background: @white; + border: 1px solid #dde3ea; + box-shadow: 1px 1px 3px rgb(0 0 0 / 12%); + border-radius: 4px; + .ant-dropdown-menu-item { + padding: 5px 16px; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx index 1cd6906d19e..e201df1383a 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetailsV1.tsx @@ -28,7 +28,6 @@ import { cloneDeep, isEmpty, isUndefined, orderBy } from 'lodash'; import { ExtraInfo } from 'Models'; import React, { Fragment, useEffect, useMemo, useState } from 'react'; import { Link } from 'react-router-dom'; -import { Tooltip as TooltipTippy } from 'react-tippy'; import AppState from '../../AppState'; import { getTeamAndUserDetailsPath, @@ -63,9 +62,9 @@ import { hasPemission } from '../../utils/PermissionsUtils'; import { getSettingPath, getTeamsWithFqnPath } from '../../utils/RouterUtils'; import SVGIcons, { Icons } from '../../utils/SvgUtils'; import { Button } from '../buttons/Button/Button'; -import DeleteWidgetModal from '../common/DeleteWidget/DeleteWidgetModal'; import Description from '../common/description/Description'; import Ellipses from '../common/Ellipses/Ellipses'; +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'; @@ -121,8 +120,6 @@ const TeamDetailsV1 = ({ state: boolean; leave: boolean; }>(DELETE_USER_INITIAL_STATE); - const [showAction, setShowAction] = useState(false); - const [isDelete, setIsDelete] = useState(false); const [searchTerm, setSearchTerm] = useState(''); const [table, setTable] = useState([]); const [slashedDatabaseName, setSlashedDatabaseName] = useState< @@ -212,15 +209,15 @@ const TeamDetailsV1 = ({ render: (_, record) => ( } type="text" @@ -231,33 +228,7 @@ const TeamDetailsV1 = ({ ), }, ]; - }, []); - - const manageButtonContent = () => { - return ( -
setIsDelete(true)}> -
- -
-
-

- Delete Team “{getEntityName(currentTeam)}” -

-

- Deleting this Team {getEntityName(currentTeam)} will permanently - remove its metadata from OpenMetadata. -

-
-
- ); - }; + }, [deleteUserHandler]); const extraInfo: ExtraInfo = { key: 'Owner', @@ -589,7 +560,7 @@ const TeamDetailsV1 = ({ return alreadyJoined ? ( isJoinable || hasAccess ? ( + -
+
)} - - setIsDelete(false)} - />
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less index 95f1e4c8c27..9ac504628bd 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/teams.less @@ -23,3 +23,10 @@ padding-left: 16px; } } + +.remove-icon { + .ant-btn { + height: 22px; + width: 22px; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx index 3b48117796d..a9bdb3450a4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/UserListV1.tsx @@ -136,7 +136,7 @@ const UserListV1: FC = ({ render: (_, record) => ( {showRestore && ( @@ -144,7 +144,7 @@ const UserListV1: FC = ({ icon={ } @@ -161,7 +161,7 @@ const UserListV1: FC = ({ icon={ } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/UserList/usersList.less b/openmetadata-ui/src/main/resources/ui/src/components/UserList/usersList.less index 1b3b64cb7f0..5b16ec738b4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/UserList/usersList.less +++ b/openmetadata-ui/src/main/resources/ui/src/components/UserList/usersList.less @@ -24,3 +24,10 @@ } } } + +.action-icons { + .ant-btn { + height: 20px; + width: 20px; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.style.less b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.style.less new file mode 100644 index 00000000000..581c68389de --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.style.less @@ -0,0 +1,5 @@ +.entity-summary-details { + .ant-space-item { + position: relative; + } +} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx index 49b53e4ab57..a796c1ab367 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/EntitySummaryDetails/EntitySummaryDetails.tsx @@ -12,6 +12,7 @@ import { Button } from '../../buttons/Button/Button'; import OwnerWidgetWrapper from '../OwnerWidget/OwnerWidgetWrapper.component'; import ProfilePicture from '../ProfilePicture/ProfilePicture'; import TierCard from '../TierCard/TierCard'; +import './EntitySummaryDetails.style.less'; export interface GetInfoElementsProps { data: ExtraInfo; @@ -151,7 +152,10 @@ const EntitySummaryDetails = ({ } return ( - + {retVal} {displayVal && ( <> @@ -254,6 +258,7 @@ const EntitySummaryDetails = ({ updateTier={updateTier} /> } + placement="bottomRight" trigger={['click']}> void; + buttonClassName?: string; entityName: string; entityId?: string; entityType?: string; @@ -33,6 +36,8 @@ interface Props { const ManageButton: FC = ({ allowSoftDelete, + afterDeleteAction, + buttonClassName, deleteMessage, entityName, entityType, @@ -116,7 +121,10 @@ const ManageButton: FC = ({ visible={showActions} onVisibleChange={setShowActions}>