Commit f5c6f21f authored by Samantha Ming's avatar Samantha Ming

Add web ide button to repo blob header

Part of an issue that convert Repo Blob from HAML to Vue:

https://gitlab.com/gitlab-org/gitlab/-/issues/323210
parent 788490c2
......@@ -126,7 +126,10 @@ export default {
@viewer-changed="switchViewer"
>
<template #actions>
<blob-header-edit :edit-path="blobInfo.editBlobPath" />
<blob-header-edit
:edit-path="blobInfo.editBlobPath"
:web-ide-path="blobInfo.ideEditPath"
/>
</template>
</blob-header>
<blob-content
......
......@@ -5,6 +5,7 @@ import { __ } from '~/locale';
export default {
i18n: {
edit: __('Edit'),
webIde: __('Web IDE'),
},
components: {
GlButton,
......@@ -14,12 +15,22 @@ export default {
type: String,
required: true,
},
webIdePath: {
type: String,
required: true,
},
},
};
</script>
<template>
<gl-button category="primary" variant="confirm" class="gl-mr-3" :href="editPath">
{{ $options.i18n.edit }}
</gl-button>
<div>
<gl-button class="gl-mr-2" category="primary" variant="confirm" :href="editPath">
{{ $options.i18n.edit }}
</gl-button>
<gl-button class="gl-mr-3" category="primary" variant="confirm" :href="webIdePath">
{{ $options.i18n.webIde }}
</gl-button>
</div>
</template>
......@@ -12,6 +12,7 @@ query getBlobInfo($projectPath: ID!, $filePath: String!) {
fileType
path
editBlobPath
ideEditPath
storedExternally
rawPath
replacePath
......
......@@ -162,15 +162,22 @@ describe('Blob content viewer component', () => {
});
describe('BlobHeader action slot', () => {
it('renders BlobHeaderEdit button in simple viewer', async () => {
const { ideEditPath, editBlobPath } = simpleMockData;
it('renders BlobHeaderEdit buttons in simple viewer', async () => {
fullFactory({
mockData: { blobInfo: simpleMockData },
stubs: {
BlobContent: true,
},
});
await nextTick();
expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit');
expect(findBlobHeaderEdit().props()).toMatchObject({
editPath: editBlobPath,
webIdePath: ideEditPath,
});
});
it('renders BlobHeaderEdit button in rich viewer', async () => {
......@@ -180,8 +187,13 @@ describe('Blob content viewer component', () => {
BlobContent: true,
},
});
await nextTick();
expect(findBlobHeaderEdit().props('editPath')).toEqual('some_file.js/edit');
expect(findBlobHeaderEdit().props()).toMatchObject({
editPath: editBlobPath,
webIdePath: ideEditPath,
});
});
});
});
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import BlobHeaderEdit from '~/repository/components/blob_header_edit.vue';
const DEFAULT_PROPS = {
editPath: 'some_file.js/edit',
webIdePath: 'some_file.js/ide/edit',
};
describe('BlobHeaderEdit component', () => {
let wrapper;
const createComponent = (props = {}) => {
wrapper = shallowMount(BlobHeaderEdit, {
propsData: {
...DEFAULT_PROPS,
...props,
},
});
};
afterEach(() => {
wrapper.destroy();
wrapper = null;
});
const findButtons = () => wrapper.findAll(GlButton);
const findEditButton = () => findButtons().at(0);
const findWebIdeButton = () => findButtons().at(1);
it('renders component', () => {
createComponent();
const { editPath, webIdePath } = DEFAULT_PROPS;
expect(wrapper.props()).toMatchObject({
editPath,
webIdePath,
});
});
it('renders both buttons', () => {
createComponent();
expect(findButtons()).toHaveLength(2);
});
it('renders the Edit button', () => {
createComponent();
expect(findEditButton().attributes('href')).toBe(DEFAULT_PROPS.editPath);
expect(findEditButton().text()).toBe('Edit');
expect(findEditButton()).not.toBeDisabled();
});
it('renders the Web IDE button', () => {
createComponent();
expect(findWebIdeButton().attributes('href')).toBe(DEFAULT_PROPS.webIdePath);
expect(findWebIdeButton().text()).toBe('Web IDE');
expect(findWebIdeButton()).not.toBeDisabled();
});
});
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