.gitlab/ci/reports.gitlab-ci.yml

@@ -43,16 +43,16 @@ code_quality:
 # We need to duplicate this job's definition because it seems it's impossible to
 # override an included `only.refs`.
 # See https://gitlab.com/gitlab-org/gitlab/issues/31371.
-# Once https://gitlab.com/gitlab-org/gitlab/merge_requests/16487 will be deployed
-# to GitLab.com, we should be able to use the template and set SAST_DISABLE_DIND: "true".
-sast:
+.sast:
   extends:
     - .default-retry
     - .reports:rules:sast
     - .use-docker-in-docker
   stage: test
-  allow_failure: true
+  # `needs: []` starts the job immediately in the pipeline
+  # https://docs.gitlab.com/ee/ci/yaml/README.html#needs
   needs: []
+  allow_failure: true
   artifacts:
     paths:
       - gl-sast-report.json  # GitLab-specific
@@ -63,22 +63,39 @@ sast:
     # emptying DOCKER_HOST so it can be detected properly on kubernetes executor
     # with the script below
     DOCKER_HOST: ""
+    DOCKER_DRIVER: overlay2
+    DOCKER_TLS_CERTDIR: ""
+    SAST_ANALYZER_IMAGE_PREFIX: "registry.gitlab.com/gitlab-org/security-products/analyzers"
+    SAST_ANALYZER_IMAGE_TAG: 2
     SAST_BRAKEMAN_LEVEL: 2  # GitLab-specific
     SAST_EXCLUDED_PATHS: qa,spec,doc,ee/spec  # GitLab-specific
   script:
-    - export SAST_VERSION=${SP_VERSION:-$(echo "$CI_SERVER_VERSION" | sed 's/^\([0-9]*\)\.\([0-9]*\).*/\1-\2-stable/')}
-    - |
-      if ! docker info &>/dev/null; then
-        if [ -z "$DOCKER_HOST" -a "$KUBERNETES_PORT" ]; then
-          export DOCKER_HOST='tcp://localhost:2375'
-        fi
-      fi
-    - |
-      ENVS=`printenv | grep -vE '^(DOCKER_|CI|GITLAB_|FF_|HOME|PWD|OLDPWD|PATH|SHLVL|HOSTNAME)' | sed -n '/^[^\t]/s/=.*//p' | sed '/^$/d' | sed 's/^/-e /g' | tr '\n' ' '`
-      docker run "$ENVS" \
-        --volume "$PWD:/code" \
-        --volume /var/run/docker.sock:/var/run/docker.sock \
-        "registry.gitlab.com/gitlab-org/security-products/sast:$SAST_VERSION" /app/bin/run /code
+    - /analyzer run
+
+brakeman-sast:
+  extends: .sast
+  image:
+    name: "$SAST_ANALYZER_IMAGE_PREFIX/brakeman:$SAST_ANALYZER_IMAGE_TAG"
+
+eslint-sast:
+  extends: .sast
+  image:
+    name: "$SAST_ANALYZER_IMAGE_PREFIX/eslint:$SAST_ANALYZER_IMAGE_TAG"
+
+kubesec-sast:
+  extends: .sast
+  image:
+    name: "$SAST_ANALYZER_IMAGE_PREFIX/kubesec:$SAST_ANALYZER_IMAGE_TAG"
+
+nodejs-scan-sast:
+  extends: .sast
+  image:
+    name: "$SAST_ANALYZER_IMAGE_PREFIX/nodejs-scan:$SAST_ANALYZER_IMAGE_TAG"
+
+secrets-sast:
+  extends: .sast
+  image:
+    name: "$SAST_ANALYZER_IMAGE_PREFIX/secrets:$SAST_ANALYZER_IMAGE_TAG"
 
 # We need to duplicate this job's definition because it seems it's impossible to
 # override an included `only.refs`.

.haml-lint_todo.yml

@@ -409,7 +409,6 @@ linters:
       - 'ee/app/views/projects/push_rules/_index.html.haml'
       - 'ee/app/views/projects/services/gitlab_slack_application/_help.html.haml'
       - 'ee/app/views/projects/services/gitlab_slack_application/_slack_integration_form.html.haml'
