Merge remote-tracking branch 'upstream/master' into 1819-override-ce

* upstream/master: (621 commits)
  Add a note about GitLab QA page objects validator to docs
  Refactor dispatcher projects blame and blob path
  Update export message to mention we can download the file from the UI
  Fix Ctrl+Enter keyboard shortcut saving comment/note edit
  fix case where tooltip messes up :last-child selector
  Add reason to keep postgresql 9.2 for CI
  Remove warning noise in ProjectImportOptions
  Add changelog entry
  Add RedirectRoute factory
  Update Ingress extra cost note to be more generic
  Fix Rubocop offense
  Refactor dispatcher project branches path
  Revert "Revert "Fix Route validation for unchanged path""
  Document that we need rsync for backing up
  Docs: move article "Laravel and Envoy w/ CI/CD"
  Recommend against the use of EFS
  Adds Rubocop rule for line break around conditionals
  Update CHANGELOG.md for 10.1.6
  Filter out build traces from logged parameters
  Refactored project:n* imports in dispatcher.js
  ...

1 files changed, 461 insertions, 439 deletions

diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue
index 2f0e397aa45..a9d554e549e 100644
--- a/app/assets/javascripts/environments/components/environment_item.vue
+++ b/app/assets/javascripts/environments/components/environment_item.vue
@@ -1,423 +1,424 @@
 <script>
