Add latest changes from gitlab-org/gitlab@15-1-stable-ee

1 files changed, 47 insertions, 45 deletions

diff --git a/app/assets/javascripts/clusters/agents/components/token_table.vue b/app/assets/javascripts/clusters/agents/components/token_table.vue
index 9e64c9da712..f74d66f6b8f 100644
--- a/app/assets/javascripts/clusters/agents/components/token_table.vue
+++ b/app/assets/javascripts/clusters/agents/components/token_table.vue
@@ -3,6 +3,7 @@ import { GlEmptyState, GlTable, GlTooltip, GlTruncate } from '@gitlab/ui';
 import { s__ } from '~/locale';
 import TimeAgoTooltip from '~/vue_shared/components/time_ago_tooltip.vue';
 import CreateTokenButton from './create_token_button.vue';
+import CreateTokenModal from './create_token_modal.vue';
 import RevokeTokenButton from './revoke_token_button.vue';
 
 export default {
@@ -13,6 +14,7 @@ export default {
     GlTruncate,
     TimeAgoTooltip,
     CreateTokenButton,
+    CreateTokenModal,
     RevokeTokenButton,
   },
   i18n: {
@@ -85,57 +87,57 @@ export default {
 </script>
 
 <template>
-  <div v-if="tokens.length">
-    <create-token-button
-      class="gl-text-right gl-my-5"
-      :cluster-agent-id="clusterAgentId"
-      :cursor="cursor"
-    />
+  <div>
+    <div v-if="tokens.length">
+      <create-token-button class="gl-text-right gl-my-5" />
 
-    <gl-table
-      :items="tokens"
-      :fields="fields"
-      fixed
-      stacked="md"
-      head-variant="white"
-      thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
-    >
-      <template #cell(lastUsed)="{ item }">
-        <time-ago-tooltip v-if="item.lastUsedAt" :time="item.lastUsedAt" />
-        <span v-else>{{ $options.i18n.neverUsed }}</span>
-      </template>
+      <gl-table
+        :items="tokens"
+        :fields="fields"
+        fixed
+        stacked="md"
+        head-variant="white"
+        thead-class="gl-border-b-solid gl-border-b-2 gl-border-b-gray-100"
+      >
+        <template #cell(lastUsed)="{ item }">
+          <time-ago-tooltip v-if="item.lastUsedAt" :time="item.lastUsedAt" />
+          <span v-else>{{ $options.i18n.neverUsed }}</span>
+        </template>
 
-      <template #cell(createdAt)="{ item }">
-        <time-ago-tooltip :time="item.createdAt" />
-      </template>
+        <template #cell(createdAt)="{ item }">
+          <time-ago-tooltip :time="item.createdAt" />
+        </template>
 
-      <template #cell(createdBy)="{ item }">
-        <span>{{ createdByName(item) }}</span>
-      </template>
+        <template #cell(createdBy)="{ item }">
+          <span>{{ createdByName(item) }}</span>
+        </template>
 
-      <template #cell(description)="{ item }">
-        <div v-if="item.description" :id="`tooltip-description-container-${item.id}`">
-          <gl-truncate :id="`tooltip-description-${item.id}`" :text="item.description" />
+        <template #cell(description)="{ item }">
+          <div v-if="item.description" :id="`tooltip-description-container-${item.id}`">
+            <gl-truncate :id="`tooltip-description-${item.id}`" :text="item.description" />
 
-          <gl-tooltip
-            :container="`tooltip-description-container-${item.id}`"
-            :target="`tooltip-description-${item.id}`"
-            placement="top"
-          >
-            {{ item.description }}
-          </gl-tooltip>
-        </div>
-      </template>
+            <gl-tooltip
+              :container="`tooltip-description-container-${item.id}`"
+              :target="`tooltip-description-${item.id}`"
+              placement="top"
+            >
+              {{ item.description }}
+            </gl-tooltip>
+          </div>
+        </template>
 
-      <template #cell(actions)="{ item }">
-        <revoke-token-button :token="item" :cluster-agent-id="clusterAgentId" :cursor="cursor" />
+        <template #cell(actions)="{ item }">
+          <revoke-token-button :token="item" :cluster-agent-id="clusterAgentId" :cursor="cursor" />
+        </template>
+      </gl-table>
+    </div>
+
+    <gl-empty-state v-else :title="$options.i18n.noTokens">
+      <template #actions>
+        <create-token-button />
       </template>
-    </gl-table>
-  </div>
+    </gl-empty-state>
 
-  <gl-empty-state v-else :title="$options.i18n.noTokens">
-    <template #actions>
-      <create-token-button :cluster-agent-id="clusterAgentId" :cursor="cursor" />
-    </template>
-  </gl-empty-state>
+    <create-token-modal :cluster-agent-id="clusterAgentId" :cursor="cursor" />
+  </div>
 </template>