auto loads package.json if exists

checks for valid project (will need tweaking)

16 files changed, 244 insertions, 151 deletions

diff --git a/app/assets/javascripts/ide/components/panes/right.vue b/app/assets/javascripts/ide/components/panes/right.vue
index 1f291eb497f..33c3a9620ac 100644
--- a/app/assets/javascripts/ide/components/panes/right.vue
+++ b/app/assets/javascripts/ide/components/panes/right.vue
@@ -22,7 +22,7 @@ export default {
     Clientside,
   },
   computed: {
-    ...mapState(['rightPane', 'currentMergeRequestId']),
+    ...mapState(['rightPane', 'currentMergeRequestId', 'clientsidePreviewEnabled']),
     ...mapGetters(['packageJson']),
     pipelinesActive() {
       return (
@@ -101,7 +101,7 @@ export default {
             />
           </button>
         </li>
-        <li v-if="packageJson">
+        <li v-if="packageJson && clientsidePreviewEnabled">
           <button
             v-tooltip
             :title="__('Clientside preview')"
diff --git a/app/assets/javascripts/ide/components/preview.vue b/app/assets/javascripts/ide/components/preview.vue
deleted file mode 100644
index 31967d641a8..00000000000
--- a/app/assets/javascripts/ide/components/preview.vue
+++ /dev/null
@@ -1,58 +0,0 @@
-<script>
-import { mapState } from 'vuex';
-import _ from 'underscore';
-import { Manager } from 'smooshpack';
-
-export default {
-  computed: {
-    ...mapState(['entries']),
-    normalizedEntries() {
-      return Object.keys(this.entries).reduce((acc, path) => {
-        const file = this.entries[path];
-
-        return {
-          ...acc,
-          [`/${path}`]: {
-            code: file.content || file.raw,
-          },
-        };
-      }, {});
-    },
-  },
-  watch: {
-    entries: {
-      deep: true,
-      handler: 'update',
-    },
-  },
-  mounted() {
-    this.manager = new Manager('#ide-preview', {
-      files: this.normalizedEntries,
-      entry: '/index.js',
-      dependencies: {},
-    });
-  },
-  methods: {
-    update: _.debounce(function throttleUpdate() {
-      this.manager.updatePreview({
-        files: this.normalizedEntries,
-        entry: '/index.js',
-        dependencies: {},
-      });
-    }, 500),
-  },
-};
-</script>
-
-<template>
-  <div class="preview">
-    <div id="ide-preview"></div>
-  </div>
-</template>
-
-<style scoped>
-.preview {
-  width: 500px;
-  border-left: 1px solid #eaeaea;
-}
-</style>
diff --git a/app/assets/javascripts/ide/components/preview/clientside.vue b/app/assets/javascripts/ide/components/preview/clientside.vue
index 8ad5817b939..e85acb268b8 100644
--- a/app/assets/javascripts/ide/components/preview/clientside.vue
+++ b/app/assets/javascripts/ide/components/preview/clientside.vue
@@ -1,5 +1,5 @@
 <script>
-import { mapState } from 'vuex';
+import { mapActions, mapGetters, mapState } from 'vuex';
 import _ from 'underscore';
 import { Manager } from 'smooshpack';
 import Icon from '~/vue_shared/components/icon.vue';
@@ -10,11 +10,13 @@ export default {
   },
   data() {
     return {
+      loading: false,
       iframeSrc: '',
     };
   },
   computed: {
-    ...mapState(['entries']),
+    ...mapState(['entries', 'promotionSvgPath']),
+    ...mapGetters(['packageJson']),
     normalizedEntries() {
       return Object.keys(this.entries).reduce((acc, path) => {
         const file = this.entries[path];
@@ -27,6 +29,11 @@ export default {
         };
       }, {});
     },
+    validProject() {
+      const parsedPackage = JSON.parse(this.packageJson.raw);
+
+      return parsedPackage.browser;
+    },
   },
   watch: {
     entries: {
@@ -35,16 +42,36 @@ export default {
     },
   },
   mounted() {
-    this.manager = new Manager('#ide-preview', {
-      files: this.normalizedEntries,
-      entry: '/index.js',
-      dependencies: {},
-    });
+    this.loading = true;
 
-    this.iframeSrc = this.manager.bundlerURL;
+    return this.getFileData({ path: 'package.json', makeFileActive: false })
+      .then(() => this.getRawFileData({ path: 'package.json' }))
+      .then(() => {
+        this.loading = false;
+      })
+      .then(() => this.$nextTick())
+      .then(() => this.initPreview());
   },
   methods: {
+    ...mapActions(['getFileData', 'getRawFileData']),
+    initPreview() {
+      if (!this.validProject) return;
+
+      this.manager = new Manager('#ide-preview', {
+        files: this.normalizedEntries,
+        entry: '/index.js',
+        dependencies: {},
+      });
+
+      this.iframeSrc = this.manager.bundlerURL;
+    },
     update: _.debounce(function throttleUpdate() {
+      if (!this.validProject) return;
+
+      if (!this.manager) {
+        this.initPreview();
+      }
+
       this.manager.updatePreview({
         files: this.normalizedEntries,
         entry: '/index.js',
@@ -57,51 +84,59 @@ export default {
 
 <template>
   <div class="preview h-100 w-100 d-flex flex-column">
-    <header class="ide-preview-header d-flex align-items-center">
-      <button
-        type="button"
-        class="d-transparent border-0"
-      >
-        <icon
-          :size="18"
-          name="chevron-left"
-        />
-      </button>
-      <button
-        type="button"
-        class="d-transparent border-0"
-      >
-        <icon
-          :size="18"
-          name="chevron-right"
-        />
-      </button>
-      <button
-        type="button"
-        class="d-transparent border-0"
-      >
-        <icon
-          name="retry"
+    <template v-if="!loading && validProject">
+      <header class="ide-preview-header d-flex align-items-center">
+        <button
+          :aria-label="s__('IDE|Refresh preview')"
+          type="button"
+          class="d-transparent border-0"
+        >
+          <icon
+            name="retry"
+          />
+        </button>
+        <input
+          v-model="iframeSrc"
+          type="text"
+          class="form-control bg-white w-100"
+          readonly
         />
-      </button>
-      <input
-        v-model="iframeSrc"
-        type="text"
-        class="form-control bg-white w-100"
-        readonly
-      />
-      <a
-        :href="iframeSrc"
-        target="_blank"
-        rel="noopener noreferrer"
-        class="d-transparent border-0"
+        <a
+          :href="iframeSrc"
+          :aria-label="s__('IDE|Open preview in new tab')"
+          target="_blank"
+          rel="noopener noreferrer"
+          class="d-transparent border-0"
+        >
+          <icon
+            name="external-link"
+          />
+        </a>
+      </header>
+      <div id="ide-preview"></div>
+    </template>
+    <template v-else-if="!loading && !validProject">
+      <div
+        v-once
+        class="p-2 d-flex h-100 flex-column align-items-center justify-content-center"
       >
-        <icon
-          name="external-link"
+        <img
+          :src="promotionSvgPath"
         />
-      </a>
-    </header>
-    <div id="ide-preview"></div>
+        <h3>
+          {{ s__('IDE|Live Preview') }}
+        </h3>
+        <p class="text-center">
+          {{ s__('IDE|Preview your web application using Web IDE clientside evaluation.') }}
+        </p>
+        <a
+          href=""
+          class="btn btn-primary"
+        >
+          {{ s__('IDE|Get started with Live Preview') }}
+        </a>
+      </div>
+    </template>
   </div>
 </template>
 
diff --git a/app/assets/javascripts/ide/index.js b/app/assets/javascripts/ide/index.js
index 2d74192e6b3..06ff790918f 100644
--- a/app/assets/javascripts/ide/index.js
+++ b/app/assets/javascripts/ide/index.js
@@ -4,6 +4,7 @@ import Translate from '~/vue_shared/translate';
 import ide from './components/ide.vue';
 import store from './stores';
 import router from './ide_router';
+import { convertPermissionToBoolean } from '../lib/utils/common_utils';
 
 Vue.use(Translate);
 
@@ -23,13 +24,17 @@ export function initIde(el) {
         noChangesStateSvgPath: el.dataset.noChangesStateSvgPath,
         committedStateSvgPath: el.dataset.committedStateSvgPath,
         pipelinesEmptyStateSvgPath: el.dataset.pipelinesEmptyStateSvgPath,
+        promotionSvgPath: el.dataset.promotionSvgPath,
       });
       this.setLinks({
         ciHelpPagePath: el.dataset.ciHelpPagePath,
       });
+      this.setInitialData({
+        clientsidePreviewEnabled: convertPermissionToBoolean(el.dataset.clientsidePreviewEnabled),
+      });
     },
     methods: {
-      ...mapActions(['setEmptyStateSvgs', 'setLinks']),
+      ...mapActions(['setEmptyStateSvgs', 'setLinks', 'setInitialData']),
     },
     render(createElement) {
       return createElement('ide');
diff --git a/app/assets/javascripts/ide/stores/actions/file.js b/app/assets/javascripts/ide/stores/actions/file.js
index 6c0887e11ee..534b2feeb59 100644
--- a/app/assets/javascripts/ide/stores/actions/file.js
+++ b/app/assets/javascripts/ide/stores/actions/file.js
@@ -71,7 +71,7 @@ export const getFileData = ({ state, commit, dispatch }, { path, makeFileActive
       setPageTitle(decodeURI(normalizedHeaders['PAGE-TITLE']));
 
       commit(types.SET_FILE_DATA, { data, file });
-      commit(types.TOGGLE_FILE_OPEN, path);
+      if (makeFileActive) commit(types.TOGGLE_FILE_OPEN, path);
       if (makeFileActive) dispatch('setFileActive', path);
       commit(types.TOGGLE_LOADING, { entry: file });
     })
diff --git a/app/assets/javascripts/ide/stores/mutations.js b/app/assets/javascripts/ide/stores/mutations.js
index f8091f5b5e0..0e49c5defb2 100644
--- a/app/assets/javascripts/ide/stores/mutations.js
+++ b/app/assets/javascripts/ide/stores/mutations.js
@@ -114,13 +114,20 @@ export default {
   },
   [types.SET_EMPTY_STATE_SVGS](
     state,
-    { emptyStateSvgPath, noChangesStateSvgPath, committedStateSvgPath, pipelinesEmptyStateSvgPath },
+    {
+      emptyStateSvgPath,
+      noChangesStateSvgPath,
+      committedStateSvgPath,
+      pipelinesEmptyStateSvgPath,
+      promotionSvgPath,
+    },
   ) {
     Object.assign(state, {
       emptyStateSvgPath,
       noChangesStateSvgPath,
       committedStateSvgPath,
       pipelinesEmptyStateSvgPath,
+      promotionSvgPath,
     });
   },
   [types.TOGGLE_FILE_FINDER](state, fileFindVisible) {
diff --git a/app/assets/javascripts/ide/stores/mutations/file.js b/app/assets/javascripts/ide/stores/mutations/file.js
index 46547820425..0c188fd9aa6 100644
--- a/app/assets/javascripts/ide/stores/mutations/file.js
+++ b/app/assets/javascripts/ide/stores/mutations/file.js
@@ -43,7 +43,7 @@ export default {
       rawPath: data.raw_path,
       binary: data.binary,
       renderError: data.render_error,
-      raw: null,
+      raw: state.entries[file.path].raw || null,
       baseRaw: null,
       html: data.html,
       size: data.size,
diff --git a/app/assets/javascripts/ide/stores/state.js b/app/assets/javascripts/ide/stores/state.js
index 0f32a267469..e7a850b598f 100644
--- a/app/assets/javascripts/ide/stores/state.js
+++ b/app/assets/javascripts/ide/stores/state.js
@@ -30,4 +30,5 @@ export default () => ({
     type: '',
     path: '',
   },
+  clientsidePreviewEnabled: false,
 });
diff --git a/app/helpers/application_settings_helper.rb b/app/helpers/application_settings_helper.rb
index 358b896702b..11b76049d9e 100644
--- a/app/helpers/application_settings_helper.rb
+++ b/app/helpers/application_settings_helper.rb
@@ -254,7 +254,8 @@ module ApplicationSettingsHelper
       :hide_third_party_offers,
       :enforce_terms,
       :terms,
-      :mirror_available
+      :mirror_available,
+      :web_ide_clientside_preview_enabled
     ]
   end
 end
diff --git a/app/views/admin/application_settings/show.html.haml b/app/views/admin/application_settings/show.html.haml
index 5cb8001a364..ef723db0ec8 100644
--- a/app/views/admin/application_settings/show.html.haml
+++ b/app/views/admin/application_settings/show.html.haml
@@ -336,5 +336,28 @@
   .settings-content
     = render 'third_party_offers', application_setting: @application_setting
 
+%section.settings.as-third-party-offers.no-animate#js-third-party-offers-settings{ class: ('expanded' if expanded) }
+  .settings-header
+    %h4
+      = _('Web IDE')
+    %button.btn.btn-default.js-settings-toggle{ type: 'button' }
+      = expanded ? _('Collapse') : _('Expand')
+    %p
+      = _('Manage Web IDE features')
+  .settings-content
+    = form_for @application_setting, url: admin_application_settings_path, html: { class: 'fieldset-form' } do |f|
+      = form_errors(@application_setting)
+    
+      %fieldset
+        .form-group
+          .form-check
+            = f.check_box :web_ide_clientside_preview_enabled, class: 'form-check-input'
+            = f.label :web_ide_clientside_preview_enabled, class: 'form-check-label' do
+              Client side evaluation
+            %span.form-text.text-muted
+              Allow live previews of JavaScript projects in the Web IDE using CodeSandbox client side evaluation.
+    
+      = f.submit 'Save changes', class: "btn btn-success"
+
 = render_if_exists 'admin/application_settings/pseudonymizer_settings', expanded: expanded
 
diff --git a/app/views/ide/index.html.haml b/app/views/ide/index.html.haml
index 9f8b0acd763..aa9e486756b 100644
--- a/app/views/ide/index.html.haml
+++ b/app/views/ide/index.html.haml
@@ -5,7 +5,9 @@
   "no-changes-state-svg-path" => image_path('illustrations/multi-editor_no_changes_empty.svg'),
   "committed-state-svg-path" => image_path('illustrations/multi-editor_all_changes_committed_empty.svg'),
   "pipelines-empty-state-svg-path": image_path('illustrations/pipelines_empty.svg'),
-  "ci-help-page-path" => help_page_path('ci/quick_start/README'), } }
+  "promotion-svg-path": image_path('illustrations/web_ide_promotion.svg'),
+  "ci-help-page-path" => help_page_path('ci/quick_start/README'),
+  "clientside-preview-enabled": Gitlab::CurrentSettings.current_application_settings.web_ide_clientside_preview_enabled.to_s } }
   .text-center
     = icon('spinner spin 2x')
     %h2.clgray= _('Loading the GitLab IDE...')
diff --git a/db/migrate/20180723135214_add_web_ide_client_side_preview_enabled_to_application_settings.rb b/db/migrate/20180723135214_add_web_ide_client_side_preview_enabled_to_application_settings.rb
new file mode 100644
index 00000000000..3b46a663785
--- /dev/null
+++ b/db/migrate/20180723135214_add_web_ide_client_side_preview_enabled_to_application_settings.rb
@@ -0,0 +1,18 @@
+class AddWebIdeClientSidePreviewEnabledToApplicationSettings < ActiveRecord::Migration
+  include Gitlab::Database::MigrationHelpers  
+
+  DOWNTIME = false
+
+  disable_ddl_transaction!
+
+  def up
+    add_column_with_default(:application_settings, :web_ide_clientside_preview_enabled,
+                            :boolean,
+                            default: false,
+                            allow_null: false)
+  end
+
+  def down
+    remove_column(:application_settings, :web_ide_clientside_preview_enabled)
+  end
+end
diff --git a/db/schema.rb b/db/schema.rb
index 3db11d8447e..837bc7f574d 100644
--- a/db/schema.rb
+++ b/db/schema.rb
@@ -11,7 +11,7 @@
 #
 # It's strongly recommended that you check this file into your version control system.
 
-ActiveRecord::Schema.define(version: 20180722103201) do
+ActiveRecord::Schema.define(version: 20180723135214) do
 
   # These are extensions that must be enabled in order to support this database
   enable_extension "plpgsql"
@@ -110,10 +110,6 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.text "help_page_text_html"
     t.text "shared_runners_text_html"
     t.text "after_sign_up_text_html"
-    t.integer "rsa_key_restriction", default: 0, null: false
-    t.integer "dsa_key_restriction", default: -1, null: false
-    t.integer "ecdsa_key_restriction", default: 0, null: false
-    t.integer "ed25519_key_restriction", default: 0, null: false
     t.boolean "housekeeping_enabled", default: true, null: false
     t.boolean "housekeeping_bitmaps_enabled", default: true, null: false
     t.integer "housekeeping_incremental_repack_period", default: 10, null: false
@@ -139,9 +135,13 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.boolean "help_page_hide_commercial_content", default: false
     t.string "help_page_support_url"
     t.integer "performance_bar_allowed_group_id"
-    t.boolean "hashed_storage_enabled", default: false, null: false
     t.boolean "project_export_enabled", default: true, null: false
+    t.boolean "hashed_storage_enabled", default: false, null: false
     t.boolean "auto_devops_enabled", default: false, null: false
+    t.integer "rsa_key_restriction", default: 0, null: false
+    t.integer "dsa_key_restriction", default: -1, null: false
+    t.integer "ecdsa_key_restriction", default: 0, null: false
+    t.integer "ed25519_key_restriction", default: 0, null: false
     t.integer "circuitbreaker_failure_count_threshold", default: 3
     t.integer "circuitbreaker_failure_reset_time", default: 1800
     t.integer "circuitbreaker_storage_timeout", default: 15
@@ -155,12 +155,13 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.boolean "throttle_authenticated_web_enabled", default: false, null: false
     t.integer "throttle_authenticated_web_requests_per_period", default: 7200, null: false
     t.integer "throttle_authenticated_web_period_in_seconds", default: 3600, null: false
-    t.integer "circuitbreaker_check_interval", default: 1, null: false
-    t.boolean "password_authentication_enabled_for_web"
-    t.boolean "password_authentication_enabled_for_git", default: true
+    t.boolean "password_authentication_enabled_for_git", default: true, null: false
     t.integer "gitaly_timeout_default", default: 55, null: false
     t.integer "gitaly_timeout_medium", default: 30, null: false
     t.integer "gitaly_timeout_fast", default: 10, null: false
+    t.boolean "password_authentication_enabled"
+    t.boolean "password_authentication_enabled_for_web"
+    t.integer "circuitbreaker_check_interval", default: 1, null: false
     t.boolean "authorized_keys_enabled", default: true, null: false
     t.string "auto_devops_domain"
     t.boolean "pages_domain_verification_enabled", default: true, null: false
@@ -168,6 +169,7 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.boolean "enforce_terms", default: false
     t.boolean "mirror_available", default: true, null: false
     t.boolean "hide_third_party_offers", default: false, null: false
+    t.boolean "web_ide_clientside_preview_enabled", default: false, null: false
   end
 
   create_table "audit_events", force: :cascade do |t|
@@ -326,10 +328,10 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.integer "auto_canceled_by_id"
     t.boolean "retried"
     t.integer "stage_id"
-    t.integer "artifacts_file_store"
-    t.integer "artifacts_metadata_store"
     t.boolean "protected"
     t.integer "failure_reason"
+    t.integer "artifacts_file_store"
+    t.integer "artifacts_metadata_store"
   end
 
   add_index "ci_builds", ["artifacts_expire_at"], name: "index_ci_builds_on_artifacts_expire_at", where: "(artifacts_file <> ''::text)", using: :btree
@@ -368,6 +370,38 @@ ActiveRecord::Schema.define(version: 20180722103201) do
 
   add_index "ci_builds_runner_session", ["build_id"], name: "index_ci_builds_runner_session_on_build_id", unique: true, using: :btree
 
+  create_table "ci_clusters", force: :cascade do |t|
+    t.integer "project_id", null: false
+    t.integer "user_id", null: false
+    t.integer "service_id"
+    t.boolean "enabled", default: true
+    t.integer "status"
+    t.string "status_reason"
+    t.string "project_namespace"
+    t.string "endpoint"
+    t.text "ca_cert"
+    t.string "encrypted_kubernetes_token"
+    t.string "encrypted_kubernetes_token_salt"
+    t.string "encrypted_kubernetes_token_iv"
+    t.string "username"
+    t.string "encrypted_password"
+    t.string "encrypted_password_salt"
+    t.string "encrypted_password_iv"
+    t.string "gcp_project_id", null: false
+    t.string "cluster_zone", null: false
+    t.string "cluster_name", null: false
+    t.integer "cluster_size", null: false
+    t.string "machine_type"
+    t.string "gcp_operation_id"
+    t.string "encrypted_gcp_token"
+    t.string "encrypted_gcp_token_salt"
+    t.string "encrypted_gcp_token_iv"
+    t.datetime_with_timezone "created_at", null: false
+    t.datetime_with_timezone "updated_at", null: false
+  end
+
+  add_index "ci_clusters", ["project_id"], name: "index_ci_clusters_on_project_id", unique: true, using: :btree
+
   create_table "ci_group_variables", force: :cascade do |t|
     t.string "key", null: false
     t.text "value"
@@ -386,13 +420,13 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.integer "project_id", null: false
     t.integer "job_id", null: false
     t.integer "file_type", null: false
-    t.integer "file_store"
     t.integer "size", limit: 8
     t.datetime_with_timezone "created_at", null: false
     t.datetime_with_timezone "updated_at", null: false
     t.datetime_with_timezone "expire_at"
     t.string "file"
     t.binary "file_sha256"
+    t.integer "file_store"
   end
 
   add_index "ci_job_artifacts", ["expire_at", "job_id"], name: "index_ci_job_artifacts_on_expire_at_and_job_id", using: :btree
@@ -930,8 +964,8 @@ ActiveRecord::Schema.define(version: 20180722103201) do
   add_index "gpg_signatures", ["project_id"], name: "index_gpg_signatures_on_project_id", using: :btree
 
   create_table "group_custom_attributes", force: :cascade do |t|
-    t.datetime "created_at", null: false
-    t.datetime "updated_at", null: false
+    t.datetime_with_timezone "created_at", null: false
+    t.datetime_with_timezone "updated_at", null: false
     t.integer "group_id", null: false
     t.string "key", null: false
     t.string "value", null: false
@@ -1154,8 +1188,8 @@ ActiveRecord::Schema.define(version: 20180722103201) do
   add_index "members", ["user_id"], name: "index_members_on_user_id", using: :btree
 
   create_table "merge_request_diff_commits", id: false, force: :cascade do |t|
-    t.datetime_with_timezone "authored_date"
-    t.datetime_with_timezone "committed_date"
+    t.datetime "authored_date"
+    t.datetime "committed_date"
     t.integer "merge_request_diff_id", null: false
     t.integer "relative_order", null: false
     t.binary "sha", null: false
@@ -1510,15 +1544,15 @@ ActiveRecord::Schema.define(version: 20180722103201) do
   add_index "project_authorizations", ["user_id", "project_id", "access_level"], name: "index_project_authorizations_on_user_id_project_id_access_level", unique: true, using: :btree
 
   create_table "project_auto_devops", force: :cascade do |t|
-    t.integer "project_id", null: false
-    t.datetime_with_timezone "created_at", null: false
-    t.datetime_with_timezone "updated_at", null: false
+    t.integer "project_id"
     t.boolean "enabled"
     t.string "domain"
+    t.datetime_with_timezone "created_at", null: false
+    t.datetime_with_timezone "updated_at", null: false
     t.integer "deploy_strategy", default: 0, null: false
   end
 
-  add_index "project_auto_devops", ["project_id"], name: "index_project_auto_devops_on_project_id", unique: true, using: :btree
+  add_index "project_auto_devops", ["project_id"], name: "index_project_auto_devops_on_project_id", using: :btree
 
   create_table "project_ci_cd_settings", force: :cascade do |t|
     t.integer "project_id", null: false
@@ -1528,8 +1562,8 @@ ActiveRecord::Schema.define(version: 20180722103201) do
   add_index "project_ci_cd_settings", ["project_id"], name: "index_project_ci_cd_settings_on_project_id", unique: true, using: :btree
 
   create_table "project_custom_attributes", force: :cascade do |t|
-    t.datetime "created_at", null: false
-    t.datetime "updated_at", null: false
+    t.datetime_with_timezone "created_at", null: false
+    t.datetime_with_timezone "updated_at", null: false
     t.integer "project_id", null: false
     t.string "key", null: false
     t.string "value", null: false
@@ -1640,7 +1674,6 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.string "repository_storage", default: "default", null: false
     t.boolean "request_access_enabled", default: false, null: false
     t.boolean "has_external_wiki"
-    t.string "ci_config_path"
     t.boolean "lfs_enabled"
     t.text "description_html"
     t.boolean "only_allow_merge_if_all_discussions_are_resolved"
@@ -1648,13 +1681,14 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.integer "auto_cancel_pending_pipelines", default: 1, null: false
     t.string "import_jid"
     t.integer "cached_markdown_version"
-    t.text "delete_error"
     t.datetime "last_repository_updated_at"
+    t.string "ci_config_path"
+    t.text "delete_error"
     t.integer "storage_version", limit: 2
     t.boolean "resolve_outdated_diff_discussions"
     t.boolean "repository_read_only"
-    t.boolean "merge_requests_ff_only_enabled", default: false
     t.boolean "merge_requests_rebase_enabled", default: false, null: false
+    t.boolean "merge_requests_ff_only_enabled", default: false, null: false
     t.integer "jobs_cache_index"
     t.boolean "pages_https_only", default: true
     t.boolean "remote_mirror_available_overridden"
@@ -1951,7 +1985,7 @@ ActiveRecord::Schema.define(version: 20180722103201) do
 
   create_table "todos", force: :cascade do |t|
     t.integer "user_id", null: false
-    t.integer "project_id", null: false
+    t.integer "project_id"
     t.integer "target_id"
     t.string "target_type", null: false
     t.integer "author_id", null: false
@@ -1961,10 +1995,12 @@ ActiveRecord::Schema.define(version: 20180722103201) do
     t.datetime "updated_at"
     t.integer "note_id"
     t.string "commit_id"
+    t.integer "group_id"
   end
 
   add_index "todos", ["author_id"], name: "index_todos_on_author_id", using: :btree
   add_index "todos", ["commit_id"], name: "index_todos_on_commit_id", using: :btree
+  add_index "todos", ["group_id"], name: "index_todos_on_group_id", using: :btree
   add_index "todos", ["note_id"], name: "index_todos_on_note_id", using: :btree
   add_index "todos", ["project_id"], name: "index_todos_on_project_id", using: :btree
   add_index "todos", ["target_type", "target_id"], name: "index_todos_on_target_type_and_target_id", using: :btree
@@ -2212,6 +2248,9 @@ ActiveRecord::Schema.define(version: 20180722103201) do
   add_foreign_key "ci_builds_metadata", "ci_builds", column: "build_id", on_delete: :cascade
   add_foreign_key "ci_builds_metadata", "projects", on_delete: :cascade
   add_foreign_key "ci_builds_runner_session", "ci_builds", column: "build_id", on_delete: :cascade
+  add_foreign_key "ci_clusters", "projects", on_delete: :cascade
+  add_foreign_key "ci_clusters", "services"
+  add_foreign_key "ci_clusters", "users"
   add_foreign_key "ci_group_variables", "namespaces", column: "group_id", name: "fk_33ae4d58d8", on_delete: :cascade
   add_foreign_key "ci_job_artifacts", "ci_builds", column: "job_id", on_delete: :cascade
   add_foreign_key "ci_job_artifacts", "projects", on_delete: :cascade
@@ -2237,10 +2276,10 @@ ActiveRecord::Schema.define(version: 20180722103201) do
   add_foreign_key "cluster_providers_gcp", "clusters", on_delete: :cascade
   add_foreign_key "clusters", "users", on_delete: :nullify
   add_foreign_key "clusters_applications_helm", "clusters", on_delete: :cascade
-  add_foreign_key "clusters_applications_ingress", "clusters", name: "fk_753a7b41c1", on_delete: :cascade
+  add_foreign_key "clusters_applications_ingress", "clusters", on_delete: :cascade
   add_foreign_key "clusters_applications_jupyter", "clusters", on_delete: :cascade
   add_foreign_key "clusters_applications_jupyter", "oauth_applications", on_delete: :nullify
-  add_foreign_key "clusters_applications_prometheus", "clusters", name: "fk_557e773639", on_delete: :cascade
+  add_foreign_key "clusters_applications_prometheus", "clusters", on_delete: :cascade
   add_foreign_key "clusters_applications_runners", "ci_runners", column: "runner_id", name: "fk_02de2ded36", on_delete: :nullify
   add_foreign_key "clusters_applications_runners", "clusters", on_delete: :cascade
   add_foreign_key "container_repositories", "projects"
@@ -2311,7 +2350,7 @@ ActiveRecord::Schema.define(version: 20180722103201) do
   add_foreign_key "personal_access_tokens", "users"
   add_foreign_key "project_authorizations", "projects", on_delete: :cascade
   add_foreign_key "project_authorizations", "users", on_delete: :cascade
-  add_foreign_key "project_auto_devops", "projects", on_delete: :cascade
+  add_foreign_key "project_auto_devops", "projects", name: "fk_45436b12b2", on_delete: :cascade
   add_foreign_key "project_ci_cd_settings", "projects", name: "fk_24c15d2f2e", on_delete: :cascade
   add_foreign_key "project_custom_attributes", "projects", on_delete: :cascade
   add_foreign_key "project_deploy_tokens", "deploy_tokens", on_delete: :cascade
@@ -2339,6 +2378,7 @@ ActiveRecord::Schema.define(version: 20180722103201) do
   add_foreign_key "term_agreements", "users", on_delete: :cascade
   add_foreign_key "timelogs", "issues", name: "fk_timelogs_issues_issue_id", on_delete: :cascade
   add_foreign_key "timelogs", "merge_requests", name: "fk_timelogs_merge_requests_merge_request_id", on_delete: :cascade
+  add_foreign_key "todos", "namespaces", column: "group_id", name: "fk_a27c483435", on_delete: :cascade
   add_foreign_key "todos", "notes", name: "fk_91d1f47b13", on_delete: :cascade
   add_foreign_key "todos", "projects", name: "fk_45054f9c45", on_delete: :cascade
   add_foreign_key "todos", "users", column: "author_id", name: "fk_ccf0373936", on_delete: :cascade
diff --git a/locale/gitlab.pot b/locale/gitlab.pot
index 09a35b5da07..044851bf143 100644
--- a/locale/gitlab.pot
+++ b/locale/gitlab.pot
@@ -8,8 +8,6 @@ msgid ""
 msgstr ""
 "Project-Id-Version: gitlab 1.0.0\n"
 "Report-Msgid-Bugs-To: \n"
-"POT-Creation-Date: 2018-07-10 16:02-0700\n"
-"PO-Revision-Date: 2018-07-10 16:02-0700\n"
 "Last-Translator: FULL NAME <EMAIL@ADDRESS>\n"
 "Language-Team: LANGUAGE <LL@li.org>\n"
 "Language: \n"
@@ -1184,6 +1182,9 @@ msgstr ""
 msgid "Clients"
 msgstr ""
 
+msgid "Clientside preview"
+msgstr ""
+
 msgid "Clone repository"
 msgstr ""
 
@@ -2826,12 +2827,27 @@ msgstr ""
 msgid "IDE|Edit"
 msgstr ""
 
+msgid "IDE|Get started with Live Preview"
+msgstr ""
+
 msgid "IDE|Go back"
 msgstr ""
 
+msgid "IDE|Live Preview"
+msgstr ""
+
 msgid "IDE|Open in file view"
 msgstr ""
 
+msgid "IDE|Open preview in new tab"
+msgstr ""
+
+msgid "IDE|Preview your web application using Web IDE clientside evaluation."
+msgstr ""
+
+msgid "IDE|Refresh preview"
+msgstr ""
+
 msgid "IDE|Review"
 msgstr ""
 
@@ -3155,6 +3171,9 @@ msgstr ""
 msgid "Make sure you're logged into the account that owns the projects you'd like to import."
 msgstr ""
 
+msgid "Manage Web IDE features"
+msgstr ""
+
 msgid "Manage access"
 msgstr ""
 
diff --git a/package.json b/package.json
index 7ac56c55fca..9a72ef5f088 100644
--- a/package.json
+++ b/package.json
@@ -78,7 +78,7 @@
     "sanitize-html": "^1.16.1",
     "select2": "3.5.2-browserify",
     "sha1": "^1.1.1",
-    "smooshpack": "^0.0.39",
+    "smooshpack": "^0.0.44",
     "sortablejs": "^1.7.0",
     "sql.js": "^0.4.0",
     "stickyfilljs": "^2.0.5",
diff --git a/yarn.lock b/yarn.lock
index 1da518a7e08..e35dd00f9f6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -6557,9 +6557,9 @@ smart-buffer@^4.0.1:
   version "4.0.1"
   resolved "https://registry.yarnpkg.com/smart-buffer/-/smart-buffer-4.0.1.tgz#07ea1ca8d4db24eb4cac86537d7d18995221ace3"
 
-smooshpack@^0.0.39:
-  version "0.0.39"
-  resolved "https://registry.yarnpkg.com/smooshpack/-/smooshpack-0.0.39.tgz#46b55332df201dedb351550b1edca60652ee84cc"
+smooshpack@^0.0.44:
+  version "0.0.44"
+  resolved "https://registry.yarnpkg.com/smooshpack/-/smooshpack-0.0.44.tgz#272d22f90572ce57129a9e0a60378085db9d6e6f"
   dependencies:
     codesandbox-api "^0.0.18"
     codesandbox-import-utils "^1.2.3"