Merge pull request #2077 from CodeNow/SAN-5898-new-docker-config-modal

San 5898 new docker config modal

client/assets/styles/scss/views/views-dockerfile-setup.scss

@@ -51,6 +51,8 @@
     align-items: stretch;
     height: auto;
     overflow: visible;
+    padding-bottom: $xs;
+    padding-top: $xs;
     position: relative;
 
     &::after,

client/directives/components/mirrorDockerfile/addDockerfileDirective.js

@@ -19,9 +19,17 @@ function addDockerfile(
     },
     link: function ($scope, elem, attrs, MDC) {
       if ($scope.fileType === 'Docker Compose') {
-        $scope.fileName = 'docker-compose.yml';
-      } else {
+        $scope.fileName = 'compose.yml';
+        $scope.fileLabel = 'Compose file';
+        $scope.formLabel = 'Compose File Path';
+      } else if ($scope.fileType === 'Docker Compose Test') {
+        $scope.fileName = 'compose-test.yml';
+        $scope.fileLabel = 'Compose file';
+        $scope.formLabel = 'Compose File Path';
+      } else if ($scope.fileType === 'Dockerfile') {
         $scope.fileName = 'Dockerfile';
+        $scope.fileLabel = 'Dockerfile';
+        $scope.formLabel = 'Dockerfile Path';
       }
       $scope.closeDockerFileInput = function () {
         if ($scope.fileType === 'Docker Compose') {

client/directives/components/mirrorDockerfile/addDockerfileView.jade

@@ -1,21 +1,25 @@
-form.padding-top-xs.padding-bottom-xs(
+form(
   name = "dockerfilePathForm"
 )
   label.label
-    .padding-xxs.small.label-sm {{ fileType }} Path
+    .padding-xxs.small.label-sm {{formLabel}}
 
     .input-spinner
+      //-
+        If there’s an error parsing a Compose file:
+         - Show the error in our error modal.
+         - Clear this input field.
       input.input.input-md.input-validate(
         autocomplete = "off"
         branch-name = "branchName"
-        dockerfile-exists-validator = "{{ fileType }}"
+        dockerfile-exists-validator = "{{fileType}}"
         full-repo = "fullRepo"
         id = "add-dockerfile-input"
         ng-change = "dockerfile = null"
         ng-disabled = "state.dockerFileAdded"
         ng-model = "newDockerfile"
         ng-model-options = "{ debounce: { 'default': 100, 'blur': 0 } }"
-        placeholder = "Dockerfile"
+        placeholder = "{{fileName}}"
         required
         spellcheck = "false"
       )
@@ -41,12 +45,12 @@ form.padding-top-xs.padding-bottom-xs(
       ng-href = "{{ dockerfile.html_url }}"
       ng-if = "dockerfile.html_url"
       target = "_blank"
-    ) That’s a good lookin’ {{ fileType }}.
+    ) That’s a good lookin’ {{fileLabel}}.
 
     .invalid-message(
       ng-if = "dockerfilePathForm.$invalid && !dockerfilePathForm.$pristine"
-    ) We couldn’t find a {{ fileName }} at that path.
+    ) We couldn’t find a file at that path.
 
     small.grid-block.padding-xxs.small(
       ng-if = "!dockerfile.html_url"
-    ) Use the relative path to your repo’s {{ fileType }} (e.g. A {{ fileName }} at the root level of your code would have the path “{{ fileName }}”). Paths are case sensitive!
+    ) Use the relative path to your repo (e.g. A {{fileName}} at the root level of your code would have the path “{{fileName}}”). Paths are case sensitive!

client/directives/components/mirrorDockerfile/mirrorDockerfileView.jade

@@ -1,9 +1,10 @@
-.grid-content.shrink.list.list-bordered
+.grid-content.shrink.list.list-bordered(
+  ng-if = "!MDC.fromTool && MDC.state.dockerFileTab === 'dockerfile'"
+)
   //- add .disabled class to the not selected item if loading
   label.grid-block.list-item(
     ng-disabled = "$root.isLoading[MDC.name + 'SingleRepo']"
     ng-class = "{'active': MDC.state.configurationMethod === 'new'}"
-    ng-if = "!MDC.fromTool"
   )
     svg.grid-content.shrink.iconnables.icons-dockerfile
       use(
@@ -28,7 +29,7 @@
   label.grid-block.list-item(
     ng-class = "{'active': MDC.state.dockerfile === 'blank'}"
     ng-disabled = "$root.isLoading[MDC.name + 'SingleRepo']"
-    ng-if = "!MDC.fromTool"
+    ng-if = "!MDC.fromTool && MDC.state.dockerFileTab === 'dockerfile'"
   )
     svg.grid-content.shrink.iconnables.icons-dockerfile
       use(
@@ -134,3 +135,19 @@
     ng-if = "MDC.state.configurationMethod === 'dockerComposeFile'"
     view-state = "viewState"
   )
+
+//- input for environment file path
+.grid-block.vertical.label.views-dockerfile-setup(
+  add-dockerfile
+  branch-name = "MDC.branchName"
+  file-type = "Docker Compose"
+  full-repo = "MDC.getFullRepo()"
+  ng-if = "$root.featureFlags.composeNewService && !MDC.fromTool && MDC.state.dockerFileTab === 'compose'"
+  view-state = "viewState"
+)
+
+//- input and settings for testing
+.grid-block.vertical.label(
+  ng-if = "$root.featureFlags.composeNewService && !MDC.fromTool && MDC.state.dockerFileTab === 'compose'"
+  ng-include = "'composeTestView'"
+)

client/directives/components/newContainer/forms/compose/composeTestView.jade

@@ -1,4 +1,4 @@
-.grid-block.vertical.well.gray
+.grid-block.vertical.well.gray.ignore-margin
   label.grid-block.align-center.justify-justified.label
     .padding-left-xxs.small.label-sm Compose File for Testing
     .toggle-wrapper
@@ -8,10 +8,14 @@
       )
       .toggle-group.toggle-sm
 
-  label.label(
+  .grid-block.vertical.label.views-dockerfile-setup(
+    add-dockerfile
+    branch-name = "MDC.branchName"
+    file-type = "Docker Compose Test"
+    full-repo = "MDC.getFullRepo()"
     ng-if = "testEnabled"
-    ng-include = "'composeFilePathView'"
     onload = "type = 'test'"
+    view-state = "viewState"
   )
 
   label.grid-block.vertical.label(

client/directives/components/newContainer/forms/compose/configureComposeView.jade

@@ -1,7 +1,10 @@
 //- input for environment file path
-label.label(
-  ng-include = "'composeFilePathView'"
-  onload = "type = 'environment'"
+.grid-block.vertical.label.views-dockerfile-setup(
+  add-dockerfile
+  branch-name = "MDC.branchName"
+  file-type = "Docker Compose"
+  full-repo = "MDC.getFullRepo()"
+  view-state = "viewState"
 )
 
 //- input and settings for testing

client/directives/components/newContainer/forms/configureNewServiceView.jade

@@ -9,11 +9,10 @@ section.grid-block.vertical.modal-body
 
   .grid-block.vertical.modal-form.no-border
     .label-tabs.grid-block(
-      ng-init = "state.tab = 'dockerfile'"
     )
       label.grid-block.align-center.btn.btn-radio(
-        ng-class = "{'active': state.tab === 'dockerfile'}"
-        ng-click = "state.tab = 'dockerfile'"
+        ng-class = "{'active': NCC.state.dockerFileTab === 'dockerfile'}"
+        ng-click = "NCC.state.dockerFileTab = 'dockerfile'; NCC.state.configurationMethod = 'dockerfile'"
       )
         svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
           use(
@@ -24,8 +23,8 @@ section.grid-block.vertical.modal-body
           small.small Set up from scratch or from a Dockerfile.
 
       label.grid-block.align-center.btn.btn-radio(
-        ng-class = "{'active': state.tab === 'compose'}"
-        ng-click = "state.tab = 'compose'"
+        ng-class = "{'active': NCC.state.dockerFileTab === 'compose'}"
+        ng-click = "NCC.state.dockerFileTab = 'compose'; NCC.state.configurationMethod = 'dockerComposeFile'"
       )
         svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
           use(
@@ -46,32 +45,28 @@ section.grid-block.vertical.modal-body
       branch-name = "NCC.state.repo.attrs.default_branch"
       mirror-dockerfile
       name = "'newContainer'"
-      ng-if = "state.tab === 'dockerfile'"
       repo = "NCC.state.repo"
       state = "NCC.state"
     )
 
-    //- form for compose setup
-    .grid-block.vertical.label.views-compose-setup(
-      ng-if = "state.tab === 'compose'"
-      ng-include = "'configureComposeView'"
-    )
-
 footer.modal-footer.clearfix
   button.btn.btn-md.gray.btn-cancel.float-left(
     ng-click = "NCC.close()"
   ) Cancel
   button.btn.btn-md.green.float-right(
     ng-disabled = "!NCC.state.instanceName.length || NCC.nameForm.$invalid || $root.isLoading.newContainerSingleRepo"
-    ng-click = "NCC.saveName()"
+    ng-click = "$root.featureFlags.composeNewService ? NCC.saveDockerfileMirroring() : NCC.saveName()"
   )
     .spinner-wrapper.spinner-white.spinner-sm.float-left(
       ng-if = "$root.isLoading.newContainerSingleRepo"
       ng-include = "'spinner'"
     )
     span(
-      ng-if = "NCC.state.repo"
+      ng-if = "!$root.featureFlags.composeNewService && NCC.state.repo"
     ) Next Step: Setup
+    span(
+      ng-if = "$root.featureFlags.composeNewService && NCC.state.repo"
+    ) Next Step: Configuration
     span(
       ng-if = "NCC.state.templateSource"
     ) Add Service

client/directives/components/newContainer/newContainerConfigureView.jade

@@ -178,15 +178,18 @@ animated-panel-container.modal-servers
       ) Cancel
       button.btn.btn-md.green.float-right(
         ng-disabled = "!NCC.state.instanceName.length || NCC.nameForm.$invalid || $root.isLoading.newContainerSingleRepo"
-        ng-click = "NCC.saveName()"
+        ng-click = "$root.featureFlags.composeNewService ? NCC.saveDockerfileMirroring() : NCC.saveName()"
       )
         .spinner-wrapper.spinner-white.spinner-sm.float-left(
           ng-if = "$root.isLoading.newContainerSingleRepo"
           ng-include = "'spinner'"
         )
         span(
-          ng-if = "NCC.state.repo"
+          ng-if = "!$root.featureFlags.composeNewService && NCC.state.repo"
         ) Next Step: Setup
+        span(
+          ng-if = "$root.featureFlags.composeNewService && NCC.state.repo"
+        ) Next Step: Configuration
         span(
           ng-if = "NCC.state.templateSource"
         ) Add Service

client/directives/components/newContainer/newContainerController.js

@@ -33,6 +33,7 @@ function NewContainerController(
       panel: 'containerSelection',
       closed: false,
       tabName: 'repos',
+      dockerFileTab: 'dockerfile',
       dockerfile: null,
       configurationMethod: null,
       namesForAllInstances: [],