feat(nc-gui): add copy user id in memebers tab

packages/nc-gui/components/account/Profile.vue

@@ -8,6 +8,8 @@ const { t } = useI18n()
 const isErrored = ref(false)
 const isProfileUpdating = ref(false)
 
+const copyBtnRef = ref()
+
 const form = ref<{
   title: string
   email: string
@@ -184,7 +186,26 @@ const onCancel = () => {
 
                   <div class="flex-1 flex flex-col gap-4">
                     <div>
-                      <div class="text-gray-800 mb-2" data-rec="true">{{ $t('general.name') }}</div>
+                      <div class="flex items-center gap-1.5 justify-between mb-2">
+                        <div class="text-nc-content-gray" data-rec="true">{{ $t('general.name') }}</div>
+                        <NcTooltip v-if="user" :title="$t('labels.clickToCopyUserID')" placement="top" hide-on-click class="flex">
+                          <div
+                            data-rec="true"
+                            class="flex items-center gap-1.5 text-bodyDefaultSm text-nc-content-gray-subtle2 cursor-pointer"
+                            @click="copyBtnRef?.copyContent()"
+                          >
+                            {{ $t('labels.userIdColon', { userId: user?.id }) }}
+
+                            <GeneralCopyButton
+                              ref="copyBtnRef"
+                              type="text"
+                              size="xxsmall"
+                              :content="user?.id"
+                              :show-toast="false"
+                            />
+                          </div>
+                        </NcTooltip>
+                      </div>
                       <a-form-item name="title" :rules="formRules.title" class="!my-0">
                         <a-input
                           v-model:value="form.title"

packages/nc-gui/components/project/AccessSettings.vue

@@ -283,9 +283,16 @@ const columns = [
   {
     key: 'created_at',
     title: t('title.dateJoined'),
-    basis: '25%',
+    basis: '20%',
     minWidth: 200,
   },
+  {
+    key: 'action',
+    title: t('labels.actions'),
+    width: 110,
+    minWidth: 110,
+    justify: 'justify-end',
+  },
 ] as NcTableColumnProps[]
 
 const customRow = (record: Record<string, any>) => ({
@@ -534,6 +541,26 @@ onBeforeUnmount(() => {
                 </span>
               </NcTooltip>
             </div>
+            <div v-if="column.key === 'action'">
+              <NcDropdown placement="bottomRight">
+                <NcButton size="small" type="secondary">
+                  <component :is="iconMap.ncMoreVertical" />
+                </NcButton>
+                <template #overlay>
+                  <NcMenu variant="small">
+                    <NcMenuItemCopyId
+                      :id="record.id"
+                      :tooltip="$t('labels.clickToCopyUserID')"
+                      :label="
+                        $t('labels.userIdColon', {
+                          userId: record.id,
+                        })
+                      "
+                    />
+                  </NcMenu>
+                </template>
+              </NcDropdown>
+            </div>
           </template>
         </NcTable>
       </div>

packages/nc-gui/components/workspace/CollaboratorsList.vue

@@ -554,36 +554,50 @@ watch(inviteDlg, (newVal) => {
             </div>
 
             <div v-if="column.key === 'action'">
-              <NcDropdown v-if="isOwnerOrCreator || record.id === user.id">
+              <NcDropdown placement="bottomRight">
                 <NcButton size="small" type="secondary">
                   <component :is="iconMap.ncMoreVertical" />
                 </NcButton>
                 <template #overlay>
                   <NcMenu variant="small">
-                    <template v-if="isAdminPanel">
-                      <NcMenuItem data-testid="nc-admin-org-user-delete">
-                        <GeneralIcon icon="signout" />
-                        <span>{{ $t('labels.signOutUser') }}</span>
-                      </NcMenuItem>
+                    <NcMenuItemCopyId
+                      :id="record.id"
+                      :tooltip="$t('labels.clickToCopyUserID')"
+                      :label="
+                        $t('labels.userIdColon', {
+                          userId: record.id,
+                        })
+                      "
+                    />
 
+                    <template v-if="isOwnerOrCreator || record.id === user.id">
                       <NcDivider />
-                    </template>
-                    <NcTooltip :disabled="!isOnlyOneOwner || record.roles !== WorkspaceUserRoles.OWNER">
-                      <template #title>
-                        {{ $t('tooltip.leaveWorkspace') }}
+
+                      <template v-if="isAdminPanel">
+                        <NcMenuItem data-testid="nc-admin-org-user-delete">
+                          <GeneralIcon icon="signout" />
+                          <span>{{ $t('labels.signOutUser') }}</span>
+                        </NcMenuItem>
+
+                        <NcDivider />
                       </template>
-                      <NcMenuItem
-                        :disabled="!isDeleteOrUpdateAllowed(record)"
-                        danger
-                        @click="removeCollaborator(record.id, currentWorkspace?.id)"
-                      >
-                        <div v-if="removingCollaboratorMap[record.id]" class="h-4 w-4 flex items-center justify-center">
-                          <GeneralLoader class="!flex-none !text-current" />
-                        </div>
-                        <GeneralIcon v-else icon="delete" />
-                        {{ record.id === user.id ? t('activity.leaveWorkspace') : t('activity.removeMember') }}
-                      </NcMenuItem>
-                    </NcTooltip>
+                      <NcTooltip :disabled="!isOnlyOneOwner || record.roles !== WorkspaceUserRoles.OWNER">
+                        <template #title>
+                          {{ $t('tooltip.leaveWorkspace') }}
+                        </template>
+                        <NcMenuItem
+                          :disabled="!isDeleteOrUpdateAllowed(record)"
+                          danger
+                          @click="removeCollaborator(record.id, currentWorkspace?.id)"
+                        >
+                          <div v-if="removingCollaboratorMap[record.id]" class="h-4 w-4 flex items-center justify-center">
+                            <GeneralLoader class="!flex-none !text-current" />
+                          </div>
+                          <GeneralIcon v-else icon="delete" />
+                          {{ record.id === user.id ? t('activity.leaveWorkspace') : t('activity.removeMember') }}
+                        </NcMenuItem>
+                      </NcTooltip>
+                    </template>
                   </NcMenu>
                 </template>
               </NcDropdown>

packages/nc-gui/ee/components/account/Profile.vue

@@ -8,6 +8,8 @@ const { t } = useI18n()
 const isErrored = ref(false)
 const isProfileUpdating = ref(false)
 
+const copyBtnRef = ref()
+
 const form = ref<{
   title: string
   email: string
@@ -185,7 +187,26 @@ const onCancel = () => {
 
                   <div class="flex-1 flex flex-col gap-4">
                     <div>
-                      <div class="text-nc-content-gray mb-2" data-rec="true">{{ $t('general.name') }}</div>
+                      <div class="flex items-center gap-1.5 justify-between mb-2">
+                        <div class="text-nc-content-gray" data-rec="true">{{ $t('general.name') }}</div>
+                        <NcTooltip v-if="user" :title="$t('labels.clickToCopyUserID')" placement="top" hide-on-click class="flex">
+                          <div
+                            data-rec="true"
+                            class="flex items-center gap-1.5 text-bodyDefaultSm text-nc-content-gray-subtle2 cursor-pointer"
+                            @click="copyBtnRef?.copyContent()"
+                          >
+                            {{ $t('labels.userIdColon', { userId: user?.id }) }}
+
+                            <GeneralCopyButton
+                              ref="copyBtnRef"
+                              type="text"
+                              size="xxsmall"
+                              :content="user?.id"
+                              :show-toast="false"
+                            />
+                          </div>
+                        </NcTooltip>
+                      </div>
                       <a-form-item name="title" :rules="formRules.title" class="!my-0">
                         <a-input
                           v-model:value="form.title"

packages/nc-gui/lang/en.json

@@ -1224,6 +1224,7 @@
     "tokenLimit": "Only one token per user is allowed",
     "duplicateAttachment": "File with name {filename} already attached",
     "workspaceId": "WORKSPACE ID: {workspaceId}",
+    "userIdColon": "USER ID: {userId}",
     "tableIdColon": "TABLE ID: {tableId}",
     "baseIdColon": "BASE ID: {baseId}",
     "scriptIdColon": "SCRIPT ID: {scriptId}",
@@ -1269,6 +1270,7 @@
     "forRole": "for role",
     "clickToCopy": "Click to copy",
     "clickToCopyWorkspaceID": "Click to copy Workspace ID",
+    "clickToCopyUserID": "Click to copy User ID",
     "clickToCopyTableID": "Click to copy Table ID",
     "clickToCopyBaseID": "Click to copy Base ID",
     "clickToCopyScriptID": "Click to copy Script ID",