Add latest changes from gitlab-org/gitlab@master

9 files changed, 5 insertions, 480 deletions

diff --git a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
deleted file mode 100644
index 6b757c6972a..00000000000
--- a/app/assets/javascripts/cycle_analytics/components/stage_code_component.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script>
-import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-import limitWarning from './limit_warning_component.vue';
-import totalTime from './total_time_component.vue';
-
-export default {
-  components: {
-    userAvatarImage,
-    limitWarning,
-    totalTime,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-      required: false,
-    },
-    stage: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="events-description">
-      {{ stage.description }}
-      <limit-warning :count="items.length" />
-    </div>
-    <ul class="stage-event-list">
-      <li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item">
-        <div class="item-details">
-          <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
-          <h5 class="item-title merge-request-title">
-            <a :href="mergeRequest.url"> {{ mergeRequest.title }} </a>
-          </h5>
-          <a :href="mergeRequest.url" class="issue-link"> !{{ mergeRequest.iid }} </a> &middot;
-          <span>
-            {{ s__('OpenedNDaysAgo|Opened') }}
-            <a :href="mergeRequest.url" class="issue-date"> {{ mergeRequest.createdAt }} </a>
-          </span>
-          <span>
-            {{ s__('ByAuthor|by') }}
-            <a :href="mergeRequest.author.webUrl" class="issue-author-link">
-              {{ mergeRequest.author.name }}
-            </a>
-          </span>
-        </div>
-        <div class="item-time"><total-time :time="mergeRequest.totalTime" /></div>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_component.vue
deleted file mode 100644
index cc7ae74dd3a..00000000000
--- a/app/assets/javascripts/cycle_analytics/components/stage_component.vue
+++ /dev/null
@@ -1,54 +0,0 @@
-<script>
-import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-import limitWarning from './limit_warning_component.vue';
-import totalTime from './total_time_component.vue';
-
-export default {
-  components: {
-    userAvatarImage,
-    limitWarning,
-    totalTime,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-      required: false,
-    },
-    stage: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="events-description">
-      {{ stage.description }}
-      <limit-warning :count="items.length" />
-    </div>
-    <ul class="stage-event-list">
-      <li v-for="(issue, i) in items" :key="i" class="stage-event-item">
-        <div class="item-details">
-          <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="issue.author.avatarUrl" />
-          <h5 class="item-title issue-title">
-            <a :href="issue.url" class="issue-title"> {{ issue.title }} </a>
-          </h5>
-          <a :href="issue.url" class="issue-link">#{{ issue.iid }}</a> &middot;
-          <span>
-            {{ s__('OpenedNDaysAgo|Opened') }}
-            <a :href="issue.url" class="issue-date">{{ issue.createdAt }}</a>
-          </span>
-          <span>
-            {{ s__('ByAuthor|by') }}
-            <a :href="issue.author.webUrl" class="issue-author-link"> {{ issue.author.name }} </a>
-          </span>
-        </div>
-        <div class="item-time"><total-time :time="issue.totalTime" /></div>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue b/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
deleted file mode 100644
index 4b15bd55cbd..00000000000
--- a/app/assets/javascripts/cycle_analytics/components/stage_nav_item.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-export default {
-  name: 'StageNavItem',
-  props: {
-    isDefaultStage: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    isActive: {
-      type: Boolean,
-      default: false,
-      required: false,
-    },
-    isUserAllowed: {
-      type: Boolean,
-      required: true,
-    },
-    title: {
-      type: String,
-      required: true,
-    },
-    value: {
-      type: String,
-      default: '',
-      required: false,
-    },
-  },
-  computed: {
-    hasValue() {
-      return this.value && this.value.length > 0;
-    },
-  },
-};
-</script>
-
-<template>
-  <li @click="$emit('select')">
-    <div
-      :class="{ active: isActive }"
-      class="stage-nav-item d-flex pl-4 pr-4 m-0 mb-1 ml-2 rounded border-color-default border-style-solid border-width-1px"
-    >
-      <div
-        class="stage-nav-item-cell stage-name w-50 pr-2"
-        :class="{ 'font-weight-bold': isActive }"
-      >
-        {{ title }}
-      </div>
-      <div class="stage-nav-item-cell stage-median w-50">
-        <template v-if="isUserAllowed">
-          <span v-if="hasValue">{{ value }}</span>
-          <span v-else class="stage-empty">{{ __('Not enough data') }}</span>
-        </template>
-        <template v-else>
-          <span class="not-available">{{ __('Not available') }}</span>
-        </template>
-      </div>
-    </div>
-  </li>
-</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
deleted file mode 100644
index 33b4e649ab0..00000000000
--- a/app/assets/javascripts/cycle_analytics/components/stage_review_component.vue
+++ /dev/null
@@ -1,70 +0,0 @@
-<script>
-import { GlIcon } from '@gitlab/ui';
-import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-import limitWarning from './limit_warning_component.vue';
-import totalTime from './total_time_component.vue';
-
-export default {
-  components: {
-    userAvatarImage,
-    totalTime,
-    limitWarning,
-    GlIcon,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-      required: false,
-    },
-    stage: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="events-description">
-      {{ stage.description }}
-      <limit-warning :count="items.length" />
-    </div>
-    <ul class="stage-event-list">
-      <li v-for="(mergeRequest, i) in items" :key="i" class="stage-event-item">
-        <div class="item-details">
-          <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="mergeRequest.author.avatarUrl" />
-          <h5 class="item-title merge-request-title">
-            <a :href="mergeRequest.url"> {{ mergeRequest.title }} </a>
-          </h5>
-          <a :href="mergeRequest.url" class="issue-link">!{{ mergeRequest.iid }}</a> &middot;
-          <span>
-            {{ s__('OpenedNDaysAgo|Opened') }}
-            <a :href="mergeRequest.url" class="issue-date">{{ mergeRequest.createdAt }}</a>
-          </span>
-          <span>
-            {{ s__('ByAuthor|by') }}
-            <a :href="mergeRequest.author.webUrl" class="issue-author-link">{{
-              mergeRequest.author.name
-            }}</a>
-          </span>
-          <template v-if="mergeRequest.state === 'closed'">
-            <span class="merge-request-state">
-              <gl-icon name="cancel" class="gl-vertical-align-text-bottom" />
-              {{ __('CLOSED') }}
-            </span>
-          </template>
-          <template v-else>
-            <span v-if="mergeRequest.branch" class="merge-request-branch">
-              <gl-icon :size="16" name="fork" />
-              <a :href="mergeRequest.branch.url"> {{ mergeRequest.branch.name }} </a>
-            </span>
-          </template>
-        </div>
-        <div class="item-time"><total-time :time="mergeRequest.totalTime" /></div>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
deleted file mode 100644
index 6d8f711c13b..00000000000
--- a/app/assets/javascripts/cycle_analytics/components/stage_staging_component.vue
+++ /dev/null
@@ -1,60 +0,0 @@
-<script>
-import { GlIcon, GlSafeHtmlDirective as SafeHtml } from '@gitlab/ui';
-import userAvatarImage from '../../vue_shared/components/user_avatar/user_avatar_image.vue';
-import limitWarning from './limit_warning_component.vue';
-import totalTime from './total_time_component.vue';
-
-export default {
-  components: {
-    userAvatarImage,
-    totalTime,
-    limitWarning,
-    GlIcon,
-  },
-  directives: {
-    SafeHtml,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-      required: false,
-    },
-    stage: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="events-description">
-      {{ stage.description }}
-      <limit-warning :count="items.length" />
-    </div>
-    <ul class="stage-event-list">
-      <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
-        <div class="item-details">
-          <!-- FIXME: Pass an alt attribute here for accessibility -->
-          <user-avatar-image :img-src="build.author.avatarUrl" />
-          <h5 class="item-title">
-            <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
-            <gl-icon :size="16" name="fork" />
-            <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
-            <span class="icon-branch gl-text-gray-400">
-              <gl-icon name="commit" :size="14" />
-            </span>
-            <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
-          </h5>
-          <span>
-            <a :href="build.url" class="build-date"> {{ build.date }} </a> {{ s__('ByAuthor|by') }}
-            <a :href="build.author.webUrl" class="issue-author-link"> {{ build.author.name }} </a>
-          </span>
-        </div>
-        <div class="item-time"><total-time :time="build.totalTime" /></div>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue b/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
deleted file mode 100644
index c165c8cee78..00000000000
--- a/app/assets/javascripts/cycle_analytics/components/stage_test_component.vue
+++ /dev/null
@@ -1,56 +0,0 @@
-<script>
-import { GlIcon } from '@gitlab/ui';
-import limitWarning from './limit_warning_component.vue';
-import totalTime from './total_time_component.vue';
-
-export default {
-  components: {
-    totalTime,
-    limitWarning,
-    GlIcon,
-  },
-  props: {
-    items: {
-      type: Array,
-      default: () => [],
-      required: false,
-    },
-    stage: {
-      type: Object,
-      default: () => ({}),
-      required: false,
-    },
-  },
-};
-</script>
-<template>
-  <div>
-    <div class="events-description">
-      {{ stage.description }}
-      <limit-warning :count="items.length" />
-    </div>
-    <ul class="stage-event-list">
-      <li v-for="(build, i) in items" :key="i" class="stage-event-item item-build-component">
-        <div class="item-details">
-          <h5 class="item-title">
-            <span class="icon-build-status gl-text-green-500">
-              <gl-icon name="status_success" :size="14" />
-            </span>
-            <a :href="build.url" class="item-build-name"> {{ build.name }} </a> &middot;
-            <a :href="build.url" class="pipeline-id"> #{{ build.id }} </a>
-            <gl-icon :size="16" name="fork" />
-            <a :href="build.branch.url" class="ref-name"> {{ build.branch.name }} </a>
-            <span class="icon-branch gl-text-gray-400">
-              <gl-icon name="commit" :size="14" />
-            </span>
-            <a :href="build.commitUrl" class="commit-sha"> {{ build.shortSha }} </a>
-          </h5>
-          <span>
-            <a :href="build.url" class="issue-date"> {{ build.date }} </a>
-          </span>
-        </div>
-        <div class="item-time"><total-time :time="build.totalTime" /></div>
-      </li>
-    </ul>
-  </div>
-</template>
diff --git a/app/assets/javascripts/cycle_analytics/default_event_objects.js b/app/assets/javascripts/cycle_analytics/default_event_objects.js
deleted file mode 100644
index 57f9019d2f8..00000000000
--- a/app/assets/javascripts/cycle_analytics/default_event_objects.js
+++ /dev/null
@@ -1,98 +0,0 @@
-export default {
-  issue: {
-    created_at: '',
-    url: '',
-    iid: '',
-    title: '',
-    total_time: {},
-    author: {
-      avatar_url: '',
-      id: '',
-      name: '',
-      web_url: '',
-    },
-  },
-  plan: {
-    title: '',
-    commit_url: '',
-    short_sha: '',
-    total_time: {},
-    author: {
-      name: '',
-      id: '',
-      avatar_url: '',
-      web_url: '',
-    },
-  },
-  code: {
-    title: '',
-    iid: '',
-    created_at: '',
-    url: '',
-    total_time: {},
-    author: {
-      name: '',
-      id: '',
-      avatar_url: '',
-      web_url: '',
-    },
-  },
-  test: {
-    name: '',
-    id: '',
-    date: '',
-    url: '',
-    short_sha: '',
-    commit_url: '',
-    total_time: {},
-    branch: {
-      name: '',
-      url: '',
-    },
-  },
-  review: {
-    title: '',
-    iid: '',
-    created_at: '',
-    url: '',
-    state: '',
-    total_time: {},
-    author: {
-      name: '',
-      id: '',
-      avatar_url: '',
-      web_url: '',
-    },
-  },
-  staging: {
-    id: '',
-    short_sha: '',
-    date: '',
-    url: '',
-    commit_url: '',
-    total_time: {},
-    author: {
-      name: '',
-      id: '',
-      avatar_url: '',
-      web_url: '',
-    },
-    branch: {
-      name: '',
-      url: '',
-    },
-  },
-  production: {
-    title: '',
-    created_at: '',
-    url: '',
-    iid: '',
-    total_time: {},
-    author: {
-      name: '',
-      id: '',
-      avatar_url: '',
-      web_url: '',
-    },
-  },
-};
diff --git a/app/assets/javascripts/cycle_analytics/store/mutations.js b/app/assets/javascripts/cycle_analytics/store/mutations.js
index 118d5174fd0..50157cc3618 100644
--- a/app/assets/javascripts/cycle_analytics/store/mutations.js
+++ b/app/assets/javascripts/cycle_analytics/store/mutations.js
@@ -1,11 +1,6 @@
 import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
 import { DEFAULT_DAYS_TO_DISPLAY } from '../constants';
-import {
-  decorateData,
-  decorateEvents,
-  formatMedianValues,
-  calculateFormattedDayInPast,
-} from '../utils';
+import { decorateData, formatMedianValues, calculateFormattedDayInPast } from '../utils';
 import * as types from './mutation_types';
 
 export default {
@@ -82,10 +77,11 @@ export default {
     state.hasError = false;
   },
   [types.RECEIVE_STAGE_DATA_SUCCESS](state, { events = [] }) {
-    const { selectedStage } = state;
     state.isLoadingStage = false;
     state.isEmptyStage = !events.length;
-    state.selectedStageEvents = decorateEvents(events, selectedStage);
+    state.selectedStageEvents = events.map((ev) =>
+      convertObjectPropsToCamelCase(ev, { deep: true }),
+    );
     state.hasError = false;
   },
   [types.RECEIVE_STAGE_DATA_ERROR](state, error) {
diff --git a/app/assets/javascripts/cycle_analytics/utils.js b/app/assets/javascripts/cycle_analytics/utils.js
index a1690dd1513..1f72291e97b 100644
--- a/app/assets/javascripts/cycle_analytics/utils.js
+++ b/app/assets/javascripts/cycle_analytics/utils.js
@@ -2,27 +2,10 @@ import dateFormat from 'dateformat';
 import { unescape } from 'lodash';
 import { dateFormats } from '~/analytics/shared/constants';
 import { sanitize } from '~/lib/dompurify';
-import { roundToNearestHalf, convertObjectPropsToCamelCase } from '~/lib/utils/common_utils';
+import { roundToNearestHalf } from '~/lib/utils/common_utils';
 import { getDateInPast } from '~/lib/utils/datetime/date_calculation_utility';
 import { parseSeconds } from '~/lib/utils/datetime_utility';
 import { s__, sprintf } from '../locale';
-import DEFAULT_EVENT_OBJECTS from './default_event_objects';
-
-/**
- * These `decorate` methods will be removed when me migrate to the
- * new table layout https://gitlab.com/gitlab-org/gitlab/-/issues/326704
- */
-const mapToEvent = (event, stage) => {
-  return convertObjectPropsToCamelCase(
-    {
-      ...DEFAULT_EVENT_OBJECTS[stage.slug],
-      ...event,
-    },
-    { deep: true },
-  );
-};
-
-export const decorateEvents = (events, stage) => events.map((event) => mapToEvent(event, stage));
 
 const mapToSummary = ({ value, ...rest }) => ({ ...rest, value: value || '-' });
 const mapToMedians = ({ name: id, value }) => ({ id, value });