From b48516fee51ba6f5d57da04e717cb5bb56d87b52 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 9 Mar 2018 13:14:20 +0000
Subject: Fix styling of multiple environments in merge request widget

Closes #40610
---
 .../components/deployment.vue                      | 124 +++++++++++++++++++++
 .../components/mr_widget_deployment.js             | 113 -------------------
 .../vue_merge_request_widget/dependencies.js       |   2 +-
 .../vue_merge_request_widget/mr_widget_options.js  |  23 +++-
 app/assets/stylesheets/pages/merge_requests.scss   |  20 ++++
 5 files changed, 162 insertions(+), 120 deletions(-)
 create mode 100644 app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
 delete mode 100644 app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js

(limited to 'app')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
new file mode 100644
index 00000000000..77dc366c8e8
--- /dev/null
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -0,0 +1,124 @@
+<script>
+import timeagoMixin from '../../vue_shared/mixins/timeago';
+import tooltip from '../../vue_shared/directives/tooltip';
+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 MRWidgetService from '../services/mr_widget_service';
+
+export default {
+  name: 'Deployment',
+  mixins: [
+    timeagoMixin,
+  ],
+  props: {
+    deployment: {
+      type: Object,
+      required: true,
+    },
+  },
+  components: {
+    MemoryUsage,
+    StatusIcon,
+  },
+  computed: {
+    deployTimeago() {
+      return this.timeFormated(this.deployment.deployed_at);
+    },
+    hasExternalUrls() {
+      return this.deployment.external_url && this.deployment.external_url_formatted;
+    },
+    hasDeploymentTime() {
+      return this.deployment.deployed_at && this.deployment.deployed_at_formatted;
+    },
+    hasDeploymentMeta() {
+      return this.deployment.url && this.deployment.name;
+    },
+  },
+  methods: {
+    stopEnvironment(deployment) {
+      const msg = 'Are you sure you want to stop this environment?';
+      const isConfirmed = confirm(msg); // eslint-disable-line
+
+      if (isConfirmed) {
+        MRWidgetService.stopEnvironment(deployment.stop_url)
+          .then(res => res.data)
+          .then((data) => {
+            if (data.redirect_url) {
+              visitUrl(data.redirect_url);
+            }
+          })
+          .catch(() => createFlash('Something went wrong while stopping this environment. Please try again.'));
+      }
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="mr-widget-heading deploy-heading">
+    <div class="ci-widget media">
+      <div class="ci-status-icon ci-status-icon-success">
+        <span class="js-icon-link icon-link">
+          <status-icon status="success" />
+        </span>
+      </div>
+      <div class="media-body">
+        <div class="deploy-body">
+          <span
+            v-if="hasDeploymentMeta">
+            Deployed to
+          </span>
+          <span class="deploy-link">
+            <a
+              v-if="hasDeploymentMeta"
+              :href="deployment.url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="js-deploy-meta">
+              {{deployment.name}}
+            </a>
+          </span>
+          <span
+            v-if="hasExternalUrls">
+            on
+          </span>
+          <span class="deploy-link">
+            <a
+              v-if="hasExternalUrls"
+              :href="deployment.external_url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="js-deploy-url">
+              <i
+                class="fa fa-external-link"
+                aria-hidden="true" />
+              {{deployment.external_url_formatted}}
+            </a>
+          </span>
+          <span
+            v-if="hasDeploymentTime"
+            :data-title="deployment.deployed_at_formatted"
+            class="js-deploy-time"
+            data-toggle="tooltip"
+            data-placement="top">
+            {{deployTimeago}}
+          </span>
+          <button
+            type="button"
+            v-if="deployment.stop_url"
+            @click="stopEnvironment(deployment)"
+            class="btn btn-default btn-xs">
+            Stop environment
+          </button>
+        </div>
+        <memory-usage
+          v-if="deployment.metrics_url"
+          :metrics-url="deployment.metrics_url"
+          :metrics-monitoring-url="deployment.metrics_monitoring_url"
+        />
+      </div>
+    </div>
+  </div>
+</template>
diff --git a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js b/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
deleted file mode 100644
index c7f992384c8..00000000000
--- a/app/assets/javascripts/vue_merge_request_widget/components/mr_widget_deployment.js
+++ /dev/null
@@ -1,113 +0,0 @@
-import { getTimeago } from '~/lib/utils/datetime_utility';
-import { visitUrl } from '../../lib/utils/url_utility';
-import Flash from '../../flash';
-import MemoryUsage from './memory_usage.vue';
-import StatusIcon from './mr_widget_status_icon.vue';
-import MRWidgetService from '../services/mr_widget_service';
-
-export default {
-  name: 'MRWidgetDeployment',
-  props: {
-    mr: { type: Object, required: true },
-    service: { type: Object, required: true },
-  },
-  components: {
-    MemoryUsage,
-    StatusIcon,
-  },
-  methods: {
-    formatDate(date) {
-      return getTimeago().format(date);
-    },
-    hasExternalUrls(deployment = {}) {
-      return deployment.external_url && deployment.external_url_formatted;
-    },
-    hasDeploymentTime(deployment = {}) {
-      return deployment.deployed_at && deployment.deployed_at_formatted;
-    },
-    hasDeploymentMeta(deployment = {}) {
-      return deployment.url && deployment.name;
-    },
-    stopEnvironment(deployment) {
-      const msg = 'Are you sure you want to stop this environment?';
-      const isConfirmed = confirm(msg); // eslint-disable-line
-
-      if (isConfirmed) {
-        MRWidgetService.stopEnvironment(deployment.stop_url)
-          .then(res => res.data)
-          .then((data) => {
-            if (data.redirect_url) {
-              visitUrl(data.redirect_url);
-            }
-          })
-          .catch(() => {
-            new Flash('Something went wrong while stopping this environment. Please try again.'); // eslint-disable-line
-          });
-      }
-    },
-  },
-  template: `
-    <div class="mr-widget-heading deploy-heading">
-      <div v-for="deployment in mr.deployments">
-        <div class="ci-widget media">
-          <div class="ci-status-icon ci-status-icon-success">
-            <span class="js-icon-link icon-link">
-              <status-icon status="success" />
-            </span>
-          </div>
-          <div class="media-body space-children">
-            <span>
-              <span
-                v-if="hasDeploymentMeta(deployment)">
-                Deployed to
-              </span>
-              <a
-                v-if="hasDeploymentMeta(deployment)"
-                :href="deployment.url"
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-                class="js-deploy-meta inline">
-                {{deployment.name}}
-              </a>
-              <span
-                v-if="hasExternalUrls(deployment)">
-                on
-              </span>
-              <a
-                v-if="hasExternalUrls(deployment)"
-                :href="deployment.external_url"
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-                class="js-deploy-url inline">
-                <i
-                  class="fa fa-external-link"
-                  aria-hidden="true" />
-                {{deployment.external_url_formatted}}
-              </a>
-              <span
-                v-if="hasDeploymentTime(deployment)"
-                :data-title="deployment.deployed_at_formatted"
-                class="js-deploy-time"
-                data-toggle="tooltip"
-                data-placement="top">
-                {{formatDate(deployment.deployed_at)}}
-              </span>
-            </span>
-            <button
-              type="button"
-              v-if="deployment.stop_url"
-              @click="stopEnvironment(deployment)"
-              class="btn btn-default btn-xs">
-              Stop environment
-            </button>
-            <memory-usage
-              v-if="deployment.metrics_url"
-              :metrics-url="deployment.metrics_url"
-              :metrics-monitoring-url="deployment.metrics_monitoring_url"
-            />
-          </div>
-        </div>
-      </div>
-    </div>
-  `,
-};
diff --git a/app/assets/javascripts/vue_merge_request_widget/dependencies.js b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
index 20624aad0ad..efbe1c96d1c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/dependencies.js
+++ b/app/assets/javascripts/vue_merge_request_widget/dependencies.js
@@ -14,7 +14,7 @@ export { default as SmartInterval } from '~/smart_interval';
 export { default as WidgetHeader } from './components/mr_widget_header.vue';
 export { default as WidgetMergeHelp } from './components/mr_widget_merge_help.vue';
 export { default as WidgetPipeline } from './components/mr_widget_pipeline.vue';
-export { default as WidgetDeployment } from './components/mr_widget_deployment';
+export { default as Deployment } from './components/deployment.vue';
 export { default as WidgetMaintainerEdit } from './components/mr_widget_maintainer_edit.vue';
 export { default as WidgetRelatedLinks } from './components/mr_widget_related_links.vue';
 export { default as MergedState } from './components/states/mr_widget_merged.vue';
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index cc8bc6af1e1..0c77ad80f74 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -5,7 +5,7 @@ import {
   WidgetHeader,
   WidgetMergeHelp,
   WidgetPipeline,
-  WidgetDeployment,
+  Deployment,
   WidgetMaintainerEdit,
   WidgetRelatedLinks,
   MergedState,
@@ -133,7 +133,16 @@ export default {
         .then(res => res.data)
         .then((data) => {
           if (data.length) {
-            this.mr.deployments = data;
+            data[0].stop_url = 'asd';
+            this.mr.deployments = data.concat({
+              ...data[0],
+              id: data[0].id + 1,
+              name: 'review/1-make-homepage-more-descriptive',
+              deployed_at: new Date(),
+              deployed_at_formatted: '123',
+              external_url_formatted: 'ad3-minmal-ruby-app-review-1-make-hom-gnm6yk.gitlab.training',
+              metrics_url: 'a',
+            });
           }
         })
         .catch(() => {
@@ -216,7 +225,7 @@ export default {
     'mr-widget-header': WidgetHeader,
     'mr-widget-merge-help': WidgetMergeHelp,
     'mr-widget-pipeline': WidgetPipeline,
-    'mr-widget-deployment': WidgetDeployment,
+    Deployment,
     'mr-widget-maintainer-edit': WidgetMaintainerEdit,
     'mr-widget-related-links': WidgetRelatedLinks,
     'mr-widget-merged': MergedState,
@@ -250,10 +259,12 @@ export default {
         :ci-status="mr.ciStatus"
         :has-ci="mr.hasCI"
         />
-      <mr-widget-deployment
+      <deployment
         v-if="shouldRenderDeployments"
-        :mr="mr"
-        :service="service" />
+        v-for="deployment in mr.deployments"
+        :key="deployment.id"
+        :deployment="deployment"
+      />
       <div class="mr-widget-section">
         <component
           :is="componentName"
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index f887a11004f..41369e1e233 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -727,3 +727,23 @@
 .fork-sprite {
   margin-right: -5px;
 }
+
+.deploy-body {
+  display: flex;
+  flex-wrap: wrap;
+
+  > *:not(:last-child) {
+    margin-right: .3em;
+  }
+}
+
+.deploy-link {
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  flex: 1 1 100px;
+}
+
+.mr-memory-usage {
+  width: 100%;
+}
-- 
cgit v1.2.1


From 33df949e8ac6b13fea2e6c6221519815234a688b Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Fri, 9 Mar 2018 16:35:31 +0000
Subject: updated specs

[ci skip]
---
 .../components/deployment.vue                      | 38 ++++++++++++++--------
 1 file changed, 24 insertions(+), 14 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index 77dc366c8e8..f76971c2850 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -9,6 +9,13 @@ import MRWidgetService from '../services/mr_widget_service';
 
 export default {
   name: 'Deployment',
+  components: {
+    MemoryUsage,
+    StatusIcon,
+  },
+  directives: {
+    tooltip,
+  },
   mixins: [
     timeagoMixin,
   ],
@@ -18,22 +25,21 @@ export default {
       required: true,
     },
   },
-  components: {
-    MemoryUsage,
-    StatusIcon,
-  },
   computed: {
     deployTimeago() {
       return this.timeFormated(this.deployment.deployed_at);
     },
     hasExternalUrls() {
-      return this.deployment.external_url && this.deployment.external_url_formatted;
+      return !!(this.deployment.external_url && this.deployment.external_url_formatted);
     },
     hasDeploymentTime() {
-      return this.deployment.deployed_at && this.deployment.deployed_at_formatted;
+      return !!(this.deployment.deployed_at && this.deployment.deployed_at_formatted);
     },
     hasDeploymentMeta() {
-      return this.deployment.url && this.deployment.name;
+      return !!(this.deployment.url && this.deployment.name);
+    },
+    hasMetrics() {
+      return !!(this.deployment.metrics_url);
     },
   },
   methods: {
@@ -67,7 +73,8 @@ export default {
       <div class="media-body">
         <div class="deploy-body">
           <span
-            v-if="hasDeploymentMeta">
+            v-if="hasDeploymentMeta"
+          >
             Deployed to
           </span>
           <span class="deploy-link">
@@ -77,11 +84,12 @@ export default {
               target="_blank"
               rel="noopener noreferrer nofollow"
               class="js-deploy-meta">
-              {{deployment.name}}
+              {{ deployment.name }}
             </a>
           </span>
           <span
-            v-if="hasExternalUrls">
+            v-if="hasExternalUrls"
+          >
             on
           </span>
           <span class="deploy-link">
@@ -93,8 +101,10 @@ export default {
               class="js-deploy-url">
               <i
                 class="fa fa-external-link"
-                aria-hidden="true" />
-              {{deployment.external_url_formatted}}
+                aria-hidden="true"
+              >
+              </i>
+              {{ deployment.external_url_formatted }}
             </a>
           </span>
           <span
@@ -103,7 +113,7 @@ export default {
             class="js-deploy-time"
             data-toggle="tooltip"
             data-placement="top">
-            {{deployTimeago}}
+            {{ deployTimeago }}
           </span>
           <button
             type="button"
@@ -114,7 +124,7 @@ export default {
           </button>
         </div>
         <memory-usage
-          v-if="deployment.metrics_url"
+          v-if="hasMetrics"
           :metrics-url="deployment.metrics_url"
           :metrics-monitoring-url="deployment.metrics_monitoring_url"
         />
-- 
cgit v1.2.1


From ef24633393f7a0a1ca78dcfa7e7f0c4a87f3c56c Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 12 Mar 2018 16:15:00 +0000
Subject: adjust styling to remove gaps

---
 app/assets/stylesheets/pages/merge_requests.scss | 22 +++++++++++++++++++++-
 1 file changed, 21 insertions(+), 1 deletion(-)

(limited to 'app')

diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index 41369e1e233..d1d35285036 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -728,20 +728,40 @@
   margin-right: -5px;
 }
 
+.deploy-heading {
+  .media-body {
+    min-width: 0;
+  }
+}
+
 .deploy-body {
   display: flex;
   flex-wrap: wrap;
 
+  @media (min-width: $screen-md-min) {
+    flex-wrap: nowrap;
+    white-space: nowrap;
+  }
+
   > *:not(:last-child) {
     margin-right: .3em;
   }
+
+  .btn {
+    margin-left: $gl-padding;
+  }
 }
 
 .deploy-link {
   white-space: nowrap;
   overflow: hidden;
   text-overflow: ellipsis;
-  flex: 1 1 100px;
+  min-width: 100px;
+  max-width: 150px;
+
+  @media (min-width: $screen-md-min) {
+    max-width: 100%;
+  }
 }
 
 .mr-memory-usage {
-- 
cgit v1.2.1


From 611601430dde46562b0049c5b5f5be656f7caae2 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 12 Mar 2018 16:18:06 +0000
Subject: fixed eslint

---
 .../javascripts/vue_merge_request_widget/mr_widget_options.js | 11 +----------
 1 file changed, 1 insertion(+), 10 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 0c77ad80f74..3675a2eaa85 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -133,16 +133,7 @@ export default {
         .then(res => res.data)
         .then((data) => {
           if (data.length) {
-            data[0].stop_url = 'asd';
-            this.mr.deployments = data.concat({
-              ...data[0],
-              id: data[0].id + 1,
-              name: 'review/1-make-homepage-more-descriptive',
-              deployed_at: new Date(),
-              deployed_at_formatted: '123',
-              external_url_formatted: 'ad3-minmal-ruby-app-review-1-make-hom-gnm6yk.gitlab.training',
-              metrics_url: 'a',
-            });
+            this.mr.deployments = data;
           }
         })
         .catch(() => {
-- 
cgit v1.2.1


From 3dcfb6cb16b14e806d642f024eccf269f97acede Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Mon, 12 Mar 2018 16:37:07 +0000
Subject: fixed scss-lint

---
 app/assets/stylesheets/pages/merge_requests.scss | 6 ++----
 1 file changed, 2 insertions(+), 4 deletions(-)

(limited to 'app')

diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index d1d35285036..c6abf5dd85f 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -718,6 +718,8 @@
 }
 
 .mr-memory-usage {
+  width: 100%;
+
   p.usage-info-loading .usage-info-load-spinner {
     margin-right: 10px;
     font-size: 16px;
@@ -763,7 +765,3 @@
     max-width: 100%;
   }
 }
-
-.mr-memory-usage {
-  width: 100%;
-}
-- 
cgit v1.2.1


From 908c67725c22cd91aff379449cf833ba4fd724f0 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 13 Mar 2018 10:10:11 +0000
Subject: fixed breakpoint disable stop button when loading

---
 .../components/deployment.vue                      | 103 ++++++++++++---------
 app/assets/stylesheets/pages/merge_requests.scss   |   5 +-
 2 files changed, 62 insertions(+), 46 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index f76971c2850..ae5a9e00c86 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -1,6 +1,7 @@
 <script>
 import timeagoMixin from '../../vue_shared/mixins/timeago';
 import tooltip from '../../vue_shared/directives/tooltip';
+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';
@@ -10,6 +11,7 @@ import MRWidgetService from '../services/mr_widget_service';
 export default {
   name: 'Deployment',
   components: {
+    LoadingButton,
     MemoryUsage,
     StatusIcon,
   },
@@ -25,6 +27,11 @@ export default {
       required: true,
     },
   },
+  data() {
+    return {
+      isStopping: false,
+    };
+  },
   computed: {
     deployTimeago() {
       return this.timeFormated(this.deployment.deployed_at);
@@ -43,19 +50,26 @@ export default {
     },
   },
   methods: {
-    stopEnvironment(deployment) {
+    stopEnvironment() {
       const msg = 'Are you sure you want to stop this environment?';
       const isConfirmed = confirm(msg); // eslint-disable-line
 
       if (isConfirmed) {
-        MRWidgetService.stopEnvironment(deployment.stop_url)
+        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.'));
+          .catch(() => {
+            createFlash('Something went wrong while stopping this environment. Please try again.');
+            this.isStopping = false;
+          });
       }
     },
   },
@@ -72,56 +86,57 @@ export default {
       </div>
       <div class="media-body">
         <div class="deploy-body">
-          <span
-            v-if="hasDeploymentMeta"
-          >
-            Deployed to
-          </span>
-          <span class="deploy-link">
-            <a
-              v-if="hasDeploymentMeta"
-              :href="deployment.url"
-              target="_blank"
-              rel="noopener noreferrer nofollow"
-              class="js-deploy-meta">
-              {{ deployment.name }}
-            </a>
-          </span>
-          <span
-            v-if="hasExternalUrls"
-          >
-            on
-          </span>
-          <span class="deploy-link">
-            <a
-              v-if="hasExternalUrls"
-              :href="deployment.external_url"
-              target="_blank"
-              rel="noopener noreferrer nofollow"
-              class="js-deploy-url">
-              <i
-                class="fa fa-external-link"
-                aria-hidden="true"
+          <template v-if="hasDeploymentMeta">
+            <span>
+              Deployed to
+            </span>
+            <span class="deploy-link">
+              <a
+                :href="deployment.url"
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                class="js-deploy-meta"
               >
-              </i>
-              {{ deployment.external_url_formatted }}
-            </a>
-          </span>
+                {{ deployment.name }}
+              </a>
+            </span>
+          </template>
+          <template v-if="hasExternalUrls">
+            <span>
+              on
+            </span>
+            <span class="deploy-link">
+              <a
+                :href="deployment.external_url"
+                target="_blank"
+                rel="noopener noreferrer nofollow"
+                class="js-deploy-url"
+              >
+                <i
+                  class="fa fa-external-link"
+                  aria-hidden="true"
+                >
+                </i>
+                {{ deployment.external_url_formatted }}
+              </a>
+            </span>
+          </template>
           <span
             v-if="hasDeploymentTime"
             :data-title="deployment.deployed_at_formatted"
             class="js-deploy-time"
             data-toggle="tooltip"
-            data-placement="top">
+            data-placement="top"
+          >
             {{ deployTimeago }}
           </span>
-          <button
-            type="button"
+          <loading-button
             v-if="deployment.stop_url"
-            @click="stopEnvironment(deployment)"
-            class="btn btn-default btn-xs">
-            Stop environment
-          </button>
+            container-class="btn btn-default btn-xs"
+            label="Stop environment"
+            :loading="isStopping"
+            @click="stopEnvironment"
+          />
         </div>
         <memory-usage
           v-if="hasMetrics"
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index c6abf5dd85f..bdb8e3535dd 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -740,7 +740,7 @@
   display: flex;
   flex-wrap: wrap;
 
-  @media (min-width: $screen-md-min) {
+  @media (min-width: $screen-xs) {
     flex-wrap: nowrap;
     white-space: nowrap;
   }
@@ -761,7 +761,8 @@
   min-width: 100px;
   max-width: 150px;
 
-  @media (min-width: $screen-md-min) {
+  @media (min-width: $screen-xs) {
+    min-width: 0;
     max-width: 100%;
   }
 }
-- 
cgit v1.2.1


From 123614fa650f4676a4e1b941b30587308556ac93 Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Tue, 13 Mar 2018 10:35:21 +0000
Subject: improved markup

---
 .../components/deployment.vue                      | 44 ++++++++++------------
 1 file changed, 20 insertions(+), 24 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index ae5a9e00c86..dc91f8ca68c 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -90,36 +90,32 @@ export default {
             <span>
               Deployed to
             </span>
-            <span class="deploy-link">
-              <a
-                :href="deployment.url"
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-                class="js-deploy-meta"
-              >
-                {{ deployment.name }}
-              </a>
-            </span>
+            <a
+              :href="deployment.url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="deploy-link js-deploy-meta"
+            >
+              {{ deployment.name }}
+            </a>
           </template>
           <template v-if="hasExternalUrls">
             <span>
               on
             </span>
-            <span class="deploy-link">
-              <a
-                :href="deployment.external_url"
-                target="_blank"
-                rel="noopener noreferrer nofollow"
-                class="js-deploy-url"
+            <a
+              :href="deployment.external_url"
+              target="_blank"
+              rel="noopener noreferrer nofollow"
+              class="deploy-link js-deploy-url"
+            >
+              <i
+                class="fa fa-external-link"
+                aria-hidden="true"
               >
-                <i
-                  class="fa fa-external-link"
-                  aria-hidden="true"
-                >
-                </i>
-                {{ deployment.external_url_formatted }}
-              </a>
-            </span>
+              </i>
+              {{ deployment.external_url_formatted }}
+            </a>
           </template>
           <span
             v-if="hasDeploymentTime"
-- 
cgit v1.2.1


From 686343835f09376ada8f35f85b96e46613fdc08d Mon Sep 17 00:00:00 2001
From: Phil Hughes <me@iamphill.com>
Date: Wed, 14 Mar 2018 09:20:06 +0000
Subject: removed useless v-if removed pointless test & changed some deployment
 tests to make more sense added in v-tooltip

---
 .../javascripts/vue_merge_request_widget/components/deployment.vue | 7 +++----
 .../javascripts/vue_merge_request_widget/mr_widget_options.js      | 4 ----
 app/assets/stylesheets/pages/merge_requests.scss                   | 4 ----
 3 files changed, 3 insertions(+), 12 deletions(-)

(limited to 'app')

diff --git a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
index dc91f8ca68c..7bef2e97349 100644
--- a/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
+++ b/app/assets/javascripts/vue_merge_request_widget/components/deployment.vue
@@ -119,16 +119,15 @@ export default {
           </template>
           <span
             v-if="hasDeploymentTime"
-            :data-title="deployment.deployed_at_formatted"
+            v-tooltip
+            :title="deployment.deployed_at_formatted"
             class="js-deploy-time"
-            data-toggle="tooltip"
-            data-placement="top"
           >
             {{ deployTimeago }}
           </span>
           <loading-button
             v-if="deployment.stop_url"
-            container-class="btn btn-default btn-xs"
+            container-class="btn btn-default btn-xs prepend-left-default"
             label="Stop environment"
             :loading="isStopping"
             @click="stopEnvironment"
diff --git a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
index 3675a2eaa85..169adfe0a1d 100644
--- a/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
+++ b/app/assets/javascripts/vue_merge_request_widget/mr_widget_options.js
@@ -67,9 +67,6 @@ export default {
     shouldRenderRelatedLinks() {
       return !!this.mr.relatedLinks && !this.mr.isNothingToMergeState;
     },
-    shouldRenderDeployments() {
-      return this.mr.deployments.length;
-    },
     shouldRenderSourceBranchRemovalStatus() {
       return !this.mr.canRemoveSourceBranch && this.mr.shouldRemoveSourceBranch &&
         (!this.mr.isNothingToMergeState && !this.mr.isMergedState);
@@ -251,7 +248,6 @@ export default {
         :has-ci="mr.hasCI"
         />
       <deployment
-        v-if="shouldRenderDeployments"
         v-for="deployment in mr.deployments"
         :key="deployment.id"
         :deployment="deployment"
diff --git a/app/assets/stylesheets/pages/merge_requests.scss b/app/assets/stylesheets/pages/merge_requests.scss
index bdb8e3535dd..4692d0fb873 100644
--- a/app/assets/stylesheets/pages/merge_requests.scss
+++ b/app/assets/stylesheets/pages/merge_requests.scss
@@ -748,10 +748,6 @@
   > *:not(:last-child) {
     margin-right: .3em;
   }
-
-  .btn {
-    margin-left: $gl-padding;
-  }
 }
 
 .deploy-link {
-- 
cgit v1.2.1