-import Timeago from 'timeago.js';
-import _ from 'underscore';
-import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
-import { humanize } from '../../lib/utils/text_utility';
-import ActionsComponent from './environment_actions.vue';
-import ExternalUrlComponent from './environment_external_url.vue';
-import StopComponent from './environment_stop.vue';
-import RollbackComponent from './environment_rollback.vue';
-import TerminalButtonComponent from './environment_terminal_button.vue';
-import MonitoringButtonComponent from './environment_monitoring.vue';
-import CommitComponent from '../../vue_shared/components/commit.vue';
-import eventHub from '../event_hub';
-
-/**
- * Envrionment Item Component
- *
- * Renders a table row for each environment.
- */
-const timeagoInstance = new Timeago();
-
-export default {
-  components: {
-    userAvatarLink,
-    'commit-component': CommitComponent,
-    'actions-component': ActionsComponent,
-    'external-url-component': ExternalUrlComponent,
-    'stop-component': StopComponent,
-    'rollback-component': RollbackComponent,
-    'terminal-button-component': TerminalButtonComponent,
-    'monitoring-button-component': MonitoringButtonComponent,
-  },
-
-  props: {
-    model: {
-      type: Object,
-      required: true,
-      default: () => ({}),
+  import Timeago from 'timeago.js';
+  import _ from 'underscore';
+  import userAvatarLink from '../../vue_shared/components/user_avatar/user_avatar_link.vue';
+  import { humanize } from '../../lib/utils/text_utility';
+  import ActionsComponent from './environment_actions.vue';
+  import ExternalUrlComponent from './environment_external_url.vue';
+  import StopComponent from './environment_stop.vue';
+  import RollbackComponent from './environment_rollback.vue';
+  import TerminalButtonComponent from './environment_terminal_button.vue';
+  import MonitoringButtonComponent from './environment_monitoring.vue';
+  import CommitComponent from '../../vue_shared/components/commit.vue';
+  import eventHub from '../event_hub';
+
+  /**
+  * Envrionment Item Component
+  *
+  * Renders a table row for each environment.
+  */
+  const timeagoInstance = new Timeago();
+
+  export default {
+    components: {
+      userAvatarLink,
+      'commit-component': CommitComponent,
+      'actions-component': ActionsComponent,
+      'external-url-component': ExternalUrlComponent,
+      'stop-component': StopComponent,
+      'rollback-component': RollbackComponent,
+      'terminal-button-component': TerminalButtonComponent,
+      'monitoring-button-component': MonitoringButtonComponent,
     },
 
-    canCreateDeployment: {
-      type: Boolean,
-      required: false,
-      default: false,
+    props: {
+      model: {
+        type: Object,
+        required: true,
+        default: () => ({}),
+      },
+
+      canCreateDeployment: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
+
+      canReadEnvironment: {
+        type: Boolean,
+        required: false,
+        default: false,
+      },
     },
 
-    canReadEnvironment: {
-      type: Boolean,
-      required: false,
-      default: false,
-    },
-  },
-
-  computed: {
-    /**
-     * Verifies if `last_deployment` key exists in the current Envrionment.
-     * This key is required to render most of the html - this method works has
-     * an helper.
-     *
-     * @returns {Boolean}
-     */
-    hasLastDeploymentKey() {
-      if (this.model &&
-        this.model.last_deployment &&
-        !_.isEmpty(this.model.last_deployment)) {
-        return true;
-      }
-      return false;
-    },
-
-    /**
-     * Verifies is the given environment has manual actions.
-     * Used to verify if we should render them or nor.
-     *
-     * @returns {Boolean|Undefined}
-     */
-    hasManualActions() {
-      return this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.manual_actions &&
-        this.model.last_deployment.manual_actions.length > 0;
-    },
-
-    /**
-     * Returns the value of the `stop_action?` key provided in the response.
-     *
-     * @returns {Boolean}
-     */
-    hasStopAction() {
-      return this.model && this.model['stop_action?'];
-    },
-
-    /**
-     * Verifies if the `deployable` key is present in `last_deployment` key.
-     * Used to verify whether we should or not render the rollback partial.
-     *
-     * @returns {Boolean|Undefined}
-     */
-    canRetry() {
-      return this.model &&
-        this.hasLastDeploymentKey &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable;
-    },
-
-    /**
-     * Verifies if the date to be shown is present.
-     *
-     * @returns {Boolean|Undefined}
-     */
-    canShowDate() {
-      return this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable !== undefined;
-    },
-
-    /**
-     * Human readable date.
-     *
-     * @returns {String}
-     */
-    createdDate() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable.created_at) {
-        return timeagoInstance.format(this.model.last_deployment.deployable.created_at);
-      }
-      return '';
-    },
-
-    /**
-     * Returns the manual actions with the name parsed.
-     *
-     * @returns {Array.<Object>|Undefined}
-     */
-    manualActions() {
-      if (this.hasManualActions) {
-        return this.model.last_deployment.manual_actions.map((action) => {
-          const parsedAction = {
-            name: humanize(action.name),
-            play_path: action.play_path,
-            playable: action.playable,
-          };
-          return parsedAction;
-        });
-      }
-      return [];
-    },
-
-    /**
-     * Builds the string used in the user image alt attribute.
-     *
-     * @returns {String}
-     */
-    userImageAltDescription() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.user &&
-        this.model.last_deployment.user.username) {
-        return `${this.model.last_deployment.user.username}'s avatar'`;
-      }
-      return '';
-    },
-
-    /**
-     * If provided, returns the commit tag.
-     *
-     * @returns {String|Undefined}
-     */
-    commitTag() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.tag) {
-        return this.model.last_deployment.tag;
-      }
-      return undefined;
+    computed: {
+      /**
+      * Verifies if `last_deployment` key exists in the current Envrionment.
+      * This key is required to render most of the html - this method works has
+      * an helper.
+      *
+      * @returns {Boolean}
+      */
+      hasLastDeploymentKey() {
+        if (this.model &&
+          this.model.last_deployment &&
+          !_.isEmpty(this.model.last_deployment)) {
+          return true;
+        }
+        return false;
+      },
+
+      /**
+      * Verifies is the given environment has manual actions.
+      * Used to verify if we should render them or nor.
+      *
+      * @returns {Boolean|Undefined}
+      */
+      hasManualActions() {
+        return this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.manual_actions &&
+          this.model.last_deployment.manual_actions.length > 0;
+      },
+
+      /**
+      * Returns the value of the `stop_action?` key provided in the response.
+      *
+      * @returns {Boolean}
+      */
+      hasStopAction() {
+        return this.model && this.model['stop_action?'];
+      },
+
+      /**
+      * Verifies if the `deployable` key is present in `last_deployment` key.
+      * Used to verify whether we should or not render the rollback partial.
+      *
+      * @returns {Boolean|Undefined}
+      */
+      canRetry() {
+        return this.model &&
+          this.hasLastDeploymentKey &&
+          this.model.last_deployment &&
+          this.model.last_deployment.deployable;
+      },
+
+      /**
+      * Verifies if the date to be shown is present.
+      *
+      * @returns {Boolean|Undefined}
+      */
+      canShowDate() {
+        return this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.deployable &&
+          this.model.last_deployment.deployable !== undefined;
+      },
+
+      /**
+      * Human readable date.
+      *
+      * @returns {String}
+      */
+      createdDate() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.deployable &&
+          this.model.last_deployment.deployable.created_at) {
+          return timeagoInstance.format(this.model.last_deployment.deployable.created_at);
+        }
+        return '';
+      },
+
+      /**
+      * Returns the manual actions with the name parsed.
+      *
+      * @returns {Array.<Object>|Undefined}
+      */
+      manualActions() {
+        if (this.hasManualActions) {
+          return this.model.last_deployment.manual_actions.map((action) => {
+            const parsedAction = {
+              name: humanize(action.name),
+              play_path: action.play_path,
+              playable: action.playable,
+            };
+            return parsedAction;
+          });
+        }
+        return [];
+      },
+
+      /**
+      * Builds the string used in the user image alt attribute.
+      *
+      * @returns {String}
+      */
+      userImageAltDescription() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.user &&
+          this.model.last_deployment.user.username) {
+          return `${this.model.last_deployment.user.username}'s avatar'`;
+        }
+        return '';
+      },
+
+      /**
+      * If provided, returns the commit tag.
+      *
+      * @returns {String|Undefined}
+      */
+      commitTag() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.tag) {
+          return this.model.last_deployment.tag;
+        }
+        return undefined;
+      },
+
+      /**
+      * If provided, returns the commit ref.
+      *
+      * @returns {Object|Undefined}
+      */
+      commitRef() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.ref) {
+          return this.model.last_deployment.ref;
+        }
+        return undefined;
+      },
+
+      /**
+      * If provided, returns the commit url.
+      *
+      * @returns {String|Undefined}
+      */
+      commitUrl() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.commit_path) {
+          return this.model.last_deployment.commit.commit_path;
+        }
+        return undefined;
+      },
+
+      /**
+      * If provided, returns the commit short sha.
+      *
+      * @returns {String|Undefined}
+      */
+      commitShortSha() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.short_id) {
+          return this.model.last_deployment.commit.short_id;
+        }
+        return undefined;
+      },
+
+      /**
+      * If provided, returns the commit title.
+      *
+      * @returns {String|Undefined}
+      */
+      commitTitle() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.title) {
+          return this.model.last_deployment.commit.title;
+        }
+        return undefined;
+      },
+
+      /**
+      * If provided, returns the commit tag.
+      *
+      * @returns {Object|Undefined}
+      */
+      commitAuthor() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.commit &&
+          this.model.last_deployment.commit.author) {
+          return this.model.last_deployment.commit.author;
+        }
+
+        return undefined;
+      },
+
+      /**
+      * Verifies if the `retry_path` key is present and returns its value.
+      *
+      * @returns {String|Undefined}
+      */
+      retryUrl() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.deployable &&
+          this.model.last_deployment.deployable.retry_path) {
+          return this.model.last_deployment.deployable.retry_path;
+        }
+        return undefined;
+      },
+
+      /**
+      * Verifies if the `last?` key is present and returns its value.
+      *
+      * @returns {Boolean|Undefined}
+      */
+      isLastDeployment() {
+        return this.model && this.model.last_deployment &&
+          this.model.last_deployment['last?'];
+      },
+
+      /**
+      * Builds the name of the builds needed to display both the name and the id.
+      *
+      * @returns {String}
+      */
+      buildName() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.deployable) {
+          const deployable = this.model.last_deployment.deployable;
+          return `${deployable.name} #${deployable.id}`;
+        }
+        return '';
+      },
+
+      /**
+      * Builds the needed string to show the internal id.
+      *
+      * @returns {String}
+      */
+      deploymentInternalId() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.iid) {
+          return `#${this.model.last_deployment.iid}`;
+        }
+        return '';
+      },
+
+      /**
+      * Verifies if the user object is present under last_deployment object.
+      *
+      * @returns {Boolean}
+      */
+      deploymentHasUser() {
+        return this.model &&
+          !_.isEmpty(this.model.last_deployment) &&
+          !_.isEmpty(this.model.last_deployment.user);
+      },
+
+      /**
+      * Returns the user object nested with the last_deployment object.
+      * Used to render the template.
+      *
+      * @returns {Object}
+      */
+      deploymentUser() {
+        if (this.model &&
+          !_.isEmpty(this.model.last_deployment) &&
+          !_.isEmpty(this.model.last_deployment.user)) {
+          return this.model.last_deployment.user;
+        }
+        return {};
+      },
+
+      /**
+      * Verifies if the build name column should be rendered by verifing
+      * if all the information needed is present
+      * and if the environment is not a folder.
+      *
+      * @returns {Boolean}
+      */
+      shouldRenderBuildName() {
+        return !this.model.isFolder &&
+          !_.isEmpty(this.model.last_deployment) &&
+          !_.isEmpty(this.model.last_deployment.deployable);
+      },
+
+      /**
+      * Verifies the presence of all the keys needed to render the buil_path.
+      *
+      * @return {String}
+      */
+      buildPath() {
+        if (this.model &&
+          this.model.last_deployment &&
+          this.model.last_deployment.deployable &&
+          this.model.last_deployment.deployable.build_path) {
+          return this.model.last_deployment.deployable.build_path;
+        }
+
+        return '';
+      },
+
+      /**
+      * Verifies the presence of all the keys needed to render the external_url.
+      *
+      * @return {String}
+      */
+      externalURL() {
+        if (this.model && this.model.external_url) {
+          return this.model.external_url;
+        }
+
+        return '';
+      },
+
+      /**
+      * Verifies if deplyment internal ID should be rendered by verifing
+      * if all the information needed is present
+      * and if the environment is not a folder.
+      *
+      * @returns {Boolean}
+      */
+      shouldRenderDeploymentID() {
+        return !this.model.isFolder &&
+          !_.isEmpty(this.model.last_deployment) &&
+          this.model.last_deployment.iid !== undefined;
+      },
+
+      environmentPath() {
+        if (this.model && this.model.environment_path) {
+          return this.model.environment_path;
+        }
+
+        return '';
+      },
+
+      monitoringUrl() {
+        if (this.model && this.model.metrics_path) {
+          return this.model.metrics_path;
+        }
+
+        return '';
+      },
+
+      displayEnvironmentActions() {
+        return this.hasManualActions ||
+              this.externalURL ||
+              this.monitoringUrl ||
+              this.hasStopAction ||
+              this.canRetry;
+      },
     },
 
