Change error placeholder for addData and noData (#7195)

This commit is contained in:
Ashish Gupta 2022-09-03 20:32:18 +05:30 committed by GitHub
parent 71d94fd6e1
commit a22b6317e5
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
17 changed files with 330 additions and 158 deletions

View File

@ -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');
});
});

View File

@ -0,0 +1,9 @@
<svg width="86" height="86" viewBox="0 0 86 86" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M51.0625 0H9.85417C4.4075 0 0 4.4075 0 9.85417V65.3958C0 70.8425 4.4075 75.25 9.85417 75.25H33.4683C31.5333 71.165 30.4583 66.6142 30.4583 61.8125C30.4583 57.6917 31.2467 53.75 32.7517 50.1308C33.4683 48.3033 34.3642 46.5475 35.4033 44.935C37.7325 41.3158 40.7425 38.2342 44.29 35.8333C46.1175 34.5792 48.0525 33.54 50.1308 32.7517C53.4633 31.3542 57.1183 30.5658 60.9167 30.4942V9.85417C60.9167 4.4075 56.5092 0 51.0625 0Z" fill="#DCE3EC"/>
<path d="M50.1667 32.2474C50.1667 32.4266 50.1667 32.6057 50.1308 32.7491C48.0525 33.5374 46.1175 34.5766 44.29 35.8307H14.3333C12.3625 35.8307 10.75 34.2182 10.75 32.2474C10.75 30.2766 12.3625 28.6641 14.3333 28.6641H46.5833C48.5542 28.6641 50.1667 30.2766 50.1667 32.2474Z" fill="#9CA3AF"/>
<path d="M35.4033 44.935C34.3642 46.5475 33.4683 48.3033 32.7517 50.1308C32.6083 50.1667 32.4292 50.1667 32.25 50.1667H14.3333C12.3625 50.1667 10.75 48.5542 10.75 46.5833C10.75 44.6125 12.3625 43 14.3333 43H32.25C33.6117 43 34.83 43.7883 35.4033 44.935Z" fill="#9CA3AF"/>
<path d="M28.6667 21.4987H14.3333C12.3553 21.4987 10.75 19.8934 10.75 17.9154C10.75 15.9374 12.3553 14.332 14.3333 14.332H28.6667C30.6447 14.332 32.25 15.9374 32.25 17.9154C32.25 19.8934 30.6447 21.4987 28.6667 21.4987Z" fill="#9CA3AF"/>
<path d="M61.8125 86C48.4753 86 37.625 75.1497 37.625 61.8125C37.625 48.4753 48.4753 37.625 61.8125 37.625C75.1497 37.625 86 48.4753 86 61.8125C86 75.1497 75.1497 86 61.8125 86Z" fill="#1890FF"/>
<path d="M61.8128 75.25C59.8348 75.25 58.2295 73.6447 58.2295 71.6667V51.9583C58.2295 49.9803 59.8348 48.375 61.8128 48.375C63.7908 48.375 65.3962 49.9803 65.3962 51.9583V71.6667C65.3962 73.6447 63.7908 75.25 61.8128 75.25Z" fill="white"/>
<path d="M71.6667 65.3971H51.9583C49.9803 65.3971 48.375 63.7918 48.375 61.8138C48.375 59.8358 49.9803 58.2305 51.9583 58.2305H71.6667C73.6447 58.2305 75.25 59.8358 75.25 61.8138C75.25 63.7918 73.6447 65.3971 71.6667 65.3971Z" fill="white"/>
</svg>

After

Width:  |  Height:  |  Size: 2.0 KiB

View File

