Add latest changes from gitlab-org/gitlab@13-11-stable-eev13.11.0-rc43

2 files changed, 107 insertions, 0 deletions

diff --git a/app/assets/javascripts/deploy_tokens/components/revoke_button.vue b/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
new file mode 100644
index 00000000000..e026391ae22
--- /dev/null
+++ b/app/assets/javascripts/deploy_tokens/components/revoke_button.vue
@@ -0,0 +1,81 @@
+<script>
+import { GlButton, GlModal, GlModalDirective, GlSprintf } from '@gitlab/ui';
+
+export default {
+  components: {
+    GlModal,
+    GlSprintf,
+    GlButton,
+  },
+  directives: {
+    GlModal: GlModalDirective,
+  },
+  inject: {
+    token: {
+      default: null,
+    },
+    revokePath: {
+      default: '',
+    },
+    buttonClass: {
+      default: '',
+    },
+  },
+  computed: {
+    modalId() {
+      return `revoke-modal-${this.token.id}`;
+    },
+  },
+  methods: {
+    cancelHandler() {
+      this.$refs.modal.hide();
+    },
+  },
+};
+</script>
+
+<template>
+  <div>
+    <gl-button
+      v-gl-modal="modalId"
+      :class="buttonClass"
+      category="primary"
+      variant="danger"
+      class="float-right"
+      data-testid="revoke-button"
+      >{{ s__('DeployTokens|Revoke') }}</gl-button
+    >
+    <gl-modal ref="modal" :modal-id="modalId">
+      <template #modal-title>
+        <gl-sprintf :message="s__(`DeployTokens|Revoke %{boldStart}${token.name}%{boldEnd}?`)">
+          <template #bold="{ content }"
+            ><b>{{ content }}</b></template
+          >
+        </gl-sprintf>
+      </template>
+      <gl-sprintf
+        :message="s__(`DeployTokens|You are about to revoke %{boldStart}${token.name}%{boldEnd}.`)"
+      >
+        <template #bold="{ content }">
+          <b>{{ content }}</b>
+        </template>
+      </gl-sprintf>
+      {{ s__('DeployTokens|This action cannot be undone.') }}
+      <template #modal-footer>
+        <gl-button category="secondary" @click="cancelHandler">{{ s__('Cancel') }}</gl-button>
+        <gl-button
+          category="primary"
+          variant="danger"
+          :href="revokePath"
+          data-method="put"
+          class="text-truncate"
+          data-testid="primary-revoke-btn"
+        >
+          <gl-sprintf :message="s__('DeployTokens|Revoke %{name}')">
+            <template #name>{{ token.name }}</template>
+          </gl-sprintf>
+        </gl-button>
+      </template>
+    </gl-modal>
+  </div>
+</template>
diff --git a/app/assets/javascripts/deploy_tokens/init_revoke_button.js b/app/assets/javascripts/deploy_tokens/init_revoke_button.js
new file mode 100644
index 00000000000..20187150a60
--- /dev/null
+++ b/app/assets/javascripts/deploy_tokens/init_revoke_button.js
@@ -0,0 +1,26 @@
+import Vue from 'vue';
+import RevokeButton from './components/revoke_button.vue';
+
+export default () => {
+  const containers = document.querySelectorAll('.js-deploy-token-revoke-button');
+
+  if (!containers.length) {
+    return false;
+  }
+
+  return containers.forEach((el) => {
+    const { token, revokePath, buttonClass } = el.dataset;
+
+    return new Vue({
+      el,
+      provide: {
+        token: JSON.parse(token),
+        revokePath,
+        buttonClass,
+      },
+      render(h) {
+        return h(RevokeButton);
+      },
+    });
+  });
+};