Nemcio/SCM-Manager
1
0
Fork 0
mirror of https://github.com/scm-manager/scm-manager.git synced 2025-11-12 08:25:44 +01:00
Code Issues Packages Projects Releases Activity

Uniform rendering of tooltips for repository badges (#1698)

Browse Source 
Co-authored-by: René Pfeuffer <rene.pfeuffer@cloudogu.com>
This commit is contained in:
Florian Scholdei
2021-06-15 09:29:24 +02:00
committed by GitHub
parent 965b5dbced
commit 58a8232aa9
6 changed files with 177 additions and 124 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
gradle/changelog/repository_flags.yaml Normal file
View File

@@ -0,0 +1,2 @@
- type: fixed
description: Uniform rendering of tooltips for repository badges ([#1698](https://github.com/scm-manager/scm-manager/pull/1698))

13
scm-ui/ui-components/src/CardColumn.tsx
View File

@@ -59,11 +59,6 @@ const FooterWrapper = styled.div`
padding-bottom: 1rem; padding-bottom: 1rem;
`; `;
const ContentLeft = styled.div`
margin-bottom: 0 !important;
overflow: hidden;
`;
const ContentRight = styled.div` const ContentRight = styled.div`
margin-left: auto; margin-left: auto;
`; `;
@@ -115,15 +110,15 @@ const CardColumn: FC<Props> = ({
{renderAvatar} {renderAvatar}
<FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}> <FlexFullHeight className={classNames("media-content", "text-box", "is-flex")}>
<div className="is-flex"> <div className="is-flex">
<ContentLeft className="content"> <div className="is-clipped mb-0">
<p className="shorten-text is-marginless">{title}</p> <p className="shorten-text m-0">{title}</p>
{renderDescription} {renderDescription}
</ContentLeft> </div>
{renderContentRight} {renderContentRight}
</div> </div>
<FooterWrapper className={classNames("level", "is-flex")}> <FooterWrapper className={classNames("level", "is-flex")}>
<RightMarginDiv className="level-left is-hidden-mobile">{footerLeft}</RightMarginDiv> <RightMarginDiv className="level-left is-hidden-mobile">{footerLeft}</RightMarginDiv>
<InheritFlexShrinkDiv className="level-right is-block is-mobile is-marginless shorten-text"> <InheritFlexShrinkDiv className="level-right is-block is-mobile m-0 shorten-text">
{footerRight} {footerRight}
</InheritFlexShrinkDiv> </InheritFlexShrinkDiv>
</FooterWrapper> </FooterWrapper>

182
scm-ui/ui-components/src/__snapshots__/storyshots.test.ts.snap
View File

@@ -2374,10 +2374,10 @@ exports[`Storyshots CardColumn Default 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<strong> <strong>
title title
@@ -2394,14 +2394,14 @@ exports[`Storyshots CardColumn Default 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<small> <small>
left footer left footer
</small> </small>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small> <small>
right footer right footer
@@ -2427,10 +2427,10 @@ exports[`Storyshots CardColumn Minimal 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<strong> <strong>
title title
@@ -2442,14 +2442,14 @@ exports[`Storyshots CardColumn Minimal 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<small> <small>
left footer left footer
</small> </small>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small> <small>
right footer right footer
@@ -2475,10 +2475,10 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<strong> <strong>
title title
@@ -2490,14 +2490,14 @@ exports[`Storyshots CardColumn With hoverable date 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<small> <small>
left footer left footer
</small> </small>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -63316,25 +63316,33 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<strong> <strong>
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="archive.tooltip"
>
<span <span
className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small" className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
title="archive.tooltip"
> >
repository.archived repository.archived
</span> </span>
</span> </span>
</div>
</span>
</p> </p>
<p <p
className="shorten-text" className="shorten-text"
@@ -63347,7 +63355,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -63421,7 +63429,7 @@ exports[`Storyshots RepositoryEntry Archived 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -63471,18 +63479,21 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<strong> <strong>
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
/>
</span> </span>
</p> </p>
<p <p
@@ -63496,7 +63507,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -63570,7 +63581,7 @@ exports[`Storyshots RepositoryEntry Avatar EP 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -63620,13 +63631,13 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<i <i
className="far fa-star" className="far fa-star"
@@ -63635,6 +63646,9 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
/>
</span> </span>
</p> </p>
<p <p
@@ -63648,7 +63662,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -63722,7 +63736,7 @@ exports[`Storyshots RepositoryEntry Before Title EP 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -63772,18 +63786,21 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<strong> <strong>
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
/>
</span> </span>
</p> </p>
<p <p
@@ -63797,7 +63814,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -63871,7 +63888,7 @@ exports[`Storyshots RepositoryEntry Default 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -63921,25 +63938,33 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<strong> <strong>
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="exporting.tooltip"
>
<span <span
className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small" className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
title="exporting.tooltip"
> >
repository.exporting repository.exporting
</span> </span>
</span> </span>
</div>
</span>
</p> </p>
<p <p
className="shorten-text" className="shorten-text"
@@ -63952,7 +63977,7 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64026,7 +64051,7 @@ exports[`Storyshots RepositoryEntry Exporting 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -64076,26 +64101,34 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<strong> <strong>
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="healthCheckFailure.tooltip"
>
<span <span
className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer" className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer"
onClick={[Function]} onClick={[Function]}
title="healthCheckFailure.tooltip"
> >
repository.healthCheckFailure repository.healthCheckFailure
</span> </span>
</span> </span>
</div>
</span>
</p> </p>
<p <p
className="shorten-text" className="shorten-text"
@@ -64108,7 +64141,7 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64182,7 +64215,7 @@ exports[`Storyshots RepositoryEntry HealthCheck Failure 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -64232,31 +64265,43 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<strong> <strong>
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="archive.tooltip"
>
<span <span
className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small" className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
title="archive.tooltip"
> >
repository.archived repository.archived
</span> </span>
</span>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="exporting.tooltip"
>
<span <span
className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small" className="Tag__InnerTag-ql67az-0 kOFYBe tag is-light is-small"
title="exporting.tooltip"
> >
repository.exporting repository.exporting
</span> </span>
</span> </span>
</div>
</span>
</p> </p>
<p <p
className="shorten-text" className="shorten-text"
@@ -64269,7 +64314,7 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64343,7 +64388,7 @@ exports[`Storyshots RepositoryEntry MultiRepositoryTags 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -64393,18 +64438,21 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<strong> <strong>
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
/>
</span> </span>
</p> </p>
<p <p
@@ -64418,7 +64466,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64499,7 +64547,7 @@ exports[`Storyshots RepositoryEntry Quick Link EP 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"
@@ -64549,26 +64597,34 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
className="is-flex" className="is-flex"
> >
<div <div
className="CardColumn__ContentLeft-sc-1w6lsih-4 heSQMX content" className="is-clipped mb-0"
> >
<p <p
className="shorten-text is-marginless" className="shorten-text m-0"
> >
<span <span
className="RepositoryEntry__Title-sc-6jys82-0 eaqclL" className="RepositoryEntry__Title-sc-6jys82-0 dqCES"
> >
<strong> <strong>
heartOfGold heartOfGold
</strong> </strong>
<div
className="RepositoryEntry__RepositoryFlagContainer-sc-6jys82-1 fpFEji"
>
<span
className="tooltip has-tooltip-bottom"
data-tooltip="healthCheckFailure.tooltip"
>
<span <span
className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer" className="Tag__InnerTag-ql67az-0 kOFYBe tag is-danger is-small has-cursor-pointer"
onClick={[Function]} onClick={[Function]}
title="healthCheckFailure.tooltip"
> >
repository.healthCheckFailure repository.healthCheckFailure
</span> </span>
</span> </span>
</div>
</span>
</p> </p>
<p <p
className="shorten-text" className="shorten-text"
@@ -64581,7 +64637,7 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex" className="CardColumn__FooterWrapper-sc-1w6lsih-3 kYSWZY level is-flex"
> >
<div <div
className="CardColumn__RightMarginDiv-sc-1w6lsih-6 hazmI level-left is-hidden-mobile" className="CardColumn__RightMarginDiv-sc-1w6lsih-5 hWvnQP level-left is-hidden-mobile"
> >
<a <a
className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item" className="RepositoryEntryLink__PointerEventsLink-sc-1hpqj0w-0 hOdNxe level-item"
@@ -64655,7 +64711,7 @@ exports[`Storyshots RepositoryEntry RepositoryFlag EP 1`] = `
</a> </a>
</div> </div>
<div <div
className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-7 bmCbDN level-right is-block is-mobile is-marginless shorten-text" className="CardColumn__InheritFlexShrinkDiv-sc-1w6lsih-6 UetKA level-right is-block is-mobile m-0 shorten-text"
> >
<small <small
className="level-item" className="level-item"

13
scm-ui/ui-components/src/repos/RepositoryEntry.tsx
View File

@@ -48,9 +48,13 @@ type State = {
const Title = styled.span` const Title = styled.span`
display: flex; display: flex;
align-items: center; align-items: center;
`;
& > * { const RepositoryFlagContainer = styled.div`
margin-right: 0.25rem; /*pointer-events: all;*/
.tag {
margin-left: 0.25rem;
} }
`; `;
@@ -181,8 +185,11 @@ class RepositoryEntry extends React.Component<Props, State> {
return ( return (
<Title> <Title>
<ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} /> <ExtensionPoint name="repository.card.beforeTitle" props={{ repository }} />
<strong>{repository.name}</strong> {repositoryFlags} <strong>{repository.name}</strong>{" "}
<RepositoryFlagContainer>
{repositoryFlags}
<ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} /> <ExtensionPoint name="repository.flags" props={{ repository }} renderAll={true} />
</RepositoryFlagContainer>
</Title> </Title>
); );
}; };

9
scm-ui/ui-components/src/repos/RepositoryFlag.tsx
View File

@@ -23,20 +23,23 @@
*/ */
import React, { FC } from "react"; import React, { FC } from "react";
import Tag from "../Tag";
import { Color, Size } from "../styleConstants"; import { Color, Size } from "../styleConstants";
import Tooltip from "../Tooltip";
import Tag from "../Tag";
type Props = { type Props = {
color?: Color; color?: Color;
title?: string; title: string;
onClick?: () => void; onClick?: () => void;
size?: Size; size?: Size;
}; };
const RepositoryFlag: FC<Props> = ({ children, size = "small", ...props }) => ( const RepositoryFlag: FC<Props> = ({ children, title, size = "small", ...props }) => (
<Tooltip location="bottom" message={title}>
<Tag size={size} {...props}> <Tag size={size} {...props}>
{children} {children}
</Tag> </Tag>
</Tooltip>
); );
export default RepositoryFlag; export default RepositoryFlag;

16
scm-ui/ui-webapp/src/repos/containers/RepositoryRoot.tsx
View File

@@ -160,28 +160,18 @@ const RepositoryRoot = () => {
const repositoryFlags = []; const repositoryFlags = [];
if (repository.archived) { if (repository.archived) {
repositoryFlags.push( repositoryFlags.push(<RepositoryFlag title={t("archive.tooltip")}>{t("repository.archived")}</RepositoryFlag>);
<Tooltip message={t("archive.tooltip")}>
<RepositoryFlag size="normal">{t("repository.archived")}</RepositoryFlag>
</Tooltip>
);
} }
if (repository.exporting) { if (repository.exporting) {
repositoryFlags.push( repositoryFlags.push(<RepositoryFlag title={t("exporting.tooltip")}>{t("repository.exporting")}</RepositoryFlag>);
<Tooltip message={t("exporting.tooltip")}>
<RepositoryFlag size="normal">{t("repository.exporting")}</RepositoryFlag>
</Tooltip>
);
} }
if (repository.healthCheckFailures && repository.healthCheckFailures.length > 0) { if (repository.healthCheckFailures && repository.healthCheckFailures.length > 0) {
repositoryFlags.push( repositoryFlags.push(
<Tooltip message={t("healthCheckFailure.tooltip")}> <RepositoryFlag color="danger" title={t("healthCheckFailure.tooltip")} onClick={() => setShowHealthCheck(true)}>
<RepositoryFlag size="normal" onClick={() => setShowHealthCheck(true)} color="danger">
{t("repository.healthCheckFailure")} {t("repository.healthCheckFailure")}
</RepositoryFlag> </RepositoryFlag>
</Tooltip>
); );
} }