Add latest changes from gitlab-org/gitlab@master

.eslintrc.yml

@@ -30,6 +30,11 @@ rules:
   no-else-return:
     - error
     - allowElseIf: true
+  import/no-unresolved:
+    - error
+    - ignore:
+        # https://gitlab.com/gitlab-org/gitlab/issues/38226
+        - '^ee_component/'
   import/no-useless-path-segments: off
   import/order: off
   lines-between-class-members: off

Gemfile.lock

@@ -748,7 +748,7 @@ GEM
     pry-rails (0.3.6)
       pry (>= 0.10.4)
     public_suffix (3.1.1)
-    puma (4.3.0)
+    puma (4.3.1)
       nio4r (~> 2.0)
     puma_worker_killer (0.1.1)
       get_process_mem (~> 0.2)

app/assets/javascripts/pages/projects/settings/ci_cd/show/index.js

 import initSettingsPanels from '~/settings_panels';
 import SecretValues from '~/behaviors/secret_values';
 import AjaxVariableList from '~/ci_variable_list/ajax_variable_list';
+import registrySettingsApp from '~/registry/settings/registry_settings_bundle';
 document.addEventListener('DOMContentLoaded', () => {
   // Initialize expandable settings panels
@@ -32,4 +33,6 @@ document.addEventListener('DOMContentLoaded', () => {
     if (instanceDefaultBadge) instanceDefaultBadge.style.display = 'none';
     autoDevOpsExtraSettings.classList.toggle('hidden', !target.checked);
   });
+
+  registrySettingsApp();
 });

app/assets/javascripts/registry/settings/components/registry_settings_app.vue

