diff options
Diffstat (limited to 'app/assets/javascripts/security_configuration/components/redesigned_app.vue')
-rw-r--r-- | app/assets/javascripts/security_configuration/components/redesigned_app.vue | 147 |
1 files changed, 147 insertions, 0 deletions
diff --git a/app/assets/javascripts/security_configuration/components/redesigned_app.vue b/app/assets/javascripts/security_configuration/components/redesigned_app.vue new file mode 100644 index 00000000000..d8a12f4a792 --- /dev/null +++ b/app/assets/javascripts/security_configuration/components/redesigned_app.vue @@ -0,0 +1,147 @@ +<script> +import { GlTab, GlTabs, GlSprintf, GlLink } from '@gitlab/ui'; +import { __, s__ } from '~/locale'; +import UserCalloutDismisser from '~/vue_shared/components/user_callout_dismisser.vue'; +import FeatureCard from './feature_card.vue'; +import SectionLayout from './section_layout.vue'; +import UpgradeBanner from './upgrade_banner.vue'; + +export const i18n = { + compliance: s__('SecurityConfiguration|Compliance'), + securityTesting: s__('SecurityConfiguration|Security testing'), + securityTestingDescription: s__( + `SecurityConfiguration|The status of the tools only applies to the + default branch and is based on the %{linkStart}latest pipeline%{linkEnd}. + Once you've enabled a scan for the default branch, any subsequent feature + branch you create will include the scan.`, + ), + securityConfiguration: __('Security Configuration'), +}; + +export default { + i18n, + components: { + GlTab, + GlLink, + GlTabs, + GlSprintf, + FeatureCard, + SectionLayout, + UpgradeBanner, + UserCalloutDismisser, + }, + props: { + augmentedSecurityFeatures: { + type: Array, + required: true, + }, + augmentedComplianceFeatures: { + type: Array, + required: true, + }, + gitlabCiPresent: { + type: Boolean, + required: false, + default: false, + }, + gitlabCiHistoryPath: { + type: String, + required: false, + default: '', + }, + latestPipelinePath: { + type: String, + required: false, + default: '', + }, + }, + computed: { + canUpgrade() { + return [...this.augmentedSecurityFeatures, ...this.augmentedComplianceFeatures].some( + ({ available }) => !available, + ); + }, + canViewCiHistory() { + return Boolean(this.gitlabCiPresent && this.gitlabCiHistoryPath); + }, + }, +}; +</script> + +<template> + <article> + <header> + <h1 class="gl-font-size-h1">{{ $options.i18n.securityConfiguration }}</h1> + </header> + + <user-callout-dismisser v-if="canUpgrade" feature-name="security_configuration_upgrade_banner"> + <template #default="{ dismiss, shouldShowCallout }"> + <upgrade-banner v-if="shouldShowCallout" @close="dismiss" /> + </template> + </user-callout-dismisser> + + <gl-tabs content-class="gl-pt-6"> + <gl-tab data-testid="security-testing-tab" :title="$options.i18n.securityTesting"> + <section-layout :heading="$options.i18n.securityTesting"> + <template #description> + <p + v-if="latestPipelinePath" + data-testid="latest-pipeline-info-security" + class="gl-line-height-20" + > + <gl-sprintf :message="$options.i18n.securityTestingDescription"> + <template #link="{ content }"> + <gl-link :href="latestPipelinePath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + <p v-if="canViewCiHistory"> + <gl-link data-testid="security-view-history-link" :href="gitlabCiHistoryPath">{{ + $options.i18n.configurationHistory + }}</gl-link> + </p> + </template> + + <template #features> + <feature-card + v-for="feature in augmentedSecurityFeatures" + :key="feature.type" + :feature="feature" + class="gl-mb-6" + /> + </template> + </section-layout> + </gl-tab> + <gl-tab data-testid="compliance-testing-tab" :title="$options.i18n.compliance"> + <section-layout :heading="$options.i18n.compliance"> + <template #description> + <p + v-if="latestPipelinePath" + class="gl-line-height-20" + data-testid="latest-pipeline-info-compliance" + > + <gl-sprintf :message="$options.i18n.securityTestingDescription"> + <template #link="{ content }"> + <gl-link :href="latestPipelinePath">{{ content }}</gl-link> + </template> + </gl-sprintf> + </p> + <p v-if="canViewCiHistory"> + <gl-link data-testid="compliance-view-history-link" :href="gitlabCiHistoryPath">{{ + $options.i18n.configurationHistory + }}</gl-link> + </p> + </template> + <template #features> + <feature-card + v-for="feature in augmentedComplianceFeatures" + :key="feature.type" + :feature="feature" + class="gl-mb-6" + /> + </template> + </section-layout> + </gl-tab> + </gl-tabs> + </article> +</template> |