Merge branch '331614-security-configuration-redesign-update-docs' into 'master'

Update docs about Security Configuration redesign

See merge request gitlab-org/gitlab!64303

app/assets/javascripts/security_configuration/components/constants.js

@@ -34,8 +34,8 @@ export const DAST_CONFIG_HELP_PATH = helpPagePath('user/application_security/das
 });
 
 export const DAST_PROFILES_NAME = __('DAST Scans');
-export const DAST_PROFILES_DESCRIPTION = __(
-  'Saved scan settings and target site settings which are reusable.',
+export const DAST_PROFILES_DESCRIPTION = s__(
+  'SecurityConfiguration|Manage profiles for use by DAST scans.',
 );
 export const DAST_PROFILES_HELP_PATH = helpPagePath('user/application_security/dast/index');
 export const DAST_PROFILES_CONFIG_TEXT = s__('SecurityConfiguration|Manage scans');

app/assets/javascripts/security_configuration/components/redesigned_app.vue

@@ -8,12 +8,15 @@ import UpgradeBanner from './upgrade_banner.vue';
 
 export const i18n = {
   compliance: s__('SecurityConfiguration|Compliance'),
+  configurationHistory: s__('SecurityConfiguration|Configuration history'),
   securityTesting: s__('SecurityConfiguration|Security testing'),
-  securityTestingDescription: s__(
+  latestPipelineDescription: 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.`,
+     default branch and is based on the %{linkStart}latest pipeline%{linkEnd}.`,
+  ),
+  description: s__(
+    `SecurityConfiguration|Once you've enabled a scan for the default branch,
+     any subsequent feature branch you create will include the scan.`,
   ),
   securityConfiguration: __('Security Configuration'),
 };
@@ -84,16 +87,19 @@ export default {
       <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>
+              <span data-testid="latest-pipeline-info-security">
+                <gl-sprintf
+                  v-if="latestPipelinePath"
+                  :message="$options.i18n.latestPipelineDescription"
+                >
+                  <template #link="{ content }">
+                    <gl-link :href="latestPipelinePath">{{ content }}</gl-link>
+                  </template>
+                </gl-sprintf>
+              </span>
+
+              {{ $options.i18n.description }}
             </p>
             <p v-if="canViewCiHistory">
               <gl-link data-testid="security-view-history-link" :href="gitlabCiHistoryPath">{{
@@ -115,16 +121,19 @@ export default {
       <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>
+              <span data-testid="latest-pipeline-info-compliance">
+                <gl-sprintf
+                  v-if="latestPipelinePath"
+                  :message="$options.i18n.latestPipelineDescription"
+                >
+                  <template #link="{ content }">
+                    <gl-link :href="latestPipelinePath">{{ content }}</gl-link>
+                  </template>
+                </gl-sprintf>
+              </span>
+
+              {{ $options.i18n.description }}
             </p>
             <p v-if="canViewCiHistory">
               <gl-link data-testid="compliance-view-history-link" :href="gitlabCiHistoryPath">{{

app/assets/javascripts/security_configuration/components/section_layout.vue

@@ -11,12 +11,12 @@ export default {
 </script>
 
 <template>
-  <div class="row">
-    <div class="col-lg-5">
+  <div class="row gl-line-height-20">
+    <div class="col-lg-4">
       <h2 class="gl-font-size-h2 gl-mt-0">{{ heading }}</h2>
       <slot name="description"></slot>
     </div>
-    <div class="col-lg-7">
+    <div class="col-lg-8">
       <slot name="features"></slot>
     </div>
   </div>

app/views/projects/security/configuration/show.html.haml

 - breadcrumb_title _("Security Configuration")
 - page_title _("Security Configuration")
+- redesign_enabled = ::Feature.enabled?(:security_configuration_redesign, default_enabled: :yaml)
+- @content_class = "limit-container-width" unless fluid_layout || !redesign_enabled
 
 #js-security-configuration-static{ data: { project_path: @project.full_path, upgrade_path: security_upgrade_path } }

doc/user/application_security/configuration/index.md

@@ -25,6 +25,27 @@ For each security control the page displays:
 - **Security Control:** Name, description, and a documentation link.
 - **Manage:** A management option or a documentation link.
 
+## UI redesign
+
+> - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/issues/326926) in 14.0 for GitLab Free and Premium, behind a feature flag, disabled by default.
+> - Enabled on GitLab.com.
+> - Recommended for production use.
+> - It can be enabled or disabled for a single project.
+> - To use in GitLab self-managed instances, ask a GitLab administrator to [enable it](#enable-or-disable-ui-redesign). **(FREE SELF)**
+
+WARNING:
+This feature might not be available to you. Check the **version history** note above for details.
+
+The Security Configuration page has been redesigned in GitLab Free and Premium.
+The same functionality exists as before, but presented in a more extensible
+way.
+
+For each security control the page displays:
+
+- Its name, description and a documentation link.
+- Whether or not it is available.
+- A configuration button or a link to its configuration guide.
+
 ## Status **(ULTIMATE)**
 
 > - [Introduced](https://gitlab.com/gitlab-org/gitlab/-/merge_requests/20711) in [GitLab Ultimate](https://about.gitlab.com/pricing/) 12.6.
@@ -52,3 +73,28 @@ You can configure the following security controls:
 - Secret Detection
   - Select **Configure via Merge Request** to create a merge request with the changes required to
     enable Secret Detection. For more details, see [Enable Secret Detection via an automatic merge request](../secret_detection/index.md#enable-secret-detection-via-an-automatic-merge-request).
+
+## Enable or disable UI redesign **(FREE SELF)**
+
+The Security Configuration redesign is under development, but is ready for
+production use. It is deployed behind a feature flag that is **disabled by
+default**.
+[GitLab administrators with access to the GitLab Rails console](../../../administration/feature_flags.md) can enable it.
+
+To enable it:
+
+```ruby
+# For the instance
+Feature.enable(:security_configuration_redesign)
+# For a single project
+Feature.enable(:security_configuration_redesign, Project.find(<project id>))
+```
+
+To disable it:
+
+```ruby
+# For the instance
+Feature.disable(:security_configuration_redesign)
+# For a single project
+Feature.disable(:security_configuration_redesign, Project.find(<project id>))
+```

locale/gitlab.pot

@@ -28309,9 +28309,6 @@ msgstr ""
 msgid "Save space and find images in the container Registry. remove unneeded tags and keep only the ones you want. %{linkStart}How does cleanup work?%{linkEnd}"
 msgstr ""
 
-msgid "Saved scan settings and target site settings which are reusable."
-msgstr ""
-
 msgid "Saving"
 msgstr ""
 
@@ -28703,6 +28700,9 @@ msgstr ""
 msgid "SecurityConfiguration|Configuration guide"
 msgstr ""
 
+msgid "SecurityConfiguration|Configuration history"
+msgstr ""
+
 msgid "SecurityConfiguration|Configure"
 msgstr ""
 
@@ -28751,6 +28751,9 @@ msgstr ""
 msgid "SecurityConfiguration|Manage"
 msgstr ""
 
+msgid "SecurityConfiguration|Manage profiles for use by DAST scans."
+msgstr ""
+
 msgid "SecurityConfiguration|Manage scans"
 msgstr ""
 
@@ -28760,6 +28763,9 @@ msgstr ""
 msgid "SecurityConfiguration|Not enabled"
 msgstr ""
 
+msgid "SecurityConfiguration|Once you've enabled a scan for the default branch, any subsequent feature branch you create will include the scan."
+msgstr ""
+
 msgid "SecurityConfiguration|Runtime security metrics for application environments."
 msgstr ""
 
@@ -28784,7 +28790,7 @@ msgstr ""
 msgid "SecurityConfiguration|Testing & Compliance"
 msgstr ""
 
-msgid "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."
+msgid "SecurityConfiguration|The status of the tools only applies to the default branch and is based on the %{linkStart}latest pipeline%{linkEnd}."
 msgstr ""
 
 msgid "SecurityConfiguration|Upgrade or start a free trial"

spec/frontend/security_configuration/components/redesigned_app_spec.js

@@ -23,6 +23,7 @@ import {
 } from '~/vue_shared/security_reports/constants';
 
 const upgradePath = '/upgrade';
+const gitlabCiHistoryPath = 'test/historyPath';
 
 describe('redesigned App component', () => {
   let wrapper;
@@ -52,8 +53,28 @@ describe('redesigned App component', () => {
   const findTabs = () => wrapper.findAllComponents(GlTab);
   const findByTestId = (id) => wrapper.findByTestId(id);
   const findFeatureCards = () => wrapper.findAllComponents(FeatureCard);
-  const findComplianceViewHistoryLink = () => findByTestId('compliance-view-history-link');
-  const findSecurityViewHistoryLink = () => findByTestId('security-view-history-link');
+  const findLink = ({ href, text, container = wrapper }) => {
+    const selector = `a[href="${href}"]`;
+    const link = container.find(selector);
+
+    if (link.exists() && link.text() === text) {
+      return link;
+    }
+
+    return wrapper.find(`${selector} does not exist`);
+  };
+  const findSecurityViewHistoryLink = () =>
+    findLink({
+      href: gitlabCiHistoryPath,
+      text: i18n.configurationHistory,
+      container: findByTestId('security-testing-tab'),
+    });
+  const findComplianceViewHistoryLink = () =>
+    findLink({
+      href: gitlabCiHistoryPath,
+      text: i18n.configurationHistory,
+      container: findByTestId('compliance-testing-tab'),
+    });
   const findUpgradeBanner = () => wrapper.findComponent(UpgradeBanner);
 
   const securityFeaturesMock = [
@@ -119,6 +140,10 @@ describe('redesigned App component', () => {
       expect(cards.at(1).props()).toEqual({ feature: complianceFeaturesMock[0] });
     });
 
+    it('renders a basic description', () => {
+      expect(wrapper.text()).toContain(i18n.description);
+    });
+
     it('should not show latest pipeline link when latestPipelinePath is not defined', () => {
       expect(findByTestId('latest-pipeline-info').exists()).toBe(false);
     });
@@ -193,9 +218,8 @@ describe('redesigned App component', () => {
     it('should show latest pipeline info on the security tab  with correct link when latestPipelinePath is defined', () => {
       const latestPipelineInfoSecurity = findByTestId('latest-pipeline-info-security');
 
-      expect(latestPipelineInfoSecurity.exists()).toBe(true);
       expect(latestPipelineInfoSecurity.text()).toMatchInterpolatedText(
-        i18n.securityTestingDescription,
+        i18n.latestPipelineDescription,
       );
       expect(latestPipelineInfoSecurity.find('a').attributes('href')).toBe('test/path');
     });
@@ -203,9 +227,8 @@ describe('redesigned App component', () => {
     it('should show latest pipeline info on the compliance tab  with correct link when latestPipelinePath is defined', () => {
       const latestPipelineInfoCompliance = findByTestId('latest-pipeline-info-compliance');
 
-      expect(latestPipelineInfoCompliance.exists()).toBe(true);
       expect(latestPipelineInfoCompliance.text()).toMatchInterpolatedText(
-        i18n.securityTestingDescription,
+        i18n.latestPipelineDescription,
       );
       expect(latestPipelineInfoCompliance.find('a').attributes('href')).toBe('test/path');
     });
@@ -217,7 +240,7 @@ describe('redesigned App component', () => {
         augmentedSecurityFeatures: securityFeaturesMock,
         augmentedComplianceFeatures: complianceFeaturesMock,
         gitlabCiPresent: true,
-        gitlabCiHistoryPath: 'test/historyPath',
+        gitlabCiHistoryPath,
       });
     });