Commit 82333885 authored by Jacques Erasmus's avatar Jacques Erasmus

Display correct edit buttons

Display correct edit buttons when viewing binary files
parent b61000b6
...@@ -175,7 +175,7 @@ export default { ...@@ -175,7 +175,7 @@ export default {
> >
<template #actions> <template #actions>
<blob-edit <blob-edit
v-if="!isBinary" :show-edit-button="!isBinary"
:edit-path="blobInfo.editBlobPath" :edit-path="blobInfo.editBlobPath"
:web-ide-path="blobInfo.ideEditPath" :web-ide-path="blobInfo.ideEditPath"
/> />
......
...@@ -15,6 +15,10 @@ export default { ...@@ -15,6 +15,10 @@ export default {
}, },
mixins: [glFeatureFlagsMixin()], mixins: [glFeatureFlagsMixin()],
props: { props: {
showEditButton: {
type: Boolean,
required: true,
},
editPath: { editPath: {
type: String, type: String,
required: true, required: true,
...@@ -30,17 +34,31 @@ export default { ...@@ -30,17 +34,31 @@ export default {
<template> <template>
<web-ide-link <web-ide-link
v-if="glFeatures.consolidatedEditButton" v-if="glFeatures.consolidatedEditButton"
:show-edit-button="showEditButton"
class="gl-mr-3" class="gl-mr-3"
:edit-url="editPath" :edit-url="editPath"
:web-ide-url="webIdePath" :web-ide-url="webIdePath"
:is-blob="true" :is-blob="true"
/> />
<div v-else> <div v-else>
<gl-button class="gl-mr-2" category="primary" variant="confirm" :href="editPath"> <gl-button
v-if="showEditButton"
class="gl-mr-2"
category="primary"
variant="confirm"
:href="editPath"
data-testid="edit"
>
{{ $options.i18n.edit }} {{ $options.i18n.edit }}
</gl-button> </gl-button>
<gl-button class="gl-mr-3" category="primary" variant="confirm" :href="webIdePath"> <gl-button
class="gl-mr-3"
category="primary"
variant="confirm"
:href="webIdePath"
data-testid="web-ide"
>
{{ $options.i18n.webIde }} {{ $options.i18n.webIde }}
</gl-button> </gl-button>
</div> </div>
......
...@@ -309,6 +309,7 @@ describe('Blob content viewer component', () => { ...@@ -309,6 +309,7 @@ describe('Blob content viewer component', () => {
expect(findBlobEdit().props()).toMatchObject({ expect(findBlobEdit().props()).toMatchObject({
editPath: editBlobPath, editPath: editBlobPath,
webIdePath: ideEditPath, webIdePath: ideEditPath,
showEditButton: true,
}); });
}); });
...@@ -326,10 +327,11 @@ describe('Blob content viewer component', () => { ...@@ -326,10 +327,11 @@ describe('Blob content viewer component', () => {
expect(findBlobEdit().props()).toMatchObject({ expect(findBlobEdit().props()).toMatchObject({
editPath: editBlobPath, editPath: editBlobPath,
webIdePath: ideEditPath, webIdePath: ideEditPath,
showEditButton: true,
}); });
}); });
it('does not render BlobHeaderEdit button when viewing a binary file', async () => { it('renders BlobHeaderEdit button for binary files', async () => {
fullFactory({ fullFactory({
mockData: { blobInfo: richMockData, isBinary: true }, mockData: { blobInfo: richMockData, isBinary: true },
stubs: { stubs: {
...@@ -340,7 +342,11 @@ describe('Blob content viewer component', () => { ...@@ -340,7 +342,11 @@ describe('Blob content viewer component', () => {
await nextTick(); await nextTick();
expect(findBlobEdit().exists()).toBe(false); expect(findBlobEdit().props()).toMatchObject({
editPath: editBlobPath,
webIdePath: ideEditPath,
showEditButton: false,
});
}); });
describe('BlobButtonGroup', () => { describe('BlobButtonGroup', () => {
......
...@@ -6,6 +6,7 @@ import WebIdeLink from '~/vue_shared/components/web_ide_link.vue'; ...@@ -6,6 +6,7 @@ import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
const DEFAULT_PROPS = { const DEFAULT_PROPS = {
editPath: 'some_file.js/edit', editPath: 'some_file.js/edit',
webIdePath: 'some_file.js/ide/edit', webIdePath: 'some_file.js/ide/edit',
showEditButton: true,
}; };
describe('BlobEdit component', () => { describe('BlobEdit component', () => {
...@@ -31,8 +32,8 @@ describe('BlobEdit component', () => { ...@@ -31,8 +32,8 @@ describe('BlobEdit component', () => {
}); });
const findButtons = () => wrapper.findAll(GlButton); const findButtons = () => wrapper.findAll(GlButton);
const findEditButton = () => findButtons().at(0); const findEditButton = () => wrapper.find('[data-testid="edit"]');
const findWebIdeButton = () => findButtons().at(1); const findWebIdeButton = () => wrapper.find('[data-testid="web-ide"]');
const findWebIdeLink = () => wrapper.find(WebIdeLink); const findWebIdeLink = () => wrapper.find(WebIdeLink);
it('renders component', () => { it('renders component', () => {
...@@ -77,6 +78,23 @@ describe('BlobEdit component', () => { ...@@ -77,6 +78,23 @@ describe('BlobEdit component', () => {
editUrl, editUrl,
webIdeUrl, webIdeUrl,
isBlob: true, isBlob: true,
showEditButton: true,
});
});
describe('Without Edit button', () => {
const showEditButton = false;
it('renders WebIdeLink component without an edit button', () => {
createComponent(true, { showEditButton });
expect(findWebIdeLink().props()).toMatchObject({ showEditButton });
});
it('does not render an Edit button', () => {
createComponent(false, { showEditButton });
expect(findEditButton().exists()).toBe(false);
}); });
}); });
}); });
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