+<script>
+import { mapState } from 'vuex';
+import { s__, sprintf } from '~/locale';
+
+export default {
+  components: {},
+  computed: {
+    ...mapState({
+      helpPagePath: 'helpPagePath',
+    }),
+
+    helpText() {
+      return sprintf(
+        s__(
+          'PackageRegistry|Read more about the %{helpLinkStart}Container Registry tag retention policies%{helpLinkEnd}',
+        ),
+        {
+          helpLinkStart: `<a href="${this.helpPagePath}" target="_blank">`,
+          helpLinkEnd: '</a>',
+        },
+        false,
+      );
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <p>
+      {{ s__('PackageRegistry|Tag retention policies are designed to:') }}
+    </p>
+    <ul>
+      <li>{{ s__('PackageRegistry|Keep and protect the images that matter most.') }}</li>
+      <li>
+        {{
+          s__("PackageRegistry|Automatically remove extra images that aren't designed to be kept.")
+        }}
+      </li>
+    </ul>
+    <p ref="help-link" v-html="helpText"></p>
+  </div>
+</template>

app/assets/javascripts/registry/settings/registry_settings_bundle.js

+import Vue from 'vue';
+import Translate from '~/vue_shared/translate';
+import store from './stores/';
+import RegistrySettingsApp from './components/registry_settings_app.vue';
+
+Vue.use(Translate);
+
+export default () => {
+  const el = document.getElementById('js-registry-settings');
+  if (!el) {
+    return null;
+  }
+  store.dispatch('setInitialState', el.dataset);
+  return new Vue({
+    el,
+    store,
+    components: {
+      RegistrySettingsApp,
+    },
+    render(createElement) {
+      return createElement('registry-settings-app', {});
+    },
+  });
+};

app/assets/javascripts/registry/settings/stores/actions.js

+import * as types from './mutation_types';
+
+export const setInitialState = ({ commit }, data) => commit(types.SET_INITIAL_STATE, data);
+
+// to avoid eslint error until more actions are added to the store
+export default () => {};

app/assets/javascripts/registry/settings/stores/index.js

+import Vue from 'vue';
+import Vuex from 'vuex';
+import * as actions from './actions';
+import mutations from './mutations';
+import state from './state';
+
+Vue.use(Vuex);
+
+export const createStore = () =>
+  new Vuex.Store({
+    state,
+    actions,
+    mutations,
+  });
+
+export default createStore();

app/assets/javascripts/registry/settings/stores/mutation_types.js

+export const SET_INITIAL_STATE = 'SET_INITIAL_STATE';
+
+// to avoid eslint error until more actions are added to the store
+export default () => {};

app/assets/javascripts/registry/settings/stores/mutations.js

+import * as types from './mutation_types';
+
+export default {
+  [types.SET_INITIAL_STATE](state, initialState) {
+    state.helpPagePath = initialState.helpPagePath;
+    state.registrySettingsEndpoint = initialState.registrySettingsEndpoint;
+  },
+};

app/assets/javascripts/registry/settings/stores/state.js

+export default () => ({
+  /*
+   * Help page path to generate the link
+   */
+  helpPagePath: '',
+  /*
+   * Settings endpoint to call to fetch and update the settings
+   */
+  registrySettingsEndpoint: '',
+});

app/assets/javascripts/vue_merge_request_widget/components/deployment.vue

-<script>
-import { GlTooltipDirective } from '@gitlab/ui';
-import Icon from '~/vue_shared/components/icon.vue';
-import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
-import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue';
-import { __ } from '~/locale';
-import timeagoMixin from '../../vue_shared/mixins/timeago';
-import LoadingButton from '../../vue_shared/components/loading_button.vue';
-import { visitUrl } from '../../lib/utils/url_utility';
-import createFlash from '../../flash';
-import MemoryUsage from './memory_usage.vue';
-import StatusIcon from './mr_widget_status_icon.vue';
-import ReviewAppLink from './review_app_link.vue';
-import MRWidgetService from '../services/mr_widget_service';
-
-export default {
-  // name: 'Deployment' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
-  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
-  name: 'Deployment',
-  components: {
-    LoadingButton,
-    MemoryUsage,
-    StatusIcon,
-    Icon,
-    TooltipOnTruncate,
-    FilteredSearchDropdown,
-    ReviewAppLink,
-    VisualReviewAppLink: () =>
-      import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'),
-  },
-  directives: {
-    GlTooltip: GlTooltipDirective,
-  },
-  mixins: [timeagoMixin],
-  props: {
-    deployment: {
-      type: Object,
-      required: true,
-    },
-    showMetrics: {
-      type: Boolean,
-      required: true,
-    },
-    showVisualReviewApp: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-    visualReviewAppMeta: {
-      type: Object,
-      required: false,
-      default: () => ({
-        sourceProjectId: '',
-        sourceProjectPath: '',
-        mergeRequestId: '',
-        appUrl: '',
-      }),
-    },
-  },
-  deployedTextMap: {
-    running: __('Deploying to'),
-    success: __('Deployed to'),
-    failed: __('Failed to deploy to'),
-    created: __('Will deploy to'),
-    canceled: __('Failed to deploy to'),
-  },
-  data() {
-    return {
-      isStopping: false,
-    };
-  },
-  computed: {
-    deployTimeago() {
-      return this.timeFormated(this.deployment.deployed_at);
-    },
-    deploymentExternalUrl() {
-      if (this.deployment.changes && this.deployment.changes.length === 1) {
-        return this.deployment.changes[0].external_url;
-      }
-      return this.deployment.external_url;
-    },
-    hasExternalUrls() {
-      return Boolean(this.deployment.external_url && this.deployment.external_url_formatted);
-    },
-    hasDeploymentTime() {
-      return Boolean(this.deployment.deployed_at && this.deployment.deployed_at_formatted);
-    },
-    hasDeploymentMeta() {
-      return Boolean(this.deployment.url && this.deployment.name);
-    },
-    hasMetrics() {
-      return Boolean(this.deployment.metrics_url);
-    },
-    deployedText() {
-      return this.$options.deployedTextMap[this.deployment.status];
-    },
-    isDeployInProgress() {
-      return this.deployment.status === 'running';
-    },
-    deployInProgressTooltip() {
-      return this.isDeployInProgress
-        ? __('Stopping this environment is currently not possible as a deployment is in progress')
-        : '';
-    },
-    shouldRenderDropdown() {
-      return this.deployment.changes && this.deployment.changes.length > 1;
-    },
-    showMemoryUsage() {
-      return this.hasMetrics && this.showMetrics;
-    },
-  },
-  methods: {
-    stopEnvironment() {
-      const msg = __('Are you sure you want to stop this environment?');
-      const isConfirmed = confirm(msg); // eslint-disable-line
-
-      if (isConfirmed) {
-        this.isStopping = true;
-
-        MRWidgetService.stopEnvironment(this.deployment.stop_url)
-          .then(res => res.data)
-          .then(data => {
-            if (data.redirect_url) {
-              visitUrl(data.redirect_url);
-            }
-
-            this.isStopping = false;
-          })
-          .catch(() => {
-            createFlash(
-              __('Something went wrong while stopping this environment. Please try again.'),
-            );
-            this.isStopping = false;
-          });
-      }
-    },
-  },
-};
-</script>
-
-<template>
-  <div class="deploy-heading">
-    <div class="ci-widget media">
-      <div class="media-body">
-        <div class="deploy-body">
-          <div class="js-deployment-info deployment-info">
-            <template v-if="hasDeploymentMeta">
-              <span> {{ deployedText }} </span>
-              <tooltip-on-truncate
-                :title="deployment.name"
-                truncate-target="child"
-                class="deploy-link label-truncate"
-              >
-                <a
-                  :href="deployment.url"
-                  target="_blank"
-                  rel="noopener noreferrer nofollow"
-                  class="js-deploy-meta"
-                >
-                  {{ deployment.name }}
-                </a>
-              </tooltip-on-truncate>
-            </template>
-            <span
-              v-if="hasDeploymentTime"
-              v-gl-tooltip
-              :title="deployment.deployed_at_formatted"
-              class="js-deploy-time"
-            >
-              {{ deployTimeago }}
-            </span>
-            <memory-usage
-              v-if="showMemoryUsage"
-              :metrics-url="deployment.metrics_url"
-              :metrics-monitoring-url="deployment.metrics_monitoring_url"
-            />
-          </div>
-          <div>
-            <template v-if="hasExternalUrls">
-              <filtered-search-dropdown
-                v-if="shouldRenderDropdown"
-                class="js-mr-wigdet-deployment-dropdown inline"
-                :items="deployment.changes"
-                :main-action-link="deploymentExternalUrl"
-                filter-key="path"
-              >
-                <template slot="mainAction" slot-scope="slotProps">
-                  <review-app-link
-                    :link="deploymentExternalUrl"
-                    :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
-                  />
-                </template>
-
-                <template slot="result" slot-scope="slotProps">
-                  <a
-                    :href="slotProps.result.external_url"
-                    target="_blank"
-                    rel="noopener noreferrer nofollow"
-                    class="menu-item"
-                  >
-                    <strong class="str-truncated-100 append-bottom-0 d-block">
-                      {{ slotProps.result.path }}
-                    </strong>
-
-                    <p class="text-secondary str-truncated-100 append-bottom-0 d-block">
-                      {{ slotProps.result.external_url }}
-                    </p>
-                  </a>
-                </template>
-              </filtered-search-dropdown>
-              <template v-else>
-                <review-app-link
-                  :link="deploymentExternalUrl"
-                  css-class="js-deploy-url deploy-link btn btn-default btn-sm inline"
-                />
-              </template>
-              <visual-review-app-link
-                v-if="showVisualReviewApp"
-                :link="deploymentExternalUrl"
-                :app-metadata="visualReviewAppMeta"
-              />
-            </template>
-            <span
-              v-if="deployment.stop_url"
-              v-gl-tooltip
-              :title="deployInProgressTooltip"
-              class="d-inline-block"
-              tabindex="0"
-            >
-              <loading-button
-                :loading="isStopping"
-                :disabled="isDeployInProgress"
-                :title="__('Stop environment')"
-                container-class="js-stop-env btn btn-default btn-sm inline prepend-left-4"
-                @click="stopEnvironment"
-              >
-                <icon name="stop" />
-              </loading-button>
-            </span>
-          </div>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>

app/assets/javascripts/vue_merge_request_widget/components/deployment/constants.js

+// DEPLOYMENT STATUSES
+export const CREATED = 'created';
+export const MANUAL_DEPLOY = 'manual_deploy';
+export const WILL_DEPLOY = 'will_deploy';
+export const RUNNING = 'running';
+export const SUCCESS = 'success';
+export const FAILED = 'failed';
+export const CANCELED = 'canceled';

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment.vue

+<script>
+import { GlTooltipDirective } from '@gitlab/ui';
+import DeploymentInfo from './deployment_info.vue';
+import DeploymentViewButton from './deployment_view_button.vue';
+import DeploymentStopButton from './deployment_stop_button.vue';
+import { MANUAL_DEPLOY, WILL_DEPLOY, CREATED, RUNNING, SUCCESS } from './constants';
+
+export default {
+  // name: 'Deployment' is a false positive: https://gitlab.com/gitlab-org/frontend/eslint-plugin-i18n/issues/26#possible-false-positives
+  // eslint-disable-next-line @gitlab/i18n/no-non-i18n-strings
+  name: 'Deployment',
+  components: {
+    DeploymentInfo,
+    DeploymentStopButton,
+    DeploymentViewButton,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    deployment: {
+      type: Object,
+      required: true,
+    },
+    showMetrics: {
+      type: Boolean,
+      required: true,
+    },
+    showVisualReviewApp: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    visualReviewAppMeta: {
+      type: Object,
+      required: false,
+      default: () => ({
+        sourceProjectId: '',
+        sourceProjectPath: '',
+        mergeRequestId: '',
+        appUrl: '',
+      }),
+    },
+  },
+  computed: {
+    canBeManuallyDeployed() {
+      return this.computedDeploymentStatus === MANUAL_DEPLOY;
+    },
+    computedDeploymentStatus() {
+      if (this.deployment.status === CREATED) {
+        return this.isManual ? MANUAL_DEPLOY : WILL_DEPLOY;
+      }
+      return this.deployment.status;
+    },
+    hasExternalUrls() {
+      return Boolean(this.deployment.external_url && this.deployment.external_url_formatted);
+    },
+    hasPreviousDeployment() {
+      return Boolean(!this.isCurrent && this.deployment.deployed_at);
+    },
+    isCurrent() {
+      return this.computedDeploymentStatus === SUCCESS;
+    },
+    isManual() {
+      return Boolean(
+        this.deployment.details &&
+          this.deployment.details.playable_build &&
+          this.deployment.details.playable_build.play_path,
+      );
+    },
+    isDeployInProgress() {
+      return this.deployment.status === RUNNING;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="deploy-heading">
+    <div class="ci-widget media">
+      <div class="media-body">
+        <div class="deploy-body">
+          <deployment-info
+            :computed-deployment-status="computedDeploymentStatus"
+            :deployment="deployment"
+            :show-metrics="showMetrics"
+          />
+          <div>
+            <!-- show appropriate version of review app button  -->
+            <deployment-view-button
+              v-if="hasExternalUrls"
+              :is-current="isCurrent"
+              :deployment="deployment"
+              :show-visual-review-app="showVisualReviewApp"
+              :visual-review-app-metadata="visualReviewAppMeta"
+            />
+            <!-- if it is stoppable, show stop -->
+            <deployment-stop-button
+              v-if="deployment.stop_url"
+              :is-deploy-in-progress="isDeployInProgress"
+              :stop-url="deployment.stop_url"
+            />
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_info.vue

+<script>
+import { GlLink, GlTooltipDirective } from '@gitlab/ui';
+import { __ } from '~/locale';
+import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate.vue';
+import timeagoMixin from '~/vue_shared/mixins/timeago';
+import MemoryUsage from './memory_usage.vue';
+import { MANUAL_DEPLOY, WILL_DEPLOY, RUNNING, SUCCESS, FAILED, CANCELED } from './constants';
+
+export default {
+  name: 'DeploymentInfo',
+  components: {
+    GlLink,
+    MemoryUsage,
+    TooltipOnTruncate,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  mixins: [timeagoMixin],
+  props: {
+    computedDeploymentStatus: {
+      type: String,
+      required: true,
+    },
+    deployment: {
+      type: Object,
+      required: true,
+    },
+    showMetrics: {
+      type: Boolean,
+      required: true,
+    },
+  },
+  deployedTextMap: {
+    [MANUAL_DEPLOY]: __('Can deploy manually to'),
+    [WILL_DEPLOY]: __('Will deploy to'),
+    [RUNNING]: __('Deploying to'),
+    [SUCCESS]: __('Deployed to'),
+    [FAILED]: __('Failed to deploy to'),
+    [CANCELED]: __('Canceled deploy to'),
+  },
+  computed: {
+    deployTimeago() {
+      return this.timeFormated(this.deployment.deployed_at);
+    },
+    deployedText() {
+      return this.$options.deployedTextMap[this.computedDeploymentStatus];
+    },
+    hasDeploymentTime() {
+      return Boolean(this.deployment.deployed_at && this.deployment.deployed_at_formatted);
+    },
+    hasDeploymentMeta() {
+      return Boolean(this.deployment.url && this.deployment.name);
+    },
+    hasMetrics() {
+      return Boolean(this.deployment.metrics_url);
+    },
+    showMemoryUsage() {
+      return this.hasMetrics && this.showMetrics;
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="js-deployment-info deployment-info">
+    <template v-if="hasDeploymentMeta">
+      <span>{{ deployedText }}</span>
+      <tooltip-on-truncate
+        :title="deployment.name"
+        truncate-target="child"
+        class="deploy-link label-truncate"
+      >
+        <gl-link
+          :href="deployment.url"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+          class="js-deploy-meta gl-font-size-12"
+        >
+          {{ deployment.name }}
+        </gl-link>
+      </tooltip-on-truncate>
+    </template>
+    <span
+      v-if="hasDeploymentTime"
+      v-gl-tooltip
+      :title="deployment.deployed_at_formatted"
+      class="js-deploy-time"
+    >
+      {{ deployTimeago }}
+    </span>
+    <memory-usage
+      v-if="showMemoryUsage"
+      :metrics-url="deployment.metrics_url"
+      :metrics-monitoring-url="deployment.metrics_monitoring_url"
+    />
+  </div>
+</template>

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_stop_button.vue

+<script>
+import { __ } from '~/locale';
+import { GlTooltipDirective } from '@gitlab/ui';
+import Icon from '~/vue_shared/components/icon.vue';
+import LoadingButton from '~/vue_shared/components/loading_button.vue';
+import { visitUrl } from '~/lib/utils/url_utility';
+import createFlash from '~/flash';
+import MRWidgetService from '../../services/mr_widget_service';
+
+export default {
+  name: 'DeploymentStopButton',
+  components: {
+    LoadingButton,
+    Icon,
+  },
+  directives: {
+    GlTooltip: GlTooltipDirective,
+  },
+  props: {
+    isDeployInProgress: {
+      type: Boolean,
+      required: true,
+    },
+    stopUrl: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      isStopping: false,
+    };
+  },
+  computed: {
+    deployInProgressTooltip() {
+      return this.isDeployInProgress
+        ? __('Stopping this environment is currently not possible as a deployment is in progress')
+        : '';
+    },
+  },
+  methods: {
+    stopEnvironment() {
+      const msg = __('Are you sure you want to stop this environment?');
+      const isConfirmed = confirm(msg); // eslint-disable-line
+
+      if (isConfirmed) {
+        this.isStopping = true;
+
+        MRWidgetService.stopEnvironment(this.stopUrl)
+          .then(res => res.data)
+          .then(data => {
+            if (data.redirect_url) {
+              visitUrl(data.redirect_url);
+            }
+
+            this.isStopping = false;
+          })
+          .catch(() => {
+            createFlash(
+              __('Something went wrong while stopping this environment. Please try again.'),
+            );
+            this.isStopping = false;
+          });
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <span v-gl-tooltip :title="deployInProgressTooltip" class="d-inline-block" tabindex="0">
+    <loading-button
+      v-gl-tooltip
+      :loading="isStopping"
+      :disabled="isDeployInProgress"
+      :title="__('Stop environment')"
+      container-class="js-stop-env btn btn-default btn-sm inline prepend-left-4"
+      @click="stopEnvironment"
+    >
+      <icon name="stop" />
+    </loading-button>
+  </span>
+</template>

app/assets/javascripts/vue_merge_request_widget/components/deployment/deployment_view_button.vue

+<script>
+import FilteredSearchDropdown from '~/vue_shared/components/filtered_search_dropdown.vue';
+import ReviewAppLink from '../review_app_link.vue';
+
+export default {
+  name: 'DeploymentViewButton',
+  components: {
+    FilteredSearchDropdown,
+    ReviewAppLink,
+    VisualReviewAppLink: () =>
+      import('ee_component/vue_merge_request_widget/components/visual_review_app_link.vue'),
+  },
+  props: {
+    deployment: {
+      type: Object,
+      required: true,
+    },
+    isCurrent: {
+      type: Boolean,
+      required: true,
+    },
+    showVisualReviewApp: {
+      type: Boolean,
+      required: false,
+      default: false,
+    },
+    visualReviewAppMeta: {
+      type: Object,
+      required: false,
+      default: () => ({
+        sourceProjectId: '',
+        sourceProjectPath: '',
+        mergeRequestId: '',
+        appUrl: '',
+      }),
+    },
+  },
+  computed: {
+    deploymentExternalUrl() {
+      if (this.deployment.changes && this.deployment.changes.length === 1) {
+        return this.deployment.changes[0].external_url;
+      }
+      return this.deployment.external_url;
+    },
+    shouldRenderDropdown() {
+      return this.deployment.changes && this.deployment.changes.length > 1;
+    },
+  },
+};
+</script>
+
+<template>
+  <span>
+    <filtered-search-dropdown
+      v-if="shouldRenderDropdown"
+      class="js-mr-wigdet-deployment-dropdown inline"
+      :items="deployment.changes"
+      :main-action-link="deploymentExternalUrl"
+      filter-key="path"
+    >
+      <template slot="mainAction" slot-scope="slotProps">
+        <review-app-link
+          :is-current="isCurrent"
+          :link="deploymentExternalUrl"
+          :css-class="`deploy-link js-deploy-url inline ${slotProps.className}`"
+        />
+      </template>
+
+      <template slot="result" slot-scope="slotProps">
+        <a
+          :href="slotProps.result.external_url"
+          target="_blank"
+          rel="noopener noreferrer nofollow"
+          class="js-deploy-url-menu-item menu-item"
+        >
+          <strong class="str-truncated-100 append-bottom-0 d-block">
+            {{ slotProps.result.path }}
+          </strong>
+
+          <p class="text-secondary str-truncated-100 append-bottom-0 d-block">
+            {{ slotProps.result.external_url }}
+          </p>
+        </a>
+      </template>
+    </filtered-search-dropdown>
+    <template v-else>
+      <review-app-link
+        :is-current="isCurrent"
+        :link="deploymentExternalUrl"
+        css-class="js-deploy-url deploy-link btn btn-default btn-sm inline"
+      />
+    </template>
+    <visual-review-app-link
+      v-if="showVisualReviewApp"
+      :link="deploymentExternalUrl"
+      :app-metadata="visualReviewAppMeta"
+    />
+  </span>
+</template>

app/assets/javascripts/vue_merge_request_widget/components/memory_usage.vue → app/assets/javascripts/vue_merge_request_widget/components/deployment/memory_usage.vue

 <script>
 import { sprintf, s__ } from '~/locale';
-import statusCodes from '../../lib/utils/http_status';
-import { bytesToMiB } from '../../lib/utils/number_utils';
-import { backOff } from '../../lib/utils/common_utils';
-import MemoryGraph from '../../vue_shared/components/memory_graph.vue';
-import MRWidgetService from '../services/mr_widget_service';
+import statusCodes from '~/lib/utils/http_status';
+import { bytesToMiB } from '~/lib/utils/number_utils';
+import { backOff } from '~/lib/utils/common_utils';
+import MemoryGraph from '~/vue_shared/components/memory_graph.vue';
+import MRWidgetService from '../../services/mr_widget_service';
 export default {
   name: 'MemoryUsage',

app/assets/javascripts/vue_merge_request_widget/components/mr_widget_pipeline_container.vue

 <script>
 import _ from 'underscore';
 import ArtifactsApp from './artifacts_list_app.vue';
-import Deployment from './deployment.vue';
+import Deployment from './deployment/deployment.vue';
 import MrWidgetContainer from './mr_widget_container.vue';
 import MrWidgetPipeline from './mr_widget_pipeline.vue';
 import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';

app/assets/javascripts/vue_merge_request_widget/components/review_app_link.vue

 <script>
+import { __ } from '~/locale';
 import Icon from '~/vue_shared/components/icon.vue';
 export default {
@@ -6,15 +7,24 @@ export default {
     Icon,
   },
   props: {
-    link: {
+    cssClass: {
       type: String,
       required: true,
     },
-    cssClass: {
+    isCurrent: {
+      type: Boolean,
+      required: true,
+    },
+    link: {
       type: String,
       required: true,
     },
   },
+  computed: {
+    linkText() {
+      return this.isCurrent ? __('View app') : __('View previous app');
+    },
+  },
 };
 </script>
 <template>
@@ -26,6 +36,6 @@ export default {
     data-track-event="open_review_app"
     data-track-label="review_app"
   >
-    {{ __('View app') }} <icon class="fgray" name="external-link" />
+    {{ linkText }} <icon class="fgray" name="external-link" />
   </a>
 </template>

app/assets/javascripts/vue_merge_request_widget/mr_widget_options.vue

@@ -10,7 +10,7 @@ import createFlash from '../flash';
 import WidgetHeader from './components/mr_widget_header.vue';
 import WidgetMergeHelp from './components/mr_widget_merge_help.vue';
 import MrWidgetPipelineContainer from './components/mr_widget_pipeline_container.vue';
-import Deployment from './components/deployment.vue';
+import Deployment from './components/deployment/deployment.vue';
 import WidgetRelatedLinks from './components/mr_widget_related_links.vue';
 import MrWidgetAlertMessage from './components/mr_widget_alert_message.vue';
 import MergedState from './components/states/mr_widget_merged.vue';