2 files changed, 70 insertions, 0 deletions
diff --git a/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
new file mode 100644
index 00000000000..bf983d911ea
--- /dev/null
+++ b/app/assets/javascripts/users/profile/actions/components/user_actions_app.vue
@@ -0,0 +1,45 @@
+<script>
+import { GlDisclosureDropdown } from '@gitlab/ui';
+import { sprintf, s__ } from '~/locale';
+
+export default {
+  components: {
+    GlDisclosureDropdown,
+  },
+  props: {
+    userId: {
+      type: String,
+      required: true,
+    },
+  },
+  data() {
+    return {
+      // Only implement the copy function in MR for now
+      // https://gitlab.com/gitlab-org/gitlab/-/merge_requests/122971
+      // The rest will be implemented in the upcoming MR.
+      dropdownItems: [
+        {
+          action: this.onUserIdCopy,
+          text: sprintf(this.$options.i18n.userId, { id: this.userId }),
+          extraAttrs: {
+            'data-clipboard-text': this.userId,
+          },
+        },
+      ],
+    };
+  },
+  methods: {
+    onUserIdCopy() {
+      this.$toast.show(this.$options.i18n.userIdCopied);
+    },
+  },
+  i18n: {
+    userId: s__('UserProfile|Copy user ID: %{id}'),
+    userIdCopied: s__('UserProfile|User ID copied to clipboard'),
+  },
+};
+</script>
+
+<template>
+  <gl-disclosure-dropdown icon="ellipsis_v" category="tertiary" no-caret :items="dropdownItems" />
+</template>
diff --git a/app/assets/javascripts/users/profile/actions/index.js b/app/assets/javascripts/users/profile/actions/index.js
new file mode 100644
index 00000000000..37a3faf82a5
--- /dev/null
+++ b/app/assets/javascripts/users/profile/actions/index.js
@@ -0,0 +1,25 @@
+import Vue from 'vue';
+import { GlToast } from '@gitlab/ui';
+import UserActionsApp from './components/user_actions_app.vue';
+
+export const initUserActionsApp = () => {
+  const mountingEl = document.querySelector('.js-user-profile-actions');
+
+  if (!mountingEl) return false;
+
+  const { userId } = mountingEl.dataset;
+
+  Vue.use(GlToast);
+
+  return new Vue({
+    el: mountingEl,
+    name: 'UserActionsRoot',
+    render(createElement) {
+      return createElement(UserActionsApp, {
+        props: {
+          userId,
+        },
+      });
+    },
+  });
+};