Skip to content
Snippets Groups Projects
Verified Commit e3f654d3 authored by Enrique Alcántara's avatar Enrique Alcántara
Browse files

Remove switch to new IDE right pane 

Remove the right pane that informs
the user about the new VSCode-based
IDE in the Web IDE
parent 2c72c13e
No related branches found
No related tags found
1 merge request!105722Remove switch to new IDE right pane
Hide whitespace changes
Inline Side-by-side
Showing
with 2 additions and 403 deletions
app/assets/javascripts/ide/components/panes/right.vue
+ 2
− 15
View file @ e3f654d3
......@@ -7,7 +7,6 @@ import PipelinesList from '../pipelines/list.vue';
import Clientside from '../preview/clientside.vue';
import ResizablePanel from '../resizable_panel.vue';
import TerminalView from '../terminal/view.vue';
import SwitchEditorsView from '../switch_editors/switch_editors_view.vue';
import CollapsibleSidebar from './collapsible_sidebar.vue';
// Need to add the width of the nav buttons since the resizable container contains those as well
......@@ -21,7 +20,7 @@ export default {
},
computed: {
...mapState('terminal', { isTerminalVisible: 'isVisible' }),
...mapState(['currentMergeRequestId', 'clientsidePreviewEnabled', 'canUseNewWebIde']),
...mapState(['currentMergeRequestId', 'clientsidePreviewEnabled']),
...mapGetters(['packageJson']),
...mapState('rightPane', ['isOpen']),
showLivePreview() {
......@@ -29,12 +28,6 @@ export default {
},
rightExtensionTabs() {
return [
{
show: this.canUseNewWebIde,
title: __('Switch editors'),
views: [{ component: SwitchEditorsView, ...rightSidebarViews.switchEditors }],
icon: 'bullhorn',
},
{
show: true,
title: __('Pipelines'),
......@@ -60,7 +53,6 @@ export default {
},
},
WIDTH,
SWITCH_EDITORS_VIEW_NAME: rightSidebarViews.switchEditors.name,
};
</script>
......@@ -72,11 +64,6 @@ export default {
:min-size="$options.WIDTH"
:resizable="isOpen"
>
<collapsible-sidebar
class="gl-w-full"
:extension-tabs="rightExtensionTabs"
:init-open-view="$options.SWITCH_EDITORS_VIEW_NAME"
side="right"
/>
<collapsible-sidebar class="gl-w-full" :extension-tabs="rightExtensionTabs" side="right" />
</resizable-panel>
</template>
app/assets/javascripts/ide/components/switch_editors/switch_editors_view.vue deleted 100644 → 0
+ 0
− 103
View file @ 2c72c13e
<script>
import { GlButton, GlEmptyState, GlLink } from '@gitlab/ui';
import { mapState } from 'vuex';
import { createAlert } from '~/flash';
import { logError } from '~/lib/logger';
import axios from '~/lib/utils/axios_utils';
import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
import { ignoreWhilePending } from '~/lib/utils/ignore_while_pending';
import { s__, __ } from '~/locale';
import eventHub from '../../eventhub';
export const MSG_DESCRIPTION = s__('WebIDE|You are invited to experience the new Web IDE.');
export const MSG_BUTTON_TEXT = s__('WebIDE|Switch to new Web IDE');
export const MSG_LEARN_MORE = __('Learn more');
export const MSG_TITLE = s__('WebIDE|Ready for something new?');
export const MSG_CONFIRM = s__(
'WebIDE|Are you sure you want to switch editors? You will lose any unsaved changes.',
);
export const MSG_ERROR_ALERT = s__(
'WebIDE|Something went wrong while updating the user preferences. Please see developer console for details.',
);
export default {
components: {
GlButton,
GlEmptyState,
GlLink,
},
data() {
return {
loading: false,
};
},
computed: {
...mapState(['switchEditorSvgPath', 'links', 'userPreferencesPath']),
},
methods: {
async submitSwitch() {
const confirmed = await confirmAction(MSG_CONFIRM, {
primaryBtnText: __('Switch editors'),
cancelBtnText: __('Cancel'),
});
if (!confirmed) {
return;
}
try {
await axios.put(this.userPreferencesPath, {
user: { use_legacy_web_ide: false },
});
} catch (e) {
// why: We do not want to translate console logs
// eslint-disable-next-line @gitlab/require-i18n-strings
logError('Error while updating user preferences', e);
createAlert({
message: MSG_ERROR_ALERT,
});
return;
}
eventHub.$emit('skip-beforeunload');
window.location.reload();
},
// what: ignoreWhilePending prevents double confirmation boxes
onSwitchClicked: ignoreWhilePending(async function onSwitchClicked() {
this.loading = true;
try {
await this.submitSwitch();
} finally {
this.loading = false;
}
}),
},
MSG_TITLE,
MSG_DESCRIPTION,
MSG_BUTTON_TEXT,
MSG_LEARN_MORE,
};
</script>
<template>
<div class="gl-h-full gl-display-flex gl-flex-direction-column gl-justify-content-center">
<gl-empty-state :svg-path="switchEditorSvgPath" :svg-height="150" :title="$options.MSG_TITLE">
<template #description>
<span>{{ $options.MSG_DESCRIPTION }}</span>
<gl-link :href="links.newWebIDEHelpPagePath">{{ $options.MSG_LEARN_MORE }}</gl-link
>.
</template>
<template #actions>
<gl-button
category="primary"
variant="confirm"
:loading="loading"
@click="onSwitchClicked"
>{{ $options.MSG_BUTTON_TEXT }}</gl-button
>
</template>
</gl-empty-state>
</div>
</template>
app/assets/javascripts/ide/constants.js
+ 0
− 1
View file @ e3f654d3
......@@ -61,7 +61,6 @@ export const leftSidebarViews = {
};
export const rightSidebarViews = {
switchEditors: { name: 'switch-editors', keepAlive: true },
pipelines: { name: 'pipelines-list', keepAlive: true },
jobsDetail: { name: 'jobs-detail', keepAlive: false },
mergeRequestInfo: { name: 'merge-request-info', keepAlive: true },
......
app/assets/javascripts/ide/index.js
+ 0
− 1
View file @ e3f654d3
......@@ -73,7 +73,6 @@ export const initLegacyWebIDE = (el, options = {}) => {
codesandboxBundlerUrl: el.dataset.codesandboxBundlerUrl,
environmentsGuidanceAlertDismissed: !parseBoolean(el.dataset.enableEnvironmentsGuidance),
previewMarkdownPath: el.dataset.previewMarkdownPath,
canUseNewWebIde: parseBoolean(el.dataset.canUseNewWebIde),
userPreferencesPath: el.dataset.userPreferencesPath,
});
},
......
app/assets/javascripts/ide/stores/state.js
+ 0
− 1
View file @ e3f654d3
......@@ -34,5 +34,4 @@ export default () => ({
environmentsGuidanceAlertDetected: false,
previewMarkdownPath: '',
userPreferencesPath: '',
canUseNewWebIde: false,
});
locale/gitlab.pot
+ 0
− 18
View file @ e3f654d3
......@@ -40226,9 +40226,6 @@ msgstr ""
msgid "Switch branch/tag"
msgstr ""
 
msgid "Switch editors"
msgstr ""
msgid "Switch to GitLab Next"
msgstr ""
 
......@@ -45963,9 +45960,6 @@ msgstr ""
msgid "WebAuthn only works with HTTPS-enabled websites. Contact your administrator for more details."
msgstr ""
 
msgid "WebIDE|Are you sure you want to switch editors? You will lose any unsaved changes."
msgstr ""
msgid "WebIDE|Fork project"
msgstr ""
 
......@@ -45981,24 +45975,12 @@ msgstr ""
msgid "WebIDE|Quickly and easily edit multiple files in your project. Press . to open"
msgstr ""
 
msgid "WebIDE|Ready for something new?"
msgstr ""
msgid "WebIDE|Something went wrong while updating the user preferences. Please see developer console for details."
msgstr ""
msgid "WebIDE|Switch to new Web IDE"
msgstr ""
msgid "WebIDE|This project does not accept unsigned commits."
msgstr ""
 
msgid "WebIDE|This project does not accept unsigned commits. You can’t commit changes through the Web IDE."
msgstr ""
 
msgid "WebIDE|You are invited to experience the new Web IDE."
msgstr ""
msgid "WebIDE|You can’t edit files directly in this project. Fork this project and submit a merge request with your changes."
msgstr ""
 
spec/features/ide_spec.rb
+ 0
− 17
View file @ e3f654d3
......@@ -46,10 +46,6 @@
end
it_behaves_like 'legacy Web IDE'
it 'does not show switch button' do
expect(page).not_to have_button('Switch to new Web IDE')
end
end
context 'with vscode feature flag on and use_legacy_web_ide=true' do
......@@ -61,19 +57,6 @@
end
it_behaves_like 'legacy Web IDE'
describe 'when user switches to new Web IDE' do
before do
click_button('Switch to new Web IDE')
# Confirm modal
page.within('#confirmationModal') do
click_button('Switch editors')
end
end
it_behaves_like 'new Web IDE'
end
end
describe 'sub-groups' do
......
spec/frontend/ide/components/panes/right_spec.js
+ 0
− 33
View file @ e3f654d3
......@@ -3,16 +3,12 @@ import Vue, { nextTick } from 'vue';
import Vuex from 'vuex';
import CollapsibleSidebar from '~/ide/components/panes/collapsible_sidebar.vue';
import RightPane from '~/ide/components/panes/right.vue';
import SwitchEditorsView from '~/ide/components/switch_editors/switch_editors_view.vue';
import { rightSidebarViews } from '~/ide/constants';
import { createStore } from '~/ide/stores';
import extendStore from '~/ide/stores/extend';
import { __ } from '~/locale';
Vue.use(Vuex);
const SWITCH_EDITORS_VIEW_NAME = 'switch-editors';
describe('ide/components/panes/right.vue', () => {
let wrapper;
let store;
......@@ -45,7 +41,6 @@ describe('ide/components/panes/right.vue', () => {
it('renders collapsible-sidebar', () => {
expect(wrapper.findComponent(CollapsibleSidebar).props()).toMatchObject({
side: 'right',
initOpenView: SWITCH_EDITORS_VIEW_NAME,
});
});
});
......@@ -130,32 +125,4 @@ describe('ide/components/panes/right.vue', () => {
);
});
});
describe('switch editors tab', () => {
beforeEach(() => {
createComponent();
});
it.each`
desc | canUseNewWebIde | expectedShow
${'is shown'} | ${true} | ${true}
${'is not shown'} | ${false} | ${false}
`('with canUseNewWebIde=$canUseNewWebIde, $desc', async ({ canUseNewWebIde, expectedShow }) => {
Object.assign(store.state, { canUseNewWebIde });
await nextTick();
expect(wrapper.findComponent(CollapsibleSidebar).props('extensionTabs')).toEqual(
expect.arrayContaining([
expect.objectContaining({
show: expectedShow,
title: __('Switch editors'),
views: [
{ component: SwitchEditorsView, name: SWITCH_EDITORS_VIEW_NAME, keepAlive: true },
],
}),
]),
);
});
});
});
spec/frontend/ide/components/switch_editors/switch_editors_view_spec.js deleted 100644 → 0
+ 0
− 214
View file @ 2c72c13e
import { GlButton, GlEmptyState, GlLink } from '@gitlab/ui';
import { shallowMount } from '@vue/test-utils';
import MockAdapter from 'axios-mock-adapter';
import waitForPromises from 'helpers/wait_for_promises';
import { useMockLocationHelper } from 'helpers/mock_window_location_helper';
import { createAlert } from '~/flash';
import axios from '~/lib/utils/axios_utils';
import { logError } from '~/lib/logger';
import { __ } from '~/locale';
import { confirmAction } from '~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal';
import SwitchEditorsView, {
MSG_ERROR_ALERT,
MSG_CONFIRM,
MSG_TITLE,
MSG_LEARN_MORE,
MSG_DESCRIPTION,
} from '~/ide/components/switch_editors/switch_editors_view.vue';
import eventHub from '~/ide/eventhub';
import { createStore } from '~/ide/stores';
jest.mock('~/flash');
jest.mock('~/lib/logger');
jest.mock('~/lib/utils/confirm_via_gl_modal/confirm_via_gl_modal');
const TEST_USER_PREFERENCES_PATH = '/test/user-pref/path';
const TEST_SWITCH_EDITOR_SVG_PATH = '/test/switch/editor/path.svg';
const TEST_HREF = '/test/new/web/ide/href';
describe('~/ide/components/switch_editors/switch_editors_view.vue', () => {
useMockLocationHelper();
let store;
let wrapper;
let confirmResolve;
let requestSpy;
let skipBeforeunloadSpy;
let axiosMock;
// region: finders ------------------
const findButton = () => wrapper.findComponent(GlButton);
const findEmptyState = () => wrapper.findComponent(GlEmptyState);
// region: actions ------------------
const triggerSwitchPreference = () => findButton().vm.$emit('click');
const submitConfirm = async (val) => {
confirmResolve(val);
// why: We need to wait for promises for the immediate next lines to be executed
await waitForPromises();
};
const createComponent = () => {
wrapper = shallowMount(SwitchEditorsView, {
store,
stubs: {
GlEmptyState,
},
});
};
// region: test setup ------------------
beforeEach(() => {
// Setup skip-beforeunload side-effect
skipBeforeunloadSpy = jest.fn();
eventHub.$on('skip-beforeunload', skipBeforeunloadSpy);
// Setup request side-effect
requestSpy = jest.fn().mockImplementation(() => new Promise(() => {}));
axiosMock = new MockAdapter(axios);
axiosMock.onPut(TEST_USER_PREFERENCES_PATH).reply(({ data }) => requestSpy(data));
// Setup store
store = createStore();
store.state.userPreferencesPath = TEST_USER_PREFERENCES_PATH;
store.state.switchEditorSvgPath = TEST_SWITCH_EDITOR_SVG_PATH;
store.state.links = {
newWebIDEHelpPagePath: TEST_HREF,
};
// Setup user confirm side-effect
confirmAction.mockImplementation(
() =>
new Promise((resolve) => {
confirmResolve = resolve;
}),
);
});
afterEach(() => {
eventHub.$off('skip-beforeunload', skipBeforeunloadSpy);
axiosMock.restore();
});
// region: tests ------------------
describe('default', () => {
beforeEach(() => {
createComponent();
});
it('render empty state', () => {
expect(findEmptyState().props()).toMatchObject({
svgPath: TEST_SWITCH_EDITOR_SVG_PATH,
svgHeight: 150,
title: MSG_TITLE,
});
});
it('render link', () => {
expect(wrapper.findComponent(GlLink).attributes('href')).toBe(TEST_HREF);
expect(wrapper.findComponent(GlLink).text()).toBe(MSG_LEARN_MORE);
});
it('renders description', () => {
expect(findEmptyState().text()).toContain(MSG_DESCRIPTION);
});
it('is not loading', () => {
expect(findButton().props('loading')).toBe(false);
});
});
describe('when user triggers switch preference', () => {
beforeEach(() => {
createComponent();
triggerSwitchPreference();
});
it('creates a single confirm', () => {
// Call again to ensure that we only show 1 confirm action
triggerSwitchPreference();
expect(confirmAction).toHaveBeenCalledTimes(1);
expect(confirmAction).toHaveBeenCalledWith(MSG_CONFIRM, {
primaryBtnText: __('Switch editors'),
cancelBtnText: __('Cancel'),
});
});
it('starts loading', () => {
expect(findButton().props('loading')).toBe(true);
});
describe('when user cancels confirm', () => {
beforeEach(async () => {
await submitConfirm(false);
});
it('does not make request', () => {
expect(requestSpy).not.toHaveBeenCalled();
});
it('can be triggered again', () => {
triggerSwitchPreference();
expect(confirmAction).toHaveBeenCalledTimes(2);
});
});
describe('when user accepts confirm and response success', () => {
beforeEach(async () => {
requestSpy.mockReturnValue([200, {}]);
await submitConfirm(true);
});
it('does not handle error', () => {
expect(logError).not.toHaveBeenCalled();
expect(createAlert).not.toHaveBeenCalled();
});
it('emits "skip-beforeunload" and reloads', () => {
expect(skipBeforeunloadSpy).toHaveBeenCalledTimes(1);
expect(window.location.reload).toHaveBeenCalledTimes(1);
});
it('calls request', () => {
expect(requestSpy).toHaveBeenCalledTimes(1);
expect(requestSpy).toHaveBeenCalledWith(
JSON.stringify({ user: { use_legacy_web_ide: false } }),
);
});
it('is not loading', () => {
expect(findButton().props('loading')).toBe(false);
});
});
describe('when user accepts confirm and response fails', () => {
beforeEach(async () => {
requestSpy.mockReturnValue([400, {}]);
await submitConfirm(true);
});
it('handles error', () => {
expect(logError).toHaveBeenCalledTimes(1);
expect(logError).toHaveBeenCalledWith(
'Error while updating user preferences',
expect.any(Error),
);
expect(createAlert).toHaveBeenCalledTimes(1);
expect(createAlert).toHaveBeenCalledWith({
message: MSG_ERROR_ALERT,
});
});
it('does not reload', () => {
expect(skipBeforeunloadSpy).not.toHaveBeenCalled();
expect(window.location.reload).not.toHaveBeenCalled();
});
});
});
});
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