diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 12:08:42 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2021-08-19 12:08:42 +0300 |
commit | b76ae638462ab0f673e5915986070518dd3f9ad3 (patch) | |
tree | bdab0533383b52873be0ec0eb4d3c66598ff8b91 /app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue | |
parent | 434373eabe7b4be9593d18a585fb763f1e5f1a6f (diff) |
Add latest changes from gitlab-org/gitlab@14-2-stable-eev14.2.0-rc42
Diffstat (limited to 'app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue')
-rw-r--r-- | app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue | 89 |
1 files changed, 55 insertions, 34 deletions
diff --git a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue index 6af3361e7e6..46f6f4a28c1 100644 --- a/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue +++ b/app/assets/javascripts/pipeline_editor/components/header/pipeline_status.vue @@ -1,5 +1,5 @@ <script> -import { GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; +import { GlButton, GlIcon, GlLink, GlLoadingIcon, GlSprintf } from '@gitlab/ui'; import { getIdFromGraphQLId } from '~/graphql_shared/utils'; import { truncateSha } from '~/lib/utils/text_utility'; import { s__ } from '~/locale'; @@ -19,12 +19,14 @@ export const i18n = { pipelineInfo: s__( `Pipeline|Pipeline %{idStart}#%{idEnd} %{statusStart}%{statusEnd} for %{commitStart}%{commitEnd}`, ), + viewBtn: s__('Pipeline|View pipeline'), }; export default { i18n, components: { CiIcon, + GlButton, GlIcon, GlLink, GlLoadingIcon, @@ -98,44 +100,63 @@ export default { </script> <template> - <div class="gl-white-space-nowrap gl-max-w-full"> + <div + class="gl-display-flex gl-justify-content-space-between gl-align-items-center gl-white-space-nowrap gl-max-w-full" + > <template v-if="showLoadingState"> - <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" /> - <span data-testid="pipeline-loading-msg">{{ $options.i18n.fetchLoading }}</span> + <div> + <gl-loading-icon class="gl-mr-auto gl-display-inline-block" size="sm" /> + <span data-testid="pipeline-loading-msg">{{ $options.i18n.fetchLoading }}</span> + </div> </template> <template v-else-if="hasError"> - <gl-icon class="gl-mr-auto" name="warning-solid" /> - <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span> + <div> + <gl-icon class="gl-mr-auto" name="warning-solid" /> + <span data-testid="pipeline-error-msg">{{ $options.i18n.fetchError }}</span> + </div> </template> <template v-else> - <a :href="status.detailsPath" class="gl-mr-auto"> - <ci-icon :status="status" :size="16" /> - </a> - <span class="gl-font-weight-bold"> - <gl-sprintf :message="$options.i18n.pipelineInfo"> - <template #id="{ content }"> - <gl-link - :href="status.detailsPath" - class="pipeline-id gl-font-weight-normal pipeline-number" - target="_blank" - data-testid="pipeline-id" - > - {{ content }}{{ pipelineId }}</gl-link - > - </template> - <template #status>{{ status.text }}</template> - <template #commit> - <gl-link - :href="pipeline.commitPath" - class="commit-sha gl-font-weight-normal" - target="_blank" - data-testid="pipeline-commit" - > - {{ shortSha }} - </gl-link> - </template> - </gl-sprintf> - </span> + <div> + <a :href="status.detailsPath" class="gl-mr-auto"> + <ci-icon :status="status" :size="16" /> + </a> + <span class="gl-font-weight-bold"> + <gl-sprintf :message="$options.i18n.pipelineInfo"> + <template #id="{ content }"> + <gl-link + :href="status.detailsPath" + class="pipeline-id gl-font-weight-normal pipeline-number" + target="_blank" + data-testid="pipeline-id" + > + {{ content }}{{ pipelineId }}</gl-link + > + </template> + <template #status>{{ status.text }}</template> + <template #commit> + <gl-link + :href="pipeline.commitPath" + class="commit-sha gl-font-weight-normal" + target="_blank" + data-testid="pipeline-commit" + > + {{ shortSha }} + </gl-link> + </template> + </gl-sprintf> + </span> + </div> + <div> + <gl-button + target="_blank" + category="secondary" + variant="confirm" + :href="status.detailsPath" + data-testid="pipeline-view-btn" + > + {{ $options.i18n.viewBtn }} + </gl-button> + </div> </template> </div> </template> |