Add Docker tweaks/preset button (#201)

* Docker preset button

* All the strings

* Sorry sass-lint

src/nginxconfig/i18n/en/common.js

@@ -35,8 +35,6 @@ export default {
 	https: 'HTTPS',
 	letsEncrypt: 'Let\'s Encrypt',
 	python: 'Python',
-	docker: 'Docker',
-	dockerCompose: 'Docker Compose',
 	wordPress: 'WordPress',
 	drupal: 'Drupal',
 	magento: 'Magento',

src/nginxconfig/i18n/en/templates/global_sections/docker.js

@@ -26,7 +26,16 @@ THE SOFTWARE.
 
 import common from '../../common';
 
+const docker = 'Docker';
+const dockerfile = 'Dockerfile';
+
 export default {
-    dockerfile: `Include Dockerfile to run nginx with ${common.docker}`,
-    dockerCompose: 'Include docker-compose to run nginx with docker-compose',
+    docker,
+    dockerfile,
+    dockerCompose: `${docker} Compose`,
+    applyDockerTweaks: `Apply ${docker} tweaks`,
+    applyDockerTweaksForNginx: `Apply configuration tweaks for running ${common.nginx} with ${docker}`,
+    applyDockerTweaksExplainer: `Updates the ${common.nginx} user to be <code class="slim">nginx</code> and the pid to <code class="slim">/var/run/nginx.pid</code>`,
+    includeDockerfile: `Include ${dockerfile} to run ${common.nginx} with ${docker}`,
+    includeDockerCompose: `Include docker-compose to run ${common.nginx} with docker-compose`,
 };

src/nginxconfig/i18n/zh-cn/common.js

@@ -35,8 +35,6 @@ export default {
     https: 'HTTPS',
     letsEncrypt: 'Let\'s Encrypt',
     python: 'Python',
-    docker: 'Docker',
-    dockerCompose: 'Docker Compose',
     wordPress: 'WordPress',
     drupal: 'Drupal',
     magento: 'Magento',

src/nginxconfig/i18n/zh-cn/templates/global_sections/docker.js

@@ -26,7 +26,16 @@ THE SOFTWARE.
 
 import common from '../../common';
 
+const docker = 'Docker';
+const dockerfile = 'Dockerfile';
+
 export default {
-    dockerfile: `生成Dockerfile运行${common.nginx}与${common.docker}`,
-    dockerCompose: '生成docker-compose.yaml来运行nginx docker-compose',
+    docker,
+    dockerfile,
+    dockerCompose: `${docker} Compose`, // TODO: translate
+    applyDockerTweaks: `Apply ${docker} tweaks`, // TODO: translate
+    applyDockerTweaksForNginx: `Apply configuration tweaks for running ${common.nginx} with ${docker}`, // TODO: translate
+    applyDockerTweaksExplainer: `Updates the ${common.nginx} user to be <code class="slim">nginx</code> and the pid to <code class="slim">/var/run/nginx.pid</code>`, // TODO: translate
+    includeDockerfile: `生成${dockerfile}运行${common.nginx}与${docker}`,
+    includeDockerCompose: `生成docker-compose.yaml来运行${common.nginx} docker-compose`,
 };

src/nginxconfig/i18n/zh-tw/common.js

@@ -35,8 +35,6 @@ export default {
     https: 'HTTPS',
     letsEncrypt: 'Let\'s Encrypt',
     python: 'Python',
-    docker: 'Docker',
-    dockerCompose: 'Docker Compose',
     wordPress: 'WordPress',
     drupal: 'Drupal',
     magento: 'Magento',

src/nginxconfig/i18n/zh-tw/templates/global_sections/docker.js

@@ -26,7 +26,16 @@ THE SOFTWARE.
 
 import common from '../../common';
 
+const docker = 'Docker';
+const dockerfile = 'Dockerfile';
+
 export default {
-    dockerfile: `生成Dockerfile運行${common.nginx}與${common.docker}`,
-    dockerCompose: '生成docker-compose.yaml來運行nginx docker-compose',
+    docker,
+    dockerfile,
+    dockerCompose: `${docker} Compose`, // TODO: translate
+    applyDockerTweaks: `Apply ${docker} tweaks`, // TODO: translate
+    applyDockerTweaksForNginx: `Apply configuration tweaks for running ${common.nginx} with ${docker}`, // TODO: translate
+    applyDockerTweaksExplainer: `Updates the ${common.nginx} user to be <code class="slim">nginx</code> and the pid to <code class="slim">/var/run/nginx.pid</code>`, // TODO: translate
+    includeDockerfile: `生成${dockerfile}運行${common.nginx}與${docker}`,
+    includeDockerCompose: `生成docker-compose.yaml來運行${common.nginx} docker-compose`,
 };

src/nginxconfig/scss/_fields.scss

@@ -48,6 +48,14 @@ THE SOFTWARE.
 
     &.is-aligned-top {
       align-items: flex-start;
+
+      > p {
+        @include sailec-medium;
+
+        color: $dark-grey;
+        font-size: 14px;
+        margin: 0 .5rem;
+      }
     }
 
     + .control {
@@ -118,6 +126,14 @@ THE SOFTWARE.
       color: $dark-grey;
       padding: 0 ($margin * 1.5);
     }
+
+    &.is-tiny {
+      font-size: 14px;
+      height: auto;
+      line-height: normal;
+      margin: .2rem .25rem;
+      padding: ($margin * .5) ($margin * .75);
+    }
   }
 
   .control {

src/nginxconfig/templates/global_sections/docker.vue

@@ -28,7 +28,24 @@ THE SOFTWARE.
     <div>
         <div class="field is-horizontal">
             <div class="field-label">
-                <label class="label">{{ $t('common.docker') }}</label>
+                <label class="label">{{ $t('templates.globalSections.docker.docker') }}</label>
+            </div>
+            <div class="field-body">
+                <div class="field is-horizontal is-aligned-top">
+                    <a class="button is-primary is-tiny" @click="applyDockerTweaks">
+                        {{ $t('templates.globalSections.docker.applyDockerTweaks') }}
+                    </a>
+                    <p>
+                        {{ $t('templates.globalSections.docker.applyDockerTweaksForNginx') }}
+                        <br />
+                        <small v-html="$t('templates.globalSections.docker.applyDockerTweaksExplainer')"></small>
+                    </p>
+                </div>
+            </div>
+        </div>
+        <div class="field is-horizontal">
+            <div class="field-label">
+                <label class="label">{{ $t('templates.globalSections.docker.dockerfile') }}</label>
             </div>
             <div class="field-body">
                 <div class="field">
@@ -36,7 +53,7 @@ THE SOFTWARE.
                         <div class="checkbox">
                             <PrettyCheck v-model="dockerfile" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
-                                {{ $t('templates.globalSections.docker.dockerfile') }}
+                                {{ $t('templates.globalSections.docker.includeDockerfile') }}
                             </PrettyCheck>
                         </div>
                     </div>
@@ -45,7 +62,7 @@ THE SOFTWARE.
         </div>
         <div v-if="dockerfile" class="field is-horizontal">
             <div class="field-label">
-                <label class="label">{{ $t('common.dockerCompose') }}</label>
+                <label class="label">{{ $t('templates.globalSections.docker.dockerCompose') }}</label>
             </div>
             <div class="field-body">
                 <div class="field">
@@ -53,7 +70,7 @@ THE SOFTWARE.
                         <div class="checkbox">
                             <PrettyCheck v-model="dockerCompose" class="p-default p-curve p-fill p-icon">
                                 <i slot="extra" class="icon fas fa-check"></i>
-                                {{ $t('templates.globalSections.docker.dockerCompose') }}
+                                {{ $t('templates.globalSections.docker.includeDockerCompose') }}
                             </PrettyCheck>
                         </div>
                     </div>
@@ -67,6 +84,7 @@ THE SOFTWARE.
     import PrettyCheck from 'pretty-checkbox-vue/check';
     import delegatedFromDefaults from '../../util/delegated_from_defaults';
     import computedFromDefaults from '../../util/computed_from_defaults';
+    import analytics from '../../util/analytics';
 
     const defaults = {
         dockerfile: {
@@ -81,7 +99,7 @@ THE SOFTWARE.
 
     export default {
         name: 'GlobalDocker',                               // Component name
-        display: 'common.docker',                           // Display name for tab (i18n key)
+        display: 'templates.globalSections.docker.docker',  // Display name for tab (i18n key)
         key: 'docker',                                      // Key for data in parent
         delegated: delegatedFromDefaults(defaults),         // Data the parent will present here
         components: {
@@ -106,5 +124,13 @@ THE SOFTWARE.
                 deep: true,
             },
         },
+        methods: {
+            applyDockerTweaks() {
+                analytics('apply_docker_tweaks', 'Presets');
+                this.$parent.setValue('nginx', 'user', 'nginx');
+                this.$parent.setValue('nginx', 'pid', '/var/run/nginx.pid');
+                this.$parent.setValue('docker', 'dockerfile', true);
+            },
+        },
     };
 </script>