Skip to content

[Catalogv2] Add favorites support #29317

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 3 commits into
base: master
Choose a base branch
from
Open

Conversation

salazarm
Copy link
Contributor

Summary & Motivation

Similar to what we do here and here. Basically since this is in OSS we use that hook to signal whether or not we're currently in the favorites view and so should use the favorited assets.

How I Tested These Changes

jest

Comment on lines -242 to -422
</div>
</Row>
);
}
return wrapper(<AssetRow asset={item} />);
})}
</Inner>
</Container>
);
},
);

const StatusHeader = React.memo(
({
status,
open,
count,
onToggle,
}: {
status: AssetHealthStatusString;
open: boolean;
count: number;
onToggle: () => void;
}) => {
const {iconName, iconColor, text} = STATUS_INFO[status];
return (
<StatusHeaderContainer
flex={{direction: 'row', alignItems: 'center', gap: 4}}
onClick={onToggle}
>
<Icon name={iconName} color={iconColor} />
<SubtitleSmall>
{text} ({numberFormatter.format(count)})
</SubtitleSmall>
<Icon
name="arrow_drop_down"
style={{transform: open ? 'rotate(0deg)' : 'rotate(-90deg)'}}
color={Colors.textLight()}
/>
</StatusHeaderContainer>
);
},
);

const StatusHeaderContainer = styled(Box)`
background-color: ${Colors.backgroundLight()};
&:hover {
background-color: ${Colors.backgroundLightHover()};
}
border-radius: 4px;
padding: 6px 24px;
`;

const AssetRow = React.memo(({asset}: {asset: AssetHealthFragment}) => {
const linkUrl = assetDetailsPathForKey({path: asset.assetKey.path});

return (
<RowWrapper to={linkUrl}>
<Box flex={{direction: 'row', alignItems: 'center', justifyContent: 'space-between'}}>
<Box flex={{direction: 'row', gap: 4, alignItems: 'center'}}>
<AssetIconWrapper>
<Icon name="asset" />
</AssetIconWrapper>
{asset.assetKey.path.join(' / ')}
</Box>
{/* Prevent clicks on the trend from propoagating to the row and triggering the link */}
<div
onClick={(e) => {
e.stopPropagation();
e.preventDefault();
}}
className="test"
>
<AssetRecentUpdatesTrend asset={asset} />
</div>
</Box>
</RowWrapper>
);
});

type AssetWithDefinition = AssetTableFragment & {
definition: NonNullable<AssetTableFragment['definition']>;
};
const AssetIconWrapper = styled.div``;

const RowWrapper = styled(Link)`
color: ${Colors.textLight()};
cursor: pointer;
:hover {
&,
${AssetIconWrapper} ${IconWrapper} {
color: ${Colors.textDefault()};
text-decoration: none;
}
${AssetIconWrapper} ${IconWrapper} {
background: ${Colors.textDefault()};
text-decoration: none;
}
}
`;
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I move all of this to a new file for easier testing

Copy link

Deploy preview for dagit-core-storybook ready!

✅ Preview
https://dagit-core-storybook-nzr8tyvza-elementl.vercel.app
https://salazarm-new-catalog-page.core-storybook.dagster-docs.io

Built with commit 560c243.
This pull request is being automatically deployed with vercel-action

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant