data_porter 0.2.0 → 0.5.0

data/app/controllers/data_porter/mapping_templates_controller.rb

@@ -0,0 +1,85 @@
+# frozen_string_literal: true
+
+module DataPorter
+  class MappingTemplatesController < DataPorter.configuration.parent_controller.constantize
+    layout "data_porter/application"
+
+    before_action :set_template, only: %i[edit update destroy]
+
+    def index
+      @templates = MappingTemplate.order(:target_key, :name)
+      @grouped = @templates.group_by(&:target_key)
+    end
+
+    def new
+      @template = MappingTemplate.new
+      load_form_data
+    end
+
+    def create
+      @template = MappingTemplate.new(template_params)
+
+      if @template.save
+        redirect_to mapping_templates_path
+      else
+        load_form_data
+        render :new, status: :unprocessable_entity
+      end
+    end
+
+    def edit
+      load_form_data
+    end
+
+    def update
+      if @template.update(template_params)
+        redirect_to mapping_templates_path
+      else
+        load_form_data
+        render :edit, status: :unprocessable_entity
+      end
+    end
+
+    def destroy
+      @template.destroy
+      redirect_to mapping_templates_path
+    end
+
+    private
+
+    def set_template
+      @template = MappingTemplate.find(params[:id])
+    end
+
+    def template_params
+      permitted = params.require(:mapping_template).permit(
+        :target_key, :name, mapping: {}, mapping_keys: [], mapping_values: []
+      )
+      build_mapping_from_arrays(permitted)
+    end
+
+    def build_mapping_from_arrays(raw)
+      keys = raw.delete(:mapping_keys)
+      values = raw.delete(:mapping_values)
+      return raw unless keys && values
+
+      mapping = keys.zip(values).reject { |k, _| k.blank? }.to_h
+      raw.merge(mapping: mapping)
+    end
+
+    def load_form_data
+      @targets = Registry.available
+      @target_columns_map = build_target_columns_map
+    end
+
+    def build_target_columns_map
+      columns = {}
+      @targets.each do |t|
+        target = Registry.find(t[:key])
+        cols = target._columns || []
+        columns[t[:key].to_s] = cols.map { |c| [c.label, c.name.to_s] }
+      end
+      columns
+    end
+  end
+end

data/app/javascript/data_porter/mapping_controller.js

@@ -0,0 +1,86 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["columnSelect", "requiredWarning", "duplicateWarning", "saveTemplate"]
+  static values = { requiredColumns: Array }
+
+  connect() {
+    this.validate()
+  }
+
+  loadTemplate(event) {
+    const option = event.target.selectedOptions[0]
+    if (!option || !option.dataset.mapping) return
+
+    const mapping = JSON.parse(option.dataset.mapping)
+    this.columnSelectTargets.forEach(select => {
+      const header = select.name.match(/\[(.+)\]/)?.[1]
+      if (header && mapping[header]) {
+        select.value = mapping[header]
+      } else {
+        select.value = ""
+      }
+    })
+    if (this.hasSaveTemplateTarget) this.saveTemplateTarget.style.display = "none"
+    this.validate()
+  }
+
+  onChange() {
+    this.validate()
+  }
+
+  validate() {
+    this.validateRequired()
+    this.validateDuplicates()
+  }
+
+  validateRequired() {
+    if (!this.hasRequiredWarningTarget) return
+
+    const selected = new Set(
+      this.columnSelectTargets.map(s => s.value).filter(v => v !== "")
+    )
+
+    const missing = this.requiredColumnsValue.filter(c => !selected.has(c.name))
+
+    if (missing.length > 0) {
+      const names = missing.map(c => c.label).join(", ")
+      this.requiredWarningTarget.textContent = `Required fields not mapped: ${names}`
+      this.requiredWarningTarget.style.display = ""
+    } else {
+      this.requiredWarningTarget.style.display = "none"
+    }
+  }
+
+  validateDuplicates() {
+    const counts = {}
+    this.columnSelectTargets.forEach(select => {
+      if (select.value === "") return
+      counts[select.value] = (counts[select.value] || 0) + 1
+    })
+
+    const duplicates = new Set(
+      Object.keys(counts).filter(k => counts[k] > 1)
+    )
+
+    this.columnSelectTargets.forEach(select => {
+      const row = select.closest(".dp-mapping-row")
+      if (!row) return
+
+      if (select.value !== "" && duplicates.has(select.value)) {
+        row.classList.add("dp-mapping-row--duplicate")
+      } else {
+        row.classList.remove("dp-mapping-row--duplicate")
+      }
+    })
+
+    if (this.hasDuplicateWarningTarget) {
+      if (duplicates.size > 0) {
+        this.duplicateWarningTarget.textContent = `Duplicate mappings detected for: ${[...duplicates].join(", ")}`
+        this.duplicateWarningTarget.style.display = ""
+      } else {
+        this.duplicateWarningTarget.style.display = "none"
+      }
+    }
+  }
+}

