fix(ui): clean up typings for mobx stores

frontend/app/mstore/dashboardStore.ts

@@ -2,8 +2,8 @@ import {
     makeAutoObservable,
     runInAction,
 } from "mobx";
-import Dashboard, { IDashboard } from "./types/dashboard";
-import Widget, { IWidget } from "./types/widget";
+import Dashboard from "./types/dashboard";
+import Widget from "./types/widget";
 import { dashboardService, metricService } from "App/services";
 import { toast } from "react-toastify";
 import Period, {
@@ -11,96 +11,24 @@ import Period, {
     LAST_7_DAYS,
 } from "Types/app/period";
 import { getChartFormatter } from "Types/dashboard/helper";
-import Filter, { IFilter } from "./types/filter";
+import Filter from "./types/filter";
 import Funnel from "./types/funnel";
 import Session from "./types/session";
 import Error from "./types/error";
 import { FilterKey } from "Types/filter/filterType";
 
-export interface IDashboardStore {
-    dashboards: IDashboard[];
-    selectedDashboard: IDashboard | null;
-    dashboardInstance: IDashboard;
-    selectedWidgets: IWidget[];
-    startTimestamp: number;
-    endTimestamp: number;
-    period: Period;
-    drillDownFilter: IFilter;
-    drillDownPeriod: Period;
-
-    siteId: any;
-    currentWidget: Widget;
-    widgetCategories: any[];
-    widgets: Widget[];
-    metricsPage: number;
-    metricsPageSize: number;
-    metricsSearch: string;
-
-    isLoading: boolean;
-    loadingTemplates: boolean;
-    isSaving: boolean;
-    isDeleting: boolean;
-    fetchingDashboard: boolean;
-    sessionsLoading: boolean;
-
-    showAlertModal: boolean;
-
-    page: number
-    pageSize: number
-    dashboardsSearch: string
-    sort: any
-
-    selectWidgetsByCategory: (category: string) => void;
-    toggleAllSelectedWidgets: (isSelected: boolean) => void;
-    removeSelectedWidgetByCategory(category: Record<string, any>): void;
-    toggleWidgetSelection(widget: IWidget): void;
-
-    initDashboard(dashboard?: IDashboard): void;
-    updateKey(key: string, value: any): void;
-    resetCurrentWidget(): void;
-    editWidget(widget: any): void;
-    fetchList(): Promise<any>;
-    fetch(dashboardId: string): Promise<any>;
-    save(dashboard: IDashboard): Promise<any>;
-    deleteDashboard(dashboard: IDashboard): Promise<any>;
-    toJson(): void;
-    fromJson(json: any): void;
-    addDashboard(dashboard: IDashboard): void;
-    removeDashboard(dashboard: IDashboard): void;
-    getDashboard(dashboardId: string): IDashboard | null;
-    getDashboardCount(): void;
-    updateDashboard(dashboard: IDashboard): void;
-    selectDashboardById(dashboardId: string): void;
-    getDashboardById(dashboardId: string): boolean;
-    setSiteId(siteId: any): void;
-
-    saveMetric(metric: IWidget, dashboardId?: string): Promise<any>;
-    fetchTemplates(hardRefresh: boolean): Promise<any>;
-    deleteDashboardWidget(dashboardId: string, widgetId: string): Promise<any>;
-    addWidgetToDashboard(dashboard: IDashboard, metricIds: any): Promise<any>;
-    setDrillDownPeriod(period: any): void;
-
-    fetchMetricChartData(
-        metric: IWidget,
-        data: any,
-        isWidget: boolean,
-        period: Period
-    ): Promise<any>;
-    setPeriod(period: any): void;
-}
-export default class DashboardStore implements IDashboardStore {
+export default class DashboardStore {
     siteId: any = null;
-    // Dashbaord / Widgets
     dashboards: Dashboard[] = [];
     selectedDashboard: Dashboard | null = null;
     dashboardInstance: Dashboard = new Dashboard();
-    selectedWidgets: IWidget[] = [];
+    selectedWidgets: Widget[] = [];
     currentWidget: Widget = new Widget();
     widgetCategories: any[] = [];
     widgets: Widget[] = [];
-    period: Period = Period({ rangeName: LAST_24_HOURS });
+    period: Record<string, any> = Period({ rangeName: LAST_24_HOURS });
     drillDownFilter: Filter = new Filter();
-    drillDownPeriod: Period = Period({ rangeName: LAST_7_DAYS });
+    drillDownPeriod: Record<string, any> = Period({ rangeName: LAST_7_DAYS });
     startTimestamp: number = 0;
     endTimestamp: number = 0;
 
@@ -341,7 +269,7 @@ export default class DashboardStore implements IDashboardStore {
         );
     }
 
-    getDashboard(dashboardId: string): IDashboard | null {
+    getDashboard(dashboardId: string): Dashboard | null {
         return (
             this.dashboards.find((d) => d.dashboardId === dashboardId) || null
         );
@@ -389,7 +317,7 @@ export default class DashboardStore implements IDashboardStore {
         this.siteId = siteId;
     };
 
-    fetchTemplates(hardRefresh): Promise<any> {
+    fetchTemplates(hardRefresh: boolean): Promise<any> {
         this.loadingTemplates = true
         return new Promise((resolve, reject) => {
             if (this.widgetCategories.length > 0 && !hardRefresh) {
@@ -474,7 +402,7 @@ export default class DashboardStore implements IDashboardStore {
         metric: IWidget,
         data: any,
         isWidget: boolean = false,
-        period: Period
+        period: Record<string, any>
     ): Promise<any> {
         period = period.toTimestamps();
         const params = { ...period, ...data, key: metric.predefinedKey };

frontend/app/mstore/index.tsx

@@ -1,6 +1,6 @@
 import React from 'react';
-import DashboardStore, { IDashboardStore } from './dashboardStore';
-import MetricStore, { IMetricStore } from './metricStore';
+import DashboardStore from './dashboardStore';
+import MetricStore from './metricStore';
 import UserStore from './userStore';
 import RoleStore from './roleStore';
 import APIClient from 'App/api_client';
@@ -13,8 +13,8 @@ import ErrorStore from './errorStore';
 import SessionStore from './sessionStore';
 
 export class RootStore {
-    dashboardStore: IDashboardStore;
-    metricStore: IMetricStore;
+    dashboardStore: DashboardStore;
+    metricStore: MetricStore;
     funnelStore: FunnelStore;
     settingsStore: SettingsStore;
     userStore: UserStore;

frontend/app/mstore/metricStore.ts

@@ -4,42 +4,7 @@ import { metricService, errorService } from "App/services";
 import { toast } from 'react-toastify';
 import Error from "./types/error";
 
-export interface IMetricStore {
-    paginatedList: any;
-
-    isLoading: boolean
-    isSaving: boolean
-
-    metrics: IWidget[]
-    instance: IWidget
-
-    page: number
-    pageSize: number
-    metricsSearch: string
-    sort: any
-
-    sessionsPage: number
-    sessionsPageSize: number
-    
-    // State Actions
-    init(metric?: IWidget|null): void
-    updateKey(key: string, value: any): void
-    merge(object: any): void
-    reset(meitricId: string): void
-    addToList(metric: IWidget): void
-    updateInList(metric: IWidget): void
-    findById(metricId: string): void
-    removeById(metricId: string): void
-    fetchError(errorId: string): Promise<any>
-
-    // API
-    save(metric: IWidget, dashboardId?: string): Promise<any>
-    fetchList(): void
-    fetch(metricId: string, period?: any): Promise<any>
-    delete(metric: IWidget): Promise<any>
-}
-
-export default class MetricStore implements IMetricStore {
+export default class MetricStore {
     isLoading: boolean = false
     isSaving: boolean = false
 

frontend/app/mstore/types/dashboard.ts

@@ -4,36 +4,7 @@ import { dashboardService  } from "App/services"
 import { toast } from 'react-toastify';
 import { DateTime } from 'luxon';
 
-export interface IDashboard {
-    dashboardId: any
-    name: string
-    description: string
-    isPublic: boolean
-    widgets: IWidget[]
-    metrics: any[]
-    isValid: boolean
-    currentWidget: IWidget
-    config: any
-    createdAt: Date
-
-    update(data: any): void
-    toJson(): any
-    fromJson(json: any): void
-    validate(): void
-    addWidget(widget: IWidget): void
-    removeWidget(widgetId: string): void
-    updateWidget(widget: IWidget): void
-    getWidget(widgetId: string): void
-    getWidgetIndex(widgetId: string): IWidget
-    getWidgetByIndex(index: number): void
-    getWidgetCount(): void
-    getWidgetIndexByWidgetId(widgetId: string): void
-    swapWidgetPosition(positionA: number, positionB: number): Promise<any>
-    sortWidgets(): void
-    exists(): boolean
-    toggleMetrics(metricId: string): void
-}
-export default class Dashboard implements IDashboard {
+export default class Dashboard {
     public static get ID_KEY():string { return "dashboardId" }
     dashboardId: any = undefined
     name: string = "Untitled Dashboard"
@@ -121,7 +92,7 @@ export default class Dashboard implements IDashboard {
         return this.widgets.findIndex(w => w.widgetId === widgetId)
     }
 
-    swapWidgetPosition(positionA, positionB): Promise<any> {
+    swapWidgetPosition(positionA: number, positionB: number): Promise<any> {
         const widgetA = this.widgets[positionA]
         const widgetB = this.widgets[positionB]
         this.widgets[positionA] = widgetB

frontend/app/mstore/types/filter.ts

@@ -1,24 +1,7 @@
 import { makeAutoObservable, runInAction, observable, action } from "mobx"
 import FilterItem from "./filterItem"
 
-export interface IFilter {
-    filterId: string
-    name: string
-    filters: FilterItem[]
-    eventsOrder: string
-    startTimestamp: number
-    endTimestamp: number
-
-    merge: (filter: any) => void
-    addFilter: (filter: FilterItem) => void
-    updateFilter: (index:number, filter: any) => void
-    updateKey: (key: any, value: any) => void
-    removeFilter: (index: number) => void
-    fromJson: (json: any) => void
-    toJson: () => any
-    toJsonDrilldown: () => any
-}
-export default class Filter implements IFilter {
+export default class Filter {
     public static get ID_KEY():string { return "filterId" }
     filterId: string = ''
     name: string = ''

frontend/app/mstore/types/funnel.ts

@@ -1,17 +1,6 @@
 import FunnelStage from './funnelStage'
 
-export interface IFunnel {
-    affectedUsers: number;
-    totalConversions: number;
-    totalConversionsPercentage: number;
-    conversionImpact: number
-    lostConversions: number
-    lostConversionsPercentage: number
-    isPublic: boolean
-    fromJSON: (json: any) => void
-}
-
-export default class Funnel implements IFunnel {
+export default class Funnel {
     affectedUsers: number = 0
     totalConversions: number = 0
     conversionImpact: number = 0
@@ -48,4 +37,4 @@ export default class Funnel implements IFunnel {
 
         return this
     }
-}
+}

frontend/app/mstore/types/role.ts

@@ -1,16 +1,7 @@
 import { makeAutoObservable, observable, runInAction } from "mobx";
 
-export interface IRole {
-    roleId: string;
-    name: string;
-    description: string;
-    isProtected: boolean;
 
-    fromJson(json: any);
-    toJson(): any;
-}
-
-export default class Role implements IRole {
+export default class Role {
     roleId: string = '';
     name: string = '';
     description: string = '';   
@@ -42,4 +33,4 @@ export default class Role implements IRole {
             description: this.description,
         }
     }
-}
+}

frontend/app/mstore/types/session.ts

@@ -14,23 +14,7 @@ function hashString(s: string): number {
   return hash;
 }
 
-export interface ISession {
-    sessionId: string
-    viewed: boolean
-    duration: number
-    metadata: any,
-    startedAt: number
-    userBrowser: string
-    userOs: string
-    userId: string
-    userDeviceType: string
-    userCountry: string
-    eventsCount: number
-    userNumericHash: number
-    userDisplayName: string
-}
-
-export default class Session implements ISession {
+export default class Session {
     sessionId: string = "";
     viewed: boolean = false
     duration: number = 0
@@ -76,4 +60,4 @@ export default class Session implements ISession {
         })  
         return this
     }
-}
+}

frontend/app/mstore/types/user.ts

@@ -2,26 +2,7 @@ import { runInAction, makeAutoObservable, observable } from 'mobx'
 import { DateTime } from 'luxon';
 import { validateEmail, validateName } from 'App/validate';
 
-export interface IUser {
-    userId: string
-    email: string
-    createdAt: string
-    isAdmin: boolean
-    isSuperAdmin: boolean
-    isJoined: boolean
-    isExpiredInvite: boolean
-    roleId: string
-    roleName: string
-    invitationLink: string
-
-
-    updateKey(key: string, value: any): void
-    fromJson(json: any): IUser
-    toJson(): any
-    toSave(): any
-}
-
-export default class User implements IUser {
+export default class User {
     userId: string = '';
     name: string = '';
     email: string = '';
@@ -102,4 +83,4 @@ export default class User implements IUser {
     exists() {
         return !!this.userId;
     }
-}
+}

frontend/app/mstore/types/widget.ts

@@ -8,55 +8,7 @@ import { issueOptions } from 'App/constants/filterOptions';
 import { FilterKey } from 'Types/filter/filterType';
 import Period, { LAST_24_HOURS, LAST_30_DAYS } from 'Types/app/period';
 
-export interface IWidget {
-    metricId: any
-    widgetId: any
-    name: string
-    metricType: string
-    metricOf: string
-    metricValue: string
-    metricFormat: string
-    viewType: string
-    series: FilterSeries[]
-    sessions: []
-    isPublic: boolean
-    owner: string
-    lastModified: Date
-    dashboards: any[]
-    dashboardIds: any[]
-    config: any
-
-    sessionsLoading: boolean
-
-    position: number
-    data: any
-    isLoading: boolean
-    isValid: boolean
-    dashboardId: any
-    colSpan: number
-    predefinedKey: string
-    
-    page: number
-    limit: number
-    params: any
-    period: any
-    hasChanged: boolean
-
-    updateKey(key: string, value: any): void
-    removeSeries(index: number): void
-    addSeries(): void
-    fromJson(json: any): void
-    toJsonDrilldown(): void
-    toJson(): any
-    validate(): void
-    update(data: any): void
-    exists(): boolean
-    toWidget(): any
-    setData(data: any): void
-    fetchSessions(metricId: any, filter: any): Promise<any>
-    setPeriod(period: any): void
-}
-export default class Widget implements IWidget {
+export default class Widget {
     public static get ID_KEY():string { return "metricId" }
     metricId: any = undefined
     widgetId: any = undefined
@@ -79,7 +31,7 @@ export default class Widget implements IWidget {
     limit: number = 5
     params: any = { density: 70 }
     
-    period: any = Period({ rangeName: LAST_24_HOURS }) // temp value in detail view
+    period: Record<string, any> = Period({ rangeName: LAST_24_HOURS }) // temp value in detail view
     hasChanged: boolean = false
 
     sessionsLoading: boolean = false

frontend/app/services/DashboardService.ts

@@ -1,27 +1,8 @@
-import { IDashboard } from "App/mstore/types/dashboard";
+import Dashboard from "App/mstore/types/dashboard";
 import APIClient from 'App/api_client';
-import { IWidget } from "App/mstore/types/widget";
+import Widget from "App/mstore/types/widget";
 
-export interface IDashboardService {
-    initClient(client?: APIClient)
-    getWidgets(dashboardId: string): Promise<any>
-    
-    getDashboards(): Promise<any[]>
-    getDashboard(dashboardId: string): Promise<any>
-
-    saveDashboard(dashboard: IDashboard): Promise<any>
-    deleteDashboard(dashboardId: string): Promise<any>
-
-    saveMetric(metric: IWidget, dashboardId?: string): Promise<any>
-
-    addWidget(dashboard: IDashboard, metricIds: []): Promise<any>
-    saveWidget(dashboardId: string, widget: IWidget): Promise<any>
-    deleteWidget(dashboardId: string, widgetId: string): Promise<any>
-    
-}
-
-
-export default class DashboardService implements IDashboardService {
+export default class DashboardService {
     private client: APIClient;
 
     constructor(client?: APIClient) {
@@ -70,7 +51,7 @@ export default class DashboardService implements IDashboardService {
      * @param dashboard Required
      * @returns {Promise<any>}
      */
-    saveDashboard(dashboard: IDashboard): Promise<any> {
+    saveDashboard(dashboard: Dashboard): Promise<any> {
         const data = dashboard.toJson();
         if (dashboard.dashboardId) {
             return this.client.put(`/dashboards/${dashboard.dashboardId}`, data)
@@ -89,7 +70,7 @@ export default class DashboardService implements IDashboardService {
      * @param metricIds 
      * @returns 
      */
-    addWidget(dashboard: IDashboard, metricIds: any): Promise<any> {
+    addWidget(dashboard: Dashboard, metricIds: any): Promise<any> {
         const data = dashboard.toJson()
         data.metrics = metricIds
         return this.client.put(`/dashboards/${dashboard.dashboardId}`, data)
@@ -114,7 +95,7 @@ export default class DashboardService implements IDashboardService {
      * @param dashboardId Optional
      * @returns {Promise<any>}
      */
-    saveMetric(metric: IWidget, dashboardId?: string): Promise<any> {
+    saveMetric(metric: Widget, dashboardId?: string): Promise<any> {
         const data = metric.toJson();
         const path = dashboardId ? `/dashboards/${dashboardId}/metrics` : '/metrics';
         if (metric.widgetId) {
@@ -140,7 +121,7 @@ export default class DashboardService implements IDashboardService {
      * @param widget Required
      * @returns {Promise<any>}
      */
-    saveWidget(dashboardId: string, widget: IWidget): Promise<any> {
+    saveWidget(dashboardId: string, widget: Widget): Promise<any> {
         if (widget.widgetId) {
             return this.client.put(`/dashboards/${dashboardId}/widgets/${widget.widgetId}`, widget.toWidget())
                 .then(response => response.json())

frontend/app/services/FunnelService.ts

@@ -1,19 +1,7 @@
-import { IFunnel } from "App/mstore/types/funnel"
+import IFunnel from "App/mstore/types/funnel"
 import APIClient from 'App/api_client';
 
-export interface IFunnelService {
-    initClient(client?: APIClient)
-    all(): Promise<any[]>
-    one(funnelId: string): Promise<any>
-    save(funnel: IFunnel): Promise<any>
-    delete(funnelId: string): Promise<any>
-
-    fetchInsights(funnelId: string, payload: any): Promise<any>
-    fetchIssues(funnelId?: string, payload?: any): Promise<any>
-    fetchIssue(funnelId: string, issueId: string): Promise<any>
-}
-
-export default class FunnelService implements IFunnelService {
+export default class FunnelService {
     private client: APIClient;
 
     constructor(client?: APIClient) {
@@ -62,4 +50,4 @@ export default class FunnelService implements IFunnelService {
             .then(response => response.json())
             .then(response => response.data || {});
     }
-}
+}

frontend/app/services/MetricService.ts

@@ -1,23 +1,8 @@
-import Widget, { IWidget } from "App/mstore/types/widget";
+import Widget from "App/mstore/types/widget";
 import APIClient from 'App/api_client';
-import { IFilter } from "App/mstore/types/filter";
 import { fetchErrorCheck } from "App/utils";
 
-export interface IMetricService {
-    initClient(client?: APIClient): void;
-
-    getMetrics(): Promise<any>;
-    getMetric(metricId: string): Promise<any>;
-    saveMetric(metric: IWidget, dashboardId?: string): Promise<any>;
-    deleteMetric(metricId: string): Promise<any>;
-
-    getTemplates(): Promise<any>;
-    getMetricChartData(metric: IWidget, data: any, isWidget: boolean): Promise<any>;
-    fetchSessions(metricId: string, filter: any): Promise<any>
-    fetchIssues(filter: string): Promise<any>;
-}
-
-export default class MetricService implements IMetricService {
+export default class MetricService {
     private client: APIClient;
 
     constructor(client?: APIClient) {
@@ -54,7 +39,7 @@ export default class MetricService implements IMetricService {
      * @param metric 
      * @returns 
      */
-    saveMetric(metric: IWidget, dashboardId?: string): Promise<any> {
+    saveMetric(metric: Widget, dashboardId?: string): Promise<any> {
         const data = metric.toJson()
         const isCreating = !data[Widget.ID_KEY];
         const method = isCreating ? 'post' : 'put';
@@ -86,7 +71,7 @@ export default class MetricService implements IMetricService {
             .then((response: { data: any; }) => response.data || []);
     }
 
-    getMetricChartData(metric: IWidget, data: any, isWidget: boolean = false): Promise<any> {
+    getMetricChartData(metric: Widget, data: any, isWidget: boolean = false): Promise<any> {
         const path = isWidget ? `/metrics/${metric.metricId}/chart` : `/metrics/try`;
         return this.client.post(path, data)
             .then(fetchErrorCheck)
@@ -115,4 +100,4 @@ export default class MetricService implements IMetricService {
             .then((response: { json: () => any; }) => response.json())
             .then((response: { data: any; }) => response.data || {});
     }
-}
+}

frontend/app/services/index.ts

@@ -6,10 +6,10 @@ import UserService from "./UserService";
 import AuditService from './AuditService';
 import ErrorService from "./ErrorService";
 
-export const dashboardService: IDashboardService  = new DashboardService();
-export const metricService: IMetricService = new MetricService();
-export const sessionService: SessionSerivce = new SessionSerivce();
-export const userService: UserService = new UserService();
-export const funnelService: IFunnelService = new FunnelService();
-export const auditService: AuditService = new AuditService();
-export const errorService: ErrorService = new ErrorService();
+export const dashboardService  = new DashboardService();
+export const metricService = new MetricService();
+export const sessionService = new SessionSerivce();
+export const userService = new UserService();
+export const funnelService = new FunnelService();
+export const auditService = new AuditService();
+export const errorService = new ErrorService();

frontend/app/styles/colors-autogen.css

@@ -35,6 +35,7 @@
 .fill-light-blue-bg { fill: $light-blue-bg }
 .fill-white { fill: $white }
 .fill-borderColor { fill: $borderColor }
+.fill-figmaColors { fill: $figmaColors }
 
 /* color */
 .color-main { color: $main }
@@ -71,6 +72,7 @@
 .color-light-blue-bg { color: $light-blue-bg }
 .color-white { color: $white }
 .color-borderColor { color: $borderColor }
+.color-figmaColors { color: $figmaColors }
 
 /* hover color */
 .hover-main:hover { color: $main }
@@ -107,6 +109,7 @@
 .hover-light-blue-bg:hover { color: $light-blue-bg }
 .hover-white:hover { color: $white }
 .hover-borderColor:hover { color: $borderColor }
+.hover-figmaColors:hover { color: $figmaColors }
 
 .border-main { border-color: $main }
 .border-gray-light-shade { border-color: $gray-light-shade }
@@ -142,3 +145,4 @@
 .border-light-blue-bg { border-color: $light-blue-bg }
 .border-white { border-color: $white }
 .border-borderColor { border-color: $borderColor }
+.border-figmaColors { border-color: $figmaColors }