Merge branch 'add-commit-step-component-for-pipeline-wizard' into 'master'

Add the commit step component to be used by the Pipeline Wizard

See merge request gitlab-org/gitlab!80171

app/assets/javascripts/pipeline_wizard/components/commit.vue

+<script>
+import { GlAlert, GlButton, GlForm, GlFormGroup, GlFormTextarea } from '@gitlab/ui';
+import RefSelector from '~/ref/components/ref_selector.vue';
+import { __, s__, sprintf } from '~/locale';
+import createCommitMutation from '../queries/create_commit.graphql';
+import getFileMetaDataQuery from '../queries/get_file_meta.graphql';
+import StepNav from './step_nav.vue';
+
+export const i18n = {
+  updateFileHeading: s__('PipelineWizard|Commit changes to your file'),
+  createFileHeading: s__('PipelineWizard|Commit your new file'),
+  fieldRequiredFeedback: __('This field is required'),
+  commitMessageLabel: s__('PipelineWizard|Commit Message'),
+  branchSelectorLabel: s__('PipelineWizard|Commit file to Branch'),
+  defaultUpdateCommitMessage: s__('PipelineWizardDefaultCommitMessage|Update %{filename}'),
+  defaultCreateCommitMessage: s__('PipelineWizardDefaultCommitMessage|Add %{filename}'),
+  commitButtonLabel: s__('PipelineWizard|Commit'),
+  commitSuccessMessage: s__('PipelineWizard|The file has been committed.'),
+  errors: {
+    loadError: s__(
+      'PipelineWizard|There was a problem while checking whether your file already exists in the specified branch.',
+    ),
+    commitError: s__('PipelineWizard|There was a problem committing the changes.'),
+  },
+};
+
+const COMMIT_ACTION = {
+  CREATE: 'CREATE',
+  UPDATE: 'UPDATE',
+};
+
+export default {
+  i18n,
+  name: 'PipelineWizardCommitStep',
+  components: {
+    RefSelector,
+    GlAlert,
+    GlButton,
+    GlForm,
+    GlFormGroup,
+    GlFormTextarea,
+    StepNav,
+  },
+  props: {
+    prev: {
+      type: Object,
+      required: false,
+      default: null,
+    },
+    projectPath: {
+      type: String,
+      required: true,
+    },
+    defaultBranch: {
+      type: String,
+      required: true,
+    },
+    fileContent: {
+      type: String,
+      required: false,
+      default: '',
+    },
+    filename: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      branch: this.defaultBranch,
+      loading: false,
+      loadError: null,
+      commitError: null,
+      message: null,
+    };
+  },
+  computed: {
+    fileExistsInRepo() {
+      return this.project?.repository?.blobs.nodes.length > 0;
+    },
+    commitAction() {
+      return this.fileExistsInRepo ? COMMIT_ACTION.UPDATE : COMMIT_ACTION.CREATE;
+    },
+    defaultMessage() {
+      return sprintf(
+        this.fileExistsInRepo
+          ? this.$options.i18n.defaultUpdateCommitMessage
+          : this.$options.i18n.defaultCreateCommitMessage,
+        { filename: this.filename },
+      );
+    },
+    isCommitButtonEnabled() {
+      return this.fileExistsCheckInProgress;
+    },
+    fileExistsCheckInProgress() {
+      return this.$apollo.queries.project.loading;
+    },
+    mutationPayload() {
+      return {
+        mutation: createCommitMutation,
+        variables: {
+          input: {
+            projectPath: this.projectPath,
+            branch: this.branch,
+            message: this.message || this.defaultMessage,
+            actions: [
+              {
+                action: this.commitAction,
+                filePath: `/${this.filename}`,
+                content: this.fileContent,
+              },
+            ],
+          },
+        },
+      };
+    },
+  },
+  apollo: {
+    project: {
+      query: getFileMetaDataQuery,
+      variables() {
+        this.loadError = null;
+        return {
+          fullPath: this.projectPath,
+          filePath: this.filename,
+          ref: this.branch,
+        };
+      },
+      error() {
+        this.loadError = this.$options.i18n.errors.loadError;
+      },
+    },
+  },
+  methods: {
+    async commit() {
+      this.loading = true;
+      try {
+        const { data } = await this.$apollo.mutate(this.mutationPayload);
+        const hasError = Boolean(data.commitCreate.errors?.length);
+        if (hasError) {
+          this.commitError = this.$options.i18n.errors.commitError;
+        } else {
+          this.handleCommitSuccess();
+        }
+      } catch (e) {
+        this.commitError = this.$options.i18n.errors.commitError;
+      } finally {
+        this.loading = false;
+      }
+    },
+    handleCommitSuccess() {
+      this.$toast.show(this.$options.i18n.commitSuccessMessage);
+      this.$emit('done');
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <h4 v-if="fileExistsInRepo" key="create-heading">
+      {{ $options.i18n.updateFileHeading }}
+    </h4>
+    <h4 v-else key="update-heading">
+      {{ $options.i18n.createFileHeading }}
+    </h4>
+    <gl-alert
+      v-if="!!loadError"
+      :dismissible="false"
+      class="gl-mb-5"
+      data-testid="load-error"
+      variant="danger"
+    >
+      {{ loadError }}
+    </gl-alert>
+    <gl-form class="gl-max-w-48">
+      <gl-form-group
+        :invalid-feedback="$options.i18n.fieldRequiredFeedback"
+        :label="$options.i18n.commitMessageLabel"
+        data-testid="commit_message_group"
+        label-for="commit_message"
+      >
+        <gl-form-textarea
+          id="commit_message"
+          v-model="message"
+          :placeholder="defaultMessage"
+          data-testid="commit_message"
+          size="md"
+          @input="(v) => $emit('update:message', v)"
+        />
+      </gl-form-group>
+      <gl-form-group
+        :invalid-feedback="$options.i18n.fieldRequiredFeedback"
+        :label="$options.i18n.branchSelectorLabel"
+        data-testid="branch_selector_group"
+        label-for="branch"
+      >
+        <ref-selector id="branch" v-model="branch" data-testid="branch" :project-id="projectPath" />
+      </gl-form-group>
+      <gl-alert
+        v-if="!!commitError"
+        :dismissible="false"
+        class="gl-mb-5"
+        data-testid="commit-error"
+        variant="danger"
+      >
+        {{ commitError }}
+      </gl-alert>
+      <step-nav show-back-button v-bind="$props" @back="$emit('go-back')">
+        <template #after>
+          <gl-button
+            :disabled="isCommitButtonEnabled"
+            :loading="fileExistsCheckInProgress || loading"
+            category="primary"
+            variant="confirm"
+            @click="commit"
+          >
+            {{ $options.i18n.commitButtonLabel }}
+          </gl-button>
+        </template>
+      </step-nav>
+    </gl-form>
+  </div>
+</template>

app/assets/javascripts/pipeline_wizard/queries/create_commit.graphql

+mutation CreateCommit($input: CommitCreateInput!) {
+  commitCreate(input: $input) {
+    commit {
+      id
+    }
+    content
+    errors
+  }
+}

app/assets/javascripts/pipeline_wizard/queries/get_file_meta.graphql

+query GetFileMetadata($fullPath: ID!, $filePath: String!, $ref: String) {
+  project(fullPath: $fullPath) {
+    id
+    repository {
+      blobs(paths: [$filePath], ref: $ref) {
+        nodes {
+          id
+        }
+      }
+    }
+  }
+}

locale/gitlab.pot

@@ -26643,12 +26643,42 @@ msgstr ""
 msgid "PipelineStatusTooltip|Pipeline: %{ci_status}"
 msgstr ""
 
+msgid "PipelineWizardDefaultCommitMessage|Add %{filename}"
+msgstr ""
+
+msgid "PipelineWizardDefaultCommitMessage|Update %{filename}"
+msgstr ""
+
 msgid "PipelineWizardInputValidation|This field is required"
 msgstr ""
 
 msgid "PipelineWizardInputValidation|This value is not valid"
 msgstr ""
 
+msgid "PipelineWizard|Commit"
+msgstr ""
+
+msgid "PipelineWizard|Commit Message"
+msgstr ""
+
+msgid "PipelineWizard|Commit changes to your file"
+msgstr ""
+
+msgid "PipelineWizard|Commit file to Branch"
+msgstr ""
+
+msgid "PipelineWizard|Commit your new file"
+msgstr ""
+
+msgid "PipelineWizard|The file has been committed."
+msgstr ""
+
+msgid "PipelineWizard|There was a problem committing the changes."
+msgstr ""
+
+msgid "PipelineWizard|There was a problem while checking whether your file already exists in the specified branch."
+msgstr ""
+
 msgid "Pipelines"
 msgstr ""
 

spec/frontend/pipeline_wizard/mock/query_responses.js

+export const createCommitMutationResult = {
+  data: {
+    commitCreate: {
+      commit: {
+        id: '82a9df1',
+      },
+      content: 'foo: bar',
+      errors: null,
+    },
+  },
+};
+
+export const createCommitMutationErrorResult = {
+  data: {
+    commitCreate: {
+      commit: null,
+      content: null,
+      errors: ['Some Error Message'],
+    },
+  },
+};
+
+export const fileQueryResult = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/1',
+      repository: {
+        blobs: {
+          nodes: [
+            {
+              id: 'gid://gitlab/Blob/9ff96777b315cd37188f7194d8382c718cb2933c',
+            },
+          ],
+        },
+      },
+    },
+  },
+};
+
+export const fileQueryEmptyResult = {
+  data: {
+    project: {
+      id: 'gid://gitlab/Project/2',
+      repository: {
+        blobs: {
+          nodes: [],
+        },
+      },
+    },
+  },
+};
+
+export const fileQueryErrorResult = {
+  data: {
+    foo: 'bar',
+    project: {
+      id: null,
+      repository: null,
+    },
+  },
+  errors: [{ message: 'GraphQL Error' }],
+};