Commit a1e25532 authored by Martin Wortschack's avatar Martin Wortschack

Merge branch '198417-remove-design-feature-flag' into 'master'

Remove Geo Designs Feature Flag from Frontend

Closes #198417

See merge request gitlab-org/gitlab!23539
parents ace72713 c47a11f3
<script>
import { mapActions, mapState } from 'vuex';
import { GlLoadingIcon } from '@gitlab/ui';
import glFeatureFlagsMixin from '~/vue_shared/mixins/gl_feature_flags_mixin';
import GeoDesignsFilterBar from './geo_designs_filter_bar.vue';
import GeoDesigns from './geo_designs.vue';
import GeoDesignsEmptyState from './geo_designs_empty_state.vue';
import GeoDesignsDisabled from './geo_designs_disabled.vue';
export default {
name: 'GeoDesignsApp',
......@@ -14,9 +12,7 @@ export default {
GeoDesignsFilterBar,
GeoDesigns,
GeoDesignsEmptyState,
GeoDesignsDisabled,
},
mixins: [glFeatureFlagsMixin()],
props: {
geoSvgPath: {
type: String,
......@@ -35,11 +31,6 @@ export default {
required: true,
},
},
data() {
return {
designsEnabled: Boolean(this.glFeatures.enableGeoDesignSync),
};
},
computed: {
...mapState(['isLoading', 'totalDesigns']),
hasDesigns() {
......@@ -57,23 +48,15 @@ export default {
<template>
<article class="geo-designs-container">
<section v-if="designsEnabled">
<geo-designs-filter-bar />
<gl-loading-icon v-if="isLoading" size="xl" />
<template v-else>
<geo-designs v-if="hasDesigns" />
<geo-designs-empty-state
v-else
:issues-svg-path="issuesSvgPath"
:geo-troubleshooting-link="geoTroubleshootingLink"
/>
</template>
</section>
<geo-designs-disabled
v-else
:geo-svg-path="geoSvgPath"
:geo-troubleshooting-link="geoTroubleshootingLink"
:design-management-link="designManagementLink"
/>
<geo-designs-filter-bar />
<gl-loading-icon v-if="isLoading" size="xl" />
<template v-else>
<geo-designs v-if="hasDesigns" />
<geo-designs-empty-state
v-else
:issues-svg-path="issuesSvgPath"
:geo-troubleshooting-link="geoTroubleshootingLink"
/>
</template>
</article>
</template>
<script>
import { GlEmptyState, GlButton } from '@gitlab/ui';
export default {
name: 'GeoDesignsDisabled',
components: {
GlEmptyState,
GlButton,
},
props: {
geoSvgPath: {
type: String,
required: true,
},
geoTroubleshootingLink: {
type: String,
required: true,
},
designManagementLink: {
type: String,
required: true,
},
},
};
</script>
<template>
<gl-empty-state :title="__('Design Sync Not Enabled')" :svg-path="geoSvgPath">
<template #description>
<div class="text-center">
<p>
{{
__(
'If you believe this page to be an error, check out the links below for more information.',
)
}}
</p>
<div>
<gl-button :href="geoTroubleshootingLink" new-style>{{
__('Geo Troubleshooting')
}}</gl-button>
<gl-button :href="designManagementLink" new-style>{{
__('Design Management')
}}</gl-button>
</div>
</div>
</template>
</gl-empty-state>
</template>
......@@ -3,7 +3,6 @@ import { createLocalVue, shallowMount } from '@vue/test-utils';
import { GlLoadingIcon } from '@gitlab/ui';
import GeoDesignsApp from 'ee/geo_designs/components/app.vue';
import store from 'ee/geo_designs/store';
import GeoDesignsDisabled from 'ee/geo_designs/components/geo_designs_disabled.vue';
import GeoDesigns from 'ee/geo_designs/components/geo_designs.vue';
import GeoDesignsEmptyState from 'ee/geo_designs/components/geo_designs_empty_state.vue';
import GeoDesignsFilterBar from 'ee/geo_designs/components/geo_designs_filter_bar.vue';
......@@ -33,10 +32,6 @@ describe('GeoDesignsApp', () => {
setEndpoint: jest.fn(),
};
const glFeatures = {
enableGeoDesignSync: true,
};
const createComponent = () => {
wrapper = shallowMount(GeoDesignsApp, {
localVue,
......@@ -45,9 +40,6 @@ describe('GeoDesignsApp', () => {
methods: {
...actionSpies,
},
provide: {
glFeatures,
},
});
};
......@@ -56,8 +48,6 @@ describe('GeoDesignsApp', () => {
});
const findGeoDesignsContainer = () => wrapper.find('.geo-designs-container');
const findGeoDesignsEnabledContainer = () => findGeoDesignsContainer().find('section');
const findGeoDesignsDisabled = () => findGeoDesignsContainer().find(GeoDesignsDisabled);
const findGlLoadingIcon = () => findGeoDesignsContainer().find(GlLoadingIcon);
const findGeoDesigns = () => findGeoDesignsContainer().find(GeoDesigns);
const findGeoDesignsEmptyState = () => findGeoDesignsContainer().find(GeoDesignsEmptyState);
......@@ -72,98 +62,68 @@ describe('GeoDesignsApp', () => {
expect(findGeoDesignsContainer().exists()).toBe(true);
});
describe('when designsEnabled = false', () => {
beforeEach(() => {
glFeatures.enableGeoDesignSync = false;
createComponent();
});
it('shows designs disabled component', () => {
expect(findGeoDesignsDisabled().exists()).toBe(true);
});
it('hides designs enabled container', () => {
expect(findGeoDesignsEnabledContainer().exists()).toBe(false);
});
it('renders the filter bar', () => {
expect(findGeoDesignsFilterBar().exists()).toBe(true);
});
describe('when designsEnabled = true', () => {
describe('when isLoading = true', () => {
beforeEach(() => {
glFeatures.enableGeoDesignSync = true;
createComponent();
wrapper.vm.$store.state.isLoading = true;
});
it('hides designs disabled component', () => {
expect(findGeoDesignsDisabled().exists()).toBe(false);
it('hides designs', () => {
expect(findGeoDesigns().exists()).toBe(false);
});
it('shows designs enabled container', () => {
expect(findGeoDesignsEnabledContainer().exists()).toBe(true);
it('hides empty state', () => {
expect(findGeoDesignsEmptyState().exists()).toBe(false);
});
it('renders the filter bar', () => {
expect(findGeoDesignsFilterBar().exists()).toBe(true);
it('shows loader', () => {
expect(findGlLoadingIcon().exists()).toBe(true);
});
});
describe('when isLoading = true', () => {
describe('when isLoading = false', () => {
beforeEach(() => {
wrapper.vm.$store.state.isLoading = false;
});
describe('with designs', () => {
beforeEach(() => {
wrapper.vm.$store.state.isLoading = true;
wrapper.vm.$store.state.designs = MOCK_BASIC_FETCH_DATA_MAP.data;
wrapper.vm.$store.state.totalDesigns = MOCK_BASIC_FETCH_DATA_MAP.total;
});
it('hides designs', () => {
expect(findGeoDesigns().exists()).toBe(false);
it('shows designs', () => {
expect(findGeoDesigns().exists()).toBe(true);
});
it('hides empty state', () => {
expect(findGeoDesignsEmptyState().exists()).toBe(false);
});
it('shows loader', () => {
expect(findGlLoadingIcon().exists()).toBe(true);
it('hides loader', () => {
expect(findGlLoadingIcon().exists()).toBe(false);
});
});
describe('when isLoading = false', () => {
describe('with no designs', () => {
beforeEach(() => {
wrapper.vm.$store.state.isLoading = false;
wrapper.vm.$store.state.designs = [];
wrapper.vm.$store.state.totalDesigns = 0;
});
describe('with designs', () => {
beforeEach(() => {
wrapper.vm.$store.state.designs = MOCK_BASIC_FETCH_DATA_MAP.data;
wrapper.vm.$store.state.totalDesigns = MOCK_BASIC_FETCH_DATA_MAP.total;
});
it('shows designs', () => {
expect(findGeoDesigns().exists()).toBe(true);
});
it('hides empty state', () => {
expect(findGeoDesignsEmptyState().exists()).toBe(false);
});
it('hides loader', () => {
expect(findGlLoadingIcon().exists()).toBe(false);
});
it('hides designs', () => {
expect(findGeoDesigns().exists()).toBe(false);
});
describe('with no designs', () => {
beforeEach(() => {
wrapper.vm.$store.state.designs = [];
wrapper.vm.$store.state.totalDesigns = 0;
});
it('hides designs', () => {
expect(findGeoDesigns().exists()).toBe(false);
});
it('shows empty state', () => {
expect(findGeoDesignsEmptyState().exists()).toBe(true);
});
it('shows empty state', () => {
expect(findGeoDesignsEmptyState().exists()).toBe(true);
});
it('hides loader', () => {
expect(findGlLoadingIcon().exists()).toBe(false);
});
it('hides loader', () => {
expect(findGlLoadingIcon().exists()).toBe(false);
});
});
});
......
import Vuex from 'vuex';
import { createLocalVue, mount } from '@vue/test-utils';
import { GlButton, GlEmptyState } from '@gitlab/ui';
import GeoDesignsDisabled from 'ee/geo_designs/components/geo_designs_disabled.vue';
import store from 'ee/geo_designs/store';
import {
MOCK_GEO_SVG_PATH,
MOCK_GEO_TROUBLESHOOTING_LINK,
MOCK_DESIGN_MANAGEMENT_LINK,
} from '../mock_data';
const localVue = createLocalVue();
localVue.use(Vuex);
describe('GeoDesignsDisabled', () => {
let wrapper;
const propsData = {
geoSvgPath: MOCK_GEO_SVG_PATH,
geoTroubleshootingLink: MOCK_GEO_TROUBLESHOOTING_LINK,
designManagementLink: MOCK_DESIGN_MANAGEMENT_LINK,
};
const createComponent = () => {
wrapper = mount(GeoDesignsDisabled, {
localVue,
store,
propsData,
});
};
afterEach(() => {
wrapper.destroy();
});
const findGlEmptyState = () => wrapper.find(GlEmptyState);
const findGlButton = () => findGlEmptyState().findAll(GlButton);
describe('template', () => {
beforeEach(() => {
createComponent();
});
it('renders GlEmptyState', () => {
expect(findGlEmptyState().exists()).toEqual(true);
});
it('renders 2 GlButtons', () => {
expect(findGlButton().length).toEqual(2);
});
});
});
......@@ -6399,15 +6399,9 @@ msgstr ""
msgid "Deselect all"
msgstr ""
msgid "Design Management"
msgstr ""
msgid "Design Management files and data"
msgstr ""
msgid "Design Sync Not Enabled"
msgstr ""
msgid "DesignManagement|%{current_design} of %{designs_count}"
msgstr ""
......@@ -8528,9 +8522,6 @@ msgstr ""
msgid "Geo Settings"
msgstr ""
msgid "Geo Troubleshooting"
msgstr ""
msgid "Geo allows you to replicate your GitLab instance to other geographical locations."
msgstr ""
......@@ -10012,9 +10003,6 @@ msgstr ""
msgid "If you believe this may be an error, please refer to the %{linkStart}Geo Troubleshooting%{linkEnd} documentation for more information."
msgstr ""
msgid "If you believe this page to be an error, check out the links below for more information."
msgstr ""
msgid "If you lose your recovery codes you can generate new ones, invalidating all previous codes."
msgstr ""
......
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