diff options
Diffstat (limited to 'app/assets/javascripts/environments/components/environment_item.vue')
-rw-r--r-- | app/assets/javascripts/environments/components/environment_item.vue | 68 |
1 files changed, 43 insertions, 25 deletions
diff --git a/app/assets/javascripts/environments/components/environment_item.vue b/app/assets/javascripts/environments/components/environment_item.vue index cfe35d26b94..7ffe8140a21 100644 --- a/app/assets/javascripts/environments/components/environment_item.vue +++ b/app/assets/javascripts/environments/components/environment_item.vue @@ -1,12 +1,20 @@ <script> -import { GlDropdown, GlTooltipDirective, GlIcon, GlLink, GlSprintf, GlBadge } from '@gitlab/ui'; +import { + GlDropdown, + GlTooltipDirective, + GlIcon, + GlLink, + GlSprintf, + GlBadge, + GlAvatar, + GlAvatarLink, +} from '@gitlab/ui'; import { isEmpty } from 'lodash'; import { convertObjectPropsToCamelCase } from '~/lib/utils/common_utils'; import { __, s__, sprintf } from '~/locale'; import CiIcon from '~/vue_shared/components/ci_icon.vue'; import CommitComponent from '~/vue_shared/components/commit.vue'; import TooltipOnTruncate from '~/vue_shared/components/tooltip_on_truncate/tooltip_on_truncate.vue'; -import UserAvatarLink from '~/vue_shared/components/user_avatar/user_avatar_link.vue'; import timeagoMixin from '~/vue_shared/mixins/timeago'; import eventHub from '../event_hub'; import ActionsComponent from './environment_actions.vue'; @@ -41,7 +49,8 @@ export default { StopComponent, TerminalButtonComponent, TooltipOnTruncate, - UserAvatarLink, + GlAvatar, + GlAvatarLink, CiIcon, }, directives: { @@ -649,22 +658,27 @@ export default { class="table-section deployment-column d-none d-md-block" :class="tableData.deploy.spacing" role="gridcell" - data-testid="enviornment-deployment-id-cell" + data-testid="environment-deployment-id-cell" > <span v-if="shouldRenderDeploymentID" class="text-break-word"> {{ deploymentInternalId }} </span> - <span v-if="!isFolder && deploymentHasUser" class="text-break-word"> + <span + v-if="!isFolder && deploymentHasUser" + class="text-break-word gl-display-inline-flex gl-align-items-center" + > <gl-sprintf :message="s__('Environments|by %{avatar}')"> <template #avatar> - <user-avatar-link - :link-href="deploymentUser.web_url" - :img-src="deploymentUser.avatar_url" - :img-alt="userImageAltDescription" - :tooltip-text="deploymentUser.username" - class="js-deploy-user-container float-none" - /> + <gl-avatar-link :href="deploymentUser.web_url" class="gl-ml-2"> + <gl-avatar + :src="deploymentUser.avatar_url" + :entity-name="deploymentUser.username" + :title="deploymentUser.username" + :alt="userImageAltDescription" + :size="24" + /> + </gl-avatar-link> </template> </gl-sprintf> </span> @@ -753,20 +767,24 @@ export default { <ci-icon class="gl-mr-2" :status="upcomingDeployment.deployable.status" /> </gl-link> </div> - <div class="gl-display-flex"> - <span v-if="upcomingDeployment.user" class="text-break-word"> - <gl-sprintf :message="s__('Environments|by %{avatar}')"> - <template #avatar> - <user-avatar-link - :link-href="upcomingDeployment.user.web_url" - :img-src="upcomingDeployment.user.avatar_url" - :img-alt="upcomingDeploymentUserImageAltDescription" - :tooltip-text="upcomingDeployment.user.username" + <span + v-if="upcomingDeployment.user" + class="text-break-word gl-display-inline-flex gl-align-items-center gl-mt-2" + > + <gl-sprintf :message="s__('Environments|by %{avatar}')"> + <template #avatar> + <gl-avatar-link :href="upcomingDeployment.user.web_url" class="gl-ml-2"> + <gl-avatar + :src="upcomingDeployment.user.avatar_url" + :alt="upcomingDeploymentUserImageAltDescription" + :entity-name="upcomingDeployment.user.username" + :title="upcomingDeployment.user.username" + :size="24" /> - </template> - </gl-sprintf> - </span> - </div> + </gl-avatar-link> + </template> + </gl-sprintf> + </span> </div> </div> |