feat: #238 - Update test - Fix general UI issues

reapit · Feb 13, 2020 · 9436a1f · 9436a1f
1 parent 4f6dee4
commit 9436a1f
Show file tree

Hide file tree

Showing 7 changed files with 558 additions and 487 deletions.
diff --git a/.eslintrc.js b/.eslintrc.js
@@ -39,12 +39,13 @@ module.exports = {
     'platform-schema.ts',
   ],
   rules: {
-    'linebreak-style': ['error', 'unix'],
     quotes: ['error', 'single', { avoidEscape: true, allowTemplateLiterals: false }],
     semi: ['error', 'never'],
     'no-unused-vars': ['error', { vars: 'all', args: 'after-used' }],
     '@typescript-eslint/no-unused-vars': [2, { args: 'none' }],
-    'prettier/prettier': 'error',
+    'prettier/prettier': ['error', {
+      'endOfLine': 'auto'
+    }],
     'max-len': ['error', { code: 120, ignoreUrls: true }],
     'no-confusing-arrow': ['error', { allowParens: false }],
     'no-mixed-operators': [

diff --git a/packages/marketplace/src/components/pages/__tests__/__snapshots__/analytics.tsx.snap b/packages/marketplace/src/components/pages/__tests__/__snapshots__/analytics.tsx.snap
diff --git a/packages/marketplace/src/components/pages/analytics.tsx b/packages/marketplace/src/components/pages/analytics.tsx
@@ -1,6 +1,17 @@
 import * as React from 'react'
 import ErrorBoundary from '@/components/hocs/error-boundary'
-import { Table, FlexContainerBasic, H3, H4, Loader, toLocalTime, Pagination, Grid, GridItem } from '@reapit/elements'
+import {
+  Table,
+  FlexContainerBasic,
+  H3,
+  H4,
+  Loader,
+  toLocalTime,
+  Pagination,
+  Grid,
+  GridItem,
+  FlexContainerResponsive,
+} from '@reapit/elements'
 import orderBy from 'lodash.orderby'
 import { Dispatch } from 'redux'
 import { connect } from 'react-redux'
@@ -161,14 +172,14 @@ export const InstallationTable: React.FC<{
       ) : (
         <>
           <H4>Installations</H4>
-          <p>
+          <p className="is-italic">
             The installations table below shows the individual installations per client with a total number of
             installations per app
           </p>
           <div className={styles.totalCount}>
             {Object.entries(appCountEntries).map(([appName, count]) => (
               <p key={appName}>
-                Total current installation for <strong>{appName}</strong>: {count}
+                Total current installations for <strong>{appName}</strong>: {count}
               </p>
             ))}
           </div>
@@ -216,24 +227,30 @@ export const AnalyticsPage: React.FC<AnalyticsPageProps> = ({ installations, dev
 
   return (
     <ErrorBoundary>
-      <FlexContainerBasic hasPadding flexColumn className={styles.wrapAnalytics}>
-        <H3>Dashboard</H3>
-        <hr className={styles.hr} />
-        <Grid isMultiLine>
-          <GridItem>
-            <DeveloperInstallationsChart data={installationAppDataArrayWithName} loading={installationsAppLoading} />
-          </GridItem>
-          <GridItem>
-            <DeveloperTrafficChart stats={appUsageStatsData} apps={developerAppsData} loading={appUsageStatsLoading} />
-          </GridItem>
-        </Grid>
-        <DeveloperTrafficTable stats={appUsageStatsData} apps={developerAppsData} loading={appUsageStatsLoading} />
-        <InstallationTable
-          installedApps={installationAppDataArrayWithName}
-          installations={installations}
-          developer={developer}
-          loading={installationsAppLoading}
-        />
+      <FlexContainerBasic hasPadding flexColumn>
+        <FlexContainerResponsive flexColumn hasBackground hasPadding className={styles.wrapAnalytics}>
+          <H3>Dashboard</H3>
+          <hr className={styles.hr} />
+          <Grid isMultiLine>
+            <GridItem>
+              <DeveloperInstallationsChart data={installationAppDataArrayWithName} loading={installationsAppLoading} />
+            </GridItem>
+            <GridItem>
+              <DeveloperTrafficChart
+                stats={appUsageStatsData}
+                apps={developerAppsData}
+                loading={appUsageStatsLoading}
+              />
+            </GridItem>
+          </Grid>
+          <DeveloperTrafficTable stats={appUsageStatsData} apps={developerAppsData} loading={appUsageStatsLoading} />
+          <InstallationTable
+            installedApps={installationAppDataArrayWithName}
+            installations={installations}
+            developer={developer}
+            loading={installationsAppLoading}
+          />
+        </FlexContainerResponsive>
       </FlexContainerBasic>
     </ErrorBoundary>
   )

diff --git a/...es/marketplace/src/components/ui/__tests__/__snapshots__/developer-traffic-table.tsx.snap b/...es/marketplace/src/components/ui/__tests__/__snapshots__/developer-traffic-table.tsx.snap
@@ -5,7 +5,9 @@ exports[`DeveloperTrafficTable should match a snapshot 1`] = `
   <Component>
     Traffic
   </Component>
-  <p>
+  <p
+    className="is-italic"
+  >
     The traffic table below shows all API calls made against each of your applications since the date your app was created
   </p>
   <Component
@@ -43,5 +45,11 @@ exports[`DeveloperTrafficTable should match a snapshot 1`] = `
     loading={false}
     scrollable={true}
   />
+  <Component
+    className="undefined is-pulled-right"
+  >
+    Total API Calls: 
+    5
+  </Component>
 </div>
 `;
diff --git a/packages/marketplace/src/components/ui/__tests__/developer-traffic-table.tsx b/packages/marketplace/src/components/ui/__tests__/developer-traffic-table.tsx
@@ -4,6 +4,7 @@ import DeveloperTrafficTable, {
   DeveloperAppTrafficProps,
   generateUsageStatsData,
   AppUsageStats,
+  calculateTotalRequest,
 } from '../developer-traffic-table'
 import { appsDataStub } from '@/sagas/__stubs__/apps'
 import { usageStatsDataStub } from '@/sagas/__stubs__/app-usage-stats'
@@ -41,4 +42,16 @@ describe('DeveloperTrafficTable', () => {
       expect(result).toEqual(undefined)
     })
   })
+
+  describe('calculate total api request', () => {
+    it('should run correctly', () => {
+      const props = {
+        apps: appsDataStub.data,
+        stats: usageStatsDataStub,
+      }
+      const usageStatsData = generateUsageStatsData(props)()
+      const result = calculateTotalRequest(usageStatsData)
+      expect(result).toEqual(5)
+    })
+  })
 })
diff --git a/packages/marketplace/src/components/ui/developer-traffic-table.tsx b/packages/marketplace/src/components/ui/developer-traffic-table.tsx
@@ -1,6 +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'
 
 export interface DeveloperAppTrafficProps {
   stats: UsageStatsModel
@@ -44,7 +45,10 @@ export const generateUsageStatsColumns = () => () => {
   ]
 }
 
-export const calculateTotalRequest = (usageStatsData: AppUsageStats[]) => {
+export const calculateTotalRequest = (usageStatsData?: AppUsageStats[]) => {
+  if (!usageStatsData) {
+    return 0
+  }
   return usageStatsData.reduce((previousValue, currentValue) => {
     const requests = currentValue.requests || 0
     return previousValue + requests
@@ -56,7 +60,11 @@ const DeveloperTrafficTable: React.FC<DeveloperAppTrafficProps> = ({ stats, apps
   const usageStatsColumns = useMemo(generateUsageStatsColumns(), [usageStatsData])
 
   const renderTotalRequest = () => {
-    return <H4 className="is-pulled-right">Total API Calls: {calculateTotalRequest(usageStatsData)}</H4>
+    return (
+      <H4 className={`${styles.totalCount} is-pulled-right`}>
+        Total API Calls: {calculateTotalRequest(usageStatsData)}
+      </H4>
+    )
   }
 
   return (
@@ -66,7 +74,7 @@ const DeveloperTrafficTable: React.FC<DeveloperAppTrafficProps> = ({ stats, apps
       ) : (
         <>
           <H4>Traffic</H4>
-          <p>
+          <p className="is-italic">
             The traffic table below shows all API calls made against each of your applications since the date your app
             was created
           </p>

diff --git a/packages/marketplace/src/styles/pages/analytics.scss b/packages/marketplace/src/styles/pages/analytics.scss
@@ -1,8 +1,14 @@
+@import '../base/colors.scss';
+
+.wrapAnalytics {
+  width: 100%;
+}
 .hr {
   margin: 0 0 20px;
-  border: 1px solid rgba(0, 0, 0, 0.5);
+  border: 0.5px solid $grey;
+  height: 1px;
 }
 .totalCount {
-  font-size: 1.2rem;
+  font-size: 1rem;
   margin: 1rem 0;
 }