Merge branch 'master' into 2001-checkbox

.gitignore

@@ -22,3 +22,4 @@ node_modules
 
 reposense-report/
 docs/_site/
+bin/

build.gradle

@@ -284,6 +284,7 @@ def syncFrontendPublic = tasks.register('syncFrontendPublic', Sync) {
     preserve {
         include 'index.html'
         include 'favicon.ico'
+        include 'title.md'
     }
 }
 

docs/_markbind/layouts/ug-sitenav.md

@@ -7,7 +7,7 @@
   {name: "Appendices"},
   {level: 2, name: "CLI syntax reference", link: "ug/cli.html"},
   {level: 2, name: "Config files format", link: "ug/configFiles.html"},
-  {level: 2, name: "Advanced syntax: `author-config.csv`", link: "ug/authorConfigSyntax.html"}, 
+  {level: 2, name: "Advanced syntax: `author-config.csv`", link: "ug/authorConfigSyntax.html"},
   {level: 2, name: "Using `@@author` tags", link: "ug/usingAuthorTags.html"},
   {level: 2, name: "RepoSense with Netlify", link: "ug/withNetlify.html"},
   {level: 2, name: "RepoSense with GitHub Actions", link: "ug/withGithubActions.html"},

docs/about.md

@@ -30,7 +30,7 @@ Contributor [2023 January - 2024 January]<br/>
 <!-- ------------------------------------------------------------------------------------------------------ -->
 
 ### [Gokul Rajiv](https://github.com/gok99)
-**Role**: Senior Developer [2024 January - ]<br/> 
+**Role**: Senior Developer [2024 January - ]<br/>
 Contributor [2022 January - 2024 January]<br/>
 
 <!-- ------------------------------------------------------------------------------------------------------ -->

docs/ug/authorConfigSyntax.md

@@ -9,7 +9,7 @@
 
 <div class="lead">
 
-Given below are the advanced syntax available for `author-config.csv`. 
+Given below are the advanced syntax available for `author-config.csv`.
 </div>
 
 ## Multiple `Repository's Location` per author

docs/ug/cli.md

@@ -31,8 +31,7 @@ The section below provides explanations for each of the flags.
 <div id="section-assets">
 
 **`--assets ASSETS_DIRECTORY`**: Specifies where to place assets for report generation.