-    /**
-     * If provided, returns the commit ref.
-     *
-     * @returns {Object|Undefined}
-     */
-    commitRef() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.ref) {
-        return this.model.last_deployment.ref;
-      }
-      return undefined;
+    methods: {
+      onClickFolder() {
+        eventHub.$emit('toggleFolder', this.model);
+      },
     },
-
-    /**
-     * If provided, returns the commit url.
-     *
-     * @returns {String|Undefined}
-     */
-    commitUrl() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.commit &&
-        this.model.last_deployment.commit.commit_path) {
-        return this.model.last_deployment.commit.commit_path;
-      }
-      return undefined;
-    },
-
-    /**
-     * If provided, returns the commit short sha.
-     *
-     * @returns {String|Undefined}
-     */
-    commitShortSha() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.commit &&
-        this.model.last_deployment.commit.short_id) {
-        return this.model.last_deployment.commit.short_id;
-      }
-      return undefined;
-    },
-
-    /**
-     * If provided, returns the commit title.
-     *
-     * @returns {String|Undefined}
-     */
-    commitTitle() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.commit &&
-        this.model.last_deployment.commit.title) {
-        return this.model.last_deployment.commit.title;
-      }
-      return undefined;
-    },
-
-    /**
-     * If provided, returns the commit tag.
-     *
-     * @returns {Object|Undefined}
-     */
-    commitAuthor() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.commit &&
-        this.model.last_deployment.commit.author) {
-        return this.model.last_deployment.commit.author;
-      }
-
-      return undefined;
-    },
-
-    /**
-     * Verifies if the `retry_path` key is present and returns its value.
-     *
-     * @returns {String|Undefined}
-     */
-    retryUrl() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable.retry_path) {
-        return this.model.last_deployment.deployable.retry_path;
-      }
-      return undefined;
-    },
-
-    /**
-     * Verifies if the `last?` key is present and returns its value.
-     *
-     * @returns {Boolean|Undefined}
-     */
-    isLastDeployment() {
-      return this.model && this.model.last_deployment &&
-        this.model.last_deployment['last?'];
-    },
-
-    /**
-     * Builds the name of the builds needed to display both the name and the id.
-     *
-     * @returns {String}
-     */
-    buildName() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable) {
-        return `${this.model.last_deployment.deployable.name} #${this.model.last_deployment.deployable.id}`;
-      }
-      return '';
-    },
-
-    /**
-     * Builds the needed string to show the internal id.
-     *
-     * @returns {String}
-     */
-    deploymentInternalId() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.iid) {
-        return `#${this.model.last_deployment.iid}`;
-      }
-      return '';
-    },
-
-    /**
-     * Verifies if the user object is present under last_deployment object.
-     *
-     * @returns {Boolean}
-     */
-    deploymentHasUser() {
-      return this.model &&
-        !_.isEmpty(this.model.last_deployment) &&
-        !_.isEmpty(this.model.last_deployment.user);
-    },
-
-    /**
-     * Returns the user object nested with the last_deployment object.
-     * Used to render the template.
-     *
-     * @returns {Object}
-     */
-    deploymentUser() {
-      if (this.model &&
-        !_.isEmpty(this.model.last_deployment) &&
-        !_.isEmpty(this.model.last_deployment.user)) {
-        return this.model.last_deployment.user;
-      }
-      return {};
-    },
-
-    /**
-     * Verifies if the build name column should be rendered by verifing
-     * if all the information needed is present
-     * and if the environment is not a folder.
-     *
-     * @returns {Boolean}
-     */
-    shouldRenderBuildName() {
-      return !this.model.isFolder &&
-        !_.isEmpty(this.model.last_deployment) &&
-        !_.isEmpty(this.model.last_deployment.deployable);
-    },
-
-    /**
-     * Verifies the presence of all the keys needed to render the buil_path.
-     *
-     * @return {String}
-     */
-    buildPath() {
-      if (this.model &&
-        this.model.last_deployment &&
-        this.model.last_deployment.deployable &&
-        this.model.last_deployment.deployable.build_path) {
-        return this.model.last_deployment.deployable.build_path;
-      }
-
-      return '';
-    },
-
-    /**
-     * Verifies the presence of all the keys needed to render the external_url.
-     *
-     * @return {String}
-     */
-    externalURL() {
-      if (this.model && this.model.external_url) {
-        return this.model.external_url;
-      }
-
-      return '';
-    },
-
-    /**
-     * Verifies if deplyment internal ID should be rendered by verifing
-     * if all the information needed is present
-     * and if the environment is not a folder.
-     *
-     * @returns {Boolean}
-     */
-    shouldRenderDeploymentID() {
-      return !this.model.isFolder &&
-        !_.isEmpty(this.model.last_deployment) &&
-        this.model.last_deployment.iid !== undefined;
-    },
-
-    environmentPath() {
-      if (this.model && this.model.environment_path) {
-        return this.model.environment_path;
-      }
-
-      return '';
-    },
-
-    monitoringUrl() {
-      if (this.model && this.model.metrics_path) {
-        return this.model.metrics_path;
-      }
-
-      return '';
-    },
-
-    displayEnvironmentActions() {
-      return this.hasManualActions ||
-             this.externalURL ||
-             this.monitoringUrl ||
-             this.hasStopAction ||
-             this.canRetry;
-    },
-  },
-
-  methods: {
-    onClickFolder() {
-      eventHub.$emit('toggleFolder', this.model);
-    },
-  },
-};
+  };
 </script>
 <template>
   <div
