Merge branch '321201-api-fuzzing-form-ux-fine-tuning-banner' into 'master'

Add an alert in the pipeline editor

See merge request gitlab-org/gitlab!58664

app/assets/javascripts/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue

+<script>
+import { GlAlert } from '@gitlab/ui';
+import { CODE_SNIPPET_SOURCES, CODE_SNIPPET_SOURCE_SETTINGS } from './constants';
+
+export default {
+  name: 'CodeSnippetAlert',
+  components: {
+    GlAlert,
+  },
+  inject: ['configurationPaths'],
+  props: {
+    source: {
+      type: String,
+      required: true,
+      validator: (source) => CODE_SNIPPET_SOURCES.includes(source),
+    },
+  },
+  computed: {
+    settings() {
+      return CODE_SNIPPET_SOURCE_SETTINGS[this.source];
+    },
+    configurationPath() {
+      return this.configurationPaths[this.source];
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-alert
+    variant="tip"
+    :title="__('Code snippet copied. Insert it in the correct location in the YAML file.')"
+    :dismiss-label="__('Dismiss')"
+    :primary-button-link="settings.docsPath"
+    :primary-button-text="__('Read documentation')"
+    :secondary-button-link="configurationPath"
+    :secondary-button-text="__('Go back to configuration')"
+    v-on="$listeners"
+  >
+    {{ __('Before inserting code, be sure to read the comment that separated each code group.') }}
+  </gl-alert>
+</template>

app/assets/javascripts/pipeline_editor/components/code_snippet_alert/constants.js

+import { helpPagePath } from '~/helpers/help_page_helper';
+
+export const CODE_SNIPPET_SOURCE_URL_PARAM = 'code_snippet_copied_from';
+export const CODE_SNIPPET_SOURCE_API_FUZZING = 'api_fuzzing';
+export const CODE_SNIPPET_SOURCES = [CODE_SNIPPET_SOURCE_API_FUZZING];
+export const CODE_SNIPPET_SOURCE_SETTINGS = {
+  [CODE_SNIPPET_SOURCE_API_FUZZING]: {
+    datasetKey: 'apiFuzzingConfigurationPath',
+    docsPath: helpPagePath('user/application_security/api_fuzzing/index'),
+  },
+};

app/assets/javascripts/pipeline_editor/index.js

@@ -3,6 +3,7 @@ import Vue from 'vue';
 import VueApollo from 'vue-apollo';
 import createDefaultClient from '~/lib/graphql';
 import { resetServiceWorkersPublicPath } from '../lib/utils/webpack';
+import { CODE_SNIPPET_SOURCE_SETTINGS } from './components/code_snippet_alert/constants';
 import getCommitSha from './graphql/queries/client/commit_sha.graphql';
 import getCurrentBranch from './graphql/queries/client/current_branch.graphql';
 import { resolvers } from './graphql/resolvers';
@@ -37,6 +38,13 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
     ymlHelpPagePath,
   } = el?.dataset;
 
+  const configurationPaths = Object.fromEntries(
+    Object.entries(CODE_SNIPPET_SOURCE_SETTINGS).map(([source, { datasetKey }]) => [
+      source,
+      el.dataset[datasetKey],
+    ]),
+  );
+
   Vue.use(VueApollo);
 
   const apolloProvider = new VueApollo({
@@ -71,6 +79,7 @@ export const initPipelineEditor = (selector = '#js-pipeline-editor') => {
       projectPath,
       projectNamespace,
       ymlHelpPagePath,
+      configurationPaths,
     },
     render(h) {
       return h(PipelineEditorApp);

app/assets/javascripts/pipeline_editor/pipeline_editor_app.vue

 <script>
 import { GlAlert, GlLoadingIcon } from '@gitlab/ui';
 import httpStatusCodes from '~/lib/utils/http_status';
+import { getParameterValues, removeParams } from '~/lib/utils/url_utility';
 import { __, s__ } from '~/locale';
 
 import { unwrapStagesWithNeeds } from '~/pipelines/components/unwrapping_utils';
+import CodeSnippetAlert from './components/code_snippet_alert/code_snippet_alert.vue';
+import {
+  CODE_SNIPPET_SOURCE_URL_PARAM,
+  CODE_SNIPPET_SOURCES,
+} from './components/code_snippet_alert/constants';
 import ConfirmUnsavedChangesDialog from './components/ui/confirm_unsaved_changes_dialog.vue';
 import PipelineEditorEmptyState from './components/ui/pipeline_editor_empty_state.vue';
 import {
@@ -29,6 +35,7 @@ export default {
     GlLoadingIcon,
     PipelineEditorEmptyState,
     PipelineEditorHome,
+    CodeSnippetAlert,
   },
   inject: {
     ciConfigPath: {
@@ -51,8 +58,10 @@ export default {
       showFailureAlert: false,
       showSuccessAlert: false,
       successType: null,
+      codeSnippetCopiedFrom: '',
     };
   },
+
   apollo: {
     initialCiFileContent: {
       query: getBlobContent,
@@ -187,6 +196,9 @@ export default {
       }
     },
   },
+  created() {
+    this.parseCodeSnippetSourceParam();
+  },
   methods: {
     handleBlobContentError(error = {}) {
       const { networkError } = error;
@@ -254,6 +266,20 @@ export default {
       // if the user has made changes to the file that are unsaved.
       this.lastCommittedContent = this.currentCiFileContent;
     },
+    parseCodeSnippetSourceParam() {
+      const [codeSnippetCopiedFrom] = getParameterValues(CODE_SNIPPET_SOURCE_URL_PARAM);
+      if (codeSnippetCopiedFrom && CODE_SNIPPET_SOURCES.includes(codeSnippetCopiedFrom)) {
+        this.codeSnippetCopiedFrom = codeSnippetCopiedFrom;
+        window.history.replaceState(
+          {},
+          document.title,
+          removeParams([CODE_SNIPPET_SOURCE_URL_PARAM]),
+        );
+      }
+    },
+    dismissCodeSnippetAlert() {
+      this.codeSnippetCopiedFrom = '';
+    },
   },
 };
 </script>
@@ -266,6 +292,12 @@ export default {
       @createEmptyConfigFile="setNewEmptyCiConfigFile"
     />
     <div v-else>
+      <code-snippet-alert
+        v-if="codeSnippetCopiedFrom"
+        :source="codeSnippetCopiedFrom"
+        class="gl-mb-5"
+        @dismiss="dismissCodeSnippetAlert"
+      />
       <gl-alert
         v-if="showSuccessAlert"
         :variant="success.variant"

app/views/projects/ci/pipeline_editor/show.html.haml

@@ -11,4 +11,5 @@
   "project-full-path" => @project.full_path,
   "project-namespace" => @project.namespace.full_path,
   "yml-help-page-path" => help_page_path('ci/yaml/README'),
+  "api-fuzzing-configuration-path" => project_security_configuration_api_fuzzing_path(@project),
 } }

ee/app/assets/javascripts/security_configuration/api_fuzzing/components/configuration_form.vue

@@ -13,6 +13,7 @@ import {
 import * as Sentry from '@sentry/browser';
 import { isEmptyValue } from '~/lib/utils/forms';
 import { __, s__ } from '~/locale';
+import { CODE_SNIPPET_SOURCE_API_FUZZING } from '~/pipeline_editor/components/code_snippet_alert/constants';
 import DropdownInput from '../../components/dropdown_input.vue';
 import DynamicFields from '../../components/dynamic_fields.vue';
 import FormInput from '../../components/form_input.vue';
@@ -23,6 +24,7 @@ import ConfigurationSnippetModal from './configuration_snippet_modal.vue';
 
 export default {
   CONFIGURATION_SNIPPET_MODAL_ID,
+  CODE_SNIPPET_SOURCE_API_FUZZING,
   components: {
     GlAccordion,
     GlAccordionItem,
@@ -333,6 +335,7 @@ export default {
       :ref="$options.CONFIGURATION_SNIPPET_MODAL_ID"
       :ci-yaml-edit-url="ciYamlEditPath"
       :yaml="configurationYamlWithTips"
+      :redirect-param="$options.CODE_SNIPPET_SOURCE_API_FUZZING"
     />
   </form>
 </template>

ee/app/assets/javascripts/security_configuration/api_fuzzing/components/configuration_snippet_modal.vue

 <script>
 import { GlModal } from '@gitlab/ui';
 import Clipboard from 'clipboard';
-import { redirectTo } from '~/lib/utils/url_utility';
+import { getBaseURL, setUrlParams, redirectTo } from '~/lib/utils/url_utility';
+import { CODE_SNIPPET_SOURCE_URL_PARAM } from '~/pipeline_editor/components/code_snippet_alert/constants';
 import { CONFIGURATION_SNIPPET_MODAL_ID } from '../constants';
 
 export default {
@@ -18,6 +19,10 @@ export default {
       type: String,
       required: true,
     },
+    redirectParam: {
+      type: String,
+      required: true,
+    },
   },
   methods: {
     show() {
@@ -33,7 +38,15 @@ export default {
       });
       clipboard.on('success', () => {
         if (andRedirect) {
-          redirectTo(this.ciYamlEditUrl);
+          const url = new URL(this.ciYamlEditUrl, getBaseURL());
+          redirectTo(
+            setUrlParams(
+              {
+                [CODE_SNIPPET_SOURCE_URL_PARAM]: this.redirectParam,
+              },
+              url,
+            ),
+          );
         }
       });
     },

ee/changelogs/unreleased/321201-api-fuzzing-form-ux-fine-tuning-banner.yml

+---
+title: Add tips about copied API Fuzzing configuration snippet in the pipeline editor
+merge_request: 58664
+author:
+type: changed

ee/spec/frontend/security_configuration/api_fuzzing/components/configuration_form_spec.js

@@ -13,6 +13,7 @@ import FormInput from 'ee/security_configuration/components/form_input.vue';
 import { stripTypenames } from 'helpers/graphql_helpers';
 import { extendedWrapper } from 'helpers/vue_test_utils_helper';
 import waitForPromises from 'helpers/wait_for_promises';
+import { CODE_SNIPPET_SOURCE_API_FUZZING } from '~/pipeline_editor/components/code_snippet_alert/constants';
 import {
   apiFuzzingConfigurationQueryResponse,
   createApiFuzzingConfigurationMutationResponse,
@@ -251,6 +252,7 @@ include:
 # Tip: Insert the following variables anywhere below stages and include
 variables:
 - FOO: bar`,
+        redirectParam: CODE_SNIPPET_SOURCE_API_FUZZING,
       });
     });
 

ee/spec/frontend/security_configuration/api_fuzzing/components/configuration_snippet_modal_spec.js

@@ -14,12 +14,16 @@ jest.mock('clipboard', () =>
 );
 jest.mock('~/lib/utils/url_utility', () => ({
   redirectTo: jest.fn(),
+  joinPaths: jest.fn(),
+  getBaseURL: jest.fn().mockReturnValue('http://gitlab.local/'),
+  setUrlParams: jest.requireActual('~/lib/utils/url_utility').setUrlParams,
 }));
 
 const {
   gitlabCiYamlEditPath,
   configurationYaml,
 } = createApiFuzzingConfigurationMutationResponse.data.apiFuzzingCiConfigurationCreate;
+const redirectParam = 'foo';
 
 describe('EE - ApiFuzzingConfigurationSnippetModal', () => {
   let wrapper;
@@ -36,6 +40,7 @@ describe('EE - ApiFuzzingConfigurationSnippetModal', () => {
             propsData: {
               ciYamlEditUrl: gitlabCiYamlEditPath,
               yaml: configurationYaml,
+              redirectParam,
             },
             attrs: {
               static: true,
@@ -66,7 +71,9 @@ describe('EE - ApiFuzzingConfigurationSnippetModal', () => {
     expect(Clipboard).toHaveBeenCalledWith('#copy-yaml-snippet-and-edit-button', {
       text: expect.any(Function),
     });
-    expect(redirectTo).toHaveBeenCalledWith(gitlabCiYamlEditPath);
+    expect(redirectTo).toHaveBeenCalledWith(
+      `http://gitlab.local${gitlabCiYamlEditPath}?code_snippet_copied_from=${redirectParam}`,
+    );
   });
 
   it('on secondary event, text is copied to the clipbard', async () => {

locale/gitlab.pot

@@ -4768,6 +4768,9 @@ msgstr ""
 msgid "Be careful. Renaming a project's repository can have unintended side effects."
 msgstr ""
 
+msgid "Before inserting code, be sure to read the comment that separated each code group."
+msgstr ""
+
 msgid "Before this can be merged, a Jira issue must be linked in the title or description"
 msgstr ""
 
@@ -7689,6 +7692,9 @@ msgstr ""
 msgid "Code owners"
 msgstr ""
 
+msgid "Code snippet copied. Insert it in the correct location in the YAML file."
+msgstr ""
+
 msgid "CodeIntelligence|This is the definition"
 msgstr ""
 
@@ -14696,6 +14702,9 @@ msgstr ""
 msgid "Go back (while searching for files)"
 msgstr ""
 
+msgid "Go back to configuration"
+msgstr ""
+
 msgid "Go full screen"
 msgstr ""
 
@@ -25559,6 +25568,9 @@ msgstr ""
 msgid "Re-verification interval"
 msgstr ""
 
+msgid "Read documentation"
+msgstr ""
+
 msgid "Read more"
 msgstr ""
 

spec/frontend/pipeline_editor/components/code_snippet_alert/code_snippet_alert_spec.js

+import { within } from '@testing-library/dom';
+import { mount } from '@vue/test-utils';
+import { merge } from 'lodash';
+import { TEST_HOST } from 'helpers/test_constants';
+import { extendedWrapper } from 'helpers/vue_test_utils_helper';
+import CodeSnippetAlert from '~/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue';
+import { CODE_SNIPPET_SOURCE_API_FUZZING } from '~/pipeline_editor/components/code_snippet_alert/constants';
+
+const apiFuzzingConfigurationPath = '/namespace/project/-/security/configuration/api_fuzzing';
+
+describe('EE - CodeSnippetAlert', () => {
+  let wrapper;
+
+  const createWrapper = (options) => {
+    wrapper = extendedWrapper(
+      mount(
+        CodeSnippetAlert,
+        merge(
+          {
+            provide: {
+              configurationPaths: {
+                [CODE_SNIPPET_SOURCE_API_FUZZING]: apiFuzzingConfigurationPath,
+              },
+            },
+            propsData: {
+              source: CODE_SNIPPET_SOURCE_API_FUZZING,
+            },
+          },
+          options,
+        ),
+      ),
+    );
+  };
+
+  const withinComponent = () => within(wrapper.element);
+  const findDocsLink = () => withinComponent().getByRole('link', { name: /read documentation/i });
+  const findConfigurationLink = () =>
+    withinComponent().getByRole('link', { name: /Go back to configuration/i });
+
+  beforeEach(() => {
+    createWrapper();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+  });
+
+  it("provides a link to the feature's documentation", () => {
+    const docsLink = findDocsLink();
+
+    expect(docsLink).not.toBe(null);
+    expect(docsLink.href).toBe(`${TEST_HOST}/help/user/application_security/api_fuzzing/index`);
+  });
+
+  it("provides a link to the feature's configuration form", () => {
+    const configurationLink = findConfigurationLink();
+
+    expect(configurationLink).not.toBe(null);
+    expect(configurationLink.href).toBe(TEST_HOST + apiFuzzingConfigurationPath);
+  });
+});

spec/frontend/pipeline_editor/pipeline_editor_app_spec.js

@@ -2,8 +2,11 @@ import { GlAlert, GlButton, GlLoadingIcon, GlTabs } from '@gitlab/ui';
 import { shallowMount, createLocalVue } from '@vue/test-utils';
 import VueApollo from 'vue-apollo';
 import createMockApollo from 'helpers/mock_apollo_helper';
+import { TEST_HOST } from 'helpers/test_constants';
 import waitForPromises from 'helpers/wait_for_promises';
 import httpStatusCodes from '~/lib/utils/http_status';
+import CodeSnippetAlert from '~/pipeline_editor/components/code_snippet_alert/code_snippet_alert.vue';
+import { CODE_SNIPPET_SOURCES } from '~/pipeline_editor/components/code_snippet_alert/constants';
 import CommitForm from '~/pipeline_editor/components/commit/commit_form.vue';
 import TextEditor from '~/pipeline_editor/components/editor/text_editor.vue';
 
@@ -105,6 +108,7 @@ describe('Pipeline editor app component', () => {
   const findEmptyState = () => wrapper.findComponent(PipelineEditorEmptyState);
   const findEmptyStateButton = () =>
     wrapper.findComponent(PipelineEditorEmptyState).findComponent(GlButton);
+  const findCodeSnippetAlert = () => wrapper.findComponent(CodeSnippetAlert);
 
   beforeEach(() => {
     mockBlobContentData = jest.fn();
@@ -127,6 +131,48 @@ describe('Pipeline editor app component', () => {
     });
   });
 
+  describe('code snippet alert', () => {
+    const setCodeSnippetUrlParam = (value) => {
+      global.jsdom.reconfigure({
+        url: `${TEST_HOST}/?code_snippet_copied_from=${value}`,
+      });
+    };
+
+    it('does not show by default', () => {
+      createComponent();
+
+      expect(findCodeSnippetAlert().exists()).toBe(false);
+    });
+
+    it.each(CODE_SNIPPET_SOURCES)('shows if URL param is %s, and cleans up URL', (source) => {
+      jest.spyOn(window.history, 'replaceState');
+      setCodeSnippetUrlParam(source);
+      createComponent();
+
+      expect(findCodeSnippetAlert().exists()).toBe(true);
+      expect(window.history.replaceState).toHaveBeenCalledWith({}, document.title, `${TEST_HOST}/`);
+    });
+
+    it('does not show if URL param is invalid', () => {
+      setCodeSnippetUrlParam('foo_bar');
+      createComponent();
+
+      expect(findCodeSnippetAlert().exists()).toBe(false);
+    });
+
+    it('disappears on dismiss', async () => {
+      setCodeSnippetUrlParam('api_fuzzing');
+      createComponent();
+      const alert = findCodeSnippetAlert();
+
+      expect(alert.exists()).toBe(true);
+
+      await alert.vm.$emit('dismiss');
+
+      expect(alert.exists()).toBe(false);
+    });
+  });
+
   describe('when queries are called', () => {
     beforeEach(() => {
       mockBlobContentData.mockResolvedValue(mockCiYml);