@ -0,0 +1,40 @@
<svg width="92" height="92" viewBox="0 0 92 92" fill="none" xmlns="http://www.w3.org/2000/svg">
<g clip-path="url(#clip0_13876_31244)">
<g filter="url(#filter0_d_13876_31244)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M79.0012 60.9674L62.2389 40.6959C61.4345 39.7417 60.2589 39.1641 59.0209 39.1641H22.9809C21.7436 39.1641 20.568 39.7417 19.7636 40.6959L3.00195 60.9674V71.5579H79.002V60.9674H79.0012Z" fill="#9CA3AF"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.2048 13H64.8002C65.5435 13 66.2563 13.2901 66.7819 13.8066C67.3074 14.323 67.6027 15.0235 67.6027 15.7538V80.0169C67.6027 80.7473 67.3074 81.4477 66.7819 81.9642C66.2563 82.4806 65.5435 82.7707 64.8002 82.7707H17.2048C16.4616 82.7707 15.7487 82.4806 15.2232 81.9642C14.6976 81.4477 14.4023 80.7473 14.4023 80.0169V15.7538C14.4023 15.0235 14.6976 14.323 15.2232 13.8066C15.7487 13.2901 16.4616 13 17.2048 13V13Z" fill="#DCE3EC"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M78.8471 85.3111C78.3041 87.4254 76.397 89.0012 74.1284 89.0012H7.87548C5.60687 89.0012 3.69977 87.4247 3.15749 85.3111C3.05406 84.9082 3.00182 84.4943 3.00195 84.0788V60.9694H21.4409C23.4776 60.9694 25.1192 62.6548 25.1192 64.7009V64.7284C25.1192 66.7738 26.7797 68.4254 28.8164 68.4254H53.1875C55.2242 68.4254 56.8847 66.7586 56.8847 64.7126V64.7043C56.8847 62.6582 58.5263 60.9688 60.563 60.9688H79.002V84.0795C79.002 84.5043 78.948 84.9166 78.8471 85.3111Z" fill="#C9D2DD"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4035 19.8516H58.6007C58.9723 19.8516 59.3288 19.9966 59.5915 20.2549C59.8543 20.5131 60.0019 20.8633 60.0019 21.2285V38.4102C60.0019 38.7754 59.8543 39.1256 59.5915 39.3839C59.3288 39.6421 58.9723 39.7871 58.6007 39.7871H23.4035C23.0319 39.7871 22.6755 39.6421 22.4127 39.3839C22.1499 39.1256 22.0023 38.7754 22.0023 38.4102V21.2285C22.0023 20.8633 22.1499 20.5131 22.4127 20.2549C22.6755 19.9966 23.0319 19.8516 23.4035 19.8516ZM23.5871 47.2617H58.4171C58.8375 47.2617 59.2406 47.4258 59.5378 47.7178C59.835 48.0099 60.0019 48.406 60.0019 48.819C60.0019 49.232 59.835 49.6281 59.5378 49.9201C59.2406 50.2122 58.8375 50.3763 58.4171 50.3763H23.5871C23.1668 50.3763 22.7637 50.2122 22.4665 49.9201C22.1693 49.6281 22.0023 49.232 22.0023 48.819C22.0023 48.406 22.1693 48.0099 22.4665 47.7178C22.7637 47.4258 23.1668 47.2617 23.5871 47.2617ZM23.5871 55.36H58.4171C58.8376 55.36 59.2407 55.5241 59.538 55.8162C59.8353 56.1083 60.0023 56.5045 60.0023 56.9176C60.0023 57.3307 59.8353 57.7269 59.538 58.019C59.2407 58.3111 58.8376 58.4752 58.4171 58.4752H23.5871C23.1667 58.4752 22.7635 58.3111 22.4662 58.019C22.169 57.7269 22.002 57.3307 22.002 56.9176C22.002 56.5045 22.169 56.1083 22.4662 55.8162C22.7635 55.5241 23.1667 55.36 23.5871 55.36Z" fill="#9CA3AF"/>
</g>
<g filter="url(#filter1_d_13876_31244)">
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.936 21.3964L65.007 22.8608C64.9061 22.8985 64.7961 22.908 64.6898 22.8884C64.5835 22.8687 64.4851 22.8206 64.4059 22.7496C64.3268 22.6786 64.2701 22.5876 64.2424 22.487C64.2147 22.3864 64.2172 22.2804 64.2494 22.1811L65.3637 18.7512C63.8744 17.1244 63 15.1407 63 13C63 7.47699 68.8203 3 76.0006 3C83.1791 3 89 7.47699 89 13C89 18.523 83.1797 23 76 23C73.3953 23 70.97 22.411 68.936 21.3964Z" fill="#1890FF"/>
<path d="M80.7452 14.2017C81.64 14.2017 82.3653 13.4849 82.3653 12.6008C82.3653 11.7167 81.64 11 80.7452 11C79.8504 11 79.125 11.7167 79.125 12.6008C79.125 13.4849 79.8504 14.2017 80.7452 14.2017Z" fill="white"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M72.2403 14.0005H69L70.648 11.1992L72.2403 14.0005ZM74.2654 11.1992H77.1003V14.0005H74.2654V11.1992Z" fill="white"/>
</g>
</g>
<defs>
<filter id="filter0_d_13876_31244" x="1.00195" y="11" width="80" height="80" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset/>
<feGaussianBlur stdDeviation="1"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.12 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13876_31244"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13876_31244" result="shape"/>
</filter>
<filter id="filter1_d_13876_31244" x="59" y="1" width="34" height="28" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
<feFlood flood-opacity="0" result="BackgroundImageFix"/>
<feColorMatrix in="SourceAlpha" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0" result="hardAlpha"/>
<feOffset dy="2"/>
<feGaussianBlur stdDeviation="2"/>
<feComposite in2="hardAlpha" operator="out"/>
<feColorMatrix type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.1 0"/>
<feBlend mode="normal" in2="BackgroundImageFix" result="effect1_dropShadow_13876_31244"/>
<feBlend mode="normal" in="SourceGraphic" in2="effect1_dropShadow_13876_31244" result="shape"/>
</filter>
<clipPath id="clip0_13876_31244">
<rect width="92" height="92" fill="white"/>
</clipPath>
</defs>
</svg>

