mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-10-17 03:38:18 +00:00
MINOR: fix help dropdown item font and icon sizes (#15511)
* fix help dropdown item font and icon sizes * added unit test for navbarUtils * fix sonar failure * changes as per comments * minor fixes
This commit is contained in:
Ashish Gupta
GitHub
parent
389bee0f31
commit
5dbc847278
@ -1,11 +1,16 @@
|
||||
<svg viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_14106_20469)">
|
||||
<path d="M13.8516 8.08238C13.7205 8.08238 13.5947 8.13448 13.502 8.22722C13.4092 8.31995 13.3571 8.44573 13.3571 8.57689V13.0274C13.3571 13.4209 13.2008 13.7982 12.9226 14.0764C12.6444 14.3547 12.2671 14.511 11.8736 14.511H2.97253C2.57907 14.511 2.20174 14.3547 1.92352 14.0764C1.64531 13.7982 1.48901 13.4209 1.48901 13.0274V4.12634C1.48901 3.73288 1.64531 3.35554 1.92352 3.07733C2.20174 2.79912 2.57907 2.64282 2.97253 2.64282H7.42308C7.55423 2.64282 7.68001 2.59072 7.77275 2.49798C7.86548 2.40524 7.91758 2.27947 7.91758 2.14831C7.91758 2.01716 7.86548 1.89138 7.77275 1.79865C7.68001 1.70591 7.55423 1.65381 7.42308 1.65381H2.97253C2.31677 1.65381 1.68788 1.91431 1.22419 2.378C0.760498 2.84168 0.5 3.47058 0.5 4.12634V13.0274C0.5 13.6832 0.760498 14.3121 1.22419 14.7758C1.68788 15.2395 2.31677 15.5 2.97253 15.5H11.8736C12.5294 15.5 13.1583 15.2395 13.622 14.7758C14.0857 14.3121 14.3462 13.6832 14.3462 13.0274V8.57689C14.3462 8.44573 14.2941 8.31995 14.2013 8.22722C14.1086 8.13448 13.9828 8.08238 13.8516 8.08238Z" fill="currentColor" stroke="currentColor" stroke-width="0.1"/>
|
||||
<path d="M10.5551 1.73627H13.3923L6.40745 8.71498C6.34952 8.77244 6.30353 8.84081 6.27215 8.91613C6.24077 8.99146 6.22461 9.07225 6.22461 9.15385C6.22461 9.23545 6.24077 9.31625 6.27215 9.39157C6.30353 9.4669 6.34952 9.53526 6.40745 9.59272C6.46491 9.65066 6.53328 9.69665 6.60861 9.72803C6.68393 9.75941 6.76472 9.77557 6.84632 9.77557C6.92793 9.77557 7.00872 9.75941 7.08404 9.72803C7.15937 9.69665 7.22773 9.65066 7.2852 9.59272L14.2639 2.61402V5.44506C14.2639 5.609 14.329 5.76622 14.4449 5.88215C14.5609 5.99807 14.7181 6.06319 14.882 6.06319C15.046 6.06319 15.2032 5.99807 15.3191 5.88215C15.435 5.76622 15.5002 5.609 15.5002 5.44506V1.11814C15.5006 1.03679 15.485 0.956149 15.4543 0.880837C15.4235 0.805525 15.3782 0.737027 15.3209 0.679268C15.2631 0.621979 15.1947 0.576655 15.1193 0.545893C15.044 0.515132 14.9634 0.49954 14.882 0.50001H10.5551C10.3912 0.50001 10.234 0.565135 10.118 0.681057C10.0021 0.796979 9.93698 0.954203 9.93698 1.11814C9.93698 1.28208 10.0021 1.4393 10.118 1.55523C10.234 1.67115 10.3912 1.73627 10.5551 1.73627Z" fill="currentColor" stroke="currentColor" stroke-width="0.1"/>
|
||||
<svg viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<g clip-path="url(#clip0_2439_39034)">
|
||||
<mask id="mask0_2439_39034" style="mask-type:luminance" maskUnits="userSpaceOnUse" x="5" y="5" width="30" height="30">
|
||||
<path d="M5 5H35V35H5V5Z" fill="white"/>
|
||||
</mask>
|
||||
<g mask="url(#mask0_2439_39034)">
|
||||
<path d="M30.9725 20.1537C30.8505 20.1535 30.7297 20.1773 30.617 20.2239C30.5043 20.2704 30.4019 20.3388 30.3157 20.425C30.2294 20.5113 30.1611 20.6137 30.1145 20.7264C30.068 20.8391 30.0441 20.9599 30.0444 21.0819V29.4256C30.0446 29.7909 29.9729 30.1527 29.8332 30.4903C29.6936 30.8279 29.4888 31.1346 29.2306 31.393C28.9724 31.6514 28.6658 31.8564 28.3283 31.9963C27.9908 32.1361 27.6291 32.2081 27.2637 32.2081H10.5744C10.2089 32.2084 9.84697 32.1366 9.50927 31.9968C9.17157 31.8571 8.86473 31.6521 8.6063 31.3937C8.34787 31.1353 8.14292 30.8284 8.00318 30.4907C7.86343 30.153 7.79163 29.7911 7.79188 29.4256V12.7381C7.79188 12.0002 8.08503 11.2924 8.60685 10.7706C9.12867 10.2488 9.83641 9.95562 10.5744 9.95562H18.9181C19.1643 9.95562 19.4004 9.85783 19.5744 9.68377C19.7485 9.50972 19.8462 9.27364 19.8462 9.02749C19.8462 8.78134 19.7485 8.54526 19.5744 8.37121C19.4004 8.19715 19.1643 8.09937 18.9181 8.09937H10.5744C9.96529 8.09937 9.36218 8.21936 8.79949 8.45251C8.23679 8.68565 7.72554 9.02736 7.29495 9.45814C6.86435 9.88891 6.52284 10.4003 6.28992 10.9631C6.05701 11.5259 5.93725 12.129 5.9375 12.7381V29.4275C5.938 30.6569 6.42674 31.8359 7.29627 32.705C8.1658 33.5742 9.34492 34.0625 10.5744 34.0625H27.2619C28.4916 34.0625 29.6711 33.574 30.5406 32.7044C31.4102 31.8348 31.8987 30.6554 31.8987 29.4256V21.0819C31.899 20.9601 31.8752 20.8394 31.8288 20.7268C31.7823 20.6142 31.7142 20.5119 31.6281 20.4257C31.5421 20.3395 31.4399 20.2711 31.3274 20.2244C31.2149 20.1778 31.0943 20.1537 30.9725 20.1537Z" fill="currentColor" stroke="currentColor" stroke-width="0.0875"/>
|
||||
<path d="M24.7906 8.25501H30.11L17.0131 21.3406C16.8763 21.4755 16.7752 21.6422 16.7188 21.8258C16.6624 22.0094 16.6526 22.2041 16.6902 22.3925C16.7277 22.5808 16.8115 22.7569 16.934 22.9049C17.0565 23.0528 17.2138 23.168 17.3919 23.24C17.6044 23.3285 17.8384 23.3517 18.0642 23.3066C18.2899 23.2615 18.4971 23.1502 18.6594 22.9869L31.745 9.90126V15.2094C31.745 15.5167 31.8671 15.8114 32.0844 16.0287C32.3017 16.2461 32.5964 16.3681 32.9037 16.3681C33.211 16.3681 33.5058 16.2461 33.7231 16.0287C33.9404 15.8114 34.0625 15.5167 34.0625 15.2094V7.09626C34.0636 6.78799 33.9422 6.49191 33.725 6.27314C33.6168 6.16599 33.4887 6.0812 33.3477 6.02362C33.2068 5.96603 33.056 5.93677 32.9037 5.93751H24.7906C24.4833 5.93751 24.1886 6.0596 23.9712 6.2769C23.7539 6.49421 23.6319 6.78894 23.6319 7.09626C23.6319 7.40358 23.7539 7.69832 23.9712 7.91562C24.1886 8.13293 24.4833 8.25501 24.7906 8.25501Z" fill="currentColor" stroke="currentColor" stroke-width="0.0875"/>
|
||||
</g>
|
||||
</g>
|
||||
<defs>
|
||||
<clipPath id="clip0_14106_20469">
|
||||
<rect width="16" height="16" fill="white"/>
|
||||
<clipPath id="clip0_2439_39034">
|
||||
<rect width="30" height="30" fill="white" transform="translate(5 5)"/>
|
||||
</clipPath>
|
||||
</defs>
|
||||
</svg>
|
||||
|
Before Width: | Height: | Size: 2.4 KiB After Width: | Height: | Size: 2.9 KiB |
@ -11,36 +11,16 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Col, Row } from 'antd';
|
||||
import { AxiosError } from 'axios';
|
||||
import { isString } from 'lodash';
|
||||
import Qs from 'qs';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link, useHistory, useLocation } from 'react-router-dom';
|
||||
import { useHistory, useLocation } from 'react-router-dom';
|
||||
import { toast } from 'react-toastify';
|
||||
import { ReactComponent as IconAPI } from '../../assets/svg/api.svg';
|
||||
import { ReactComponent as IconDoc } from '../../assets/svg/doc.svg';
|
||||
import { ReactComponent as IconExternalLink } from '../../assets/svg/external-links.svg';
|
||||
import { ReactComponent as IconTour } from '../../assets/svg/icon-tour.svg';
|
||||
import { ReactComponent as IconSlackGrey } from '../../assets/svg/slack-grey.svg';
|
||||
import { ReactComponent as IconVersionBlack } from '../../assets/svg/version-black.svg';
|
||||
import { ReactComponent as IconWhatsNew } from '../../assets/svg/whats-new.svg';
|
||||
import {
|
||||
getExplorePath,
|
||||
ROUTES,
|
||||
TOUR_SEARCH_TERM,
|
||||
} from '../../constants/constants';
|
||||
import {
|
||||
urlGitbookDocs,
|
||||
urlGithubRepo,
|
||||
urlJoinSlack,
|
||||
} from '../../constants/URL.constants';
|
||||
import { getExplorePath, TOUR_SEARCH_TERM } from '../../constants/constants';
|
||||
import { useGlobalSearchProvider } from '../../context/GlobalSearchProvider/GlobalSearchProvider';
|
||||
import { useTourProvider } from '../../context/TourProvider/TourProvider';
|
||||
import { CurrentTourPageType } from '../../enums/tour.enum';
|
||||
import { getVersion } from '../../rest/miscAPI';
|
||||
import {
|
||||
extractDetailsFromToken,
|
||||
isProtectedRoute,
|
||||
@ -48,7 +28,6 @@ import {
|
||||
} from '../../utils/AuthProvider.util';
|
||||
import { addToRecentSearched } from '../../utils/CommonUtils';
|
||||
import searchClassBase from '../../utils/SearchClassBase';
|
||||
import { showErrorToast } from '../../utils/ToastUtils';
|
||||
import { useAuthContext } from '../Auth/AuthProviders/AuthProvider';
|
||||
import NavBar from '../NavBar/NavBar';
|
||||
import './app-bar.style.less';
|
||||
@ -78,12 +57,6 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
const [searchValue, setSearchValue] = useState(searchQuery);
|
||||
|
||||
const [isOpen, setIsOpen] = useState<boolean>(false);
|
||||
const [isFeatureModalOpen, setIsFeatureModalOpen] = useState<boolean>(false);
|
||||
const [version, setVersion] = useState<string>('');
|
||||
|
||||
const handleFeatureModal = (value: boolean) => {
|
||||
setIsFeatureModalOpen(value);
|
||||
};
|
||||
|
||||
const handleSearchChange = (value: string) => {
|
||||
setSearchValue(value);
|
||||
@ -94,163 +67,6 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
}
|
||||
};
|
||||
|
||||
const supportLink = [
|
||||
{
|
||||
label: (
|
||||
<Row
|
||||
className="cursor-pointer"
|
||||
onClick={() => history.push(ROUTES.TOUR)}>
|
||||
<Col span={4}>
|
||||
<Icon
|
||||
className="align-middle m-r-xss"
|
||||
component={IconTour}
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<span className="text-base-color">{t('label.tour')}</span>
|
||||
</Col>
|
||||
</Row>
|
||||
),
|
||||
key: 'tour',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a
|
||||
className="link-title no-underline"
|
||||
href={urlGitbookDocs}
|
||||
rel="noreferrer"
|
||||
target="_blank">
|
||||
<Row className="cursor-pointer">
|
||||
<Col span={4}>
|
||||
<Icon
|
||||
className="align-middle"
|
||||
component={IconDoc}
|
||||
name="Doc icon"
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<span className="text-base-color">{t('label.doc-plural')}</span>
|
||||
|
||||
<IconExternalLink
|
||||
className="text-base-color m-l-xss"
|
||||
height={14}
|
||||
width={14}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</a>
|
||||
),
|
||||
key: 'docs',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<Link className="link-title no-underline" to={ROUTES.SWAGGER}>
|
||||
<Row className="cursor-pointer">
|
||||
<Col span={4}>
|
||||
<Icon
|
||||
className="align-middle"
|
||||
component={IconAPI}
|
||||
name="API icon"
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<span className="text-base-color">
|
||||
{t('label.api-uppercase')}
|
||||
</span>
|
||||
</Col>
|
||||
</Row>
|
||||
</Link>
|
||||
),
|
||||
key: 'api',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a
|
||||
className="link-title no-underline"
|
||||
href={urlJoinSlack}
|
||||
rel="noreferrer"
|
||||
target="_blank">
|
||||
<Row className="cursor-pointer">
|
||||
<Col span={4}>
|
||||
<Icon
|
||||
className="align-middle"
|
||||
component={IconSlackGrey}
|
||||
name="slack icon"
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<span className="text-base-color">
|
||||
{t('label.slack-support')}
|
||||
</span>
|
||||
<IconExternalLink
|
||||
className="text-base-color m-l-xss"
|
||||
height={14}
|
||||
width={14}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</a>
|
||||
),
|
||||
key: 'slack',
|
||||
},
|
||||
|
||||
{
|
||||
label: (
|
||||
<Row
|
||||
className="cursor-pointer"
|
||||
onClick={() => handleFeatureModal(true)}>
|
||||
<Col span={4}>
|
||||
<Icon
|
||||
className="align-middle"
|
||||
component={IconWhatsNew}
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<span className="text-base-color">{t('label.whats-new')}</span>
|
||||
</Col>
|
||||
</Row>
|
||||
),
|
||||
key: 'whats-new',
|
||||
},
|
||||
{
|
||||
label: (
|
||||
<a
|
||||
className="link-title no-underline"
|
||||
href={urlGithubRepo}
|
||||
rel="noreferrer"
|
||||
target="_blank">
|
||||
<Row className="cursor-pointer">
|
||||
<Col span={4}>
|
||||
<Icon
|
||||
className="align-middle"
|
||||
component={IconVersionBlack}
|
||||
name="Version icon"
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col span={20}>
|
||||
<span className="text-base-color">{`${t('label.version')} ${
|
||||
(version ? version : '?').split('-')[0]
|
||||
}`}</span>
|
||||
|
||||
<IconExternalLink
|
||||
className="text-base-color m-l-xss"
|
||||
height={14}
|
||||
width={14}
|
||||
/>
|
||||
</Col>
|
||||
</Row>
|
||||
</a>
|
||||
),
|
||||
key: 'versions',
|
||||
},
|
||||
];
|
||||
|
||||
const searchHandler = (value: string) => {
|
||||
if (!isTourOpen) {
|
||||
setIsOpen(false);
|
||||
@ -293,21 +109,6 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
searchHandler('');
|
||||
};
|
||||
|
||||
const fetchOMVersion = () => {
|
||||
getVersion()
|
||||
.then((res) => {
|
||||
setVersion(res.version);
|
||||
})
|
||||
.catch((err: AxiosError) => {
|
||||
showErrorToast(
|
||||
err,
|
||||
t('server.entity-fetch-error', {
|
||||
entity: t('label.version'),
|
||||
})
|
||||
);
|
||||
});
|
||||
};
|
||||
|
||||
useEffect(() => {
|
||||
setSearchValue(searchQuery);
|
||||
}, [searchQuery]);
|
||||
@ -317,10 +118,6 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
}
|
||||
}, [tourSearchValue, isTourOpen]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchOMVersion();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const handleDocumentVisibilityChange = () => {
|
||||
if (
|
||||
@ -348,16 +145,13 @@ const Appbar: React.FC = (): JSX.Element => {
|
||||
{isProtectedRoute(location.pathname) && isAuthenticated ? (
|
||||
<NavBar
|
||||
handleClear={handleClear}
|
||||
handleFeatureModal={handleFeatureModal}
|
||||
handleKeyDown={handleKeyDown}
|
||||
handleOnClick={handleOnclick}
|
||||
handleSearchBoxOpen={setIsOpen}
|
||||
handleSearchChange={handleSearchChange}
|
||||
isFeatureModalOpen={isFeatureModalOpen}
|
||||
isSearchBoxOpen={isOpen}
|
||||
pathname={location.pathname}
|
||||
searchValue={searchValue || ''}
|
||||
supportDropdown={supportLink}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
|
||||
@ -454,7 +454,7 @@ const ClassificationDetails = forwardRef(
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={VersionIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
onClick={versionHandler}>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Col, Row, Table, Tabs, Typography } from 'antd';
|
||||
import { ColumnsType } from 'antd/lib/table';
|
||||
import { AxiosError } from 'axios';
|
||||
@ -21,7 +22,10 @@ import React, { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { useHistory, useParams } from 'react-router-dom';
|
||||
import { ReactComponent as ExternalLinkIcon } from '../../../assets/svg/external-links.svg';
|
||||
import { getEntityDetailsPath } from '../../../constants/constants';
|
||||
import {
|
||||
DATA_ASSET_ICON_DIMENSION,
|
||||
getEntityDetailsPath,
|
||||
} from '../../../constants/constants';
|
||||
import { FEED_COUNT_INITIAL_DATA } from '../../../constants/entity.constants';
|
||||
import LineageProvider from '../../../context/LineageProvider/LineageProvider';
|
||||
import { usePermissionProvider } from '../../../context/PermissionProvider/PermissionProvider';
|
||||
@ -443,10 +447,10 @@ const DashboardDetails = ({
|
||||
<Typography.Link href={record.sourceUrl} target="_blank">
|
||||
<span className="break-all">{chartName}</span>
|
||||
|
||||
<ExternalLinkIcon
|
||||
className="m-l-xs flex-none"
|
||||
height={14}
|
||||
width={14}
|
||||
<Icon
|
||||
className="m-l-xs flex-none align-middle"
|
||||
component={ExternalLinkIcon}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
</Typography.Link>
|
||||
</div>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Col, Row, Space, Table, Tabs, TabsProps } from 'antd';
|
||||
import { ColumnsType } from 'antd/lib/table';
|
||||
import classNames from 'classnames';
|
||||
@ -18,7 +19,10 @@ import React, { FC, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link, useHistory, useParams } from 'react-router-dom';
|
||||
import { ReactComponent as IconExternalLink } from '../../../assets/svg/external-links.svg';
|
||||
import { getVersionPath } from '../../../constants/constants';
|
||||
import {
|
||||
DATA_ASSET_ICON_DIMENSION,
|
||||
getVersionPath,
|
||||
} from '../../../constants/constants';
|
||||
import { EntityField } from '../../../constants/Feeds.constants';
|
||||
import { EntityTabs, EntityType } from '../../../enums/entity.enum';
|
||||
import {
|
||||
@ -107,7 +111,11 @@ const DashboardVersion: FC<DashboardVersionProp> = ({
|
||||
<Space>
|
||||
<span>{getEntityName(record)}</span>
|
||||
|
||||
<IconExternalLink width={16} />
|
||||
<Icon
|
||||
className="m-l-xs flex-none align-middle"
|
||||
component={IconExternalLink}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
</Space>
|
||||
</Link>
|
||||
),
|
||||
|
||||
@ -107,7 +107,11 @@ export const ExtraInfoLink = ({
|
||||
<Typography.Link href={href} style={{ fontSize: '12px' }}>
|
||||
{value}{' '}
|
||||
</Typography.Link>
|
||||
<IconExternalLink className="m-l-xss " width={14} />{' '}
|
||||
<Icon
|
||||
className="m-l-xs"
|
||||
component={IconExternalLink}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
);
|
||||
@ -437,7 +441,7 @@ export const DataAssetsHeader = ({
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={TaskOpenIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
onClick={handleOpenTaskClick}>
|
||||
@ -454,7 +458,7 @@ export const DataAssetsHeader = ({
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={VersionIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
onClick={onVersionClick}>
|
||||
@ -476,7 +480,7 @@ export const DataAssetsHeader = ({
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={isFollowing ? StarFilledIcon : StarIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
loading={isFollowingLoading}
|
||||
@ -495,7 +499,7 @@ export const DataAssetsHeader = ({
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={ShareIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
onClick={handleShareButtonClick}
|
||||
|
||||
@ -170,7 +170,7 @@ function DataAssetsVersionHeader({
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={VersionIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
onClick={onVersionClick}>
|
||||
|
||||
@ -520,7 +520,7 @@ const DataProductsDetailsPage = ({
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={VersionIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
onClick={handleVersionClick}>
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
*/
|
||||
|
||||
import { CheckOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Button, Divider, Row, Space, Tooltip } from 'antd';
|
||||
import { ColumnsType } from 'antd/lib/table';
|
||||
import { AxiosError } from 'axios';
|
||||
@ -20,6 +21,7 @@ import React, { Fragment, useEffect, useMemo, useState } from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link, useHistory } from 'react-router-dom';
|
||||
import { ReactComponent as ExternalLinkIcon } from '../../../../assets/svg/external-links.svg';
|
||||
import { DATA_ASSET_ICON_DIMENSION } from '../../../../constants/constants';
|
||||
import { usePermissionProvider } from '../../../../context/PermissionProvider/PermissionProvider';
|
||||
import { ResourceEntity } from '../../../../context/PermissionProvider/PermissionProvider.interface';
|
||||
import { ERROR_PLACEHOLDER_TYPE } from '../../../../enums/common.enum';
|
||||
@ -336,7 +338,11 @@ const TestSuitePipelineTab = ({ testSuite }: Props) => {
|
||||
target="_blank">
|
||||
<Space align="center">
|
||||
{name}
|
||||
<ExternalLinkIcon className="align-middle" width={16} />
|
||||
<Icon
|
||||
className="align-middle"
|
||||
component={ExternalLinkIcon}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
</Space>
|
||||
</a>
|
||||
</Tooltip>
|
||||
|
||||
@ -593,7 +593,7 @@ const DomainDetailsPage = ({
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={VersionIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
onClick={handleVersionClick}>
|
||||
|
||||
@ -11,12 +11,14 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Col, Row, Typography } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import React from 'react';
|
||||
import { useTranslation } from 'react-i18next';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ReactComponent as IconExternalLink } from '../../../../assets/svg/external-links.svg';
|
||||
import { ICON_DIMENSION } from '../../../../constants/constants';
|
||||
import { CommonEntitySummaryInfoProps } from './CommonEntitySummaryInfo.interface';
|
||||
|
||||
function CommonEntitySummaryInfo({
|
||||
@ -55,10 +57,11 @@ function CommonEntitySummaryInfo({
|
||||
to={{ pathname: info.url }}>
|
||||
{info.value}
|
||||
{info.isExternal ? (
|
||||
<IconExternalLink
|
||||
<Icon
|
||||
className="m-l-xs"
|
||||
component={IconExternalLink}
|
||||
data-testid="external-link-icon"
|
||||
width={12}
|
||||
style={ICON_DIMENSION}
|
||||
/>
|
||||
) : null}
|
||||
</Link>
|
||||
|
||||
@ -537,7 +537,7 @@ const GlossaryHeader = ({
|
||||
<Icon
|
||||
className="vertical-align-text-top"
|
||||
component={VersionIcon}
|
||||
style={{ ...DATA_ASSET_ICON_DIMENSION }}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
}
|
||||
onClick={handleVersionClick}>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Button, Space, Tag, Tooltip, Typography } from 'antd';
|
||||
import classNames from 'classnames';
|
||||
import { t } from 'i18next';
|
||||
@ -21,6 +22,7 @@ import { ReactComponent as ExternalLinkIcon } from '../../../../assets/svg/exter
|
||||
import { ReactComponent as PlusIcon } from '../../../../assets/svg/plus-primary.svg';
|
||||
import {
|
||||
DE_ACTIVE_COLOR,
|
||||
ICON_DIMENSION,
|
||||
NO_DATA_PLACEHOLDER,
|
||||
SUCCESS_COLOR,
|
||||
TEXT_BODY_COLOR,
|
||||
@ -119,10 +121,11 @@ const GlossaryTermReferences = ({
|
||||
rel="noopener noreferrer"
|
||||
target="_blank">
|
||||
<div className="d-flex items-center">
|
||||
<ExternalLinkIcon
|
||||
<Icon
|
||||
className="m-r-xss"
|
||||
color={iconColor}
|
||||
width="12px"
|
||||
component={ExternalLinkIcon}
|
||||
data-testid="external-link-icon"
|
||||
style={{ ...ICON_DIMENSION, color: iconColor }}
|
||||
/>
|
||||
<span className={textClassName}>{ref.name}</span>
|
||||
</div>
|
||||
|
||||
@ -11,7 +11,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { MenuProps } from 'antd';
|
||||
import { ReactNode } from 'react';
|
||||
|
||||
export interface DropdownOption {
|
||||
@ -24,14 +23,11 @@ export interface DropdownOption {
|
||||
}
|
||||
|
||||
export interface NavBarProps {
|
||||
supportDropdown: MenuProps['items'];
|
||||
searchValue: string;
|
||||
isTourRoute?: boolean;
|
||||
isFeatureModalOpen: boolean;
|
||||
pathname: string;
|
||||
isSearchBoxOpen: boolean;
|
||||
handleSearchBoxOpen: (value: boolean) => void;
|
||||
handleFeatureModal: (value: boolean) => void;
|
||||
handleSearchChange: (value: string) => void;
|
||||
handleOnClick: () => void;
|
||||
handleClear: () => void;
|
||||
|
||||
@ -12,24 +12,23 @@
|
||||
*/
|
||||
import { act, fireEvent, render, screen } from '@testing-library/react';
|
||||
import React from 'react';
|
||||
import { HELP_ITEMS_ENUM } from '../../constants/Navbar.constants';
|
||||
import { getVersion } from '../../rest/miscAPI';
|
||||
import { getHelpDropdownItems } from '../../utils/NavbarUtils';
|
||||
import { mockUserData } from '../Settings/Users/mocks/User.mocks';
|
||||
import NavBar from './NavBar';
|
||||
|
||||
const mockHandleSearchBoxOpen = jest.fn();
|
||||
const mockFeatureModal = jest.fn();
|
||||
const mockHandleSearchChange = jest.fn();
|
||||
const mockHandleOnClick = jest.fn();
|
||||
const mockHandleKeyDown = jest.fn();
|
||||
const mockHandleClear = jest.fn();
|
||||
const mockProps = {
|
||||
supportDropdown: [],
|
||||
searchValue: 'searchValue',
|
||||
isTourRoute: false,
|
||||
isFeatureModalOpen: true,
|
||||
pathname: '',
|
||||
isSearchBoxOpen: false,
|
||||
handleSearchBoxOpen: mockHandleSearchBoxOpen,
|
||||
handleFeatureModal: mockFeatureModal,
|
||||
handleSearchChange: mockHandleSearchChange,
|
||||
handleOnClick: mockHandleOnClick,
|
||||
handleClear: mockHandleClear,
|
||||
@ -70,19 +69,13 @@ jest.mock('../Domain/DomainProvider/DomainProvider', () => ({
|
||||
})),
|
||||
}));
|
||||
jest.mock('../Modals/WhatsNewModal/WhatsNewModal', () => {
|
||||
return jest.fn().mockImplementation(
|
||||
({ onCancel, header }) =>
|
||||
mockProps.isFeatureModalOpen && (
|
||||
<div data-testid="whats-new-dialog">
|
||||
WhatsNewModal
|
||||
<p>{header}</p>
|
||||
<button data-testid="cancel-button" onClick={onCancel}>
|
||||
onCancel
|
||||
</button>
|
||||
</div>
|
||||
)
|
||||
);
|
||||
return jest
|
||||
.fn()
|
||||
.mockImplementation(() => (
|
||||
<p data-testid="whats-new-modal-close">WhatsNewModal</p>
|
||||
));
|
||||
});
|
||||
|
||||
jest.mock('../NotificationBox/NotificationBox.component', () => {
|
||||
return jest.fn().mockImplementation(({ onTabChange }) => (
|
||||
<div data-testid="tab-change" onClick={onTabChange}>
|
||||
@ -134,6 +127,25 @@ jest.mock('antd', () => ({
|
||||
}),
|
||||
}));
|
||||
|
||||
jest.mock('../../rest/miscAPI', () => ({
|
||||
getVersion: jest.fn().mockImplementation(() =>
|
||||
Promise.resolve({
|
||||
data: {
|
||||
version: '0.5.0-SNAPSHOT',
|
||||
},
|
||||
})
|
||||
),
|
||||
}));
|
||||
|
||||
jest.mock('../../utils/NavbarUtils', () => ({
|
||||
getHelpDropdownItems: jest.fn().mockReturnValue([
|
||||
{
|
||||
label: <p data-testid="whats-new">Whats New</p>,
|
||||
key: HELP_ITEMS_ENUM.WHATS_NEW,
|
||||
},
|
||||
]),
|
||||
}));
|
||||
|
||||
describe('Test NavBar Component', () => {
|
||||
it('Should render NavBar component', async () => {
|
||||
render(<NavBar {...mockProps} />);
|
||||
@ -161,6 +173,12 @@ describe('Test NavBar Component', () => {
|
||||
).toBeInTheDocument();
|
||||
});
|
||||
|
||||
it('should call getVersion onMount', () => {
|
||||
render(<NavBar {...mockProps} />);
|
||||
|
||||
expect(getVersion).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should handle search box open', () => {
|
||||
render(<NavBar {...mockProps} />);
|
||||
const searchBox = screen.getByTestId('searchBox');
|
||||
@ -203,13 +221,9 @@ describe('Test NavBar Component', () => {
|
||||
expect(mockHandleOnClick).toHaveBeenCalled();
|
||||
});
|
||||
|
||||
it('should call onCancel on modal close', async () => {
|
||||
it('should call getHelpDropdownItems function', async () => {
|
||||
render(<NavBar {...mockProps} searchValue="" />);
|
||||
const cancelButton = await screen.findAllByTestId('cancel-button');
|
||||
await act(async () => {
|
||||
fireEvent.click(cancelButton[0]);
|
||||
});
|
||||
|
||||
expect(mockFeatureModal).toHaveBeenCalled();
|
||||
expect(getHelpDropdownItems).toHaveBeenCalled();
|
||||
});
|
||||
});
|
||||
|
||||
@ -24,10 +24,12 @@ import {
|
||||
Space,
|
||||
Tooltip,
|
||||
} from 'antd';
|
||||
import { AxiosError } from 'axios';
|
||||
import classNames from 'classnames';
|
||||
import { CookieStorage } from 'cookie-storage';
|
||||
import i18next from 'i18next';
|
||||
import { debounce, upperCase } from 'lodash';
|
||||
import { MenuInfo } from 'rc-menu/lib/interface';
|
||||
import React, {
|
||||
useCallback,
|
||||
useEffect,
|
||||
@ -47,9 +49,11 @@ import {
|
||||
NOTIFICATION_READ_TIMER,
|
||||
SOCKET_EVENTS,
|
||||
} from '../../constants/constants';
|
||||
import { HELP_ITEMS_ENUM } from '../../constants/Navbar.constants';
|
||||
import { useGlobalSearchProvider } from '../../context/GlobalSearchProvider/GlobalSearchProvider';
|
||||
import { useWebSocketConnector } from '../../context/WebSocketProvider/WebSocketProvider';
|
||||
import { EntityTabs, EntityType } from '../../enums/entity.enum';
|
||||
import { getVersion } from '../../rest/miscAPI';
|
||||
import brandImageClassBase from '../../utils/BrandImage/BrandImageClassBase';
|
||||
import {
|
||||
hasNotificationPermission,
|
||||
@ -67,11 +71,13 @@ import {
|
||||
SupportedLocales,
|
||||
} from '../../utils/i18next/i18nextUtil';
|
||||
import { isCommandKeyPress, Keys } from '../../utils/KeyboardUtil';
|
||||
import { getHelpDropdownItems } from '../../utils/NavbarUtils';
|
||||
import {
|
||||
inPageSearchOptions,
|
||||
isInPageSearchAllowed,
|
||||
} from '../../utils/RouterUtils';
|
||||
import searchClassBase from '../../utils/SearchClassBase';
|
||||
import { showErrorToast } from '../../utils/ToastUtils';
|
||||
import { ActivityFeedTabs } from '../ActivityFeed/ActivityFeedTab/ActivityFeedTab.interface';
|
||||
import SearchOptions from '../AppBar/SearchOptions';
|
||||
import Suggestions from '../AppBar/Suggestions';
|
||||
@ -87,14 +93,11 @@ import popupAlertsCardsClassBase from './PopupAlertClassBase';
|
||||
const cookieStorage = new CookieStorage();
|
||||
|
||||
const NavBar = ({
|
||||
supportDropdown,
|
||||
searchValue,
|
||||
isFeatureModalOpen,
|
||||
isTourRoute = false,
|
||||
pathname,
|
||||
isSearchBoxOpen,
|
||||
handleSearchBoxOpen,
|
||||
handleFeatureModal,
|
||||
handleSearchChange,
|
||||
handleKeyDown,
|
||||
handleOnClick,
|
||||
@ -117,6 +120,22 @@ const NavBar = ({
|
||||
const [hasMentionNotification, setHasMentionNotification] =
|
||||
useState<boolean>(false);
|
||||
const [activeTab, setActiveTab] = useState<string>('Task');
|
||||
const [isFeatureModalOpen, setIsFeatureModalOpen] = useState<boolean>(false);
|
||||
const [version, setVersion] = useState<string>();
|
||||
|
||||
const fetchOMVersion = async () => {
|
||||
try {
|
||||
const res = await getVersion();
|
||||
setVersion(res.version);
|
||||
} catch (err) {
|
||||
showErrorToast(
|
||||
err as AxiosError,
|
||||
t('server.entity-fetch-error', {
|
||||
entity: t('label.version'),
|
||||
})
|
||||
);
|
||||
}
|
||||
};
|
||||
|
||||
const renderAlertCards = useMemo(() => {
|
||||
const cardList = popupAlertsCardsClassBase.alertsCards();
|
||||
@ -128,6 +147,12 @@ const NavBar = ({
|
||||
});
|
||||
}, []);
|
||||
|
||||
const handleSupportClick = ({ key }: MenuInfo): void => {
|
||||
if (key === HELP_ITEMS_ENUM.WHATS_NEW) {
|
||||
setIsFeatureModalOpen(true);
|
||||
}
|
||||
};
|
||||
|
||||
const entitiesSelect = useMemo(
|
||||
() => (
|
||||
<Select
|
||||
@ -302,6 +327,10 @@ const NavBar = ({
|
||||
};
|
||||
}, [socket]);
|
||||
|
||||
useEffect(() => {
|
||||
fetchOMVersion();
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
const targetNode = document.body;
|
||||
targetNode.addEventListener('keydown', handleKeyPress);
|
||||
@ -319,7 +348,7 @@ const NavBar = ({
|
||||
refreshPage();
|
||||
}, []);
|
||||
|
||||
const handleModalCancel = useCallback(() => handleFeatureModal(false), []);
|
||||
const handleModalCancel = useCallback(() => setIsFeatureModalOpen(false), []);
|
||||
|
||||
const handleSelectOption = useCallback((text: string) => {
|
||||
history.replace({
|
||||
@ -509,7 +538,10 @@ const NavBar = ({
|
||||
</Dropdown>
|
||||
|
||||
<Dropdown
|
||||
menu={{ items: supportDropdown }}
|
||||
menu={{
|
||||
items: getHelpDropdownItems(version),
|
||||
onClick: handleSupportClick,
|
||||
}}
|
||||
overlayStyle={{ width: 175 }}
|
||||
placement="bottomRight"
|
||||
trigger={['click']}>
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Card, Col, Radio, Row, Tabs, Typography } from 'antd';
|
||||
import Table, { ColumnsType } from 'antd/lib/table';
|
||||
import { AxiosError } from 'axios';
|
||||
@ -22,6 +23,7 @@ import { useTranslation } from 'react-i18next';
|
||||
import { Link, useHistory, useParams } from 'react-router-dom';
|
||||
import { ReactComponent as ExternalLinkIcon } from '../../../assets/svg/external-links.svg';
|
||||
import {
|
||||
DATA_ASSET_ICON_DIMENSION,
|
||||
getEntityDetailsPath,
|
||||
NO_DATA_PLACEHOLDER,
|
||||
} from '../../../constants/constants';
|
||||
@ -392,10 +394,10 @@ const PipelineDetails = ({
|
||||
<div className="d-flex items-center">
|
||||
<span className="break-all">{getEntityName(record)}</span>
|
||||
|
||||
<ExternalLinkIcon
|
||||
<Icon
|
||||
className="m-l-xs flex-none"
|
||||
height={14}
|
||||
width={14}
|
||||
component={ExternalLinkIcon}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
</div>
|
||||
</Link>
|
||||
|
||||
@ -41,7 +41,11 @@ import { ReactComponent as DeleteIcon } from '../../../../assets/svg/ic-delete.s
|
||||
import { ReactComponent as IconRestore } from '../../../../assets/svg/ic-restore.svg';
|
||||
import { ReactComponent as IconDropdown } from '../../../../assets/svg/menu.svg';
|
||||
|
||||
import { DE_ACTIVE_COLOR } from '../../../../constants/constants';
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import {
|
||||
DE_ACTIVE_COLOR,
|
||||
ICON_DIMENSION,
|
||||
} from '../../../../constants/constants';
|
||||
import { GlobalSettingOptions } from '../../../../constants/GlobalSettings.constants';
|
||||
import { ServiceCategory } from '../../../../enums/service.enum';
|
||||
import {
|
||||
@ -503,7 +507,7 @@ const AppDetails = () => {
|
||||
|
||||
{appData?.developerUrl && (
|
||||
<div className="flex-center gap-2">
|
||||
<IconExternalLink width={12} />
|
||||
<Icon component={IconExternalLink} style={ICON_DIMENSION} />
|
||||
<Typography.Link
|
||||
className="text-xs"
|
||||
href={appData?.developerUrl}
|
||||
|
||||
@ -23,7 +23,7 @@ import { ReactComponent as IconExternalLink } from '../../../assets/svg/external
|
||||
import { ReactComponent as DomainIcon } from '../../../assets/svg/ic-domain.svg';
|
||||
import { ReactComponent as IconInfoSecondary } from '../../../assets/svg/icon-info.svg';
|
||||
import { ReactComponent as IconTeamsGrey } from '../../../assets/svg/teams-grey.svg';
|
||||
import { DE_ACTIVE_COLOR } from '../../../constants/constants';
|
||||
import { DE_ACTIVE_COLOR, ICON_DIMENSION } from '../../../constants/constants';
|
||||
import { Dashboard } from '../../../generated/entity/data/dashboard';
|
||||
import { TagLabel } from '../../../generated/type/tagLabel';
|
||||
import { getTeamsUser } from '../../../utils/CommonUtils';
|
||||
@ -215,7 +215,7 @@ const EntitySummaryDetails = ({ data }: GetInfoElementsProps) => {
|
||||
{data.openInNewTab && (
|
||||
<>
|
||||
|
||||
<IconExternalLink width={12} />
|
||||
<Icon component={IconExternalLink} style={ICON_DIMENSION} />
|
||||
</>
|
||||
)}
|
||||
</a>
|
||||
|
||||
@ -0,0 +1,88 @@
|
||||
/*
|
||||
* Copyright 2024 Collate.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ReactComponent as IconAPI } from '../assets/svg/api.svg';
|
||||
import { ReactComponent as IconDoc } from '../assets/svg/doc.svg';
|
||||
import { ReactComponent as IconTour } from '../assets/svg/icon-tour.svg';
|
||||
import { ReactComponent as IconSlackGrey } from '../assets/svg/slack-grey.svg';
|
||||
import { ReactComponent as IconVersionBlack } from '../assets/svg/version-black.svg';
|
||||
import { ReactComponent as IconWhatsNew } from '../assets/svg/whats-new.svg';
|
||||
|
||||
import i18n from '../utils/i18next/LocalUtil';
|
||||
import { ROUTES } from './constants';
|
||||
import {
|
||||
URL_GITHUB_REPO,
|
||||
URL_JOIN_SLACK,
|
||||
URL_OPEN_METADATA_DOCS,
|
||||
} from './URL.constants';
|
||||
|
||||
export enum HELP_ITEMS_ENUM {
|
||||
TOUR = 'tour',
|
||||
DOC = 'doc',
|
||||
API = 'api',
|
||||
SLACK = 'slack',
|
||||
WHATS_NEW = 'whats-new',
|
||||
VERSION = 'version',
|
||||
}
|
||||
|
||||
export interface SupportItem {
|
||||
key: HELP_ITEMS_ENUM;
|
||||
label: string;
|
||||
icon: SvgComponent;
|
||||
link?: string;
|
||||
isExternal: boolean;
|
||||
}
|
||||
|
||||
export const HELP_ITEMS = [
|
||||
{
|
||||
key: HELP_ITEMS_ENUM.TOUR,
|
||||
label: i18n.t('label.tour'),
|
||||
icon: IconTour,
|
||||
link: ROUTES.TOUR,
|
||||
isExternal: false,
|
||||
},
|
||||
{
|
||||
key: HELP_ITEMS_ENUM.DOC,
|
||||
label: i18n.t('label.doc-plural'),
|
||||
icon: IconDoc,
|
||||
link: URL_OPEN_METADATA_DOCS,
|
||||
isExternal: true,
|
||||
},
|
||||
{
|
||||
key: HELP_ITEMS_ENUM.API,
|
||||
label: i18n.t('label.api-uppercase'),
|
||||
icon: IconAPI,
|
||||
link: ROUTES.SWAGGER,
|
||||
isExternal: false,
|
||||
},
|
||||
{
|
||||
key: HELP_ITEMS_ENUM.SLACK,
|
||||
label: i18n.t('label.slack-support'),
|
||||
icon: IconSlackGrey,
|
||||
link: URL_JOIN_SLACK,
|
||||
isExternal: true,
|
||||
},
|
||||
{
|
||||
key: HELP_ITEMS_ENUM.WHATS_NEW,
|
||||
label: i18n.t('label.whats-new'),
|
||||
icon: IconWhatsNew,
|
||||
isExternal: false,
|
||||
},
|
||||
{
|
||||
key: HELP_ITEMS_ENUM.VERSION,
|
||||
label: i18n.t('label.version'),
|
||||
icon: IconVersionBlack,
|
||||
link: URL_GITHUB_REPO,
|
||||
isExternal: true,
|
||||
},
|
||||
];
|
||||
@ -11,6 +11,6 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
export const urlJoinSlack = 'https://slack.open-metadata.org';
|
||||
export const urlGitbookDocs = 'https://docs.open-metadata.org/';
|
||||
export const urlGithubRepo = 'https://github.com/open-metadata/OpenMetadata';
|
||||
export const URL_JOIN_SLACK = 'https://slack.open-metadata.org';
|
||||
export const URL_OPEN_METADATA_DOCS = 'https://docs.open-metadata.org/';
|
||||
export const URL_GITHUB_REPO = 'https://github.com/open-metadata/OpenMetadata';
|
||||
|
||||
@ -12,6 +12,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Divider, Typography } from 'antd';
|
||||
import { t } from 'i18next';
|
||||
import { isEmpty, isUndefined, toString } from 'lodash';
|
||||
@ -22,6 +23,7 @@ import {
|
||||
VersionExtraInfoLink,
|
||||
} from '../components/DataAssets/DataAssetsVersionHeader/DataAssetsVersionHeader';
|
||||
import { DataAssetsVersionHeaderProps } from '../components/DataAssets/DataAssetsVersionHeader/DataAssetsVersionHeader.interface';
|
||||
import { DATA_ASSET_ICON_DIMENSION } from '../constants/constants';
|
||||
import { EntityField } from '../constants/Feeds.constants';
|
||||
import { EntityType } from '../enums/entity.enum';
|
||||
import { Dashboard } from '../generated/entity/data/dashboard';
|
||||
@ -66,7 +68,11 @@ export const getExtraInfoSourceUrl = (
|
||||
style={{ fontSize: '12px' }}>
|
||||
{getEntityName(pipelineDetails)}{' '}
|
||||
</Typography.Link>
|
||||
<IconExternalLink className="m-l-xss " width={14} />{' '}
|
||||
<Icon
|
||||
className="m-l-xss"
|
||||
component={IconExternalLink}
|
||||
style={DATA_ASSET_ICON_DIMENSION}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
|
||||
@ -11,6 +11,7 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Typography } from 'antd';
|
||||
import { get, isEmpty, isUndefined } from 'lodash';
|
||||
import React from 'react';
|
||||
@ -21,7 +22,7 @@ import {
|
||||
BasicEntityInfo,
|
||||
HighlightedTagLabel,
|
||||
} from '../components/Explore/EntitySummaryPanel/SummaryList/SummaryList.interface';
|
||||
import { NO_DATA_PLACEHOLDER } from '../constants/constants';
|
||||
import { ICON_DIMENSION, NO_DATA_PLACEHOLDER } from '../constants/constants';
|
||||
import { SummaryListHighlightKeys } from '../constants/EntitySummaryPanelUtils.constant';
|
||||
import { SummaryEntityType } from '../enums/EntitySummary.enum';
|
||||
import { Chart } from '../generated/entity/data/chart';
|
||||
@ -66,14 +67,14 @@ export const getTitle = (
|
||||
|
||||
return sourceUrl ? (
|
||||
<Link target="_blank" to={{ pathname: sourceUrl }}>
|
||||
<div className="d-flex">
|
||||
<div className="d-flex items-center">
|
||||
<Text
|
||||
className="entity-title text-link-color font-medium m-r-xss"
|
||||
data-testid="entity-title"
|
||||
ellipsis={{ tooltip: true }}>
|
||||
{title}
|
||||
</Text>
|
||||
<IconExternalLink width={12} />
|
||||
<Icon component={IconExternalLink} style={ICON_DIMENSION} />
|
||||
</div>
|
||||
</Link>
|
||||
) : (
|
||||
|
||||
@ -0,0 +1,61 @@
|
||||
/*
|
||||
* Copyright 2024 Collate.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import { ROUTES } from '../constants/constants';
|
||||
import { HELP_ITEMS_ENUM } from '../constants/Navbar.constants';
|
||||
import { URL_GITHUB_REPO } from '../constants/URL.constants';
|
||||
import { getHelpDropdownItems } from './NavbarUtils';
|
||||
|
||||
describe('NavbarUtils test', () => {
|
||||
it('getHelpDropdownItems should return helpDropdown items', () => {
|
||||
const version = '1.3.1';
|
||||
const helpDropdownItems = getHelpDropdownItems(version);
|
||||
|
||||
expect(helpDropdownItems).toHaveLength(6);
|
||||
|
||||
// Test the External item
|
||||
expect(helpDropdownItems[5].label).toBeDefined();
|
||||
expect(helpDropdownItems[5].key).toBe(HELP_ITEMS_ENUM.VERSION);
|
||||
|
||||
// Test external link
|
||||
const externalLink = helpDropdownItems[5].label.props.href;
|
||||
|
||||
expect(externalLink).toBe(URL_GITHUB_REPO);
|
||||
expect(helpDropdownItems[5].label.props.target).toBe('_blank');
|
||||
expect(helpDropdownItems[5].label.props.rel).toBe('noreferrer');
|
||||
|
||||
expect(JSON.stringify(helpDropdownItems[5].label.props.children)).toContain(
|
||||
'1.3.1'
|
||||
);
|
||||
|
||||
// Test the Internal item
|
||||
expect(helpDropdownItems[0].label).toBeDefined();
|
||||
expect(helpDropdownItems[0].key).toBe(HELP_ITEMS_ENUM.TOUR);
|
||||
|
||||
// Test internal link
|
||||
const internalLink = helpDropdownItems[0].label.props.to;
|
||||
|
||||
expect(internalLink).toBe(ROUTES.TOUR);
|
||||
|
||||
// Test for No link item
|
||||
expect(helpDropdownItems[4].label).toBeDefined();
|
||||
expect(helpDropdownItems[4].key).toBe(HELP_ITEMS_ENUM.WHATS_NEW);
|
||||
|
||||
// Test element without link
|
||||
const noLinkElement1 = helpDropdownItems[4].label.props.href;
|
||||
const noLinkElement2 = helpDropdownItems[4].label.props.to;
|
||||
|
||||
expect(noLinkElement1).toBeUndefined();
|
||||
expect(noLinkElement2).toBeUndefined();
|
||||
});
|
||||
});
|
||||
@ -0,0 +1,83 @@
|
||||
/*
|
||||
* Copyright 2024 Collate.
|
||||
* Licensed under the Apache License, Version 2.0 (the "License");
|
||||
* you may not use this file except in compliance with the License.
|
||||
* You may obtain a copy of the License at
|
||||
* http://www.apache.org/licenses/LICENSE-2.0
|
||||
* Unless required by applicable law or agreed to in writing, software
|
||||
* distributed under the License is distributed on an "AS IS" BASIS,
|
||||
* WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
|
||||
* See the License for the specific language governing permissions and
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Col, Row, Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ReactComponent as IconExternalLink } from '../assets/svg/external-links.svg';
|
||||
import {
|
||||
HELP_ITEMS,
|
||||
HELP_ITEMS_ENUM,
|
||||
SupportItem,
|
||||
} from '../constants/Navbar.constants';
|
||||
|
||||
const getHelpDropdownLabelContentRenderer = (
|
||||
item: SupportItem,
|
||||
version?: string
|
||||
) => {
|
||||
return (
|
||||
<Row className="cursor-pointer">
|
||||
<Col span={4}>
|
||||
<Icon
|
||||
className="align-middle"
|
||||
component={item.icon}
|
||||
style={{ fontSize: '18px' }}
|
||||
/>
|
||||
</Col>
|
||||
<Col className="flex items-center" span={20}>
|
||||
<Typography.Text className="text-base-color">
|
||||
{item.label}{' '}
|
||||
{item.key === HELP_ITEMS_ENUM.VERSION &&
|
||||
(version ?? '?').split('-')[0]}
|
||||
</Typography.Text>
|
||||
|
||||
{item.isExternal && (
|
||||
<Icon
|
||||
className="m-l-xss text-base-color"
|
||||
component={IconExternalLink}
|
||||
style={{ fontSize: '16px' }}
|
||||
/>
|
||||
)}
|
||||
</Col>
|
||||
</Row>
|
||||
);
|
||||
};
|
||||
|
||||
const getHelpDropdownLabel = (item: SupportItem, version?: string) => {
|
||||
if (item.isExternal) {
|
||||
return (
|
||||
<a
|
||||
className="no-underline"
|
||||
href={item.link}
|
||||
rel="noreferrer"
|
||||
target="_blank">
|
||||
{getHelpDropdownLabelContentRenderer(item, version)}
|
||||
</a>
|
||||
);
|
||||
} else if (item.link) {
|
||||
return (
|
||||
<Link className="no-underline" to={item.link}>
|
||||
{getHelpDropdownLabelContentRenderer(item)}
|
||||
</Link>
|
||||
);
|
||||
} else {
|
||||
return getHelpDropdownLabelContentRenderer(item);
|
||||
}
|
||||
};
|
||||
|
||||
export const getHelpDropdownItems = (version?: string) =>
|
||||
HELP_ITEMS.map((item) => ({
|
||||
label: getHelpDropdownLabel(item, version),
|
||||
key: item.key,
|
||||
}));
|
||||
@ -11,10 +11,12 @@
|
||||
* limitations under the License.
|
||||
*/
|
||||
|
||||
import Icon from '@ant-design/icons/lib/components/Icon';
|
||||
import { Typography } from 'antd';
|
||||
import React from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { BasicEntityInfo } from '../../components/Explore/EntitySummaryPanel/SummaryList/SummaryList.interface';
|
||||
import { ICON_DIMENSION } from '../../constants/constants';
|
||||
import { Task } from '../../generated/entity/data/pipeline';
|
||||
import {
|
||||
Column,
|
||||
@ -40,14 +42,14 @@ export const mockLinkBasedSummaryTitleResponse = (
|
||||
pathname:
|
||||
'http://localhost:8080/taskinstance/list/?flt1_dag_id_equals=dim_address_task',
|
||||
}}>
|
||||
<div className="d-flex">
|
||||
<div className="d-flex items-center">
|
||||
<Text
|
||||
className="entity-title text-link-color font-medium m-r-xss"
|
||||
data-testid="entity-title"
|
||||
ellipsis={{ tooltip: true }}>
|
||||
dim_address Task
|
||||
</Text>
|
||||
<IconExternalLink width={12} />
|
||||
<Icon component={IconExternalLink} style={ICON_DIMENSION} />
|
||||
</div>
|
||||
</Link>
|
||||
);
|
||||
@ -146,14 +148,14 @@ export const mockEntityDataWithoutNestingResponse: BasicEntityInfo[] = [
|
||||
pathname:
|
||||
'http://localhost:8080/taskinstance/list/?flt1_dag_id_equals=assert_table_exists',
|
||||
}}>
|
||||
<div className="d-flex">
|
||||
<div className="d-flex items-center">
|
||||
<Text
|
||||
className="entity-title text-link-color font-medium m-r-xss"
|
||||
data-testid="entity-title"
|
||||
ellipsis={{ tooltip: true }}>
|
||||
Assert Table Exists
|
||||
</Text>
|
||||
<IconExternalLink width={12} />
|
||||
<Icon component={IconExternalLink} style={ICON_DIMENSION} />
|
||||
</div>
|
||||
</Link>
|
||||
),
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user