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:
Sachin Chaurasiya 2022-03-10 21:25:41 +05:30 committed by GitHub
parent 4d1d25a58b
commit 3eda561ca9
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
16 changed files with 57 additions and 66 deletions

View File

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

View File

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

View File

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

View File

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

View File

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

View File

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

View File

@ -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={() =>

View File

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

View File

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

View File

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

View File

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

View File

@ -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 = () => {

View File

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

View File

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

View File

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

View File

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