San 6007 edit compose

client/directives/components/mirrorDockerfile/addDockerfileView.jade

@@ -15,7 +15,7 @@ form(
         dockerfile-exists-validator = "{{fileType}}"
         full-repo = "fullRepo"
         id = "add-dockerfile-input"
-        ng-disabled = "state.dockerFileAdded"
+        ng-disabled = "state.dockerFileAdded || $root.featureFlags.composeEditing"
         ng-model = "newDockerfile"
         ng-model-options = "{ debounce: { 'default': 100, 'blur': 0 } }"
         placeholder = "{{ fileName }}"

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

@@ -3,6 +3,7 @@
     .padding-left-xxs.small.label-sm {{type === 'stage' ? 'Compose for Staging' : 'Compose for Testing'}}
     .toggle-wrapper
       input.toggle-input(
+        ng-disabled = "$root.featureFlags.composeEditing"
         ng-model = "pathEnabled"
         type = "checkbox"
       )

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

@@ -1,56 +1,54 @@
-section.grid-block.vertical.modal-body
-
+header.grid-block.vertical.align-center.modal-header(
+  ng-if = "$root.featureFlags.composeEditing"
+  ng-init = "state.selectedTab = 'compose'"
+)
+  .container-title-wrapper
+    .server-status-card-pop-over.no-touching
+      .container-title {{NCC.state.instanceName}}
   svg.iconnables.icons-close(
     ng-click = "NCC.close()"
   )
     use(
       xlink:href = "#icons-close"
     )
 
-  .grid-block.vertical.modal-form.no-border
-    .label-tabs.grid-block
-      label.grid-block.align-center.btn.btn-radio(
-        ng-class = "{'active': NCC.state.dockerFileTab === 'kubernetes'}"
-        ng-click = "\
-          NCC.state.dockerFileTab = 'kubernetes';\
-          NCC.state.configurationMethod = 'dockerComposeFile'\
-        "
-        ng-if = "$root.featureFlags.kubernetes"
-      )
-        svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
-          use(
-            xlink:href = "#icons-check"
-          )
-        .grid-block.vertical.text-left
-          p.p.weight-strong Use Kubernetes
-          small.small Set up from Kubernetes files in your repo.
+  .row.modal-tabs.tabs-all.grid-block.clearfix(
+    ng-init = "tabs = [\
+      {name: 'compose', iconName: 'icons-compose', label: 'Compose Files'},\
+      {name: 'env', iconName: 'icons-environment-variable', label: 'Environment Variables'}\
+    ];"
+  )
+    button.btn.btn-radio.grid-block.vertical(
+      ng-class = "{'active': state.selectedTab === '{{tab.name}}'}"
+      ng-click = "state.selectedTab = tab.name"
+      ng-repeat = "tab in tabs"
+    )
+      svg.iconnables.grid-content
+        use(
+          ng-attr-xlink:href = "{{'#' + $sce.trustAs($sce.HTML, tab.iconName)}}"
+          xlink:href = ""
+        )
+      .btn-text.grid-content {{tab.label}}
+
+section.grid-block.vertical.modal-body(
+  ng-init = "state.selectedTab = 'compose'"
+)
 
-      label.grid-block.align-center.btn.btn-radio(
-        data-event-name = "Selected Compose Setup"
-        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(
-            xlink:href = "#icons-check"
-          )
-        .grid-block.vertical.text-left
-          p.p.weight-strong Use a Compose File
-          small.small Set up from a Compose file in your repo.
+  svg.iconnables.icons-close(
+    ng-click = "NCC.close()"
+    ng-if = "!$root.featureFlags.composeEditing"
+  )
+    use(
+      xlink:href = "#icons-close"
+    )
 
-      label.grid-block.align-center.btn.btn-radio(
-        data-event-name = "Selected Dockerfile Setup"
-        ng-class = "{'active': NCC.state.dockerFileTab === 'dockerfile'}"
-        ng-click = "NCC.state.dockerFileTab = 'dockerfile'; NCC.state.configurationMethod = 'dockerfile'"
-        ng-if = "!$root.featureFlags.kubernetes"
-      )
-        svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
-          use(
-            xlink:href = "#icons-check"
-          )
-        .grid-block.vertical.text-left
-          p.p.weight-strong No Compose File
-          small.small Set up from scratch or from a Dockerfile.
+  .grid-block.vertical.modal-form.no-border(
+    ng-if = "state.selectedTab === 'compose'"
+  )
+    .label-tabs.grid-block(
+      ng-if = "!$root.featureFlags.composeEditing"
+      ng-include = "'setupMethodView'"
+    )
 
     //- form for naming the environment
     form.grid-block.vertical.label(
@@ -82,6 +80,12 @@ section.grid-block.vertical.modal-body
       state = "NCC.state"
     )
 
+  .modal-form(
+    ng-form = "envVarForm"
+    ng-include = "'viewFormEnvironmentVariables'"
+    ng-if = "state.selectedTab === 'env'"
+  )
+
 footer.modal-footer.clearfix
   button.btn.btn-md.gray.btn-cancel.float-left(
     ng-click = "NCC.close()"
@@ -97,7 +101,7 @@ footer.modal-footer.clearfix
     )
     span(
       ng-if = "$root.featureFlags.composeNewService && NCC.state.repo"
-    ) {{ NCC.getNextStepText() }}
+    ) {{$root.featureFlags.composeEditing ? 'Save Changes' : 'NCC.getNextStepText()'}}
     span(
       ng-if = "NCC.state.templateSource"
     ) Add Service

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

@@ -6,6 +6,7 @@ label
       maxlength = "19"
       name = "instanceName"
       no-double-dash-validator
+      ng-disabled = "$root.featureFlags.composeEditing"
       ng-model = "NCC.state.instanceName"
       ng-pattern = "/^[a-zA-Z0-9-]*$/"
       ng-placeholder = "{{NCC.state.instanceName}}"

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

@@ -0,0 +1,42 @@
+label.grid-block.align-center.btn.btn-radio(
+  ng-class = "{'active': NCC.state.dockerFileTab === 'kubernetes'}"
+  ng-click = "\
+    NCC.state.dockerFileTab = 'kubernetes';\
+    NCC.state.configurationMethod = 'dockerComposeFile'\
+  "
+  ng-if = "$root.featureFlags.kubernetes"
+)
+  svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
+    use(
+      xlink:href = "#icons-check"
+    )
+  .grid-block.vertical.text-left
+    p.p.weight-strong Use Kubernetes
+    small.small Set up from Kubernetes files in your repo.
+
+label.grid-block.align-center.btn.btn-radio(
+  data-event-name = "Selected Compose Setup"
+  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(
+      xlink:href = "#icons-check"
+    )
+  .grid-block.vertical.text-left
+    p.p.weight-strong Use a Compose File
+    small.small Set up from a Compose file in your repo.
+
+label.grid-block.align-center.btn.btn-radio(
+  data-event-name = "Selected Dockerfile Setup"
+  ng-class = "{'active': NCC.state.dockerFileTab === 'dockerfile'}"
+  ng-click = "NCC.state.dockerFileTab = 'dockerfile'; NCC.state.configurationMethod = 'dockerfile'"
+  ng-if = "!$root.featureFlags.kubernetes"
+)
+  svg.grid-block.shrink.btn.btn-xs.btn-icon.btn-add.iconnables.icons-check
+    use(
+      xlink:href = "#icons-check"
+    )
+  .grid-block.vertical.text-left
+    p.p.weight-strong No Compose File
+    small.small Set up from scratch or from a Dockerfile.

client/directives/components/newContainer/newContainerController.js

@@ -6,6 +6,7 @@ require('app')
 function NewContainerController(
   $q,
   $rootScope,
+  $sce,
   $scope,
   $state,
   $timeout,
@@ -27,6 +28,7 @@ function NewContainerController(
   loading,
   ModalService
 ) {
+  $scope.$sce = $sce;
   var NCC = this;
   var defaultState = this.state || {};
   var defaultTab = 'dockerfile';

client/templates/svg/svgDefs.jade

@@ -87,6 +87,10 @@ svg(xmlns='http://www.w3.org/2000/svg')
     path(fill='#555555', d='M15,8.1v1.7h-2.7c-0.2,0.8-0.6,1.4-1.2,1.8c-0.6,0.5-1.3,0.7-2.1,0.7c-0.8,0-1.5-0.3-2.1-0.7c-0.6-0.5-1-1.1-1.2-1.8H3V8.1h2.7c0.2-0.7,0.6-1.4,1.2-1.8C7.5,5.8,8.2,5.6,9,5.6c0.8,0,1.5,0.3,2.1,0.7c0.6,0.5,1,1.1,1.2,1.8H15z M10.2,10.2c0.3-0.3,0.5-0.7,0.5-1.2c0-0.5-0.2-0.9-0.5-1.2S9.5,7.3,9,7.3c-0.5,0-0.9,0.2-1.2,0.5S7.3,8.5,7.3,9c0,0.5,0.2,0.9,0.5,1.2c0.3,0.3,0.7,0.5,1.2,0.5C9.5,10.7,9.9,10.5,10.2,10.2z')
   symbol#icons-commit-alt(viewBox='0 0 14 8')
     path(d='M14,3v2h-3.141c-0.239,0.875-0.706,1.588-1.398,2.14C8.768,7.694,7.948,7.98,7,8C6.052,7.98,5.232,7.694,4.539,7.14\C3.846,6.588,3.38,5.876,3.141,5H0V3h3.141c0.24-0.875,0.705-1.588,1.399-2.141C5.232,0.307,6.052,0.021,7,0\c0.948,0.021,1.768,0.307,2.461,0.859C10.153,1.412,10.62,2.125,10.859,3H14z M8.414,5.414C8.794,5.034,8.99,4.562,9,4\C8.99,3.437,8.794,2.966,8.414,2.586C8.034,2.206,7.562,2.011,7,2c-0.562,0.01-1.034,0.206-1.414,0.586\C5.206,2.966,5.01,3.437,5,4c0.01,0.562,0.206,1.034,0.586,1.414C5.966,5.794,6.438,5.99,7,6.001\C7.562,5.99,8.034,5.794,8.414,5.414z')
+  symbol#icons-compose(viewBox='0 0 18 18')
+    rect(x='0.5', y='0.5', width='17', height='17', rx='2.5', ry='2.5', fill='#0ca6f2')
+    path(d='M15,1a2,2,0,0,1,2,2V15a2,2,0,0,1-2,2H3a2,2,0,0,1-2-2V3A2,2,0,0,1,3,1H15m0-1H3A3,3,0,0,0,0,3V15a3,3,0,0,0,3,3H15a3,3,0,0,0,3-3V3a3,3,0,0,0-3-3Z', fill='#0b83b2')
+    path(d='M15.385,11.015a.55.55,0,0,0-.55-.55,2.194,2.194,0,0,1-2.3-1.632c0-.688-.031-1.312-.031-2.107a3.5,3.5,0,1,0-7,0c0,.8.031,1.461.031,2.107a2.272,2.272,0,0,1-2.367,1.632.547.547,0,0,0-.235,1.042v0l.011,0A.542.542,0,0,0,3,11.531a5.474,5.474,0,0,0,3.976-.314A7.35,7.35,0,0,1,5.3,13.788a.535.535,0,0,0-.1.1l-.034.034,0,.013a.534.534,0,0,0-.091.285.54.54,0,0,0,.208.421l0,.012a.585.585,0,0,0,.071.038.524.524,0,0,0,.079.041c.932.361,2.925-1.4,3.491-2.647.022-.01.042-.024.064-.035.022.011.041.025.064.035.566,1.252,2.559,3.008,3.491,2.647a.524.524,0,0,0,.079-.042.59.59,0,0,0,.071-.037l0-.012a.54.54,0,0,0,.208-.421.534.534,0,0,0-.091-.285l0-.013-.034-.034a.534.534,0,0,0-.1-.1,7.35,7.35,0,0,1-1.668-2.572,5.476,5.476,0,0,0,3.961.319.545.545,0,0,0,.075-.022l.007,0v0a.546.546,0,0,0,.314-.492h0Z', fill='#fff', opacity='0.75')
   symbol#icons-gear(viewBox='0 0 18 18')
     path(d='M9,17.5a0.84789,0.84789,0,0,1-.81494-0.60254l-0.17334-.56641a2.4242,2.4242,0,0,0-1.40332-1.5332,2.47365,2.47365,0,0,0-.95605-0.19434,2.42226,2.42226,0,0,0-1.14209.28711L4.083,15.12012a0.85716,0.85716,0,0,1-1.00977-.14844A0.8771,0.8771,0,0,1,2.88037,13.917l0.229-.42578a2.42642,2.42642,0,0,0,.09912-2.084,2.42671,2.42671,0,0,0-1.54-1.41846L1.10254,9.81494a0.85238,0.85238,0,0,1,0-1.62988l0.56592-.17334A2.47013,2.47013,0,0,0,3.10938,4.50879l-0.229-.42627a0.85322,0.85322,0,0,1,.14795-1.00928A0.90065,0.90065,0,0,1,3.6792,2.77832a0.8533,0.8533,0,0,1,.40283.10156L4.51025,3.10938A2.42852,2.42852,0,0,0,5.65332,3.396,2.48127,2.48127,0,0,0,8.01123,1.66943l0.17383-.56689a0.85238,0.85238,0,0,1,1.62988,0L9.98877,1.66943a2.421,2.421,0,0,0,1.40186,1.53271,2.47238,2.47238,0,0,0,.958.19434,2.416,2.416,0,0,0,1.14063-.28662l0.42773-.23a0.85928,0.85928,0,0,1,1.00977.14844A0.87737,0.87737,0,0,1,15.12012,4.083l-0.22949.42529a2.46989,2.46989,0,0,0,1.44043,3.50342l0.56641,0.17334a0.85238,0.85238,0,0,1,0,1.62988l-0.56738.17383a2.46894,2.46894,0,0,0-1.44043,3.49951L15.12012,13.917a0.85479,0.85479,0,0,1-.14844,1.00977,0.89677,0.89677,0,0,1-.65039.29395h0a0.85905,0.85905,0,0,1-.4043-0.10156l-0.4248-.22754a2.42135,2.42135,0,0,0-1.14453-.28809A2.48378,2.48378,0,0,0,9.98877,16.332l-0.17383.56543A0.84745,0.84745,0,0,1,9,17.5Zm0-11A2.5,2.5,0,1,0,11.5,9,2.50294,2.50294,0,0,0,9,6.5Z', style='fill:#fff')
     path(d='M9,1a0.35042,0.35042,0,0,1,.33681.24908L9.51034,1.81542a2.98447,2.98447,0,0,0,2.83734,2.081,2.92366,2.92366,0,0,0,1.378-.346l0.42811-.22974a0.3492,0.3492,0,0,1,.16688-0.042,0.35945,0.35945,0,0,1,.25437.10477l0.0414,0.0414a0.35652,0.35652,0,0,1,.06283.42131l-0.2289.4265a2.96895,2.96895,0,0,0,1.7342,4.21692l0.56636,0.17354a0.35226,0.35226,0,0,1,0,.67362l-0.56649.17358A2.96848,2.96848,0,0,0,14.44935,13.725l0.23,0.42863a0.35643,0.35643,0,0,1-.0628.42121l-0.04137.04136a0.35943,0.35943,0,0,1-.25429.10473,0.34935,0.34935,0,0,1-.16706-0.04208l-0.42479-.2282a2.9284,2.9284,0,0,0-1.38142-.347,2.96332,2.96332,0,0,0-1.14591.23161,2.91981,2.91981,0,0,0-1.69129,1.84928l-0.17357.56646a0.35227,0.35227,0,0,1-.67363,0L8.48967,16.1846a2.96017,2.96017,0,0,0-4.21538-1.73507l-0.428.22972a0.3493,0.3493,0,0,1-.16691.042,0.35929,0.35929,0,0,1-.25418-0.10457l-0.04145-.04145A0.35645,0.35645,0,0,1,3.321,14.15385l0.22845-.4254a2.9695,2.9695,0,0,0-1.734-4.21809L1.24907,9.33681a0.35226,0.35226,0,0,1,0-.67362l0.56619-.17348A2.92849,2.92849,0,0,0,3.67063,6.78359a2.92225,2.92225,0,0,0-.12052-2.51124L3.32108,3.846a0.35644,0.35644,0,0,1,.0627-0.42141L3.425,3.38337a0.35956,0.35956,0,0,1,.25446-0.10484,0.34931,0.34931,0,0,1,.16679.04193L4.27426,3.55a2.92835,2.92835,0,0,0,1.37954.346,2.9615,2.9615,0,0,0,1.14548-.23142A2.92023,2.92023,0,0,0,8.48955,1.81576l0.17364-.56669A0.35042,0.35042,0,0,1,9,1M9,12A3,3,0,1,0,6,9a3.00341,3.00341,0,0,0,3,3M9,0A1.35226,1.35226,0,0,0,7.70706.95613l-0.17363.56666a1.9285,1.9285,0,0,1-1.11452,1.217l-0.01633.00675a1.95625,1.95625,0,0,1-.74878.1495,1.91654,1.91654,0,0,1-.90691-0.2273L4.31894,2.43922a1.358,1.358,0,0,0-1.59746.2335L2.67317,2.721a1.3586,1.3586,0,0,0-.233,1.59826l0.229,0.42631A1.92982,1.92982,0,0,1,2.7468,6.40078l-0.00748.01814a1.92809,1.92809,0,0,1-1.217,1.11467l-0.56617.17347a1.35226,1.35226,0,0,0,0,2.58588l0.56635,0.17354a1.92815,1.92815,0,0,1,1.217,1.11464l0.00729,0.01767a1.93345,1.93345,0,0,1-.07833,1.65653L2.44,13.68073a1.35861,1.35861,0,0,0,.23312,1.5981l0.04825,0.04825a1.358,1.358,0,0,0,1.59777.2333l0.42805-.22973a1.91155,1.91155,0,0,1,.90512-0.22709,1.95708,1.95708,0,0,1,.749.14969l0.01724,0.00711a1.92844,1.92844,0,0,1,1.115,1.21719l0.17352,0.56632a1.35226,1.35226,0,0,0,2.58588,0l0.17356-.56644a1.92825,1.92825,0,0,1,1.1151-1.21722l0.01782-.00735a1.95553,1.95553,0,0,1,.74816-0.14928,1.91681,1.91681,0,0,1,.90817.228l0.42477,0.22819a1.35789,1.35789,0,0,0,1.59807-.23283l0.04831-.04829a1.35862,1.35862,0,0,0,.23359-1.5978l-0.22995-.42861a1.93,1.93,0,0,1-.07711-1.65434l0.00693-.01679a1.92844,1.92844,0,0,1,1.217-1.11457l0.56649-.17357a1.35226,1.35226,0,0,0,0-2.58588l-0.56633-.17353a1.92841,1.92841,0,0,1-1.21718-1.115l-0.00711-.01723a1.9334,1.9334,0,0,1,.07825-1.65572l0.22888-.42648a1.35865,1.35865,0,0,0-.2333-1.59777l-0.04844-.04844a1.35793,1.35793,0,0,0-1.59777-.23329l-0.42805.22971a1.91163,1.91163,0,0,1-.90514.2271,1.957,1.957,0,0,1-.749-0.14969l-0.01722-.00711a1.92845,1.92845,0,0,1-1.115-1.21719l-0.17352-.56632A1.35226,1.35226,0,0,0,9,0H9ZM9,11a2,2,0,1,1,2-2,2.00022,2.00022,0,0,1-2,2H9Z')