Skip to content

Commit

Permalink
fix: Show pipeline description (#1303)
Browse files Browse the repository at this point in the history
Co-authored-by: Vonny Jap <[email protected]>
  • Loading branch information
minghay and VonnyJap authored Dec 17, 2024
1 parent f599d52 commit 6f35633
Show file tree
Hide file tree
Showing 5 changed files with 181 additions and 134 deletions.
4 changes: 4 additions & 0 deletions app/components/pipeline/header/component.js
Original file line number Diff line number Diff line change
Expand Up @@ -16,6 +16,10 @@ export default class PipelineHeaderComponent extends Component {

sameRepoPipeline = [];

get pipelineDescription() {
return this.args.pipeline.annotations['screwdriver.cd/pipelineDescription'];
}

get sonarBadgeUri() {
return (
this.args.pipeline.badges.sonar.uri ||
Expand Down
113 changes: 62 additions & 51 deletions app/components/pipeline/header/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -5,80 +5,91 @@
@mixin styles {
#pipeline-header {
display: flex;
flex-direction: column;
background-color: colors.$sd-flyout-bg;
padding: 1rem;

a {
color: colors.$sd-black;
}

.header-item {
margin-top: auto;
margin-bottom: auto;
padding-right: 0.5rem;
.header-main {
display: flex;

&.pipeline-name {
font-size: 24px;
font-weight: variables.$weight-bold;
a {
color: colors.$sd-black;
}

.sonarqube {
height: 1rem;
width: 1rem;
}
.header-item {
margin-top: auto;
margin-bottom: auto;
padding-right: 0.5rem;

&.dropdown {
max-width: 20rem;
&.pipeline-name {
font-size: 24px;
font-weight: variables.$weight-bold;
}

.dropdown-toggle {
display: flex;
justify-content: space-between;
.sonarqube {
height: 1rem;
width: 1rem;
}

svg {
margin: auto 0.25rem;
}
&.dropdown {
max-width: 20rem;

&::after {
margin-top: auto;
margin-bottom: 0.75rem;
}
.dropdown-toggle {
display: flex;
justify-content: space-between;

.branch {
overflow: auto;
}
}
svg {
margin: auto 0.25rem;
}

.dropdown-menu {
display: flex;
flex-direction: column;
overflow-x: scroll;
max-height: 10rem;
width: 20rem;
&::after {
margin-top: auto;
margin-bottom: 0.75rem;
}

svg {
width: 10px;
height: 10px;
.branch {
overflow: auto;
}
}

a {
padding: 0.25rem 0.75rem;
.dropdown-menu {
display: flex;
flex-direction: column;
overflow-x: scroll;
max-height: 10rem;
width: 20rem;

&:hover {
background-color: colors.$sd-highlight;
svg {
width: 10px;
height: 10px;
}

a {
padding: 0.25rem 0.75rem;

&:hover {
background-color: colors.$sd-highlight;
}
}
}

span {
margin: auto;
span {
margin: auto;
}
}
}
}
}

@include button.styles;
@include button.styles;

#add-to-collection {
margin-left: auto;
}
}

#add-to-collection {
margin-left: auto;
.pipeline-description {
margin-top: 0.25rem;
height: 2.25rem;
overflow: auto;
}
}
}
156 changes: 82 additions & 74 deletions app/components/pipeline/header/template.hbs
Original file line number Diff line number Diff line change
@@ -1,90 +1,98 @@
<div id="pipeline-header" {{did-insert this.getPipelinesWithSameRepo}}>
<LinkTo
id="pipeline-link"
class="header-item pipeline-name"
@route="v2.pipeline"
@model={{@pipeline.id}}
>
{{@pipeline.scmRepo.name}}
</LinkTo>

{{#if @pipeline.configPipelineId}}
<div class="header-main">
<LinkTo
id="parent-pipeline-link"
class="header-item"
id="pipeline-link"
class="header-item pipeline-name"
@route="v2.pipeline"
@model={{@pipeline.configPipelineId}}
@model={{@pipeline.id}}
>
<FaIcon @icon="cog" />
Parent Pipeline
{{@pipeline.scmRepo.name}}
</LinkTo>
{{/if}}

{{#if @pipeline.badges.sonar}}
{{#if @pipeline.configPipelineId}}
<LinkTo
id="parent-pipeline-link"
class="header-item"
@route="v2.pipeline"
@model={{@pipeline.configPipelineId}}
>
<FaIcon @icon="cog" />
Parent Pipeline
</LinkTo>
{{/if}}

{{#if @pipeline.badges.sonar}}
<a
id="sonarqube-link"
class="header-item"
href={{this.sonarBadgeUri}}
title={{this.sonarBadgeDescription}}
target="_blank"
rel="noopener"
>
{{svg-jar "sonarqube" class="img sonarqube"}}
</a>
{{/if}}

<a
id="sonarqube-link"
class="header-item"
href={{this.sonarBadgeUri}}
title={{this.sonarBadgeDescription}}
target="_blank"
rel="noopener"
id="scm-link"
href="{{branch-url-encode @pipeline.scmRepo.url}}"
class="header-item scm"
>
{{svg-jar "sonarqube" class="img sonarqube"}}
<FaIcon @icon={{this.scmContext.scmIcon}} @prefix="fab" />
{{this.scmContext.scm}}
</a>
{{/if}}

<a
id="scm-link"
href="{{branch-url-encode @pipeline.scmRepo.url}}"
class="header-item scm"
>
<FaIcon @icon={{this.scmContext.scmIcon}} @prefix="fab" />
{{this.scmContext.scm}}
</a>

<BsDropdown id='repo-pipelines' class="header-item" as |dd|>
<dd.toggle>
<FaIcon @icon="code-branch" @title="Source code" />
<span class="branch">
{{@pipeline.scmRepo.branch}}
</span>
<BsTooltip @placement="bottom" @renderInPlace={{false}} @triggerEvents="hover" class="tooltip">
Switch to another Pipeline with the same repository
</BsTooltip>
</dd.toggle>
<dd.menu as |ddm|>
{{#each (await this.sameRepoPipeline) as |pipe|}}
<ddm.item>
<LinkTo
@route="v2.pipeline"
@model={{pipe.id}}
>
{{svg-jar "link" class="img"}} {{pipe.branchAndRootDir}}
</LinkTo>
</ddm.item>
{{else}}
<span>
<BsDropdown id='repo-pipelines' class="header-item" as |dd|>
<dd.toggle>
<FaIcon @icon="code-branch" @title="Source code" />
<span class="branch">
{{@pipeline.scmRepo.branch}}
</span>
<BsTooltip @placement="bottom" @renderInPlace={{false}} @triggerEvents="hover" class="tooltip">
Switch to another Pipeline with the same repository
</BsTooltip>
</dd.toggle>
<dd.menu as |ddm|>
{{#each (await this.sameRepoPipeline) as |pipe|}}
<ddm.item>
<LinkTo
@route="v2.pipeline"
@model={{pipe.id}}
>
{{svg-jar "link" class="img"}} {{pipe.branchAndRootDir}}
</LinkTo>
</ddm.item>
{{else}}
<span>
No other Pipelines with the same repository
</span>
{{/each}}
</dd.menu>
</BsDropdown>
{{/each}}
</dd.menu>
</BsDropdown>

<BsButton
id="add-to-collection"
class="confirm"
@defaultText="Add to collection"
@type="primary"
@outline={{true}}
@onClick={{this.openAddToCollectionModal}}
/>
<BsButton
id="add-to-collection"
class="confirm"
@defaultText="Add to collection"
@type="primary"
@outline={{true}}
@onClick={{this.openAddToCollectionModal}}
>
{{#if this.addToCollectionModalOpen}}
<Pipeline::Modal::AddToCollection
@pipeline={{@pipeline}}
@collections={{this.collections}}
@errorMessage={{this.errorMessage}}
@closeModal={{this.closeAddToCollectionModal}}
/>
{{/if}}
</BsButton>
</div>

{{#if this.addToCollectionModalOpen}}
<Pipeline::Modal::AddToCollection
@pipeline={{@pipeline}}
@collections={{this.collections}}
@errorMessage={{this.errorMessage}}
@closeModal={{this.closeAddToCollectionModal}}
/>
{{#if this.pipelineDescription}}
<div class="pipeline-description">
{{this.pipelineDescription}}
</div>
{{/if}}
</div>
4 changes: 0 additions & 4 deletions app/v2/pipeline/styles.scss
Original file line number Diff line number Diff line change
Expand Up @@ -7,15 +7,11 @@
height: 100%;

$pipeline-nav-width: 4rem;
$pipeline-header-height: 4.5rem;

grid-template-areas:
'pipeline-nav pipeline-header'
'pipeline-nav pipeline-main';
grid-template-columns: $pipeline-nav-width calc(100% - $pipeline-nav-width);
grid-template-rows: $pipeline-header-height calc(
100% - $pipeline-header-height
);

#pipeline-nav {
grid-area: pipeline-nav;
Expand Down
Loading

0 comments on commit 6f35633

Please sign in to comment.