Commit dccee864 authored by Emily Ring's avatar Emily Ring Committed by Jan Provaznik

Added Vue to clusters/new view

Begin process of adding vue
to app/views/clusters/clusters/new.html.haml
Added vue entry points and store
Move app/views/clusters/clusters/user/_header.html.haml to Vue
Updated associated tests
parent 53b97bc9
<script>
import { GlLink, GlSprintf } from '@gitlab/ui';
import { mapState } from 'vuex';
import { s__ } from '~/locale';
export default {
i18n: {
title: s__('ClusterIntegration|Enter the details for your Kubernetes cluster'),
information: s__(
'ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{linkStart}documentation%{linkEnd} on Kubernetes',
),
},
components: {
GlLink,
GlSprintf,
},
computed: {
...mapState(['clusterConnectHelpPath']),
},
};
</script>
<template>
<div>
<h4>{{ $options.i18n.title }}</h4>
<p>
<gl-sprintf :message="$options.i18n.information">
<template #link="{ content }">
<gl-link :href="clusterConnectHelpPath" target="_blank">{{ content }}</gl-link>
</template>
</gl-sprintf>
</p>
</div>
</template>
import Vue from 'vue';
import NewCluster from './components/new_cluster.vue';
import { createStore } from './stores/new_cluster';
export default () => {
const entryPoint = document.querySelector('#js-cluster-new');
if (!entryPoint) {
return null;
}
return new Vue({
el: '#js-cluster-new',
store: createStore(entryPoint.dataset),
render(createElement) {
return createElement(NewCluster);
},
});
};
import Vue from 'vue';
import Vuex from 'vuex';
import state from './state';
Vue.use(Vuex);
export const createStore = initialState =>
new Vuex.Store({
state: state(initialState),
});
export default createStore;
export default (initialState = {}) => ({
clusterConnectHelpPath: initialState.clusterConnectHelpPath,
});
import initNewCluster from '~/clusters/new_cluster';
document.addEventListener('DOMContentLoaded', () => {
initNewCluster();
});
import initNewCluster from '~/clusters/new_cluster';
document.addEventListener('DOMContentLoaded', () => {
initNewCluster();
});
import initNewCluster from '~/clusters/new_cluster';
document.addEventListener('DOMContentLoaded', () => {
initNewCluster();
});
...@@ -36,6 +36,12 @@ module ClustersHelper ...@@ -36,6 +36,12 @@ module ClustersHelper
} }
end end
def js_cluster_new
{
cluster_connect_help_path: help_page_path('user/project/clusters/add_remove_clusters', anchor: 'add-existing-cluster')
}
end
# This method is depreciated and will be removed when associated HAML files are moved to JavaScript # This method is depreciated and will be removed when associated HAML files are moved to JavaScript
def provider_icon(provider = nil) def provider_icon(provider = nil)
img_data = js_clusters_list_data.dig(:img_tags, provider&.to_sym) || img_data = js_clusters_list_data.dig(:img_tags, provider&.to_sym) ||
......
...@@ -16,8 +16,8 @@ ...@@ -16,8 +16,8 @@
%span %span
= create_new_cluster_label(provider: params[:provider]) = create_new_cluster_label(provider: params[:provider])
%li.nav-item{ role: 'presentation' } %li.nav-item{ role: 'presentation' }
%a.nav-link{ href: '#add-cluster-pane', id: 'add-cluster-tab', class: active_when(active_tab == 'add'), data: { toggle: 'tab' }, role: 'tab' } %a.nav-link{ href: '#add-cluster-pane', id: 'add-cluster-tab', class: active_when(active_tab == 'add'), data: { toggle: 'tab', qa_selector: 'add_existing_cluster_tab' }, role: 'tab' }
%span Add existing cluster %span= s_('ClusterIntegration|Connect existing cluster')
.tab-content.gitlab-tab-content .tab-content.gitlab-tab-content
.tab-pane.p-0{ id: 'create-cluster-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' } .tab-pane.p-0{ id: 'create-cluster-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
...@@ -28,5 +28,5 @@ ...@@ -28,5 +28,5 @@
= render "clusters/clusters/#{provider}/new" = render "clusters/clusters/#{provider}/new"
.tab-pane{ id: 'add-cluster-pane', class: active_when(active_tab == 'add'), role: 'tabpanel' } .tab-pane{ id: 'add-cluster-pane', class: active_when(active_tab == 'add'), role: 'tabpanel' }
= render 'clusters/clusters/user/header' #js-cluster-new{ data: js_cluster_new }
= render 'clusters/clusters/user/form' = render 'clusters/clusters/user/form'
%h4
= s_('ClusterIntegration|Enter the details for your Kubernetes cluster')
%p
- link_to_help_page = link_to(s_('ClusterIntegration|documentation'), help_page_path('user/project/clusters/add_remove_clusters', anchor: 'add-existing-cluster'), target: '_blank', rel: 'noopener noreferrer')
= s_('ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{link_to_help_page} on Kubernetes').html_safe % { link_to_help_page: link_to_help_page }
---
title: Moved Cluster Connect Form to Vue
merge_request: 40295
author:
type: changed
...@@ -5315,6 +5315,9 @@ msgstr "" ...@@ -5315,6 +5315,9 @@ msgstr ""
msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters. %{linkStart}More information%{linkEnd}" msgid "ClusterIntegration|Clusters are utilized by selecting the nearest ancestor with a matching environment scope. For example, project clusters will override group clusters. %{linkStart}More information%{linkEnd}"
msgstr "" msgstr ""
msgid "ClusterIntegration|Connect existing cluster"
msgstr ""
msgid "ClusterIntegration|Copy API URL" msgid "ClusterIntegration|Copy API URL"
msgstr "" msgstr ""
...@@ -5693,7 +5696,7 @@ msgstr "" ...@@ -5693,7 +5696,7 @@ msgstr ""
msgid "ClusterIntegration|Number of nodes must be a numerical value." msgid "ClusterIntegration|Number of nodes must be a numerical value."
msgstr "" msgstr ""
msgid "ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{link_to_help_page} on Kubernetes" msgid "ClusterIntegration|Please enter access information for your Kubernetes cluster. If you need help, you can read our %{linkStart}documentation%{linkEnd} on Kubernetes"
msgstr "" msgstr ""
msgid "ClusterIntegration|Please make sure that your Google account meets the following requirements:" msgid "ClusterIntegration|Please make sure that your Google account meets the following requirements:"
...@@ -6056,9 +6059,6 @@ msgstr "" ...@@ -6056,9 +6059,6 @@ msgstr ""
msgid "ClusterIntegration|can be used instead of a custom domain. " msgid "ClusterIntegration|can be used instead of a custom domain. "
msgstr "" msgstr ""
msgid "ClusterIntegration|documentation"
msgstr ""
msgid "ClusterIntegration|installed via %{linkStart}Cloud Run%{linkEnd}" msgid "ClusterIntegration|installed via %{linkStart}Cloud Run%{linkEnd}"
msgstr "" msgstr ""
......
...@@ -7,11 +7,11 @@ module QA ...@@ -7,11 +7,11 @@ module QA
module Kubernetes module Kubernetes
class Add < Page::Base class Add < Page::Base
view 'app/views/clusters/clusters/new.html.haml' do view 'app/views/clusters/clusters/new.html.haml' do
element :add_existing_cluster_button, "Add existing cluster" # rubocop:disable QA/ElementWithPattern element :add_existing_cluster_tab
end end
def add_existing_cluster def add_existing_cluster
click_on 'Add existing cluster' click_element(:add_existing_cluster_tab)
end end
end end
end end
......
...@@ -26,7 +26,7 @@ RSpec.describe 'User Cluster', :js do ...@@ -26,7 +26,7 @@ RSpec.describe 'User Cluster', :js do
visit group_clusters_path(group) visit group_clusters_path(group)
click_link 'Add Kubernetes cluster' click_link 'Add Kubernetes cluster'
click_link 'Add existing cluster' click_link 'Connect existing cluster'
end end
context 'when user filled form with valid parameters' do context 'when user filled form with valid parameters' do
......
...@@ -144,7 +144,7 @@ RSpec.describe 'Gcp Cluster', :js, :do_not_mock_admin_mode do ...@@ -144,7 +144,7 @@ RSpec.describe 'Gcp Cluster', :js, :do_not_mock_admin_mode do
visit project_clusters_path(project) visit project_clusters_path(project)
click_link 'Add Kubernetes cluster' click_link 'Add Kubernetes cluster'
click_link 'Add existing cluster' click_link 'Connect existing cluster'
end end
it 'user sees the "Environment scope" field' do it 'user sees the "Environment scope" field' do
......
...@@ -26,7 +26,7 @@ RSpec.describe 'User Cluster', :js do ...@@ -26,7 +26,7 @@ RSpec.describe 'User Cluster', :js do
visit project_clusters_path(project) visit project_clusters_path(project)
click_link 'Add Kubernetes cluster' click_link 'Add Kubernetes cluster'
click_link 'Add existing cluster' click_link 'Connect existing cluster'
end end
context 'when user filled form with valid parameters' do context 'when user filled form with valid parameters' do
......
...@@ -43,7 +43,7 @@ RSpec.describe 'Clusters', :js do ...@@ -43,7 +43,7 @@ RSpec.describe 'Clusters', :js do
context 'when user filled form with environment scope' do context 'when user filled form with environment scope' do
before do before do
click_link 'Add Kubernetes cluster' click_link 'Add Kubernetes cluster'
click_link 'Add existing cluster' click_link 'Connect existing cluster'
fill_in 'cluster_name', with: 'staging-cluster' fill_in 'cluster_name', with: 'staging-cluster'
fill_in 'cluster_environment_scope', with: 'staging/*' fill_in 'cluster_environment_scope', with: 'staging/*'
click_button 'Add Kubernetes cluster' click_button 'Add Kubernetes cluster'
...@@ -72,7 +72,7 @@ RSpec.describe 'Clusters', :js do ...@@ -72,7 +72,7 @@ RSpec.describe 'Clusters', :js do
context 'when user updates duplicated environment scope' do context 'when user updates duplicated environment scope' do
before do before do
click_link 'Add Kubernetes cluster' click_link 'Add Kubernetes cluster'
click_link 'Add existing cluster' click_link 'Connect existing cluster'
fill_in 'cluster_name', with: 'staging-cluster' fill_in 'cluster_name', with: 'staging-cluster'
fill_in 'cluster_environment_scope', with: '*' fill_in 'cluster_environment_scope', with: '*'
fill_in 'cluster_platform_kubernetes_attributes_api_url', with: 'https://0.0.0.0' fill_in 'cluster_platform_kubernetes_attributes_api_url', with: 'https://0.0.0.0'
......
// Jest Snapshot v1, https://goo.gl/fbAQLP
exports[`NewCluster renders the cluster component correctly 1`] = `
"<div>
<h4>Enter the details for your Kubernetes cluster</h4>
<p>Please enter access information for your Kubernetes cluster. If you need help, you can read our <b-link-stub href=\\"/some/help/path\\" target=\\"_blank\\" event=\\"click\\" routertag=\\"a\\" class=\\"gl-link\\">documentation</b-link-stub> on Kubernetes</p>
</div>"
`;
import { shallowMount } from '@vue/test-utils';
import { GlLink, GlSprintf } from '@gitlab/ui';
import NewCluster from '~/clusters/components/new_cluster.vue';
import createClusterStore from '~/clusters/stores/new_cluster';
describe('NewCluster', () => {
let store;
let wrapper;
const createWrapper = () => {
store = createClusterStore({ clusterConnectHelpPath: '/some/help/path' });
wrapper = shallowMount(NewCluster, { store, stubs: { GlLink, GlSprintf } });
return wrapper.vm.$nextTick();
};
const findDescription = () => wrapper.find(GlSprintf);
const findLink = () => wrapper.find(GlLink);
beforeEach(() => {
return createWrapper();
});
afterEach(() => {
wrapper.destroy();
});
it('renders the cluster component correctly', () => {
expect(wrapper.html()).toMatchSnapshot();
});
it('renders the correct information text', () => {
expect(findDescription().text()).toContain(
'Please enter access information for your Kubernetes cluster.',
);
});
it('renders a valid help link set by the backend', () => {
expect(findLink().attributes('href')).toBe('/some/help/path');
});
});
...@@ -77,7 +77,15 @@ RSpec.describe ClustersHelper do ...@@ -77,7 +77,15 @@ RSpec.describe ClustersHelper do
end end
it 'displays and ancestor_help_path' do it 'displays and ancestor_help_path' do
expect(subject[:ancestor_help_path]).to eq('/help/user/group/clusters/index#cluster-precedence') expect(subject[:ancestor_help_path]).to eq(help_page_path('user/group/clusters/index', anchor: 'cluster-precedence'))
end
end
describe '#js_cluster_new' do
subject { helper.js_cluster_new }
it 'displays a cluster_connect_help_path' do
expect(subject[:cluster_connect_help_path]).to eq(help_page_path('user/project/clusters/add_remove_clusters', anchor: 'add-existing-cluster'))
end end
end end
......
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