After

Width:  |  Height:  |  Size: 5.0 KiB

View File

@ -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 = ({
</div>
</div>
) : (
<ErrorPlaceHolder>
<p className="tw-mb-5">No test available.</p>
{addTestButton(false)}
</ErrorPlaceHolder>
<ErrorPlaceHolder
buttons={addTestButton(false)}
doc={DATA_QUALITY_DOCS}
heading="test"
type="ADD_DATA"
/>
)}
</div>
);

View File

@ -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 = ({
</PageLayout>
) : (
<PageLayout>
<ErrorPlaceHolder>
<p className="tw-text-center">No glossaries found</p>
<p className="tw-text-center">
<Button
className="tw-h-8 tw-rounded tw-my-3"
data-testid="add-webhook-button"
disabled={!createGlossaryPermission}
size="small"
theme="primary"
variant="contained"
onClick={handleAddGlossaryClick}>
Add New Glossary
</Button>
</p>
</ErrorPlaceHolder>
<ErrorPlaceHolder
buttonId="add-webhook-button"
buttonLabel="Add New Glossary"
buttonListener={handleAddGlossaryClick}
doc={GLOSSARIES_DOCS}
heading="glossaries"
type="ADD_DATA"
/>
</PageLayout>
);
};

View File

@ -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<Props> = ({ sampleData }: Props) => {
</tbody>
</table>
) : (
<div className="tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8">
<Empty
description={
<>
<p>No sample data available</p>
<p className="tw-mt-2">
To view Sample Data, run the Profiler Ingestion. Please
refer to this doc to schedule the{' '}
<Link
className="tw-ml-1"
target="_blank"
to={{
pathname:
'https://docs.open-metadata.org/openmetadata/ingestion/workflows/profiler',
}}>
Profiler Ingestion
</Link>
</p>
</>
}
/>
<div className="tw-flex tw-flex-col tw-justify-center tw-font-medium tw-items-center tw-p-8">
<div className="tw-mt-12">
<img alt="No Service" src={NoDataFoundPlaceHolder} width={120} />
</div>
<div className="tw-mt-8 tw-max-w-x tw-text-center">
<Typography.Paragraph style={{ marginBottom: '4px' }}>
{' '}
No sample data available
</Typography.Paragraph>
<Typography.Paragraph>
{' '}
To view Sample Data, run the Profiler Ingestion. Please refer to
this doc to schedule the{' '}
<Link
className="tw-ml-1"
target="_blank"
to={{
pathname: WORKFLOWS_PROFILER_DOCS,
}}>
Profiler Ingestion
</Link>
</Typography.Paragraph>
</div>
</div>
)}
</div>

View File

