web/satellite: add project role for expired invitations

Pending project members whose invitations have expired now appear with
the "Invite Expired" role in the Team page.

References #5752

Change-Id: Ic91289618ee02e65de29e986fa3205eccf39b267

web/satellite/src/components/common/TableItem.vue

@@ -27,7 +27,7 @@
                 </p>
                 <p v-else :class="{primary: index === 0}" :title="val" @click.stop="(e) => cellContentClicked(index, e)">
                     <middle-truncate v-if="keyVal === 'fileName'" :text="val" />
-                    <project-ownership-tag v-else-if="keyVal === 'role'" :no-icon="itemType !== 'project' && val !== ProjectRole.Invited" :role="val" />
+                    <project-ownership-tag v-else-if="keyVal === 'role'" :no-icon="!isProjectRoleIconShown(val)" :role="val" />
                     <span v-else>{{ val }}</span>
                 </p>
                 <div v-if="showBucketGuide(index)" class="animation">
@@ -92,6 +92,10 @@ const customIconClasses = computed(() => {
     return classes;
 });
 
+function isProjectRoleIconShown(role: ProjectRole) {
+    return props.itemType === 'project' || role === ProjectRole.Invited || role === ProjectRole.InviteExpired;
+}
+
 function selectClicked(event: Event): void {
     emit('selectClicked', event);
 }

web/satellite/src/components/project/ProjectOwnershipTag.vue

@@ -2,9 +2,8 @@
 // See LICENSE for copying information.
 
 <template>
-    <div class="tag" :class="{[role.toLowerCase()]: true}">
+    <div class="tag" :class="{[role.toLowerCase().replaceAll(' ', '-')]: true}">
         <component :is="icon" v-if="!noIcon" class="tag__icon" />
-
         <span class="tag__text">{{ role }}</span>
     </div>
 </template>
@@ -16,6 +15,7 @@ import { ProjectRole } from '@/types/projectMembers';
 
 import BoxIcon from '@/../static/images/navigation/project.svg';
 import InviteIcon from '@/../static/images/navigation/quickStart.svg';
+import ClockIcon from '@/../static/images/team/clock.svg';
 
 const props = withDefaults(defineProps<{
     role: ProjectRole,
@@ -26,7 +26,14 @@ const props = withDefaults(defineProps<{
 });
 
 const icon = computed((): string => {
-    return props.role === ProjectRole.Invited ? InviteIcon : BoxIcon;
+    switch (props.role) {
+    case ProjectRole.Invited:
+        return InviteIcon;
+    case ProjectRole.InviteExpired:
+        return ClockIcon;
+    default:
+        return BoxIcon;
+    }
 });
 
 </script>
@@ -65,13 +72,18 @@ const icon = computed((): string => {
         }
     }
 
-    &.invited {
+    &.invited,
+    &.invite-expired {
         color: var(--c-grey-6);
         border-color: var(--c-grey-4);
+    }
 
-        :deep(path) {
-            fill: var(--c-yellow-3);
-        }
+    &.invited :deep(path) {
+        fill: var(--c-yellow-3);
+    }
+
+    &.invite-expired :deep(path) {
+        fill: var(--c-grey-4);
     }
 }
 </style>

web/satellite/src/components/team/ProjectMemberListItem.vue

@@ -16,7 +16,7 @@
 <script setup lang="ts">
 import { computed } from 'vue';
 
-import { ProjectMember, ProjectMemberItemModel, ProjectRole } from '@/types/projectMembers';
+import { ProjectInvitationItemModel, ProjectMember, ProjectMemberItemModel, ProjectRole } from '@/types/projectMembers';
 import { useResize } from '@/composables/resize';
 import { useProjectsStore } from '@/store/modules/projectsStore';
 
@@ -38,7 +38,11 @@ const isProjectOwner = computed((): boolean => {
 const itemToRender = computed((): { [key: string]: unknown } => {
     let role: ProjectRole = ProjectRole.Member;
     if (props.model.isPending()) {
-        role = ProjectRole.Invited;
+        if ((props.model as ProjectInvitationItemModel).expired) {
+            role = ProjectRole.InviteExpired;
+        } else {
+            role = ProjectRole.Invited;
+        }
     } else if (isProjectOwner.value) {
         role = ProjectRole.Owner;
     }

web/satellite/src/types/projectMembers.ts

@@ -292,4 +292,5 @@ export enum ProjectRole {
     Member = 'Member',
     Owner = 'Owner',
     Invited = 'Invited',
+    InviteExpired = 'Invite Expired',
 }