[#2425] Fix incorrect widgets in portfolio mode (#2435)

Fix incorrect widgets in portfolio mode

Widgets in portfolio were displaying incorrect charts.

Let's fix these issues and ensure widgets in portfolio mode follows
portfolio mode behavior.

Author: Airiinnn

frontend/cypress/configs/portfolio/repo-config.csv

@@ -6,3 +6,4 @@ https://github.com/reposense/testrepo-Empty4.git,master,,,,,,,,,
 https://github.com/reposense/testrepo-Empty5.git,master,,,,,,,,,
 https://github.com/reposense/publish-RepoSense.git,master,,,,,,,,20/01/2019,29/12/2019
 https://github.com/reposense/RepoSense-auth-helper.git,master,,,,,,,,01/02/2023,02/02/2023
+https://github.com/reposense/repoSense-action.git,main,,,,,,,,29/04/2022,02/02/2023

frontend/cypress/tests/portfolioView/portfolioView_filterBreakdown.cy.js

@@ -76,4 +76,5 @@ describe('portfolio view filter breakdown',
       cy.get('#summary div.fileTypes input[id="all"]')
         .should('not.be.checked');
     });
-  });
+  },
+);

frontend/cypress/tests/portfolioView/portfolioView_header.cy.js

@@ -35,5 +35,5 @@ describe('portfolio view',
       cy.get('#summary .summary-chart__title--name')
         .should('not.exist');
     });
-  }
+  },
 );

frontend/cypress/tests/portfolioView/portfolioView_optimiseTimeline.cy.js

@@ -154,4 +154,5 @@ describe('optimise timeline',
           cy.wrap(title).should('eq', '[2019-08-18] AboutUs: update team members (#867): +94 -12 lines ');
         });
     });
-  });
+  },
+);

frontend/cypress/tests/portfolioView/portfolioView_widget.cy.js

@@ -0,0 +1,72 @@
+describe('widget',
+  {baseUrl: Cypress.env('portfolioBaseUrl')},
+  () => {
+    beforeEach(() => {
+      // Stub the clipboard API to capture copied content
+      cy.window().then((win) => {
+        cy.stub(win.navigator.clipboard, 'writeText').as('clipboardWrite');
+      });
+
+    });
+
+    it('group link should open the correct group\'s widget', () => {
+      cy.get('.summary-charts__title .fa-clipboard')
+        .first()
+        .click()
+
+      // Verify clipboard content includes the iframe tag
+      cy.get('@clipboardWrite').should('have.been.called');
+
+      // Verify clipboard content includes the iframe tag
+      cy.get('@clipboardWrite').then((clipboardCall) => {
+        const copiedText = clipboardCall.args[0][0];
+        expect(copiedText).to.include('<iframe');
+        expect(copiedText).to.include('src="');
+
+        // Extract and visit the iframe src
+        const srcMatch = copiedText.match(/src="([^"]+)"/);
+        expect(srcMatch).to.not.be.null;
+        const iframeSrc = srcMatch[1];
+        cy.visit(iframeSrc);
+
+        cy.get('.summary-charts__title--groupname')
+          .should('have.length', 1)
+          .contains('reposense/publish-RepoSense[master]');
+
+        cy.get('.summary-chart')
+          .should('have.length', 1);
+      });
+    });
+
+    it('user link should open the correct user\'s widget', () => {
+      cy.get('.summary-charts')
+        .eq(1)
+        .find('.summary-chart__title .fa-clipboard')
+        .first()
+        .click()
+
+      // Verify clipboard content includes the iframe tag
+      cy.get('@clipboardWrite').should('have.been.calledOnce');
+
+      // Verify clipboard content includes the iframe tag
+      cy.get('@clipboardWrite').then((clipboardCall) => {
+        const copiedText = clipboardCall.args[0][0];
+        expect(copiedText).to.include('<iframe');
+        expect(copiedText).to.include('src="');
+
+        // Extract and visit the iframe src
+        const srcMatch = copiedText.match(/src="([^"]+)"/);
+        expect(srcMatch).to.not.be.null;
+        const iframeSrc = srcMatch[1];
+        cy.visit(iframeSrc);
+
+        cy.get('.summary-charts__title--groupname')
+          .should('have.length', 1)
+          .contains('reposense/repoSense-action[main]');
+
+        cy.get('.summary-chart')
+          .should('have.length', 1);
+      });
+    });
+  },
+);

frontend/src/mixin/summaryMixin.ts

