refactor: #1145 refactor billing bar chart

Changes
- Rename to developer-analytics
- Move to specific folder to manage easily

packages/marketplace/src/components/pages/__tests__/__snapshots__/analytics.tsx.snap → packages/marketplace/src/components/pages/developer-analytics/__tests__/__snapshots__/developer-analytics.tsx.snap

@@ -1,12 +1,12 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`AnalyticsPage renenderTabContent should render Billing Tab 1`] = `
+exports[`AnalyticsPage renderTabContent should render Billing Tab 1`] = `
 <div>
   <Component />
 </div>
 `;
 
-exports[`AnalyticsPage renenderTabContent should render Detailed Tab 1`] = `
+exports[`AnalyticsPage renderTabContent should render Detailed Tab 1`] = `
 <div>
   <Component />
 </div>

packages/marketplace/src/components/pages/__tests__/analytics.tsx → packages/marketplace/src/components/pages/developer-analytics/__tests__/developer-analytics.tsx

@@ -1,8 +1,8 @@
 import * as React from 'react'
 import { shallow } from 'enzyme'
 
-import { AnalyticsTab, handleUseEffectToSetCurrentTab, renenderTabContent, tabConfigs } from '../analytics'
-import AnalyticsPage from '../analytics'
+import { AnalyticsTab, handleUseEffectToSetCurrentTab, renderTabContent, tabConfigs } from '../developer-analytics'
+import AnalyticsPage from '../developer-analytics'
 
 jest.mock('react-router-dom', () => ({
   ...jest.requireActual('react-router-dom'), // use actual for all non-hook parts
@@ -59,14 +59,14 @@ describe('AnalyticsPage', () => {
       expect(mockSetCurrentTab).toBeCalledWith(AnalyticsTab.DETAILED)
     })
   })
-  describe('renenderTabContent', () => {
+  describe('renderTabContent', () => {
     it('should render Detailed Tab', () => {
-      const result = renenderTabContent(AnalyticsTab.DETAILED)
+      const result = renderTabContent(AnalyticsTab.DETAILED)
       const wrapper = shallow(<div>{result}</div>)
       expect(wrapper).toMatchSnapshot()
     })
     it('should render Billing Tab', () => {
-      const result = renenderTabContent(AnalyticsTab.BILLING)
+      const result = renderTabContent(AnalyticsTab.BILLING)
       const wrapper = shallow(<div>{result}</div>)
       expect(wrapper).toMatchSnapshot()
     })

packages/marketplace/src/components/pages/analytics.tsx → packages/marketplace/src/components/pages/developer-analytics/developer-analytics.tsx

@@ -2,12 +2,12 @@ import * as React from 'react'
 import { useHistory, useParams } from 'react-router-dom'
 import { Tabs, FlexContainerBasic, FlexContainerResponsive, H3, TabConfig } from '@reapit/elements'
 import ErrorBoundary from '@/components/hocs/error-boundary'
-import DetailedTab from '../ui/analytics/detailed/detailed-tab'
-import BillingTab from '../ui/analytics/billing/billing-tab'
+import DetailedTab from '@/components/ui/developer-analytics/detailed'
+import BillingTab from '@/components/ui/developer-analytics/billing'
 import Routes from '@/constants/routes'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 
-export type AnalyticsPageProps = {}
+export type DeveloperAnalyticsPageProps = {}
 
 export type TabConfigsProps = {
   currentTab: string
@@ -59,7 +59,7 @@ export const handleUseEffectToSetCurrentTab = (activeTab, setCurrentTab) => {
   }
 }
 
-export const renenderTabContent = currentTab => {
+export const renderTabContent = currentTab => {
   switch (currentTab) {
     case AnalyticsTab.DETAILED:
       return <DetailedTab />
@@ -70,7 +70,7 @@ export const renenderTabContent = currentTab => {
   }
 }
 
-export const AnalyticsPage: React.FC<AnalyticsPageProps> = () => {
+export const DeveloperAnalyticsPage: React.FC<DeveloperAnalyticsPageProps> = () => {
   const [currentTab, setCurrentTab] = React.useState<AnalyticsTab>(AnalyticsTab.DETAILED)
   const history = useHistory()
   const { activeTab } = useParams()
@@ -85,11 +85,11 @@ export const AnalyticsPage: React.FC<AnalyticsPageProps> = () => {
           <div className={styles.tabContainer}>
             <Tabs tabConfigs={tabConfigs({ currentTab, history })} />
           </div>
-          <div>{renenderTabContent(currentTab)}</div>
+          <div>{renderTabContent(currentTab)}</div>
         </FlexContainerResponsive>
       </FlexContainerBasic>
     </ErrorBoundary>
   )
 }
 
-export default AnalyticsPage
+export default DeveloperAnalyticsPage

packages/marketplace/src/components/pages/developer-analytics/index.ts

@@ -0,0 +1,3 @@
+import DeveloperAnalytics from './developer-analytics'
+
+export default DeveloperAnalytics

packages/marketplace/src/components/ui/__stubs__/developer-installations-chart-data.ts

@@ -1,4 +1,4 @@
-import { InstallationModelWithAppName } from '@/components/ui/analytics/detailed/installation-table'
+import { InstallationModelWithAppName } from '@/components/ui/developer-analytics/detailed/installation-table'
 
 export const installedAppsStub: Array<InstallationModelWithAppName> = [
   {

packages/marketplace/src/components/ui/analytics/billing/billing-tab.tsx → packages/marketplace/src/components/ui/developer-analytics/billing/billing-tab.tsx

@@ -3,7 +3,7 @@ import CostCalculator from './cost-calculator'
 import TransactionHistory from './transaction-history'
 import { FlexContainerResponsive, FlexContainerBasic, Grid, GridItem } from '@reapit/elements'
 import ErrorBoundary from '@/components/hocs/error-boundary'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 import ServiceChart from './service-chart'
 import CostExplorer from './cost-explorer'
 

packages/marketplace/src/components/ui/analytics/billing/cost-calculator/cost-calculator-form.tsx → packages/marketplace/src/components/ui/developer-analytics/billing/cost-calculator/cost-calculator-form.tsx

@@ -11,7 +11,7 @@ import {
   FormikErrors,
   isNumberOnly,
 } from '@reapit/elements'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 
 export type CostCalculatorFormProps = {
   initialValues: CostCalculatorFormValues

packages/marketplace/src/components/ui/analytics/billing/cost-calculator/total-cost-table.tsx → packages/marketplace/src/components/ui/developer-analytics/billing/cost-calculator/total-cost-table.tsx

@@ -4,7 +4,7 @@ import { CostCalculatorFormValues } from './cost-calculator-form'
 import { EndpointsUsedRange, TierPrice } from './cost-calculator'
 import { formatCurrency, formatNumber } from '@/utils/number-formatter'
 import { Table, Grid, GridItem, H6, H4, Button } from '@reapit/elements'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 
 export type TotalCostTableProps = {
   formValues: CostCalculatorFormValues

packages/marketplace/src/components/ui/analytics/billing/service-chart/service-chart.tsx → packages/marketplace/src/components/ui/developer-analytics/billing/service-chart/service-chart.tsx

@@ -1,7 +1,7 @@
 import React from 'react'
 import { Bar } from 'react-chartjs-2'
 import { H4, FlexContainerResponsive } from '@reapit/elements'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 
 // TODO will replace mock data when have API
 const data = {

packages/marketplace/src/components/ui/analytics/billing/transaction-history/transaction-history.tsx → packages/marketplace/src/components/ui/developer-analytics/billing/transaction-history/transaction-history.tsx

@@ -1,6 +1,6 @@
 import * as React from 'react'
 import { H4, Grid, GridItem, H6 } from '@reapit/elements'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 
 export type TransactionHistoryProps = {}
 

packages/marketplace/src/components/ui/analytics/detailed/detailed-tab.tsx → packages/marketplace/src/components/ui/developer-analytics/detailed/detailed-tab.tsx

@@ -19,7 +19,7 @@ import InstallationTable, { InstallationModelWithAppName } from './installation-
 import FilterBar from './filter-bar'
 import ErrorBoundary from '@/components/hocs/error-boundary'
 import { GET_ALL_PAGE_SIZE } from '@/constants/paginator'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 import { AppInstallationsState } from '@/reducers/app-installations'
 import { DeveloperState } from '@/reducers/developer'
 import { AppUsageStatsState } from '@/reducers/app-usage-stats'

packages/marketplace/src/components/ui/analytics/detailed/installation-table.tsx → packages/marketplace/src/components/ui/developer-analytics/detailed/installation-table.tsx

@@ -4,7 +4,7 @@ import { InstallationModel, AppSummaryModel } from '@reapit/foundations-ts-defin
 import { AppInstallationsState } from '@/reducers/app-installations'
 import { DeveloperState } from '@/reducers/developer'
 import { INSTALLATIONS_PER_PAGE } from '@/constants/paginator'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 
 export interface InstallationModelWithAppName extends InstallationModel {
   appName?: string

packages/marketplace/src/components/ui/developer-installations-chart.tsx

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import { Line } from 'react-chartjs-2'
 import { H4, Loader } from '@reapit/elements'
-import { InstallationModelWithAppName } from '@/components/ui/analytics/detailed/installation-table'
+import { InstallationModelWithAppName } from '@/components/ui/developer-analytics/detailed/installation-table'
 import { groupInstalledAppsByDate, getChartData, groupAppsByNameAndCount } from '@/utils/developer-analytics'
 
 export interface DeveloperInstallationsChartProps {

packages/marketplace/src/components/ui/developer-traffic-table.tsx

@@ -1,7 +1,7 @@
 import React, { useMemo } from 'react'
 import { UsageStatsModel, PagedResultAppSummaryModel_, AppUsageStatsModel } from '@reapit/foundations-ts-definitions'
 import { H4, Table, toLocalTime, Loader } from '@reapit/elements'
-import styles from '@/styles/pages/analytics.scss?mod'
+import styles from '@/styles/pages/developer-analytics.scss?mod'
 
 export interface DeveloperAppTrafficProps {
   stats: UsageStatsModel

packages/marketplace/src/core/router.tsx

@@ -26,7 +26,7 @@ const DeveloperSettings = React.lazy(() => import('../components/pages/settings/
 const DeveloperWelcomePage = React.lazy(() => import('../components/pages/developer-welcome'))
 const DeveloperHelpPage = React.lazy(() => import('../components/pages/developer-help'))
 const ClientHelpPage = React.lazy(() => import('../components/pages/client-help'))
-const AnalyticsPage = React.lazy(() => import('../components/pages/analytics'))
+const AnalyticsPage = React.lazy(() => import('@/components/pages/developer-analytics'))
 const AdminAppsPage = React.lazy(() => import('../components/pages/admin-apps'))
 const RegisterConfirm = React.lazy(() => import('../components/pages/register-confirm'))
 const AdminStats = React.lazy(() => import('../components/pages/admin-stats'))

packages/marketplace/src/utils/developer-analytics.ts

@@ -1,6 +1,6 @@
 import dayjs from 'dayjs'
 import orderBy from 'lodash.orderby'
-import { InstallationModelWithAppName } from '@/components/ui/analytics/detailed/installation-table'
+import { InstallationModelWithAppName } from '@/components/ui/developer-analytics/detailed/installation-table'
 
 export interface InstallationModelWithDateObject extends InstallationModelWithAppName {
   createdDate: Date