@ -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<SampleDataTopicProp> = ({ sampleData }) => {
} else {
return (
<div
className="tw-flex tw-justify-center tw-font-medium tw-items-center tw-border tw-border-main tw-rounded-md tw-p-8"
className="tw-flex tw-flex-col tw-justify-center tw-font-medium tw-items-center tw-p-8"
data-testid="no-data">
<Empty
description={
<>
<p>No sample data available</p>
<p className="tw-mt-2">
To view Sample Data, run the MetaData Ingestion. Please refer to
this doc to schedule the{' '}
<Link
className="tw-ml-1"
target="_blank"
to={{
pathname:
'https://docs.open-metadata.org/openmetadata/ingestion/workflows/metadata',
}}>
MetaData Ingestion
</Link>
</p>
</>
}
/>
<div className="tw-mt-12">
<img alt="No Service" src={NoDataFoundPlaceHolder} width={120} />
</div>
<div className="tw-mt-8 tw-max-w-x tw-text-center">
<Typography.Paragraph style={{ marginBottom: '4px' }}>
{' '}
No sample data available
</Typography.Paragraph>
<Typography.Paragraph>
{' '}
To view Sample Data, run the MetaData Ingestion. Please refer to
this doc to schedule the{' '}
<Link
className="tw-ml-1"
target="_blank"
to={{
pathname: WORKFLOWS_METADATA_DOCS,
}}>
MetaData Ingestion
</Link>
</Typography.Paragraph>
</div>
</div>
);
}

View File

