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

app/assets/javascripts/clusters/components/new_cluster.vue

+<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>

app/assets/javascripts/clusters/new_cluster.js

+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);
+    },
+  });
+};

app/assets/javascripts/clusters/stores/new_cluster/index.js

+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;

app/assets/javascripts/clusters/stores/new_cluster/state.js

+export default (initialState = {}) => ({
+  clusterConnectHelpPath: initialState.clusterConnectHelpPath,
+});

app/assets/javascripts/pages/admin/clusters/new/index.js

+import initNewCluster from '~/clusters/new_cluster';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initNewCluster();
+});

app/assets/javascripts/pages/groups/clusters/new/index.js

+import initNewCluster from '~/clusters/new_cluster';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initNewCluster();
+});

app/assets/javascripts/pages/projects/clusters/new/index.js

+import initNewCluster from '~/clusters/new_cluster';
+
+document.addEventListener('DOMContentLoaded', () => {
+  initNewCluster();
+});

app/helpers/clusters_helper.rb

@@ -36,6 +36,12 @@ module ClustersHelper
     }
   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
   def provider_icon(provider = nil)
     img_data = js_clusters_list_data.dig(:img_tags, provider&.to_sym) ||

app/views/clusters/clusters/new.html.haml

@@ -16,8 +16,8 @@
           %span
             = create_new_cluster_label(provider: params[:provider])
       %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' }
-          %span Add existing cluster
+        %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= s_('ClusterIntegration|Connect existing cluster')
 
     .tab-content.gitlab-tab-content
       .tab-pane.p-0{ id: 'create-cluster-pane', class: active_when(active_tab == 'create'), role: 'tabpanel' }
@@ -28,5 +28,5 @@
             = render "clusters/clusters/#{provider}/new"
 
       .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'

app/views/clusters/clusters/user/_header.html.haml

-%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 }

changelogs/unreleased/emilyring-cluster-new-vue.yml

+---
+title: Moved Cluster Connect Form to Vue
+merge_request: 40295
+author:
+type: changed

locale/gitlab.pot

@@ -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}"
 msgstr ""
 
+msgid "ClusterIntegration|Connect existing cluster"
+msgstr ""
+
 msgid "ClusterIntegration|Copy API URL"
 msgstr ""
 
@@ -5693,7 +5696,7 @@ msgstr ""
 msgid "ClusterIntegration|Number of nodes must be a numerical value."
 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 ""
 
 msgid "ClusterIntegration|Please make sure that your Google account meets the following requirements:"
@@ -6056,9 +6059,6 @@ msgstr ""
 msgid "ClusterIntegration|can be used instead of a custom domain. "
 msgstr ""
 
-msgid "ClusterIntegration|documentation"
-msgstr ""
-
 msgid "ClusterIntegration|installed via %{linkStart}Cloud Run%{linkEnd}"
 msgstr ""
 

qa/qa/page/project/operations/kubernetes/add.rb

@@ -7,11 +7,11 @@ module QA
         module Kubernetes
           class Add < Page::Base
             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
 
             def add_existing_cluster
-              click_on 'Add existing cluster'
+              click_element(:add_existing_cluster_tab)
             end
           end
         end

spec/features/groups/clusters/user_spec.rb

@@ -26,7 +26,7 @@ RSpec.describe 'User Cluster', :js do
       visit group_clusters_path(group)
 
       click_link 'Add Kubernetes cluster'
-      click_link 'Add existing cluster'
+      click_link 'Connect existing cluster'
     end
 
     context 'when user filled form with valid parameters' do

spec/features/projects/clusters/gcp_spec.rb

@@ -144,7 +144,7 @@ RSpec.describe 'Gcp Cluster', :js, :do_not_mock_admin_mode do
           visit project_clusters_path(project)
 
           click_link 'Add Kubernetes cluster'
-          click_link 'Add existing cluster'
+          click_link 'Connect existing cluster'
         end
 
         it 'user sees the "Environment scope" field' do

spec/features/projects/clusters/user_spec.rb

@@ -26,7 +26,7 @@ RSpec.describe 'User Cluster', :js do
       visit project_clusters_path(project)
 
       click_link 'Add Kubernetes cluster'
-      click_link 'Add existing cluster'
+      click_link 'Connect existing cluster'
     end
 
     context 'when user filled form with valid parameters' do

spec/features/projects/clusters_spec.rb

@@ -43,7 +43,7 @@ RSpec.describe 'Clusters', :js do
       context 'when user filled form with environment scope' do
         before do
           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_environment_scope', with: 'staging/*'
           click_button 'Add Kubernetes cluster'
@@ -72,7 +72,7 @@ RSpec.describe 'Clusters', :js do
       context 'when user updates duplicated environment scope' do
         before do
           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_environment_scope', with: '*'
           fill_in 'cluster_platform_kubernetes_attributes_api_url', with: 'https://0.0.0.0'

spec/frontend/clusters/components/__snapshots__/new_cluster_spec.js.snap

+// 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>"
+`;

spec/frontend/clusters/components/new_cluster_spec.js

+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');
+  });
+});

spec/helpers/clusters_helper_spec.rb

@@ -77,7 +77,15 @@ RSpec.describe ClustersHelper do
     end
 
     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