-* Parameter: `ASSETS_DIRECTORY` The directory containing the assets files. A `favicon.ico` file can be placed here to customize the favicon of the dashboard,
-while a `title.md` file can be placed to customize the header of the report using [Markdown syntax](https://www.markdownguide.org/basic-syntax/).
+* Parameter: `ASSETS_DIRECTORY` The directory containing the assets files. A `favicon.ico` file can be placed here to customize the favicon of the dashboard, while a `title.md` file can be placed to customize the [title](https://reposense.org/ug/customizingReports.html#add-a-title) of the report using [Markdown syntax](https://www.markdownguide.org/basic-syntax/).
 * Alias: `-a`
 * Example: `--assets ./assets` or `-a ./assets`
 

docs/ug/customizingReports.md

@@ -59,3 +59,17 @@ In both instances, it is **necessary to commit any changes** for them to be dete
 </box>
 
 3\. Add a git `.mailmap` file at the top-level of the repository, specifying mapped authors/commiters and/or e-mail addresses as per [gitmailmap documentation](https://git-scm.com/docs/gitmailmap). Any mappings specified here will be applied by git before all other RepoSense configurations. Configuration via `.mailmap` is particularly useful if you want the mapping to apply for all git commands as well instead of just for RepoSense.
+
+<!-- ------------------------------------------------------------------------------------------------------ -->
+
+### Add a title
+
+A title component can be added by creating a file titled `title.md` in the assets directory. You can specify the assets directory according to the reference below:
+{{ embed("Appendix: **CLI syntax reference → `assets` flag**", "cli.md#section-assets") }}
+
+The title can render a combination of Markdown/HTML and plaintext ([example](https://github.com/reposense/RepoSense/blob/master/docs/ug/title.md)), and will appear on the top of the left panel as shown below:
+![Title Component Example](../images/title-example.png)
+
+Do note that the width of the title is bound by the width of the left panel.
+
+For more information on how to use Markdown, see the [Markdown Guide](https://www.markdownguide.org/).

docs/ug/title.md

@@ -0,0 +1,9 @@
+# RepoSense
+
+RepoSense is a powerful tool for analyzing repositories. It provides valuable insights into your codebase, helping you understand the development patterns, identify areas for improvement, and track the contributions of individual team members.
+
+## Features
+
+- Repository analysis: Gain a comprehensive overview of your codebase, including commit statistics, file changes, and code ownership.
+- Contribution tracking: Easily track the contributions made by each team member, including the number of commits, lines of code added/removed, and more.
+- Visualization: Visualize your repository's history and changes over time through interactive graphs and charts.

docs/ug/usingReports.md

@@ -144,7 +144,7 @@ The `Code panel` allows users to see the code attributed to a specific author. C
 * Clicking the file title toggles the file content.
 * Clicking the first icon beside the file title opens the history view of the file on the remote repository.
 * Clicking the second icon beside the file title opens the blame view of the file on the remote repository.
-* When using the code panel for a specific author, code attributed to the author is highlighted in green. 
+* When using the code panel for a specific author, code attributed to the author is highlighted in green.
   * When using the `merge group` option with `group by repos`, the code panel will consist of multiple authors' contributions. Code attributed to these authors can be differentiated by the highlight colors of the code. The color legend is shown at the top of each file and consists only those authors that edited a particular file.
 * Non-trivial code segments that the selected author has not written are hidden by default, but you can toggle them by clicking on the %%:fas-plus-circle:%% icon.
 

frontend/.stylelintrc.json

@@ -1,43 +1,60 @@
 {
   "plugins": [
+    "@stylistic/stylelint-plugin",
     "stylelint-order"
   ],
   "extends": [
-    "stylelint-config-recommended-scss",
+    "stylelint-config-standard",
+    "stylelint-config-standard-scss",
     "stylelint-config-recommended-vue"
   ],
   "rules": {
+    "declaration-no-important": true,
+    "declaration-block-single-line-max-declarations": 1,
+    "no-invalid-double-slash-comments": true,
+    "function-no-unknown": null,
+    "no-descending-specificity": null,
+    "selector-type-no-unknown": null,
+    "at-rule-no-unknown": null,
+    "no-duplicate-selectors": null,
+    "length-zero-no-unit": true,
+    "value-keyword-case": "lower",
+    "selector-type-case": "lower",
     "color-no-invalid-hex": true,
     "string-no-newline": true,
     "unit-no-unknown": true,
     "property-no-unknown": true,
     "block-no-empty": true,
     "comment-no-empty": true,
-    "no-extra-semicolons": true,
-    "no-invalid-double-slash-comments": true,
-    "declaration-no-important": true,
-    "declaration-block-single-line-max-declarations": 1,
-    "number-leading-zero": "never",
-    "number-no-trailing-zeros": null,
-    "string-quotes": "single",
-    "length-zero-no-unit": true,
-    "value-keyword-case": "lower",
-    "property-case": "lower",
-    "declaration-colon-space-after": "always",
-    "selector-type-case": "lower",
-    "selector-list-comma-newline-after": "always",
-    "no-eol-whitespace": true,
+    "shorthand-property-no-redundant-values": null,
+    "declaration-empty-line-before": null,
+    "selector-class-pattern": null,
+    "color-function-notation": null,
+    "alpha-value-notation": null,
+    "comment-empty-line-before": null,
+    "property-no-vendor-prefix": null,
+    "selector-pseudo-element-colon-notation": null,
+    "at-rule-empty-line-before": null,
+    "font-family-name-quotes": null,
+    "color-hex-length": null,
+    "@stylistic/no-extra-semicolons": true,
+    "@stylistic/number-leading-zero": "never",
+    "@stylistic/number-no-trailing-zeros": null,
+    "@stylistic/property-case": "lower",
+    "@stylistic/string-quotes": "single",
+    "@stylistic/declaration-colon-space-after": "always",
+    "@stylistic/selector-list-comma-newline-after": "always",
+    "@stylistic/no-eol-whitespace": true,
+    "@stylistic/indentation": 2,
+    "@stylistic/block-opening-brace-space-before": "always",
+    "@stylistic/declaration-colon-space-before": "never",
     "order/properties-alphabetical-order": true,
-    "indentation": 2,
-    "scss/at-import-partial-extension": null,
-    "function-no-unknown": null,
-    "scss/at-import-no-partial-leading-underscore": null,
-    "no-descending-specificity": null,
     "scss/no-global-function-names": null,
-    "selector-type-no-unknown": null,
-    "at-rule-no-unknown": null,
-    "no-duplicate-selectors": null,
-    "block-opening-brace-space-before": "always",
-    "declaration-colon-space-before": "never"
+    "scss/at-import-no-partial-leading-underscore": null,
+    "scss/at-import-partial-extension": null,
+    "scss/load-no-partial-leading-underscore": null,
+    "scss/double-slash-comment-empty-line-before": null,
+    "scss/double-slash-comment-whitespace-inside": null,
+    "scss/dollar-variable-pattern": null
   }
 }

frontend/cypress/config/repo-config.csv

@@ -5,3 +5,6 @@ https://github.com/reposense/testrepo-Empty2.git,master,,,,,,,
 https://github.com/reposense/testrepo-Empty3.git,master,,,,,,,
 https://github.com/reposense/testrepo-Empty4.git,master,,,,,,,
 https://github.com/reposense/testrepo-Empty5.git,master,,,,,,,
+https://github.com/reposense/publish-RepoSense.git,master,,,,,,,
+https://github.com/reposense/repoSense-action.git,main,,,,,,,
+https://github.com/reposense/RepoSense-auth-helper.git,master,,,,,,,

frontend/cypress/tests/chartView/chartView_mergeGroup.cy.js

@@ -8,18 +8,18 @@ describe('merge group', () => {
       .check()
       .should('be.checked');
 
-    // after checking merge group, only one merged repo group will show
+    // after checking merge group, only four merged repo groups will show
     cy.get('#summary-charts').find('.summary-chart')
-      .should('have.length', 1);
+      .should('have.length', 4);
 
     cy.get('#summary label.merge-group > input:visible')
       .should('be.visible')
       .uncheck()
       .should('not.be.checked');
 
-    // after un-checking merge group, all 5 summary charts will show
+    // after un-checking merge group, all 14 summary charts will show
     cy.get('#summary-charts').find('.summary-chart')
-      .should('have.length', 5);
+      .should('have.length', 14);
   });
 
   it('check and uncheck merge group when group by authors', () => {
@@ -31,19 +31,19 @@ describe('merge group', () => {
       .check()
       .should('be.checked');
 
-    // after checking merge group, 5 merged author groups will show
+    // after checking merge group, 14 merged author groups will show
     cy.get('#summary-charts').find('.summary-chart')
-      .should('have.length', 5);
+      .should('have.length', 14);
 
     cy.get('#summary label.merge-group > input:visible')
       .first()
       .should('be.visible')
       .uncheck()
       .should('not.be.checked');
 
-    // after un-checking merge group, all 5 summary charts will show
+    // after un-checking merge group, all 14 summary charts will show
     cy.get('#summary-charts').find('.summary-chart')
-      .should('have.length', 5);
+      .should('have.length', 14);
   });
 
   it('merge group option should be disabled when group by none', () => {
@@ -56,26 +56,22 @@ describe('merge group', () => {
   });
 
   it('should have the correct number of merge group contribution bars and correct length', () => {
-    // Assumption: The number of merge group contribution bars is 3 and the width of the third bar is 50%.
     cy.get('#summary label.merge-group > input:visible')
       .should('be.visible')
       .check()
       .should('be.checked');
 
-    // get the three chart bars and assert they have the correct initial widths
+    // get the chart bars and assert they have the correct initial widths
+    const expectedWidths = [100, 100, 100, 15, 100, 100, 90, 30, 15];
     cy.get('.stacked-bar__contrib--bar')
-      .should('have.length', 3)
+      .should('have.length', expectedWidths.length)
       .then(($bars) => {
         // calculate the percentage of the width relative to the parent container
         const parentWidth = $bars.eq(0).parent().width();
-        const width1 = (parseFloat(window.getComputedStyle($bars[0]).width) / parentWidth) * 100;
-        const width2 = (parseFloat(window.getComputedStyle($bars[1]).width) / parentWidth) * 100;
-        const width3 = (parseFloat(window.getComputedStyle($bars[2]).width) / parentWidth) * 100;
-
-        // assert that the widths are close enough to 100% and 50%
-        expect(width1).to.be.closeTo(100, 1);
-        expect(width2).to.be.closeTo(100, 1);
-        expect(width3).to.be.closeTo(50, 1);
+        expectedWidths.forEach((expectedWidth, index) => {
+          const width = (parseFloat(window.getComputedStyle($bars[index]).width) / parentWidth) * 100;
+          expect(width).to.be.closeTo(expectedWidth, 1);
+        });
       });
   });
 

frontend/cypress/tests/chartView/chartView_scrollToActiveRepo.cy.js

@@ -0,0 +1,62 @@
+describe('scroll to active repo', () => {
+  // need to set scrollBehavior to false because the default behavior is to scroll the element into view
+  it('selecting a visible repo should not scroll', { scrollBehavior: false }, () => {
+    // close the error message box
+    cy.get('.error-message-box')
+      .should('be.visible');
+
+    cy.get('#summary-wrapper > #summary > .error-message-box > .error-message-box__close-button')
+      .click();
+
+    cy.get('.error-message-box')
+      .should('not.be.visible');
+
+    cy.get('.icon-button.fa-code')
+      .should('exist')
+      .first();
+
+    let scrollTopOriginal = 0;
+    cy.get('#summary-wrapper')
+      .first()
+      .then(($el) => {
+        scrollTopOriginal = $el.prop('scrollTop');
+      });
+
+    cy.get('.icon-button.fa-code')
+      .should('exist')
+      .first()
+      .click();
+
+    cy.get('#summary-wrapper')
+      .first()
+      .then(($el) => {
+        const scrollTop = $el.prop('scrollTop');
+        expect(scrollTop).to.equal(scrollTopOriginal);
+      });
+  });
+
+  it('selecting a non-visible repo should scroll', () => {
+    cy.get('.icon-button.fa-code')
+      .should('exist')
+      .last()
+      .click();
+
+    cy.get('#summary-wrapper')
+      .first()
+      .then(($el) => {
+        const scrollTop = $el.prop('scrollTop');
+        expect(scrollTop).to.not.equal(0);
+      });
+
+    cy.url()
+      .should('contain', 'tabAuthor=Yong%20Hao%20TENG')
+      .should('contain', 'tabRepo=reposense%2Fpublish-RepoSense%5Bmaster%5D');
+
+    cy.reload();
+
+    cy.get('.icon-button.fa-code')
+      .should('exist')
+      .last()
+      .should('be.visible');
+  });
+});

frontend/cypress/tests/chartView/chartView_toolBar_searchBox.cy.js

@@ -18,7 +18,7 @@ describe('search bar', () => {
   it('unique author shows one result', () => {
     cy.get('#app #tab-resize .tab-close').click();
     cy.get('#summary-wrapper input[type=text]')
-      .type('Yong Hao TENG')
+      .type('Metta')
       .type('{enter}');
 
     cy.get('#summary-wrapper form.summary-picker')