Merge pull request #12955 from nocodb/nc-claude/issue-7855-20260126-0910

Nc feat: improve inherit UI with double-lined role display

packages/nc-gui/components/general/Team/Icon.vue

@@ -30,7 +30,7 @@ const props = withDefaults(defineProps<TeamIconProps>(), {
 
 const { size } = toRefs(props)
 
-const { getColor } = useTheme()
+const { getColor: _getColor } = useTheme()
 
 const team = computed(() => {
   return {
@@ -80,6 +80,14 @@ const teamIcon = computed<{
   }
 })
 
+const getColor = (color: string) => {
+  if (color === 'transparent') {
+    return _getColor('var(--nc-bg-default)')
+  }
+
+  return _getColor(color)
+}
+
 const backgroundColor = computed(() => {
   if (props.iconBgColor === 'transparent') {
     return 'transparent'

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

@@ -371,7 +371,7 @@ const getInheritanceInfo = (record: any) => {
     defaultBaseRole: base.value?.default_role,
   })
 
-  if (!effectiveRole || effectiveRole === ProjectRoles.INHERIT || effectiveRole === ProjectRoles.NO_ACCESS) {
+  if (!effectiveRole || effectiveRole === ProjectRoles.INHERIT) {
     return null
   }
 
@@ -734,48 +734,22 @@ onBeforeUnmount(() => {
                 />
               </template>
               <template v-else>
-                <div class="flex items-center gap-2">
+                <div class="flex flex-col gap-1">
                   <RolesBadge
                     :border="false"
-                    :role="getInheritanceInfo(record) ? ProjectRoles.INHERIT : record.roles"
-                    :inherit="!!getInheritanceInfo(record)"
+                    :role="getInheritanceInfo(record) ? getInheritanceInfo(record)?.effectiveRole : record.roles"
                   />
-                  <NcTooltip
+                  <div
                     v-if="isEeUI && getInheritanceInfo(record)"
-                    class="uppercase text-[10px] leading-4 text-nc-content-gray-muted"
-                    placement="bottom"
+                    class="flex items-center gap-1 text-xs text-nc-content-gray-muted"
                   >
-                    <template #title>
-                      <div class="flex flex-col gap-1">
-                        <div>
-                          {{
-                            getInheritanceInfo(record)?.source === 'team'
-                              ? $t('tooltip.roleInheritedFromTeam')
-                              : $t('tooltip.roleInheritedFromWorkspace')
-                          }}
-                        </div>
-                        <div v-if="getInheritanceInfo(record)?.effectiveRole" class="text-xs font-normal">
-                          {{
-                            $t('tooltip.effectiveRole', {
-                              role: $t(`objects.roleType.${getInheritanceInfo(record)?.effectiveRole}`),
-                            })
-                          }}
-                        </div>
-                      </div>
-                    </template>
-                    <div class="flex items-center gap-1">
-                      <RolesBadge
-                        v-if="getInheritanceInfo(record)?.effectiveRole"
-                        :border="false"
-                        :role="getInheritanceInfo(record)?.effectiveRole"
-                        icon-only
-                        nc-badge-class="!px-1"
-                      />
-                      <span>{{
-                        getInheritanceInfo(record)?.source === 'team' ? $t('objects.team') : $t('objects.workspace')
-                      }}</span>
-                    </div>
-                  </NcTooltip>
+                    <GeneralIcon icon="role_inherit" class="h-3 w-3" />
+                    <span>{{
+                      getInheritanceInfo(record)?.source === 'team'
+                        ? $t('tooltip.roleInheritedFromTeam')
+                        : $t('tooltip.roleInheritedFromWorkspace')
+                    }}</span>
+                  </div>
                 </div>
               </template>
             </div>

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

@@ -51,8 +51,8 @@ async function onChangeRole(val: SelectValue) {
 }
 
 const roleSelectorOptions = computed<NcListItemType[]>(() => {
-  return (props.disabledRoles || []).concat(props.roles || []).map(
-    (role: keyof typeof RoleLabels): NcListItemType => ({
+  return (props.disabledRoles || []).concat(props.roles || []).map((role: keyof typeof RoleLabels): NcListItemType => {
+    return {
       value: role,
       label: t(`objects.roleType.${RoleLabels[role]}`),
       description: t(`objects.roleDescription.${role}`),
@@ -60,8 +60,8 @@ const roleSelectorOptions = computed<NcListItemType[]>(() => {
       color: RoleColors[role],
       ncItemDisabled: props.disabledRoles?.includes(role),
       ncItemTooltip: props.disabledRoles?.includes(role) ? props.disabledRolesTooltip?.[role] ?? '' : '',
-    }),
-  )
+    }
+  })
 })
 </script>
 
@@ -73,36 +73,18 @@ const roleSelectorOptions = computed<NcListItemType[]>(() => {
       default-slot-wrapper-class="flex-1 flex items-center gap-3"
       :placement="placement"
     >
-      <RolesBadge
-        :border="false"
-        :inherit="!!inherit && role === ProjectRoles.INHERIT"
-        :role="role"
-        :size="size"
-        clickable
-        data-testid="roles"
-        class="flex-none"
-      />
-      <NcTooltip
-        v-if="showInherit && isEeUI && !!inherit && role === ProjectRoles.INHERIT"
-        class="uppercase text-[10px] leading-4 text-nc-content-gray-muted"
-        placement="bottom"
-        :disabled="isDropdownOpen"
-      >
-        <template #title>
-          <div class="flex flex-col gap-1">
-            <div>
-              {{ inheritSource === 'team' ? $t('tooltip.roleInheritedFromTeam') : $t('tooltip.roleInheritedFromWorkspace') }}
-            </div>
-            <div v-if="effectiveRole" class="text-xs font-normal">
-              {{ $t('tooltip.effectiveRole', { role: $t(`objects.roleType.${effectiveRole}`) }) }}
-            </div>
-          </div>
-        </template>
-        <div class="flex items-center gap-1">
-          <RolesBadge v-if="effectiveRole" :border="false" :role="effectiveRole" icon-only nc-badge-class="!px-1" />
-          <span>{{ inheritSource === 'team' ? $t('objects.team') : $t('objects.workspace') }}</span>
+      <div class="flex flex-col gap-1 cursor-pointer">
+        <RolesBadge data-testid="roles" :border="false" :role="effectiveRole || role" :size="size" clickable class="flex-none" />
+        <div
+          v-if="showInherit && isEeUI && role === ProjectRoles.INHERIT && !!inherit"
+          class="flex items-center gap-1 text-xs text-nc-content-gray-muted"
+        >
+          <GeneralIcon icon="role_inherit" class="h-3 w-3" />
+          <span>{{
+            inheritSource === 'team' ? $t('tooltip.roleInheritedFromTeam') : $t('tooltip.roleInheritedFromWorkspace')
+          }}</span>
         </div>
-      </NcTooltip>
+      </div>
 
       <template #overlay="{ onEsc }">
         <NcList

packages/nc-gui/lang/en.json

@@ -566,7 +566,7 @@
       "editor": "Can add, edit, and delete records, but cannot modify base configurations",
       "commenter": "Can view and comment on records within the base",
       "viewer": "Can only view records within the base",
-      "inherit": "Inherits role from base-level team, or workspace level if no base-level team",
+      "inherit": "Inherits role from base team or workspace team or workspace member",
       "no-access": "No access to this base",
       "super": "Full access to all",
       "org-level-creator": "Can fully configure and edit bases",