feat: #8392 #8059 improves installations handling (#8395)

* feat: #8392 #8059 improves installation handling * fix: release dev fix
reapit · Jan 24, 2023 · 56b6c06 · 56b6c06
1 parent 13c93c2
commit 56b6c06
Show file tree

Hide file tree

Showing 19 changed files with 195 additions and 248 deletions.
diff --git a/...ges/admin-portal/src/components/installations/__tests__/__snapshots__/index.test.tsx.snap b/...ges/admin-portal/src/components/installations/__tests__/__snapshots__/index.test.tsx.snap
@@ -811,7 +811,9 @@ Object {
                 <div
                   class="el-table-cell-content"
                   data-narrow-label="Customer Name"
-                />
+                >
+                  Sandbox Estates
+                </div>
               </div>
               <div
                 class="el-table-cell-has-dark-text el-table-cell"
@@ -915,23 +917,29 @@ Object {
                 <div
                   class="el-table-cell-content"
                   data-narrow-label="App Name"
-                />
+                >
+                  App Test Name
+                </div>
               </div>
               <div
                 class="el-table-cell"
               >
                 <div
                   class="el-table-cell-content"
                   data-narrow-label="Reapit Customer Code"
-                />
+                >
+                  SBOX
+                </div>
               </div>
               <div
                 class="el-table-cell"
               >
                 <div
                   class="el-table-cell-content"
                   data-narrow-label="Customer Address"
-                />
+                >
+                  67-74 Third Floor Saffron Hill London EC1N 8QX
+                </div>
               </div>
               <div
                 class="el-table-cell"
@@ -940,7 +948,7 @@ Object {
                   class="el-table-cell-content"
                   data-narrow-label="Date Installed"
                 >
-                  04-03-2021
+                  23-03-2022
                 </div>
               </div>
               <div
@@ -949,7 +957,9 @@ Object {
                 <div
                   class="el-table-cell-content"
                   data-narrow-label="Installed By"
-                />
+                >
+                  [email protected]
+                </div>
               </div>
               <div
                 class="el-table-cell"
@@ -967,9 +977,7 @@ Object {
                 <div
                   class="el-table-cell-content"
                   data-narrow-label="Uninstalled By"
-                >
-                  -
-                </div>
+                />
               </div>
             </div>
           </div>
@@ -1359,7 +1367,9 @@ Object {
               <div
                 class="el-table-cell-content"
                 data-narrow-label="Customer Name"
-              />
+              >
+                Sandbox Estates
+              </div>
             </div>
             <div
               class="el-table-cell-has-dark-text el-table-cell"
@@ -1463,23 +1473,29 @@ Object {
               <div
                 class="el-table-cell-content"
                 data-narrow-label="App Name"
-              />
+              >
+                App Test Name
+              </div>
             </div>
             <div
               class="el-table-cell"
             >
               <div
                 class="el-table-cell-content"
                 data-narrow-label="Reapit Customer Code"
-              />
+              >
+                SBOX
+              </div>
             </div>
             <div
               class="el-table-cell"
             >
               <div
                 class="el-table-cell-content"
                 data-narrow-label="Customer Address"
-              />
+              >
+                67-74 Third Floor Saffron Hill London EC1N 8QX
+              </div>
             </div>
             <div
               class="el-table-cell"
@@ -1488,7 +1504,7 @@ Object {
                 class="el-table-cell-content"
                 data-narrow-label="Date Installed"
               >
-                04-03-2021
+                23-03-2022
               </div>
             </div>
             <div
@@ -1497,7 +1513,9 @@ Object {
               <div
                 class="el-table-cell-content"
                 data-narrow-label="Installed By"
-              />
+              >
+                [email protected]
+              </div>
             </div>
             <div
               class="el-table-cell"
@@ -1515,9 +1533,7 @@ Object {
               <div
                 class="el-table-cell-content"
                 data-narrow-label="Uninstalled By"
-              >
-                -
-              </div>
+              />
             </div>
           </div>
         </div>

diff --git a/packages/admin-portal/src/components/installations/__tests__/index.test.tsx b/packages/admin-portal/src/components/installations/__tests__/index.test.tsx
@@ -3,7 +3,6 @@ import { useReapitGet } from '@reapit/utils-react'
 import { Installations } from '../index'
 import { render } from '../../../tests/react-testing'
 import { mockInstallationModelPagedResult } from '../../../tests/__stubs__/installations'
-import { mockAppSummaryModelPagedResult } from '../../../tests/__stubs__/apps'
 
 jest.mock('@reapit/utils-react', () => ({
   useReapitGet: jest.fn(() => [null, false]),
@@ -21,9 +20,7 @@ describe('Installations', () => {
   })
 
   it('should render component with data', () => {
-    mockUseReapitGet
-      .mockReturnValue([mockInstallationModelPagedResult, false])
-      .mockReturnValue([mockAppSummaryModelPagedResult, false])
+    mockUseReapitGet.mockReturnValue([mockInstallationModelPagedResult, false])
     expect(render(<Installations />)).toMatchSnapshot()
   })
 })
diff --git a/packages/admin-portal/src/components/installations/index.tsx b/packages/admin-portal/src/components/installations/index.tsx
@@ -1,9 +1,5 @@
-import React, { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
-import {
-  AppSummaryModelPagedResult,
-  InstallationModel,
-  InstallationModelPagedResult,
-} from '@reapit/foundations-ts-definitions'
+import React, { FC, useState } from 'react'
+import { InstallationModelPagedResult } from '@reapit/foundations-ts-definitions'
 import {
   PageContainer,
   Loader,
@@ -21,7 +17,7 @@ import {
 import { useForm } from 'react-hook-form'
 import dayjs from 'dayjs'
 import { SearchableMultiSelect, useReapitGet } from '@reapit/utils-react'
-import { combineAddress, GetActionNames, getActions, isTruthy } from '@reapit/utils-common'
+import { combineAddress, GetActionNames, getActions } from '@reapit/utils-common'
 import { reapitConnectBrowserSession } from '../../core/connect-session'
 import { Statistics } from '../statistics'
 import { fetchDevelopersList } from '../../services/developers'
@@ -41,10 +37,6 @@ const defaultValues: InstallationFilters = {
   isInstalled: 'ALL',
 }
 
-export interface InstallationsWithAppName extends InstallationModelPagedResult {
-  data: (InstallationModel & { appName: string })[]
-}
-
 export const formatFilters = (installationsFilters: InstallationFilters) => {
   const { installedDateTo, installedDateFrom, isInstalled, appIds, clientId, companyName } = installationsFilters
 
@@ -65,38 +57,8 @@ export const formatFilters = (installationsFilters: InstallationFilters) => {
   }
 }
 
-export const handleSetAppNames =
-  (
-    setInstallationsWithAppName: Dispatch<SetStateAction<InstallationsWithAppName | null>>,
-    installations: InstallationModelPagedResult | null,
-    apps: AppSummaryModelPagedResult | null,
-    numberApps: number,
-  ) =>
-  () => {
-    const isCsvOutput = installations?.pageSize === 9999
-
-    if (isCsvOutput && apps?.data?.length !== numberApps) return
-
-    if (apps && installations) {
-      const installationsWithAppName = {
-        ...installations,
-        data: installations.data?.map((installation) => {
-          const appName = apps.data?.find((app) => app.id === installation.appId)?.name ?? ''
-
-          return {
-            ...installation,
-            appName,
-          }
-        }),
-      } as InstallationsWithAppName
-
-      setInstallationsWithAppName(installationsWithAppName)
-    }
-  }
-
 export const Installations: FC = () => {
   const [installationsFilters, setInstallationsFilters] = useState<InstallationFilters>(defaultValues)
-  const [installationsWithAppName, setInstallationsWithAppName] = useState<InstallationsWithAppName | null>(null)
   const [pageNumber, setPageNumber] = useState<number>(1)
   const [pageSize, setPageSize] = useState<number>(12)
 
@@ -121,26 +83,6 @@ export const Installations: FC = () => {
     },
   })
 
-  const appIds = new Set(installations?.data?.map((installation) => installation.appId).filter(isTruthy) ?? [])
-  const appIdArray = [...appIds]
-  const numberApps = appIdArray.length
-
-  const [apps] = useReapitGet<AppSummaryModelPagedResult>({
-    reapitConnectBrowserSession,
-    action: getActions(window.reapit.config.appEnv)[GetActionNames.getApps],
-    queryParams: {
-      id: appIdArray,
-      pageSize: 999,
-    },
-    fetchWhenTrue: [numberApps],
-  })
-
-  useEffect(handleSetAppNames(setInstallationsWithAppName, installations, apps, numberApps), [
-    apps,
-    numberApps,
-    installations,
-  ])
-
   return (
     <PageContainer>
       <Title>Installations</Title>
@@ -196,14 +138,14 @@ export const Installations: FC = () => {
           </InputWrap>
         </FormLayout>
       </form>
-      <Statistics area="INSTALLATIONS" data={installationsWithAppName} setPageSize={setPageSize} />
+      <Statistics area="INSTALLATIONS" data={installations} setPageSize={setPageSize} />
       {installationsLoading ? (
         <Loader />
       ) : (
         <>
           <Table
             className={elMb11}
-            rows={installationsWithAppName?.data?.map(
+            rows={installations?.data?.map(
               ({
                 customerName,
                 client,

diff --git a/packages/admin-portal/src/components/statistics/index.tsx b/packages/admin-portal/src/components/statistics/index.tsx
@@ -6,20 +6,20 @@ import {
   DeveloperModel,
   DeveloperModelPagedResult,
   InstallationModel,
+  InstallationModelPagedResult,
   ServiceItemBillingV2Model,
   SubscriptionModel,
 } from '@reapit/foundations-ts-definitions'
 import FileSaver from 'file-saver'
 import { ButtonGroup, Button, elMb11 } from '@reapit/elements'
-import { InstallationsWithAppName } from '../installations'
 import { SubsWithAppName } from '../subscriptions'
 import { toLocalTime } from '@reapit/utils-common'
 
 export type Area = 'APPS' | 'DEVELOPERS' | 'INSTALLATIONS' | 'BILLING' | 'SUBSCRIPTIONS'
 export type PagedData =
   | AppSummaryModelPagedResult
   | DeveloperModelPagedResult
-  | InstallationsWithAppName
+  | InstallationModelPagedResult
   | SubsWithAppName
 export type StatsDataType = PagedData | ServiceItemBillingV2Model[] | null
 

diff --git a/packages/admin-portal/src/tests/__stubs__/installations.ts b/packages/admin-portal/src/tests/__stubs__/installations.ts
@@ -16,6 +16,7 @@ export const mockInstallationModelPagedResult: InstallationModelPagedResult = {
       officeGroupName: '',
       installedBy: '[email protected]',
       uninstalledBy: '',
+      appName: 'App Test Name',
       customerAddress: {
         buildingName: 'Third Floor',
         buildingNumber: '67-74',

diff --git a/...rtal/src/components/analytics/installations/__tests__/installations-by-app-chart.test.tsx b/...rtal/src/components/analytics/installations/__tests__/installations-by-app-chart.test.tsx
@@ -1,6 +1,5 @@
 import React from 'react'
 import { render } from '../../../../tests/react-testing'
-import { mockAppSummaryModelPagedResult } from '../../../../tests/__stubs__/apps'
 import { mockInstallationModelPagedResult } from '../../../../tests/__stubs__/installations'
 import { handleSortChartData, InstallationsByAppChart } from '../installations-by-app-chart'
 
@@ -18,12 +17,12 @@ describe('InstallationsByAppChart', () => {
 
 describe('handleSortChartData', () => {
   it('should sort data into labels and data', () => {
-    const curried = handleSortChartData(mockInstallationModelPagedResult, mockAppSummaryModelPagedResult)
+    const curried = handleSortChartData(mockInstallationModelPagedResult)
     const result = curried()
 
     expect(result).toEqual({
-      labels: ['MOCK_APP_NAME'],
-      data: [2],
+      labels: ['MOCK_APP_NAME', 'MOCK_APP_NAME_TWO'],
+      data: [1, 1],
     })
   })
 })