Feat/create more space (#324)

* chore: fix deprecated options in angular.json file

* feat: create more space by removing replacing redundant buttons and removing unnecessary white-space

* chore: fix cypress tests with new ui changes

* chore: fix select all to be unchecked when unchecking a row

* feat: allow user to select amount of spacing

* chore: add wait to test

* chore: add multiply sign for spacing options

* chore: change default value for spacing to 1

angular.json

@@ -77,10 +77,10 @@
           "builder": "@angular-devkit/build-angular:dev-server",
           "configurations": {
             "production": {
-              "browserTarget": "ladybug:build:production"
+              "buildTarget": "ladybug:build:production"
             },
             "development": {
-              "browserTarget": "ladybug:build:development",
+              "buildTarget": "ladybug:build:development",
               "proxyConfig": "src/proxy.conf.json"
             }
           },
@@ -92,7 +92,7 @@
         "extract-i18n": {
           "builder": "@angular-devkit/build-angular:extract-i18n",
           "options": {
-            "browserTarget": "ladybug:build"
+            "buildTarget": "ladybug:build"
           }
         },
         "test": {

cypress/e2e/copying.cy.js

@@ -1,39 +1,51 @@
-describe('Tests about copying', function() {
+describe("Tests about copying", function () {
   beforeEach(() => {
     cy.clearDebugStore();
-  })
+  });
 
   afterEach(() => {
-    cy.get('li#testTab').click();
-    cy.get('#SelectAllButton').click();
-    cy.get('.row #DeleteSelectedButton').click();
-    cy.get('#confirmDeletion').click();
-    cy.get('#debugTab').click();
+    cy.get("li#testTab").click();
+    cy.get("#SelectAllButton").click();
+    cy.get(".row #DeleteSelectedButton").click();
+    cy.get("#confirmDeletion").click();
+    cy.get("#debugTab").click();
   });
 
-  it('Copy report to test tab', () => {
-    cy.visit('');
-    cy.get('#testTab').click();
-    cy.get('#metadataTable tbody', {timeout: 10000}).find('tr').should('not.exist');
+  it("Copy report to test tab", () => {
+    cy.visit("");
+    cy.get("#testTab").click();
+    cy.get("#metadataTable tbody", { timeout: 10000 })
+      .find("tr")
+      .should("not.exist");
     cy.createReport();
-    cy.get('#debugTab').click();
-    cy.get('#metadataTable tbody', {timeout: 10000}).find('tr').should('not.exist');
-    cy.get('.row #RefreshButton').click();
-    cy.get('#metadataTable tbody').find('tr').should('have.length', 1);
-    cy.get('button[id="SelectAllReportsButton"]').click();
+    cy.get("#debugTab").click();
+    cy.get("#metadataTable tbody", { timeout: 10000 })
+      .find("tr")
+      .should("not.exist");
+    cy.get(".row #RefreshButton").click();
+    cy.get("#metadataTable tbody").find("tr").should("have.length", 1);
+    cy.get("[data-cy-select-all-reports]").click();
     cy.get('button[id="OpenSelectedReportsButton"]').click();
-    cy.get('#debug-tree .jqx-tree-dropdown-root > li').should('have.length', 1);
-    cy.get('button#CopyButton').click();
-    cy.get('li#testTab').click();
+    cy.get("#debug-tree .jqx-tree-dropdown-root > li").should("have.length", 1);
+    cy.get("button#CopyButton").click();
+    cy.get("li#testTab").click();
     // We test that the user does not have to refresh here.
-    cy.get('tbody#testReports').find('tr').should('have.length', 1);
-    cy.get('tbody#testReports').find('tr').contains('/Simple report').should('have.length', 1);
-    cy.get('#debugTab').click();
-    cy.get('#metadataTable tbody', {timeout: 10000}).find('tr').should('have.length', 1);
-    cy.get('#debug-tree .jqx-tree-dropdown-root > li').should('have.length', 1);
-    cy.get('li#testTab').click();
+    cy.get("tbody#testReports").find("tr").should("have.length", 1);
+    cy.get("tbody#testReports")
+      .find("tr")
+      .contains("/Simple report")
+      .should("have.length", 1);
+    cy.get("#debugTab").click();
+    cy.get("#metadataTable tbody", { timeout: 10000 })
+      .find("tr")
+      .should("have.length", 1);
+    cy.get("#debug-tree .jqx-tree-dropdown-root > li").should("have.length", 1);
+    cy.get("li#testTab").click();
     // Do not refresh. The test tab should have saved its state.
-    cy.get('tbody#testReports').find('tr').should('have.length', 1);
-    cy.get('tbody#testReports').find('tr').contains('/Simple report').should('have.length', 1);
+    cy.get("tbody#testReports").find("tr").should("have.length", 1);
+    cy.get("tbody#testReports")
+      .find("tr")
+      .contains("/Simple report")
+      .should("have.length", 1);
   });
 });

cypress/e2e/debug_aboutOpenedReports.cy.js

@@ -8,7 +8,7 @@ describe("About opened reports", function () {
 
   it("Close one", function () {
     cy.enableShowMultipleInDebugTree();
-    cy.get('button[id="SelectAllReportsButton"]').click();
+    cy.get("[data-cy-select-all-reports]").click();
     cy.get('button[id="OpenSelectedReportsButton"]').click();
     // Each of the two reports has three lines.
     cy.get("#debug-tree .jqx-tree-dropdown-root > li").should("have.length", 2);