diff --git a/client/assets/styles/scss/views/views-dockerfile-setup.scss b/client/assets/styles/scss/views/views-dockerfile-setup.scss index 611fb7c8e..52d91ab63 100644 --- a/client/assets/styles/scss/views/views-dockerfile-setup.scss +++ b/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, diff --git a/client/directives/components/mirrorDockerfile/addDockerfileDirective.js b/client/directives/components/mirrorDockerfile/addDockerfileDirective.js index e4d5407c0..55ea95969 100644 --- a/client/directives/components/mirrorDockerfile/addDockerfileDirective.js +++ b/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') { diff --git a/client/directives/components/mirrorDockerfile/addDockerfileView.jade b/client/directives/components/mirrorDockerfile/addDockerfileView.jade index f03a94b17..ab83cf5ae 100644 --- a/client/directives/components/mirrorDockerfile/addDockerfileView.jade +++ b/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! diff --git a/client/directives/components/mirrorDockerfile/mirrorDockerfileView.jade b/client/directives/components/mirrorDockerfile/mirrorDockerfileView.jade index 4f3f6496f..75f35881b 100644 --- a/client/directives/components/mirrorDockerfile/mirrorDockerfileView.jade +++ b/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'" +) diff --git a/client/directives/components/newContainer/forms/compose/composeFilePathView.jade b/client/directives/components/newContainer/forms/compose/composeFilePathView.jade deleted file mode 100644 index 11dc1aaf9..000000000 --- a/client/directives/components/newContainer/forms/compose/composeFilePathView.jade +++ /dev/null @@ -1,40 +0,0 @@ -.padding-xxs.small.label-sm Compose File Path -.input-spinner( - ng-init = "pristine = true" -) - //- - If there’s an error parsing: - - Show the error in our error modal. - - Clear this input field. - input.input.input-md.input-validate( - autocomplete = "off" - placeholder = "compose{{type === 'test' ? '-test' : ''}}.yml" - required - spellcheck = "false" - ) - .spinner-wrapper.spinner-sm.spinner-gray.in( - ng-if = "loading" - ng-include = "'spinner'" - ) - svg.iconnables.icons-check( - ng-if = "valid" - ) - use( - xlink:href = "#icons-check" - ) - svg.iconnables.icons-close( - ng-if = "invalid" - ) - use( - xlink:href = "#icons-close" - ) - -small.grid-block.padding-xxs.small( - ng-if = "(invalid || pristine) && type !== 'test'" -) Use the relative path to your repo’s Compose file (e.g. A Compose file at the root level of your code would have the path “compose.yml”). Paths are case sensitive! - -a.grid-block.padding-xxs.small( - ng-href = "" - ng-if = "valid" - target = "_blank" -) That’s a good lookin’ Compose file. diff --git a/client/directives/components/newContainer/forms/compose/composeTestView.jade b/client/directives/components/newContainer/forms/compose/composeTestView.jade index 72d3b90b0..f06358e97 100644 --- a/client/directives/components/newContainer/forms/compose/composeTestView.jade +++ b/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( diff --git a/client/directives/components/newContainer/forms/compose/configureComposeView.jade b/client/directives/components/newContainer/forms/compose/configureComposeView.jade index 40e5af531..07d140d03 100644 --- a/client/directives/components/newContainer/forms/compose/configureComposeView.jade +++ b/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 diff --git a/client/directives/components/newContainer/forms/configureNewServiceView.jade b/client/directives/components/newContainer/forms/configureNewServiceView.jade index a1db288eb..d9bbd433d 100644 --- a/client/directives/components/newContainer/forms/configureNewServiceView.jade +++ b/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 diff --git a/client/directives/components/newContainer/newContainerConfigureView.jade b/client/directives/components/newContainer/newContainerConfigureView.jade index a4dbae41c..c12c97ca1 100644 --- a/client/directives/components/newContainer/newContainerConfigureView.jade +++ b/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 diff --git a/client/directives/components/newContainer/newContainerController.js b/client/directives/components/newContainer/newContainerController.js index 83793cccf..939d63a66 100644 --- a/client/directives/components/newContainer/newContainerController.js +++ b/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: [],