-      - 'ee/app/views/projects/services/prometheus/_metrics.html.haml'
       - 'ee/app/views/projects/settings/slacks/edit.html.haml'
       - 'ee/app/views/shared/_additional_email_text.html.haml'
       - 'ee/app/views/shared/_mirror_update_button.html.haml'

app/assets/javascripts/ide/services/index.js

@@ -25,7 +25,7 @@ export default {
       return Promise.resolve(file.content);
     }
 
-    if (file.raw) {
+    if (file.raw || !file.rawPath) {
       return Promise.resolve(file.raw);
     }
 

app/assets/javascripts/jira_import/components/jira_import_app.vue

 <script>
 import getJiraProjects from '../queries/getJiraProjects.query.graphql';
+import JiraImportForm from './jira_import_form.vue';
 import JiraImportSetup from './jira_import_setup.vue';
 
 export default {
   name: 'JiraImportApp',
   components: {
+    JiraImportForm,
     JiraImportSetup,
   },
   props: {
@@ -41,6 +43,6 @@ export default {
 <template>
   <div>
     <jira-import-setup v-if="!isJiraConfigured" :illustration="setupIllustration" />
-    <div v-else></div>
+    <jira-import-form v-else />
   </div>
 </template>

app/assets/javascripts/jira_import/components/jira_import_form.vue

+<script>
+import { GlAvatar, GlNewButton, GlFormGroup, GlFormSelect, GlLabel } from '@gitlab/ui';
+
+export default {
+  name: 'JiraImportForm',
+  components: {
+    GlAvatar,
+    GlNewButton,
+    GlFormGroup,
+    GlFormSelect,
+    GlLabel,
+  },
+  currentUserAvatarUrl: gon.current_user_avatar_url,
+  currentUsername: gon.current_username,
+};
+</script>
+
+<template>
+  <div>
+    <h3 class="page-title">{{ __('New Jira import') }}</h3>
+    <hr />
+    <form>
+      <gl-form-group
+        class="row align-items-center"
+        :label="__('Import from')"
+        label-cols-sm="2"
+        label-for="jira-project-select"
+      >
+        <gl-form-select id="jira-project-select" class="mb-2" />
+      </gl-form-group>
+
+      <gl-form-group
+        class="row align-items-center"
+        :label="__('Issue label')"
+        label-cols-sm="2"
+        label-for="jira-project-label"
+      >
+        <gl-label
+          id="jira-project-label"
+          class="mb-2"
+          background-color="#428BCA"
+          title="jira-import::KEY-1"
+          scoped
+        />
+      </gl-form-group>
+
+      <hr />
+
+      <p class="offset-md-1">
+        {{
+          __(
+            "For each Jira issue successfully imported, we'll create a new GitLab issue with the following data:",
+          )
+        }}
+      </p>
+
+      <gl-form-group
+        class="row align-items-center mb-1"
+        :label="__('Title')"
+        label-cols-sm="2"
+        label-for="jira-project-title"
+      >
+        <p id="jira-project-title" class="mb-2">{{ __('jira.issue.summary') }}</p>
+      </gl-form-group>
+      <gl-form-group
+        class="row align-items-center mb-1"
+        :label="__('Reporter')"
+        label-cols-sm="2"
+        label-for="jira-project-reporter"
+      >
+        <gl-avatar
+          id="jira-project-reporter"
+          class="mb-2"
+          :src="$options.currentUserAvatarUrl"
+          :size="24"
+          :aria-label="$options.currentUsername"
+        />
+      </gl-form-group>
+      <gl-form-group
+        class="row align-items-center mb-1"
+        :label="__('Description')"
+        label-cols-sm="2"
+        label-for="jira-project-description"
+      >
+        <p id="jira-project-description" class="mb-2">{{ __('jira.issue.description.content') }}</p>
+      </gl-form-group>
+
+      <div class="footer-block row-content-block d-flex justify-content-between">
+        <gl-new-button category="primary" variant="success">{{ __('Next') }}</gl-new-button>
+        <gl-new-button>{{ __('Cancel') }}</gl-new-button>
+      </div>
+    </form>
+  </div>
+</template>

app/assets/javascripts/logs/components/environment_logs.vue

@@ -70,9 +70,10 @@ export default {
       return this.logs.isLoading;
     },
     shouldShowElasticStackCallout() {
-      return (
-        !this.isElasticStackCalloutDismissed &&
-        (this.environments.isLoading || !this.showAdvancedFilters)
+      return !(
+        this.environments.isLoading ||
+        this.isElasticStackCalloutDismissed ||
+        this.showAdvancedFilters
       );
     },
   },
@@ -88,10 +89,9 @@ export default {
   methods: {
     ...mapActions('environmentLogs', [
       'setInitData',
-      'setSearch',
-      'showPodLogs',
       'showEnvironment',
       'fetchEnvironments',
+      'fetchLogs',
       'fetchMoreLogsPrepend',
       'dismissRequestEnvironmentsError',
       'dismissInvalidTimeRangeWarning',
@@ -120,7 +120,8 @@ export default {
   <div class="environment-logs-viewer d-flex flex-column py-3">
     <gl-alert
       v-if="shouldShowElasticStackCallout"
-      class="mb-3 js-elasticsearch-alert"
+      ref="elasticsearchNotice"
+      class="mb-3"
       @dismiss="isElasticStackCalloutDismissed = true"
     >
       {{
@@ -189,13 +190,13 @@ export default {
       <log-advanced-filters
         v-if="showAdvancedFilters"
         ref="log-advanced-filters"
-        class="d-md-flex flex-grow-1"
+        class="d-md-flex flex-grow-1 min-width-0"
         :disabled="environments.isLoading"
       />
       <log-simple-filters
         v-else
         ref="log-simple-filters"
-        class="d-md-flex flex-grow-1"
+        class="d-md-flex flex-grow-1 min-width-0"
         :disabled="environments.isLoading"
       />
 
@@ -203,7 +204,7 @@ export default {
         ref="scrollButtons"
         class="flex-grow-0 pr-2 mb-2 controllers"
         :scroll-down-button-disabled="scrollDownButtonDisabled"
-        @refresh="showPodLogs(pods.current)"
+        @refresh="fetchLogs()"
         @scrollDown="scrollDown"
       />
     </div>

app/assets/javascripts/logs/components/log_advanced_filters.vue

 <script>
-import { s__ } from '~/locale';
-import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import { mapActions, mapState } from 'vuex';
-import {
-  GlIcon,
-  GlDropdown,
-  GlDropdownHeader,
-  GlDropdownDivider,
-  GlDropdownItem,
-  GlSearchBoxByClick,
-} from '@gitlab/ui';
+import { GlFilteredSearch } from '@gitlab/ui';
+import { __, s__ } from '~/locale';
+import DateTimePicker from '~/vue_shared/components/date_time_picker/date_time_picker.vue';
 import { timeRanges } from '~/vue_shared/constants';
+import { TOKEN_TYPE_POD_NAME } from '../constants';
+import TokenWithLoadingState from './tokens/token_with_loading_state.vue';
 
 export default {
   components: {
-    GlIcon,
-    GlDropdown,
-    GlDropdownHeader,
-    GlDropdownDivider,
-    GlDropdownItem,
-    GlSearchBoxByClick,
+    GlFilteredSearch,
     DateTimePicker,
   },
   props: {
@@ -32,11 +22,10 @@ export default {
   data() {
     return {
       timeRanges,
-      searchQuery: '',
     };
   },
   computed: {
-    ...mapState('environmentLogs', ['timeRange', 'pods']),
+    ...mapState('environmentLogs', ['timeRange', 'pods', 'logs']),
 
     timeRangeModel: {
       get() {
@@ -46,75 +35,56 @@ export default {
         this.setTimeRange(val);
       },
     },
+    /**
+     * Token options.
+     *
+     * Returns null when no pods are present, so suggestions are displayed in the token
+     */
+    podOptions() {
+      if (this.pods.options.length) {
+        return this.pods.options.map(podName => ({ value: podName, title: podName }));
+      }
+      return null;
+    },
 
-    podDropdownText() {
-      return this.pods.current || s__('Environments|All pods');
+    tokens() {
+      return [
+        {
+          icon: 'pod',
+          type: TOKEN_TYPE_POD_NAME,
+          title: s__('Environments|Pod name'),
+          token: TokenWithLoadingState,
+          operators: [{ value: '=', description: __('is'), default: 'true' }],
+          unique: true,
+          options: this.podOptions,
+          loading: this.logs.isLoading,
+          noOptionsText: s__('Environments|No pods to display'),
+        },
+      ];
     },
   },
   methods: {
-    ...mapActions('environmentLogs', ['setSearch', 'showPodLogs', 'setTimeRange']),
-    isCurrentPod(podName) {
-      return podName === this.pods.current;
+    ...mapActions('environmentLogs', ['showFilteredLogs', 'setTimeRange']),
+
+    filteredSearchSubmit(filters) {
+      this.showFilteredLogs(filters);
     },
   },
 };
 </script>
 <template>
   <div>
-    <gl-dropdown
-      ref="podsDropdown"
-      :text="podDropdownText"
-      :disabled="disabled"
-      class="mb-2 gl-h-32 pr-2 d-flex d-md-block flex-grow-0 qa-pods-dropdown"
-    >
-      <gl-dropdown-header class="text-center">
-        {{ s__('Environments|Filter by pod') }}
-      </gl-dropdown-header>
-
-      <gl-dropdown-item v-if="!pods.options.length" disabled>
-        <span ref="noPodsMsg" class="text-muted">
-          {{ s__('Environments|No pods to display') }}
-        </span>
-      </gl-dropdown-item>
-
-      <template v-else>
-        <gl-dropdown-item ref="allPodsOption" key="all-pods" @click="showPodLogs(null)">
-          <div class="d-flex">
-            <gl-icon
-              :class="{ invisible: pods.current !== null }"
-              name="status_success_borderless"
-            />
-            <div class="flex-grow-1">{{ s__('Environments|All pods') }}</div>
-          </div>
-        </gl-dropdown-item>
-        <gl-dropdown-divider />
-        <gl-dropdown-item
-          v-for="podName in pods.options"
-          :key="podName"
-          class="text-nowrap"
-          @click="showPodLogs(podName)"
-        >
-          <div class="d-flex">
-            <gl-icon
-              :class="{ invisible: !isCurrentPod(podName) }"
-              name="status_success_borderless"
-            />
-            <div class="flex-grow-1">{{ podName }}</div>
-          </div>
-        </gl-dropdown-item>
-      </template>
-    </gl-dropdown>
-
-    <gl-search-box-by-click
-      ref="searchBox"
-      v-model.trim="searchQuery"
-      :disabled="disabled"
-      :placeholder="s__('Environments|Search')"
-      class="mb-2 pr-2 flex-grow-1"
-      type="search"
-      autofocus
-      @submit="setSearch(searchQuery)"
-    />
+    <div class="mb-2 pr-2 flex-grow-1 min-width-0">
+      <gl-filtered-search
+        :placeholder="__('Search')"
+        :clear-button-title="__('Clear')"
+        :close-button-title="__('Close')"
+        class="gl-h-32"
+        :disabled="disabled || logs.isLoading"
+        :available-tokens="tokens"
+        @submit="filteredSearchSubmit"
+      />
+    </div>
 
     <date-time-picker
       ref="dateTimePicker"

app/assets/javascripts/logs/components/tokens/token_with_loading_state.vue

+<script>
+import { GlFilteredSearchToken, GlLoadingIcon } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlFilteredSearchToken,
+    GlLoadingIcon,
+  },
+  inheritAttrs: false,
+  props: {
+    config: {
+      type: Object,
+      required: true,
+    },
+  },
+};
+</script>
+
+<template>
+  <gl-filtered-search-token :config="config" v-bind="{ ...$attrs }" v-on="$listeners">
+    <template #suggestions>
+      <div class="m-1">
+        <gl-loading-icon v-if="config.loading" />
+        <div v-else class="py-1 px-2 text-muted">
+          {{ config.noOptionsText }}
+        </div>
+      </div>
+    </template>
+  </gl-filtered-search-token>
+</template>

app/assets/javascripts/logs/constants.js

+export const dateFormatMask = 'UTC:mmm dd HH:MM:ss.l"Z"';
+
+export const TOKEN_TYPE_POD_NAME = 'TOKEN_TYPE_POD_NAME';

app/assets/javascripts/logs/stores/actions.js

@@ -2,6 +2,7 @@ import { backOff } from '~/lib/utils/common_utils';
 import httpStatusCodes from '~/lib/utils/http_status';
 import axios from '~/lib/utils/axios_utils';
 import { convertToFixedRange } from '~/lib/utils/datetime_range';
+import { TOKEN_TYPE_POD_NAME } from '../constants';
 
 import * as types from './mutation_types';
 
@@ -49,19 +50,42 @@ const requestLogsUntilData = ({ commit, state }) => {
   return requestUntilData(logs_api_path, params);
 };
 
+/**
+ * Converts filters emitted by the component, e.g. a filterered-search
+ * to parameters to be applied to the filters of the store
+ * @param {Array} filters - List of strings or objects to filter by.
+ * @returns {Object} - An object with `search` and `podName` keys.
+ */
+const filtersToParams = (filters = []) => {
+  // Strings become part of the `search`
+  const search = filters
+    .filter(f => typeof f === 'string')
+    .join(' ')
+    .trim();
+
+  // null podName to show all pods
+  const podName = filters.find(f => f?.type === TOKEN_TYPE_POD_NAME)?.value?.data ?? null;
+
+  return { search, podName };
+};
+
 export const setInitData = ({ commit }, { timeRange, environmentName, podName }) => {
   commit(types.SET_TIME_RANGE, timeRange);
   commit(types.SET_PROJECT_ENVIRONMENT, environmentName);
   commit(types.SET_CURRENT_POD_NAME, podName);
 };
 
-export const showPodLogs = ({ dispatch, commit }, podName) => {
+export const showFilteredLogs = ({ dispatch, commit }, filters = []) => {
+  const { podName, search } = filtersToParams(filters);
+
   commit(types.SET_CURRENT_POD_NAME, podName);
+  commit(types.SET_SEARCH, search);
+
   dispatch('fetchLogs');
 };
 
-export const setSearch = ({ dispatch, commit }, searchQuery) => {
-  commit(types.SET_SEARCH, searchQuery);
+export const showPodLogs = ({ dispatch, commit }, podName) => {
+  commit(types.SET_CURRENT_POD_NAME, podName);
   dispatch('fetchLogs');
 };
 

app/assets/javascripts/logs/utils.js

 import { secondsToMilliseconds } from '~/lib/utils/datetime_utility';
 import dateFormat from 'dateformat';
-
-const dateFormatMask = 'UTC:mmm dd HH:MM:ss.l"Z"';
+import { dateFormatMask } from './constants';
 
 /**
  * Returns a time range (`start`, `end`) where `start` is the

app/assets/javascripts/monitoring/components/charts/annotations.js

@@ -87,11 +87,17 @@ export const generateAnnotationsSeries = ({ deployments = [], annotations = [] }
     return {
       name: 'deployments',
       value: [deployment.createdAt, annotationsYAxisCoords.pos],
+      // style options
       symbol: deployment.icon,
       symbolSize: symbolSizes.default,
       itemStyle: {
         color: deployment.color,
       },
+      // metadata that are accessible in `formatTooltipText` method
+      tooltipData: {
+        sha: deployment.sha.substring(0, 8),
+        commitUrl: deployment.commitUrl,
+      },
     };
   });
 
@@ -100,8 +106,12 @@ export const generateAnnotationsSeries = ({ deployments = [], annotations = [] }
     return {
       name: 'annotations',
       value: [annotation.from, annotationsYAxisCoords.pos],
+      // style options
       symbol: 'none',
-      description: annotation.description,
+      // metadata that are accessible in `formatTooltipText` method
+      tooltipData: {
+        description: annotation.description,
+      },
     };
   });
 

app/assets/javascripts/monitoring/components/charts/time_series.vue

@@ -262,19 +262,17 @@ export default {
 
       params.seriesData.forEach(dataPoint => {
         if (dataPoint.value) {
-          const [xVal, yVal] = dataPoint.value;
+          const [, yVal] = dataPoint.value;
           this.tooltip.type = dataPoint.name;
           if (this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.deployments)) {
-            const [deploy] = this.recentDeployments.filter(
-              deployment => deployment.createdAt === xVal,
-            );
-            this.tooltip.sha = deploy.sha.substring(0, 8);
-            this.tooltip.commitUrl = deploy.commitUrl;
+            const { data = {} } = dataPoint;
+            this.tooltip.sha = data?.tooltipData?.sha;
+            this.tooltip.commitUrl = data?.tooltipData?.commitUrl;
           } else if (
             this.isTooltipOfType(this.tooltip.type, this.$options.tooltipTypes.annotations)
           ) {
             const { data } = dataPoint;
-            this.tooltip.content.push(data?.description);
+            this.tooltip.content.push(data?.tooltipData?.description);
           } else {
             const { seriesName, color, dataIndex } = dataPoint;
 

app/assets/javascripts/pages/projects/services/edit/index.js

 import IntegrationSettingsForm from '~/integrations/integration_settings_form';
-import PrometheusMetrics from 'ee_else_ce/prometheus_metrics/prometheus_metrics';
+import CustomMetrics from '~/prometheus_metrics/custom_metrics';
 import PrometheusAlerts from '~/prometheus_alerts';
 import initAlertsSettings from '~/alerts_service_settings';
 
@@ -10,8 +10,8 @@ document.addEventListener('DOMContentLoaded', () => {
   const prometheusSettingsSelector = '.js-prometheus-metrics-monitoring';
   const prometheusSettingsWrapper = document.querySelector(prometheusSettingsSelector);
   if (prometheusSettingsWrapper) {
-    const prometheusMetrics = new PrometheusMetrics(prometheusSettingsSelector);
-    prometheusMetrics.init();
+    const customMetrics = new CustomMetrics(prometheusSettingsSelector);
+    customMetrics.init();
   }
 
   PrometheusAlerts();

app/assets/javascripts/prometheus_metrics/constants.js

@@ -2,4 +2,5 @@ export default {
   EMPTY: 'empty',
   LOADING: 'loading',
   LIST: 'list',
+  NO_INTEGRATION: 'no-integration',
 };

ee/app/assets/javascripts/prometheus_metrics/prometheus_metrics.js → app/assets/javascripts/prometheus_metrics/custom_metrics.js

 import $ from 'jquery';
 import { escape, sortBy } from 'lodash';
-import PrometheusMetrics from '~/prometheus_metrics/prometheus_metrics';
+import PrometheusMetrics from './prometheus_metrics';
 import PANEL_STATE from './constants';
 import axios from '~/lib/utils/axios_utils';
 import { s__ } from '~/locale';
 import { capitalizeFirstCharacter } from '~/lib/utils/text_utility';
 
-export default class EEPrometheusMetrics extends PrometheusMetrics {
+export default class CustomMetrics extends PrometheusMetrics {
   constructor(wrapperSelector) {
     super(wrapperSelector);
     this.customMetrics = [];
@@ -106,7 +106,7 @@ export default class EEPrometheusMetrics extends PrometheusMetrics {
     const sortedMetrics = sortBy(this.customMetrics.map(capitalizeGroup), ['group', 'title']);
 
     sortedMetrics.forEach(metric => {
-      this.$monitoredCustomMetricsList.append(EEPrometheusMetrics.customMetricTemplate(metric));
+      this.$monitoredCustomMetricsList.append(CustomMetrics.customMetricTemplate(metric));
     });
 
     this.$monitoredCustomMetricsCount.text(this.customMetrics.length);

app/assets/javascripts/reports/components/summary_row.vue

@@ -53,11 +53,19 @@ export default {
       />
       <ci-icon v-else :status="iconStatus" :size="24" />
     </div>
-
     <div class="report-block-list-issue-description">
-      <div class="report-block-list-issue-description-text">{{ summary }}</div>
-
-      <popover v-if="popoverOptions" :options="popoverOptions" />
+      <div class="report-block-list-issue-description-text">
+        {{ summary
+        }}<span v-if="popoverOptions" class="text-nowrap"
+          >&nbsp;<popover v-if="popoverOptions" :options="popoverOptions" class="align-top" />
+        </span>
+      </div>
+    </div>
+    <div
+      v-if="$slots.default"
+      class="text-right flex-fill d-flex justify-content-end flex-column flex-sm-row"
+    >
+      <slot></slot>
     </div>
   </div>
 </template>

app/assets/javascripts/static_site_editor/components/publish_toolbar.vue

 <script>
-import { GlNewButton } from '@gitlab/ui';
+import { GlNewButton, GlLoadingIcon } from '@gitlab/ui';
 
 export default {
   components: {
     GlNewButton,
+    GlLoadingIcon,
   },
   props: {
     saveable: {
@@ -11,12 +12,22 @@ export default {
       required: false,
       default: false,
     },
+    savingChanges: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
   },
 };
 </script>
 <template>
   <div class="d-flex bg-light border-top justify-content-between align-items-center py-3 px-4">
-    <gl-new-button variant="success" :disabled="!saveable">
+    <gl-loading-icon :class="{ invisible: !savingChanges }" size="md" />
+    <gl-new-button
+      variant="success"
+      :disabled="!saveable || savingChanges"
+      @click="$emit('submit')"
+    >
       {{ __('Submit Changes') }}
     </gl-new-button>
   </div>

app/assets/javascripts/static_site_editor/components/saved_changes_message.vue

@@ -36,7 +36,7 @@ export default {
 
 <template>
   <div>
-    <div>
+    <div class="border-bottom pb-4">
       <h3>{{ s__('StaticSiteEditor|Success!') }}</h3>
       <p>
         {{
@@ -45,35 +45,37 @@ export default {
           )
         }}
       </p>
-      <div>
+      <div class="d-flex justify-content-end">
         <gl-new-button ref="returnToSiteButton" :href="returnUrl">{{
           s__('StaticSiteEditor|Return to site')
         }}</gl-new-button>
-        <gl-new-button ref="mergeRequestButton" :href="mergeRequest.url" variant="info">{{
-          s__('StaticSiteEditor|View merge request')
-        }}</gl-new-button>
+        <gl-new-button
+          ref="mergeRequestButton"
+          class="ml-2"
+          :href="mergeRequest.url"
+          variant="success"
+          >{{ s__('StaticSiteEditor|View merge request') }}</gl-new-button
+        >
       </div>
     </div>
 
-    <hr />
-
-    <div>
+    <div class="pt-2">
       <h4>{{ s__('StaticSiteEditor|Summary of changes') }}</h4>
       <ul>
         <li>
-          {{ s__('StaticSiteEditor|A new branch was created:') }}
+          {{ s__('StaticSiteEditor|You created a new branch:') }}
           <gl-link ref="branchLink" :href="branch.url">{{ branch.label }}</gl-link>
         </li>
         <li>
-          {{ s__('StaticSiteEditor|Your changes were committed to it:') }}
-          <gl-link ref="commitLink" :href="commit.url">{{ commit.label }}</gl-link>
-        </li>
-        <li>
-          {{ s__('StaticSiteEditor|A merge request was created:') }}
+          {{ s__('StaticSiteEditor|You created a merge request:') }}
           <gl-link ref="mergeRequestLink" :href="mergeRequest.url">{{
             mergeRequest.label
           }}</gl-link>
         </li>
+        <li>
+          {{ s__('StaticSiteEditor|You added a commit:') }}
+          <gl-link ref="commitLink" :href="commit.url">{{ commit.label }}</gl-link>
+        </li>
       </ul>
     </div>
   </div>

app/assets/javascripts/static_site_editor/components/static_site_editor.vue

@@ -12,14 +12,14 @@ export default {
     Toolbar,
   },
   computed: {
-    ...mapState(['content', 'isLoadingContent']),
+    ...mapState(['content', 'isLoadingContent', 'isSavingChanges']),
     ...mapGetters(['isContentLoaded', 'contentChanged']),
   },
   mounted() {
     this.loadContent();
   },
   methods: {
-    ...mapActions(['loadContent', 'setContent']),
+    ...mapActions(['loadContent', 'setContent', 'submitChanges']),
   },
 };
 </script>
@@ -41,7 +41,11 @@ export default {
         :value="content"
         @input="setContent"
       />
-      <toolbar :saveable="contentChanged" />
+      <toolbar
+        :saveable="contentChanged"
+        :saving-changes="isSavingChanges"
+        @submit="submitChanges"
+      />
     </div>
   </div>
 </template>