From a22b6317e5075d1613fcff2a976ae72fbb289f08 Mon Sep 17 00:00:00 2001 From: Ashish Gupta Date: Sat, 3 Sep 2022 20:32:18 +0530 Subject: [PATCH] Change error placeholder for addData and noData (#7195) --- .../integration/Pages/Glossary.spec.js | 4 +- .../ui/src/assets/img/add-placeholder.svg | 9 ++ .../ui/src/assets/img/no-data-placeholder.svg | 40 ++++++++ .../DataQualityTest/DataQualityTest.tsx | 11 ++- .../Glossary/GlossaryV1.component.tsx | 24 ++--- .../SampleDataTable.component.tsx | 48 +++++----- .../SampleDataTopic/SampleDataTopic.tsx | 48 +++++----- .../ui/src/components/Services/Services.tsx | 29 ++++-- .../components/TeamDetails/TeamDetails.tsx | 37 ++++---- .../components/TeamDetails/TeamDetailsV1.tsx | 35 +++---- .../ui/src/components/Webhooks/WebhooksV1.tsx | 46 +++++---- .../ErrorPlaceHolder.tsx | 95 +++++++++++++++---- .../ErrorPlaceHolderES.tsx | 30 ++++-- .../ui/src/constants/docs.constants.ts | 14 +++ .../ui/src/constants/services.const.ts | 4 +- .../PoliciesDetailPage/PoliciesDetail.less | 2 +- .../src/main/resources/ui/src/styles/app.less | 12 +++ 17 files changed, 330 insertions(+), 158 deletions(-) create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/img/add-placeholder.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/assets/img/no-data-placeholder.svg create mode 100644 openmetadata-ui/src/main/resources/ui/src/constants/docs.constants.ts diff --git a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js index 8e45fc3c18b..47fabdb5f50 100644 --- a/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js +++ b/openmetadata-ui/src/main/resources/ui/cypress/integration/Pages/Glossary.spec.js @@ -111,7 +111,7 @@ describe('Glossary page should work properly', () => { it('Create new glossary flow should work properly', () => { // check for no data placeholder - cy.contains('No glossaries found').should('be.visible'); + cy.contains('glossaries').should('be.visible'); // Redirecting to add glossary page cy.get('[data-testid="add-webhook-button"]').should('be.visible').click(); @@ -456,6 +456,6 @@ describe('Glossary page should work properly', () => { .should('be.visible'); cy.get('.Toastify__close-button > svg > path').should('be.visible').click(); cy.wait(500); - cy.contains('No glossaries found').should('be.visible'); + cy.contains('glossaries').should('be.visible'); }); }); diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/img/add-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/img/add-placeholder.svg new file mode 100644 index 00000000000..99c79da8af8 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/img/add-placeholder.svg @@ -0,0 +1,9 @@ + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/assets/img/no-data-placeholder.svg b/openmetadata-ui/src/main/resources/ui/src/assets/img/no-data-placeholder.svg new file mode 100644 index 00000000000..899deb7328b --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/assets/img/no-data-placeholder.svg @@ -0,0 +1,40 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + diff --git a/openmetadata-ui/src/main/resources/ui/src/components/DataQualityTest/DataQualityTest.tsx b/openmetadata-ui/src/main/resources/ui/src/components/DataQualityTest/DataQualityTest.tsx index 72de6d74f26..c0b118d1c3d 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/DataQualityTest/DataQualityTest.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/DataQualityTest/DataQualityTest.tsx @@ -14,6 +14,7 @@ import { Tooltip } from 'antd'; import classNames from 'classnames'; import React, { useEffect, useState } from 'react'; +import { DATA_QUALITY_DOCS } from '../../constants/docs.constants'; import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil'; import { ColumnTestType } from '../../generated/entity/data/table'; import { TableTest, TableTestType } from '../../generated/tests/tableTest'; @@ -176,10 +177,12 @@ const DataQualityTest = ({ ) : ( - -

No test available.

- {addTestButton(false)} - + )} ); 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 096e160c0eb..22990741ab0 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 @@ -30,6 +30,7 @@ import RcTree from 'rc-tree'; import { DataNode, EventDataNode } from 'rc-tree/lib/interface'; import React, { Fragment, useEffect, useMemo, useRef, useState } from 'react'; import { FQN_SEPARATOR_CHAR } from '../../constants/char.constants'; +import { GLOSSARIES_DOCS } from '../../constants/docs.constants'; import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil'; import { Glossary } from '../../generated/entity/data/glossary'; import { GlossaryTerm } from '../../generated/entity/data/glossaryTerm'; @@ -557,21 +558,14 @@ const GlossaryV1 = ({ ) : ( - -

