         [:div {:style {:backgroundColor "#fff"
                        :borderBottom (str "1px solid " (:line-gray style/colors))
                        :padding "20px 48px 18px"}}
-         [:div {:style {:fontSize 24 :align "center" :textAlign "center" :paddingBottom "0.5em"}} "Select A Method Configuration For Import"]
+         [:div {:style {:fontSize 24 :align "center" :textAlign "center" :paddingBottom "0.5em"}}
+          "Select A Method Configuration For Import"]
          [ImportWorkspaceMethodsConfigurationsList {:workspace workspace}]
          [:div {:style {:paddingTop "0.5em"}}]]]])))

  (:require
    [dmohs.react :as react]
    clojure.string
    [org.broadinstitute.firecloud-ui.utils :as utils]
    [org.broadinstitute.firecloud-ui.common :as common]
    [org.broadinstitute.firecloud-ui.common.icons :as icons]
    [org.broadinstitute.firecloud-ui.common.style :as style]
    [org.broadinstitute.firecloud-ui.common.table :as table]
    [org.broadinstitute.firecloud-ui.common.components :as comps]))


(defn- create-mock-methodconfs-import []

    (range (rand-int 50))))


(defn render-import-modal [state props refs]
  [comps/ModalDialog
   {:width 600
    :content (react/create-element
               [:div {}
                [:div {:style {:backgroundColor "#fff"
                               :borderBottom (str "1px solid " (:line-gray style/colors))
                               :padding "20px 48px 18px"
                               :fontSize "137%" :fontWeight 400 :lineHeight 1}}
                 "Import a Method Configuration"]
                [:div {:style {:padding "22px 48px 40px"
                               :backgroundColor (:background-gray style/colors)}}
                 "Destination Name : "
                 (style/create-text-field
                   {:defaultValue (get-in @state [:selected-conf "name"])
                    :ref "destinationName"})
                 [:br]
                 "Destination Namespace : "
                 (style/create-text-field
                   {:defaultValue (get-in @state [:selected-conf "namespace"])
                    :ref "destinationNamespace"})
                 [:br]
                 [comps/Button
                  {:title-text "Import configuration"
                   :icon :plus
                   :onClick
                   (fn []
                     (let [workspace (:workspace props)
                           dest-name-value (.-value
                                             (.getDOMNode (@refs "destinationName")))
                           dest-namespace-value (.-value (.getDOMNode
                                                           (@refs "destinationNamespace")))
                           dest-workspace-name (get workspace "name")
                           dest-workspace-namespace (get workspace "namespace")
                           methodRepoQuery (create-post-data
                                             (:selected-conf @state)
                                             dest-name-value
                                             dest-namespace-value
                                             dest-workspace-name
                                             dest-workspace-namespace)]
                       (swap! state assoc :show-import-mc-modal? false)
                       (utils/ajax-orch
                         (create-path
                           dest-workspace-namespace
                           dest-workspace-name)
                         {:method :post
                          :data (utils/->json-string methodRepoQuery)
                          :canned-response {:status 201
                                            :delay-ms (rand-int 2000)}
                          :on-done (fn [{:keys [success? xhr]}]
                                     (if success?
                                       (utils/rlog  (str "success in import! "
                                                      "Here, perhaps trigger re-render "
                                                      "of the MCs in the current "
                                                      "workspace?"))
                                       (let [returned-err-msg
                                             {:message (.-statusText xhr)}]
                                         (js/alert
                                           (str "Error in Method Configuration Import : "
                                             returned-err-msg)))))})))}]
                 [comps/Button
                  {:title-text "cancel import"
                   :icon :x
                   :onClick (fn []
                              (swap! state assoc :show-import-mc-modal? false))}]]])
    :show-when true}])


(react/defc ImportWorkspaceMethodsConfigurationsList
  {:render
   (fn [{:keys [state props refs]}]
     [:div {}
      (when (:show-import-mc-modal? @state)
        (render-import-modal state props refs))
      (cond
        (:loaded-import-confs? @state)
        (if (zero? (count (:method-confs @state)))
