Move HAML Vue template to SFC in access_tokens

- There were no security issues with this, but this helps
make our FE more maintainable.
- Also adds spec for this component.
- Also updates QA selector view assertion.

app/assets/javascripts/access_tokens/components/expires_at_field.vue

 <script>
-import { GlDatepicker } from '@gitlab/ui';
+import { GlDatepicker, GlFormInput } from '@gitlab/ui';
 
 export default {
   name: 'ExpiresAtField',
-  components: { GlDatepicker },
+  components: { GlDatepicker, GlFormInput },
+  props: {
+    inputAttrs: {
+      type: Object,
+      required: false,
+      default: () => ({}),
+    },
+  },
+  data() {
+    return {
+      minDate: new Date(),
+    };
+  },
 };
 </script>
 
 <template>
-  <gl-datepicker :target="null" :min-date="new Date()">
-    <slot></slot>
+  <gl-datepicker :target="null" :min-date="minDate">
+    <gl-form-input
+      v-bind="inputAttrs"
+      class="datepicker gl-datepicker-input"
+      autocomplete="off"
+      inputmode="none"
+      data-qa-selector="expiry_date_field"
+    />
   </gl-datepicker>
 </template>

app/assets/javascripts/access_tokens/index.js

 import Vue from 'vue';
 import ExpiresAtField from './components/expires_at_field.vue';
 
+const getInputAttrs = el => {
+  const input = el.querySelector('input');
+
+  return {
+    id: input.id,
+    name: input.name,
+    placeholder: input.placeholder,
+  };
+};
+
 const initExpiresAtField = () => {
-  // eslint-disable-next-line no-new
-  new Vue({
-    el: document.querySelector('.js-access-tokens-expires-at'),
-    components: { ExpiresAtField },
+  const el = document.querySelector('.js-access-tokens-expires-at');
+
+  if (!el) {
+    return null;
+  }
+
+  const inputAttrs = getInputAttrs(el);
+
+  return new Vue({
+    el,
+    render(h) {
+      return h(ExpiresAtField, {
+        props: {
+          inputAttrs,
+        },
+      });
+    },
   });
 };
 

app/views/shared/access_tokens/_form.html.haml

@@ -13,7 +13,7 @@
   .row
     .form-group.col-md-6
       = f.label :name, _('Name'), class: 'label-bold'
-      = f.text_field :name, class: 'form-control', required: true, data: { qa_selector: 'access_token_name_field' }
+      = f.text_field :name, class: 'form-control gl-form-input', required: true, data: { qa_selector: 'access_token_name_field' }
 
   .row
     .form-group.col-md-6
@@ -23,8 +23,7 @@
         = render_if_exists 'personal_access_tokens/callout_max_personal_access_token_lifetime'
 
         .js-access-tokens-expires-at
-          %expires-at-field
-            = f.text_field :expires_at, class: 'datepicker form-control gl-datepicker-input', placeholder: 'YYYY-MM-DD', autocomplete: 'off', inputmode: 'none', data: { qa_selector: 'expiry_date_field' }
+          = f.text_field :expires_at, class: 'datepicker gl-datepicker-input form-control gl-form-input', placeholder: 'YYYY-MM-DD', autocomplete: 'off'
 
   .form-group
     = f.label :scopes, _('Scopes'), class: 'label-bold'

changelogs/unreleased/ps-move-haml-vue-access-tokens.yml

+---
+title: Update access token fields to new input style
+merge_request: 46569
+author:
+type: other

qa/qa/page/profile/personal_access_tokens.rb

@@ -6,8 +6,11 @@ module QA
   module Page
     module Profile
       class PersonalAccessTokens < Page::Base
-        view 'app/views/shared/access_tokens/_form.html.haml' do
+        view 'app/assets/javascripts/access_tokens/components/expires_at_field.vue' do
           element :expiry_date_field
+        end
+
+        view 'app/views/shared/access_tokens/_form.html.haml' do
           element :access_token_name_field
           element :create_token_button
         end

spec/frontend/access_tokens/components/__snapshots__/expires_at_field_spec.js.snap

+// Jest Snapshot v1, https://goo.gl/fbAQLP
+
+exports[`~/access_tokens/components/expires_at_field should render datepicker with input info 1`] = `
+<gl-datepicker-stub
+  ariallabel=""
+  autocomplete=""
+  container=""
+  displayfield="true"
+  firstday="0"
+  mindate="Mon Jul 06 2020 00:00:00 GMT+0000 (Greenwich Mean Time)"
+  placeholder="YYYY-MM-DD"
+  theme=""
+>
+  <gl-form-input-stub
+    autocomplete="off"
+    class="datepicker gl-datepicker-input"
+    data-qa-selector="expiry_date_field"
+    id="personal_access_token_expires_at"
+    inputmode="none"
+    name="personal_access_token[expires_at]"
+    placeholder="YYYY-MM-DD"
+  />
+</gl-datepicker-stub>
+`;

spec/frontend/access_tokens/components/expires_at_field_spec.js

+import { shallowMount } from '@vue/test-utils';
+import { useFakeDate } from 'helpers/fake_date';
+import ExpiresAtField from '~/access_tokens/components/expires_at_field.vue';
+
+describe('~/access_tokens/components/expires_at_field', () => {
+  useFakeDate();
+
+  let wrapper;
+
+  const createComponent = () => {
+    wrapper = shallowMount(ExpiresAtField, {
+      propsData: {
+        inputAttrs: {
+          id: 'personal_access_token_expires_at',
+          name: 'personal_access_token[expires_at]',
+          placeholder: 'YYYY-MM-DD',
+        },
+      },
+    });
+  };
+
+  beforeEach(() => {
+    createComponent();
+  });
+
+  afterEach(() => {
+    wrapper.destroy();
+    wrapper = null;
+  });
+
+  it('should render datepicker with input info', () => {
+    expect(wrapper.element).toMatchSnapshot();
+  });
+});