No glossaries found

-

- -

- + ); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx index c99f97a2981..762aa3a7591 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTable/SampleDataTable.component.tsx @@ -16,7 +16,7 @@ import { faChevronRight, } from '@fortawesome/free-solid-svg-icons'; import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Empty, Space } from 'antd'; +import { Space, Typography } from 'antd'; import classNames from 'classnames'; import { lowerCase } from 'lodash'; import React, { @@ -27,6 +27,8 @@ import React, { useState, } from 'react'; import { Link } from 'react-router-dom'; +import { WORKFLOWS_PROFILER_DOCS } from '../../constants/docs.constants'; +import { NoDataFoundPlaceHolder } from '../../constants/services.const'; import { TableData } from '../../generated/entity/data/table'; import { withLoader } from '../../hoc/withLoader'; import { isEven } from '../../utils/CommonUtils'; @@ -153,27 +155,29 @@ const SampleDataTable: FunctionComponent = ({ sampleData }: Props) => { ) : ( -
- -

No sample data available

-

- To view Sample Data, run the Profiler Ingestion. Please - refer to this doc to schedule the{' '} - - Profiler Ingestion - -

- - } - /> +
+
+ No Service +
+
+ + {' '} + No sample data available + + + {' '} + To view Sample Data, run the Profiler Ingestion. Please refer to + this doc to schedule the{' '} + + Profiler Ingestion + + +
)}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTopic/SampleDataTopic.tsx b/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTopic/SampleDataTopic.tsx index 17c02e2a3ef..02c3f28c238 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTopic/SampleDataTopic.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/SampleDataTopic/SampleDataTopic.tsx @@ -12,10 +12,12 @@ */ import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'; -import { Empty } from 'antd'; +import { Typography } from 'antd'; import { isUndefined } from 'lodash'; import React, { FC, HTMLAttributes, useState } from 'react'; import { Link } from 'react-router-dom'; +import { WORKFLOWS_METADATA_DOCS } from '../../constants/docs.constants'; +import { NoDataFoundPlaceHolder } from '../../constants/services.const'; import { TopicSampleData } from '../../generated/entity/data/topic'; import { withLoader } from '../../hoc/withLoader'; import SchemaEditor from '../schema-editor/SchemaEditor'; @@ -82,28 +84,30 @@ const SampleDataTopic: FC = ({ sampleData }) => { } else { return (
- -

No sample data available

-

- To view Sample Data, run the MetaData Ingestion. Please refer to - this doc to schedule the{' '} - - MetaData Ingestion - -

