From 25c21f03c33c65f9b52ea92d986fb19951e5025e Mon Sep 17 00:00:00 2001
From: Jeremy Wharton <jeremy.e.wharton@gmail.com>
Date: Thu, 22 Jun 2023 00:42:39 -0500
Subject: [PATCH] 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
---
 .../src/components/common/TableItem.vue       |  6 ++++-
 .../project/ProjectOwnershipTag.vue           | 26 ++++++++++++++-----
 .../components/team/ProjectMemberListItem.vue |  8 ++++--
 web/satellite/src/types/projectMembers.ts     |  1 +
 web/satellite/static/images/team/clock.svg    |  3 +++
 5 files changed, 34 insertions(+), 10 deletions(-)
 create mode 100644 web/satellite/static/images/team/clock.svg

diff --git a/web/satellite/src/components/common/TableItem.vue b/web/satellite/src/components/common/TableItem.vue
index d3932f584..eb59e3dc0 100644
--- a/web/satellite/src/components/common/TableItem.vue
+++ b/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);
 }
diff --git a/web/satellite/src/components/project/ProjectOwnershipTag.vue b/web/satellite/src/components/project/ProjectOwnershipTag.vue
index e67d0f6d9..5c9a95964 100644
--- a/web/satellite/src/components/project/ProjectOwnershipTag.vue
+++ b/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>
diff --git a/web/satellite/src/components/team/ProjectMemberListItem.vue b/web/satellite/src/components/team/ProjectMemberListItem.vue
index 2e371f51e..ca39d944b 100644
--- a/web/satellite/src/components/team/ProjectMemberListItem.vue
+++ b/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;
     }
diff --git a/web/satellite/src/types/projectMembers.ts b/web/satellite/src/types/projectMembers.ts
index ffe2b61be..667aa759a 100644
--- a/web/satellite/src/types/projectMembers.ts
+++ b/web/satellite/src/types/projectMembers.ts
@@ -292,4 +292,5 @@ export enum ProjectRole {
     Member = 'Member',
     Owner = 'Owner',
     Invited = 'Invited',
+    InviteExpired = 'Invite Expired',
 }
diff --git a/web/satellite/static/images/team/clock.svg b/web/satellite/static/images/team/clock.svg
new file mode 100644
index 000000000..f5c5f18dc
--- /dev/null
+++ b/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>