@@ -39,6 +39,8 @@ export default defineComponent({
     fileTypeColors: { [key: string]: string },
     filterGroupSelectionWatcherFlag: boolean,
     optimiseTimeline: boolean,
+    chartGroupIndex: number | undefined,
+    chartIndex: number | undefined,
   } {
     return {
       checkedFileTypes: [],
@@ -48,6 +50,8 @@ export default defineComponent({
       fileTypeColors: {} as { [key: string]: string },
       filterGroupSelectionWatcherFlag: false,
       optimiseTimeline: window.isPortfolio, // Auto select trim timeline if portfolio
+      chartGroupIndex: undefined as number | undefined,
+      chartIndex: undefined as number | undefined,
     };
   },
 

frontend/src/views/c-summary-portfolio.vue

@@ -31,7 +31,9 @@
     :filter-until-date="until",
     :min-date="since",
     :max-date="until",
-    :optimise-timeline="optimiseTimeline"
+    :optimise-timeline="optimiseTimeline",
+    :chart-group-index="chartGroupIndex",
+    :chart-index="chartIndex"
   )
 
   .logo(v-if="isWidgetMode")
@@ -96,6 +98,7 @@ export default defineComponent({
       const { addHash, encodeHash, removeHash } = window;
 
       addHash('breakdown', this.filterBreakdown);
+      addHash('optimiseTimeline', this.optimiseTimeline);
 
       if (this.filterBreakdown) {
         const checkedFileTypesHash = this.checkedFileTypes.length > 0
@@ -106,12 +109,6 @@ export default defineComponent({
         removeHash('checkedFileTypes');
       }
 
-      if (this.optimiseTimeline) {
-        addHash('optimiseTimeline', 'true');
-      } else {
-        removeHash('optimiseTimeline');
-      }
-
       encodeHash();
     },
 
@@ -131,6 +128,15 @@ export default defineComponent({
       if (hash.optimiseTimeline) {
         this.optimiseTimeline = convertBool(hash.optimiseTimeline);
       }
+
+      // Widget data
+      if (hash.chartGroupIndex) {
+        this.chartGroupIndex = parseInt(hash.chartGroupIndex, 10);
+      }
+
+      if (hash.chartIndex) {
+        this.chartIndex = parseInt(hash.chartIndex, 10);
+      }
     },
 
     toggleBreakdown(): void {
@@ -166,7 +172,7 @@ export default defineComponent({
 
       const filterControl = {
         filterGroupSelection: FilterGroupSelection.GroupByRepos,
-        sortingOption: SortGroupSelection.GroupTitleDsc.split(' ')[0],
+        sortingOption: SortGroupSelection.GroupTitle,
         sortingWithinOption: SortWithinGroupSelection.Title,
         isSortingDsc: false,
         isSortingWithinDsc: false,

frontend/src/views/c-summary.vue

@@ -121,8 +121,6 @@ export default defineComponent({
     filterHash: string,
     minDate: string,
     maxDate: string,
-    chartGroupIndex: number | undefined,
-    chartIndex: number | undefined,
     viewRepoTags: boolean,
     filteredFileName: string,
   } {
@@ -143,8 +141,6 @@ export default defineComponent({
       filterHash: '',
       minDate: window.sinceDate,
       maxDate: window.untilDate,
-      chartGroupIndex: undefined as number | undefined,
-      chartIndex: undefined as number | undefined,
       viewRepoTags: false,
       filteredFileName: ''
     };

frontend/src/views/c-widget.vue

@@ -2,6 +2,15 @@
 template(v-if="userUpdated")
   #summary-wrapper
     c-summary.widget-padding(
+      v-if="!isPortfolio",
+      ref="summary",
+      :repos="users",
+      :error-messages="errorMessages",
+      :is-widget-mode="true"
+    )
+
+    c-summary-portfolio.widget-padding(
+      v-else,
       ref="summary",
       :repos="users",
       :error-messages="errorMessages",
@@ -11,12 +20,16 @@ template(v-else)
   .empty Widget does not support uploading of .zip file generated by RepoSense.
 </template>
 
-<script>
+<script lang='ts'>
+import { defineComponent } from 'vue';
+
 import cSummary from './c-summary.vue';
+import CSummaryPortfolio from "./c-summary-portfolio.vue";
 
-export default {
+export default defineComponent({
   name: 'c-widget',
   components: {
+    CSummaryPortfolio,
     cSummary,
   },
   props: {
@@ -57,7 +70,12 @@ export default {
       required: true,
     },
   },
-};
+  computed: {
+    isPortfolio(): boolean {
+      return window.isPortfolio;
+    }
+  },
+});
 </script>
 
 <style lang="scss">