Add frontend files for GitLab Pages Pipeline Wizard

What does this MR do and why?

This commit introduces two changes:

1. the frontend files needed for an onboarding view for Pages that will enable the user to configure their .gitlab-ci.yml file directly in the UI.
2. A GraphQL Mutation that enables the frontend to toggle the onboarding_complete setting in project_pages_metadata

Note: These interfaces are not yet visible to the user as Rails does not yet render the /new path. !78276 (merged) will subsequently introduce this. This MR is to reduce the MR size of !78276 (merged).

Screenshots or screen recordings

Note: These interfaces are not yet visible to the user as Rails does not yet render the /new path

Step 1

Step 2

Step 3

Step 4 (Commit step)

These are strongly recommended to assist reviewers and reduce the time to merge your change.

How to set up and validate locally

Note that this MR does not yet expose the new feature. To validate, I recommend checking out the follow-up MR !78276 (merged). See the detailed steps below:

1. check out the use-pipeline-wizard-for-pages branch

2. Enable the feature flag with echo "Feature.enable(:use_pipeline_wizard_for_pages)" | rails c

3. Open a repository that you have owner access to.

4. Go to Settings > Pages.

5. Use the Pipeline wizard, click "commit" at the end

6. See the page reloading to waiting state

7. Confirm the waiting state is still there after a page reload

8. If you

   • have your runner set up correctly
   • work in an actual static site app repo (e.g. an Astro app)
   • and have used actual, real settings during the wizard set up a page reload will show the pages settings after reload instead of the "waiting" view.

   alternatively, simulate a successful deploy with the console by running rails c, then:

   project = Project.find(<project-id>)
   project.pages_metadatum.update(deployed: true)

   (note that this will not actually deploy your pages site)

MR acceptance checklist

This checklist encourages us to confirm any changes have been analyzed to reduce risks in quality, performance, reliability, security, and maintainability.

• I have evaluated the MR acceptance checklist for this MR.

app/assets/javascripts/gitlab_pages/components/pages_pipeline_wizard.vue

@@ -5,7 +5,7 @@ import PagesWizardTemplate from '~/pipeline_wizard/templates/pages.yml';
 import { logError } from '~/lib/logger';
 import { s__ } from '~/locale';
 import { redirectTo } from '~/lib/utils/url_utility';
-import MARK_PAGES_ONBOARDING_COMPLETE from '../queries/mark_onboarding_complete.graphql';
+import pagesMarkOnboardingComplete from '../queries/mark_onboarding_complete.graphql';
 
 export const i18n = {
   loadingMessage: s__('GitLabPages|Updating your Pages configuration...'),
@@ -27,6 +27,10 @@ export default {
       type: String,
       required: true,
     },
+    redirectToWhenDone: {
+      type: String,
+      required: true,
+    },
   },
   data() {
     return {
@@ -38,7 +42,7 @@ export default {
     async updateOnboardingState() {
       try {
         await this.$apollo.mutate({
-          mutation: MARK_PAGES_ONBOARDING_COMPLETE,
+          mutation: pagesMarkOnboardingComplete,
           variables: {
             input: { projectPath: this.projectPath },
           },
@@ -51,7 +55,7 @@ export default {
     async onDone() {
       this.loading = true;
       await this.updateOnboardingState();
-      redirectTo('./');
+      redirectTo(this.redirectToWhenDone);
     },
   },
 };
@@ -59,8 +63,12 @@ export default {
 
 <template>
   <div>
-    <div v-if="loading" class="gl-p-3 gl-rounded-base gl-text-center" data-testId="loading">
-      <gl-loading-icon label="Loading" size="sm" color="dark" :inline="false" />
+    <div
+      v-if="loading"
+      class="gl-p-3 gl-rounded-base gl-text-center"
+      data-testid="onboarding-mutation-loading"
+    >
+      <gl-loading-icon label="Loading" />
       {{ $options.i18n.loadingMessage }}
     </div>
     <pipeline-wizard v-else :template="template" v-bind="$props" @done="onDone" />