- - } - /> +
+ No Service +
+
+ + {' '} + No sample data available + + + {' '} + To view Sample Data, run the MetaData Ingestion. Please refer to + this doc to schedule the{' '} + + MetaData Ingestion + + +
); } diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx index d7945d14e00..2cfcde7a97c 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Services/Services.tsx @@ -11,7 +11,7 @@ * limitations under the License. */ -import { Card, Col, Row, Tooltip } from 'antd'; +import { Card, Col, Row, Tooltip, Typography } from 'antd'; import { isEmpty } from 'lodash'; import React, { Fragment, useMemo } from 'react'; import { Link, useHistory } from 'react-router-dom'; @@ -21,9 +21,10 @@ import { PAGE_SIZE, TITLE_FOR_NON_ADMIN_ACTION, } from '../../constants/constants'; +import { CONNECTORS_DOCS } from '../../constants/docs.constants'; import { NO_PERMISSION_FOR_ACTION } from '../../constants/HelperTextUtil'; import { - NoDataFoundPlaceHolder, + AddPlaceHolder, servicesDisplayName, } from '../../constants/services.const'; import { ServiceCategory } from '../../enums/service.enum'; @@ -63,6 +64,8 @@ const Services = ({ currentPage, onPageChange, }: ServicesProps) => { + const { Paragraph, Link: AntdLink } = Typography; + const { isAuthDisabled } = useAuthContext(); const history = useHistory(); const handleAddServiceClick = () => { @@ -184,10 +187,23 @@ const Services = ({ ) : (
- No Service + No Service
-
-

No services found

+
+ + {' '} + Adding a new {servicesDisplayName[serviceName]} is easy, just give + it a spin! + + + {' '} + Still need help? Refer to our{' '} + + docs + {' '} + for more information. + +
- Click here + Add new {servicesDisplayName[serviceName]} {' '} - to add new {servicesDisplayName[serviceName]}
diff --git a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx index cfa94ee3aa9..d73840ecf94 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/TeamDetails/TeamDetails.tsx @@ -655,24 +655,25 @@ const TeamDetails = ({
) : ( - -

No Teams Added.

-
- - - - {' to add new Team'} -
- + + + + + + } + heading="Teams" + /> )} {deletingUser.state && ( 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 a19dbecc090..d05de1a01bd 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 @@ -935,23 +935,24 @@ const TeamDetailsV1 = ({ ) : ( - -

No Teams Added.

-
- - {' to add new Team'} -
- + + + + } + heading="Teams" + /> )} {deletingUser.state && ( diff --git a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx index f04d45326cb..0a7f17e880e 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/Webhooks/WebhooksV1.tsx @@ -75,27 +75,31 @@ const WebhooksV1: FC = ({ const fetchErrorPlaceHolder = useMemo( () => (message: string) => { return ( - -

{message}

-

- - - -

- + + + + +

+ } + heading={message} + /> ); }, [] diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx index 05d77235667..37727ee4059 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolder.tsx @@ -11,31 +11,88 @@ * limitations under the License. */ +import { Typography } from 'antd'; import React from 'react'; -import NoDataFoundPlaceHolder from '../../../assets/img/no-data-placeholder.png'; +import { + default as AddPlaceHolder, + default as NoDataFoundPlaceHolder, +} from '../../../assets/img/no-data-placeholder.svg'; +import { Button } from '../../buttons/Button/Button'; type Props = { children?: React.ReactNode; + type?: string; + buttonLabel?: string; + buttonListener?: () => void; + heading?: string; + doc?: string; + buttons?: React.ReactNode; + buttonId?: string; }; -const ErrorPlaceHolder = ({ children }: Props) => ( - <> -
- {' '} - -
- {children && ( -
- {children} +const ErrorPlaceHolder = ({ + doc, + type, + children, + heading, + buttonLabel, + buttonListener, + buttons, + buttonId, +}: Props) => { + const { Paragraph, Link } = Typography; + + return type === 'ADD_DATA' ? ( + <> +
+ {' '} +
- )} - -); +
+ + {' '} + Adding a new {heading} is easy, just give it a spin! + + + {' '} + Still need help? Refer to our{' '} + + docs + {' '} + for more information. + + +
+ {buttons ? ( + buttons + ) : ( + + )} +
+
+ + ) : ( +
+
+ +
+ {children && ( +
+ {children} +
+ )} +
+ ); +}; export default ErrorPlaceHolder; diff --git a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx index 2e3a3eabbc8..b25125f2890 100644 --- a/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx +++ b/openmetadata-ui/src/main/resources/ui/src/components/common/error-with-placeholder/ErrorPlaceHolderES.tsx @@ -16,6 +16,7 @@ import { observer } from 'mobx-react'; import React from 'react'; import AppState from '../../../AppState'; import { useAuthContext } from '../../../authentication/auth-provider/AuthProvider'; +import { NoDataFoundPlaceHolder } from '../../../constants/services.const'; type Props = { type: 'error' | 'noData'; @@ -64,15 +65,26 @@ const ErrorPlaceHolderES = ({ type, errorMessage, query = '' }: Props) => { }; const noRecordForES = () => { return ( -

- No matching data assets found - {query ? ( - <> - {' '} - for {query} - - ) : null} -

+
+
+ {' '} + +
+
+ No matching data assets found + {query ? ( + <> + {' '} + for{' '} + {query} + + ) : null} +
+
); }; diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/docs.constants.ts b/openmetadata-ui/src/main/resources/ui/src/constants/docs.constants.ts new file mode 100644 index 00000000000..f849608ee54 --- /dev/null +++ b/openmetadata-ui/src/main/resources/ui/src/constants/docs.constants.ts @@ -0,0 +1,14 @@ +export const WORKFLOWS_PROFILER_DOCS = + 'https://docs.open-metadata.org/openmetadata/ingestion/workflows/profiler'; + +export const DATA_QUALITY_DOCS = + 'https://docs.open-metadata.org/openmetadata/data-quality'; + +export const GLOSSARIES_DOCS = + 'https://docs.open-metadata.org/openmetadata/glossaries'; + +export const CONNECTORS_DOCS = + 'https://docs.open-metadata.org/openmetadata/connectors'; + +export const WORKFLOWS_METADATA_DOCS = + 'https://docs.open-metadata.org/openmetadata/ingestion/workflows/metadata'; diff --git a/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts b/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts index 18e44ec8384..af87871136b 100644 --- a/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts +++ b/openmetadata-ui/src/main/resources/ui/src/constants/services.const.ts @@ -12,8 +12,9 @@ */ import { ServiceTypes, StepperStepType } from 'Models'; +import addPlaceHolder from '../assets/img/add-placeholder.svg'; import airbyte from '../assets/img/Airbyte.png'; -import noDataFound from '../assets/img/no-data-placeholder.png'; +import noDataFound from '../assets/img/no-data-placeholder.svg'; import noService from '../assets/img/no-service.png'; import airflow from '../assets/img/service-icon-airflow.png'; import athena from '../assets/img/service-icon-athena.png'; @@ -70,6 +71,7 @@ import { MlModelServiceType } from '../generated/entity/services/mlmodelService' import { PipelineServiceType } from '../generated/entity/services/pipelineService'; export const NoDataFoundPlaceHolder = noDataFound; +export const AddPlaceHolder = addPlaceHolder; export const MYSQL = mysql; export const SQLITE = sqlite; export const MSSQL = mssql; diff --git a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetail.less b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetail.less index 20175b31ea4..73ac2dbd6a8 100644 --- a/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetail.less +++ b/openmetadata-ui/src/main/resources/ui/src/pages/PoliciesPage/PoliciesDetailPage/PoliciesDetail.less @@ -32,10 +32,10 @@ .ant-collapse-item { .ant-collapse-header { padding: 16px; + align-items: flex-start; .ant-collapse-arrow { color: @text-color; font-size: 14px; - margin-right: 6px; } } } diff --git a/openmetadata-ui/src/main/resources/ui/src/styles/app.less b/openmetadata-ui/src/main/resources/ui/src/styles/app.less index ad15190cd94..0ac96a099f4 100644 --- a/openmetadata-ui/src/main/resources/ui/src/styles/app.less +++ b/openmetadata-ui/src/main/resources/ui/src/styles/app.less @@ -23,3 +23,15 @@ margin-right: auto; margin-left: auto; } + +.flex-col { + flex-direction: column; +} + +.w-full { + width: 100%; +} + +.h-full { + width: 100%; +}