Merge pull request #2009 from kialam/fix/1063-multiple-creds-tags

View More Component with Credential Tags in Template List View

awx/ui/client/features/templates/templatesList.controller.js

@@ -164,6 +164,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');

awx/ui/client/features/templates/templatesList.view.html

@@ -68,11 +68,11 @@
                     value="{{ template.summary_fields.project.name }}"
                     value-link="/#/projects/{{ template.summary_fields.project.id }}">
                 </at-row-item>
-                <!-- TODO: add see more for creds -->
                 <at-row-item
                     label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_CREDENTIALS') }}"
                     tag-values="template.summary_fields.credentials"
                     tags-are-creds="true">
+                    <at-toggle-tag ng-init="credTags=vm.buildCredentialTags(template.summary_fields.credentials)" tags="credTags"></at-toggle-tag>
                 </at-row-item>
                 <at-row-item
                     label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"

awx/ui/client/lib/components/_index.less

@@ -9,6 +9,7 @@
 @import 'relaunchButton/_index';
 @import 'tabs/_index';
 @import 'tag/_index';
+@import 'toggle-tag/_index';
 @import 'truncate/_index';
 @import 'utility/_index';
 @import 'code-mirror/_index';

awx/ui/client/lib/components/components.strings.js

@@ -52,6 +52,15 @@ function ComponentsStrings (BaseString) {
         COPIED: t.s('Copied to clipboard.')
     };
 
+    ns.toggle = {
+        VIEW_MORE: t.s('VIEW MORE'),
+        VIEW_LESS: t.s('VIEW LESS')
+    };
+
+    ns.tooltips = {
+        VIEW_THE_CREDENTIAL: t.s('View the Credential'),
+    };
+
     ns.layout = {
         CURRENT_USER_LABEL: t.s('Logged in as'),
         VIEW_DOCS: t.s('View Documentation'),

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-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';
@@ -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)

awx/ui/client/lib/components/list/_index.less

@@ -167,6 +167,8 @@
 .at-RowItem-tagContainer {
     display: flex;
     margin-left: @at-margin-left-list-row-item-tag-container;
+    flex-wrap: wrap;
+    line-height: initial;
 }
 
 .at-RowItem-tag {
@@ -175,8 +177,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: @at-space;
-    margin-top: @at-margin-top-list-row-item-tag;
     padding: @at-padding-list-row-item-tag;
     line-height: @at-line-height-list-row-item-tag;
 }

awx/ui/client/lib/components/list/row-item.partial.html

@@ -42,17 +42,6 @@
             template-type="smartStatus.type" ng-if="smartStatus">
         </aw-smart-status>
         <div class="at-RowItem-tagContainer" ng-if="tagValues && tagValues.length">
-            <div ng-repeat="tag in tagValues" class="at-RowItem-tag at-RowItem-tag--primary">
+            <ng-transclude></ng-transclude>
-                <span ng-switch="tag.kind" class="at-RowItem-tagIcon"
-                    ng-if="tagsAreCreds">
-                    <span class="fa fa-cloud" ng-switch-when="cloud"></span>
-                    <span class="fa fa-info" ng-switch-when="insights"></span>
-                    <span class="fa fa-sitemap" ng-switch-when="net"></span>
-                    <span class="fa fa-code-fork" ng-switch-when="scm"></span>
-                    <span class="fa fa-key" ng-switch-when="ssh"></span>
-                    <span class="fa fa-archive" ng-switch-when="vault"></span>
-                </span>
-                {{ tag.name }}
-            </div>
         </div>
 </div>

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';
     }
 

awx/ui/client/lib/components/toggle-tag/_index.less

@@ -0,0 +1,19 @@
+.ToggleComponent-wrapper {
+    line-height: initial;
+}
+
+.ToggleComponent-container {
+    display: flex;
+    flex-wrap: wrap;
+}
+
+.ToggleComponent-button {
+    border: none;
+    background: transparent;
+    color: @at-blue;
+    font-size: @at-font-size;
+
+    &:hover {
+        color: @at-blue-hover;
+    }
+}

awx/ui/client/lib/components/toggle-tag/constants.js

@@ -0,0 +1,2 @@
+export const TRUNCATE_LENGTH = 5;
+export const IS_TRUNCATED = true;

awx/ui/client/lib/components/toggle-tag/toggle-tag.directive.js

@@ -0,0 +1,32 @@
+import { IS_TRUNCATED, TRUNCATE_LENGTH } from './constants';
+
+const templateUrl = require('~components/toggle-tag/toggle-tag.partial.html');
+
+function controller (strings) {
+    const vm = this;
+    vm.truncatedLength = TRUNCATE_LENGTH;
+    vm.isTruncated = IS_TRUNCATED;
+    vm.strings = strings;
+
+    vm.toggle = () => {
+        vm.isTruncated = !vm.isTruncated;
+    };
+}
+
+controller.$inject = ['ComponentsStrings'];
+
+function atToggleTag () {
+    return {
+        restrict: 'E',
+        replace: true,
+        transclude: true,
+        controller,
+        controllerAs: 'vm',
+        templateUrl,
+        scope: {
+            tags: '=',
+        },
+    };
+}
+
+export default atToggleTag;

awx/ui/client/lib/components/toggle-tag/toggle-tag.partial.html

@@ -0,0 +1,21 @@
+<div class="ToggleComponent-wrapper">
+    <div ng-if="tags.length > vm.truncatedLength">
+        <div ng-show="vm.isTruncated" class="ToggleComponent-container">
+            <div ng-repeat="tag in tags | limitTo: vm.truncatedLength">
+                <at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
+            </div>
+            <button class="ToggleComponent-button" ng-click="vm.toggle()">{{:: vm.strings.get('toggle.VIEW_MORE') }}</button>
+        </div>
+        <div ng-show="!vm.isTruncated" class="ToggleComponent-container">
+            <div ng-repeat="tag in tags">
+                <at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
+            </div>
+            <button class="ToggleComponent-button" ng-click="vm.toggle()">{{:: vm.strings.get('toggle.VIEW_LESS') }}</button>
+        </div>
+    </div>
+    <div ng-if="tags.length <= vm.truncatedLength" class="ToggleComponent-container">
+        <div ng-repeat="tag in tags">
+            <at-tag tag="tag.value" icon="{{ tag.icon }}" link="{{ tag.link }}"></at-tag>
+        </div>
+    </div>
+</div>