From de6167a52cd52bc4b1ab7a55f3ca80bba1648d99 Mon Sep 17 00:00:00 2001 From: kialam Date: Wed, 30 May 2018 11:16:05 -0400 Subject: [PATCH 01/14] Create basic toggle tag component --- awx/ui/client/lib/components/_index.less | 1 + awx/ui/client/lib/components/index.js | 2 ++ awx/ui/client/lib/components/list/_index.less | 4 +-- .../lib/components/list/row-item.partial.html | 6 +++- .../client/lib/components/toggle/_index.less | 4 +++ .../client/lib/components/toggle/constants.js | 2 ++ .../components/toggle/toggle-tag.directive.js | 29 +++++++++++++++++++ .../components/toggle/toggle-tag.partial.html | 14 +++++++++ 8 files changed, 59 insertions(+), 3 deletions(-) create mode 100644 awx/ui/client/lib/components/toggle/_index.less create mode 100644 awx/ui/client/lib/components/toggle/constants.js create mode 100644 awx/ui/client/lib/components/toggle/toggle-tag.directive.js create mode 100644 awx/ui/client/lib/components/toggle/toggle-tag.partial.html diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less index 7d661e8122..c586cb296e 100644 --- a/awx/ui/client/lib/components/_index.less +++ b/awx/ui/client/lib/components/_index.less @@ -9,6 +9,7 @@ @import 'relaunchButton/_index'; @import 'tabs/_index'; @import 'tag/_index'; +@import 'toggle/_index'; @import 'truncate/_index'; @import 'utility/_index'; @import 'code-mirror/_index'; diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index bea2f38ce6..27675f598f 100644 --- a/awx/ui/client/lib/components/index.js +++ b/awx/ui/client/lib/components/index.js @@ -33,6 +33,7 @@ import sideNavItem from '~components/layout/side-nav-item.directive'; import tab from '~components/tabs/tab.directive'; import tabGroup from '~components/tabs/group.directive'; import tag from '~components/tag/tag.directive'; +import toggleTag from '~components/toggle/toggle-tag.directive'; import topNavItem from '~components/layout/top-nav-item.directive'; import truncate from '~components/truncate/truncate.directive'; import atCodeMirror from '~components/code-mirror'; @@ -80,6 +81,7 @@ angular .directive('atTab', tab) .directive('atTabGroup', tabGroup) .directive('atTag', tag) + .directive('atToggleTag', toggleTag) .directive('atTopNavItem', topNavItem) .directive('atTruncate', truncate) .service('BaseInputController', BaseInputController) diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less index 321631559a..f1a0c8d371 100644 --- a/awx/ui/client/lib/components/list/_index.less +++ b/awx/ui/client/lib/components/list/_index.less @@ -167,6 +167,7 @@ .at-RowItem-tagContainer { display: flex; margin-left: @at-margin-left-list-row-item-tag-container; + flex-wrap: wrap; } .at-RowItem-tag { @@ -175,8 +176,7 @@ border-radius: @at-border-radius; color: @at-color-list-row-item-tag; font-size: @at-font-size-list-row-item-tag; - margin-left: @at-margin-left-list-row-item-tag; - margin-top: @at-margin-top-list-row-item-tag; + margin: @at-space; padding: @at-padding-list-row-item-tag; line-height: @at-line-height-list-row-item-tag; } diff --git a/awx/ui/client/lib/components/list/row-item.partial.html b/awx/ui/client/lib/components/list/row-item.partial.html index 7698ba85a9..a26405d6cd 100644 --- a/awx/ui/client/lib/components/list/row-item.partial.html +++ b/awx/ui/client/lib/components/list/row-item.partial.html @@ -42,7 +42,7 @@ template-type="smartStatus.type" ng-if="smartStatus">
-
+ +
+
+
diff --git a/awx/ui/client/lib/components/toggle/_index.less b/awx/ui/client/lib/components/toggle/_index.less new file mode 100644 index 0000000000..f86e6a7948 --- /dev/null +++ b/awx/ui/client/lib/components/toggle/_index.less @@ -0,0 +1,4 @@ +.ToggleComponent-container { + display: flex; + flex-wrap: wrap; +} \ No newline at end of file diff --git a/awx/ui/client/lib/components/toggle/constants.js b/awx/ui/client/lib/components/toggle/constants.js new file mode 100644 index 0000000000..e120030b65 --- /dev/null +++ b/awx/ui/client/lib/components/toggle/constants.js @@ -0,0 +1,2 @@ +export const TRUNCATE_LENGTH = 5; +export const TRUNCATED = true; diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js b/awx/ui/client/lib/components/toggle/toggle-tag.directive.js new file mode 100644 index 0000000000..adcb6406cc --- /dev/null +++ b/awx/ui/client/lib/components/toggle/toggle-tag.directive.js @@ -0,0 +1,29 @@ +import { TRUNCATED, TRUNCATE_LENGTH } from './constants'; + +const templateUrl = require('~components/toggle/toggle-tag.partial.html'); + +function controller () { + const vm = this; + vm.truncatedLength = TRUNCATE_LENGTH; + vm.truncated = TRUNCATED; + + vm.toggle = () => { + vm.truncated = !vm.truncated; + }; +} + +function atToggleTag () { + return { + restrict: 'E', + replace: true, + transclude: true, + controller, + controllerAs: 'vm', + templateUrl, + scope: { + tags: '=', + }, + }; +} + +export default atToggleTag; diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html new file mode 100644 index 0000000000..05685b654e --- /dev/null +++ b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html @@ -0,0 +1,14 @@ +
+
+
+ +
+ +
+
+
+ +
+ +
+
From 63f3a38ceb445d5c3e0cac18ebce329b867f9865 Mon Sep 17 00:00:00 2001 From: kialam Date: Wed, 30 May 2018 15:28:10 -0400 Subject: [PATCH 02/14] Add more functionality to Toggle Tag Component - Remove existing `switch` logic in favor of Toggle Tag Component, now with comments! - Slight adjustment to icons to center vertically; account for non-standard credential `kind` attributes so icons display as they should. - Style the `View More/Less` button accordingly - Update Toggle Tag directive template to include icons --- .../lib/components/list/row-item.partial.html | 18 ++++-------------- awx/ui/client/lib/components/tag/_index.less | 7 ++++++- .../client/lib/components/toggle/_index.less | 7 +++++++ .../components/toggle/toggle-tag.partial.html | 8 ++++---- 4 files changed, 21 insertions(+), 19 deletions(-) diff --git a/awx/ui/client/lib/components/list/row-item.partial.html b/awx/ui/client/lib/components/list/row-item.partial.html index a26405d6cd..89bce7c696 100644 --- a/awx/ui/client/lib/components/list/row-item.partial.html +++ b/awx/ui/client/lib/components/list/row-item.partial.html @@ -42,21 +42,11 @@ template-type="smartStatus.type" ng-if="smartStatus">
- -
- + +
+
+
diff --git a/awx/ui/client/lib/components/tag/_index.less b/awx/ui/client/lib/components/tag/_index.less index 5fa309c106..d1b14a6893 100644 --- a/awx/ui/client/lib/components/tag/_index.less +++ b/awx/ui/client/lib/components/tag/_index.less @@ -27,10 +27,15 @@ } .TagComponent-icon { + .at-mixin-VerticallyCenter(); line-height: 20px; margin-left: @at-space-2x; - &--cloud:before { + &--cloud:before, + &--aws:before, + &--tower:before, + &--azure_rm:before, + { content: '\f0c2'; } diff --git a/awx/ui/client/lib/components/toggle/_index.less b/awx/ui/client/lib/components/toggle/_index.less index f86e6a7948..8860faa67b 100644 --- a/awx/ui/client/lib/components/toggle/_index.less +++ b/awx/ui/client/lib/components/toggle/_index.less @@ -1,4 +1,11 @@ .ToggleComponent-container { display: flex; flex-wrap: wrap; +} + +.ToggleComponent-button { + border: none; + background: transparent; + color: @at-blue; + font-size: @at-font-size; } \ No newline at end of file diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html index 05685b654e..83952ee7c8 100644 --- a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html +++ b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html @@ -1,14 +1,14 @@
- +
- +
- +
- +
From 62f4beddb2659008d2a5ecad3610bd493cd39351 Mon Sep 17 00:00:00 2001 From: kialam Date: Thu, 31 May 2018 10:32:01 -0400 Subject: [PATCH 03/14] Reduce height of tags in job list page --- awx/ui/client/lib/components/toggle/_index.less | 8 ++++++++ 1 file changed, 8 insertions(+) diff --git a/awx/ui/client/lib/components/toggle/_index.less b/awx/ui/client/lib/components/toggle/_index.less index 8860faa67b..18639c5648 100644 --- a/awx/ui/client/lib/components/toggle/_index.less +++ b/awx/ui/client/lib/components/toggle/_index.less @@ -1,3 +1,7 @@ +.ToggleComponent-wrapper { + line-height: initial; +} + .ToggleComponent-container { display: flex; flex-wrap: wrap; @@ -8,4 +12,8 @@ background: transparent; color: @at-blue; font-size: @at-font-size; + + &:hover { + color: @at-blue-hover; + } } \ No newline at end of file From f49b61ecfa085afe207bd361367f94a89cfd422d Mon Sep 17 00:00:00 2001 From: kialam Date: Thu, 31 May 2018 13:40:51 -0400 Subject: [PATCH 04/14] Create TagService This new Service can be used anywhere that needs a credentials tag and can be expanded upon to include other helpful tag methods as needed. --- awx/ui/client/lib/components/list/_index.less | 1 + .../lib/components/toggle/toggle-tag.directive.js | 11 ++++++++++- .../lib/components/toggle/toggle-tag.partial.html | 8 ++++---- awx/ui/client/lib/services/index.js | 4 +++- awx/ui/client/lib/services/tag.service.js | 14 ++++++++++++++ 5 files changed, 32 insertions(+), 6 deletions(-) create mode 100644 awx/ui/client/lib/services/tag.service.js diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less index f1a0c8d371..36f9473cc0 100644 --- a/awx/ui/client/lib/components/list/_index.less +++ b/awx/ui/client/lib/components/list/_index.less @@ -168,6 +168,7 @@ display: flex; margin-left: @at-margin-left-list-row-item-tag-container; flex-wrap: wrap; + line-height: initial; } .at-RowItem-tag { diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js b/awx/ui/client/lib/components/toggle/toggle-tag.directive.js index adcb6406cc..68a47df575 100644 --- a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js +++ b/awx/ui/client/lib/components/toggle/toggle-tag.directive.js @@ -2,7 +2,8 @@ import { TRUNCATED, TRUNCATE_LENGTH } from './constants'; const templateUrl = require('~components/toggle/toggle-tag.partial.html'); -function controller () { +function controller ($scope, TagService) { + const { tags } = $scope; const vm = this; vm.truncatedLength = TRUNCATE_LENGTH; vm.truncated = TRUNCATED; @@ -10,8 +11,16 @@ function controller () { vm.toggle = () => { vm.truncated = !vm.truncated; }; + + vm.tags = []; + // build credentials from tags object + Object.keys(tags).forEach(key => { + vm.tags.push(TagService.buildCredentialTag(tags[key])); + }); } +controller.$inject = ['$scope', 'TagService']; + function atToggleTag () { return { restrict: 'E', diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html index 83952ee7c8..e83d303eda 100644 --- a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html +++ b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html @@ -1,13 +1,13 @@
-
- +
+
-
- +
+
diff --git a/awx/ui/client/lib/services/index.js b/awx/ui/client/lib/services/index.js index 39ed1d8299..41ca37c836 100644 --- a/awx/ui/client/lib/services/index.js +++ b/awx/ui/client/lib/services/index.js @@ -2,6 +2,7 @@ import AppStrings from '~services/app.strings'; import BaseStringService from '~services/base-string.service'; import CacheService from '~services/cache.service'; import EventService from '~services/event.service'; +import TagService from '~services/tag.service'; const MODULE_NAME = 'at.lib.services'; @@ -12,6 +13,7 @@ angular .service('AppStrings', AppStrings) .service('BaseStringService', BaseStringService) .service('CacheService', CacheService) - .service('EventService', EventService); + .service('EventService', EventService) + .service('TagService', TagService); export default MODULE_NAME; diff --git a/awx/ui/client/lib/services/tag.service.js b/awx/ui/client/lib/services/tag.service.js new file mode 100644 index 0000000000..d0439f8f63 --- /dev/null +++ b/awx/ui/client/lib/services/tag.service.js @@ -0,0 +1,14 @@ +function TagService (strings, $filter) { + this.buildCredentialTag = (credential) => { + const icon = `${credential.kind}`; + const link = `/#/credentials/${credential.id}`; + const tooltip = strings.get('tooltips.CREDENTIAL'); + const value = $filter('sanitize')(credential.name); + + return { icon, link, tooltip, value }; + }; +} + +TagService.$inject = ['OutputStrings', '$filter']; + +export default TagService; From 265554accb6140253a2c2ca50bfdc9d27127c535 Mon Sep 17 00:00:00 2001 From: kialam Date: Thu, 31 May 2018 13:51:07 -0400 Subject: [PATCH 05/14] Add link to credentials tag in template --- awx/ui/client/lib/components/list/row-item.partial.html | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/awx/ui/client/lib/components/list/row-item.partial.html b/awx/ui/client/lib/components/list/row-item.partial.html index 89bce7c696..e477156d59 100644 --- a/awx/ui/client/lib/components/list/row-item.partial.html +++ b/awx/ui/client/lib/components/list/row-item.partial.html @@ -44,7 +44,7 @@
- +
From e66b00eb6480f3e13bdc4d94d97253a54e4f5ac8 Mon Sep 17 00:00:00 2001 From: kialam Date: Thu, 31 May 2018 16:32:34 -0400 Subject: [PATCH 06/14] Translate `VIEW MORE` and `VIEW LESS` into component strings --- awx/ui/client/lib/components/components.strings.js | 5 +++++ awx/ui/client/lib/components/toggle/toggle-tag.directive.js | 5 +++-- awx/ui/client/lib/components/toggle/toggle-tag.partial.html | 4 ++-- 3 files changed, 10 insertions(+), 4 deletions(-) diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js index 072e1e82ce..97d8049543 100644 --- a/awx/ui/client/lib/components/components.strings.js +++ b/awx/ui/client/lib/components/components.strings.js @@ -52,6 +52,11 @@ function ComponentsStrings (BaseString) { COPIED: t.s('Copied to clipboard.') }; + ns.toggle = { + VIEW_MORE: t.s('VIEW MORE'), + VIEW_LESS: t.s('VIEW LESS') + }; + ns.layout = { CURRENT_USER_LABEL: t.s('Logged in as'), VIEW_DOCS: t.s('View Documentation'), diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js b/awx/ui/client/lib/components/toggle/toggle-tag.directive.js index 68a47df575..7cce99831e 100644 --- a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js +++ b/awx/ui/client/lib/components/toggle/toggle-tag.directive.js @@ -2,11 +2,12 @@ import { TRUNCATED, TRUNCATE_LENGTH } from './constants'; const templateUrl = require('~components/toggle/toggle-tag.partial.html'); -function controller ($scope, TagService) { +function controller ($scope, TagService, strings) { const { tags } = $scope; const vm = this; vm.truncatedLength = TRUNCATE_LENGTH; vm.truncated = TRUNCATED; + vm.strings = strings; vm.toggle = () => { vm.truncated = !vm.truncated; @@ -19,7 +20,7 @@ function controller ($scope, TagService) { }); } -controller.$inject = ['$scope', 'TagService']; +controller.$inject = ['$scope', 'TagService', 'ComponentsStrings']; function atToggleTag () { return { diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html index e83d303eda..d0070c0fbf 100644 --- a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html +++ b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html @@ -3,12 +3,12 @@
- +
- +
From 8373d89c92b55552a5bce647b8766cf5d5b426b3 Mon Sep 17 00:00:00 2001 From: kialam Date: Thu, 31 May 2018 16:42:17 -0400 Subject: [PATCH 07/14] Duplicate `ns.tooltips CREDENTIALS` string to `ComponentStrings` to avoid using `OutputStrings` --- awx/ui/client/lib/components/components.strings.js | 4 ++++ awx/ui/client/lib/services/tag.service.js | 2 +- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js index 97d8049543..1be3891669 100644 --- a/awx/ui/client/lib/components/components.strings.js +++ b/awx/ui/client/lib/components/components.strings.js @@ -57,6 +57,10 @@ function ComponentsStrings (BaseString) { VIEW_LESS: t.s('VIEW LESS') }; + ns.tooltips = { + CREDENTIAL: t.s('View the Credential'), + }; + ns.layout = { CURRENT_USER_LABEL: t.s('Logged in as'), VIEW_DOCS: t.s('View Documentation'), diff --git a/awx/ui/client/lib/services/tag.service.js b/awx/ui/client/lib/services/tag.service.js index d0439f8f63..3795776a81 100644 --- a/awx/ui/client/lib/services/tag.service.js +++ b/awx/ui/client/lib/services/tag.service.js @@ -9,6 +9,6 @@ function TagService (strings, $filter) { }; } -TagService.$inject = ['OutputStrings', '$filter']; +TagService.$inject = ['ComponentsStrings', '$filter']; export default TagService; From cc91729f7208e97c38dd27151f79caa365062e7f Mon Sep 17 00:00:00 2001 From: kialam Date: Fri, 1 Jun 2018 12:46:58 -0400 Subject: [PATCH 08/14] Account for default tags as well --- .../client/lib/components/list/row-item.partial.html | 2 +- .../lib/components/toggle/toggle-tag.directive.js | 11 +++++++++-- awx/ui/client/lib/services/tag.service.js | 4 ++++ 3 files changed, 14 insertions(+), 3 deletions(-) diff --git a/awx/ui/client/lib/components/list/row-item.partial.html b/awx/ui/client/lib/components/list/row-item.partial.html index e477156d59..69058b1c43 100644 --- a/awx/ui/client/lib/components/list/row-item.partial.html +++ b/awx/ui/client/lib/components/list/row-item.partial.html @@ -47,6 +47,6 @@
- +
diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js b/awx/ui/client/lib/components/toggle/toggle-tag.directive.js index 7cce99831e..a60c253a8c 100644 --- a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js +++ b/awx/ui/client/lib/components/toggle/toggle-tag.directive.js @@ -14,9 +14,15 @@ function controller ($scope, TagService, strings) { }; vm.tags = []; - // build credentials from tags object + + // Let the controller handle what type of tag should be passed to the directive + // e.g. default tag, crential tag, etc. Object.keys(tags).forEach(key => { - vm.tags.push(TagService.buildCredentialTag(tags[key])); + if ($scope.tagType === 'cred') { + vm.tags.push(TagService.buildCredentialTag(tags[key])); + } else { + vm.tags.push(TagService.buildTag(tags[key])); + } }); } @@ -32,6 +38,7 @@ function atToggleTag () { templateUrl, scope: { tags: '=', + tagType: '@', }, }; } diff --git a/awx/ui/client/lib/services/tag.service.js b/awx/ui/client/lib/services/tag.service.js index 3795776a81..fa44e0e894 100644 --- a/awx/ui/client/lib/services/tag.service.js +++ b/awx/ui/client/lib/services/tag.service.js @@ -7,6 +7,10 @@ function TagService (strings, $filter) { return { icon, link, tooltip, value }; }; + this.buildTag = tag => { + const value = $filter('sanitize')(tag); + return { value }; + }; } TagService.$inject = ['ComponentsStrings', '$filter']; From 22ddf7883a453426043d25d3d597716bf5f97e03 Mon Sep 17 00:00:00 2001 From: kialam Date: Mon, 4 Jun 2018 10:29:25 -0400 Subject: [PATCH 09/14] Adjust template to account for more than one tag type. --- awx/ui/client/lib/components/toggle/toggle-tag.partial.html | 6 ++++-- awx/ui/client/lib/services/tag.service.js | 1 + 2 files changed, 5 insertions(+), 2 deletions(-) diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html index d0070c0fbf..7997e0e741 100644 --- a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html +++ b/awx/ui/client/lib/components/toggle/toggle-tag.partial.html @@ -1,13 +1,15 @@
- + +
- + +
diff --git a/awx/ui/client/lib/services/tag.service.js b/awx/ui/client/lib/services/tag.service.js index fa44e0e894..be1a84dbe3 100644 --- a/awx/ui/client/lib/services/tag.service.js +++ b/awx/ui/client/lib/services/tag.service.js @@ -9,6 +9,7 @@ function TagService (strings, $filter) { }; this.buildTag = tag => { const value = $filter('sanitize')(tag); + return { value }; }; } From 2ee361db5d8bc0d687cc14e85cbe3e1c0f0846a8 Mon Sep 17 00:00:00 2001 From: kialam Date: Mon, 4 Jun 2018 10:39:30 -0400 Subject: [PATCH 10/14] Rename `toggle` component to `toggle-tag` for better clarity. --- awx/ui/client/lib/components/_index.less | 2 +- awx/ui/client/lib/components/index.js | 2 +- awx/ui/client/lib/components/{toggle => toggle-tag}/_index.less | 0 .../client/lib/components/{toggle => toggle-tag}/constants.js | 0 .../components/{toggle => toggle-tag}/toggle-tag.directive.js | 2 +- .../components/{toggle => toggle-tag}/toggle-tag.partial.html | 0 6 files changed, 3 insertions(+), 3 deletions(-) rename awx/ui/client/lib/components/{toggle => toggle-tag}/_index.less (100%) rename awx/ui/client/lib/components/{toggle => toggle-tag}/constants.js (100%) rename awx/ui/client/lib/components/{toggle => toggle-tag}/toggle-tag.directive.js (93%) rename awx/ui/client/lib/components/{toggle => toggle-tag}/toggle-tag.partial.html (100%) diff --git a/awx/ui/client/lib/components/_index.less b/awx/ui/client/lib/components/_index.less index c586cb296e..7beb200a10 100644 --- a/awx/ui/client/lib/components/_index.less +++ b/awx/ui/client/lib/components/_index.less @@ -9,7 +9,7 @@ @import 'relaunchButton/_index'; @import 'tabs/_index'; @import 'tag/_index'; -@import 'toggle/_index'; +@import 'toggle-tag/_index'; @import 'truncate/_index'; @import 'utility/_index'; @import 'code-mirror/_index'; diff --git a/awx/ui/client/lib/components/index.js b/awx/ui/client/lib/components/index.js index 27675f598f..aa18751d17 100644 --- a/awx/ui/client/lib/components/index.js +++ b/awx/ui/client/lib/components/index.js @@ -33,7 +33,7 @@ import sideNavItem from '~components/layout/side-nav-item.directive'; import tab from '~components/tabs/tab.directive'; import tabGroup from '~components/tabs/group.directive'; import tag from '~components/tag/tag.directive'; -import toggleTag from '~components/toggle/toggle-tag.directive'; +import toggleTag from '~components/toggle-tag/toggle-tag.directive'; import topNavItem from '~components/layout/top-nav-item.directive'; import truncate from '~components/truncate/truncate.directive'; import atCodeMirror from '~components/code-mirror'; diff --git a/awx/ui/client/lib/components/toggle/_index.less b/awx/ui/client/lib/components/toggle-tag/_index.less similarity index 100% rename from awx/ui/client/lib/components/toggle/_index.less rename to awx/ui/client/lib/components/toggle-tag/_index.less diff --git a/awx/ui/client/lib/components/toggle/constants.js b/awx/ui/client/lib/components/toggle-tag/constants.js similarity index 100% rename from awx/ui/client/lib/components/toggle/constants.js rename to awx/ui/client/lib/components/toggle-tag/constants.js diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js b/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js similarity index 93% rename from awx/ui/client/lib/components/toggle/toggle-tag.directive.js rename to awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js index a60c253a8c..1fc7c02990 100644 --- a/awx/ui/client/lib/components/toggle/toggle-tag.directive.js +++ b/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js @@ -1,6 +1,6 @@ import { TRUNCATED, TRUNCATE_LENGTH } from './constants'; -const templateUrl = require('~components/toggle/toggle-tag.partial.html'); +const templateUrl = require('~components/toggle-tag/toggle-tag.partial.html'); function controller ($scope, TagService, strings) { const { tags } = $scope; diff --git a/awx/ui/client/lib/components/toggle/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html similarity index 100% rename from awx/ui/client/lib/components/toggle/toggle-tag.partial.html rename to awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html From b8404abb2633f585ff46aa83d72beeb096fd4957 Mon Sep 17 00:00:00 2001 From: kialam Date: Mon, 4 Jun 2018 12:32:54 -0400 Subject: [PATCH 11/14] Rename credential tooltip component string - For better legibility --- awx/ui/client/lib/components/components.strings.js | 2 +- awx/ui/client/lib/services/tag.service.js | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/awx/ui/client/lib/components/components.strings.js b/awx/ui/client/lib/components/components.strings.js index 1be3891669..a56ea9854d 100644 --- a/awx/ui/client/lib/components/components.strings.js +++ b/awx/ui/client/lib/components/components.strings.js @@ -58,7 +58,7 @@ function ComponentsStrings (BaseString) { }; ns.tooltips = { - CREDENTIAL: t.s('View the Credential'), + VIEW_THE_CREDENTIAL: t.s('View the Credential'), }; ns.layout = { diff --git a/awx/ui/client/lib/services/tag.service.js b/awx/ui/client/lib/services/tag.service.js index be1a84dbe3..22bdf45ae2 100644 --- a/awx/ui/client/lib/services/tag.service.js +++ b/awx/ui/client/lib/services/tag.service.js @@ -2,12 +2,12 @@ function TagService (strings, $filter) { this.buildCredentialTag = (credential) => { const icon = `${credential.kind}`; const link = `/#/credentials/${credential.id}`; - const tooltip = strings.get('tooltips.CREDENTIAL'); + const tooltip = strings.get('tooltips.VIEW_THE_CREDENTIAL'); const value = $filter('sanitize')(credential.name); return { icon, link, tooltip, value }; }; - this.buildTag = tag => { + this.buildTag = (tag) => { const value = $filter('sanitize')(tag); return { value }; From 6ca4c7de9dc918d194150b47808942f1ca682fa5 Mon Sep 17 00:00:00 2001 From: kialam Date: Tue, 5 Jun 2018 17:40:59 -0400 Subject: [PATCH 12/14] Offload tag formatting logic to `templateList` controller --- .../templates/templatesList.controller.js | 11 +++++++++ .../templates/templatesList.view.html | 18 ++++++++++++--- .../lib/components/list/row-item.partial.html | 12 ++++++++-- .../toggle-tag/toggle-tag.directive.js | 23 ++++++++++--------- .../toggle-tag/toggle-tag.partial.html | 12 +++++----- 5 files changed, 54 insertions(+), 22 deletions(-) diff --git a/awx/ui/client/features/templates/templatesList.controller.js b/awx/ui/client/features/templates/templatesList.controller.js index 4f0ec55116..ad3137e949 100644 --- a/awx/ui/client/features/templates/templatesList.controller.js +++ b/awx/ui/client/features/templates/templatesList.controller.js @@ -165,6 +165,17 @@ function ListTemplatesController( return html; }; + vm.buildCredentialTags = (credentials) => { + return credentials.map(credential => { + const icon = `${credential.kind}`; + const link = `/#/credentials/${credential.id}`; + const tooltip = strings.get('tooltips.VIEW_THE_CREDENTIAL'); + const value = $filter('sanitize')(credential.name); + + return { icon, link, tooltip, value }; + }) + }; + vm.getLastRan = template => { const lastJobRun = _.get(template, 'last_job_run'); diff --git a/awx/ui/client/features/templates/templatesList.view.html b/awx/ui/client/features/templates/templatesList.view.html index 5a00912663..d77910ac1f 100644 --- a/awx/ui/client/features/templates/templatesList.view.html +++ b/awx/ui/client/features/templates/templatesList.view.html @@ -69,11 +69,23 @@ value-link="/#/projects/{{ template.summary_fields.project.id }}"> - + + + + + + + + + + + diff --git a/awx/ui/client/lib/components/list/row-item.partial.html b/awx/ui/client/lib/components/list/row-item.partial.html index 69058b1c43..3c50e1fb83 100644 --- a/awx/ui/client/lib/components/list/row-item.partial.html +++ b/awx/ui/client/lib/components/list/row-item.partial.html @@ -42,11 +42,19 @@ template-type="smartStatus.type" ng-if="smartStatus">
-
+ + + + + + + - +
diff --git a/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js b/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js index 1fc7c02990..3cc49b3cea 100644 --- a/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js +++ b/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js @@ -2,8 +2,8 @@ import { TRUNCATED, TRUNCATE_LENGTH } from './constants'; const templateUrl = require('~components/toggle-tag/toggle-tag.partial.html'); -function controller ($scope, TagService, strings) { - const { tags } = $scope; +function controller (strings) { + // const { tags } = $scope; const vm = this; vm.truncatedLength = TRUNCATE_LENGTH; vm.truncated = TRUNCATED; @@ -13,20 +13,20 @@ function controller ($scope, TagService, strings) { vm.truncated = !vm.truncated; }; - vm.tags = []; + // vm.tags = []; // Let the controller handle what type of tag should be passed to the directive // e.g. default tag, crential tag, etc. - Object.keys(tags).forEach(key => { - if ($scope.tagType === 'cred') { - vm.tags.push(TagService.buildCredentialTag(tags[key])); - } else { - vm.tags.push(TagService.buildTag(tags[key])); - } - }); + // Object.keys(tags).forEach(key => { + // if ($scope.tagType === 'cred') { + // vm.tags.push(TagService.buildCredentialTag(tags[key])); + // } else { + // vm.tags.push(TagService.buildTag(tags[key])); + // } + // }); } -controller.$inject = ['$scope', 'TagService', 'ComponentsStrings']; +controller.$inject = ['ComponentsStrings']; function atToggleTag () { return { @@ -39,6 +39,7 @@ function atToggleTag () { scope: { tags: '=', tagType: '@', + tagLength: '@', }, }; } diff --git a/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html index 7997e0e741..6ab6e2d858 100644 --- a/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html +++ b/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html @@ -1,15 +1,15 @@
-
- - +
+ +
-
- - +
+ +
From b16854898b4853e15c1b573a8680e66184d947b6 Mon Sep 17 00:00:00 2001 From: kialam Date: Wed, 6 Jun 2018 11:13:41 -0400 Subject: [PATCH 13/14] Refactor `Toggle Tag` Component This refactor includes the following things: - Offload credential tag formatting to the parent controller, e.g. `TemplateListController`. - Initialize the `Toggle Tag` component in the parent view instead of the List Item component view. - Rename some variables for better comprehension. --- .../templates/templatesList.controller.js | 2 +- .../templates/templatesList.view.html | 20 ++++-------------- .../lib/components/list/row-item.partial.html | 15 +------------ .../lib/components/toggle-tag/constants.js | 2 +- .../toggle-tag/toggle-tag.directive.js | 21 +++---------------- .../toggle-tag/toggle-tag.partial.html | 21 ++++++++++++------- 6 files changed, 23 insertions(+), 58 deletions(-) diff --git a/awx/ui/client/features/templates/templatesList.controller.js b/awx/ui/client/features/templates/templatesList.controller.js index ad3137e949..b8a29f4db8 100644 --- a/awx/ui/client/features/templates/templatesList.controller.js +++ b/awx/ui/client/features/templates/templatesList.controller.js @@ -164,7 +164,7 @@ function ListTemplatesController( return html; }; - + vm.buildCredentialTags = (credentials) => { return credentials.map(credential => { const icon = `${credential.kind}`; diff --git a/awx/ui/client/features/templates/templatesList.view.html b/awx/ui/client/features/templates/templatesList.view.html index d77910ac1f..5aed695f57 100644 --- a/awx/ui/client/features/templates/templatesList.view.html +++ b/awx/ui/client/features/templates/templatesList.view.html @@ -68,24 +68,12 @@ value="{{ template.summary_fields.project.name }}" value-link="/#/projects/{{ template.summary_fields.project.id }}"> - - - - - - - - - - - - - + tags-are-creds="true"> + + diff --git a/awx/ui/client/lib/components/list/row-item.partial.html b/awx/ui/client/lib/components/list/row-item.partial.html index 3c50e1fb83..48e309db8e 100644 --- a/awx/ui/client/lib/components/list/row-item.partial.html +++ b/awx/ui/client/lib/components/list/row-item.partial.html @@ -42,19 +42,6 @@ template-type="smartStatus.type" ng-if="smartStatus">
-
- -
- - - - - - - - - +
diff --git a/awx/ui/client/lib/components/toggle-tag/constants.js b/awx/ui/client/lib/components/toggle-tag/constants.js index e120030b65..f3a4951c9c 100644 --- a/awx/ui/client/lib/components/toggle-tag/constants.js +++ b/awx/ui/client/lib/components/toggle-tag/constants.js @@ -1,2 +1,2 @@ export const TRUNCATE_LENGTH = 5; -export const TRUNCATED = true; +export const IS_TRUNCATED = true; diff --git a/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js b/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js index 3cc49b3cea..4fec4cd794 100644 --- a/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js +++ b/awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js @@ -1,29 +1,16 @@ -import { TRUNCATED, TRUNCATE_LENGTH } from './constants'; +import { IS_TRUNCATED, TRUNCATE_LENGTH } from './constants'; const templateUrl = require('~components/toggle-tag/toggle-tag.partial.html'); function controller (strings) { - // const { tags } = $scope; const vm = this; vm.truncatedLength = TRUNCATE_LENGTH; - vm.truncated = TRUNCATED; + vm.isTruncated = IS_TRUNCATED; vm.strings = strings; vm.toggle = () => { - vm.truncated = !vm.truncated; + vm.isTruncated = !vm.isTruncated; }; - - // vm.tags = []; - - // Let the controller handle what type of tag should be passed to the directive - // e.g. default tag, crential tag, etc. - // Object.keys(tags).forEach(key => { - // if ($scope.tagType === 'cred') { - // vm.tags.push(TagService.buildCredentialTag(tags[key])); - // } else { - // vm.tags.push(TagService.buildTag(tags[key])); - // } - // }); } controller.$inject = ['ComponentsStrings']; @@ -38,8 +25,6 @@ function atToggleTag () { templateUrl, scope: { tags: '=', - tagType: '@', - tagLength: '@', }, }; } diff --git a/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html b/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html index 6ab6e2d858..fada04154e 100644 --- a/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html +++ b/awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html @@ -1,16 +1,21 @@
-
-
- - +
+
+
+ +
+ +
+
+
+ +
+
-
-
+
-
-
From d6ca943d23f739b50f5f7598a277b8cef29fff40 Mon Sep 17 00:00:00 2001 From: kialam Date: Wed, 6 Jun 2018 11:15:57 -0400 Subject: [PATCH 14/14] Remove `TagService` --- awx/ui/client/lib/services/index.js | 4 +--- awx/ui/client/lib/services/tag.service.js | 19 ------------------- 2 files changed, 1 insertion(+), 22 deletions(-) delete mode 100644 awx/ui/client/lib/services/tag.service.js diff --git a/awx/ui/client/lib/services/index.js b/awx/ui/client/lib/services/index.js index 41ca37c836..39ed1d8299 100644 --- a/awx/ui/client/lib/services/index.js +++ b/awx/ui/client/lib/services/index.js @@ -2,7 +2,6 @@ import AppStrings from '~services/app.strings'; import BaseStringService from '~services/base-string.service'; import CacheService from '~services/cache.service'; import EventService from '~services/event.service'; -import TagService from '~services/tag.service'; const MODULE_NAME = 'at.lib.services'; @@ -13,7 +12,6 @@ angular .service('AppStrings', AppStrings) .service('BaseStringService', BaseStringService) .service('CacheService', CacheService) - .service('EventService', EventService) - .service('TagService', TagService); + .service('EventService', EventService); export default MODULE_NAME; diff --git a/awx/ui/client/lib/services/tag.service.js b/awx/ui/client/lib/services/tag.service.js deleted file mode 100644 index 22bdf45ae2..0000000000 --- a/awx/ui/client/lib/services/tag.service.js +++ /dev/null @@ -1,19 +0,0 @@ -function TagService (strings, $filter) { - this.buildCredentialTag = (credential) => { - const icon = `${credential.kind}`; - const link = `/#/credentials/${credential.id}`; - const tooltip = strings.get('tooltips.VIEW_THE_CREDENTIAL'); - const value = $filter('sanitize')(credential.name); - - return { icon, link, tooltip, value }; - }; - this.buildTag = (tag) => { - const value = $filter('sanitize')(tag); - - return { value }; - }; -} - -TagService.$inject = ['ComponentsStrings', '$filter']; - -export default TagService;