diff options
author | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
---|---|---|
committer | GitLab Bot <gitlab-bot@gitlab.com> | 2022-04-20 13:00:54 +0300 |
commit | 3cccd102ba543e02725d247893729e5c73b38295 (patch) | |
tree | f36a04ec38517f5deaaacb5acc7d949688d1e187 /app/assets/javascripts/security_configuration/components/feature_card.vue | |
parent | 205943281328046ef7b4528031b90fbda70c75ac (diff) |
Add latest changes from gitlab-org/gitlab@14-10-stable-eev14.10.0-rc42
Diffstat (limited to 'app/assets/javascripts/security_configuration/components/feature_card.vue')
-rw-r--r-- | app/assets/javascripts/security_configuration/components/feature_card.vue | 41 |
1 files changed, 35 insertions, 6 deletions
diff --git a/app/assets/javascripts/security_configuration/components/feature_card.vue b/app/assets/javascripts/security_configuration/components/feature_card.vue index cd5ad86e1a8..309e5f21445 100644 --- a/app/assets/javascripts/security_configuration/components/feature_card.vue +++ b/app/assets/javascripts/security_configuration/components/feature_card.vue @@ -1,7 +1,9 @@ <script> import { GlButton, GlCard, GlIcon, GlLink } from '@gitlab/ui'; import { __, s__, sprintf } from '~/locale'; +import { REPORT_TYPE_SAST_IAC } from '~/vue_shared/security_reports/constants'; import ManageViaMr from '~/vue_shared/security_configuration/components/manage_via_mr.vue'; +import FeatureCardBadge from './feature_card_badge.vue'; export default { components: { @@ -9,6 +11,7 @@ export default { GlCard, GlIcon, GlLink, + FeatureCardBadge, ManageViaMr, }, props: { @@ -36,11 +39,14 @@ export default { text: this.$options.i18n.enableFeature, }; - button.category = 'secondary'; + button.category = this.feature.category || 'secondary'; button.text = sprintf(button.text, { feature: this.shortName }); return button; }, + manageViaMrButtonCategory() { + return this.feature.category || 'secondary'; + }, showManageViaMr() { return ManageViaMr.canRender(this.feature); }, @@ -48,19 +54,32 @@ export default { return { 'gl-bg-gray-10': !this.available }; }, statusClasses() { - const { enabled } = this; + const { enabled, hasBadge } = this; return { 'gl-ml-auto': true, 'gl-flex-shrink-0': true, 'gl-text-gray-500': !enabled, 'gl-text-green-500': enabled, + 'gl-w-full': hasBadge, + 'gl-justify-content-space-between': hasBadge, + 'gl-display-flex': hasBadge, + 'gl-mb-4': hasBadge, }; }, hasSecondary() { const { name, description, configurationText } = this.feature.secondary ?? {}; return Boolean(name && description && configurationText); }, + // This condition is a temporary hack to not display any wrong information + // until this BE Bug is fixed: https://gitlab.com/gitlab-org/gitlab/-/issues/350307. + // More Information: https://gitlab.com/gitlab-org/gitlab/-/issues/350307#note_825447417 + isNotSastIACTemporaryHack() { + return this.feature.type !== REPORT_TYPE_SAST_IAC; + }, + hasBadge() { + return Boolean(this.available && this.feature.badge?.text); + }, }, methods: { onError(message) { @@ -81,21 +100,31 @@ export default { <template> <gl-card :class="cardClasses"> - <div class="gl-display-flex gl-align-items-baseline"> + <div + class="gl-display-flex gl-align-items-baseline" + :class="{ 'gl-flex-direction-column-reverse': hasBadge }" + > <h3 class="gl-font-lg gl-m-0 gl-mr-3">{{ feature.name }}</h3> <div + v-if="isNotSastIACTemporaryHack" :class="statusClasses" data-testid="feature-status" :data-qa-selector="`${feature.type}_status`" > + <feature-card-badge + v-if="hasBadge" + :badge="feature.badge" + :badge-href="feature.badge.badgeHref" + /> + <template v-if="enabled"> <gl-icon name="check-circle-filled" /> <span class="gl-text-green-700">{{ $options.i18n.enabled }}</span> </template> <template v-else-if="available"> - {{ $options.i18n.notEnabled }} + <span>{{ $options.i18n.notEnabled }}</span> </template> <template v-else> @@ -109,7 +138,7 @@ export default { <gl-link :href="feature.helpPath">{{ $options.i18n.learnMore }}</gl-link> </p> - <template v-if="available"> + <template v-if="available && isNotSastIACTemporaryHack"> <gl-button v-if="feature.configurationPath" :href="feature.configurationPath" @@ -125,7 +154,7 @@ export default { v-else-if="showManageViaMr" :feature="feature" variant="confirm" - category="secondary" + :category="manageViaMrButtonCategory" class="gl-mt-5" :data-qa-selector="`${feature.type}_mr_button`" @error="onError" |