Merge branch '5426-fe-web-terminal-empty-state' into 'master'

Add empty and disabled web terminal tab

See merge request gitlab-org/gitlab-ee!8665

app/assets/stylesheets/framework.scss

@@ -7,7 +7,6 @@
 @import 'bootstrap_migration';
 @import 'framework/layout';
 
-@import 'framework/alerts';
 @import 'framework/animations';
 @import 'framework/vue_transitions';
 @import 'framework/avatar';

app/assets/stylesheets/framework/alerts.scss

-.alert-tip {
-  background-color: $theme-gray-100;
-  color: $theme-gray-900;
-}

ee/app/assets/javascripts/ide/components/panes/right.vue

 <script>
+import { __ } from '~/locale';
 import RightPane from '~/ide/components/panes/right.vue';
+import TerminalView from '../terminal/view.vue';
 
 export default {
   name: 'EERightPane',
   components: {
     RightPane,
   },
+  data() {
+    return {
+      // this will come from Vuex store in https://gitlab.com/gitlab-org/gitlab-ee/issues/5426
+      isTerminalEnabled: false,
+    };
+  },
   computed: {
     extensionTabs() {
-      // This is empty for now, but it will be used in: https://gitlab.com/gitlab-org/gitlab-ee/issues/5426
-      return [];
+      return [
+        {
+          show: this.isTerminalEnabled,
+          title: __('Terminal'),
+          views: [{ name: 'terminal', keepAlive: true, component: TerminalView }],
+          icon: 'terminal',
+        },
+      ];
     },
   },
 };

ee/app/assets/javascripts/ide/components/terminal/empty_state.vue

+<script>
+export default {
+  props: {
+    illustrationPath: {
+      type: String,
+      required: false,
+      default: '',
+    },
+  },
+};
+</script>
+
+<template>
+  <div class="text-center">
+    <div v-if="illustrationPath" class="svg-content svg-130"><img :src="illustrationPath" /></div>
+    <h4>{{ __('Web Terminal') }}</h4>
+    <p>{{ __('Run tests against your code live using the Web Terminal') }}</p>
+    <div class="bs-callout text-left">The Web Terminal is coming soon. Stay tuned!</div>
+  </div>
+</template>

ee/app/assets/javascripts/ide/components/terminal/view.vue

+<script>
+import { mapState } from 'vuex';
+import EmptyState from './empty_state.vue';
+
+export default {
+  components: {
+    EmptyState,
+  },
+  computed: {
+    ...mapState(['emptyStateSvgPath']),
+  },
+};
+</script>
+
+<template>
+  <div class="h-100">
+    <div class="h-100 d-flex flex-column justify-content-center">
+      <empty-state :illustration-path="emptyStateSvgPath" />
+    </div>
+  </div>
+</template>

ee/spec/javascripts/ide/components/terminal/empty_state_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import { TEST_HOST } from 'spec/test_constants';
+import TerminalEmptyState from 'ee/ide/components/terminal/empty_state.vue';
+
+const TEST_PATH = `${TEST_HOST}/home.png`;
+
+describe('TerminalEmptyState', () => {
+  const factory = (options = {}) => {
+    const localVue = createLocalVue();
+
+    return shallowMount(TerminalEmptyState, {
+      localVue,
+      ...options,
+    });
+  };
+
+  it('does not show illustration, if no path specified', () => {
+    const wrapper = factory();
+
+    expect(wrapper.find('.svg-content').exists()).toBe(false);
+  });
+
+  it('shows illustration with path', () => {
+    const wrapper = factory({
+      propsData: {
+        illustrationPath: TEST_PATH,
+      },
+    });
+
+    const img = wrapper.find('.svg-content img');
+
+    expect(img.exists()).toBe(true);
+    expect(img.attributes('src')).toEqual(TEST_PATH);
+  });
+});

ee/spec/javascripts/ide/components/terminal/view_spec.js

+import { shallowMount, createLocalVue } from '@vue/test-utils';
+import Vuex from 'vuex';
+import { TEST_HOST } from 'spec/test_constants';
+import TerminalView from 'ee/ide/components/terminal/view.vue';
+import TerminalEmptyState from 'ee/ide/components/terminal/empty_state.vue';
+
+const TEST_SVG_PATH = `${TEST_HOST}/illustration.svg`;
+
+const localVue = createLocalVue();
+
+localVue.use(Vuex);
+
+describe('TerminalView', () => {
+  const factory = () => {
+    const store = new Vuex.Store({
+      state: {
+        emptyStateSvgPath: TEST_SVG_PATH,
+      },
+    });
+
+    return shallowMount(TerminalView, { localVue, store });
+  };
+
+  it('renders empty state', () => {
+    const wrapper = factory();
+
+    expect(wrapper.find(TerminalEmptyState).props()).toEqual({
+      illustrationPath: TEST_SVG_PATH,
+    });
+  });
+});

locale/gitlab.pot

@@ -7226,6 +7226,9 @@ msgstr ""
 msgid "Run CI/CD pipelines for external repositories"
 msgstr ""
 
+msgid "Run tests against your code live using the Web Terminal"
+msgstr ""
+
 msgid "Run untagged jobs"
 msgstr ""
 
@@ -8202,6 +8205,9 @@ msgstr ""
 msgid "Templates"
 msgstr ""
 
+msgid "Terminal"
+msgstr ""
+
 msgid "Terminal for environment"
 msgstr ""
 
@@ -9316,6 +9322,9 @@ msgstr ""
 msgid "Web IDE"
 msgstr ""
 
+msgid "Web Terminal"
+msgstr ""
+
 msgid "Web terminal"
 msgstr ""