From 02bc6f24dea6c2142496e1b5a22e7b5432e675fc Mon Sep 17 00:00:00 2001 From: Sachin Chaurasiya Date: Mon, 25 Apr 2022 19:21:55 +0530 Subject: [PATCH] Fix: Miscellaneous UI issues (#4472) --- .../DashboardDetails.component.tsx | 10 +++ .../DashboardDetails.test.tsx | 1 + .../src/components/Users/Users.component.tsx | 6 +- .../rich-text-editor/RichTextEditor.css | 1 + .../common/table-data-card/TableDataCard.tsx | 44 ++++------ .../components/searched-data/SearchedData.tsx | 15 +--- .../resources/ui/src/interface/types.d.ts | 2 +- .../resources/ui/src/pages/service/index.tsx | 39 +++++++++ .../ui/src/pages/services/index.test.tsx | 6 +- .../resources/ui/src/pages/services/index.tsx | 86 ------------------- 10 files changed, 77 insertions(+), 133 deletions(-) diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx index c8f79e08b28..b66314ea0fa 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.component.tsx @@ -34,6 +34,7 @@ import { getHtmlForNonAdminAction, getUserTeams, isEven, + pluralize, } from '../../utils/CommonUtils'; import { getEntityFeedLink } from '../../utils/EntityUtils'; import { getDefaultValue } from '../../utils/FeedElementUtils'; @@ -388,6 +389,14 @@ const DashboardDetails = ({ setThreadLink(''); }; + const getDeleteEntityMessage = () => { + return `Deleting this ${EntityType.DASHBOARD} will also delete ${pluralize( + charts.length, + 'chart', + 's' + )}`; + }; + const getLoader = () => { return isentityThreadLoading ? : null; }; @@ -666,6 +675,7 @@ const DashboardDetails = ({ allowDelete currentTier={tier?.tagFQN} currentUser={owner?.id} + deletEntityMessage={getDeleteEntityMessage()} entityId={dashboardDetails.id} entityName={dashboardDetails.name} entityType={EntityType.DASHBOARD} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.test.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.test.tsx index 9b206dacb0c..a7cfd2f1785 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DashboardDetails/DashboardDetails.test.tsx @@ -153,6 +153,7 @@ jest.mock('../../utils/CommonUtils', () => ({ getHtmlForNonAdminAction: jest.fn(), getEntityPlaceHolder: jest.fn().mockReturnValue('value'), getEntityName: jest.fn().mockReturnValue('entityName'), + pluralize: jest.fn().mockReturnValue('2 charts'), })); describe('Test DashboardDetails component', () => { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx index ed41ee47510..aeec5d75465 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Users/Users.component.tsx @@ -220,7 +220,7 @@ const Users = ({ const getDisplayNameComponent = () => { if (isAdminUser || isLoggedinUser) { return ( -
+
{isDisplayNameEdit ? (
{ return (
-
+
{userData.profile?.images?.image ? (
{userData.email}

- {getDescriptionComponent()} +
{getDescriptionComponent()}
{getTeamsComponent()} {getRolesComponent()} diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.css b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.css index c4358d3601e..f295f0209bc 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.css +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/rich-text-editor/RichTextEditor.css @@ -229,6 +229,7 @@ li.ProseMirror-selectednode:after { /* default UI Styles */ .toastui-editor-defaultUI .ProseMirror { padding: 18px 25px; + font-size: 14px; } .toastui-editor-defaultUI { diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx index 5e93207209b..51c89e02abf 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/table-data-card/TableDataCard.tsx @@ -11,12 +11,9 @@ * limitations under the License. */ -import { - faAngleRight, - faExclamationCircle, -} from '@fortawesome/free-solid-svg-icons'; +import { faExclamationCircle } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { isString, isUndefined, startCase, uniqueId } from 'lodash'; +import { isNil, isString, isUndefined, startCase, uniqueId } from 'lodash'; import { ExtraInfo } from 'Models'; import React, { FunctionComponent } from 'react'; import { useHistory, useLocation } from 'react-router-dom'; @@ -28,6 +25,7 @@ import { CurrentTourPageType } from '../../../enums/tour.enum'; import { TableType } from '../../../generated/entity/data/table'; import { TagLabel } from '../../../generated/type/tagLabel'; import { serviceTypeLogo } from '../../../utils/ServiceUtils'; +import { stringToHTML } from '../../../utils/StringsUtils'; import { getEntityLink, getUsagePercentile } from '../../../utils/TableUtils'; import './TableDataCard.style.css'; import TableDataCardBody from './TableDataCardBody'; @@ -67,6 +65,9 @@ const TableDataCard: FunctionComponent = ({ matches, tableType, deleted = false, + name, + database, + databaseSchema, }: Props) => { const location = useLocation(); const history = useHistory(); @@ -116,25 +117,17 @@ const TableDataCard: FunctionComponent = ({ } }; - const fqnParts = fullyQualifiedName.split(FQN_SEPARATOR_CHAR); - const separatorHtml = ( - - - - ); - const tableTitle = fqnParts.map((part, i) => { - const separator = i !== fqnParts.length - 1 ? separatorHtml : null; - - return ( - - {part} - {separator} - - ); - }); + const getTableMetaInfo = () => { + if (!isNil(database) && !isNil(databaseSchema)) { + return ( + {`${database}${FQN_SEPARATOR_CHAR}${databaseSchema}`} + ); + } else { + return null; + } + }; return (
= ({ data-testid="table-data-card" id={id}>
+ {getTableMetaInfo()}
= ({ data-testid="table-link" id={`${id}Title`} onClick={handleLinkClick}> - {tableTitle} + {stringToHTML(name)} {deleted && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx index a53261f6505..1aea1941921 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/searched-data/SearchedData.tsx @@ -11,7 +11,7 @@ * limitations under the License. */ -import { isEmpty, isUndefined } from 'lodash'; +import { isUndefined } from 'lodash'; import { FormatedTableData } from 'Models'; import PropTypes from 'prop-types'; import React, { ReactNode } from 'react'; @@ -76,18 +76,7 @@ const SearchedData: React.FC = ({ let name = table.name; if (!isUndefined(table.highlight)) { - const [assetName] = Object.keys(table.highlight).filter((name) => - ASSETS_NAME.includes(name) - ); - name = !isEmpty( - table.highlight?.[assetName as keyof FormatedTableData['highlight']] - ) - ? ( - table.highlight?.[ - assetName as keyof FormatedTableData['highlight'] - ] as string[] - ).join(' ') - : name; + name = table.highlight?.name?.join(' ') || name; } const matches = table.highlight diff --git a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts index 4d3d81d0b56..89b6c9ed79c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts +++ b/openmetadata-ui/src/main/resources/ui/src/interface/types.d.ts @@ -219,7 +219,7 @@ declare module 'Models' { tier: string | TagLabel; highlight?: { description: string[]; - table_name: string[]; + name: string[]; }; index: string; database?: string; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx index 735a2edd860..78c3253e7ff 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/service/index.tsx @@ -67,6 +67,7 @@ import { getEntityName, hasEditAccess, isEven, + pluralize, } from '../../utils/CommonUtils'; import { getInfoElements } from '../../utils/EntityUtils'; import { @@ -633,6 +634,43 @@ const ServicePage: FunctionComponent = () => { } }; + const getDeleteEntityMessage = () => { + const service = serviceName?.slice(0, -1); + + switch (serviceName) { + case ServiceCategory.DATABASE_SERVICES: + return `Deleting this ${service} will also delete ${pluralize( + instanceCount, + 'database', + 's' + )}`; + + case ServiceCategory.MESSAGING_SERVICES: + return `Deleting this ${service} will also delete ${pluralize( + instanceCount, + 'topic', + 's' + )}`; + + case ServiceCategory.DASHBOARD_SERVICES: + return `Deleting this ${service} will also delete ${pluralize( + instanceCount, + 'dashboard', + 's' + )}`; + + case ServiceCategory.PIPELINE_SERVICES: + return `Deleting this ${service} will also delete ${pluralize( + instanceCount, + 'pipeline', + 's' + )}`; + + default: + return; + } + }; + useEffect(() => { setServiceName(serviceCategory || getServiceCategoryFromType(serviceType)); }, [serviceCategory, serviceType]); @@ -968,6 +1006,7 @@ const ServicePage: FunctionComponent = () => { hideTier isRecursiveDelete currentUser={serviceDetails?.owner?.id} + deletEntityMessage={getDeleteEntityMessage()} entityId={serviceDetails?.id} entityName={serviceDetails?.name} entityType={serviceCategory.slice(0, -1)} diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx index 9f20983e158..c1a9b08f182 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.test.tsx @@ -191,10 +191,7 @@ describe('Test Service page', () => { 'service-description' ); const type = await findAllByTestId(container, 'service-type'); - const deleteIcon = await findAllByTestId( - container, - 'delete-icon-container' - ); + const icon = await findAllByTestId(container, 'service-icon'); expect(tabs[0]).toHaveClass('activeCategory'); @@ -203,7 +200,6 @@ describe('Test Service page', () => { mockDatabaseService.data.data.length ); expect(type.length).toBe(mockDatabaseService.data.data.length); - expect(deleteIcon.length).toBe(mockDatabaseService.data.data.length); expect(icon.length).toBe(mockDatabaseService.data.data.length); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx index 9877c276929..b5be706913f 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/pages/services/index.tsx @@ -20,7 +20,6 @@ import { Link, useHistory } from 'react-router-dom'; import { useAuthContext } from '../../authentication/auth-provider/AuthProvider'; import { addAirflowPipeline } from '../../axiosAPIs/airflowPipelineAPI'; import { - deleteService, getServiceDetails, getServices, postService, @@ -35,7 +34,6 @@ import PageContainerV1 from '../../components/containers/PageContainerV1'; import PageLayout from '../../components/containers/PageLayout'; import Loader from '../../components/Loader/Loader'; import { AddServiceModal } from '../../components/Modals/AddServiceModal/AddServiceModal'; -import ConfirmationModal from '../../components/Modals/ConfirmationModal/ConfirmationModal'; import { getServiceDetailsPath, PAGE_SIZE, @@ -73,7 +71,6 @@ import { getDashboardURL } from '../../utils/DashboardServiceUtils'; import { getBrokers } from '../../utils/MessagingServiceUtils'; import { getAddServicePath } from '../../utils/RouterUtils'; import { getErrorText } from '../../utils/StringsUtils'; -import SVGIcons from '../../utils/SvgUtils'; import { showErrorToast } from '../../utils/ToastUtils'; type ServiceRecord = { @@ -106,11 +103,6 @@ const ServicesPage = () => { const { isAdminUser } = useAuth(); const { isAuthDisabled } = useAuthContext(); const [isModalOpen, setIsModalOpen] = useState(false); - const [isConfirmationModalOpen, setIsConfirmationModalOpen] = useState(false); - const [deleteSelection, setDeleteSelection] = useState({ - id: '', - name: '', - }); const [serviceName, setServiceName] = useState('databaseServices'); const [paging, setPaging] = useState({ @@ -363,47 +355,6 @@ const ServicesPage = () => { }); }; - const handleCancelConfirmationModal = () => { - setIsConfirmationModalOpen(false); - setDeleteSelection({ - id: '', - name: '', - }); - }; - - const handleDelete = (id: string) => { - deleteService(serviceName, id) - .then((res: AxiosResponse) => { - if (res.statusText === 'OK') { - const updatedServiceList = serviceList.filter((s) => s.id !== id); - setServices({ ...services, [serviceName]: updatedServiceList }); - setServicesCount((pre) => ({ - ...servicesCount, - [serviceName]: pre[serviceName] - 1, - })); - setServiceList(updatedServiceList); - } else { - throw jsonData['api-error-messages']['unexpected-server-response']; - } - }) - .catch((err: AxiosError) => { - showErrorToast( - err, - jsonData['api-error-messages']['delete-service-error'] - ); - }); - - handleCancelConfirmationModal(); - }; - - const ConfirmDelete = (id: string, name: string) => { - setDeleteSelection({ - id, - name, - }); - setIsConfirmationModalOpen(true); - }; - const getServiceTabs = (): Array<{ name: ServiceTypes; displayName: string; @@ -554,20 +505,6 @@ const ServicesPage = () => { }); }; - const getConfirmationModal = () => { - return isConfirmationModalOpen ? ( - handleDelete(deleteSelection.id)} - /> - ) : null; - }; - const getAddServiceModal = () => { return isModalOpen ? ( {
-
- - - -
@@ -741,8 +657,6 @@ const ServicesPage = () => { {getPagination()} {getAddServiceModal()} - - {getConfirmationModal()}
);