Commit 66618af0 authored by Jacques Erasmus's avatar Jacques Erasmus

Merge branch '323210-vue-blob-header-consolidated-edit-button' into 'master'

Add consolidated edit buttons to repo blob header

See merge request gitlab-org/gitlab!62753
parents 54fee676 b685ac52
<script>
import { GlButton } from '@gitlab/ui';
import { __ } from '~/locale';
import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
export default {
i18n: {
......@@ -9,7 +11,9 @@ export default {
},
components: {
GlButton,
WebIdeLink,
},
mixins: [glFeatureFlagsMixin()],
props: {
editPath: {
type: String,
......@@ -24,7 +28,14 @@ export default {
</script>
<template>
<div>
<web-ide-link
v-if="glFeatures.consolidatedEditButton"
class="gl-mr-3"
:edit-url="editPath"
:web-ide-url="webIdePath"
:is-blob="true"
/>
<div v-else>
<gl-button class="gl-mr-2" category="primary" variant="confirm" :href="editPath">
{{ $options.i18n.edit }}
</gl-button>
......
......@@ -39,6 +39,7 @@ class Projects::BlobController < Projects::ApplicationController
before_action do
push_frontend_feature_flag(:refactor_blob_viewer, @project, default_enabled: :yaml)
push_frontend_feature_flag(:consolidated_edit_button, @project, default_enabled: :yaml)
end
def new
......
import { GlButton } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import BlobHeaderEdit from '~/repository/components/blob_header_edit.vue';
import WebIdeLink from '~/vue_shared/components/web_ide_link.vue';
const DEFAULT_PROPS = {
editPath: 'some_file.js/edit',
......@@ -10,12 +11,17 @@ const DEFAULT_PROPS = {
describe('BlobHeaderEdit component', () => {
let wrapper;
const createComponent = (props = {}) => {
const createComponent = (consolidatedEditButton = false, props = {}) => {
wrapper = shallowMount(BlobHeaderEdit, {
propsData: {
...DEFAULT_PROPS,
...props,
},
provide: {
glFeatures: {
consolidatedEditButton,
},
},
});
};
......@@ -27,6 +33,7 @@ describe('BlobHeaderEdit component', () => {
const findButtons = () => wrapper.findAll(GlButton);
const findEditButton = () => findButtons().at(0);
const findWebIdeButton = () => findButtons().at(1);
const findWebIdeLink = () => wrapper.find(WebIdeLink);
it('renders component', () => {
createComponent();
......@@ -60,4 +67,16 @@ describe('BlobHeaderEdit component', () => {
expect(findWebIdeButton().text()).toBe('Web IDE');
expect(findWebIdeButton()).not.toBeDisabled();
});
it('renders WebIdeLink component', () => {
createComponent(true);
const { editPath: editUrl, webIdePath: webIdeUrl } = DEFAULT_PROPS;
expect(findWebIdeLink().props()).toMatchObject({
editUrl,
webIdeUrl,
isBlob: true,
});
});
});
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