diff --git a/app/assets/javascripts/members/components/table/member_activity.vue b/app/assets/javascripts/members/components/table/member_activity.vue index 3b223cb1afa2b111320865ea9f4cbefc1c0d9e24..f84db521963aa816fb3c5f26802712e6c2e81689 100644 --- a/app/assets/javascripts/members/components/table/member_activity.vue +++ b/app/assets/javascripts/members/components/table/member_activity.vue @@ -1,8 +1,12 @@ <script> +import { GlTooltipDirective, GlIcon } from '@gitlab/ui'; import UserDate from '~/vue_shared/components/user_date.vue'; export default { - components: { UserDate }, + components: { UserDate, GlIcon }, + directives: { + GlTooltip: GlTooltipDirective, + }, props: { member: { type: Object, @@ -21,17 +25,35 @@ export default { </script> <template> - <div> - <div v-if="userCreated"> - <strong>{{ s__('Members|User created') }}:</strong> + <div class="gl-display-flex gl-flex-direction-column gl-gap-2"> + <div v-if="userCreated" class="gl-display-flex gl-gap-3"> + <gl-icon + ref="userCreated" + v-gl-tooltip.${userCreated} + class="gl-ml-2 gl-mr-n2 gl-text-gray-500" + name="assignee" + :title="s__('Members|User created')" + /> <user-date :date="userCreated" /> </div> - <div v-if="member.createdAt"> - <strong>{{ s__('Members|Access granted') }}:</strong> + <div v-if="member.createdAt" class="gl-display-flex gl-gap-3"> + <gl-icon + ref="memberCreatedAt" + v-gl-tooltip.${memberCreatedAt} + class="gl-text-gray-500" + name="check" + :title="s__('Members|Access granted')" + /> <user-date :date="member.createdAt" /> </div> - <div v-if="lastActivity"> - <strong>{{ s__('Members|Last activity') }}:</strong> + <div v-if="lastActivity" class="gl-display-flex gl-gap-3"> + <gl-icon + ref="lastActivity" + v-gl-tooltip.${lastActivity} + class="gl-text-gray-500" + name="hourglass" + :title="s__('Members|Last activity')" + /> <user-date :date="lastActivity" /> </div> </div> diff --git a/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap b/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap index 3ad02d3851dd9359671d8f0bd87002c458e12d1e..38d4afb5ffb6763c573e59d00afd9758df71977d 100644 --- a/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap +++ b/spec/frontend/members/components/table/__snapshots__/member_activity_spec.js.snap @@ -1,11 +1,23 @@ // Jest Snapshot v1, https://goo.gl/fbAQLP exports[`MemberActivity with a member that does not have all of the fields renders \`User created\` field 1`] = ` -<div> - <div> - <strong> - Access granted: - </strong> +<div + class="gl-display-flex gl-flex-direction-column gl-gap-2" +> + <div + class="gl-display-flex gl-gap-3" + > + <svg + aria-hidden="true" + class="gl-icon gl-text-gray-500 s16" + data-testid="check-icon" + role="img" + title="Access granted" + > + <use + href="file-mock#check" + /> + </svg> <span> Aug 06, 2020 </span> @@ -14,27 +26,59 @@ exports[`MemberActivity with a member that does not have all of the fields rende `; exports[`MemberActivity with a member that has all fields renders \`User created\`, \`Access granted\`, and \`Last activity\` fields 1`] = ` -<div> - <div> - <strong> - User created: - </strong> +<div + class="gl-display-flex gl-flex-direction-column gl-gap-2" +> + <div + class="gl-display-flex gl-gap-3" + > + <svg + aria-hidden="true" + class="gl-icon gl-ml-2 gl-mr-n2 gl-text-gray-500 s16" + data-testid="assignee-icon" + role="img" + title="User created" + > + <use + href="file-mock#assignee" + /> + </svg> <span> Mar 10, 2022 </span> </div> - <div> - <strong> - Access granted: - </strong> + <div + class="gl-display-flex gl-gap-3" + > + <svg + aria-hidden="true" + class="gl-icon gl-text-gray-500 s16" + data-testid="check-icon" + role="img" + title="Access granted" + > + <use + href="file-mock#check" + /> + </svg> <span> Jul 17, 2020 </span> </div> - <div> - <strong> - Last activity: - </strong> + <div + class="gl-display-flex gl-gap-3" + > + <svg + aria-hidden="true" + class="gl-icon gl-text-gray-500 s16" + data-testid="hourglass-icon" + role="img" + title="Last activity" + > + <use + href="file-mock#hourglass" + /> + </svg> <span> Mar 15, 2022 </span>