@@ -427,18 +428,22 @@ export default {
       'folder-row': model.isFolder,
     }"
     role="row">
-    <div class="table-section section-10" role="gridcell">
+    <div
+      class="table-section section-10"
+      role="gridcell"
+    >
       <div
         v-if="!model.isFolder"
         class="table-mobile-header"
-        role="rowheader">
-        {{s__("Environments|Environment")}}
+        role="rowheader"
+      >
+        {{ s__("Environments|Environment") }}
       </div>
       <a
         v-if="!model.isFolder"
         class="environment-name flex-truncate-parent table-mobile-content"
         :href="environmentPath">
-        <span class="flex-truncate-child">{{model.name}}</span>
+        <span class="flex-truncate-child">{{ model.name }}</span>
       </a>
       <span
         v-else
@@ -450,32 +455,40 @@ export default {
           <i
             v-show="model.isOpen"
             class="fa fa-caret-down"
-            aria-hidden="true" />
+            aria-hidden="true"
+          >
+          </i>
           <i
             v-show="!model.isOpen"
             class="fa fa-caret-right"
-            aria-hidden="true"/>
+            aria-hidden="true"
+          >
+          </i>
         </span>
 
         <span class="folder-icon">
           <i
             class="fa fa-folder"
-            aria-hidden="true" />
+            aria-hidden="true">
+          </i>
         </span>
 
         <span>
-          {{model.folderName}}
+          {{ model.folderName }}
         </span>
 
         <span class="badge">
-          {{model.size}}
+          {{ model.size }}
         </span>
       </span>
     </div>
 
-    <div class="table-section section-10 deployment-column hidden-xs hidden-sm" role="gridcell">
+    <div
+      class="table-section section-10 deployment-column hidden-xs hidden-sm"
+      role="gridcell"
+    >
       <span v-if="shouldRenderDeploymentID">
-        {{deploymentInternalId}}
+        {{ deploymentInternalId }}
       </span>
 
       <span v-if="!model.isFolder && deploymentHasUser">
@@ -490,22 +503,29 @@ export default {
       </span>
     </div>
 
-    <div class="table-section section-15 hidden-xs hidden-sm" role="gridcell">
+    <div
+      class="table-section section-15 hidden-xs hidden-sm"
+      role="gridcell"
+    >
       <a
         v-if="shouldRenderBuildName"
         class="build-link flex-truncate-parent"
-        :href="buildPath">
-        <span class="flex-truncate-child">{{buildName}}</span>
+        :href="buildPath"
+      >
+        <span class="flex-truncate-child">{{ buildName }}</span>
       </a>
     </div>
 
     <div
       v-if="!model.isFolder"
-      class="table-section section-25" role="gridcell">
+      class="table-section section-25"
+      role="gridcell"
+    >
       <div
         role="rowheader"
-        class="table-mobile-header">
-        {{s__("Environments|Commit")}}
+        class="table-mobile-header"
+      >
+        {{ s__("Environments|Commit") }}
       </div>
       <div
         v-if="hasLastDeploymentKey"
@@ -521,22 +541,24 @@ export default {
       <div
         v-if="!hasLastDeploymentKey"
         class="commit-title table-mobile-content">
-        {{s__("Environments|No deployments yet")}}
+        {{ s__("Environments|No deployments yet") }}
       </div>
     </div>
 
     <div
       v-if="!model.isFolder"
-      class="table-section section-10" role="gridcell">
+      class="table-section section-10"
+      role="gridcell"
+    >
       <div
         role="rowheader"
         class="table-mobile-header">
-        {{s__("Environments|Updated")}}
+        {{ s__("Environments|Updated") }}
       </div>
       <span
         v-if="canShowDate"
         class="environment-created-date-timeago table-mobile-content">
-        {{createdDate}}
+        {{ createdDate }}
       </span>
     </div>
 
@@ -552,33 +574,33 @@ export default {
         <actions-component
           v-if="hasManualActions && canCreateDeployment"
           :actions="manualActions"
-          />
+        />
 
         <external-url-component
           v-if="externalURL && canReadEnvironment"
           :external-url="externalURL"
-          />
+        />
 
         <monitoring-button-component
           v-if="monitoringUrl && canReadEnvironment"
           :monitoring-url="monitoringUrl"
-          />
+        />
 
         <terminal-button-component
           v-if="model && model.terminal_path"
           :terminal-path="model.terminal_path"
-          />
+        />
 
         <stop-component
           v-if="hasStopAction && canCreateDeployment"
           :stop-url="model.stop_path"
-          />
+        />
 
         <rollback-component
           v-if="canRetry && canCreateDeployment"
           :is-last-deployment="isLastDeployment"
           :retry-url="retryUrl"
-          />
+        />
       </div>
     </div>
   </div>