Nc fix/show inherited role in project members table (#9134)

* fix(nc-gui): show inherted workspace role at project level

* fix(nc-gui): update project members table role selector

* fix(nc-gui): rebase conflict issue

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

@@ -357,6 +357,7 @@ const customRow = (record: Record<string, any>) => ({
                   ? WorkspaceRolesToProjectRoles[record.workspace_roles]
                   : null
               "
+              show-inherit
               :description="false"
               :on-role-change="(role) => updateCollaborator(record, role as ProjectRoles)"
             />

packages/nc-gui/components/roles/Selector.vue

@@ -5,23 +5,26 @@ import type { SelectValue } from 'ant-design-vue/es/select'
 
 const props = withDefaults(
   defineProps<{
-    border?: boolean
     role: keyof typeof RoleLabels
     roles: (keyof typeof RoleLabels)[]
+    onRoleChange: (role: keyof typeof RoleLabels) => void
+    border?: boolean
     description?: boolean
     inherit?: string
-    onRoleChange: (role: keyof typeof RoleLabels) => void
     size?: 'sm' | 'md' | 'lg'
+    showInherit?: boolean
   }>(),
   {
     border: true,
     description: true,
     size: 'sm',
+    showInherit: false,
   },
 )
 
 const roleRef = toRef(props, 'role')
 const inheritRef = toRef(props, 'inherit')
+const showInherit = toRef(props, 'showInherit')
 const descriptionRef = toRef(props, 'description')
 const isDropdownOpen = ref(false)
 const dropdownRef = ref(null)
@@ -36,14 +39,38 @@ function onChangeRole(val: SelectValue) {
 </script>
 
 <template>
-  <div ref="dropdownRef" size="lg" class="nc-roles-selector relative" @click="isDropdownOpen = !isDropdownOpen">
-    <RolesBadge :border="false" :inherit="inheritRef === role" :role="roleRef" :size="sizeRef" clickable data-testid="roles" />
+  <div
+    ref="dropdownRef"
+    size="lg"
+    class="nc-roles-selector relative flex items-center gap-3"
+    @click="isDropdownOpen = !isDropdownOpen"
+  >
+    <RolesBadge
+      :border="false"
+      :inherit="inheritRef === role"
+      :role="roleRef"
+      :size="sizeRef"
+      clickable
+      data-testid="roles"
+      class="flex-none"
+    />
+    <NcTooltip
+      v-if="showInherit && isEeUI && inheritRef === role"
+      class="uppercase text-[10px] leading-4 text-gray-500"
+      placement="bottom"
+    >
+      <template #title>
+        {{ $t('tooltip.roleInheritedFromWorkspace') }}
+      </template>
+      {{ $t('objects.workspace') }}
+    </NcTooltip>
+
     <a-select
       :value="roleRef"
       :open="isDropdownOpen"
       :dropdown-match-select-width="false"
       dropdown-class-name="!rounded-lg !h-fit max-w-[350px] nc-role-selector-dropdown"
-      class="py-1 !absolute top-0 left-0 w-full h-full z-10 text-xs opacity-0"
+      class="py-1 !absolute top-0 left-0 w-20 h-full z-10 text-xs opacity-0"
       @change="onChangeRole"
     >
       <a-select-option v-for="rl in props.roles" :key="rl" v-e="['c:workspace:settings:user-role-change']" :value="rl">

packages/nc-gui/lang/en.json

@@ -1165,7 +1165,8 @@
     "changeIconColour": "Change icon colour",
     "preFillFormInfo": "To get a prefilled link, make sure you’ve filled the necessary fields in the form view builder.",
     "surveyFormInfo": "Form mode with one field per page",
-    "useFieldEditMenuToConfigFieldType": "Use field edit menu for type conversions after file is imported"
+    "useFieldEditMenuToConfigFieldType": "Use field edit menu for type conversions after file is imported",
+    "roleInheritedFromWorkspace": "Role inherited from workspace"
   },
   "placeholder": {
     "selectSlackChannels": "Select Slack channels",