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) {
+    &.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()) {
+        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',
 }

web/satellite/static/images/team/clock.svg

@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M10 1C14.9706 1 19 5.02944 19 10C19 14.9706 14.9706 19 10 19C5.02944 19 1 14.9706 1 10C1 5.02944 5.02944 1 10 1ZM10 2.65C5.94071 2.65 2.65 5.94071 2.65 10C2.65 14.0593 5.94071 17.35 10 17.35C14.0593 17.35 17.35 14.0593 17.35 10C17.35 5.94071 14.0593 2.65 10 2.65ZM10.075 4.45C10.5195 4.45 10.8819 4.80157 10.8993 5.24182L10.9 5.275L10.9002 9.373H14.398C14.8536 9.373 15.223 9.74237 15.223 10.198C15.223 10.6425 14.8714 11.0049 14.4312 11.0223L14.398 11.023H10.1574C9.98602 11.023 9.82617 10.9724 9.69221 10.8852C9.43851 10.7585 9.26053 10.5004 9.25044 10.1971L9.25011 10.1838L9.25 5.275C9.25 4.81937 9.61937 4.45 10.075 4.45Z" fill="black"/>
+</svg>