@ -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 = ({
) : (
<div className="tw-flex tw-items-center tw-flex-col">
<div className="tw-mt-24">
<img alt="No Service" src={NoDataFoundPlaceHolder} width={250} />
<img alt="No Service" src={AddPlaceHolder} width={120} />
</div>
<div className="tw-mt-11">
<p className="tw-text-lg tw-text-center">No services found</p>
<div className="tw-mt-8 tw-max-w-x tw-text-center">
<Paragraph style={{ marginBottom: '4px' }}>
{' '}
Adding a new {servicesDisplayName[serviceName]} is easy, just give
it a spin!
</Paragraph>
<Paragraph>
{' '}
Still need help? Refer to our{' '}
<AntdLink href={CONNECTORS_DOCS} target="_blank">
docs
</AntdLink>{' '}
for more information.
</Paragraph>
<div className="tw-text-lg tw-text-center">
<NonAdminAction
position="bottom"
@ -198,10 +214,9 @@ const Services = ({
theme="primary"
variant="outlined"
onClick={handleAddServiceClick}>
Click here
Add new {servicesDisplayName[serviceName]}
</Button>
</NonAdminAction>{' '}
to add new {servicesDisplayName[serviceName]}
</div>
</div>
</div>

View File

@ -655,24 +655,25 @@ const TeamDetails = ({
</div>
</Fragment>
) : (
<ErrorPlaceHolder>
<p className="tw-text-lg tw-text-center">No Teams Added.</p>
<div className="tw-text-lg tw-text-center">
<NonAdminAction
position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
disabled={!isActionAllowed()}
size="small"
theme="primary"
variant="outlined"
onClick={() => handleAddTeam(true)}>
Click here
</Button>
</NonAdminAction>
{' to add new Team'}
</div>
</ErrorPlaceHolder>
<ErrorPlaceHolder
buttons={
<div className="tw-text-lg tw-text-center">
<NonAdminAction
position="bottom"
title={TITLE_FOR_NON_ADMIN_ACTION}>
<Button
disabled={!isActionAllowed()}
size="small"
theme="primary"
variant="outlined"
onClick={() => handleAddTeam(true)}>
Add new Team
</Button>
</NonAdminAction>
</div>
}
heading="Teams"
/>
)}
{deletingUser.state && (

View File

@ -935,23 +935,24 @@ const TeamDetailsV1 = ({
</div>
</Fragment>
) : (
<ErrorPlaceHolder>
<p className="tw-text-lg tw-text-center">No Teams Added.</p>
<div className="tw-text-lg tw-text-center">
<Button
disabled={!createTeamPermission}
size="small"
theme="primary"
title={
createTeamPermission ? 'Add Team' : NO_PERMISSION_FOR_ACTION
}
variant="outlined"
onClick={() => handleAddTeam(true)}>
Click here
</Button>
{' to add new Team'}
</div>
</ErrorPlaceHolder>
<ErrorPlaceHolder
buttons={
<div className="tw-text-lg tw-text-center">
<Button
disabled={!createTeamPermission}
size="small"
theme="primary"
title={
createTeamPermission ? 'Add Team' : NO_PERMISSION_FOR_ACTION
}
variant="outlined"
onClick={() => handleAddTeam(true)}>
Add new Team
</Button>
</div>
}
heading="Teams"
/>
)}
{deletingUser.state && (

View File

@ -75,27 +75,31 @@ const WebhooksV1: FC<WebhooksV1Props> = ({
const fetchErrorPlaceHolder = useMemo(
() => (message: string) => {
return (
<ErrorPlaceHolder>
<p className="tw-text-center">{message}</p>
<p className="tw-text-center">
<Tooltip
placement="left"
title={
addWebhookPermission ? 'Add Webhook' : NO_PERMISSION_FOR_ACTION
}>
<Button
className={classNames('tw-h-8 tw-rounded tw-my-3')}
data-testid="add-webhook-button"
disabled={!addWebhookPermission}
size="small"
theme="primary"
variant="contained"
onClick={onAddWebhook}>
Add {WEBHOOKS_INTEGRATION[webhookType]}
</Button>
</Tooltip>
</p>
</ErrorPlaceHolder>
<ErrorPlaceHolder
buttons={
<p className="tw-text-center">
<Tooltip
placement="left"
title={
addWebhookPermission
? 'Add Webhook'
: NO_PERMISSION_FOR_ACTION
}>
<Button
className={classNames('tw-h-8 tw-rounded tw-my-3')}
data-testid="add-webhook-button"
disabled={!addWebhookPermission}
size="small"
theme="primary"
variant="contained"
onClick={onAddWebhook}>
Add {WEBHOOKS_INTEGRATION[webhookType]}
</Button>
</Tooltip>
</p>
}
heading={message}
/>
);
},
[]

View File

@ -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) => (
<>
<div
className="tw-flex tw-flex-col tw-mt-24 tw-place-items-center"
data-testid="error">
{' '}
<img
data-testid="no-data-image"
src={NoDataFoundPlaceHolder}
width="200"
/>
</div>
{children && (
<div className="tw-flex tw-flex-col tw-items-center tw-mt-10 tw-text-base tw-font-medium">
{children}
const ErrorPlaceHolder = ({
doc,
type,
children,
heading,
buttonLabel,
buttonListener,
buttons,
buttonId,
}: Props) => {
const { Paragraph, Link } = Typography;
return type === 'ADD_DATA' ? (
<>
<div className="flex-center flex-col tw-mt-24 " data-testid="error">
{' '}
<img data-testid="no-data-image" src={AddPlaceHolder} width="100" />
</div>
)}
</>
);
<div className="tw-flex tw-flex-col tw-items-center tw-mt-10 tw-text-base tw-font-medium">
<Paragraph style={{ marginBottom: '4px' }}>
{' '}
Adding a new {heading} is easy, just give it a spin!
</Paragraph>
<Paragraph>
{' '}
Still need help? Refer to our{' '}
<Link href={doc} target="_blank">
docs
</Link>{' '}
for more information.
</Paragraph>
<div className="tw-text-lg tw-text-center">
{buttons ? (
buttons
) : (
<Button
data-testId={buttonId}
size="small"
theme="primary"
onClick={buttonListener}>
{buttonLabel}
</Button>
)}
</div>
</div>
</>
) : (
<div className="flex-center flex-col tw-mt-24 w-full">
<div data-testid="error">
<img
data-testid="no-data-image"
src={NoDataFoundPlaceHolder}
width="100"
/>
</div>
{children && (
<div className="tw-flex tw-flex-col tw-items-center tw-mt-8 tw-text-base tw-font-medium">
{children}
</div>
)}
</div>
);
};
export default ErrorPlaceHolder;

View File

@ -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 (
<p className="tw-text-center" data-testid="no-search-results">
No matching data assets found
{query ? (
<>
{' '}
for <span className="tw-text-primary tw-font-medium">{query}</span>
</>
) : null}
</p>
<div className="tw-text-center" data-testid="no-search-results">
<div className="flex-center flex-col tw-mt-32 " data-testid="error">
{' '}
<img
data-testid="no-data-image"
src={NoDataFoundPlaceHolder}
width="100"
/>
</div>
<div className="tw-flex tw-flex-col tw-items-center tw-mt-6 tw-text-base tw-font-medium">
No matching data assets found
{query ? (
<>
{' '}
for{' '}
<span className="tw-text-primary tw-font-medium">{query}</span>
</>
) : null}
</div>
</div>
);
};

View File

@ -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';

View File

@ -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;

View File

@ -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;
}
}
}

View File

@ -23,3 +23,15 @@
margin-right: auto;
margin-left: auto;
}
.flex-col {
flex-direction: column;
}
.w-full {
width: 100%;
}
.h-full {
width: 100%;
}