Xt 485/give front end elements data cy attributes (#5483)

* kubernetes attributes done, swarm attributes halfway, aci to go

* all attributes for cypress selectors added

* kubernetes attributes done, swarm attributes halfway, aci to go

* all attributes for cypress selectors added

* all attributes for cypress selectors added

* fixed files from rebase, added docker sidebar element attributes

* kubernetes attributes done, swarm attributes halfway, aci to go

* all attributes for cypress selectors added

* all attributes for cypress selectors added

* removed files to match develop

* ammended comments

* removed bindings for switch

app/edge/components/edge-groups-selector/edgeGroupsSelector.html

@@ -1,4 +1,4 @@
-<ui-select multiple ng-model="$ctrl.model" close-on-select="false">
+<ui-select multiple ng-model="$ctrl.model" close-on-select="false" data-cy="edgeGroupCreate-edgeGroupsSelector">
   <ui-select-match placeholder="Select one or multiple group(s)">
     <span>
       {{ $item.Name }}

app/edge/components/edge-stacks-datatable/edgeStacksDatatable.html

@@ -6,7 +6,7 @@
           <i class="fa" ng-class="$ctrl.titleIcon" aria-hidden="true" style="margin-right: 2px;"></i>
           Edge Stacks
         </div>
-        <div class="settings">
+        <div class="settings" data-cy="edgeStack-stackTableSettings">
           <span class="setting" ng-class="{ 'setting-active': $ctrl.settings.open }" uib-dropdown dropdown-append-to-body auto-close="disabled" is-open="$ctrl.settings.open">
             <span uib-dropdown-toggle> <i class="fa fa-cog" aria-hidden="true"></i> Settings </span>
             <div class="dropdown-menu dropdown-menu-right" uib-dropdown-menu>
@@ -17,7 +17,13 @@
                 <div class="menuContent">
                   <div>
                     <div class="md-checkbox">
-                      <input id="setting_auto_refresh" type="checkbox" ng-model="$ctrl.settings.repeater.autoRefresh" ng-change="$ctrl.onSettingsRepeaterChange()" />
+                      <input
+                        id="setting_auto_refresh"
+                        type="checkbox"
+                        ng-model="$ctrl.settings.repeater.autoRefresh"
+                        ng-change="$ctrl.onSettingsRepeaterChange()"
+                        data-cy="edgeStack-autoRefreshCheckbox"
+                      />
                       <label for="setting_auto_refresh">Auto refresh</label>
                     </div>
                     <div ng-if="$ctrl.settings.repeater.autoRefresh">
@@ -48,10 +54,18 @@
         </div>
       </div>
       <div class="actionBar">
-        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+        <button
+          type="button"
+          class="btn btn-sm btn-danger"
+          ng-disabled="$ctrl.state.selectedItemCount === 0"
+          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+          data-cy="edgeStack-removeStackButton"
+        >
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.stacks.new"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add stack </button>
+        <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.stacks.new" data-cy="edgeStack-addStackButton">
+          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add stack
+        </button>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
@@ -66,12 +80,12 @@
         />
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table table-hover nowrap-cells" data-cy="edgeStack-stackTable">
           <thead>
             <tr>
               <th>
                 <span class="md-checkbox" ng-if="!$ctrl.offlineMode">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" data-cy="edgeStack-selectAllCheckbox" />
                   <label for="select_all"></label>
                 </span>
                 <a ng-click="$ctrl.changeOrderBy('Name')">
@@ -109,10 +123,10 @@
               <td><edge-stack-status stack-status="item.Status"></edge-stack-status></td>
               <td>{{ item.CreationDate | getisodatefromtimestamp }}</td>
             </tr>
-            <tr ng-if="!$ctrl.dataset">
+            <tr ng-if="!$ctrl.dataset" data-cy="edgeStack-loadingRow">
               <td colspan="4" class="text-center text-muted">Loading...</td>
             </tr>
-            <tr ng-if="$ctrl.state.filteredDataSet.length === 0">
+            <tr ng-if="$ctrl.state.filteredDataSet.length === 0" data-cy="edgeStack-noStackRow">
               <td colspan="4" class="text-center text-muted">
                 No stack available.
               </td>

app/edge/components/group-form/groupForm.html

@@ -4,7 +4,7 @@
       Name
     </label>
     <div class="col-sm-9 col-lg-10">
-      <input type="text" class="form-control" id="group_name" name="group_name" ng-model="$ctrl.model.Name" required auto-focus />
+      <input type="text" class="form-control" id="group_name" name="group_name" ng-model="$ctrl.model.Name" required auto-focus data-cy="edgeGroupCreate-groupNameInput" />
     </div>
   </div>
   <div class="form-group" ng-show="EdgeGroupForm.group_name.$invalid">
@@ -138,6 +138,7 @@
         class="btn btn-primary btn-sm"
         ng-disabled="$ctrl.actionInProgress || !EdgeGroupForm.$valid || (!$ctrl.model.Dynamic && !$ctrl.model.Endpoints.length) || ($ctrl.model.Dynamic && !$ctrl.model.TagIds.length)"
         button-spinner="$ctrl.actionInProgress"
+        data-cy="edgeGroupCreate-addGroupButton"
       >
         <span ng-hide="$ctrl.actionInProgress">{{ $ctrl.formActionLabel }}</span>
         <span ng-show="$ctrl.actionInProgress">In progress...</span>

app/edge/components/groups-datatable/groupsDatatable.html

@@ -3,10 +3,18 @@
     <rd-widget-header icon="{{ $ctrl.titleIcon }}" title-text="Edge Groups"> </rd-widget-header>
     <rd-widget-body classes="no-padding">
       <div class="actionBar">
-        <button type="button" class="btn btn-sm btn-danger" ng-disabled="$ctrl.state.selectedItemCount === 0" ng-click="$ctrl.removeAction($ctrl.state.selectedItems)">
+        <button
+          type="button"
+          class="btn btn-sm btn-danger"
+          ng-disabled="$ctrl.state.selectedItemCount === 0"
+          ng-click="$ctrl.removeAction($ctrl.state.selectedItems)"
+          data-cy="edgeGroup-removeEdgeGroupButton"
+        >
           <i class="fa fa-trash-alt space-right" aria-hidden="true"></i>Remove
         </button>
-        <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.groups.new"> <i class="fa fa-plus space-right" aria-hidden="true"></i>Add Edge group </button>
+        <button type="button" class="btn btn-sm btn-primary" ui-sref="edge.groups.new" data-cy="edgeGroup-addEdgeGroupButton">
+          <i class="fa fa-plus space-right" aria-hidden="true"></i>Add Edge group
+        </button>
       </div>
       <div class="searchBar">
         <i class="fa fa-search searchIcon" aria-hidden="true"></i>
@@ -17,15 +25,16 @@
           ng-change="$ctrl.onTextFilterChange()"
           placeholder="Search..."
           ng-model-options="{ debounce: 300 }"
+          data-cy="edgeGroup-searchInput"
         />
       </div>
       <div class="table-responsive">
-        <table class="table table-hover nowrap-cells">
+        <table class="table table-hover nowrap-cells" data-cy="edgeGroup-edgeGroupTable">
           <thead>
             <tr>
               <th>
                 <span class="md-checkbox">
-                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" />
+                  <input id="select_all" type="checkbox" ng-model="$ctrl.state.selectAll" ng-change="$ctrl.selectAll()" data-cy="edgeGroup-selectAllCheckbox" />
                   <label for="select_all"></label>
                 </span>
                 <a ng-click="$ctrl.changeOrderBy('Name')">

app/edge/views/edge-stacks/createEdgeStackView/createEdgeStackView.html

@@ -14,7 +14,7 @@
               Name
             </label>
             <div class="col-sm-11">
-              <input type="text" class="form-control" ng-model="$ctrl.formValues.Name" id="stack_name" placeholder="e.g. mystack" auto-focus />
+              <input type="text" class="form-control" ng-model="$ctrl.formValues.Name" id="stack_name" placeholder="e.g. mystack" auto-focus data-cy="edgeStackCreate-nameInput" />
             </div>
           </div>
           <!-- !name-input -->
@@ -39,7 +39,7 @@
             <div class="boxselector_wrapper">
               <div>
                 <input type="radio" id="method_editor" ng-model="$ctrl.state.Method" value="editor" ng-change="$ctrl.onChangeMethod()" />
-                <label for="method_editor">
+                <label for="method_editor" data-cy="edgeStackCreate-webEditorButton">
                   <div class="boxselector_header">
                     <i class="fa fa-edit" aria-hidden="true" style="margin-right: 2px;"></i>
                     Web editor
@@ -49,7 +49,7 @@
               </div>
               <div>
                 <input type="radio" id="method_upload" ng-model="$ctrl.state.Method" value="upload" ng-change="$ctrl.onChangeMethod()" />
-                <label for="method_upload">
+                <label for="method_upload" data-cy="edgeStackCreate-uploadButton">
                   <div class="boxselector_header">
                     <i class="fa fa-upload" aria-hidden="true" style="margin-right: 2px;"></i>
                     Upload
@@ -59,7 +59,7 @@
               </div>
               <div>
                 <input type="radio" id="method_repository" ng-model="$ctrl.state.Method" value="repository" ng-change="$ctrl.onChangeMethod()" />
-                <label for="method_repository">
+                <label for="method_repository" data-cy="edgeStackCreate-repoButton">
                   <div class="boxselector_header">
                     <i class="fab fa-git" aria-hidden="true" style="margin-right: 2px;"></i>
                     Repository
@@ -69,7 +69,7 @@
               </div>
               <div>
                 <input type="radio" id="method_template" ng-model="$ctrl.state.Method" value="template" ng-change="$ctrl.onChangeMethod()" />
-                <label for="method_template">
+                <label for="method_template" data-cy="edgeStackCreate-templateButton">
                   <div class="boxselector_header">
                     <i class="fas fa-rocket" aria-hidden="true" style="margin-right: 2px;"></i>
                     Template
@@ -198,6 +198,7 @@
               || !$ctrl.formValues.Name"
                 ng-click="$ctrl.createStack()"
                 button-spinner="$ctrl.state.actionInProgress"
+                data-cy="edgeStackCreate-createStackButton"
               >
                 <span ng-hide="$ctrl.state.actionInProgress">Deploy the stack</span>
                 <span ng-show="$ctrl.state.actionInProgress">Deployment in progress...</span>