data/app/javascript/data_porter/progress_controller.js

@@ -1,33 +1,42 @@
 import { Controller } from "@hotwired/stimulus"
-import { createConsumer } from "@rails/actioncable"
 
 export default class extends Controller {
-  static targets = ["bar", "text"]
-  static values = { id: Number }
+  static targets = ["bar", "text", "label"]
+  static values = { id: Number, url: String }
 
   connect() {
-    this.subscription = createConsumer().subscriptions.create(
-      { channel: "DataPorter::ImportChannel", id: this.idValue },
-      {
-        received: (data) => {
-          if (data.status === "processing") {
-            this.updateProgress(data.percentage)
-          } else {
-            window.location.reload()
-          }
-        }
+    this.poll()
+  }
+
+  poll() {
+    this.timer = setInterval(() => this.fetchStatus(), 1000)
+  }
+
+  async fetchStatus() {
+    try {
+      const response = await fetch(this.urlValue)
+      const data = await response.json()
+      this.updateLabel(data.status)
+      if (data.progress && data.progress.percentage !== undefined) {
+        this.barTarget.style.width = data.progress.percentage + "%"
+        this.textTarget.textContent = data.progress.percentage + "%"
+      }
+      if (!["pending", "importing", "parsing", "dry_running", "extracting_headers"].includes(data.status)) {
+        clearInterval(this.timer)
+        this.barTarget.style.width = "100%"
+        this.textTarget.textContent = "100%"
+        setTimeout(() => Turbo.visit(window.location.href, { action: "replace" }), 500)
       }
-    )
+    } catch (e) {}
   }
 
-  updateProgress(percentage) {
-    if (this.hasBarTarget) {
-      this.barTarget.style.width = `${percentage}%`
-      this.textTarget.textContent = `${percentage}%`
-    }
+  updateLabel(status) {
+    if (!this.hasLabelTarget) return
+    var labels = { pending: "Waiting...", extracting_headers: "Extracting headers...", parsing: "Parsing records...", importing: "Importing...", dry_running: "Dry run..." }
+    this.labelTarget.textContent = labels[status] || "Processing..."
   }
 
   disconnect() {
-    this.subscription?.unsubscribe()
+    if (this.timer) clearInterval(this.timer)
   }
 }

data/app/javascript/data_porter/template_form_controller.js

@@ -0,0 +1,46 @@
+import { Controller } from "@hotwired/stimulus"
+
+export default class extends Controller {
+  static targets = ["pairsContainer", "fieldSelect"]
+  static values = { columns: Object }
+
+  targetChanged(event) {
+    const targetKey = event.target.value
+    const columns = this.columnsValue[targetKey] || []
+    this.fieldSelectTargets.forEach(select => this.updateOptions(select, columns))
+  }
+
+  addPair() {
+    const container = this.pairsContainerTarget
+    const targetKey = this.element.querySelector("[name='mapping_template[target_key]']")?.value
+    const columns = targetKey ? (this.columnsValue[targetKey] || []) : []
+
+    const pair = document.createElement("div")
+    pair.className = "dp-mapping-pair"
+    pair.style.cssText = "display: flex; gap: 0.5rem; margin-bottom: 0.5rem;"
+    pair.innerHTML = this.pairHTML(columns)
+    container.appendChild(pair)
+  }
+
+  updateOptions(select, columns) {
+    const current = select.value
+    select.innerHTML = '<option value="">Select a field...</option>'
+    columns.forEach(([label, name]) => {
+      const opt = document.createElement("option")
+      opt.value = name
+      opt.textContent = label
+      if (name === current) opt.selected = true
+      select.appendChild(opt)
+    })
+  }
+
+  pairHTML(columns) {
+    const options = columns.map(([label, name]) =>
+      `<option value="${name}">${label}</option>`
+    ).join("")
+
+    return `<input type="text" name="mapping_template[mapping_keys][]" placeholder="File header" class="dp-select" style="flex: 1;" />` +
+      `<select name="mapping_template[mapping_values][]" class="dp-select" style="flex: 1;" data-data-porter--template-form-target="fieldSelect">` +
+      `<option value="">Select a field...</option>${options}</select>`
+  }
+}

data/app/jobs/data_porter/extract_headers_job.rb

@@ -0,0 +1,12 @@
+# frozen_string_literal: true
+
+module DataPorter
+  class ExtractHeadersJob < ActiveJob::Base
+    queue_as { DataPorter.configuration.queue_name }
+
+    def perform(import_id)
+      data_import = DataImport.find(import_id)
+      Orchestrator.new(data_import).extract_headers!
+    end
+  end
+end

data/app/models/data_porter/data_import.rb

@@ -15,7 +15,9 @@ module DataPorter
       importing: 3,
       completed: 4,
       failed: 5,
-      dry_running: 6
+      dry_running: 6,
+      extracting_headers: 7,
+      mapping: 8
     }
 
     attribute :records, StoreModels::ImportRecord.to_array_type, default: -> { [] }
@@ -23,6 +25,11 @@ module DataPorter
 
     attribute :config, :json, default: -> { {} }
 
+    scope :purgeable, lambda {
+      where(status: %i[completed failed])
+        .where(created_at: ...DataPorter.configuration.purge_after.ago)
+    }
+
     validates :target_key, presence: true
     validates :source_type, presence: true, inclusion: { in: %w[csv json api xlsx] }
 
@@ -45,5 +52,9 @@ module DataPorter
     def records_summary
       records.group_by(&:status).transform_values(&:count)
     end
+
+    def file_based?
+      %w[csv xlsx].include?(source_type)
+    end
   end
 end

data/app/models/data_porter/mapping_template.rb

@@ -0,0 +1,15 @@
+# frozen_string_literal: true
+
+module DataPorter
+  class MappingTemplate < ActiveRecord::Base
+    self.table_name = "data_porter_mapping_templates"
+
+    attribute :mapping, :json, default: -> { {} }
+
+    validates :target_key, presence: true
+    validates :name, presence: true, uniqueness: { scope: :target_key }
+    validates :mapping, presence: true
+
+    scope :for_target, ->(key) { where(target_key: key) }
+  end
+end

data/app/views/data_porter/imports/index.html.erb

@@ -1,11 +1,12 @@
-<%= stylesheet_link_tag "data_porter/application" %>
-
 <div class="data-porter">
   <div class="dp-header">
     <h1 class="dp-title">Imports</h1>
-    <button type="button" class="dp-btn dp-btn--primary" onclick="document.getElementById('dp-modal').classList.add('dp-modal--open')">
-      New Import
-    </button>
+    <div class="dp-header__actions">
+      <%= link_to "Mapping Templates", mapping_templates_path, class: "dp-btn dp-btn--secondary" %>
+      <button type="button" class="dp-btn dp-btn--primary" onclick="document.getElementById('dp-modal').classList.add('dp-modal--open')">
+        New Import
+      </button>
+    </div>
   </div>
 
   <% if @imports.any? %>
@@ -26,9 +27,16 @@
             <td><%= import.id %></td>
             <td><%= import.target_key %></td>
             <td><%= import.source_type %></td>
-            <td><%= raw DataPorter::Components::StatusBadge.new(status: import.status).call %></td>
+            <td><%= raw DataPorter::Components::Shared::StatusBadge.new(status: import.status).call %></td>
             <td><%= import.created_at&.strftime("%Y-%m-%d %H:%M") %></td>
-            <td><%= link_to "View", import_path(import), class: "dp-link" %></td>
+            <td class="dp-table__actions">
+              <%= link_to "View", import_path(import), class: "dp-btn dp-btn--sm dp-btn--secondary" %>
+              <% if import.completed? || import.failed? %>
+                <%= button_to "Delete", import_path(import),
+                      method: :delete, class: "dp-btn dp-btn--sm dp-btn--danger",
+                      data: { turbo_confirm: "Delete this import?" } %>
+              <% end %>
+            </td>
           </tr>
         <% end %>
       </tbody>
@@ -52,13 +60,15 @@
       <button type="button" class="dp-modal__close" onclick="document.getElementById('dp-modal').classList.remove('dp-modal--open')">&times;</button>
     </div>
 
-    <%= form_with model: DataPorter::DataImport.new, url: imports_path, class: "dp-modal__body", multipart: true do |f| %>
+    <%= form_with model: DataPorter::DataImport.new, url: imports_path, class: "dp-modal__body", multipart: true, data: { turbo: false } do |f| %>
       <div class="dp-field">
         <%= f.label :target_key, "Target", class: "dp-label" %>
         <%= f.select :target_key,
               @targets.map { |t| [t[:label], t[:key]] },
               { prompt: "Select a target..." },
-              class: "dp-select" %>
+              id: "dp-target-select",
+              class: "dp-select",
+              data: { sources: @targets.map { |t| [t[:key], t[:sources]] }.to_h.to_json } %>
       </div>
 
       <div class="dp-field">
@@ -93,12 +103,31 @@
 
 <script>
   (function() {
+    var targetSelect = document.getElementById("dp-target-select");
     var sourceSelect = document.getElementById("dp-source-select");
     var fileField = document.getElementById("dp-file-field");
     var fileInput = document.getElementById("dp-file-input");
     var dropzone = document.getElementById("dp-dropzone");
     var fileName = document.getElementById("dp-file-name");
 
+    function filterSources() {
+      if (!targetSelect || !sourceSelect) return;
+      var sourcesMap = JSON.parse(targetSelect.dataset.sources || "{}");
+      var allowed = sourcesMap[targetSelect.value];
+      var options = sourceSelect.options;
+      for (var i = 1; i < options.length; i++) {
+        options[i].style.display = allowed && allowed.indexOf(options[i].value) === -1 ? "none" : "";
+      }
+      if (allowed && sourceSelect.selectedIndex > 0 && allowed.indexOf(sourceSelect.value) === -1) {
+        sourceSelect.selectedIndex = 0;
+        fileField.style.display = "";
+      }
+    }
+
+    if (targetSelect) {
+      targetSelect.addEventListener("change", filterSources);
+    }
+
     if (sourceSelect) {
       sourceSelect.addEventListener("change", function() {
         fileField.style.display = this.value === "api" ? "none" : "";

data/app/views/data_porter/imports/new.html.erb

@@ -1,17 +1,25 @@
-<%= stylesheet_link_tag "data_porter/application" %>
-
 <div class="data-porter">
   <div class="dp-header">
     <h1 class="dp-title">New Import</h1>
   </div>
 
-  <%= form_with model: @import, url: imports_path, class: "dp-form", multipart: true do |f| %>
+  <% if @import.errors.any? %>
+    <div class="dp-alert dp-alert--danger">
+      <% @import.errors.full_messages.each do |msg| %>
+        <p><%= msg %></p>
+      <% end %>
+    </div>
+  <% end %>
+
+  <%= form_with model: @import, url: imports_path, class: "dp-form", multipart: true, data: { turbo: false } do |f| %>
     <div class="dp-field">
       <%= f.label :target_key, "Target", class: "dp-label" %>
       <%= f.select :target_key,
             @targets.map { |t| [t[:label], t[:key]] },
             { prompt: "Select a target..." },
-            class: "dp-select" %>
+            id: "dp-target-select-new",
+            class: "dp-select",
+            data: { sources: @targets.map { |t| [t[:key], t[:sources]] }.to_h.to_json } %>
     </div>
 
     <div class="dp-field">
@@ -45,12 +53,31 @@
 
 <script>
   (function() {
+    var targetSelect = document.getElementById("dp-target-select-new");
     var sourceSelect = document.getElementById("dp-source-select-new");
     var fileField = document.getElementById("dp-file-field-new");
     var fileInput = document.getElementById("dp-file-input-new");
     var dropzone = document.getElementById("dp-dropzone-new");
     var fileName = document.getElementById("dp-file-name-new");
 
+    function filterSources() {
+      if (!targetSelect || !sourceSelect) return;
+      var sourcesMap = JSON.parse(targetSelect.dataset.sources || "{}");
+      var allowed = sourcesMap[targetSelect.value];
+      var options = sourceSelect.options;
+      for (var i = 1; i < options.length; i++) {
+        options[i].style.display = allowed && allowed.indexOf(options[i].value) === -1 ? "none" : "";
+      }
+      if (allowed && sourceSelect.selectedIndex > 0 && allowed.indexOf(sourceSelect.value) === -1) {
+        sourceSelect.selectedIndex = 0;
+        fileField.style.display = "";
+      }
+    }
+
+    if (targetSelect) {
+      targetSelect.addEventListener("change", filterSources);
+    }
+
     if (sourceSelect) {
       sourceSelect.addEventListener("change", function() {
         fileField.style.display = this.value === "api" ? "none" : "";

data/app/views/data_porter/imports/show.html.erb

@@ -1,30 +1,64 @@
-<%= stylesheet_link_tag "data_porter/application" %>
-
 <div class="data-porter">
   <div class="dp-header">
+    <div class="dp-header__actions">
+      <%= link_to "Back to imports", imports_path, class: "dp-btn dp-btn--secondary" %>
+    </div>
     <h1 class="dp-title">
       <%= @target._label %> Import #<%= @import.id %>
     </h1>
-    <%= raw DataPorter::Components::StatusBadge.new(status: @import.status).call %>
+    <%= raw DataPorter::Components::Shared::StatusBadge.new(status: @import.status).call %>
+  </div>
+
+  <div class="dp-import-details">
+    <dl class="dp-details-grid">
+      <dt>Target</dt>
+      <dd><%= @target._label %></dd>
+      <dt>Source</dt>
+      <dd><%= @import.source_type.upcase %></dd>
+      <% if @import.file.attached? %>
+        <dt>File</dt>
+        <dd><%= @import.file.filename %></dd>
+      <% end %>
+      <dt>Created</dt>
+      <dd><%= @import.created_at&.strftime("%Y-%m-%d %H:%M") %></dd>
+      <% if @import.report.records_count.positive? %>
+        <dt>Records</dt>
+        <dd><%= @import.report.records_count %></dd>
+      <% end %>
+    </dl>
   </div>
 
-  <% if @import.parsing? || @import.importing? || @import.dry_running? %>
-    <%= raw DataPorter::Components::ProgressBar.new(import_id: @import.id).call %>
+  <% if @import.pending? || @import.parsing? || @import.importing? || @import.dry_running? || @import.extracting_headers? %>
+    <%= raw DataPorter::Components::Progress::Bar.new(import_id: @import.id, status_url: status_import_path(@import)).call %>
+  <% end %>
+
+  <% if @import.mapping? %>
+    <%= raw DataPorter::Components::Mapping::Form.new(
+          import: @import,
+          action_url: update_mapping_import_path(@import),
+          csrf_token: form_authenticity_token,
+          file_headers: @file_headers,
+          target_columns: @target_columns,
+          templates: @templates,
+          default_mapping: @default_mapping
+        ).call %>
   <% end %>
 
   <% if @import.previewing? %>
-    <%= raw DataPorter::Components::SummaryCards.new(report: @import.report).call %>
-    <%= raw DataPorter::Components::PreviewTable.new(
+    <%= raw DataPorter::Components::Preview::SummaryCards.new(report: @import.report).call %>
+    <%= raw DataPorter::Components::Preview::Table.new(
           columns: @target._columns,
           records: @records
         ).call %>
 
     <div class="dp-actions">
-      <%= button_to "Confirm", confirm_import_path(@import),
-            method: :post, class: "dp-btn dp-btn--primary" %>
+      <%= button_to confirm_import_path(@import), method: :post, class: "dp-btn dp-btn--primary", data: { dp_submit: true } do %>
+        Confirm Import
+      <% end %>
       <% if @target._dry_run_enabled %>
-        <%= button_to "Dry Run", dry_run_import_path(@import),
-              method: :post, class: "dp-btn dp-btn--secondary" %>
+        <%= button_to dry_run_import_path(@import), method: :post, class: "dp-btn dp-btn--secondary", data: { dp_submit: true } do %>
+          Dry Run
+        <% end %>
       <% end %>
       <%= button_to "Cancel", cancel_import_path(@import),
             method: :post, class: "dp-btn dp-btn--danger" %>
@@ -32,18 +66,41 @@
   <% end %>
 
   <% if @import.completed? %>
-    <%= raw DataPorter::Components::ResultsSummary.new(report: @import.report).call %>
+    <% duration = @import.updated_at && @import.created_at ? distance_of_time_in_words(@import.created_at, @import.updated_at) : nil %>
+    <%= raw DataPorter::Components::Preview::ResultsSummary.new(report: @import.report, duration: duration).call %>
+    <% if @records.any? %>
+      <%= raw DataPorter::Components::Preview::Table.new(
+            columns: @target._columns,
+            records: @records
+          ).call %>
+    <% end %>
+    <div class="dp-actions">
+      <%= link_to "Back to imports", imports_path, class: "dp-btn dp-btn--primary" %>
+      <%= button_to "Delete", import_path(@import),
+            method: :delete, class: "dp-btn dp-btn--danger",
+            data: { turbo_confirm: "Delete this import?" } %>
+    </div>
   <% end %>
 
   <% if @import.failed? %>
-    <%= raw DataPorter::Components::FailureAlert.new(report: @import.report).call %>
+    <%= raw DataPorter::Components::Shared::FailureAlert.new(report: @import.report).call %>
     <div class="dp-actions">
       <%= button_to "Retry", parse_import_path(@import),
             method: :post, class: "dp-btn dp-btn--primary" %>
+      <%= button_to "Delete", import_path(@import),
+            method: :delete, class: "dp-btn dp-btn--danger",
+            data: { turbo_confirm: "Delete this import?" } %>
     </div>
   <% end %>
-
-  <div class="dp-nav">
-    <%= link_to "Back to imports", imports_path, class: "dp-link" %>
-  </div>
 </div>
+
+<script>
+  (function() {
+    document.querySelectorAll("[data-dp-submit]").forEach(function(btn) {
+      btn.closest("form").addEventListener("submit", function() {
+        btn.disabled = true;
+        btn.innerHTML = '<span class="dp-spinner"></span>Processing...';
+      });
+    });
+  })();
+</script>

data/app/views/data_porter/mapping_templates/_form.html.erb

@@ -0,0 +1,40 @@
+<%= form_with model: template, url: template.persisted? ? mapping_template_path(template) : mapping_templates_path, class: "dp-form", method: template.persisted? ? :patch : :post, data: { controller: "data-porter--template-form", "data-porter--template-form-columns-value": target_columns_map.to_json } do |f| %>
+  <div class="dp-field">
+    <%= f.label :target_key, "Target", class: "dp-label" %>
+    <%= f.select :target_key,
+          targets.map { |t| [t[:label], t[:key]] },
+          { prompt: "Select a target..." },
+          class: "dp-select",
+          data: { action: "change->data-porter--template-form#targetChanged" } %>
+  </div>
+
+  <div class="dp-field">
+    <%= f.label :name, "Template Name", class: "dp-label" %>
+    <%= f.text_field :name, class: "dp-select", placeholder: "e.g. French Headers" %>
+  </div>
+
+  <div class="dp-field">
+    <label class="dp-label">Column Mappings</label>
+    <div id="dp-mapping-pairs" data-data-porter--template-form-target="pairsContainer">
+      <% (template.mapping.presence || { "" => "" }).each do |header, field| %>
+        <div class="dp-mapping-pair" style="display: flex; gap: 0.5rem; margin-bottom: 0.5rem;">
+          <input type="text" name="mapping_template[mapping_keys][]" value="<%= header %>" placeholder="File header" class="dp-select" style="flex: 1;" />
+          <select name="mapping_template[mapping_values][]" class="dp-select" style="flex: 1;" data-data-porter--template-form-target="fieldSelect">
+            <option value="">Select a field...</option>
+            <% if template.target_key.present? && target_columns_map[template.target_key.to_s].present? %>
+              <% target_columns_map[template.target_key.to_s].each do |label, name| %>
+                <option value="<%= name %>" <%= "selected" if name == field.to_s %>><%= label %></option>
+              <% end %>
+            <% end %>
+          </select>
+        </div>
+      <% end %>
+    </div>
+    <button type="button" class="dp-btn dp-btn--secondary" style="margin-top: 0.5rem;" data-action="data-porter--template-form#addPair">+ Add Mapping</button>
+  </div>
+
+  <div class="dp-actions">
+    <%= f.submit template.persisted? ? "Update Template" : "Create Template", class: "dp-btn dp-btn--primary" %>
+    <%= link_to "Cancel", mapping_templates_path, class: "dp-btn dp-btn--secondary" %>
+  </div>
+<% end %>

data/app/views/data_porter/mapping_templates/edit.html.erb

@@ -0,0 +1,11 @@
+<div class="data-porter">
+  <div class="dp-header">
+    <h1 class="dp-title">Edit Mapping Template</h1>
+  </div>
+
+  <%= render "form", template: @template, targets: @targets, target_columns_map: @target_columns_map %>
+
+  <div class="dp-nav">
+    <%= link_to "Back to templates", mapping_templates_path, class: "dp-link" %>
+  </div>
+</div>