From 9a10811366e1d310228e643ba5ab11ef3467b0b8 Mon Sep 17 00:00:00 2001
From: Kia Lam <digitalanime@gmail.com>
Date: Thu, 24 Jan 2019 13:50:32 -0500
Subject: [PATCH] Add expand/collapse toolbar for Job Templates list.

---
 .../templates/templatesList.controller.js     |  10 ++
 .../templates/templatesList.view.html         | 136 ++++++++++--------
 awx/ui/client/lib/components/list/_index.less |   1 +
 .../src/smart-status/smart-status.block.less  |   1 -
 4 files changed, 86 insertions(+), 62 deletions(-)

diff --git a/awx/ui/client/features/templates/templatesList.controller.js b/awx/ui/client/features/templates/templatesList.controller.js
index d1a88dcda6..5170589d59 100644
--- a/awx/ui/client/features/templates/templatesList.controller.js
+++ b/awx/ui/client/features/templates/templatesList.controller.js
@@ -389,6 +389,16 @@ function ListTemplatesController(
 
         return html;
     }
+
+    vm.isCollapsed = true;
+
+    vm.onCollapse = () => {
+        vm.isCollapsed = true;
+    };
+
+    vm.onExpand = () => {
+        vm.isCollapsed = false;
+    };
 }
 
 ListTemplatesController.$inject = [
diff --git a/awx/ui/client/features/templates/templatesList.view.html b/awx/ui/client/features/templates/templatesList.view.html
index 2b5ad363bb..959dc3ba35 100644
--- a/awx/ui/client/features/templates/templatesList.view.html
+++ b/awx/ui/client/features/templates/templatesList.view.html
@@ -31,73 +31,87 @@
             </div>
         </div>
     </div>
+    <at-list-toolbar
+        ng-if="vm.templates.length > 0"
+        sort-only="false"
+        on-collapse="vm.onCollapse"
+        on-expand="vm.onExpand"
+        is-collapsed="vm.isCollapsed">
+    </at-list-toolbar>
     <at-list results="vm.templates" id="templates_list">
         <at-row ng-repeat="template in vm.templates"
-            ng-class="{'at-Row--active': (template.id === vm.activeId)}"
+            ng-class="{'at-Row--active': (template.id === vm.activeId), 'at-Row--collapsed': vm.isCollapsed}"
             invalid="vm.isInvalid(template)"
             invalid-tooltip="vm.invalidTooltip"
             id="row-{{ template.id }}">
             <div class="at-Row-items">
-                <at-row-item
-                    header-value="{{ template.name }}"
-                    header-link="/#/templates/job_template/{{ template.id }}"
-                    header-tag="{{ vm.templateTypes[template.type] }}"
-                    ng-if="template.type === 'job_template'">
-                </at-row-item>
-                <at-row-item
-                    header-value="{{ template.name }}"
-                    header-link="/#/templates/workflow_job_template/{{ template.id }}"
-                    header-tag="{{ vm.templateTypes[template.type] }}"
-                    ng-if="template.type === 'workflow_job_template'">
-                </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_ACTIVITY') }}"
-                    smart-status="template">
-                </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}"
-                    value="{{ template.summary_fields.inventory.name }}"
-                    value-link="/#/inventories/{{template.summary_fields.inventory.kind === 'smart' ? 'smart' : 'inventory'}}/{{ template.summary_fields.inventory.id }}">
-                </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}"
-                    value="{{ template.summary_fields.project.name }}"
-                    value-link="/#/projects/{{ template.summary_fields.project.id }}">
-                </at-row-item>
-                <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') }}"
-                    value-bind-html="{{ vm.getModified(template) }}">
-                </at-row-item>
-                <at-row-item
-                    label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}"
-                    value-bind-html="{{ vm.getLastRan(template) }}">
-                </at-row-item>
-                <labels-list class="LabelList" show-delete="false" is-row-item="true" state="template">
-                </labels-list>
-            </div>
-            <div class="at-Row-actions">
-                <at-launch-template template="template"
-                    ng-show="template.summary_fields.user_capabilities.start">
-                </at-launch-template>
-                <at-row-action icon="fa-copy" ng-click="vm.copyTemplate(template)"
-                    ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.copy"
-                    tooltip="{{:: vm.strings.get('listActions.COPY', vm.getType(template)) }}">
-                </at-row-action>
-                <at-row-action icon="fa-sitemap" ng-click="vm.openWorkflowVisualizer(template)"
-                    ng-show="!vm.isPortalMode"
-                    ng-if="template.type === 'workflow_job_template'"
-                    tooltip="{{:: vm.strings.get('list.OPEN_WORKFLOW_VISUALIZER') }}">
-                </at-row-action>
-                <at-row-action icon="fa-trash" ng-click="vm.deleteTemplate(template)"
-                    ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.delete"
-                    tooltip="{{:: vm.strings.get('listActions.DELETE', vm.getType(template)) }}">
-                </at-row-action>
+                <div class="at-Row-container">
+                    <div class="at-Row-container">
+                        <at-row-item
+                            header-value="{{ template.name }}"
+                            header-link="/#/templates/job_template/{{ template.id }}"
+                            header-tag="{{ vm.templateTypes[template.type] }}"
+                            ng-if="template.type === 'job_template'">
+                        </at-row-item>
+                        <at-row-item
+                            header-value="{{ template.name }}"
+                            header-link="/#/templates/workflow_job_template/{{ template.id }}"
+                            header-tag="{{ vm.templateTypes[template.type] }}"
+                            ng-if="template.type === 'workflow_job_template'">
+                        </at-row-item>
+                        <at-row-item
+                            smart-status="template">
+                        </at-row-item>
+                    </div>
+                    <div class="at-Row-actions">
+                        <at-launch-template template="template"
+                            ng-show="template.summary_fields.user_capabilities.start">
+                        </at-launch-template>
+                        <at-row-action icon="fa-copy" ng-click="vm.copyTemplate(template)"
+                            ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.copy"
+                            tooltip="{{:: vm.strings.get('listActions.COPY', vm.getType(template)) }}">
+                        </at-row-action>
+                        <at-row-action icon="fa-sitemap" ng-click="vm.openWorkflowVisualizer(template)"
+                            ng-show="!vm.isPortalMode"
+                            ng-if="template.type === 'workflow_job_template'"
+                            tooltip="{{:: vm.strings.get('list.OPEN_WORKFLOW_VISUALIZER') }}">
+                        </at-row-action>
+                        <at-row-action icon="fa-trash" ng-click="vm.deleteTemplate(template)"
+                            ng-show="!vm.isPortalMode && template.summary_fields.user_capabilities.delete"
+                            tooltip="{{:: vm.strings.get('listActions.DELETE', vm.getType(template)) }}">
+                        </at-row-action>
+                    </div>
+                </div>
+                <div class="at-Row-container--wrapped">
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_INVENTORY') }}"
+                        value="{{ template.summary_fields.inventory.name }}"
+                        value-link="/#/inventories/{{template.summary_fields.inventory.kind === 'smart' ? 'smart' : 'inventory'}}/{{ template.summary_fields.inventory.id }}">
+                    </at-row-item>
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_PROJECT') }}"
+                        value="{{ template.summary_fields.project.name }}"
+                        value-link="/#/projects/{{ template.summary_fields.project.id }}">
+                    </at-row-item>
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_MODIFIED') }}"
+                        value-bind-html="{{ vm.getModified(template) }}">
+                    </at-row-item>
+                    <at-row-item
+                        label-value="{{:: vm.strings.get('list.ROW_ITEM_LABEL_RAN') }}"
+                        value-bind-html="{{ vm.getLastRan(template) }}">
+                    </at-row-item>
+                </div>
+                <div class="at-Row-container--wrapped">
+                    <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>
+                    <labels-list class="LabelList" show-delete="false" is-row-item="true" state="template">
+                    </labels-list>
+                </div>
             </div>
         </at-row>
     </at-list>
diff --git a/awx/ui/client/lib/components/list/_index.less b/awx/ui/client/lib/components/list/_index.less
index 2127f0a823..e9482340f5 100644
--- a/awx/ui/client/lib/components/list/_index.less
+++ b/awx/ui/client/lib/components/list/_index.less
@@ -207,6 +207,7 @@
 .at-Row-container {
     display: flex;
     justify-content: space-between;
+    align-items: center;
 }
 
 .at-Row-container--wrapped {
diff --git a/awx/ui/client/src/smart-status/smart-status.block.less b/awx/ui/client/src/smart-status/smart-status.block.less
index 8b0b49c0f0..7e90874166 100644
--- a/awx/ui/client/src/smart-status/smart-status.block.less
+++ b/awx/ui/client/src/smart-status/smart-status.block.less
@@ -1,7 +1,6 @@
 /** @define SmartStatus */
 
 .SmartStatus-container{
-    max-width: 165px;
     display:flex;
 }