Commit be8ec236 authored by Tom Quirk's avatar Tom Quirk

Remove deprecated_project_avatar component

This component is no longer used, so we can remove it.

Similarly, one of its dependencies `identicon.vue` is
now no longer used, and we remove it too.
parent 2b5aa792
<script>
import Identicon from '../identicon.vue';
import ProjectAvatarImage from './image.vue';
export default {
name: 'DeprecatedProjectAvatar',
components: {
Identicon,
ProjectAvatarImage,
},
props: {
project: {
type: Object,
required: true,
},
size: {
type: Number,
default: 40,
required: false,
},
},
computed: {
sizeClass() {
return `s${this.size}`;
},
},
};
</script>
<template>
<span :class="sizeClass" class="avatar-container rect-avatar project-avatar">
<project-avatar-image
v-if="project.avatar_url"
:link-href="project.path"
:img-src="project.avatar_url"
:img-alt="project.name"
:img-size="size"
/>
<identicon
v-else
:entity-id="project.id"
:entity-name="project.name"
:size-class="sizeClass"
class="rect-avatar"
/>
</span>
</template>
<script>
/* This is a re-usable vue component for rendering a project avatar that
does not need to link to the project's profile. The image and an optional
tooltip can be configured by props passed to this component.
Sample configuration:
<project-avatar-image
:lazy="true"
:img-src="projectAvatarSrc"
:img-alt="tooltipText"
:tooltip-text="tooltipText"
tooltip-placement="top"
/>
*/
import defaultAvatarUrl from 'images/no_avatar.png';
import { __ } from '~/locale';
import { placeholderImage } from '../../../lazy_loader';
export default {
name: 'ProjectAvatarImage',
props: {
lazy: {
type: Boolean,
required: false,
default: false,
},
imgSrc: {
type: String,
required: false,
default: defaultAvatarUrl,
},
cssClasses: {
type: String,
required: false,
default: '',
},
imgAlt: {
type: String,
required: false,
default: __('project avatar'),
},
size: {
type: Number,
required: false,
default: 20,
},
},
computed: {
// API response sends null when gravatar is disabled and
// we provide an empty string when we use it inside project avatar link.
// In both cases we should render the defaultAvatarUrl
sanitizedSource() {
return this.imgSrc === '' || this.imgSrc === null ? defaultAvatarUrl : this.imgSrc;
},
resultantSrcAttribute() {
return this.lazy ? placeholderImage : this.sanitizedSource;
},
avatarSizeClass() {
return `s${this.size}`;
},
},
};
</script>
<template>
<img
:class="{
lazy: lazy,
[avatarSizeClass]: true,
[cssClasses]: true,
}"
:src="resultantSrcAttribute"
:width="size"
:height="size"
:alt="imgAlt"
:data-src="sanitizedSource"
class="avatar"
/>
</template>
<script>
import { getIdenticonBackgroundClass, getIdenticonTitle } from '~/helpers/avatar_helper';
export default {
props: {
entityId: {
type: [Number, String],
required: true,
},
entityName: {
type: String,
required: true,
},
sizeClass: {
type: String,
required: false,
default: 's40',
},
},
computed: {
identiconBackgroundClass() {
return getIdenticonBackgroundClass(this.entityId);
},
identiconTitle() {
return getIdenticonTitle(this.entityName);
},
},
};
</script>
<template>
<div ref="identicon" :class="[sizeClass, identiconBackgroundClass]" class="avatar identicon">
{{ identiconTitle }}
</div>
</template>
......@@ -45052,9 +45052,6 @@ msgstr ""
msgid "project access tokens"
msgstr ""
msgid "project avatar"
msgstr ""
msgid "project bots cannot be added to other groups / projects"
msgstr ""
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`Identicon entity id is a GraphQL id matches snapshot 1`] = `
<div
class="avatar identicon s40 bg2"
>
E
</div>
`;
exports[`Identicon entity id is a number matches snapshot 1`] = `
<div
class="avatar identicon s40 bg2"
>
E
</div>
`;
import { shallowMount } from '@vue/test-utils';
import IdenticonComponent from '~/vue_shared/components/identicon.vue';
describe('Identicon', () => {
let wrapper;
const defaultProps = {
entityId: 1,
entityName: 'entity-name',
sizeClass: 's40',
};
const createComponent = (props = {}) => {
wrapper = shallowMount(IdenticonComponent, {
propsData: {
...defaultProps,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
describe('entity id is a number', () => {
beforeEach(() => createComponent());
it('matches snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('adds a correct class to identicon', () => {
expect(wrapper.find({ ref: 'identicon' }).classes()).toContain('bg2');
});
});
describe('entity id is a GraphQL id', () => {
beforeEach(() => createComponent({ entityId: 'gid://gitlab/Project/8' }));
it('matches snapshot', () => {
expect(wrapper.element).toMatchSnapshot();
});
it('adds a correct class to identicon', () => {
expect(wrapper.find({ ref: 'identicon' }).classes()).toContain('bg2');
});
});
});
import Vue, { nextTick } from 'vue';
import mountComponent from 'helpers/vue_mount_component_helper';
import { projectData } from 'jest/ide/mock_data';
import { TEST_HOST } from 'spec/test_constants';
import { getFirstCharacterCapitalized } from '~/lib/utils/text_utility';
import ProjectAvatarDefault from '~/vue_shared/components/deprecated_project_avatar/default.vue';
describe('ProjectAvatarDefault component', () => {
const Component = Vue.extend(ProjectAvatarDefault);
let vm;
beforeEach(() => {
vm = mountComponent(Component, {
project: projectData,
});
});
afterEach(() => {
vm.$destroy();
});
it('renders identicon if project has no avatar_url', async () => {
const expectedText = getFirstCharacterCapitalized(projectData.name);
vm.project = {
...vm.project,
avatar_url: null,
};
await nextTick();
const identiconEl = vm.$el.querySelector('.identicon');
expect(identiconEl).not.toBe(null);
expect(identiconEl.textContent.trim()).toEqual(expectedText);
});
it('renders avatar image if project has avatar_url', async () => {
const avatarUrl = `${TEST_HOST}/images/home/nasa.svg`;
vm.project = {
...vm.project,
avatar_url: avatarUrl,
};
await nextTick();
expect(vm.$el.querySelector('.avatar')).not.toBeNull();
expect(vm.$el.querySelector('.identicon')).toBeNull();
expect(vm.$el.querySelector('img')).toHaveAttr('src', avatarUrl);
});
});
Markdown is supported
0%
or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment