mirror of
https://github.com/open-metadata/OpenMetadata.git
synced 2025-11-08 23:14:00 +00:00
UI : Addressing 0.9.0 Feedback Part 3 (#3350)
* UI : Addressing 0.9.0 Feedback Part 3 * Minor fix * Addressing review comment * Minor style change
This commit is contained in:
parent
4d1d25a58b
commit
3eda561ca9
@ -97,7 +97,6 @@ const FeedHeader: FC<FeedHeaderProp> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
const getUserData = () => {
|
const getUserData = () => {
|
||||||
const image = userData.profile?.images?.image512;
|
|
||||||
const displayName = userData.displayName ?? '';
|
const displayName = userData.displayName ?? '';
|
||||||
const name = userData.name ?? '';
|
const name = userData.name ?? '';
|
||||||
const teams = userData.teams;
|
const teams = userData.teams;
|
||||||
@ -115,11 +114,7 @@ const FeedHeader: FC<FeedHeaderProp> = ({
|
|||||||
<div>
|
<div>
|
||||||
<div className="tw-flex">
|
<div className="tw-flex">
|
||||||
<div className="tw-mr-2">
|
<div className="tw-mr-2">
|
||||||
{image ? (
|
<Avatar name={createdBy} type="square" width="30" />
|
||||||
<img src={image} width="30px" />
|
|
||||||
) : (
|
|
||||||
<Avatar name={createdBy} type="square" width="30" />
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
<div className="tw-self-center">
|
<div className="tw-self-center">
|
||||||
<p>
|
<p>
|
||||||
|
|||||||
@ -141,7 +141,7 @@ const DashboardDetails = ({
|
|||||||
position: 1,
|
position: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `Activity Feed (${feedCount})`,
|
name: 'Activity Feed',
|
||||||
icon: {
|
icon: {
|
||||||
alt: 'activity_feed',
|
alt: 'activity_feed',
|
||||||
name: 'activity_feed',
|
name: 'activity_feed',
|
||||||
@ -150,6 +150,7 @@ const DashboardDetails = ({
|
|||||||
},
|
},
|
||||||
isProtected: false,
|
isProtected: false,
|
||||||
position: 2,
|
position: 2,
|
||||||
|
count: feedCount,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Lineage',
|
name: 'Lineage',
|
||||||
|
|||||||
@ -183,7 +183,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
|
|||||||
position: 1,
|
position: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `Activity Feed (${feedCount})`,
|
name: 'Activity Feed',
|
||||||
icon: {
|
icon: {
|
||||||
alt: 'activity_feed',
|
alt: 'activity_feed',
|
||||||
name: 'activity_feed',
|
name: 'activity_feed',
|
||||||
@ -192,6 +192,7 @@ const DatasetDetails: React.FC<DatasetDetailsProps> = ({
|
|||||||
},
|
},
|
||||||
isProtected: false,
|
isProtected: false,
|
||||||
position: 2,
|
position: 2,
|
||||||
|
count: feedCount,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Sample Data',
|
name: 'Sample Data',
|
||||||
|
|||||||
@ -91,7 +91,7 @@ const CustomNode = (props: any) => {
|
|||||||
'tw-h-36 tw-overflow-y-auto': columns?.length,
|
'tw-h-36 tw-overflow-y-auto': columns?.length,
|
||||||
})}
|
})}
|
||||||
id="table-columns">
|
id="table-columns">
|
||||||
<div className="tw-flex tw-flex-col tw-gap-y-1">
|
<div className="tw-flex tw-flex-col tw-gap-y-1 tw-relative">
|
||||||
{columns?.map(
|
{columns?.map(
|
||||||
(c: { name: string; constraint: string }, i: number) => (
|
(c: { name: string; constraint: string }, i: number) => (
|
||||||
<Fragment key={i}>
|
<Fragment key={i}>
|
||||||
|
|||||||
@ -316,7 +316,7 @@ const Explore: React.FC<ExploreProps> = ({
|
|||||||
<span className="tw-mr-2">Sort by:</span>
|
<span className="tw-mr-2">Sort by:</span>
|
||||||
<span className="tw-relative">
|
<span className="tw-relative">
|
||||||
<Button
|
<Button
|
||||||
className="hover:tw-no-underline focus:tw-no-underline"
|
className="focus:tw-no-underline"
|
||||||
data-testid="sortBy"
|
data-testid="sortBy"
|
||||||
size="custom"
|
size="custom"
|
||||||
theme="primary"
|
theme="primary"
|
||||||
|
|||||||
@ -139,7 +139,7 @@ const PipelineDetails = ({
|
|||||||
position: 1,
|
position: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `Activity Feed (${feedCount})`,
|
name: 'Activity Feed',
|
||||||
icon: {
|
icon: {
|
||||||
alt: 'activity_feed',
|
alt: 'activity_feed',
|
||||||
name: 'activity_feed',
|
name: 'activity_feed',
|
||||||
@ -148,6 +148,7 @@ const PipelineDetails = ({
|
|||||||
},
|
},
|
||||||
isProtected: false,
|
isProtected: false,
|
||||||
position: 2,
|
position: 2,
|
||||||
|
count: feedCount,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Lineage',
|
name: 'Lineage',
|
||||||
|
|||||||
@ -290,14 +290,12 @@ const TableProfiler: FC<Props> = ({
|
|||||||
position="bottom"
|
position="bottom"
|
||||||
title={TITLE_FOR_NON_ADMIN_ACTION}>
|
title={TITLE_FOR_NON_ADMIN_ACTION}>
|
||||||
<Button
|
<Button
|
||||||
className={classNames(
|
className={classNames({
|
||||||
'tw-px-2 tw-py-0.5 tw-rounded tw-border-grey-muted',
|
'tw-opacity-40':
|
||||||
{
|
!isAdminUser && !isAuthDisabled,
|
||||||
'tw-opacity-40':
|
})}
|
||||||
!isAdminUser && !isAuthDisabled,
|
size="small"
|
||||||
}
|
theme="primary"
|
||||||
)}
|
|
||||||
size="custom"
|
|
||||||
type="button"
|
type="button"
|
||||||
variant="outlined"
|
variant="outlined"
|
||||||
onClick={() =>
|
onClick={() =>
|
||||||
|
|||||||
@ -143,7 +143,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
|
|||||||
position: 1,
|
position: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `Activity Feed (${feedCount})`,
|
name: 'Activity Feed',
|
||||||
icon: {
|
icon: {
|
||||||
alt: 'activity_feed',
|
alt: 'activity_feed',
|
||||||
name: 'activity_feed',
|
name: 'activity_feed',
|
||||||
@ -152,6 +152,7 @@ const TopicDetails: React.FC<TopicDetailsProps> = ({
|
|||||||
},
|
},
|
||||||
isProtected: false,
|
isProtected: false,
|
||||||
position: 2,
|
position: 2,
|
||||||
|
count: feedCount,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Config',
|
name: 'Config',
|
||||||
|
|||||||
@ -198,7 +198,7 @@ const EntityPageInfo = ({
|
|||||||
</button>
|
</button>
|
||||||
|
|
||||||
<span
|
<span
|
||||||
className="tw-text-xs tw-border-l-0 tw-font-medium tw-py-1 tw-px-2 tw-rounded-r tw-cursor-pointer"
|
className="tw-text-xs tw-border-l-0 tw-font-medium tw-py-1 tw-px-2 tw-rounded-r tw-cursor-pointer hover:tw-underline"
|
||||||
data-testid="getversions">
|
data-testid="getversions">
|
||||||
{parseFloat(version).toFixed(1)}
|
{parseFloat(version).toFixed(1)}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
@ -38,8 +38,8 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
|
|||||||
};
|
};
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<div
|
<label
|
||||||
className="filter-group tw-justify-between tw-mb-2"
|
className="filter-group tw-justify-between tw-mb-2 tw-cursor-pointer"
|
||||||
data-testid={`filter-container-${name}`}>
|
data-testid={`filter-container-${name}`}>
|
||||||
<div className="tw-flex">
|
<div className="tw-flex">
|
||||||
<input
|
<input
|
||||||
@ -66,7 +66,7 @@ const FilterContainer: FunctionComponent<FilterContainerProp> = ({
|
|||||||
</div>
|
</div>
|
||||||
{!isNil(count) &&
|
{!isNil(count) &&
|
||||||
getCountBadge(count, classNames('tw-py-0 tw-px-0'), isSelected)}
|
getCountBadge(count, classNames('tw-py-0 tw-px-0'), isSelected)}
|
||||||
</div>
|
</label>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
|
|||||||
@ -130,47 +130,35 @@ const NavBar = ({
|
|||||||
className="tw-nav focus:tw-no-underline hover:tw-underline tw-flex-shrink-0"
|
className="tw-nav focus:tw-no-underline hover:tw-underline tw-flex-shrink-0"
|
||||||
data-testid="whatsnew-modal"
|
data-testid="whatsnew-modal"
|
||||||
onClick={() => handleFeatureModal(true)}>
|
onClick={() => handleFeatureModal(true)}>
|
||||||
<PopOver
|
<SVGIcons
|
||||||
position="bottom"
|
alt="Doc icon"
|
||||||
title="What's new?"
|
className="tw-align-middle tw-mr-1"
|
||||||
trigger="mouseenter">
|
icon={Icons.WHATS_NEW}
|
||||||
<SVGIcons
|
width="20"
|
||||||
alt="Doc icon"
|
/>
|
||||||
className="tw-align-middle tw-mr-1"
|
|
||||||
icon={Icons.WHATS_NEW}
|
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
</PopOver>
|
|
||||||
</button>
|
</button>
|
||||||
<button
|
<button
|
||||||
className="tw-nav focus:tw-no-underline hover:tw-underline tw-flex-shrink-0"
|
className="tw-nav focus:tw-no-underline hover:tw-underline tw-flex-shrink-0"
|
||||||
data-testid="tour">
|
data-testid="tour">
|
||||||
<PopOver
|
<Link to={ROUTES.TOUR}>
|
||||||
position="bottom"
|
<SVGIcons
|
||||||
title="Take a tour"
|
alt="tour icon"
|
||||||
trigger="mouseenter">
|
className="tw-align-middle tw-mr-0.5"
|
||||||
<Link to={ROUTES.TOUR}>
|
icon={Icons.TOUR}
|
||||||
<SVGIcons
|
width="20"
|
||||||
alt="tour icon"
|
/>
|
||||||
className="tw-align-middle tw-mr-0.5"
|
</Link>
|
||||||
icon={Icons.TOUR}
|
|
||||||
width="20"
|
|
||||||
/>
|
|
||||||
</Link>
|
|
||||||
</PopOver>
|
|
||||||
</button>
|
</button>
|
||||||
<div className="tw-flex-shrink-0">
|
<div className="tw-flex-shrink-0">
|
||||||
<DropDown
|
<DropDown
|
||||||
dropDownList={supportDropdown}
|
dropDownList={supportDropdown}
|
||||||
icon={
|
icon={
|
||||||
<PopOver position="bottom" title="Help" trigger="mouseenter">
|
<SVGIcons
|
||||||
<SVGIcons
|
alt="Doc icon"
|
||||||
alt="Doc icon"
|
className="tw-align-middle tw-mt-0.5 tw-mr-1"
|
||||||
className="tw-align-middle tw-mt-0.5 tw-mr-1"
|
icon={Icons.HELP_CIRCLE}
|
||||||
icon={Icons.HELP_CIRCLE}
|
width="20"
|
||||||
width="20"
|
/>
|
||||||
/>
|
|
||||||
</PopOver>
|
|
||||||
}
|
}
|
||||||
isDropDownIconVisible={false}
|
isDropDownIconVisible={false}
|
||||||
isLableVisible={false}
|
isLableVisible={false}
|
||||||
|
|||||||
@ -202,9 +202,11 @@ const DatasetDetailsPage: FunctionComponent = () => {
|
|||||||
columnName?: string
|
columnName?: string
|
||||||
) => {
|
) => {
|
||||||
activeTabHandler(tabValue);
|
activeTabHandler(tabValue);
|
||||||
setTestMode(testMode as DatasetTestModeType);
|
if (testMode && columnName) {
|
||||||
setSelectedColumn(columnName);
|
setTestMode(testMode as DatasetTestModeType);
|
||||||
setShowTestForm(true);
|
setSelectedColumn(columnName);
|
||||||
|
setShowTestForm(true);
|
||||||
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
const getLineageData = () => {
|
const getLineageData = () => {
|
||||||
|
|||||||
@ -910,7 +910,7 @@ const RolesPage = () => {
|
|||||||
<span className="tw-font-medium">
|
<span className="tw-font-medium">
|
||||||
{defaultRole?.displayName ?? defaultRole?.name}
|
{defaultRole?.displayName ?? defaultRole?.name}
|
||||||
</span>{' '}
|
</span>{' '}
|
||||||
role.`
|
role.
|
||||||
</Fragment>
|
</Fragment>
|
||||||
}
|
}
|
||||||
cancelText="Cancel"
|
cancelText="Cancel"
|
||||||
|
|||||||
@ -136,7 +136,7 @@ const DatabaseDetails: FunctionComponent = () => {
|
|||||||
position: 1,
|
position: 1,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `Activity Feed (${feedCount})`,
|
name: 'Activity Feed',
|
||||||
icon: {
|
icon: {
|
||||||
alt: 'activity_feed',
|
alt: 'activity_feed',
|
||||||
name: 'activity_feed',
|
name: 'activity_feed',
|
||||||
@ -145,6 +145,7 @@ const DatabaseDetails: FunctionComponent = () => {
|
|||||||
},
|
},
|
||||||
isProtected: false,
|
isProtected: false,
|
||||||
position: 2,
|
position: 2,
|
||||||
|
count: feedCount,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Manage',
|
name: 'Manage',
|
||||||
|
|||||||
@ -186,7 +186,7 @@ const ServicePage: FunctionComponent = () => {
|
|||||||
count: instanceCount,
|
count: instanceCount,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: `Activity Feed (${feedCount})`,
|
name: 'Activity Feed',
|
||||||
icon: {
|
icon: {
|
||||||
alt: 'activity_feed',
|
alt: 'activity_feed',
|
||||||
name: 'activity_feed',
|
name: 'activity_feed',
|
||||||
@ -195,6 +195,7 @@ const ServicePage: FunctionComponent = () => {
|
|||||||
},
|
},
|
||||||
isProtected: false,
|
isProtected: false,
|
||||||
position: 2,
|
position: 2,
|
||||||
|
count: feedCount,
|
||||||
},
|
},
|
||||||
{
|
{
|
||||||
name: 'Ingestions',
|
name: 'Ingestions',
|
||||||
|
|||||||
@ -426,16 +426,18 @@ export const getInfoElements = (data: ExtraInfo) => {
|
|||||||
<span>
|
<span>
|
||||||
{data.isLink ? (
|
{data.isLink ? (
|
||||||
<a
|
<a
|
||||||
className="link-text"
|
|
||||||
data-testid="owner-link"
|
data-testid="owner-link"
|
||||||
href={data.value as string}
|
href={data.value as string}
|
||||||
rel="noopener noreferrer"
|
rel="noopener noreferrer"
|
||||||
target={data.openInNewTab ? '_blank' : '_self'}>
|
target={data.openInNewTab ? '_blank' : '_self'}>
|
||||||
<>
|
<>
|
||||||
<span
|
<span
|
||||||
className={classNames('tw-mr-1 tw-inline-block tw-truncate', {
|
className={classNames(
|
||||||
'tw-w-52': (displayVal as string).length > 32,
|
'tw-mr-1 tw-inline-block tw-truncate link-text',
|
||||||
})}
|
{
|
||||||
|
'tw-w-52': (displayVal as string).length > 32,
|
||||||
|
}
|
||||||
|
)}
|
||||||
title={displayVal as string}>
|
title={displayVal as string}>
|
||||||
{displayVal}
|
{displayVal}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user