Geo Replicable Details - Bootstrap Vue application for single replicable item view

What / Why

We are working to create a view that allows users to "dig into" a single replicable item's details: &16249 (closed)

This change is focused on mounting and bootstrapping a Vue application to represent the information about a single replicable item to the user.

Acceptance criteria

1. Create a JS hook-in to the HAML file introduced in #509349 (closed)
2. Create a new JS file to init a Vue application (ee/app/assets/javascripts/geo_replicable_item/index.js)
   • This file should create a new Vue instance and pass the replicableItemId and graphqlFieldName as a prop to the component it renders
3. Create a barebones Vue component to be initialized by the Vue application (ee/app/assets/javascripts/geo_replicable_item/components/app.vue)
   • This should take the replicableItemId and graphqlFieldName as a prop and for now simply render it as we will hook up the API in a following issue
4. Create a page file to create the link between the Vue application and the HAML file (ee/app/assets/javascripts/pages/admin/geo/replicables/show.js)
   • This should import the above JS index file and invoke it

Implementation details

1. Add JS hook to the HAML file ee/app/views/admin/geo/replicables/show.html.haml

#js-geo-replicable-item{ data: { "replicable_item_id" => params[:replicable_id], "graphql_field_name" => replicable_class_data(@replicator_class).graphql_field_name } }

2. Create a new JS file to house the Vue application ee/app/assets/javascripts/geo_replicable_item/index.js

import Vue from 'vue';
import GeoReplicableItemApp from './components/app.vue';

export const initGeoReplicableItem = () => {
  const el = document.getElementById('js-geo-replicable-item');
  const {
    replicableItemId,
    graphqlFieldName,
  } = el.dataset;

  return new Vue({
    el,
    render(createElement) {
      return createElement(GeoReplicableItemApp, {
        props: {
          replicableItemId,
          graphqlFieldName,
        },
      });
    },
  });
};

3. Create a barebones Vue component ee/app/assets/javascripts/geo_replicable_item/components/app.vue

<script>
  export default {
    name: 'GeoReplicableItemApp',
    props: {
      graphqlFieldName: {
        type: String,
        required: true
      }
      replicableItemId: {
        type: String,
        required: true
      }
    }
  }
</script>

<template>
  <div>
    {{ graphqlFieldName }} - {{ replicableItemId }}
  </div>
</template>

4. Create a page JS file ee/app/assets/javascripts/pages/admin/geo/replicables/show.js

import { initGeoReplicableItem } from 'ee/geo_replicable_item';

initGeoReplicableItem();