[Vue] Migrate Dashboard directive/model to Vue (#18883)

* get outputted typings to be used when compiling other plugins and fix typescript issues in CorePluginsAdmin

* readd corehome umd

* fix typescript errors in ExampleVue plugin

* fix feedback typescript errors

* rebuild

* migrate branding controller and get to build

* fix issues and get to work

* rebuild

* fix notification scroll

* migrate smtp settings controller in coreadminhome

* get to work

* migrate js tracking code generator and get to build

* migrate image tracking code generator and get to build

* get to work in UI

* get UI tests to pass locally

* forgot to add files + rebuild vue

* update screenshots

* Show a summary of new features (#18065)

* Added "What is new" notification display, populated by a new event

* Removed test example event hook

* Added support for applying a link attribute to menu items, fixes layout issue for mobile with html menu items

* Updated UI test screenshots

* Revert accidental edit

* Hide the "What's new" icon if there are no new features to show

* Changed to use changes.json, track user last viewed, added ui test

* Fix UserManager unit tests broken by new ts_changes_viewed user field

* Moved getChanges to separate helper class, added unit test, added user view access check

* Updated to add new changes table and populate only on plugin update/install

* Added missing fixture class, updated UI screenshots

* Updated matomo font to add ringing bell and new releases icons

* Fix for integration test

* Reworked class structure, removed unnecessary angular directive, merged templates, other tidy ups

* built vue files

* built vue files

* Added null user check, missing table exception handling, show plugin name in change title, better handling of missing change fields

* Added sample changes file, moved UserChanges db code to changes model, added return type hints, better db error code handling, various other improvements

* Revert accidental UI screenshot commit

* Fix for incorrect link name parameter in sample changes, switched back to using $db->query for INSERT IGNORE

* Integration test fix, UI screenshot updates

* Test fix

* Added link styling, show CoreHome changes without plugin prefix in title

* Update UI test screenshot

* Added styles to the popover, added event for filtering changes

* Test fix

* UI test screenshot updates

Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: bx80 <bx80@users.noreply.github.com>

* Update test translation (#18531)

update a test failed XML

* updates all submodules (#18541)

Co-authored-by: diosmosis <diosmosis@users.noreply.github.com>

* Translations update from Hosted Weblate (#18529)

* Translated using Weblate (Greek)

Currently translated at 100.0% (162 of 162 strings)

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/el/

[ci skip]

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>

* Translated using Weblate (Chinese (Simplified))

Currently translated at 83.9% (136 of 162 strings)

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/zh_Hans/

[ci skip]

Translated using Weblate (Chinese (Simplified))

Currently translated at 99.6% (620 of 622 strings)

Translation: Matomo/Matomo Base
Translate-URL: https://hosted.weblate.org/projects/matomo/matomo-base/zh_Hans/

[ci skip]

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: 刘韬 <lyuutau@outlook.com>

* Update translation files

Updated by "Squash Git commits" hook in Weblate.

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/

[ci skip]

Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>
Co-authored-by: 刘韬 <lyuutau@outlook.com>

* [Vue] migrate report export directive and popover (#18440)

* update files

* sidenav start

* make getRef a utility method

* tweak

* add return type

* finish converting side-nav directive

* starting on reporting menu conversion

* remove unused properties

* convert reporting pages service

* migrate report metadata store

* remove angularjs files

* migrating reporting pages store

* make store adapters more immutable

* get service adapters to work

* fix a UI test

* another html fix

* migrate most of reporting menu directive and model

* Use themed font family for input forms to override materialize.css styling

* rebuild vue

* add a missing div

* ui test fixes

* update styling

* get to build

* get to load in the UI w/o error

* clone result of functions

* fix compile issue

* migrate widget loader and get to load in UI

* rebuild vue

* migrate widgetcontainer

* migrate widget bydimension container

* migrate widget + add tooltips directive

* quick fix

* Updating version to 4.6.0

* loading in page

* update expected screenshot

* add wait just in case travis is slow

* fix ordering bug

* add another wait

* rebuild vue

* css tweak

* fix some bugs and tests

* undo screenshot changes

* Menus test passing locally

* [Vue] date picker viewDate property is not kept up to date (#18385)

* viewDate ref is not kept up to date

* rebuild corehome

* reporting menu subcategory items are meant to be normal links

* update some screenshots

* use innerText instead of text() since angularjs maintains newlines in HTML that vue does not add

* trigger angularjs digest after ajaxhelper request

* rebuild vue

* update screenshots, fix bug in link generation in reporting menu and allow syncing multiple screenshot regexes at a time

* undo box-shadow change for UI tests

* fix more issues & update more tests

* update some screenshots

* fix some tests

* rebuild CoreHome

* quick fix

* built vue files

* fix angularjs issue

* add comment

* update umd files

* 4.6.1-rc1

* 4.6.1

* fix field array title

* apply some pr feedback

* apply more pr feedback

* another fix

* tweak

* fix ng-change not executed before ng-model

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* update some screenshots

* rebuild vue

* remove some TODOs

* initiate initial ng-change ONLY for site selectors where this behavior applies

* emit/broadcast on correct scope in wrapper

* rebuild vue

* fix some issues

* couple more fixes

* fix another title issue

* rebuild vue

* do not report on ajax errors in notifications if not logged in

* migrate reporting page and model

* rebuild vue

* create sites selector model adapter

* fix siteselector vue bug, initial site is only set if there is just one site available

* rebuild vue

* migrate plugin settings directive

* remove TODO

* migrate plugin filter directive

* migrate two more plugins directives

* migrate save button

* fix a bunch of bugs

* fix another widget bug

* allow change event name between angularjs and vue

* rebuild vue

* migrate plugin form directive

* get to work

* migrate select-on-focus directive and start migrating report-export directive

* finish migrating report export directive & popover component + create reusable function to create vue app and add globals to it

* rebuild vue

* remove angularjs files and move less contents to vue dir

* built vue files

* fix function signature

* fix vue warning

* fix ajax request race condition

* rebuild vue

* add new notification type "help" so the help notification is not cleared when clearing transient notifications

* fix some bugs and tests

* update screenshot

* update screenshot & fix a test

* allow using unminified jquery ui + fix bug in last fix

* fix error when enrichedheadline is used in modal

* add polyfill min.js

* remove two todos

* fix widget url logic

* update some screenshots and fix sanitization/escape issue

* update screenshots

* rebuild vue

* fix url location updating regression in MatomoUrl.updateLocation use

* submodule

* update screenshots and fix possible error in json parse

* built vue files

* Merge branch 'vue-period-selector-regression' into vue-reporting-menu

* rebuild vue

* use correct variable

* rebuild vue

* fix widget url logic

* segment parameter can be undefined now for some reason

* fix ngmodel binding in siteselector adapter (for last time hopefully)

* the original site selector only set the first site to the first site in the initial sites query if there was only one site in the entire matomo instance

* fix sitesmanager ui test failure

* fix usersettings test failure

* rebuild vue

* more siteselector tweaks.

* build CoreHome

* more siteselector tweaks.

* another siteselector issue

* update screenshots

* update screenshot and try to fix random failure

* fix some issues in widget.vue when containerid is specified

* fix couple tests

* fix several test failures

* fix string concat

* fix test failure

* extra change

* fix last change and random failure

* styling fix

* fix last fix

* real fix this time

* fix stray request

* proper fix

* update build files

* try to fix random failure

* do not submit form

* check for api errors in promise chain in ajaxhelper.ts

* force a digest after a location change

* use proper abortcontroller method instead of promise hack, have to add new polyfill + try to fix random test failure

* some UI test fixes

* fix some report export issues

* several save button fixes + make replace approximation in createAngularJsAdapter better

* apply after manual click triggering in savebutton

* add names to divs so they can still be queried as they were in angularjs

* rebuild vue

* now that format_metrics checkbox works, need to check it

* fix unintended changes

* updated expected screenshots

* update two more

* go back to previous format_metrics behavior in popover

Co-authored-by: Justin Velluppillai <justin@innocraft.com>
Co-authored-by: justinvelluppillai <justinvelluppillai@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>

* [Vue] remove support in vue for FormField.allSettings (#18542)

* deprecate support in vue for FormField.allSettings since deep watching the property doesnt quite work

* built vue files

* update screenshots

* update screenshot

* Show a summary of new features (#18065)

* Added "What is new" notification display, populated by a new event

* Removed test example event hook

* Added support for applying a link attribute to menu items, fixes layout issue for mobile with html menu items

* Updated UI test screenshots

* Revert accidental edit

* Hide the "What's new" icon if there are no new features to show

* Changed to use changes.json, track user last viewed, added ui test

* Fix UserManager unit tests broken by new ts_changes_viewed user field

* Moved getChanges to separate helper class, added unit test, added user view access check

* Updated to add new changes table and populate only on plugin update/install

* Added missing fixture class, updated UI screenshots

* Updated matomo font to add ringing bell and new releases icons

* Fix for integration test

* Reworked class structure, removed unnecessary angular directive, merged templates, other tidy ups

* built vue files

* built vue files

* Added null user check, missing table exception handling, show plugin name in change title, better handling of missing change fields

* Added sample changes file, moved UserChanges db code to changes model, added return type hints, better db error code handling, various other improvements

* Revert accidental UI screenshot commit

* Fix for incorrect link name parameter in sample changes, switched back to using $db->query for INSERT IGNORE

* Integration test fix, UI screenshot updates

* Test fix

* Added link styling, show CoreHome changes without plugin prefix in title

* Update UI test screenshot

* Added styles to the popover, added event for filtering changes

* Test fix

* UI test screenshot updates

Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: bx80 <bx80@users.noreply.github.com>

* Update test translation (#18531)

update a test failed XML

* updates all submodules (#18541)

Co-authored-by: diosmosis <diosmosis@users.noreply.github.com>

* Translations update from Hosted Weblate (#18529)

* Translated using Weblate (Greek)

Currently translated at 100.0% (162 of 162 strings)

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/el/

[ci skip]

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>

* Translated using Weblate (Chinese (Simplified))

Currently translated at 83.9% (136 of 162 strings)

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/zh_Hans/

[ci skip]

Translated using Weblate (Chinese (Simplified))

Currently translated at 99.6% (620 of 622 strings)

Translation: Matomo/Matomo Base
Translate-URL: https://hosted.weblate.org/projects/matomo/matomo-base/zh_Hans/

[ci skip]

Co-authored-by: Hosted Weblate <hosted@weblate.org>
Co-authored-by: 刘韬 <lyuutau@outlook.com>

* Update translation files

Updated by "Squash Git commits" hook in Weblate.

Translation: Matomo/Plugin CoreAdminHome
Translate-URL: https://hosted.weblate.org/projects/matomo/plugin-coreadminhome/

[ci skip]

Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>
Co-authored-by: 刘韬 <lyuutau@outlook.com>

* [Vue] migrate report export directive and popover (#18440)

* update files

* sidenav start

* make getRef a utility method

* tweak

* add return type

* finish converting side-nav directive

* starting on reporting menu conversion

* remove unused properties

* convert reporting pages service

* migrate report metadata store

* remove angularjs files

* migrating reporting pages store

* make store adapters more immutable

* get service adapters to work

* fix a UI test

* another html fix

* migrate most of reporting menu directive and model

* Use themed font family for input forms to override materialize.css styling

* rebuild vue

* add a missing div

* ui test fixes

* update styling

* get to build

* get to load in the UI w/o error

* clone result of functions

* fix compile issue

* migrate widget loader and get to load in UI

* rebuild vue

* migrate widgetcontainer

* migrate widget bydimension container

* migrate widget + add tooltips directive

* quick fix

* Updating version to 4.6.0

* loading in page

* update expected screenshot

* add wait just in case travis is slow

* fix ordering bug

* add another wait

* rebuild vue

* css tweak

* fix some bugs and tests

* undo screenshot changes

* Menus test passing locally

* [Vue] date picker viewDate property is not kept up to date (#18385)

* viewDate ref is not kept up to date

* rebuild corehome

* reporting menu subcategory items are meant to be normal links

* update some screenshots

* use innerText instead of text() since angularjs maintains newlines in HTML that vue does not add

* trigger angularjs digest after ajaxhelper request

* rebuild vue

* update screenshots, fix bug in link generation in reporting menu and allow syncing multiple screenshot regexes at a time

* undo box-shadow change for UI tests

* fix more issues & update more tests

* update some screenshots

* fix some tests

* rebuild CoreHome

* quick fix

* built vue files

* fix angularjs issue

* add comment

* update umd files

* 4.6.1-rc1

* 4.6.1

* fix field array title

* apply some pr feedback

* apply more pr feedback

* another fix

* tweak

* fix ng-change not executed before ng-model

* fix another set of issues

* fix another issue

* rebuild vue

* better ng-change/ng-model fix

* update some screenshots

* rebuild vue

* remove some TODOs

* initiate initial ng-change ONLY for site selectors where this behavior applies

* emit/broadcast on correct scope in wrapper

* rebuild vue

* fix some issues

* couple more fixes

* fix another title issue

* rebuild vue

* do not report on ajax errors in notifications if not logged in

* migrate reporting page and model

* rebuild vue

* create sites selector model adapter

* fix siteselector vue bug, initial site is only set if there is just one site available

* rebuild vue

* migrate plugin settings directive

* remove TODO

* migrate plugin filter directive

* migrate two more plugins directives

* migrate save button

* fix a bunch of bugs

* fix another widget bug

* allow change event name between angularjs and vue

* rebuild vue

* migrate plugin form directive

* get to work

* migrate select-on-focus directive and start migrating report-export directive

* finish migrating report export directive & popover component + create reusable function to create vue app and add globals to it

* rebuild vue

* remove angularjs files and move less contents to vue dir

* built vue files

* fix function signature

* fix vue warning

* fix ajax request race condition

* rebuild vue

* add new notification type "help" so the help notification is not cleared when clearing transient notifications

* fix some bugs and tests

* update screenshot

* update screenshot & fix a test

* allow using unminified jquery ui + fix bug in last fix

* fix error when enrichedheadline is used in modal

* add polyfill min.js

* remove two todos

* fix widget url logic

* update some screenshots and fix sanitization/escape issue

* update screenshots

* rebuild vue

* fix url location updating regression in MatomoUrl.updateLocation use

* submodule

* update screenshots and fix possible error in json parse

* built vue files

* Merge branch 'vue-period-selector-regression' into vue-reporting-menu

* rebuild vue

* use correct variable

* rebuild vue

* fix widget url logic

* segment parameter can be undefined now for some reason

* fix ngmodel binding in siteselector adapter (for last time hopefully)

* the original site selector only set the first site to the first site in the initial sites query if there was only one site in the entire matomo instance

* fix sitesmanager ui test failure

* fix usersettings test failure

* rebuild vue

* more siteselector tweaks.

* build CoreHome

* more siteselector tweaks.

* another siteselector issue

* update screenshots

* update screenshot and try to fix random failure

* fix some issues in widget.vue when containerid is specified

* fix couple tests

* fix several test failures

* fix string concat

* fix test failure

* extra change

* fix last change and random failure

* styling fix

* fix last fix

* real fix this time

* fix stray request

* proper fix

* update build files

* try to fix random failure

* do not submit form

* check for api errors in promise chain in ajaxhelper.ts

* force a digest after a location change

* use proper abortcontroller method instead of promise hack, have to add new polyfill + try to fix random test failure

* some UI test fixes

* fix some report export issues

* several save button fixes + make replace approximation in createAngularJsAdapter better

* apply after manual click triggering in savebutton

* add names to divs so they can still be queried as they were in angularjs

* rebuild vue

* now that format_metrics checkbox works, need to check it

* fix unintended changes

* updated expected screenshots

* update two more

* go back to previous format_metrics behavior in popover

Co-authored-by: Justin Velluppillai <justin@innocraft.com>
Co-authored-by: justinvelluppillai <justinvelluppillai@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>

* [Vue] remove support in vue for FormField.allSettings (#18542)

* deprecate support in vue for FormField.allSettings since deep watching the property doesnt quite work

* built vue files

* update screenshots

* update screenshot

* fix tests

* rebuild

* rebuild

* order plugins by dependencies in vue:build and fix warning in corehome build

* built vue files

* built vue files

* remove unused imports

* built vue files

* remove multilinefield component, fieldtextareaarray does the same thing

* edit-trigger is not used anywhere

* migrate sitetypes model to store

* do not load nonexistant files

* remove reference nonexistant files

* start converting sitefields component

* more work on sitefields component

* undo submodule change

* rebuild

* get sitesmanager to build

* get SiteFields component to work in UI

* datepicker does not format times

* export other stores

* fix some typing issues and rebuild

* start on site management conversion

* add more comma delimited props to list + remove controller JS

* rebuild

* convert sites manager controller to sitesmanagement component

* remove TODOs

* finish migrating sitesmanager

* remove some TODO

* get to build

* fixes from testing

* rebuild

* rebuild and fix issue w/ globalsettings hash detection

* migrate capabilities-edit component.

* some fixes and get to build

* get to work

* built vue files

* get to work and rebuild

* migrate user edit form component

* some fixes

* fixes

* another fix

* more fixes

* update file

* more fixes

* fix ref

* rebuild vue

* couple more fixes

* migrate paged users list and get to build

* fixing issues

* workaround vue issue w/ directives that modify css classes on elements that also bind to :class

* dropdownmenu directive should be aware of data-target parameter that is required by materialize

* handle disabled options in fieldselect

* fix issues and rebuild vue

* migrate usersmanager component and get to build

* forgot to add files, fix some issues + rebuild

* migrate usersmanager controllers and twig template parts

* fix compile issues and get to build

* fix issues and rebuild

* fix bug and rebuild

* fix bug and rebuild

* fix issue

* fix issues and rebuild

* fix ui test

* fix UI test failure

* fixing some issues

* complete fixes

* fix some more issues

* fix ui test failures

* another fix

* several more fixes

* fix delete dialog

* more fixes

* fix styling issue

* more fixes

* fix another ui test + update other UI tests

* fixing edisiteid handling

* update screenshots

* fix UI tests somre more

* fix random failure

* fixes

* reference css class not attribute (since that is what is added in vue)

* fixing more ui tests

* try to fix vue css class in directive issue

* tweak

* in groupedsetting handle templateFile property for angularjs BC

* rebuild vue

* fix view tracking code link

* fixing UI tests

* fix selector in test for this branch only

* Update screenshot.

* update screenshot

* update screenshots

* style fix

* fix selectors and update screenshot

* built vue files

* Update screenshot + fix title and spacing.

* fix password changing

* fixing tests

* fix more issues

* fix styling

* built vue files

* more fixes

* more styling fixes

* more fixes

* Fix tests locally.

* Fixing more issues + getting UI tests to pass locally.

* update tagmanger module?

* fix UI tests

* remove unneeded event

* update screenshots

* start migrating series-picker

* get series picker component to work

* start migrating single metric view

* update style

* fix some issues

* get to work in UI

* fix percent evolution

* more migrating

* more changes

* migrate dashboard angularjs directives and get to work in the UI

* fix ajax loading race condition

* fix scope.fetchDashboard call and ui test random failures (hopefully)

* try fixing travis-ci failures

* rebuild

* rebuild CoreHome

* undo test change and fix another race condition

* remove TODO

* Update plugins/Dashboard/tests/UI/Dashboard_spec.js

Co-authored-by: Stefan Giehl <stefan@matomo.org>

Co-authored-by: Ben Burgess <88810029+bx80@users.noreply.github.com>
Co-authored-by: sgiehl <stefan@matomo.org>
Co-authored-by: bx80 <bx80@users.noreply.github.com>
Co-authored-by: Peter Zhang <peter@innocraft.com>
Co-authored-by: github-actions[bot] <41898282+github-actions[bot]@users.noreply.github.com>
Co-authored-by: Weblate (bot) <hosted@weblate.org>
Co-authored-by: Vasilis Lourdas <dev@lourdas.eu>
Co-authored-by: 刘韬 <lyuutau@outlook.com>
Co-authored-by: Justin Velluppillai <justin@innocraft.com>
Co-authored-by: justinvelluppillai <justinvelluppillai@users.noreply.github.com>
Co-authored-by: Matthieu Aubry <mattab@users.noreply.github.com>

10 files changed, 62 insertions, 56 deletions

diff --git a/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.store.ts b/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.store.ts
index 24016e11ba..869117dfc6 100644
--- a/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.store.ts
+++ b/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.store.ts
@@ -14,12 +14,12 @@ import {
 import ReportingPagesStoreInstance, { Page } from '../ReportingPages/ReportingPages.store';
 import ReportMetadataStoreInstance from '../ReportMetadata/ReportMetadata.store';
 import { sortOrderables } from '../Orderable';
+import { getWidgetChildren } from '../Widget/Widgets.store';
 import {
-  getWidgetChildren,
   GroupedWidgets,
   Widget,
   WidgetContainer,
-} from '../Widget/Widgets.store';
+} from '../Widget/types';
 
 interface ReportingMenuStoreState {
   page?: DeepReadonly<Page>;
diff --git a/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue b/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
index 61392f9dd8..d1cd8388c7 100644
--- a/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
+++ b/plugins/CoreHome/vue/src/ReportingPage/ReportingPage.vue
@@ -83,6 +83,12 @@ interface ReportingPageState {
   hasNoPage: boolean;
 }
 
+interface LoadPageArgs {
+  category: string;
+  subcategory: string;
+  promise?: Promise<void>;
+}
+
 export default defineComponent({
   components: {
     ActivityIndicator,
@@ -175,24 +181,13 @@ export default defineComponent({
         this.showOnlyRawDataMessageIfRequired();
       }
 
-      if (category === 'Dashboard_Dashboard'
-        && $.isNumeric(subcategory)
-        && $('[piwik-dashboard]').length
-      ) {
-        // TODO: should be changed eventually
-        // hack to make loading of dashboards faster since all the information is already there
-        // in the piwik-dashboard widget, we can let the piwik-dashboard widget render the page.
-        // We need to find a proper solution for this. A workaround for now could be an event or
-        // something to let other components render a specific page.
+      const params: LoadPageArgs = { category, subcategory };
+      Matomo.postEvent('ReportingPage.loadPage', params);
+      if (params.promise) {
         this.loading = true;
-        const element = $('[piwik-dashboard]');
-        const scope = window.angular.element(element).scope() as any; // eslint-disable-line
-        scope.fetchDashboard(parseInt(subcategory, 10)).then(() => {
-          this.loading = false;
-        }, () => {
+        Promise.resolve(params.promise).finally(() => {
           this.loading = false;
         });
-
         return;
       }
 
diff --git a/plugins/CoreHome/vue/src/ReportingPages/ReportingPages.store.ts b/plugins/CoreHome/vue/src/ReportingPages/ReportingPages.store.ts
index 3f91b08ed8..e59986d6f6 100644
--- a/plugins/CoreHome/vue/src/ReportingPages/ReportingPages.store.ts
+++ b/plugins/CoreHome/vue/src/ReportingPages/ReportingPages.store.ts
@@ -10,7 +10,7 @@ import {
   computed, readonly, DeepReadonly,
 } from 'vue';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
-import { Widget } from '../Widget/Widgets.store';
+import { Widget } from '../Widget/types';
 
 interface CategoryRef {
   id: string;
diff --git a/plugins/CoreHome/vue/src/Widget/Widget.vue b/plugins/CoreHome/vue/src/Widget/Widget.vue
index 67f5838760..720970109e 100644
--- a/plugins/CoreHome/vue/src/Widget/Widget.vue
+++ b/plugins/CoreHome/vue/src/Widget/Widget.vue
@@ -39,11 +39,11 @@ import { DeepReadonly, defineComponent } from 'vue';
 import WidgetLoader from '../WidgetLoader/WidgetLoader.vue';
 import WidgetContainer from '../WidgetContainer/WidgetContainer.vue';
 import WidgetByDimensionContainer from '../WidgetByDimensionContainer/WidgetByDimensionContainer.vue';
-import WidgetsStoreInstance, {
-  getWidgetChildren,
+import WidgetsStoreInstance, { getWidgetChildren } from './Widgets.store';
+import {
   Widget as WidgetData,
   WidgetContainer as WidgetDataContainer,
-} from './Widgets.store';
+} from './types';
 import AjaxHelper from '../AjaxHelper/AjaxHelper';
 import ReportMetadataStoreInstance from '../ReportMetadata/ReportMetadata.store';
 import Tooltips from '../Tooltips/Tooltips';
diff --git a/plugins/CoreHome/vue/src/Widget/Widgets.store.ts b/plugins/CoreHome/vue/src/Widget/Widgets.store.ts
index 30823bb0cb..0ef76bee1c 100644
--- a/plugins/CoreHome/vue/src/Widget/Widgets.store.ts
+++ b/plugins/CoreHome/vue/src/Widget/Widgets.store.ts
@@ -11,37 +11,8 @@ import {
   computed,
   DeepReadonly,
 } from 'vue';
-import { Subcategory } from '../ReportingMenu/Subcategory';
 import MatomoUrl from '../MatomoUrl/MatomoUrl';
-import { Orderable } from '../Orderable';
-
-export interface Widget extends Orderable {
-  uniqueId?: string;
-  module?: string;
-  action?: string;
-  viewDataTable?: string;
-  parameters?: Record<string, unknown>;
-  subcategory?: Subcategory;
-  isContainer?: boolean;
-  isReport?: boolean;
-  middlewareParameters?: Record<string, unknown>;
-  documentation?: string;
-  layout?: string;
-  isWide?: boolean;
-  isFirstInPage?: boolean;
-}
-
-// get around DeepReadonly<> not being able to handle recursive types by moving the
-// recursive properties to subtypes that are only referenced when needed
-export interface WidgetContainer extends Widget {
-  widgets?: Widget[];
-}
-
-export interface GroupedWidgets {
-  group: boolean;
-  left?: Widget[];
-  right?: Widget[];
-}
+import { Widget, WidgetContainer } from './types';
 
 interface WidgetsStoreState {
   isFetchedFirstTime: boolean;
diff --git a/plugins/CoreHome/vue/src/Widget/types.ts b/plugins/CoreHome/vue/src/Widget/types.ts
new file mode 100644
index 0000000000..598fe567b9
--- /dev/null
+++ b/plugins/CoreHome/vue/src/Widget/types.ts
@@ -0,0 +1,37 @@
+/*!
+ * Matomo - free/libre analytics platform
+ *
+ * @link https://matomo.org
+ * @license http://www.gnu.org/licenses/gpl-3.0.html GPL v3 or later
+ */
+
+import { Orderable } from '../Orderable';
+import { Subcategory } from '../ReportingMenu/Subcategory';
+
+export interface Widget extends Orderable {
+  uniqueId?: string;
+  module?: string;
+  action?: string;
+  viewDataTable?: string;
+  parameters?: Record<string, unknown>;
+  subcategory?: Subcategory;
+  isContainer?: boolean;
+  isReport?: boolean;
+  middlewareParameters?: Record<string, unknown>;
+  documentation?: string;
+  layout?: string;
+  isWide?: boolean;
+  isFirstInPage?: boolean;
+}
+
+// get around DeepReadonly<> not being able to handle recursive types by moving the
+// recursive properties to subtypes that are only referenced when needed
+export interface WidgetContainer extends Widget {
+  widgets?: Widget[];
+}
+
+export interface GroupedWidgets {
+  group: boolean;
+  left?: Widget[];
+  right?: Widget[];
+}
diff --git a/plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.adapter.ts b/plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.adapter.ts
index bf2a7e4b3a..7f3f2bfb65 100644
--- a/plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.adapter.ts
+++ b/plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.adapter.ts
@@ -7,7 +7,7 @@
 
 import createAngularJsAdapter from '../createAngularJsAdapter';
 import WidgetByDimensionContainer from './WidgetByDimensionContainer.vue';
-import { Widget } from '../Widget/Widgets.store';
+import { Widget } from '../Widget/types';
 
 export default createAngularJsAdapter({
   component: WidgetByDimensionContainer,
diff --git a/plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.vue b/plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.vue
index 0e1a0d081a..60e87a342b 100644
--- a/plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.vue
+++ b/plugins/CoreHome/vue/src/WidgetByDimensionContainer/WidgetByDimensionContainer.vue
@@ -40,11 +40,9 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import WidgetLoader from '../WidgetLoader/WidgetLoader.vue';
-import { Widget } from '../Widget/Widgets.store';
+import { Widget } from '../Widget/types';
 import { sortOrderables } from '../Orderable';
 
-// TODO: is there a widget category ID or widget ID
-
 interface WidgetByDimensionContainerState {
   selectedWidget: Widget|null;
 }
diff --git a/plugins/CoreHome/vue/src/WidgetContainer/WidgetContainer.vue b/plugins/CoreHome/vue/src/WidgetContainer/WidgetContainer.vue
index f581e0208a..5f294cbc0b 100644
--- a/plugins/CoreHome/vue/src/WidgetContainer/WidgetContainer.vue
+++ b/plugins/CoreHome/vue/src/WidgetContainer/WidgetContainer.vue
@@ -23,7 +23,7 @@
 <script lang="ts">
 import { defineComponent } from 'vue';
 import useExternalPluginComponent from '../useExternalPluginComponent';
-import { Widget as WidgetData } from '../Widget/Widgets.store';
+import { Widget as WidgetData } from '../Widget/types';
 
 // since we're recursing, don't import the plugin directly
 const Widget = useExternalPluginComponent('CoreHome', 'Widget');
diff --git a/plugins/CoreHome/vue/src/index.ts b/plugins/CoreHome/vue/src/index.ts
index 9e44ab2249..965cd2002b 100644
--- a/plugins/CoreHome/vue/src/index.ts
+++ b/plugins/CoreHome/vue/src/index.ts
@@ -113,6 +113,11 @@ export { default as WidgetLoader } from './WidgetLoader/WidgetLoader.vue';
 export { default as WidgetContainer } from './WidgetContainer/WidgetContainer.vue';
 export { default as WidgetByDimensionContainer } from './WidgetByDimensionContainer/WidgetByDimensionContainer.vue';
 export { default as Widget } from './Widget/Widget.vue';
+export {
+  Widget as WidgetType,
+  WidgetContainer as WidgetContainerType,
+  GroupedWidgets as GroupedWidgetsType,
+} from './Widget/types';
 export { default as ReportingPage } from './ReportingPage/ReportingPage.vue';
 export { default as ReportExport } from './ReportExport/ReportExport';
 export { default as Sparkline } from './Sparkline/Sparkline.vue';